[Sugar-devel] sugar-web - components API

[Manuel Quiñones]

MenuPalette landed in sugar-web.  It is a palette that contains
clickable items.  Like the ones in GTK, they have a label of text and
can have an icon.  When an item is clicked, the palette emits a signal
with information that contains the clicked element.  The API to create
a MenuPalette is this:


    menuData = [{label: "One", id: "one-button", icon: true},
                {label: "Two", id: "two-button", icon: true},
                ...];

    menuPalette = new menupalette.MenuPalette(invoker, undefined, menuData);


The icon is added in CSS right now, like:

    .palette #one-button span {
      background-image: url(../icons/one.svg);
    }


But when we have an icon lookup, it would be nice to pass the name of
the icon with the data, directly.

Note that this is a different approach we are taking in the toolbars,
where you can define the buttons in the HTML.  Daniel N asked me for
an explanation.

I think writting HTML directly makes sense for simple and static
content.  Like adding a <button> element copy/pasting another one from
index.html as explained here:

http://developer.sugarlabs.org/activity.md.html#adding%20a%20button%20to%20the%20toolbar

And also it makes the developer understand how HTML, CSS and JS work
together.  Of course that doesn't inhibit the developer to add the
button from JS, as explained here:

http://developer.sugarlabs.org/activity.md.html#adding%20html%20content%20dinamically

For the palette in question, its content is a bit complex: it can have
icons or not, and <span> elements are used for that.  So I decided to
provide a cleaner API and hide the details of the structure.
Structure that is very likely to change as we improve palettes, but
the data is less likely to change.

Opinions?


-- 
.. manuq ..