Home arrow XML arrow Page 3 - An Introduction to XUL Part 3

Groupbox, Stack and Deck - XML

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.

  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




Another positional model that can be used is that of the <groupbox> which stacks child elements in a column and draws a bow around them.   The syntax for this is equally simple, and although one has been provided, an example is not strictly necessary:

  <caption label="Groupbox"/>
    <description value="Item1"/>
    <description value="Item2"/>
    <description value="Item3"/>

Without a stylesheet to make it look nice, this example is pretty bland, but it demonstrates the use of the groupbox element.

Stack & Deck

Other layout methods include the stack and deck elements, both similar but with a subtle difference; both elements place interface elements in a physical stack, placing them on top of each other, but while the stack elements offers transparency, so elements at the bottom of the stack can still be visible, the deck does not, and elements will be seen to cover entirely or overlap depending on their placement.

  <description value="Bottom Stack!"/>
  <description value="Top Stack!"/>
<spacer height="10"/>
  <description value="Bottom Deck!"/>
  <description value="Top Deck!"/>

The code above will draw a window with the stack at the top and the deck below.  The stack elements are all displayed at once, hence the incomprehensible garble.  Notice how we have specified two decks, but only one deck is displayed, and this is the bottom one.  When the selectedIndex attribute is not defined, the default value is zero.  Indices, as we all know, tend to be zero based, so the above deck has a max index of 1.  In order to display the top deck, simply add a selectedIndex="1" attribute to the opening deck tag.  Now the top deck will be displayed.  Clearly, the use of a script to modify the selectedIndex value could produce effects similar to basic animation.

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- 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: