JSF - Composite Components

JSF爲開發人員提供了強大的功能來定義自己的自定義組件，這些組件可用於呈現自定義內容。

Define Custom Component

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

Step	Description
1a	創建資源文件夾。在resources文件夾中創建一個具有複合命名空間的xhtml文件。
1b	使用複合標記composite:interface、composite:attribute和composite:implementation來定義複合組件的內容。使用composite:implementation中的cc.attrs獲取使用composite:interface中的composite:attribute定義的變量。

Step

Description

創建資源文件夾。

在resources文件夾中創建一個具有複合命名空間的xhtml文件。

使用複合標記composite:interface、composite:attribute和composite:implementation來定義複合組件的內容。使用composite:implementation中的cc.attrs獲取使用composite:interface中的composite:attribute定義的變量。

Step 1a: Create Custom Component : 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>

Step 1b: Use Composite Tags : loginComponent.xhtml

下表介紹了複合標記的使用。

S.No	Tag & Description
1	複合：界面聲明要在composite:implementation中使用的可配置值。
2	合成：屬性使用此標記聲明配置值。
3	組合：實現聲明JSF組件。可以使用{cc.attrs.attribute name}表達式訪問composite:interface中定義的可配置值。

S.No

Tag & Description

複合：界面

聲明要在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>

Use Custom Component

在JSF中使用自定義組件是一個簡單的過程。

Step	Description
2a	Create a xhtml file and use custom component's namespace. Namespace will the http://java.sun.com/jsf/<folder-name> where folder-name is folder in resources directory containing the custom component
2b	Use the custom component as normal JSF tags

Step 2a: Use Custom Namespace: 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">

Step 2b: Use Custom Tag: home.xhtml and Pass Values

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

Example Application

讓我們創建一個測試JSF應用程式來測試JSF中的自定義組件。

Step	Description
1	Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter.
2	Create resources folder under src → main folder.
3	Create tutorialspoint folder under src → main → resources folder.
4	Create loginComponent.xhtml file under src → main → resources → tutorialspoint folder.
5	Modify UserData.java file as explained below.
6	Modify home.xhtml as explained below. Keep the rest of the files unchanged.
7	Compile and run the application to make sure the business logic is working as per the requirements.
8	Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
9	Launch your web application using appropriate URL as explained below in the last step.

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-First應用程式一章中那樣編譯和運行應用程式。如果您的應用程式一切正常，這將產生以下結果。