Home arrow XML arrow An Introduction to XUL Part 3

An Introduction to XUL Part 3

Learn about XUL, a subset of XML used to describe user interfaces, that helps you to make rich user interfaces with nothing more complicated than a text editor. In the third part of this series covers layout and content elements.

TABLE OF CONTENTS:
  1. An Introduction to XUL Part 3
  2. Flex and Grids
  3. Groupbox, Stack and Deck
  4. Content Elements
By: Dan Wellman
Rating: starstarstarstarstar / 7
June 06, 2005

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Now that youíre a little more familiar with the elements that make up the interface, itís time to look at some of the more advanced layout elements you have at your fingertips with XUL.  In most of these examples, Iíve omitted the default opening and closing window elements to reduce repetition.  You should by now have several saved files that contain the XML declaration and XUL namespace etc, so unless it is subject to the discussion, Iíve focused purely on the element being described.  You may find it beneficial to set yourself up a basic XUL file containing just the opening window element with the necessary namespace that you can open, modify and save under a different name to reduce the amount of typing you need to do.

Vbox and Hbox

The two most basic layout elements within XUL are the vbox and hbox, which divide the application window into vertical or horizontal boxes respectively.  Interface elements are then added as children to these elements.  There is no limit to the number of children that can be placed inside a box, and boxes will quite happily nest as necessary to give the look you are trying to achieve.  One important fact to note is that boxes will not wrap, so placing more elements in a vertical box will increase the height of your application window, and placing more elements in a horizontal box will increase the width of your window.  The hbox and vbox  elements are shorthand equivalents of using the box element with an orient attribute.  So <hbox> is equal to <box orient="horizontal"> and <vbox> is equal to <box orient="vertical">.  If the box element is used without specifying the orient, the default attribute is horizontal.  Similarly, the <bbox> element is shorthand for a box element that has an align="baseline" attribute.  Incase youíre wondering, the baseline value of the alignment attribute causes children of the box element to be aligned so that their labels line up.

<?xml version="1.0"?>
<window id="boxes" title="The Box Model" width="500" height="300"   screenX="50" screenY="100" 
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/
 there.is.only.xul">
  <button label="Button1"/>
  <button label="Button2"/>
  <button label="button3"/>
</window> 

This is extrememly similar to one of the windows created in the first article in this series, but do it again to remind yourself how the buttons are laid out in the window.  Now, in the same file, add an opening and closing set of <hbox> tags so that they encapsulate the three buttons and run the file again.  See the difference? Now put an opening and closing set of <vbox> elements within the hbox, and the buttons go back to a vertical stack.  Placing another vbox enclosed set of buttons inside the outer hbox gives you two columns:

<hbox>
<vbox>
<button label="Button1"/>
<button label="Button2"/>
<button label="button3"/>
</vbox>
<vbox>
<button label="Button4"/>
<button label="Button5"/>
<button label="button6"/>
</vbox>
</hbox> 

This very flexible layout method is aptly named by the creators of XUL as the box model.



 
 
>>> More XML Articles          >>> More By Dan Wellman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

XML ARTICLES

- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: