PrimeFaces布局技巧之二

最新推荐文章于 2024-09-21 10:38:43 发布

jliang981

最新推荐文章于 2024-09-21 10:38:43 发布

阅读量1.1k

点赞数

分类专栏： jsf java 文章标签： java jsf

java 同时被 2 个专栏收录

120 篇文章 1 订阅

订阅专栏

jsf

10 篇文章 0 订阅

订阅专栏

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

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

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

[html]view plaincopyprint? 
   
 <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官网的文档有错误。

布局示例：

代码样例：

[html]view plaincopyprint? 
   
 <!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>  