6.2. Components Using Back-End Data

⁠6.2. Components Using Back-End Data

Components using back-end data pull information from a server, instead of that information being implicit in the source. This reduced coding and allows webpages to load faster, because they do not have load that information for every session.

Report a bug

⁠6.2.1. rich:tree

The rich:tree component creates a panel that displays interactive file trees. Users can click on the files to select and expand them to view their contents.

The folders in the tree component can be configured:

The <rich:tree id=""> field is where the name of the file tree is specified.
The <rich:treeNode type=""> field is where a description of the file itself is specified.

⁠

Example 6.5. rich:tree

This example creates a file tree organised by country, with each country's folder containing a list of local music producers.

<rich:tree id="tree" nodeType="#{node.type}" var="node" value="#{treeBean.rootNodes}" toggleType="client" selectionType="ajax" selectionChangeListener="#{treeBean.selectionChanged}">
  <rich:treeNode type="country">
    #{node.name}
  </rich:treeNode>
  <rich:treeNode type="company" iconExpanded="/images/tree/disc.gif" iconCollapsed="/images/tree/disc.gif">
    #{node.name}
  </rich:treeNode>
  <rich:treeNode type="cd" iconLeaf="/images/tree/song.gif">
		#{node.artist} - #{node.name} - #{node.year}
	</rich:treeNode>
</rich:tree>

Using the rich:tree component as shown in the above code creates this result:

Report a bug

⁠6.2.2. rich:autocomplete

The rich:autocomplete component responds to user input by pulling data from the server. When a user starts typing a term into a search field, the component responds by auto-completing the word. A drop-down list of search terms starting with the same letter(s) is displayed as a result.

There are a number of options for customizing the autocomplete component:

The rich:autocomplete component indicates the action.
The cachedAjax component provides the list of search term suggestions in the drop-down list.
The minChars field indicates the minimum amount of characters the user must type before autocompletion commences.

⁠

Example 6.6. rich:autocomplete

This example creates a search box that auto-completes predetermined keywords as the user types.

<rich:autocomplete mode="cachedAjax" minChars="2" autocompleteMethod="#{autocompleteBean.autocomplete}" />

Using the rich:autocomplete component as shown in the above code creates this result:

Report a bug

⁠6.2.3. rich:extendedDataTable

The rich:extendedDataTable component creates a table of columns with both horizontal and vertical scrolling enabled. You can specify the amount of rows, their headers, and values. It can be used for creating spreadsheets that require multiple data fields.

There are a number of option for customizing the extendedDataTable component:

Each column is defined using the <rich:column> component.
The clientRows property enables Ajax loading. Enter a number to define how many columns are loaded on the webpage.
The <h:outputText value=""/> field is where column names are specified.

⁠

Example 6.7. extendedDataTable

This example creates a table for an online car dealership that itemizes inventory.

<rich:extendedDataTable value="#{carsBean.allInventoryItems}"
                                var="car" id="table" frozenColumns="2"
                                style="height:300px; width:500px;" selectionMode="none"
                                clientRows="#{carsBean.clientRows}">
            <f:facet name="header">
                <h:outputText value="Cars marketplace"/>
            </f:facet>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="vendor"/>
                </f:facet>
                <h:outputText value="#{car.vendor}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Model"/>
                </f:facet>
                <h:outputText value="#{car.model}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Price"/>
                </f:facet>
                <h:outputText value="#{car.price}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Mileage"/>
                </f:facet>
                <h:outputText value="#{car.mileage}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="VIN Code"/>
                </f:facet>
                <h:outputText value="#{car.vin}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Items stock"/>
                </f:facet>
                <h:outputText value="#{car.stock}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Days Live"/>
                </f:facet>
                <h:outputText value="#{car.daysLive}"/>
	</rich:column>
</rich:extendedDataTable>

Using the rich:extendedDataTable component as shown in the above code creates this result:

Report a bug