Flex and Grids - XML

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:

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.