Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


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

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

Dropdown List
Dropdown lists are used to show multiple options, from which a user can choose only one. Dropdown lists and listboxes are very similar in function, but a listbox generally takes up more space and its options are generally not displayed all at once—thus the user has to scroll through the options using a scrollbar in the control. To implement a dropdown list into your dialog box you should use the 'menulist' node, which is a container for individual 'menuitem' nodes:

<dialog title="Dropdown list example" buttons="accept"> <menulist> <menuitem label="None" /> <menuitem label="One" /> <menuitem label="Two" /> <menuitem label="Three" /> </menulist> </dialog>

Figure 7. Dropdown List Example: The standard states that you should place all 'menuitem' nodes inside of a 'menupop' node.
To comply with the XUL guidelines you are supposed to place another container inside of the 'menulist' node. The next version of Flash will likely have more support for XUL elements and I would recommend that you adhere to these standards if you want your extensions to work in a year's time.

The standard states that you should place all 'menuitem' nodes inside of a 'menupop' node, and thus our mark-up now looks like this:

<dialog title="Dropdown list example" buttons="accept"> <menulist> <menupop> <menuitem label="None" /> <menuitem label="One" /> <menuitem label="Two" /> <menuitem label="Three" /> </menupop> </menulist> </dialog>

If you choose to include it or not, the outcome is the same, as shown in Figure 7.

By default, the dropdown list is empty, until an option is selected, but it is possible to specify which 'menuitem' is selected, by including a 'selected' attribute for the 'menuitem' node that you want to be selected. The value of which can be "true" or "false," where true is selected, and false is not selected. Not including the selected attribute is the same as specifying a "false" value:

<dialog title="Dropdown list example" buttons="accept"> <menulist> <menupop> <menuitem label="None" selected="true" /> <menuitem label="One" selected="false" /> <menuitem label="Two" /> <menuitem label="Three" /> </menupop> </menulist> </dialog>

It is, however, good practice to include the 'selected' attribute for each 'menuitem' node in your dropdown list:

<dialog title="Dropdown list example" buttons="accept"> <menulist> <menupop> <menuitem label="None" selected="true" /> <menuitem label="One" selected="false" /> <menuitem label="Two" selected="false" /> <menuitem label="Three" selected="false" /> </menupop> </menulist> </dialog>

Flash Movie
In a Web browser it is also possible to build dialog boxes using the numerous form tags and input element tags. In the early days it wasn't possible for the state of a form, or the various input elements to change based upon user input. Dynamic forms are now possible with the introduction of DHTML into Web browsers. With the XML2UI markup language, it is also not possible to change a form once it has been rendered. Macromedia decided that they should allow developers to include Flash Movies inside a dialog box. This created a whole host of new possibilities, such as loading dynamic data into your dialog box from a remote location.

You should use a Flash Movie control if you want to create dynamic dialog boxes that can change state after they have been rendered. All of the input controls in XML2UI—and more—are also available to you in Flash MX 2004 as Flash Components. The Flash Movie for your dialog box can contain anything. You may just want to have a pretty animation piece in your dialog box or you may want a little control over the look and feel of your dialog box. You can also have a Flash movie and any of the other input controls of XML2UI in the same dialog box.

If you are having trouble writing an XML2UI document, all you need to know is the basic XML to display a Flash Movie. You can build all your dialog boxes in Flash.

As mentioned in "ActionScript and JSFL," it is possible for Flash Movies displayed in dialog box to execute JSFL code, using the MMExecute function.

As an example of the possibilities of this combination of technologies, I made my own Flash Command that opened up a dialog box containing a Flash Movie. The Flash Movie allows the user to browse for files and add them to a list. When the dialog box is closed, a JSFL script is executed for each file that was added to the list, thus enabling batch-scripting capabilities to Flash developers:
Figure 8. Batch Run Settings: This is an example of the batch-scripting capabilities in Flash.
When the "Add File" push button is pressed I execute some JSFL using the MMExecute ActionScript function, which opens up a "Select File" dialog box, when the user selects a file, the file URI that was selected is returned back to ActionScript, via the MMExecute function, and then I add it to the list.

To implement a Flash Movie into your dialog box, you use the 'flash' node. This node is not a standard element of XUL:

<dialog title="Batch Run Settings" buttons="accept,cancel" > <flash width="475" src="Batch Run.swf" height="150" id="settings" /> </dialog>

You must include a 'src' attribute for all 'flash' nodes, so that when your dialog box is rendered, the interpreter knows where to look for the Flash Movie you want to display. You must also specify the width and height at which you want the Flash Movie to be displayed; otherwise it will be displayed at 10 pixels width and 10 pixels height. The width and height attributes should match those you would use if you were to display the Flash Movie in an html page.

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