布局文件
/richfaces-demo/webapp/masterLayout.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 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:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"> <h:head> <title></title> <h:outputStylesheet library="css" name="style.css"/> <h:outputStylesheet library="css" name="layout.css"/> </h:head> <h:body> <div id="heading"></div> <div id="menu"> <ui:insert name="menu"> <ui:include src="menu.xhtml"/> </ui:insert> </div> <div id="content"> <ui:insert name="content"> </ui:insert> </div> </h:body> </html>
布局CSS
/richfaces-demo/webapp/resources/css/layout.css
@CHARSET "UTF-8"; #heading { width: 100%; height: 30px; background-color: blue; } #menu { float: left; width: 240px; height: 400px; background-color: orange; } #content { width: 100%; height: 400px; background-color: gray; }
全局CSS
/richfaces-demo/webapp/resources/css/style.css
@CHARSET "UTF-8"; *{ margin:0; padding:0;} body { font-size: 12px; }
菜单页面
/richfaces-demo/webapp/menu.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"> <ui:composition> <h:form> <h:outputText value="#{param.groupId}" /> <br /> <rich:panelMenu style="width:200px" mode="client" selectedChild="#{menuState.selectedMenuItem}" iconExpandedGroup="disc" iconCollapsedGroup="disc" iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right" iconCollapsedTopGroup="chevronDown" iconCollapsedTopPosition="right" activeItem="#{menuState.selectedMenuItem}"> <rich:panelMenuGroup label="Group 1" id="group1" value="#{menuState.menu['group1']}" expanded="#{'group1' == param.groupId}"> <rich:panelMenuItem label="Item 1" id="group1_item1" actionListener="#{menuBean.select}" action="/main.xhtml"> <f:param name="groupId" value="group1" /> </rich:panelMenuItem> <rich:panelMenuItem label="Item 2" id="group1_item2" actionListener="#{menuBean.select}" action="/main.xhtml"> <f:param name="groupId" value="group1" /> </rich:panelMenuItem> <rich:panelMenuItem label="Item 3" id="group1_item3" actionListener="#{menuBean.select}" action="/main.xhtml"> <f:param name="groupId" value="group1" /> </rich:panelMenuItem> </rich:panelMenuGroup> <rich:panelMenuGroup label="Group 2" id="group2" value="#{menuState.menu['group2']}" expanded="#{'group2' == param.groupId}"> <rich:panelMenuItem label="Item 1" id="group2_item1" actionListener="#{menuBean.select}" action="/index.xhtml"> <f:param name="groupId" value="group2" /> </rich:panelMenuItem> <rich:panelMenuItem label="Item 2" id="group2_item2" actionListener="#{menuBean.select}" action="/index.xhtml"> <f:param name="groupId" value="group2" /> </rich:panelMenuItem> <rich:panelMenuItem label="Item 3" id="group2_item3" actionListener="#{menuBean.select}" action="/index.xhtml"> <f:param name="groupId" value="group2" /> </rich:panelMenuItem> </rich:panelMenuGroup> </rich:panelMenu> </h:form> </ui:composition> </html>
第一个页面
/richfaces-demo/webapp/index.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 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:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"> <h:head> <title></title> <h:outputStylesheet library="css" name="style.css" /> <h:outputStylesheet library="css" name="layout.css" /> </h:head> <h:body> <ui:composition template="/masterLayout.xhtml"> <ui:define name="content">第一个页面</ui:define> </ui:composition> </h:body> </html>
第二个页面
/richfaces-demo/webapp/main.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html 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:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"> <h:head> <title></title> <h:outputStylesheet library="css" name="style.css"/> <h:outputStylesheet library="css" name="layout.css"/> </h:head> <h:body> <ui:composition template="/masterLayout.xhtml"> <ui:define name="content">第二个页面</ui:define> </ui:composition> </h:body> </html>
两个Bean
/richfaces-demo/src/test/MenuBean.java
package test; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.RequestScoped; import javax.faces.event.ActionEvent; @ManagedBean @RequestScoped public class MenuBean implements Serializable { private static final long serialVersionUID = 1L; @ManagedProperty(value = "#{menuState}") private MenuState menuState; public MenuState getMenuState() { return menuState; } public void setMenuState(MenuState menuState) { this.menuState = menuState; } public MenuBean() { } public void select(ActionEvent event) { menuState.setSelectedMenuItem(event.getComponent().getId()); } }
/richfaces-demo/src/test/MenuState.java
package test; import java.io.Serializable; import java.util.HashMap; import java.util.Map; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class MenuState implements Serializable { private static final long serialVersionUID = 1L; private Map<String, Boolean> menu; private String selectedMenuItem; public String getSelectedMenuItem() { return selectedMenuItem; } public Map<String, Boolean> getMenu() { return menu; } public void setMenu(Map<String, Boolean> menu) { this.menu = menu; } public void setSelectedMenuItem(String selectedMenuItem) { this.selectedMenuItem = selectedMenuItem; } public MenuState() { } @PostConstruct public void init() { menu = new HashMap<String, Boolean>(); menu.put("group1", false); menu.put("group2", false); } }