`

richfaces4 布局 panelMenu保持选中状态

阅读更多
布局文件
/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);
	}
}
分享到:
评论

相关推荐

    richfaces-布局案例

    "richfaces-布局案例" 这个标题揭示了我们即将探讨的是一个与RichFaces框架相关的布局应用实例。RichFaces是一个基于JavaServer Faces (JSF) 技术的开源用户界面组件库,它提供了丰富的组件和增强功能,帮助开发者...

    JSF2和RICHFACES4使用指南

    JSF2和RICHFACES4使用指南

    Richfaces 4 组件参考手册

    根据给定的文件信息,以下是对“Richfaces 4 组件参考手册”的详细解析与相关知识点的阐述: ### 富客户端框架:Richfaces 4 #### 一、简介 Richfaces 4 是一款功能强大的富客户端框架,它为JavaServer Faces...

    RichFaces 4 Developer Guide

    ### RichFaces 4 开发者指南 #### 一、引言 RichFaces 4 是一款功能强大的企业级组件库,它基于 JavaServer Faces (JSF) 技术标准,为开发者提供了一系列丰富的用户界面组件。这些组件不仅支持 Ajax 交互,还提供...

    RichFaces4_Component_Reference.pdf

    ### RichFaces 4 组件参考知识点 #### 一、引言 RichFaces 4 是一款功能强大的企业级 Java 应用程序开发框架,它提供了丰富的 AJAX 组件来增强 Web 应用程序的交互性和用户体验。这份文档是针对 RichFaces 4 组件的...

    seam+jsf+richfaces+ajax4jsf 电子书

    Seam、JSF、RichFaces 和 Ajax4jsf 是四个重要的Java Web开发框架和技术,它们在构建现代、交互式Web应用程序中发挥着关键作用。让我们深入探讨这些技术及其结合使用时的知识点。 **1. Seam** Seam是一个开源的Java...

    Richfaces标签

    ### Richfaces标签详解 #### 一、概述 Richfaces是一个基于JavaServer Faces(JSF)技术的开源框架,提供了一套丰富的用户界面组件库。这些组件不仅具备强大的功能,还能很好地支持AJAX交互,极大地提高了Web应用...

    richfaces-ui-3.2.1

    而AJAX4JSF是RichFaces提供的一个桥梁,它将AJAX技术与JSF框架紧密结合,使得开发者可以利用JSF的生命周期和组件模型来创建复杂的、富交互性的AJAX应用。 "jbos"标签则表明了RichFaces与JBoss企业级应用服务器的...

    j-richfaces4.zip_richfaces4 demo

    dwRichFaces4Demo1 示例应用程序很简单;其惟一的真正目的是展示所选组件的设置和用法。因此,它的作用便是收集和显示输入数据。请想象一下如何在生产应用程序中使用数据和组件。除了必要的 JAR、图像、支持资源绑定...

    RichFaces4.5 JavaApi JSApi

    `$rf.data`接口则用于管理客户端的数据存储,这在处理动态数据或者在AJAX请求之间保持状态时非常有用。 RichFaces的JS API也包含了一系列组件相关的API,例如`richfaces.selectOneMenu`,它提供了与富选择菜单组件...

    richfaces中文开发文档

    通过定义JSF组件和事件处理器,RichFaces能够提供更丰富的用户界面功能,同时保持JSF的结构化开发模式。 **四、RichFaces的生命周期** RichFaces遵循JSF的生命周期,包括初始化、恢复视图、应用请求值、处理验证、...

    Richfaces ShowCase离线包

    **Richfaces ShowCase离线包** 是一个专为开发者设计的资源包,它包含了Richfaces框架的演示示例,能够帮助用户在没有网络连接的情况下也能深入理解和学习Richfaces的功能和用法。这个离线包特别适合那些需要在本地...

    richfaces参考文档

    **RichFaces 参考文档详解** RichFaces 是一个强大的 JavaServer Faces (JSF) 扩展库,专为创建交互式、富客户端Web应用程序而设计。这个“richfaces参考文档”是开发人员的重要资源,尤其是对初学者而言,它提供了...

    Richfaces组件使用指南

    具体来说,包括设置皮肤、状态保存方法以及定义Richfaces Filter。 ```xml &lt;param-name&gt;org.richfaces.SKIN &lt;param-value&gt;blueSky &lt;param-name&gt;javax.faces.STATE_SAVING_METHOD &lt;param-value&gt;server ...

    RichFaces 3.3 帮助文档(英文)

    - **Oracle AS/OC4J:** 针对Oracle Application Server和OC4J的应用服务器,给出了部署RichFaces的具体步骤和配置建议。 #### 五、RichFaces框架基本概念 - **架构概览:** 详细阐述了RichFaces的核心架构,包括...

    richfaces-ui-3.3.1.GA-bin

    《深入解析RichFaces UI 3.3.1 GA版本》 在Web开发领域,富客户端框架(Rich Client Frameworks)为构建交互性更强、用户体验更优的网页应用提供了强大支持。其中,RichFaces作为一款基于JavaServer Faces(JSF)的...

Global site tag (gtag.js) - Google Analytics