[Sugar-devel] Google Summer of Code Blog

[Manuel Quiñones]

2013/7/15 Walter Bender <walter.bender at gmail.com>:
> 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;

I would like to add this to sugar-docs.  Here is a pull request:

https://github.com/sugarlabs/sugar-docs/pull/37

It adds a section "First steps" with subsections "Adding a button to
the toolbar" and "Adding HTML content dinamically".

https://github.com/manuq/sugar-docs/blob/2180c25fbf829e2ffaa22a8a071b231323875184/activity.md#first-steps

--
.. manuq ..