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 5

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


advertisement
Dialog Box Layout
If it is not laid out properly, a dialog box will not function correctly from a user's perspective. XML2UI brings some important page layout concepts with it from XUL. The fundamental requirement of a Graphical User Interface is the ability to neatly arrange input controls.

In XML2UI there are two ways of laying out your dialog boxes. You can either use a grid system with rows and columns or—the better option in my opinion—hboxes, and vboxes, which automatically layout their contents horizontally and vertically respectively.

Grid Layout
Firstly let's discuss how to use the grid system to layout your content.

To specify a grid to layout your content, you use the 'grid' node. The 'grid' node is used to group together a collection of columns and rows. The columns and rows are simply containers and cannot be seen. The columns and/or rows you specify in your grid are used either as white space or to position interface controls. The 'grid' node should contain either a 'columns' node, a 'rows' node or both:

<grid> <columns>…</columns> <rows>…</rows> </grid>

Figure 9. Grid Layout: This is a sample grid that contains two columns and each column has two rows.
Inside the 'columns' node, you define one or more empty 'column' nodes, each one adds a new column to your virtual layout grid. Remember that columns run from left to right. It is recommended that you don't place any nodes within your column nodes, but if you do each node contained within a 'column' node is placed inside each successive row in the grid. The column with the most child nodes determines the number of rows in each column.

Inside the 'rows' node, you define one or more 'row' nodes, each one adds a new row to your virtual layout grid. Remember that rows run from top to bottom. Each node contained within a 'row' node is placed in sequential position. For example, the first child node of a 'row' node will be placed in the first column of the grid, and the second child node in the second column of the grid.

The contents of 'row' nodes can also be aligned. To align the contents of a row, you must specify an 'align' attribute, and its value can be one of either "start," "center," "end," or "baseline," which are all fairly self explanatory.

Here is a sample grid that contains two columns and each column has two rows:

<dialog buttons="accept" title="Enter your name"> <grid> <columns> <column /> <column /> </columns> <rows> <row> <label value="First Name:" control="fName" /> <textbox id="fName" /> </row> <row> <label value="Last Name:" control="sName" />< <textbox id="sName" /> </row> </rows> </grid> </dialog>

This mark-up is rendered in Figure 9.

Author's Note: To make sure you achieve your desired layout with ease, it is good practice to always define your columns first (with a list of empty columns as its children) and to define your rows, each row containing the interface controls. Also make sure that you define enough empty columns to cater to the amount of interface controls in each row.

Box Layout
Boxes allow you to divide a dialog box into a series of boxes. Interface controls inside of a box will arrange themselves horizontally or vertically. By combining a series of boxes you can layout your dialog box in no time, leaving the hard work to the renderer as it decides where the interface controls will be placed. There are two types of boxes—vertical boxes, which layout their contents one on top of the other, and horizontal boxes, which layout their contents one next to the other. To layout your content vertically you use the 'vbox' node, which is simply a container node, into which you place the nodes of interface controls you want to be arranged vertically:


<dialog buttons="accept" title="Enter your name"> <vbox> <label value="First Name:" control="fName" /> <textbox id="fName" /> <label value="Last Name:" control="sName" /> <textbox id="sName" /> </vbox> </dialog>

That mark-up produces the first dialog box shown in Figure 10. As you can see the interface controls are stacked on top of each other, from top to bottom. Which looks neat, but isn't perfect. However, arranging the interface controls horizontally (center) looks even worse.
Figure 10. Dialog Box Examples: This shows several of the types of dialog boxes that you can use.
To layout your content horizontally you use the 'hbox' node, which again is simply a container node, into which you place the nodes of interface controls you want to be arranged horizontally:

<dialog buttons="accept" title="Enter your name"> <hbox> <label value="First Name:" control="fName" /> <textbox id="fName" /> <label value="Last Name:" control="sName" /> <textbox id="sName" /> </hbox> </dialog>

As you can see from the center dialog in Figure 10 the interface controls are placed next to each other, from left to right.

You can place multiple 'vbox' nodes inside of a 'hbox' node and vice-versa, thus allowing you to vertically arrange or stack multiple groups of horizontally arranged elements:

<dialog buttons="accept" title="Enter your name"> <vbox> <hbox> <label value="First Name:" control="fName" /> <textbox id="fName" /> </hbox> <hbox> <label value="Last Name:" control="sName" /> <textbox id="sName" /> </hbox> </vbox> </dialog>

Which produces the third dialog box from Figure 10, which is perfectly arranged.

Now you can see that you grouped each label and textbox together inside of a horizontally arranged box. Each of the two groups is then arranged vertically.



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