一直以来,都想做一个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。
- 大小: 54.3 KB
分享到:
相关推荐
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...
微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip 微信小程序 - FlexLayout布局【源码】.zip ...
微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 ...
微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——FlexLayout布局(截图+源码).zip 微信小程序——...
UI Layout是一种基于jQuery的布局框架,其核心是一个大小自适应的中心面板,面板的上下左右四个方向可以放置可折叠、可缩放的面板,感兴趣的朋友可以下载。
jquery.layout 布局插件精简版,对依赖ui.core和拖拽进行精简
android app 界面开发,几种基本的java layout布局,基本例子供参考
android的layout布局种类
android提供的五种布局有时候不能满足实际项目的需要,所以需要自定义布局。这是一个自定义Layout布局
android layout布局分析与优化 android layout布局分析与优化
介绍Android五中布局的一个示例代码.
有时候我们pages中不同的页面...请确保在布局文件里面增加 <nuxt> 组件用于显示页面非布局内容。 举个例子 1.layouts/custom_layout.vue: 这里是自定义也页面的头部(布局) <!-- nuxt可以理解为所对应的.vue页
关于 android layout 布局的工具,相当有用,可以省去不少写代码和布局的时间
V3Layout是一款显示屏的箱体布局软件,生成的xml文件关系到底层对数据流的读取顺序,而且可以知道现场施工安装,包含大量的gdi操作,gdi使用的经典。
用extjs4搭的一个简单布局框架
Activity layout布局Activity layout布局Activity layout布局
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
代码包含线性布局,框架布局,表格布局,相对布局,约束布局的基础使用。