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

Flex and Grids - 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.

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

Flex

A common attribute of elements placed in boxes is Flex, which makes the room the element uses an attribute of flexible.  In the example above, all of the buttons are the same size and there is a lot of left over space to the side of them.  Try adding a flex="1" attribute to the second opening vbox element.  Now the second set of buttons will take up all of the remaining available space in the window.  This is commonly used with spacers to make other elements appear in appropriate places within windows.  You may at this point be thinking that the value of flex is of a Boolean type, with 1 for true and 0 for false.  This is not the case; the flex attribute is of the integer type.  If you have multiple elements with the flex attribute, the attribute with the highest flex value will take up the most space.

Grids

Another positional element is the grid element, which allows you to specify both vertical and horizontal positions of elements.  The grid is commonly used with elements and their corresponding labels to ensure that everything lines up correctly within your interface.  The grid syntax is very easy to master; everything in the grid should be contained within an opening and closing grid element set, individual rows are defined within a rows opening and closing element set and individual columns are defined within a columns opening and closing element set.  Care should be taken when designing grids as it is easy to misplace elements.  Add the following code to a new XUL file and execute it in the normal way:

<grid>
  <rows>
    <row>
      <button label="button1"/>
      <button label="button2"/>
      <button label="button3"/>
    </row>
  </rows>
     <columns>
          <column>
            <button label="button4"/>
            <button label="button5"/>
            <button label="button6"/>
          </column>
        </columns>
</grid> 

Now, the dilemma that you face here is that button 4 has overlaid and obscured button 1.  Generally, you would only add content to rows or columns rather than both to avoid this kind of conflict.  Try changing it to this to get the desired (in this example) effect:

<grid>
  <rows>
    <row>
      <button label="button1"/>
      <button label="button2"/>
      <button label="button3"/>
    </row>
    <row>
     <button label="button4"/>
    </row>
    <row>
      <button label="button5"/>
    </row>
    <row>
      <button label="button6"/>
    </row>    
  </rows>
</grid> 

Much better!  Again, the flex attribute is more than welcome if you need to make elements stretch to fit the available space within the window.  In the example above however, the flex attribute may have unexpected results without the addition of columns.  Try adding the flex attribute to the first and last opening row elements to see how the buttons are affected.



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