一直以来，都想做一个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布局 (源码)微信小...
jQuery Layout 是一个强大的基于jQuery的布局框架，它为开发者提供了灵活且可定制化的布局解决方案。这个框架的核心在于一个能够自适应大小的中心面板，而面板的四周可以设置可折叠、可缩放的侧边栏，实现“东南西北...
小程序源码 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 微信小程序——...
在Android开发中，布局（Layout）是构建用户界面的基础元素，它定义了屏幕上各个组件的排列方式和相互关系。本文将深入探讨Android的五种主要布局：LinearLayout、RelativeLayout、FrameLayout、GridLayout以及...
在V3Layout中，MFC被用作应用程序的基础框架，它提供了窗口管理、事件处理、资源管理等一系列功能，简化了软件开发过程。开发者可以借助MFC快速构建用户界面，并与GDI紧密结合，实现高性能的图形绘制。 C++作为V3...
在Android应用开发中，界面设计是至关重要的，而布局（Layout）则是构建用户界面的核心工具。Java Layout基本布局主要指的是Android SDK中提供的几种布局管理器，它们负责在屏幕上组织和定位视图（View）和视图组...
8. **触发动画**：在布局变化时，可以启用平滑的动画效果，提供更好的用户体验。 9. **兼容性**：此插件通常与现代浏览器兼容，包括Chrome、Firefox、Safari、Edge和IE9及以上版本。需要注意的是，由于精简版去除了...
本篇文章将深入探讨如何在Android中进行自定义Layout布局的开发。 首先，创建自定义Layout首先要创建一个新的Java类，继承自`ViewGroup`或`LinearLayout`等现有布局。选择`ViewGroup`是因为它是所有布局的基础类，...
在Android开发中，布局（Layout）是构建用户界面的核心组件，它们决定了屏幕上元素的排列方式和相互关系。本文将深入探讨五种主要的布局控件：线性布局（LinearLayout）、框架布局（FrameLayout）、表格布局...
在布局文件layout.phtml中，还可能包含CSS和JavaScript代码，用于定义页面的样式和行为。比如，可以使用内联样式（style标签内的CSS规则）直接定义页面元素的样式。通常，我们会通过CSS选择器定义头部、尾部、导航栏...
在网页设计中，"div页面框架布局"是一个关键的概念，它涉及到如何有效地组织网页内容，以便在各种浏览器中实现良好的显示效果。EasyUI是一个基于jQuery的用户界面库，提供了丰富的组件和布局方案，使得开发者能够...
在jQuery UI Layout框架中，jQuery扮演着基础支持的角色，负责页面元素的交互和控制。 **jQuery UI** 是jQuery的一个扩展，提供了一系列用户界面组件，如对话框、滑块、进度条、日期选择器等。它还包括一套完整的...
在实际项目中，使用jQuery UI Layout 开发后台框架，开发者需要考虑以下几点： 1. 结构规划：明确每个区域的功能和内容，合理划分布局。上部通常用于导航，中部左右用于展示主要内容，下部可以作为状态栏或信息提示...
在JQueryEasyUI的Layout布局中，页面被划分为多个区域，这些区域可以独立地展示内容，用户可以通过拖动分隔条来调整布局的尺寸，以此达到个性化的需求。 使用JQueryEasyUI Layout布局框架前，需要先引入JQuery库和...
在Android开发中，界面布局是应用用户体验的关键因素。`Layout`布局工具的使用极大地提高了开发者设计和构建用户界面的效率，使得复杂的界面设计变得更为直观和便捷。标题中提到的"安卓界面布局工具（layout布局）...
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助