Chinaunix首页 | 论坛 | 博客

一名系统架构师的博客

首页　| 　博文目录　| 　关于我

jieforest

  • 博客访问： 4130730
  • 博文数量： 626
  • 博客积分： 10
  • 博客等级： 民兵
  • 技术积分： 11080
  • 用 户 组： 普通用户
  • 注册时间： 2012-08-23 13:08
文章分类

全部博文（626）

文章存档

2015年（72）

2014年（48）

2013年（506）

我的朋友
最近访客
推荐博文
相关博文
PrimeFaces布局技巧之二

分类： Java

2013-10-14 10:11:52

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

要注意：当使用整页布局和表单一起工作时，要避免表单内包含布局单元，它可能会导致错误。比如下面的代码可能就是无效的：
[html] view plaincopyprint?
  1. <p:layout fullPage="true">  
  2.   <h:form>  
  3.     <p:layoutUnit position="west" size="100">  
  4.       <h:outputText value="Left Pane" />  
  5.     p:layoutUnit>  
  6.     <p:layoutUnit position="center">  
  7.       <h:outputText value="Right Pane" />  
  8.     p:layoutUnit>  
  9.   h:form>  
  10. p:layout>  

布局单元必定有自己的表单，因此要避免更新布局单元，应该是更新内容而不更新布局。

除了布局的“中中center”区域，其它区域都必须有自己的尺寸大小，使用size选项。

布局的另一种使用情况是基于元素的布局。它实际上相当于把整页布局fullPage属性设置为false。

布局使用到的皮肤样式类由于皮肤样式类是全局的，在主题那一章可以看到更详细的信息。


布局使用到的皮肤样式类



布局单元LayoutUnit
布局单元表示边框布局模型的一个区域。
布局单元的属性包括：


注：红色字体部分是我修订过的结果，PrimeFaces官网的文档有错误。

布局示例：


代码样例：
[html] view plaincopyprint?
  1. >  
  2. <html xmlns=""  
  3.     xmlns:h=""  
  4.     xmlns:f=""  
  5.     xmlns:ui=""  
  6.     xmlns:p="">  
  7.   
  8. <f:view contentType="text/html">  
  9.     <h:head>  
  10.         <f:facet name="first">  
  11.             <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />  
  12.             <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />  
  13.             <title>PrimeFaces Layouttitle>  
  14.         f:facet>  
  15.         <style type="text/css">  
  16.         style>  
  17.     h:head>  
  18.   
  19.     <h:body>  
  20.         <p:layout fullPage="true">  
  21.             <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">  
  22.                 <h:outputText value="顶部区域" />  
  23.             p:layoutUnit>  
  24.   
  25.             <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">  
  26.                 <h:outputText value="底部区域" />  
  27.             p:layoutUnit>  
  28.   
  29.             <p:layoutUnit position="west" size="300" header="左部" collapsible="true" footer="左底" gutter="1" effect="drop">  
  30.                 <p:accordionPanel>  
  31.                     <p:tab title="菜单1">  
  32.                         <h:outputText value="菜单1测试" />  
  33.                     p:tab>  
  34.   
  35.                     <p:tab title="菜单2">  
  36.                         <h:outputText value="菜单2测试" />  
  37.                     p:tab>  
  38.   
  39.                     <p:tab title="菜单3">  
  40.                         <h:outputText value="菜单3测试" />  
  41.                     p:tab>  
  42.                 p:accordionPanel>  
  43.             p:layoutUnit>  
  44.   
  45.             <p:layoutUnit position="center" closable="true" collapsible="true" header="Contents">  
  46.                 <h:form>  
  47.                     布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。布局组件Layout是一个高度可定制的边框布局模型，它可以很轻松地创建复杂的网页布局，即使不懂Web设计。  
  48.                 h:form>  
  49.             p:layoutUnit>  
  50.         p:layout>  
  51.     h:body>  
  52.   
  53. f:view>  
  54. html>  

其实布局很简单，您认为呢？
阅读(2832) | 评论(0) | 转发(0) |
0

上一篇： SLF4J和Logback日志框架详解

下一篇： Jetty 9稳定版正式发布

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6