The rich:panelMenu component is used to create a collapsible side-menu panel. The component has a pre-defined look and feel which can be skinned. You can customize it with styles and a set of component attributes. This example demonstrates basic use of the rich:panelMenu component.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:outputStylesheet> .cols { vertical-align: top; } </h:outputStylesheet> <h:form id="form"> <h:panelGrid columns="2" columnClasses="cols,cols" width="400"> <rich:panelMenu style="width:200px" itemMode="ajax" groupMode="ajax" groupExpandedLeftIcon="triangleUp" groupCollapsedLeftIcon="triangleDown" topGroupExpandedRightIcon="chevronUp" topGroupCollapsedRightIcon="chevronDown" itemLeftIcon="disc" itemChangeListener="#{panelMenuBean.updateCurrent}"> <rich:panelMenuGroup label="Group 1"> <rich:panelMenuItem label="Item 1.1" name="Item_1_1" /> <rich:panelMenuItem label="Item 1.2" name="Item_1_2" /> <rich:panelMenuItem label="Item 1.3" name="Item_1_3" /> </rich:panelMenuGroup> <rich:panelMenuGroup label="Group 2"> <rich:panelMenuItem label="Item 2.1" name="Item_2_1" /> <rich:panelMenuItem label="Item 2.2" name="Item_2_2" /> <rich:panelMenuItem label="Item 2.3" name="Item_2_3" /> <rich:panelMenuGroup label="Group 2.4"> <rich:panelMenuItem label="Item 2.4.1" name="Item_2_4_1" /> <rich:panelMenuItem label="Item 2.4.2" name="Item_2_4_2" /> <rich:panelMenuItem label="Item 2.4.3" name="Item_2_4_3" /> </rich:panelMenuGroup> <rich:panelMenuItem label="Item 2.5" name="Item_2_5" /> </rich:panelMenuGroup> <rich:panelMenuGroup label="Group 3"> <rich:panelMenuItem label="Item 3.1" name="Item_3_1" /> <rich:panelMenuItem label="Item 3.2" name="Item_3_2" /> <rich:panelMenuItem label="Item 3.3" name="Item_3_3" /> </rich:panelMenuGroup> </rich:panelMenu> <a4j:outputPanel ajaxRendered="true"> <rich:panel rendered="#{not empty panelMenuBean.current}"> <h:outputText value="#{panelMenuBean.current} selected" id="current" /> </rich:panel> </a4j:outputPanel> </h:panelGrid> </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()); } }
The menu uses the parent component itemChangeListener to output the current selection. Alternatively, you could use an action and actionListener pair at each rich:panelMenuItem component to perform the navigation and process any ActionEvent events from there.
Specify the item switching mode at the rich:panelMenu level with the itemMode attribute. The attribute can be redefined on child rich:panelMenuItem components, and is used instead of the global setting.
Specify the group switching mode at the rich:panelMenu level with the groupMode attribute. The attribute can be redefined on child rich:panelMenuGroup components, and is used instead of the global setting.
The itemMode and groupMode attributes can be set to three possible values:
