PrimeFaces布局技巧之二
来源:互联网 发布:20兆联通网络怎么样 编辑:程序博客网 时间:2024/05/21 10:17
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布局技巧之二
- PrimeFaces布局技巧之二
- PrimeFaces布局技巧
- primefaces使用小技巧1
- primefaces
- PrimeFaces
- primefaces和jsf2的一些技巧
- 布局之二-- RelativeLayout
- CSS精粹之布局技巧
- CSS精粹之布局技巧
- CSS页面布局技巧(二)
- 九种拆面技巧之二
- linux技巧之二
- MFC 技巧之二
- 常用技巧之二
- MFC 技巧之二
- android布局之二:布局复用
- css布局之二列布局
- Java常用正则表达式
- HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
- 程序员度量:改善软件团队的分析学
- 简析最常见的开源协议
- android音乐播放器开发_开篇
- PrimeFaces布局技巧之二
- linux学习入门8——使用fdisk进行磁盘管理(linuxcast.net)
- UIView animateWithDuration 使用详解
- Ext.Net 1.x_Ext.Net.Button刷新MSChart
- JAVA学习(八)__Spring2.5+JUnit4单元测试
- 2013大计
- 可食用橄榄油的美容减肥法
- ubuntu如何修改开机启动项
- iOS开发那些事-平铺导航-基于Page的导航及案例实现