XUL Tutorial - More Tree Features

Here, we'll see more features of trees.

Hierarchical trees

The tree element is also used to create hierarchical lists, like that found in a file manager or a browser's bookmarks list. To do this, you need to do two things. First, you need to mark the treeitem element that has children as a container. You do this by adding the container attribute to it as follows:

<treeitem container="true"/>

This allows the user to double-click on the treeitem to expand and collapse the inner rows. You can have the child rows initially displayed by adding the open attribute. When the user expands and collapses the parent, this attribute is changed to reflect the current state.

The children themselves can be specified by placing a treechildren element inside the treeitem. Don't put it inside the treerow as this won't work.

You can repeat this process to create deeply nested trees. Essentially, a treeitem element can contain either single rows which are declared with the treerow element or a set of rows, which are declared with the treechildren element.

The following is a simple example:

<tree>
  <treehead>
    <treerow>
      <treecell value="First Name"/>
      <treecell value="Last Name"/>
    </treerow>
  </treehead>

  <treecols>
    <treecol flex="3"/>
    <treecol flex="7"/>
  </treecols>

  <treechildren flex="1">
    <treeitem container="true" open="true">
      <treerow>
        <treecell value="Guys"/>
      </treerow>

      <treechildren>
        <treeitem>
          <treerow>
            <treecell value="Bob"/>
            <treecell value="Carpenter"/>
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell value="Jerry"/>
            <treecell value="Hodge"/>
          </treerow>
        </treeitem>
      </treechildren>
    </treeitem>
  </treechildren>
</tree>

This has created a hierarchical tree. You can double-click the outer row, labeled Guys, to expand and collapse the inner two rows. Notice how the Guys row only needs one column as it is placeholder item for its children.

You can also see that the treecol elements were added. The column can now be resized and the default widths of the column are provided.

If you look in the image, it doesn't look quite right. Currently, the rows for Bob and Jerry don't indicate that they are sub-rows. The typical way of indicating this would be to have these two rows indented and draw a little arrow or plus sign next to it. Mozilla provides a style class which adds a small arrow and the indenting for you. Just add this class to the first treecell in each row.

<treecell class="treecell-indent" value="Bob"/>

By setting this class on a cell, the cell will be indented. With-in a nested tree, the indent will be cumulative as necessary. For cells that have child elements, a small arrow will be drawn to the left of it.

You can actually put the indentation on any cell, even one in a another column. In this case, the cell in that column will be indented. The indentation is really just an extra bit of spacing before the text. What actually happens is some extra buttons and elements are added inside the cell. You do not have to worry about how this is done as it's all automatic.

In fact, if you add the class to every row, even ones that don't need it, everything will work as expected.

The following example demonstrates a simple tree with indented cells:

<tree>
  <treechildren>
   <treeitem container="true" open="true" class="treecell-indent">
    <treerow>
     <treecell class="treecell-indent" value="Places I've Never Been"/>
    </treerow>

    <treechildren flex="1">
     <treeitem>
      <treerow>
       <treecell class="treecell-indent" value="Geneva"/>
      </treerow>
     </treeitem>
     <treeitem>
      <treerow>
       <treecell class="treecell-indent" value="The Moon"/>
      </treerow>
     </treeitem>
    </treechildren>

   </treeitem>
  </treechildren>
</tree>

As can be seen in the image, a small triangle (often called twisty) has appeared next to the first row, indicating that it contains child rows. By double-clicking the row, the user can open and close the list. The child rows are indented.

The class was added to both the outer and the inner child rows. The class automatically provides the twisty in container cases and the indentation as necessary. It works for cells that are nested at any level.

Note that indentation only applies to treecells that use the value attribute syntax, as in the above example. That is, the class only applies when the treecell has no content, which means that the text of the cell will only appear indented if you do not have any elements inside the cell.

(Next) Next, we'll see a more complex tree example.

Examples: 6.3.1 6.3.2