PrimeFaces布局技巧之二
作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs本文紧接《
PrimeFaces布局技巧》。
要注意：当使用整页布局和表单一起工作时，要避免表单内包含布局单元，它可能会导致错误。比如下面的代码可能就是无效的：
<p:layout fullPage="true">
<h:form>
<p:layoutUnit position="west" size="100">
<h:outputText value="Left Pane" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Right Pane" />
</p:layoutUnit>
</h:form>
</p:layout>
布局单元必定有自己的表单，因此要避免更新布局单元，应该是更新内容而不更新布局。
除了布局的“中中center”区域，其它区域都必须有自己的尺寸大小，使用size选项。
布局的另一种使用情况是基于元素的布局。它实际上相当于把整页布局fullPage属性设置为false。
布局使用到的皮肤样式类由于皮肤样式类是全局的，在主题那一章可以看到更详细的信息。
布局使用到的皮肤样式类
布局单元LayoutUnit
布局单元表示边框布局模型的一个区域。
布局单元的属性包括：
注：红色字体部分是我修订过的结果，PrimeFaces官网的文档有错误。布局示例：
代码样例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>PrimeFaces Layout</title>
</f:facet>
<style type="text/css">
</style>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="顶部区域" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
<h:outputText value="底部区域" />
</p:layoutUnit>
<p:layoutUnit position="west" size="300" header="左部" collapsible="true" footer="左底" gutter="1" effect="drop">
<p:accordionPanel>
<p:tab title="菜单1">
<h:outputText value="菜单1测试" />
</p:tab>
<p:tab title="菜单2">
<h:outputText value="菜单2测试" />
</p:tab>
<p:tab title="菜单3">
<h:outputText value="菜单3测试" />
</p:tab>
</p:accordionPanel>
</p:layoutUnit>
<p:layoutUnit position="center" closable="true" collapsible="true" header="Contents">
<h:form>
布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
其实布局很简单，您认为呢？
分享到：
相关推荐
primefaces 一个机遇JSF2 的免费框架 界面比较友好 是个人开发和小型网站开发的首选
什么是PrimeFaces? PrimeFaces是一套开源的JSF组件套装，共有100多个支持AJAX的JSF组件。另外一个TouchFaces模块提供了用于移动web应用开发的UI工具。PrimeFaces的主要目标是为JSF创建终级组件集。 Prime技术 ...
primefaces-5.0.jar
《primefaces cookbook》示例代码
primefaces-3.5.jar开发包
PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库。 UI Components：PrimeFaces UI模块提供了拥有Rich Web用户体 验的各种JSF组件。PrimeFaces使用Yahoo UI库做为默认的客户端框架。PrimeFaces提供的...
适合primefaces开发需要主题包，是在primefaces 网站的下载的，需要请下载，给1 分就行啊。
primefaces 中文文档
primefaces-5.2.jar
PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库。 PrimeFaces Cookbook是关于PrimeFaces的第一本书籍。
需要用最新primefaces的可以下载
PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库，具有丰富的UI界面组件，同时提供大量手机网页UI组件，程序包为开发网页的demo，可以使用tomcat8启，使你可以在demo的提示下使用UI组件轻松开发你的程序
Primefaces 框架包 是
PrimeFaces主要标签学习。 1 PrimeFaces综述 3 1.1 安装 3 1.2 配置，JSF2.0环境下用PrimeFace2.x 4 1.3 Hello World入门示例 4 1.4 UI组件： 4 2 UI组件 5 2.1 布局 5 2.1.1 Layout 页面布局 5 2.1.2 Panel用于...
primefaces 用户开发手册，版本号6.2，https://www.primefaces.org/downloads/
PrimeFaces Blueprints.pdf高清带书签
SpringBoot整合PrimeFaces demo案例
primefaces guide 指南 jsf 快速入门
最近一直研究jsf2，相信这个对大家很有帮助，primefaces3.5的参考文档
里面包含primeFaces中文文档、英文文档，还有和jsf2.0详细配置说明， primeFaces3.3.1 jar包、源码、及标签文档