An Introduction to XUL Part 2

Learn about XUL, a subset of XML used to describe user interfaces, that helps you to make rich user interfaces with nothing more complicated than a text editor. In the second part of this series, Dan Wellman covers implementing more kinds of buttons. He also begins talking about creating Menu Bars, Tooltips, and Status Bars.

In addition to standard buttons, you can easily add other types of buttons using the type attribute; you can create buttons that behave as checkboxes so that any number of these types of button can be in a selected/pressed state at any one time, similar to the B, I, and A buttons in a document editing application.  Or you can create buttons that behave as radio buttons, so that only one button within that group can be selected at any one time, much like the justification buttons in a similar application.  Add the following lines of code directly beneath the existing button in your XUL document:

<button label=”I am a Checkbox button!” type=”checkbox”/>
<button label=”I am also a Checkbox button!” type=”checkbox”/>

Now save the file and run it again using the DOS command.   Your window will now have three buttons on it, two that can remain in a ‘checked’ state simultaneously.

Add a group of radio buttons now using the below code, which again should be placed directly beneath the above button code:

<button label=”I am a Radio button!” group=”myGroup” type=”radio”/>
<button label=”I am also a Radio button!” group=”myGroup” type=”radio”/>
<button label=”I am another Radio button!” group=”myGroup” type=”radio”/>

You use the group attribute to specify that the radio buttons belong in a specific group, which is needed when there are more than one set of buttons in your interface working the way radio buttons do.

You can even create a menu type button, where the button expands into a set of sub–buttons, grouping related items in a space saving format.  Add the next block of code beneath the existing buttons:

<button label=”I am a menu button!” type=”menu”>
      <menuitem label=”I am a menu item!”/>
      <menuitem label=”I am also a menu item!”/>

This will give you a rather nice little expandable button at the bottom of your window.  It may be useful to know that the submenu that pops up will happily transcend the border of the window itself rather than resize the window to make room for the additional items.  You can alter the appearance of this button slightly by changing the type from menu to menu-button, which puts the little drop-down arrow outside of the button.

{mospagebreak title=Organizing Buttons}

There is also an easily coded way of placing buttons automatically into a horizontal toolbar that sits near the top of the page:

  <toolbar id=”tool1″>
    <toolbarbutton label=”Back”/>
    <toolbarbutton label=”Forward”/>

The toolbar should reside within a toolbox and to make use of the functionality of the collapse/expand arrow (known as a grippy) at the far left of the toolbar, the id attribute should always be used with the <toolbar> element.

Those used to HTML will find the form-like elements of XUL very easy to get to grips with; XUL offers all of the standard form elements such as radio buttons, checkboxes, drop-down or combo boxes and text fields, which are known as controls.  The following code illustrates the use of these controls:

<checkbox label=”I am a checked checkbox!” checked=”true”/>
<checkbox label=”I am also a checkbox but am not checked yet!”/>
  <radio label=”I am a selected radio button!” selected=”true”/>
  <radio label=”I am also a radio button but am not selected yet!”/>
  <menuitem label=”I am a drop-down box selection!” />
  <menuitem label=”I am also a drop-down box selection!”/> 
<textbox id=”input”/>

This should be added below the existing button code, and upon execution, you will find these controls below your buttons.

{mospagebreak title=Changing Textbox Attributes}

Note here that if you add a value attribute to the text box, this will display, but if a user clicks on it to add some text of their own, their text will be appended to the end of the string you set the value to rather than replacing it.  Without JavaScript to do something with the input it won’t do much anyway, but it’s worth bearing in mind for now.  Like HTML input boxes, XUL text boxes can also be one of several types of text boxes; password, autocomplete, or unusually, timed.  So adding the following code would add a text field that displayed stars when input was entered:

<textbox id=”pass” type=”password”/>

The syntax for the other types is very similar.

Looking at your window, the various controls may seem a little random; we know what the controls are for because of the labels, but if the labels contained the values of the radio buttons for example, you would need some kind of heading or title to show the user what they were for.  Simple lines of text can be added to the window using either the <description value= ”yourtexthere”>, or the <caption label= ”yourtexthere”/> syntax.  The main difference between these is that captions are automatically indented slightly.  Additionally, you can specify a control label that is tied to the control using the id attribute of the control and the control attribute of the label:

<label control=”gender” value=”Please select your gender”/>
  <radiogroup id=”gender”>
    <radio label=”Male” selected=”true”/>
    <radio label=”Female”/>

Execute the file and see how it looks.

{mospagebreak title=Menu Bar and Interface}

Now, no interface would be complete without the menu bar at the top of the window that had the usual File, Edit, View, etc menus on it.  Windows applications that don’t have these just don’t feel right.  Fortunately, the required code to add these is very straightforward and leads on from the interface objects we have created so far.  XUL makes so much sense that you could probably code this yourself without me telling you how.  Nevertheless, the below section of code will add a very simple File menu to the top of your window.  Make sure you place it above the first buttons you created so that it appears in the right place:

  <menu id=”fileMenu” label=”File” accesskey=”F”>
      <menuitem label=”Open”/>
      <menuitem label=”Close”/>
      <menuitem label=”New”/>

As you can see, the menu element is a child element of the menubar element and the menu element draws on syntax we have already looked at, namely the <menupopup> and <menuitem> elements, which themselves are children and grand-children respectively of the aptly named <menu> element.  The acceskey specifies the shortcut letter that can be used in conjunction with the Alt key to open the menu, and underlines the proposed letter all by itself.  You’ll notice that clicking on the grippy does nothing at this stage.  You can add to the functionality of the grippy by placing the menubar in a toolbox, similar to the toolbar element looked at previously.  Add the <toolbox> and </toolbox> tags so that they encapsulate the menubar and then execute the file again.

Now when you click on the grippy, the menubar is collapsed, however, clicking it again does not expand the menu once more.  When opened from within Mozilla using a chrome URL, the grippy will work as it should, but you can get rid of the grippy altogether by using the grippyhidden=”true” attribute of the menubar (note that this attribute is also available to the toolbar element).  Additionally, the menulist items can be separated using the <menuseparator> tag placed between the items that should be separated.  This draws a line between the separated items. 

Images are also very easy to add:

<image source=”xul.jpg”/>

The image is stretched to fit the width of the window; this can be adjusted obviously using attributes of the image element.  Note that source is the name of the attribute that specifies the path and name of the image instead of src.

Another interface feature available to you is a tabbed window area; this is easily coded using <tab> elements nested within a <tabs> element.  Add the following block of code beneath the bottom textbox:

  <tab label=”Tab One”/>
  <tab label=”Tab Two”/>
  <tab label=”Tab Three”/>

Take a look at the effect it gives you; it’s surprisingly easy to create these different interface controls and elements, a feature of XUL that has made it a popular choice for open source programmers as something to get stuck into.  To add content to the individual tabbed sections, you need to place the above code into a <tabbox> container and use <tabpanels>:

    <tab label=”Tab One”/>
    <tab label=”Tab Two” value=”2″/>
    <tab label=”Tab Three” value=”3″/>
    <description value=”This is tab 1″/>
    <description value=”This is tab 2″/>
    <description value=”This is tab 3″/>

Looking at your window now, you’ll probably agree that it’s looking a little bit untidy; you’ve basically got a long list of menus, buttons and controls.

{mospagebreak title=Cleaning Up and Adding a Status Bar}

You can tidy things up a little and give the elements some room by using the <spacer> and <separator> elements.  The syntax is similar for each of these things:

<spacer height=”20″/>

The above line of code will give you a space 20 pixels high in the place that you put it.  Try adding the above line before and after the various buttons near the top of the window to give the buttons a bit of room, but remember to resize the window accordingly.  The <separator> element works in very much the same way but the default size of the gap between the separated items is smaller than that of a spacer.  Note that when this item is used, an actual line is not drawn between the separated items.

Along the bottom of most applications is an information or status bar that displays pictures or text relevant to the task in hand, in browsers for example, this bar can display icons for when pop-ups are blocked, cookies are rejected or a secure area is accessed.  Creating one of these information bars in XUL is, as you’ve probably guessed, a very easy thing to do.  Each holder for the icon or text is known as a statusbarpanel, and each statusbarpanel must be placed in a statusbar container.  Add the following code at the bottom of your working file:

<statusbar id=”status1″>
  <statusbarpanel label=”secure”/>
  <statusbarpanel label=”privacy”/>

When executed, your application window will now have the status bar at the bottom, with the labels inside each panel.  This is another element set that can be further contained within a toolbox, and doing so will put a line across the bottom of the status bar.  It’s not much I know, but it’s an additional feature.  There are few attributes of the statusbarpanel elements, just crop and the choice of either label or source.  The crop attribute is used to specify how any text in the statusbarpanel is cropped when the element is too small for its label.  The label simply puts text in the element and the source is used to specify a picture that is used instead of text.

{mospagebreak title=Using ToolTips and Progress Bars}

One feature that I haven’t mentioned yet is the tool tip feature; tooltips are the ‘helpful’ popups that give you additional information when you hover the mouse pointer over an element on the screen.  For text-only tooltips, you can just add a tooltiptext=” texthere” attribute to almost any element.  For tooltips containing other types of content, you have to use the tooltip element and associate it with the relevant element in the much the same way that labels are associated with controls.  In your working file, add the tooltip element set to one of the buttons and make sure you add the tooltip attribute to the button element that the tooltip is to be associated with:

<button label=”I am a button!” tooltip=”tooltip1″/>
    <tooltip id=”tooltip1″>
      <description value=”A tooltip!”/>

Another cool interface element you can create easily is the progress bar; with just a few lines of code, you can have a window that pops up displaying a visual indication of how long a task has left to complete, or evidence that there is activity going on within the application.  The following code will display a window with a progress meter in it:

<?xml version=”1.0″?>
<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window id=”progress” title=”Progress Meter” width=”150″ height=”150″ screenX=”50″ screenY=”100″ xmlns=”http://“>
  <label value=”Loading…” />
  <progressmeter mode=”undetermined” />

The mode attribute of the progress meter can be either undetermined, as above, or determined.  With a determined mode, you also need to specify a value in percent of what percentage of the bar is filled.  If you change the above code to read:

<progressmeter mode=”determined” value=”50%” />

then executed the file, you would see that the progress bar is half filled.  In fact, the value of mode can be anything other than “undetermined” to get this effect.  The next article in this series looks at how to specify the position of elements in a little more detail.

Google+ Comments

Google+ Comments