JSF教程

JSF 复合组件

JSF 为开发人员提供了强大的能力来定义他们自己的自定义组件，这些组件可用于呈现自定义内容。

定义自定义组件

在 JSF 中定义自定义组件是一个两步过程。

步骤	描述
1a	创建一个资源文件夹。在具有复合命名空间的资源文件夹中创建一个 xhtml 文件。
1b	使用复合标签 composite:interface、composite:attribute和 composite:implementation来定义复合组件的内容。在 composite:implementation 中使用 cc.attrs 来获取在 composite:interface 中使用 composite:attribute 定义的变量。

步骤 1a：创建自定义组件：loginComponent.xhtml

在资源文件夹中创建一个文件夹tutorialspoint，并在其中创建一个文件loginComponent.xhtml。

在 html 标题中使用复合命名空间。

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:composite = "http://java.sun.com/jsf/composite">
...
</html>

步骤 1b：使用复合标签：loginComponent.xhtml

下表描述了复合标签的使用。

S.No	标签和说明
1	composite:interface 声明要在复合:实现中使用的可配置值。
2	composite:attribute 使用这个标签声明配置值。
3	composite:implementation 声明 JSF 组件。可以使用 #{cc.attrs.attribute-name} 表达式访问复合：接口中定义的可配置值。

<composite:interface>
   <composite:attribute name = "usernameLabel" />
   <composite:attribute name = "usernameValue" />
</composite:interface>
<composite:implementation>
<h:form>
   #{cc.attrs.usernameLabel} : 
   <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
</h:form>

使用自定义组件

在 JSF 中使用自定义组件是一个简单的过程。

步骤	描述
2a	创建一个 xhtml 文件并使用自定义组件的命名空间。命名空间将 http://java.sun.com/jsf/ ，其中文件夹名是包含自定义组件的资源目录中的文件夹
2b	使用自定义组件作为普通的 JSF 标签

步骤 2a：使用自定义命名空间：home.xhtml

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">

步骤 2b：使用自定义标签：home.xhtml 和传递值

<h:form>
   <tp:loginComponent 
      usernameLabel = "Enter User Name: " 
      usernameValue = "#{userData.name}" />
</h:form>

示例应用

让我们创建一个测试 JSF 应用程序来测试 JSF 中的自定义组件。

步骤	描述
1	在com.tutorialspoint.test 包下创建一个名为helloworld 的项目，如JSF-第一个应用程序章节所述。
2	在src → main文件夹下创建resources文件夹。
3	在src → main → resources文件夹下创建tutorialspoint文件夹。
4	在src→main→resources→tutorialspoint文件夹下创建loginComponent.xhtml文件。
5	修改 UserData.java 文件，如下所述。
6	修改 home.xhtml 如下所述。保持其余文件不变。
7	编译并运行应用程序以确保业务逻辑按照要求工作。
8	最后，以war文件的形式构建应用，并部署到Apache Tomcat Webserver中。
9	使用适当的 URL 启动您的 Web 应用程序，如下面最后一步所述。

登录组件.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://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:composite = "http://java.sun.com/jsf/composite">
   
   <composite:interface>
      <composite:attribute name = "usernameLabel" />
      <composite:attribute name = "usernameValue" />
      <composite:attribute name = "passwordLabel" />
      <composite:attribute name = "passwordValue" />
      <composite:attribute name = "loginButtonLabel" />
      <composite:attribute name = "loginButtonAction" 
         method-signature = "java.lang.String login()" />
   </composite:interface>
   
   <composite:implementation>
      <h:form>
         <h:message for = "loginPanel" style = "color:red;" />
         
         <h:panelGrid columns = "2" id = "loginPanel">
            #{cc.attrs.usernameLabel} : 
            <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
            #{cc.attrs.passwordLabel} : 
            <h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
         </h:panelGrid>
         
         <h:commandButton action = "#{cc.attrs.loginButtonAction}" 
            value = "#{cc.attrs.loginButtonLabel}"/>
      </h:form>
   </composite:implementation>
</html>

用户数据.java

package com.tutorialspoint.test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   private String password;
   
   public String getName() {
      return name;
   }
   
   public void setName(String name) {
      this.name = name;
   }
   
   public String getPassword() {
      return password;
   }
   
   public void setPassword(String password) {
      this.password = password;
   }	
   
   public String login() {
      return "result";
   }	
}

home.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://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
   
   <h:head>
      <title>JSF tutorial</title>		     
   </h:head>
   
   <h:body> 
      <h2>Custom Component Example</h2>
      
      <h:form>
      <tp:loginComponent 
         usernameLabel = "Enter User Name: " 
         usernameValue = "#{userData.name}" 
         passwordLabel = "Enter Password: " 
         passwordValue = "#{userData.password}"
         loginButtonLabel = "Login" 
         loginButtonAction = "#{userData.login}" />
      </h:form>
   </h:body>
</html>

一旦您准备好完成所有更改，让我们像在 JSF-First Application 章节中一样编译和运行应用程序。如果您的应用程序一切正常，这将产生以下结果。

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< JSF 数据表 JSF Ajax >>

昵称：邮箱：