[Java EE 7] JSF Composite 组件

阅读更多

文章来源： http://www.aptusource.org/2014/04/java-ee-7-jsf-composite-components/

利用 Facelets 和资源处理的特性，JSF 定义了 Composite 组件，它是一个使用 Facelets 标签文件定义的组件，组件中可能包含了一组 JSF 组件。将这个定义 Composite 组件的 .xhtml 文件放到资源目录中。这样，你就可以在 JSF 页面中的任意地方使用这个可重用的组件了。

Composite 组件在“定义页面”中定义，在“使用页面”中使用。在定义页面中使用 定义元数据（或参数），使用 定义具体实现。cc 的命名空间是 http://xmlns.jcp.org/jsf/composite/ namespace。在未来版本的 JSF 中，可能会放松定义元数据的限制，因为元数据可以从具体实现中推断出来。

从 JSF 1.2 开始就可以定义 Composite 组件了，但是在 1.2 中需要更深地理解 JSF 生命周期并且需要编辑多个文件。JSF 2.0 开始，使用 Composite 只需要编辑一个 .xhtml 文件。

我们看看，如果 Facelet 中有下面的代码片段用于显示登录表单：

这段代码定义了一个有两行三列的表格，显示如下：





表格中的第一列定义了显示标签，第二列定义了输入框，第三列定义了错误提示语显示位置；表格第一行绑定输入值到 User.name 属性，第二行绑定输入值到 User.password 属性。页面还有一个提交按钮，点击后会提交到 UserService bean 的 register 方法。

如果这个登录表单需要在多个页面中展示，那么你需要在每个页面中编写上面的表单代码。更好的做法是将表单代码定义到 Composite 组件中。首选需要将代码拷贝到 .xhtml 文件中，再将文件拷贝到标准资源目录中。根据约定优于配置原则，这个代码段已经自动被分配了命名空间和标签名。

假设登录表单代码拷贝到了 resources/mycomp/login.xhtml 文件中，这个定义页面看起来应该是这样：

在上面的代码中，cc:interface 用于定义组件的元数据，在 cc:interface 中可以定义：页面属性、facets、或事件监听器等。cc:implementation 中包含了组件的内容。

使用定义的 Composite 组件是，命名空间是 http://xmlns.jcp.org/jsf/composite/ 和 mycomp 组合，标记名称是去掉 .xhtml 后缀之后的文件名：

假如需要在代码中绑定另外的属性（替代 #{user.name}）并且在不同的页面需要提交到不同的后台方法（替代 #{userService.register}）。那么在定义页面的时候可以将这些值传入：

在上面的代码中，在 cc:interface 中清晰地定义了各个参数。第三个参数使用了 targets 属性指向 ccForm:loginButton。

在 cc:implementation 中：

•     h:form 拥有 id 属性。这是必须的，这样才能显式引用表单中的提交按钮。
•     h:inputText 现在使用 #{cc.attrs.xxx} 替换了 #{user.xxx}。#{cc.attrs} 是一个 EL 表达式，用于在组件中访问组件定义的属性，在这个例子中组件定义了 name 和 password 两个属性。
•     属性 actionListener 中定义了事件监听器。它使用 method-signature 定义了方法签名。
•     h:commandButton 拥有 id 属性，这样能在 h:form 中很方便的定位到提交按钮。

在使用页面中，可以使用下面的代码来传入 user、password 和 actionListener：

现在，使用页面可以传入不同的后台 bean 属性和不同的提交处理方法。

总的来说，Composite 组件带来了以下好处：

•     遵循不要重复自己原则，让你的代码集中在一个文件中。
•     允许开发者在不使用 Java 代码和 XML 的情况下定义新组件。

文章来源： http://www.aptusource.org/2014/04/java-ee-7-jsf-composite-components/

• 
• 大小: 11.3 KB

• 查看图片附件