布局文件
/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是一个基于JavaServer Faces (JSF) 技术的开源用户界面组件库,它提供了丰富的组件和增强功能,帮助开发者...
JSF2和RICHFACES4使用指南
根据给定的文件信息,以下是对“Richfaces 4 组件参考手册”的详细解析与相关知识点的阐述: ### 富客户端框架:Richfaces 4 #### 一、简介 Richfaces 4 是一款功能强大的富客户端框架,它为JavaServer Faces...
### RichFaces 4 开发者指南 #### 一、引言 RichFaces 4 是一款功能强大的企业级组件库,它基于 JavaServer Faces (JSF) 技术标准,为开发者提供了一系列丰富的用户界面组件。这些组件不仅支持 Ajax 交互,还提供...
### RichFaces 4 组件参考知识点 #### 一、引言 RichFaces 4 是一款功能强大的企业级 Java 应用程序开发框架,它提供了丰富的 AJAX 组件来增强 Web 应用程序的交互性和用户体验。这份文档是针对 RichFaces 4 组件的...
Seam、JSF、RichFaces 和 Ajax4jsf 是四个重要的Java Web开发框架和技术,它们在构建现代、交互式Web应用程序中发挥着关键作用。让我们深入探讨这些技术及其结合使用时的知识点。 **1. Seam** Seam是一个开源的Java...
### Richfaces标签详解 #### 一、概述 Richfaces是一个基于JavaServer Faces(JSF)技术的开源框架,提供了一套丰富的用户界面组件库。这些组件不仅具备强大的功能,还能很好地支持AJAX交互,极大地提高了Web应用...
而AJAX4JSF是RichFaces提供的一个桥梁,它将AJAX技术与JSF框架紧密结合,使得开发者可以利用JSF的生命周期和组件模型来创建复杂的、富交互性的AJAX应用。 "jbos"标签则表明了RichFaces与JBoss企业级应用服务器的...
dwRichFaces4Demo1 示例应用程序很简单;其惟一的真正目的是展示所选组件的设置和用法。因此,它的作用便是收集和显示输入数据。请想象一下如何在生产应用程序中使用数据和组件。除了必要的 JAR、图像、支持资源绑定...
`$rf.data`接口则用于管理客户端的数据存储,这在处理动态数据或者在AJAX请求之间保持状态时非常有用。 RichFaces的JS API也包含了一系列组件相关的API,例如`richfaces.selectOneMenu`,它提供了与富选择菜单组件...
通过定义JSF组件和事件处理器,RichFaces能够提供更丰富的用户界面功能,同时保持JSF的结构化开发模式。 **四、RichFaces的生命周期** RichFaces遵循JSF的生命周期,包括初始化、恢复视图、应用请求值、处理验证、...
**Richfaces ShowCase离线包** 是一个专为开发者设计的资源包,它包含了Richfaces框架的演示示例,能够帮助用户在没有网络连接的情况下也能深入理解和学习Richfaces的功能和用法。这个离线包特别适合那些需要在本地...
**RichFaces 参考文档详解** RichFaces 是一个强大的 JavaServer Faces (JSF) 扩展库,专为创建交互式、富客户端Web应用程序而设计。这个“richfaces参考文档”是开发人员的重要资源,尤其是对初学者而言,它提供了...
具体来说,包括设置皮肤、状态保存方法以及定义Richfaces Filter。 ```xml <param-name>org.richfaces.SKIN <param-value>blueSky <param-name>javax.faces.STATE_SAVING_METHOD <param-value>server ...
- **Oracle AS/OC4J:** 针对Oracle Application Server和OC4J的应用服务器,给出了部署RichFaces的具体步骤和配置建议。 #### 五、RichFaces框架基本概念 - **架构概览:** 详细阐述了RichFaces的核心架构,包括...
《深入解析RichFaces UI 3.3.1 GA版本》 在Web开发领域,富客户端框架(Rich Client Frameworks)为构建交互性更强、用户体验更优的网页应用提供了强大支持。其中,RichFaces作为一款基于JavaServer Faces(JSF)的...
Richfaces3.3.3常用组件使用手册 便于学习Richfaces和a4j和jsf框架 很好很实用
### RichFaces框架详解及其在IT行业的应用 #### 引言 在现代Web开发领域,提升用户体验和优化交互性是至关重要的。RichFaces作为一款开源框架,以其强大的Ajax能力、丰富的组件库以及高度可定制的特性,在Java...