JSF 复合组件

2024 年 8 月 29 日 | 阅读 3 分钟

JSF 通过 Facelets 提供了复合组件的概念。复合组件是一种特殊类型的模板，在您的应用程序中充当组件。

复合组件由标记标签和其他现有组件组成。这个可重用的、用户创建的组件具有定制的、定义的功能，并且可以像任何其他组件一样附加验证器、转换器和监听器。任何包含标记标签和其他组件的 XHTML 页面都可以转换为复合组件。

下表包含复合标签。

标签	函数
composite:interface	它用于声明复合组件的用法约定。复合组件可以用作单个组件，其功能集是使用约定中声明的功能的并集。
composite:implementation	它用于定义复合组件的实现。如果出现 composite:interface 元素，则必须有一个相应的 composite:implementation。
composite:attribute	它用于声明可以赋给声明此标签的复合组件实例的属性。
composite:insertChildren	它用于在使用页面的复合组件标签内插入子组件。
composite:valueHolder	它用于声明此元素嵌套的 composite:interface 声明其约定的复合组件公开了 ValueHolder 的实现，适用于用作使用页面中附加对象的目标。
composite:editableValueHolder	它用于声明此元素嵌套的 composite:interface 声明其约定的复合组件公开了 EditableValueHolder 的实现，适用于用作使用页面中附加对象的目标。
composite:actionSource	它用于声明此元素嵌套的 composite:interface 声明其约定的复合组件公开了 ActionSource 的实现，适用于用作使用页面中附加对象的目标。

在下面的例子中，我们正在创建一个复合组件，该组件接受用户名和电子邮件地址作为输入。

创建复合组件

在创建复合组件之前，请确保您正在使用下面给出的正确命名空间。

// composite-component-example.xhtml

<!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:composite="http://xmlns.jcp.org/jsf/composite"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Composite Component Example</title>
</h:head>

<h:body>
<composite:interface>
<composite:attribute name="username" required="false"/>
<composite:attribute name="email" required="false"/>
</composite:interface>
<composite:implementation>
<h:outputLabel value="User Name " />
<h:inputText value="#{cc.attrs.username}"/><br/>
<h:outputLabel value="Email ID "/>
<h:inputText value="#{cc.attrs.email}"/><br/>
</composite:implementation>
</h:body>
</html>

在上面的例子中，composite:interface 标签用于声明可配置值。composite:implementation 标签用于声明所有 XHTML 标记标签，cc.attrs.username用于定义 inputText 组件的值。 cc 是 JSF 中复合组件的保留字。表达式 #{cc.attrs.attribute-name} 用于访问为复合组件的接口定义的属性。

上面的代码存储为一个名为 composite-component-example.xhtml 的文件，该文件位于应用程序 web 根目录下的名为 resources/com 的文件夹中。

使用复合组件

使用复合组件的网页通常称为使用页面。使用页面包含对 xml 命名空间声明中复合组件的引用，如下所示

这里，com 是存储文件的文件夹，co 是用于访问组件的引用。

// index.xhtml

<!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:co="http://xmlns.jcp.org/jsf/composite/com">
<h:head>
<title>Implementing Composite Component</title>
</h:head>
<body>
<h:form>
<co:composite-component-example />
</h:form>
</body>
</html>

运行项目后，我们在网页上得到以下用户界面。