The ICEfaces Tutorial
Table of Contents


Lesson: Using the Stacking Panel component

How to Use the ICEfaces Stacking Panel Component

The panelStack component can be used to toggle the display of content between different sources. The panelStack selects one of its child panelGroups to be visible such that the panelGroup's id matches the value of the panelStack.

This tutorial will discuss the following topics:

 

Creating a Basic Stacking Panel

The Stacking Panel involves two elements: the panelStack tag itself, which controls the visibility of the panelGroups using its selectedPanel attribute; and its child panelGroups which identify themselves by their id.

Basic Panel Stack Example

For the basic Stacking Panel example, three panelGroups are used. Each simply contains an outputText tag indicating to which panelGroup they belong, allowing us to see that the visibility is changing. The selectOneRadio component allows us to change the selected panel value in the backing bean.

<f:view xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ice="http://www.icesoft.com/icefaces/component">

	<ice:outputDeclaration doctypeRoot="HTML"
		doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
		doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
	<title>Stacking Panel Component Tutorial</title>
	<link href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<h2>Basic Panel Stack Example</h2>
	<p>Use the radio buttons to select which panelGroup to display.</p>
	<ice:form>

		<ice:selectOneRadio value="#{stackingPanel.selectedGroup}"
			partialSubmit="true">
			<f:selectItem itemLabel="Group One" itemValue="groupOne" />
			<f:selectItem itemLabel="Group Two" itemValue="groupTwo" />
			<f:selectItem itemLabel="Group Three" itemValue="groupThree" />
		</ice:selectOneRadio>

		<ice:panelStack selectedPanel="#{stackingPanel.selectedGroup}">

			<ice:panelGroup id="groupOne">
				<ice:outputText value="Group 1" />
			</ice:panelGroup>
			
			<ice:panelGroup id="groupTwo">
				<ice:outputText value="Group 2" />
			</ice:panelGroup>

			<ice:panelGroup id="groupThree">
				<ice:outputText value="Group 3" />
			</ice:panelGroup>

		</ice:panelStack>

	</ice:form>
	</body>
	</html>
</f:view>

The following code is taken from PanelStackBean.java which controls the state of the Stacking Panel

package com.icesoft.icefaces.tutorial.component.panelStack.basic;

/**
 * <p>
 * The PanelStackBean controls the visibilty of the 
 * panelStack's child panelGroup element. Using a bean
 * allows the selected element to be changed with a UI control.
 *</p>
 */
public class PanelStackBean {

	// default panel
	private String selectedGroup = "groupOne";

	/**
	 * Gets the selected panel group.
	 * 
	 * @return the panel group id
	 */
	public String getSelectedGroup() {
		return selectedGroup;
	}

	/**
	 * Sets the selected panel group.
	 * 
	 * @param selectedGroup the new panel group id
	 */
	public void setSelectedGroup(String selectedGroup) {
		this.selectedGroup = selectedGroup;
	}
}

The PanelStackBean must be instantiated in the faces-config.xml so that we can use it in our JSF application.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC
        "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
        "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>
    <application>
        <locale-config>
            <default-locale>en</default-locale>
        </locale-config>
    </application>

    <!-- Basic Stacking Panel example bean-->
    <managed-bean>
        <description>
            Backing bean for Stacking Panel example.
        </description>
        <managed-bean-name>stackingPanel</managed-bean-name>
        <managed-bean-class>
            com.icesoft.icefaces.tutorial.component.panelStack.basic.PanelStackBean
        </managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

</faces-config>

Download the demo:

 

Embedding Components within a Group

ICEfaces components and (X)HTML elements can be embedded within a panelGroup. By including components within a panelGroup we can also further show the ability to manipulate the panelStack via the backing bean. A selectOneMenu will be used with a commandButton to trigger a change in the panelStack value via an actionListener method.


	<ice:panelGroup id="groupOne">
		<ice:outputText value="Group 1" />
		<br />
		<ice:selectOneMenu value="#{stackingPanel.actionSelectedGroup}"
			partialSubmit="true">
			<f:selectItem itemLabel="Group One" itemValue="groupOne" />
			<f:selectItem itemLabel="Group Two" itemValue="groupTwo" />
			<f:selectItem itemLabel="Group Three" itemValue="groupThree" />
		</ice:selectOneMenu>
		<ice:commandButton
			value="Switch to #{stackingPanel.actionSelectedGroup}"
			actionListener="#{stackingPanel.switchGroup}" />
	</ice:panelGroup>

The PanelStackBean will require some additional properties to account for the new behaviour.

import javax.faces.event.ActionEvent;
...
	private String actionSelectedGroup = "groupTwo";
...
	public void switchGroup(ActionEvent e){
		selectedGroup = actionSelectedGroup;
	}

	public String getActionSelectedGroup() {
		return actionSelectedGroup;
	}

	public void setActionSelectedGroup(String actionSelectedGroup) {
		this.actionSelectedGroup = actionSelectedGroup;
	}

Components embedded within a Panel Group

Download the demo:


 

Examples that Use Stacking Panel

Example Source Notes
Component Showcase Available in release bundles Each component example is toggled into view with a Stacking Panel
Webmail Available in release bundles The inbox, contacts, etc. view is controlled with a Stacking Panel.
Acronym Game N/A A Stacking Panel switches between displaying the acronym, voting, and congratulations.
panelStack-basic panelStack-basic source code Simple example of how to setup a panelStack component and backing bean
panelStack-embedded panelStack-embedded source code A panelStack using custom components

The ICEfaces Tutorial
Table of Contents

Copyright 2006 ICEsoft Technologies Inc. All rights reserved.