在richafaces中搭建layout的布局框架-CSDN博客

一直以来，都想做一个layout的布局框架，虽然richface本身提供了layout的组件框架，但应用还是很多人不太清楚，下面不采用layout组件做一个layout的组件，使得用户在点击左边导航栏时，右边的主体框架相应的页面发生变化，实现典型的iframe的方式。

1、首先看一下整体布局，其整体布局效果如图所示：

要实现这样的框架，首先要熟悉facelet的布局方式，header 、footer、sidbar方式方式

1、看一下main.xhtml中的布局

<?xml version="1.0" encoding="UTF-8"?>
<rich:page 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" markupposition="xhtml"
	contentposition="text/html" theme="#{pageBean.theme}"
	width="#{pageBean.width}" sidebarWidth="#{pageBean.sidebarWidth}"
	sidebarPosition="#{pageBean.position}" headerClass="p_header"
	footerClass="p_footer" bodyClass="p_body" sidebarClass="p_sidebar"
	pageTitle="报表服务平台">
	<f:facet name="header">
		<ui:include src="/pages/frameWork/includes/header.xhtml" />
	</f:facet>
	<f:facet name="sidebar">
		<ui:include src="/pages/frameWork/includes/navigator.xhtml" />
	</f:facet>
	<a4j:outputPanel id="content">
		<!--<ui:include src="/pages/frameWork/includes/bar.xhtml" />-->
		<ui:include src="#{controller.url}">
			<!--传递模板名称和路径参数,只对activex控件起作用  -->
			<ui:param name="palatename" value="#{controller.platename}" />
		</ui:include>
	</a4j:outputPanel>
	<f:facet name="footer">
		<ui:include src="/pages/frameWork/includes/footer.xhtml" />
	</f:facet>
</rich:page>

2、左边导航栏的布局

<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:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<ui:composition>
	<h:form>
		<div class="dyleft">
		<f:facet name="header">
			<h:outputText value="导航栏" />
		</f:facet> <rich:tree id="treeXML" value="#{navigationTreeBean.data}"
			var="vardata" nodeFace="#{vardata.attributes['type']}"
			ajaxSingle="true">
			<rich:treeNode icon="#{vardata.attributes['icon']}"
				iconLeaf="#{vardata.attributes['leafIcon']}" type="parent">
				<h:outputText value="#{vardata.attributes['label']}" />
			</rich:treeNode>
			<rich:treeNode icon="#{vardata.attributes['icon']}"
				iconLeaf="#{vardata.attributes['leafIcon']}" type="link">
				<h:outputLink style="display:block;height:20px"
					value="#{vardata.attributes['dir']}/#{vardata.attributes['filename']}"
					target="_blank">
					<h:outputText value="#{vardata.attributes['name']}" />
				</h:outputLink>
			</rich:treeNode>

			<rich:treeNode icon="#{vardata.attributes['icon']}"
				iconLeaf="#{vardata.attributes['leafIcon']}" type="page">
				<a4j:commandLink value="#{vardata.attributes['name']}"
					reRender="content" actionListener="#{controller.reloadUrl}">
					<f:param name="url"
						value="#{vardata.attributes['dir']}/#{vardata.attributes['filename']}" />
				</a4j:commandLink>
				<!--h:outputLink 
						style="display:block;height:20px"
						value="#{facesContext.externalContext.requestContextPath}#{vardata.attributes['dir']}/#{vardata.attributes['filename']}">
						<h:outputText value="#{vardata.attributes['name']}" style="display:block;padding-top:3px;text-decoration : none; color : #000000;" />
					</h:outputLink -->
			</rich:treeNode>

			<rich:treeNode icon="#{vardata.attributes['icon']}"
				iconLeaf="#{vardata.attributes['leafIcon']}" type="modalPanel">
				<h:outputLink value="#"
					οnclick="#{rich:component('pageconfig')}.show()"
					reRender="pageInfo">
					<h:outputText value="#{vardata.attributes['name']}" />
				</h:outputLink>
			</rich:treeNode>
			<!-- 报表展示使用 -->
			<rich:treeNode icon="#{vardata.attributes['icon']}"
				iconLeaf="#{vardata.attributes['leafIcon']}" type="reportView">
				<a4j:commandLink value="#{vardata.attributes['name']}"
					reRender="content" actionListener="#{controller.reloadUrl}">
					<f:param name="url"
						value="#{vardata.attributes['dir']}/#{vardata.attributes['filename']}" />
					<f:param name="templatename" value="#{vardata.attributes['path']}" />
				</a4j:commandLink>
			</rich:treeNode>
		</rich:tree></div>
	</h:form>
</ui:composition>
</html>

其基本思想是左边导航栏点击时，url地址发生变化，同时刷新右边的outpanel，其中，url对应的bean的范围是Session。