Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Extending Flash MX 2004, Part 4: Solving UI Problems with XUL : Page 3

This article explores the basics of XUL—an XML-based standard for defining user interfaces.


advertisement
Slider Bar
Slider bars, are used to present an option which requires the user to choose an integer value from a specified range, such as a percentage from 0 – 100. To implement a slider bar into your dialog box, you use the 'popupslider' node, this node has two required attributes; 'minvalue' which is the minimum possible value in the range and 'maxvalue' which is the maximum possible value in the range:

<dialog title="Slider bar example" buttons="accept"> <popupslider minvalue="0" maxvalue="100" /> </dialog>

And the user selects the value by sliding the bar up and down. The bar appears when the arrow is pressed. Slider bars look like:
Figure 4. Slider Bars: This shows what the slider bars look like.
Radio Buttons
Radio buttons are similar to checkboxes when used individually, as they have two states, selected and unselected, (on/off, 1/0, true/false, yes/no). However in Flash, radio buttons cannot function individually, they have to be apart of a radio button group. The difference then, between a group of checkboxes and a group of radio buttons, is that only one radio button in a group can be selected. Selecting another radio button in the group deselects the currently selected option in the group. In a group of checkboxes it is possible to select all of the checkboxes and each checkbox doesn't communicate with the rest of the group.

To implement a radio button in your interface, you must first define a 'radiogroup' node, which will contain the individual radio button nodes that are a part of the group.

<radiogroup>…</radiogroup>

Then you can define one or more individual radio buttons as a member of that group by adding a 'radio' node as a child of the 'radiogroup' node.


<radigroup> <radio /> <radio /> </radiogroup>

Radio buttons generally have a label associated with them to display the option you being chosen. To define a label for a radio button you must specify the 'label' attribute:

<dialog title="Radio button example" buttons="accept"> <label value="Your favourite color:" /> <radiogroup> <radio label="Red" /> <radio label="Green" /> <radio label="Blue" /> <radio label="Pink" /> <radio label="Orange" /> <radio label="Yellow" /> <radio label="Other" /> </radiogroup> </dialog>

This mark-up is rendered like this:
Figure 5. Radio Button Example: To define a label for a radio button you must specify the 'label' attribute.
Listbox
Listboxes are another way of presenting a selection of options to a user, only allowing one option to be selected. To implement a listbox control into your dialog box you need to define a 'listbox' node. The 'listbox' node contains individual 'listitem' nodes that represent each individual item in the listbox. Each listitem can be assigned a label and a value. The value of the 'label' attribute is displayed as the label for the option in the listbox, and the 'value' attribute is used to define the value of the listbox as a group, when the item is selected.

<dialog title="Listbox example" buttons="accept"> <label value="Pick a shape:" /> <listbox> <listitem label="Square" /> <listitem label="Circle" /> <listitem label="Triangle" /> <listitem label="Rectangle" /> </listbox> </dialog>

This mark-up is shown in Figure 6.

However, you have four possible options and rather than the user having to scroll to see the options that aren't in view, you can define how many items are displayed in the viewable area at any one time using the 'rows' attribute of the 'listbox' node. To view all the items in the listbox without having to scroll, you need to set the value of the 'rows' attribute to be the total number of list items in our listbox—plus one:

<dialog title="Listbox example" buttons="accept"> <label value="Pick a shape:" /> <listbox rows="5"> <listitem label="Square" /> <listitem label="Circle" /> <listitem label="Triangle" /> <listitem label="Rectangle" /> </listbox> </dialog>

Now the dialog box looks like this:
Figure 6. Listbox Examples: To view all the items in the listbox without having to scroll, you need to set the value of the 'rows' attribute to be the total number of list items in our listbox—plus one




Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date