How to Use the ICEfaces Panel Series Component

The panelSeries component provides a mechanism for dynamically generating a series of repeating child-components within a panel. The panelSeries component renders its child components in an iterative fashion similar to way the dataTable component renders data rows. However, the panelSeries component is more flexibile in that it can render a series of arbitrarily complex child components. The panelSeries component can be used where a JSP forEach tag might have been used.

The panelSeries component can be bound to an array, an instance of java.util.List, an instance of java.sql.ResultSet, an instance of java.servlet.jsp.jstl.sql.Result, or an instance of javax.faces.model.DataModel. In the tag, specify the value attribute of the component and the var attribute to represent the name of the current item as the component iterates through each item in the value binding.

Creating a Basic Series Panel

The simplest example of Series Panel is to hava a panelSeries component binded to an array of Strings and display them one by one on the page. We first create a backing bean that stores an array of Strings (see BasicPanelSeriesBean.java) and then create a page with the following fragment (see basicPanelSeries.xhtml):

<ice:panelSeries var="color" value="#{basicPanelSeriesBean.colorList}">
    <ice:outputText value="#{color}" />
</ice:panelSeries>

The following screenshot shows what the page looks like once the beans are properly setup.

Creating a Series Panel with Customized Objects

In this advanced example, we will show how to use the panelSeries component by binding it to a Java List of custom objects. This custom class has several member variables to represent some personal information and it also has some methods which can be bound to a commandButton component in the panel of each custom object. We also need a backing bean that stores a Java List of these custom objects. (see CustomPanelSeriesBean.java)

Inside a panelSeries component, you can put any valid JSF/ICEfaces/HTML tags and the markup will be repeated for each item in the collection that is bound to the value attribute of the panelSeries component. In our advanced example, the code inside the panelSeries component will look similar to the following:

<ice:panelSeries var="customObject" value="#{customPanelSeriesBean.customObjectList}">
    <ice:panelGrid columns="2">
        <ice:outputText value="Name:" />
        <ice:outputText value="#{customObject.name}" />
        <ice:outputText value="Age:" />
        <ice:outputText value="#{customObject.age}" />
        <ice:outputText value="Email Address:" />
        <ice:outputText value="#{customObject.emailAddress}" />
        <ice:outputText value="Phone Number:" />
        <ice:outputText value="#{customObject.phoneNumber}" />
        <ice:outputText value="Anonymous Message?" />
        <ice:selectBooleanCheckbox value="#{customObject.anonymous}"/>

	......

    </ice:panelGrid>
    <br/>
</ice:panelSeries>

The following screenshot shows what the page looks like once the beans are properly setup.

Tutorial Source Code Downloads