Browse DevX
Sign up for e-mail newsletters from DevX


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

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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Interface Controls
As I mentioned previously, there are various nodes that you can include in your XML2UI document that represent common interface controls. The interface controls that Flash will recognize and display are:
  • Listbox
  • Radio Button
  • Checkbox
  • Textbox
  • Color Picker
  • Dropdown List
  • Slider Bar
  • Label
  • Flash Movie
Each tag that represents one of those interface controls may require child nodes and/or attributes to define the various characteristics of the element. I will explain the use of each interface control and the important characteristics that can be modified for each one.

The textbox node represents an interface control that displays a textbox into which a user can type. This node has various attributes that allow you to define the settings of this particular element. For example you can specify the maximum number of characters that the user can enter and whether or not the textbox can contain more than one line of text. You can also define the default text that is displayed in the textbox:

<textbox maxlength="50" multiline="true" value="Your Address" />

This mark-up will display a multiline textbox into which the user cannot type anymore than 50 characters, and the default text that is displayed in it will be "Your Address".

The label node should be used regularly in your dialog boxes to clarify the purpose of a particular control to the user. The label node has two important attributes; the first, which you have seen already, is the 'value' attribute:

<label value="The label text" />

This attribute defines the text that will be shown for the label.

And the second is the 'control' attribute, which allows you to associate a label with a particular interface control.

<label value="Enter your name" control="firstName" /> <textbox id="firstName" />

In the above mark-up, I have associated a label with a textbox, by giving the textbox node an 'id' attribute, and by setting this 'id' as the value of the 'control' attribute for my label.

Figure 2. Color Picker with Selection Grid: To use a Color Picker in your dialog box, specify a 'colorchip' node.
Color Picker
It is possible to show a chip of color in your interface, that when clicked will expand to display a grid from which the user can select a desired color. The color of the chip is then updated to mirror the user's choice.

To use a Color Picker in your dialog box, you specify a 'colorchip' node. This node has one important attribute, which you can use to define the default hexadecimal color that is displayed in the chip. The attribute is named 'color' and it is used as follows:

<dialog title="Color Picker" buttons="accept"> <colorchip color="#FF0000" /> </dialog>

The above mark-up will display a color picker. The color picker will be set to red (#FF0000) to begin with, until the user changes it.

Along with the ability to include the three system buttons in your dialog boxes (accept, cancel, help), it is also possible to define your own buttons. To define a button in your dialog box definition use the 'button' node. The label that is displayed on your button is defined using the 'label' attribute of the button node:

<dialog title="Click the button"> <button label="Click me" /> </dialog>

Figure 3. Checkbox Example: Individual checkboxes can have labels, to specify a label for a checkbox you define the 'label' attribute, the label is displayed on the right of the checkbox.
Checkboxes are interface controls that have two possible states: selected and unselected (on/off, 0/1, true/false, yes/no). Checkboxes are generally used to allow the user to choose one or more options from a list of available options. Individual checkboxes can have labels. To specify a label for a checkbox you define the 'label' attribute and the label is displayed on the right of the checkbox.

Here is a sample of checkbox usage:

<dialog title="Checkbox example" buttons="accept"> <label value="Macromedia products you own:" /> <checkbox label="Macromedia Flash" /> <checkbox label="Macromedia Dreamweaver" /> <checkbox label="Macromedia Fireworks" /> <checkbox label="Macromedia Coldfusion" /> <checkbox label="Macromedia Sitesping" /> <checkbox label="Macromedia Homesite" /> <checkbox label="Macromedia Generator" /> <checkbox label="Macromedia Freehand" /> </dialog>

This mark-up is rendered as shown in Figure 3.

Comment and Contribute






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



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