JSF - 組合元件

JSF 為開發者提供了強大的能力，可以定義他們自己的自定義元件，這些元件可用於呈現自定義內容。

定義自定義元件

在 JSF 中定義自定義元件是一個兩步過程。

步驟	描述
1a	建立一個 resources 資料夾。在 resources 資料夾中建立一個具有組合名稱空間的 xhtml 檔案。
1b	使用組合標籤composite:interface、composite:attribute 和 composite:implementation 來定義組合元件的內容。在composite:implementation 中使用cc.attrs 獲取在composite:interface 中使用composite:attribute 定義的變數。

步驟

描述

建立一個 resources 資料夾。

在 resources 資料夾中建立一個具有組合名稱空間的 xhtml 檔案。

使用組合標籤composite:interface、composite:attribute 和 composite:implementation 來定義組合元件的內容。在composite:implementation 中使用cc.attrs 獲取在composite:interface 中使用composite:attribute 定義的變數。

步驟 1a：建立自定義元件：loginComponent.xhtml

在 resources 資料夾下建立一個名為 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

下表描述了組合標籤的用法。

序號	標籤 & 描述
1	composite:interface 宣告要在 composite:implementation 中使用的可配置值。
2	composite:attribute 使用此標籤宣告配置值。
3	composite:implementation 宣告 JSF 元件。可以使用 #{cc.attrs.attribute-name} 表示式訪問在 composite:interface 中定義的可配置值。

序號

標籤 & 描述

composite:interface

宣告要在 composite:implementation 中使用的可配置值。

composite:attribute

使用此標籤宣告配置值。

composite:implementation

宣告 JSF 元件。可以使用 #{cc.attrs.attribute-name} 表示式訪問在 composite:interface 中定義的可配置值。

<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/<folder-name>，其中folder-name 是 resources 目錄中包含自定義元件的資料夾。
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	按照JSF - 第一個應用程式章節的說明，建立一個名為helloworld的專案，放在com.tutorialspoint.test包下。
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 Web 伺服器。
9	使用最後一步中說明的相應 URL 啟動您的 Web 應用程式。

loginComponent.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>

UserData.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 - 第一個應用程式章節中那樣編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果。

列印頁面