PrimeFaces格局技巧之二

2013-03-12

PrimeFaces布局技巧之二PrimeFaces布局技巧之二作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chs

PrimeFaces布局技巧之二

PrimeFaces布局技巧之二作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

本文紧接《PrimeFaces布局技巧》。

要注意：当使用整页布局和表单一起工作时，要避免表单内包含布局单元，它可能会导致错误。比如下面的代码可能就是无效的：



布局单元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格局技巧之二