2013/7/15 Walter Bender <walter.ben...@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 ..
_______________________________________________
Sugar-devel mailing list
Sugar-devel@lists.sugarlabs.org
http://lists.sugarlabs.org/listinfo/sugar-devel
