The rich:togglePanel is a core component for all switchable panels in RichFaces. It renders a sequence of panels based on state that can be switched (toggled) by a behavior called rich:toggleControl. All of these other panels (e.g. tabPanel, accordion, etc...) share the basic sets a features defined below.
The switchType attribute defines the strategy used to toggle between panels. The possible values for this attributes are:
There is also a very useful set of shortcut toggle values that allow you to create many custom effects like wizards. See the other switchable panel examples. Available shortcuts are defined below:
A rich:togglePanel has no default appearance, and allows you to customize it's look-n-feel any way you like. You create a set of child rich:togglePanelItem's with any content you want inside of them.
As the component does not provide any predefined layout it could be used for creation of any kind of switchable panels. This example is a very simple tabbed pane organized using that component:
This toggle panel switches in Ajax mode. So only one active item loaded to the client.
For now you are at Panel 1
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <style type="text/css"> .rf-tgp-itm { border: 1px solid #{a4jSkin.panelBorderColor}; padding: 5px; } .tabDiv { margin-right: 5px; border: 1px solid #{a4jSkin.panelBorderColor}; background-color: #{a4jSkin.headerBackgroundColor}; cursor: pointer; padding-left: 5px; float: left; } </style> <h:form id="form"> <rich:togglePanel id="panel1" activeItem="item1" render="tabs" itemChangeListener="#{panelMenuBean.updateCurrent}"> <rich:togglePanelItem name="item1"> <p>This toggle panel switches in Ajax mode. So only one active item loaded to the client.</p> <p>For now you are at Panel 1</p> </rich:togglePanelItem> <rich:togglePanelItem name="item2"> <p>After the second link click - panel changed active item to the second one according to name specified in the togglePanelBehavior</p> <p>For now you are at Panel 2</p> </rich:togglePanelItem> </rich:togglePanel> <a4j:outputPanel id="tabs" layout="block"> <a4j:outputPanel layout="block" styleClass="tabDiv"> <rich:toggleControl event="click" targetPanel="panel1" targetItem="item1" /> <h:outputText value="Toggle Panel Item 1" style="#{rich:findComponent('panel1').activeItem == 'item1' ? 'font-weight:bold' : 'font-weight:normal'}" /> </a4j:outputPanel> <a4j:outputPanel layout="block" styleClass="tabDiv"> <rich:toggleControl event="click" targetPanel="panel1" targetItem="item2" /> <h:outputText value="Toggle Panel Item 2" style="#{rich:findComponent('panel1').activeItem == 'item2' ? 'font-weight:bold' : 'font-weight:normal'}" /> </a4j:outputPanel> </a4j:outputPanel> </h:form> </ui:composition>
package org.richfaces.demo.panelmenu; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import org.richfaces.event.ItemChangeEvent; @ManagedBean @ViewScoped public class PanelMenuBean { private String current; private boolean singleMode; public boolean isSingleMode() { return singleMode; } public void setSingleMode(boolean singleMode) { this.singleMode = singleMode; } public String getCurrent() { return this.current; } public void setCurrent(String current) { this.current = current; } public void updateCurrent(ItemChangeEvent event) { setCurrent(event.getNewItemName()); } }
