个性化阅读
专注于IT技术分析

PrimeFaces布局组件用法

本文概述

这是一个高度可定制的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>

输出

PrimeFaces布局1
赞(0)
未经允许不得转载:srcmini » PrimeFaces布局组件用法

评论 抢沙发

评论前必须登录!