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是一个开源的JavaServer Faces (JSF)组件库，它提供了一套丰富的UI组件，用于创建基于JSF的Web应用程序。PrimeFaces 3.5是一个版本号，表明这是一系列不断进化的组件库的迭代。JSF是一种Java EE的服务器端...
#### 二、安装与配置 - **下载**：从官方网站或通过Maven等依赖管理工具获取PrimeFaces库。 - **依赖关系**：确保项目环境支持JSF，并添加必要的库依赖。 - **配置**：在`web.xml`和`faces-config.xml`文件中进行...
2. **Facelets模板语言**：Facelets是JSF默认的视图描述语言，它允许开发者创建可重用的UI组件和页面布局。 3. **JSF生命周期**：理解JSF请求处理的六个阶段，包括恢复视图、应用请求值、处理验证、更新模型值、...
例如，“Java, JSF2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android”等，这些技术栈的提及，说明在Android开发中，事件处理通常不是孤立存在的，它往往需要...
Facelets的可扩展性和灵活性使得页面布局和样式定制变得更为简便。 除了基本的UI组件，JSF还提供了一套丰富的内置服务，如导航系统、国际化支持、表单验证和Ajax功能。Ajax在JSF中的实现允许部分页面更新，提升用户...
开发者可以通过这些组件构建复杂的表单和页面布局。此外，还有第三方组件库，如PrimeFaces和RichFaces，提供了更多高级功能和视觉效果。 ### 3. 视图和模型 - **视图**: 视图是用户看到的页面，通常由XHTML文件...
3. **自定义标签**：通过创建`FacesComponent`或使用第三方库如ICEfaces、PrimeFaces等，可以创建自定义的UI组件，例如滑块、图表、对话框等，以满足更复杂的界面需求。 **JSF API** 包括了JSF的框架类、接口和辅助...
它支持模板和继承，使得页面布局和重用更为便捷。Facelets文件通常扩展名为`.xhtml`，结合XML和HTML语法，可以方便地添加JSF组件。 3. **组件和事件处理** JSF组件是可交互的UI元素，它们有自己的状态，并且可以...
5. **组件库**：JSF有丰富的组件库，例如PrimeFaces、ICEfaces和RichFaces等，它们提供了大量预先封装好的UI组件，可以增强用户体验。 6. **依赖注入**：JSF与Java EE的依赖注入（DI）机制兼容，可以通过注解（如`@...