Designing the User Interface

About Canvases

Every panel has a user interface (UI) that enables the user to interact with it. In Desktop Sidebar, a panel's UI is described using XML, with a simple textual language similar to HTML. This UI description is called a "canvas". In the canvas, the UI is assembled using various "controls" Desktop Sidebar provides, such as a text label, a list, a button, etc.

The canvas is described in the panel markup using the <canvas> element that is placed inside the <panel> element (see Creating a Panel for more information regarding the panel markup's structure).

Canvas Layouts

The controls inside the canvas are positioned using a certain layout type:

The layout type is specified in the panel markup using the layout attribute of the <canvas> element. The possible values are: flowlayout, docklayout, fixedlayout, and gridlayout, corresponding to the layout type list above.

Layouts can be nested one inside the other, to produce complex layouts. See the Sample Canvases sections for examples of how this can be done.

For more information on each layout type, click its name on the list above, or see the Canvas Layouts section.

Canvas Controls

Desktop Sidebar provides several controls to display different kinds of data on your panel:

A control is added to the panel by inserting an element into the panel's <canvas> element. The element names are: image, button, textoutput, listoutput, barchart, marquee, progressbar, and slider, corresponding to the control list above.

Each control has certain values that can be tweaked, such as the text of a Text Output or the file-name of an Image. These values are set using attributes of the control's element.

There are several attributes that are common to all controls. The most important one is id, which sets the internal identifier that is used to manipulate the control in the panel's code.

For more information on each control, click its name on the list above, or see the Canvas Controls section.

Sample Canvases

<canvas> <textoutput name="myTextOutput" /> <listoutput name="myListOutput" /> </canvas>