richfaces4 布局 panelMenu保持选中状态-优快云博客

本文介绍了一个使用JavaServer Faces (JSF)技术实现的Web应用布局案例，包括布局文件、CSS样式、菜单配置及页面内容。通过Facelets模板引擎实现了模块化的布局设计，并利用RichFaces组件库增强了交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局文件
/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);
	}
}