The ICEfaces Tutorial
Table of Contents


Lesson: Using the panelSeries component

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 whre JSP forEach tag might have been used.

panelSeries component in Componnet Showcase application

The panelSeries component can be binded 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 backing bean by specifing value attribute of the component and var attribute represents the name of current item and is used to iterate through the collection of items.

The rest of this tutorial will discuss the following topics:

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.jspx):

	<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.

Basic Panel Series Example

Download the demo:

Creating a Series Panel with Customized Objects

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

Inside a panelSeries component, you can put any valid JSF/Icefaces components and these components will be repeated for each item in the collection, which you specified as value attribute of panelSeries component. In our advanced example, the code inside 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.

Custom Panel Series Example

Download the demo:

Examples Using Panel Series

Example Source Notes
Component Showcase Available in release bundles Panel Series example
Webmail Available in release bundles Panel Series is used for Contact section under Address tab
panelSeries-basic panelSeries-basic source code Simple example of how to setup a basic panelSeries component and backing bean.
panelSeries-custom panelSeries-custom source code Demonstration of how panelSeries component can be used with other components and custom objects.

The ICEfaces Tutorial
Table of Contents

Copyright 2006 ICEsoft Technologies Inc. All rights reserved.