本文概述
这是一个高度可定制的borderLayout模型。即使我们不熟悉网页设计, 也很容易创建复杂的布局。它由5个不同的布局单位组成, 分别是顶部, 左侧, 中心, 右侧和底部。我们可以称其为东, 西, 北, 南和中心。
PrimeFaces提供了<p:layout>组件, 该组件用于在JSF应用程序中布局页面。
布局属性
Attribute | 默认值 | Type | Description |
---|---|---|---|
rendered | true | Boolean | 它需要布尔值来指定组件的呈现。 |
fullPage | false | Boolean | 它指定布局是否应跨越所有页面。 |
style | null | String | 用于设置要应用于容器元素的样式。 |
onResize | null | String | 调整布局单位的大小时执行。 |
onClose | null | String | 当布局单元关闭时执行。 |
onToggle | null | String | 当切换布局单位时执行。 |
resizeTitle | null | String | 用于设置调整大小按钮的标题标签。 |
collapseTitle | null | String | 用于设置折叠按钮的标题标签。 |
expandTitle | null | String | 用于设置扩展按钮的标题标签。 |
closeTitle | null | String | 用于设置关闭按钮的标题标签。 |
例子
在下面的示例中, 我们正在实现<p:layout>组件。本示例包含以下文件。
JSF文件
// layout.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Layout</title>
</h:head>
<h:body>
<p:layout style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="150" minSize="40" maxSize="200">
<p:graphicImage name="images/courses/java.png" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Java is a programming language and a platform.
Java is a high level, robust, secured and object-oriented programming language.
Platform: Any hardware or software environment in which a program runs, is known as a platform.
Since Java has its own runtime environment (JRE) and API, it is called platform."/>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
输出
评论前必须登录!
注册