在richafaces中搭建layout的布局框架
一直以来,都想做一个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="#"
onclick="#{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。