JSF-複合コンポーネント

JSFは、独自のカスタムコンポーネントを定義する強力な機能を開発者に提供します。これを使用して、カスタムコンテンツをレンダリングできます。

カスタムコンポーネントの定義

JSFでのカスタムコンポーネントの定義は2段階のプロセスです。

Step

Description

1a

Create a resources folder.

複合名前空間を使用して、resourcesフォルダーにxhtmlファイルを作成します。

1b

Use composite tags composite:interface, composite:attribute and composite:implementation, to define content of the composite component. Use cc.attrs in composite:implementation to get variable defined using composite:attribute in composite:interface.

ステップ1a：カスタムコンポーネントの作成：loginComponent.xhtml

リソースフォルダーにfinddevguidesフォルダーを作成し、その中にファイル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

Tag & Description

1

composite:interface

composite：implementationで使用される構成可能な値を宣言します。

2

composite:attribute

構成値は、このタグを使用して宣言されます。

3

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でカスタムコンポーネントを使用するのは簡単なプロセスです。

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

ステップ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/finddevguides">

ステップ2b：カスタムタグの使用：home.xhtmlおよび値を渡す

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

応用例

テストJSFアプリケーションを作成して、JSFのカスタムコンポーネントをテストしましょう。

Step	Description
1	Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter.
2	Create resources folder under src → main folder.
3	Create finddevguides folder under src → main → resources folder.
4	Create loginComponent.xhtml file under src → main → resources → finddevguides 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.finddevguides.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/finddevguides">

   <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-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。すべてがアプリケーションで問題ない場合、次の結果が生成されます。

JSFカスタムコンポーネント

Jsf-composite-components

目次