PrimeFaces 布局

17 Mar 2025 | 阅读 2 分钟

它是一个高度可定制的 borderLayout 模型。即使我们不熟悉网页设计，也很容易创建复杂的布局。它由 5 个不同的布局单元组成，分别是 top、left、center、right 和 bottom。我们可以将其称为 east、west、north、south 和 center。

PrimeFaces 提供了 <p:layout> 组件，用于在 JSF 应用程序中布局我们的页面。

布局属性

属性	默认值	类型	描述
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>

输出