[Sugar-devel] Google Summer of Code Blog

Walter Bender walter.bender at gmail.com
Mon Jul 15 21:28:25 EDT 2013


Having just gone through the process of writing my first JS Sugar
activity, I think it would be good to document a few things that I
found confusing. (Undoubtedly, much of my confusion stems from my
unfamiliarity with JS.) Maybe you can add these tidbits, refined, to
your blog:

(1) It wasn't clear to me how to add new buttons to the toolbar. I needed to:
* add the button to index.html
    <button class="toolbutton" id="new-button" title="New"></button>
* define the button style in css/activity.css
    #main-toolbar #new-button {
        background-image: url(../icons/new-button.svg);
    }
* add the callback to js/activity.js
        var newButton = document.getElementById("new-button");
        newButton.onclick = function () {
            new_positions();
        }

(2) I suspect this is usual stuff for JS programmers, but new to me: I
used handlebars.js to define templates for some labels I wanted to
position onto some graphics. Important for the dynamic allocation of
elements that I use in many activities.
* in index.html, I added a div to hold the elements I define from the template
    <div id="labelDiv"></div>
* in js/activity.js:
        // Create label elements for each of our dots
        template = Handlebars.compile(labelSource);
        var labelElem = document.getElementById("labelDiv");
        var html = template({labels:arrLabels});
        labelElem.innerHTML = html;

(3) For my graphics, I used Easeljs [1]. Pretty straight forward.
* Let me define graphical elements (i.e., sprites)
* and a canvas for drawing

-walter


[1] http://www.createjs.com/#!/EaselJS

On Mon, Jul 15, 2013 at 4:01 PM, suraj ks <suraj.gillespie at gmail.com> wrote:
> Hi,
>
> I started writing a blog tracking the development of the my GSoC '13 project
>
> Sugar Framework for writing activity in full HTML5  here [1].
>
> Basically, I've summed up my understanding of the working of the framework.
>
> My initial plan was to post it on https://planet.gnome.org/ , but they seem
> to be very selective on what blogs are relayed on the channel.
> Since i started blogging very recently, I don't think I stand a chance of
> getting my blog posted there.
>
> It would be very helpful if someone from the community could relay it on
> planet.gnome.org.
>
> Will keep posting more stuffs in my blog as we progress.
>
>
> Cheers!
> Suraj
>
> _______________________________________________
> Sugar-devel mailing list
> Sugar-devel at lists.sugarlabs.org
> http://lists.sugarlabs.org/listinfo/sugar-devel
>



-- 
Walter Bender
Sugar Labs
http://www.sugarlabs.org


More information about the Sugar-devel mailing list