<div dir="ltr">Thanks for the input Walter and Manuel.<br>I've sent a mail to the <span style="color:rgb(0,0,0);font-family:sans-serif;font-size:13px;line-height:19.1875px"><a href="mailto:planetmaster@sugarlabs.org">planetmaster@sugarlabs.org</a> </span><div>
<span style="color:rgb(0,0,0);font-family:sans-serif;font-size:13px;line-height:19.1875px">Awaiting confirmation.<br><br>And yes, I'll keep updating it as I progress.</span></div></div><div class="gmail_extra"><br><br>
<div class="gmail_quote">On 16 July 2013 06:58, Walter Bender <span dir="ltr"><<a href="mailto:walter.bender@gmail.com" target="_blank">walter.bender@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Having just gone through the process of writing my first JS Sugar<br>
activity, I think it would be good to document a few things that I<br>
found confusing. (Undoubtedly, much of my confusion stems from my<br>
unfamiliarity with JS.) Maybe you can add these tidbits, refined, to<br>
your blog:<br>
<br>
(1) It wasn't clear to me how to add new buttons to the toolbar. I needed to:<br>
* add the button to index.html<br>
    <button class="toolbutton" id="new-button" title="New"></button><br>
* define the button style in css/activity.css<br>
    #main-toolbar #new-button {<br>
        background-image: url(../icons/new-button.svg);<br>
    }<br>
* add the callback to js/activity.js<br>
        var newButton = document.getElementById("new-button");<br>
        newButton.onclick = function () {<br>
            new_positions();<br>
        }<br>
<br>
(2) I suspect this is usual stuff for JS programmers, but new to me: I<br>
used handlebars.js to define templates for some labels I wanted to<br>
position onto some graphics. Important for the dynamic allocation of<br>
elements that I use in many activities.<br>
* in index.html, I added a div to hold the elements I define from the template<br>
    <div id="labelDiv"></div><br>
* in js/activity.js:<br>
        // Create label elements for each of our dots<br>
        template = Handlebars.compile(labelSource);<br>
        var labelElem = document.getElementById("labelDiv");<br>
        var html = template({labels:arrLabels});<br>
        labelElem.innerHTML = html;<br>
<br>
(3) For my graphics, I used Easeljs [1]. Pretty straight forward.<br>
* Let me define graphical elements (i.e., sprites)<br>
* and a canvas for drawing<br>
<br>
-walter<br>
<br>
<br>
[1] <a href="http://www.createjs.com/#!/EaselJS" target="_blank">http://www.createjs.com/#!/EaselJS</a><br>
<div class="im HOEnZb"><br>
On Mon, Jul 15, 2013 at 4:01 PM, suraj ks <<a href="mailto:suraj.gillespie@gmail.com">suraj.gillespie@gmail.com</a>> wrote:<br>
</div><div class="HOEnZb"><div class="h5">> Hi,<br>
><br>
> I started writing a blog tracking the development of the my GSoC '13 project<br>
><br>
> Sugar Framework for writing activity in full HTML5  here [1].<br>
><br>
> Basically, I've summed up my understanding of the working of the framework.<br>
><br>
> My initial plan was to post it on <a href="https://planet.gnome.org/" target="_blank">https://planet.gnome.org/</a> , but they seem<br>
> to be very selective on what blogs are relayed on the channel.<br>
> Since i started blogging very recently, I don't think I stand a chance of<br>
> getting my blog posted there.<br>
><br>
> It would be very helpful if someone from the community could relay it on<br>
> <a href="http://planet.gnome.org" target="_blank">planet.gnome.org</a>.<br>
><br>
> Will keep posting more stuffs in my blog as we progress.<br>
><br>
><br>
> Cheers!<br>
> Suraj<br>
><br>
</div></div><div class="HOEnZb"><div class="h5">> _______________________________________________<br>
> Sugar-devel mailing list<br>
> <a href="mailto:Sugar-devel@lists.sugarlabs.org">Sugar-devel@lists.sugarlabs.org</a><br>
> <a href="http://lists.sugarlabs.org/listinfo/sugar-devel" target="_blank">http://lists.sugarlabs.org/listinfo/sugar-devel</a><br>
><br>
<br>
<br>
<br>
--<br>
Walter Bender<br>
Sugar Labs<br>
<a href="http://www.sugarlabs.org" target="_blank">http://www.sugarlabs.org</a><br>
</div></div></blockquote></div><br></div>