Example 10     <<      >>      book     

The tree element is roughly equivalent to html table. The tree tables support multiple selections (with help of Ctrl and Shift keys).

  XUL  HOME     

  xul1.xul  
A simple tree
<?xml-stylesheet href="css1.css" type="text/css" title="css1"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <tree>
          <treehead>
               <treerow>
                    <treecell><titledbutton value="AAA"/></treecell>
                    <treecell><titledbutton value="BBB"/></treecell>
               </treerow>
          </treehead>
          <treechildren>
               <treeitem>
                    <treerow>
                         <treecell><titledbutton value="ROW1"/></treecell>
                         <treecell><titledbutton value="1111"/></treecell>
                    </treerow>
               </treeitem>
               <treeitem>
                    <treerow>
                         <treecell><titledbutton value="ROW2"/></treecell>
                         <treecell><titledbutton value="2222"/></treecell>
                    </treerow>
               </treeitem>
               <treeitem>
                    <treerow>
                         <treecell><titledbutton value="ROW3"/></treecell>
                         <treecell><titledbutton value="3333"/></treecell>
                    </treerow>
               </treeitem>
               <treeitem>
                    <treerow>
                         <treecell><titledbutton value="ROW4"/></treecell>
                         <treecell><titledbutton value="4444"/></treecell>
                    </treerow>
               </treeitem>               
          </treechildren>                    
     </tree>
</window>

  xul2.xul  
Setting the select attribute in treeitem to "true" selects the item. A treeitem can contain a treechildren child. The items defined in this element create a sublevel of the relevant treeitem. If this treeitem does not have an attribute open with value "true" the sublevel items are not shown.
<?xml-stylesheet href="css1.css" type="text/css" title="css1"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <tree>
          <treehead>
               <treerow>
                    <treecell><titledbutton value="AAA"/></treecell>
                    <treecell><titledbutton value="BBB"/></treecell>
               </treerow>
          </treehead>
          <treechildren>
               <treeitem open="true">
                    <treerow>
                         <treecell><titledbutton value="Double click to colapse"/></treecell>
                         <treecell><titledbutton value="---"/></treecell>
                    </treerow>
                    <treechildren>
                         <treeitem>
                              <treerow>
                                   <treecell><titledbutton value="EXPAND1"/></treecell>
                                   <treecell><titledbutton value="aaaa"/></treecell>
                              </treerow>
                         </treeitem>
                         <treeitem>
                              <treerow>
                                   <treecell><titledbutton value="EXPAND2"/></treecell>
                                   <treecell><titledbutton value="bbbb"/></treecell>
                              </treerow>
                         </treeitem>
                    </treechildren>
               </treeitem>
               <treeitem>
                    <treerow>
                         <treecell><titledbutton value="Value"/></treecell>
                         <treecell><titledbutton value="bbbb"/></treecell>
                    </treerow>
               </treeitem>
               <treeitem selected="true">
                    <treerow>
                         <treecell><titledbutton value="Run"/></treecell>
                         <treecell><titledbutton value="qqqq"/></treecell>
                    </treerow>
               </treeitem>
          </treechildren>                    
     </tree>
</window>

  CSS  HOME     

  css1.css  
CSS
@import url(chrome://global/skin);
window {background-color: #EEFFEE}