Tree is a component that renders a tree control on the page.
The most important tree features are:

• Native support for Ajax operations
• Support for "ajax", "client" and "server" switch types
• Built-in drag/drop capabilities
• Flexible look

Ajax switch type

This tree uses "ajax" switch type, note that for collapse/expand operations it will be Ajax request to the server. You may see short delay in this case.

Baccara

David Miles Huber

Bach, Johann Sebastian

Chris Rea

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <p>This tree uses "ajax" switch type, note that for collapse/expand operations it will be Ajax request to the server.
     You may see short delay in this case.</p><br/>
    <h:form>    
        <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}">
            <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif">
                <h:outputText value="#{item.name}" />
            </rich:treeNode>
            <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif">
                <h:outputText value="#{item.title}" />
            </rich:treeNode>
            <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif">
                <h:outputText value="#{item.title}" />
            </rich:treeNode>
        </rich:tree>
    </h:form>

</ui:composition>

<<Hide Source

Client switch type

This is exactly the same tree, but now it uses "client" switch type. Note, that all nodes actually rendered up-front and expand/collapse now do not requre server call

Baccara

Grand Collection

Yes Sir, I Can Boogie

Sorry, i`m A Lady

A Quien Le Importa

The Devil Send You To Laredo

Ni Mas Ni Menos

Parlez-vous Francais?

Que Naadie Sepa Mi Sufrir

Borriquito

Love Me Please Love Me

Paloma Blanca

Me Tienes Desenganada

El Porompompero

Yes Sir, I Can Boogie

Sorry, i`m A Lady

David Miles Huber

David Miles Huber

Storm on Serret Mountain

After the Storm

Relaxation & Meditation With Music & Nature - Distant Thunder

Storm on Serret Mountain

Spring Showers

Relaxation & Meditation With Music & Nature - Tropical Rainforest

Exotic Journey

Evening Rain

Bach, Johann Sebastian

Forever Classics

Brandenburg Concerto No 1-1 I

Brandenburg Concerto No 1-2 I

Brandenburg Concerto No 1-3 I

Brandenburg Concerto No 1-4 I

Brandenburg Concerto No 2-1 I

Brandenburg Concerto No 2-2 I

Brandenburg Concerto No 2-3 I

Brandenburg Concerto No 3-1 I

Brandenburg Concerto No 3-2 I

Organ Concerto In D Minor, BW

Toccata & Fugue In D Minor, B

Chris Rea

The Road To Hell

The Road To Hell (Part 1)

The Road To Hell (Part 2)

You Must Be Evil

Texas

Looking For A Rainbow

Your Warm And Tender Love

Daytona

That`s What They Always Say

Let`s Dance

I Just Wanna Be With You

Tell Me There`s A Heaven

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <p>This is exactly the same tree, but now it uses "client" switch type. Note, that all nodes actually rendered up-front and expand/collapse now do not requre server call</p><br/>
    <h:form>
        <rich:tree switchType="client" style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}">
            <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif">
                <h:outputText value="#{item.name}" />
            </rich:treeNode>
            <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif">
                <h:outputText value="#{item.title}" />
            </rich:treeNode>
            <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif">
                <h:outputText value="#{item.title}" />
            </rich:treeNode>
        </rich:tree>
    </h:form>


</ui:composition>

<<Hide Source

Server switch type

This is again same tree, but now it uses "server" switch type. Full page content will be reloaded at every click.

Baccara

David Miles Huber

Bach, Johann Sebastian

Chris Rea

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <p>This is again same tree, but now it uses "server" switch type. 
    Full page content will be reloaded at every click.</p><br/>
    <h:form>
        <rich:tree switchType="server" style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}">
            <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif">
                <h:outputText value="#{item.name}" />
            </rich:treeNode>
            <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif">
                <h:outputText value="#{item.title}" />
            </rich:treeNode>
            <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif">
                <h:outputText value="#{item.title}" />
            </rich:treeNode>
        </rich:tree>
    </h:form>
</ui:composition>

<<Hide Source

Note how the tree switched on "client" does not "remember" its state when whole page is reloaded. At the same time "ajax" tree remembers its state without any additional code.