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

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


advertisement
hen developing your Flash extensions, it is sometimes necessary to provide a dialog box that will prompt the user to make a choice or customise settings in an intuitive and user-friendly way. For example, some of the various Timeline Effects that come pre-installed with Flash MX 2004 allow the user to modify numerous settings and change the outcome of the effect. This is achieved using a dialog box that appears when the Timeline Effect is selected. The dialog box contains a Flash Movie control that allows the user to modify the settings of the Effect.

The fine engineers at Macromedia have included cross-platform dialog boxes for use in your Flash Extensions in the form of a XML 2 UI Engine. This engine parses and displays dialog boxes—defined using an XML formatted language called XML2UI.

XML2UI is a subset of XUL (pronounced "zool"), an XML User Interface Language created by Mozilla. Only a small amount of the XUL elements and their associated attributes have been implemented in XML2UI. More information about XUL can be found at: http://www.mozilla.org/projects/xul/xul.html

To understand the remainder of this article it is highly recommended that you have prior knowledge of or experience with XML.

Displaying a Dialog Box
The XML2UI document is defined in different ways depending on what type of Flash extension you are creating. Continuing on with the same theme, I will discuss the use of XML2UI, making the assumption that you are implementing dialog boxes in your commands.

When creating a Flash Command that requires some kind of user interaction to configure settings, etc, you define your GUI in a separate XML document with an .xml file extension. This file contains the dialog box definition.

XML2UI document's are parsed and displayed by Flash MX 2004, so you have to be able to tell the interpreter to display a dialog box as—and when—you need one.

With JSFL scripts you have a method available to you that will read the source of a dialog box and then display it. The method is called 'xmlPanel' and it is a method of the document object. As document objects represent Flash documents open in the authoring environment, it is only possible to open an XML2UI dialog box when there are one or more documents open in the Flash Authoring Environment.

Here is a simple usage example of the 'xmlPanel' method:

flash.getDocumentDOM().xmlPanel("file:///C:/myGUI.xml");

When this code is executed, the interpreter reads the dialog box definition from the document you specified, and then renders the controls defined in our XML2UI document. Standard operating system interface controls are used, which means that when your XML2UI document is rendered on a Macintosh, all the interface controls will look different from when your XML2UI document is rendered on a Windows machine.

In the above code, you will probably notice the 'getDocumentDOM' method of the 'flash' object. This method returns the document object for the currently active Flash Document.

When the 'xmlPanel' method is called, your JSFL script will pause until the dialog box is closed.

Dialog Box Definition
You define the interface of your dialog box by writing a structured XML document that includes special XML nodes that Flash will interpret and display. Each of these represents a particular part of your interface. All of the special XML nodes have attributes that allow you to customize various settings related to that particular element. There are various nodes that you can include in your XML2UI document that represent common interface controls such as textboxes, radio buttons, and checkboxes. When your XML2UI document is parsed by Flash, all the nodes that it understands are interpreted into a visual interface. If you include nodes that Flash doesn't understand or support in your XML2UI document, Flash will just ignore them—as long as these nodes haven't been spelled incorrectly, in which case the structure of your document will usually be incorrect and it will report errors and your dialog box will not be displayed. All node names and attribute names must be lowercase.

All XML2UI documents begin and end with a 'dialog' node:

<dialog>…</dialog>

If you forget you will receive an error when you try and display the dialog box:

Inside the 'dialog' node you should define the layout of your dialog box, and the various interface controls you want to display within it.

The dialog node has various attributes that you can specify—two of which are worth knowing about. The first are the 'button's attributes that allow you to specify a combination of system buttons to display in your dialog box. There are three system buttons that you can include: accept, cancel, and help. You define the system buttons you want included in your dialog box using a comma-separated list; each item in the list is the name of a system button.


<dialog buttons="accept,help">…</dialog>

Figure 1. Dialog Boxes with and without Title Attribute: This shows how the dialog box appears with a title attribute and without one.
This mark-up will display an empty dialog box with no title that contains two system buttons, "OK" and "Help." Flash, in conformance with a particular platform's interface guidelines, will lay out system buttons automatically. On both Windows and Macintosh systems, the buttons will be laid out on the bottom row of the dialog box in the standard order for that particular platform. The standard order for Windows is "OK," "Cancel," "Help," and the standard order for Macintosh is "Help," "Cancel," "OK."

If you choose not to include the three system buttons in your dialog box and don't specify a 'buttons' attribute, it may be difficult for the user to exit/close your dialog box. The user would have to use the Escape key on the keyboard— this will close the dialog box, just as if the user had pressed the Cancel button.

To specify a title for your dialog box you can add a title 'attribute' to your dialog node. The value of which will be the text that Flash uses as the title for your dialog box.

Here is a dialog box that doesn't have a title attribute specified:

<dialog buttons="accept"> <label value="Enter your name" /> <textbox /> </dialog>

When executed, that dialog box will look like the box on the left side in Figure 1.

Here is the mark-up for a dialog box that has a title attribute:

<dialog title="Enter your name" buttons="accept"> <textbox /> </dialog>

If your title is long, make sure your dialog box is wide enough to display it, otherwise it will be cropped and the end of your title will be replaced with (…) so that it fits.



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