• NetBeans IDEのJavaバンドル版には、このチュートリアルに必要な、Java EE準拠サーバーのGlassFishサーバーも含まれています。
• プロジェクトを、正常に機能するソリューションと比較するには、完成したサンプル・プロジェクトをダウンロードします。

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

管理対象Beanウィザードの使用

1. 「プロジェクト」ウィンドウで「jsfDemo」プロジェクト・ノードを右クリックし、「新規」>「JSF管理対象Bean」を選択します。(「管理対象Bean」が表示されない場合は、「その他」を選択します。次に、「JavaServer Faces」カテゴリから「JSF管理対象Bean」オプションを選択します。「次」をクリックします。)
2. ウィザードで、次の情報を入力します。
   • クラス名: UserNumberBean
   • パッケージ: guessNumber
   • 名前: UserNumberBean
   • スコープ: session
   
3. 「終了」をクリックします。UserNumberBeanクラスが生成され、エディタで開かれます。次の注釈(太字で表示)を確認します。

   package guessNumber;
   
   import javax.faces.bean.ManagedBean;
   import javax.faces.bean.SessionScoped;
   
   /**
    *
    * @author nbuser
    */
   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean {
   
       /** Creates a new instance of UserNumberBean */
       public UserNumberBean() {
       }
   
   }

   ここではJSF 2.xを使用しているため、注釈を使用して、JSF固有のコンポーネントをすべて宣言できます。以前のバージョンでは、Faces構成ファイル(faces-config.xml)で宣言する必要がありました。

   すべてのJSF 2.1注釈を確認するには、Faces管理対象Beanの注釈の仕様を参照してください。

コンストラクタの作成

UserNumberBeanコンストラクタは、0から10の間のランダムな数値を生成し、インスタンス変数に格納します。これが、アプリケーションのビジネス・ロジックの一部を形成します。

1. UserNumberBeanクラスのコンストラクタを定義します。次のコードを入力します(変更箇所は太字で表示)。

   public class UserNumberBean {
   
       Integer randomInt;
   
       /** Creates a new instance of UserNumberBean */
       public UserNumberBean() {
           Random randomGR = new Random();
           randomInt = new Integer(randomGR.nextInt(10));
           System.out.println("Duke's number: " + randomInt);
       }
   
   }

   このコードは0から10の間のランダムな数値を生成し、その数値をサーバー・ログに出力します。

2. インポートを修正します。そのためには、エディタの左マージンに表示されるヒント・バッチ()をクリックし、java.util.Randomをクラスにインポートするオプションを選択します。
3. プロジェクトを再度実行します(「プロジェクトの実行」()ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。プロジェクトを実行すると、サーバーのログ・ファイルが「出力」ウィンドウに自動的に開かれます。
   

   コンストラクタで示されるように、出力にはDuke's number: が表示されません。UserNumberBeanオブジェクトは作成されませんでした。これは、JSFがデフォルトで遅延インスタンス化を使用するためです。つまり、特定のスコープ内のBeansは、アプリケーションで必要とされたときにのみ作成され、インスタンス化されます。

   @ManagedBean注釈用のJavadocには、次のように記載されています。

   eager()属性の値がtrueで、managed-bean-scopeの値がapplicationの場合は、アプリケーションの開始時にランタイムがこのクラスをインスタンス化する必要があります。このインスタンス化とインスタンスの格納は、他のリクエストを処理する前に実行される必要があります。eagerの値が指定されていないかfalseの場合、またはmanaged-bean-scopeがapplication以外の場合は、デフォルトの「遅延」インスタンス化と管理対象Beanのスコープ指定記憶域が生じます。
4. UserNumberBeanはセッション・スコープ指定されているため、Serializableインタフェースを実装させます。

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {

   ヒント・バッジ()を使用して、java.io.Serializableをクラスにインポートします。

プロパティの追加

次の項で作成するFaceletsページは、ユーザーが入力する数値と生成されたレスポンスにアクセスする必要があります。これを容易にするため、userNumberおよびresponseプロパティをクラスに追加します。

1. まず、userNumberという名前のIntegerを宣言します。

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {
   
       Integer randomInt;
       Integer userNumber;

2. エディタ内で右クリックし、「コードを挿入」を選択します([Alt]-[Insert]、Macの場合は[Ctrl]-[I])。取得メソッドおよび設定メソッドを選択します。
   
3. 「userNumber: Integer」オプションを選択します。「生成」をクリックします。
   

   getUserNumber()およびsetUserNumber(Integer userNumber)メソッドがクラスに追加されます。

4. responseプロパティを作成します。responseという名前のStringを宣言します。

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {
   
       Integer randomInt;
       Integer userNumber;
       String response;

5. responseの取得メソッドを作成します。(このアプリケーションでは設定メソッドは必要ありません。)前出のステップ2で示したIDEの「コードを生成」ポップアップを使用して、テンプレート・コードを生成することもできます。ただし、このチュートリアルでは、単純に次のメソッドをクラスに貼り付けます。

   public String getResponse() {
       if ((userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {
   
           //invalidate user session
           FacesContext context = FacesContext.getCurrentInstance();
           HttpSession session = (HttpSession) context.getExternalContext().getSession(false);
           session.invalidate();
   
           return "Yay! You got it!";
       } else {
   
           return "<p>Sorry, " + userNumber + " isn't it.</p>"
                   + "<p>Guess again...</p>";
       }
   }

   このメソッドでは2つの関数が実行されます。
   1. ユーザーが入力した数値(userNumber)がセッション用に生成されたランダムな数値(randomInt)と等しいかどうか、およびStringレスポンスが返されるかどうかがテストされます。
   2. ユーザーが正しい数値を推測した場合(たとえばuserNumberとrandomIntが正しい場合)、ユーザー・セッションは無効化されます。ユーザーが再度操作する場合に新しい数値が生成されるようにするには、この処理が必要です。
6. エディタを右クリックし、「インポートを修正」を選択します([Alt]-[Shift]-[I]、Macの場合は[⌘]-[Shift]-[I])。次の項目用に、インポート文が自動的に作成されます。
   • javax.servlet.http.HttpSession
   • javax.faces.context.FacesContext

   エディタ内の項目上で[Ctrl]-[Space]を押すと、コード補完による候補とドキュメント・サポートを呼出しできます。FacesContextで[Ctrl]-[Space]を押して、Javadocのクラス説明を表示します。

   
   
   ドキュメント・ウィンドウの「Webブラウザ」()アイコンをクリックし、外部WebブラウザでJavadocを開きます。

index.xhtml

1. エディタでindex.xhtmlページを開きます。「プロジェクト」ウィンドウで「index.xhtml」ノードをダブルクリックするか、[Alt]-[Shift]-[O]を押して「ファイルに移動」ダイアログを使用します。
   
   indexページとresponseページの両方に、ここで必要なJSF UIコンポーネントがすでに含まれています。それらをコメント解除し、現在使用しているHTML要素をコメントアウトします。
2. HTMLフォーム要素をコメントアウトします。これを行うには、次のイメージのHTMLフォーム要素を強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。
   
   注意: 強調表示するには、マウスを使用してエディタ内でクリックしてドラッグするか、キーボードを使用して、[Shift]を押しながら矢印キーを押します。
   

   [Ctrl]-[/] (Macの場合は[⌘]-[/])を使用して、エディタ内のコメントを切り替えます。JavaやCSSなど、他のファイル・タイプにこのキーボード・ショートカットを適用することもできます。

3. JSF HTMLフォーム・コンポーネントをコメント解除します。次のイメージに示すように、コンポーネントを強調表示して[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。

   注意:コードのコメントを外すには[Ctrl]-[/]を2回押すことが必要な場合があります。

   
   

   JSF HTMLフォーム・コンポーネントをコメント解除すると、<h:form>、<h:inputText>および<h:commandButton>タグが宣言されていないことがエディタに表示されます。

   
4. これらのコンポーネントを宣言するには、IDEのコード補完を使用して、タグ・ライブラリ名前空間をページの<html>タグに追加します。宣言されていないいずれかのタグにカーソルを置き、[Alt]-[Enter]を押して提案されるタグ・ライブラリを追加します。(複数のオプションがある場合は、エディタに表示されているタグを選択してから[Enter]を押してください。)JSF HTMLタグ・ライブラリ名前空間が<html>タグ(次に太字で表示)に追加され、エラー表示が消えます。

   注意:IDEでタグ・ライブラリを追加するオプションが表示されない場合、<html>要素を手動で変更する必要があります。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:h="http://xmlns.jcp.org/jsf/html">

5. JSF式言語を使用して、UserNumberBeanのuserNumberプロパティをinputTextコンポーネントにバインドします。value属性は、レンダリングされたコンポーネントの現在の値を指定するために使用できます。次の太字で表示されているコードを入力します。

   <h:form>
       <h:inputText id="userNumber" size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />

   JSF式言語では#{}構文を使用します。これらの区切り文字内で、管理対象Beanの名前と、適用するBeanプロパティを、ドット(.)で区切って指定します。これで、フォーム・データがサーバーに送られると、プロパティの設定メソッド(setUserNumber())を使用して、値が自動的にuserNumberプロパティに保存されます。また、ページがリクエストされてuserNumberの値がすでに設定されている場合、レンダリングされるinputTextコンポーネントに値が自動的に表示されます。詳細は、Java EE 7チュートリアル: 12.1.2項の式言語を使用した管理対象Beanの参照を参照してください。

6. フォーム・ボタンをクリックして呼び出されたリクエストの宛先を指定します。フォームのHTMLバージョンでは、<form>タグのaction属性を使用してこれを実行できました。JSFの場合は、commandButtonのaction属性を使用できます。また、JSF 2.xの暗黙的なナビゲーション機能により、宛先のファイルの名前を指定するのみで済みます。ファイル拡張子は不要です。

   次の太字で表示されているコードを入力します。

   <h:form>
       <h:inputText id="userNumber" size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
       <h:commandButton id="submit" value="submit" action="response" />
   </h:form>

   JSFランタイムは、responseという名前のファイルを検索します。リクエスト元のファイル(index.xhtml)で使用されているのと同じファイル拡張子であると想定し、元のファイルと同じディレクトリ内(webrootなど)でresponse.xhtmlファイルを探します。

   注意: JSF 2.xは、開発者のタスクを容易にすることを目的としています。このプロジェクトでJSF 1.2を使用している場合は、Faces構成ファイルでナビゲーション・ルールを次のように宣言する必要があります。

   <navigation-rule>
       <from-view-id>/index.xhtml</from-view-id>
   
       <navigation-case>
           <from-outcome>response</from-outcome>
           <to-view-id>/response.xhtml</to-view-id>
       </navigation-case>
   </navigation-rule>

   以降のステップ7から12は、オプションです。プロジェクトをすばやくビルドする場合は、response.xhtmlに進みます。

7. 前出のEL式でリクエストを処理するときにsetUserNumber()メソッドが実際にコールされるかどうかをテストします。これを行うには、IDEのJavaデバッガを使用します。

   UserNumberBeanクラスに切り替えます([Ctrl]-[Tab]を押し、一覧からファイルを選択します。)setUserNumber()メソッドの署名にブレークポイントを設定します。これを行うには、左マージンをクリックします。赤のバッジが表示され、メソッドのブレークポイントが設定されたことを示します。

   
8. IDEのメイン・ツールバーにある「プロジェクトをデバッグ」()ボタンをクリックします。デバッグ・セッションが開始され、プロジェクトの開始ページがブラウザに表示されます。

   注意:

   • アプリケーションのデバッグ用のサーバー・ポートの確認を求められることがあります。
   • 「プロジェクトをデバッグ」ダイアログが表示されたら、デフォルトのサーバー側Javaオプションを選択して、「デバッグ」をクリックします。
9. ブラウザで、フォームに数値を入力し、「送信」ボタンをクリックします。
10. IDEに切り替え、UserNumberBeanクラスを確認します。デバッガがsetUserNumber()メソッド内で一時停止されています。
    
11. デバッガの「変数」ウィンドウを開きます(「ウィンドウ」>「デバッグ」>「変数」を選択するか、[Ctrl]-[Shift]-[1]を押します)。デバッガが一時停止されている場所の変数値が表示されます。
    

    前出のイメージでは、setUserNumber()署名のuserNumber変数に、値4が指定されています。(数値4がフォームに入力されたため。)「this」は、ユーザー・セッション用に作成されたUserNumberBeanオブジェクトを参照します。その下にあるuserNumberプロパティの値は、現在nullと表示されています。

12. デバッガのツールバーで、「ステップ・イン」()ボタンをクリックします。デバッガは、現在一時停止されている行を実行します。「変数」ウィンドウがリフレッシュされ、実行による変更が表示されます。
    
    

    userNumberプロパティは、フォームに入力された値に設定されます。

13. メイン・メニューから「デバッグ」→「デバッガ・セッションを終了」([Shift]-[F5]、Macでは[Shift]-[Fn]-[F5])を選択して、デバッガを停止します。

response.xhtml

1. エディタでresponse.xhtmlページを開きます。「プロジェクト」ウィンドウで「response.xhtml」ノードをダブルクリックするか、[Alt]-[Shift]-[O]を押して「ファイルに移動」ダイアログを使用します。
2. HTMLフォーム要素をコメントアウトします。HTML<form>の開始タグと終了タグ、およびそれらのタグ間にあるコードを強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。

   注意: 強調表示するには、マウスを使用してエディタ内でクリックしてドラッグするか、キーボードを使用して、[Shift]を押しながら矢印キーを押します。

3. JSF HTMLフォーム・コンポーネントをコメント解除します。<h:form>の開始タグと終了タグ、およびそれらのタグ間にあるコードを強調表示し、[Ctrl]-[/] (Macの場合は[⌘]-[/])を押します。

   この時点では、<body>タグ間のコードは次のようになります。

   <body>
       <div id="mainContainer">
   
           <div id="left" class="subContainer greyBox">
   
               <h4>[ response here ]</h4>
   
               <!--<form action="index.xhtml">
   
                   <input type="submit" id="backButton" value="Back"/>
   
               </form>-->
   
               <h:form>
   
                   <h:commandButton id="backButton" value="Back" />
   
               </h:form>
   
           </div>
   
           <div id="right" class="subContainer">
   
               <img src="duke.png" alt="Duke waving" />
                <!--<h:graphicImage url="/duke.png" alt="Duke waving" />-->
   
           </div>
       </div>
   </body>

   JSF HTMLフォーム・コンポーネントをコメント解除すると、エディタに<h:form>と<h:commandButton>タグが宣言されていないことが表示されます。

4. これらのコンポーネントを宣言するには、IDEのコード補完を使用して、タグ・ライブラリ名前空間をページの<html>タグに追加します。

   エディタのコード補完サポートを使用して、必要なJSF名前空間をファイルに追加します。コード補完を使用してJSFまたはFaceletsタグを選択すると、必要な名前空間が自動的にドキュメントのルート要素に追加されます。詳細は、NetBeans IDEでのJSF 2.xのサポートを参照してください。

   宣言されていない任意のタグの上にカーソルを置き、[Ctrl]-[Space]を押します。コード補完による候補とドキュメント・サポートが表示されます。

   

   [Enter]を押します。(複数のオプションがある場合は、エディタに表示されているタグを選択してから[Enter]を押してください。)JSF HTMLタグ・ライブラリ名前空間が<html>タグ(次に太字で表示)に追加され、エラー表示が消えます。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:h="http://xmlns.jcp.org/jsf/html">

5. フォーム・ボタンをクリックして呼び出されたリクエストの宛先を指定します。ユーザーがボタンをクリックするとindexページに戻るように、ボタンを設定します。これを行うには、commandButtonのaction属性を使用します。太字で表示されているコードを入力します。

   <h:form>
   
       <h:commandButton id="backButton" value="Back" action="index" />
   
   </h:form>

   注意: 「action="index"」と入力すると、JSFの暗黙的なナビゲーション機能に依存することになります。ユーザーがフォーム・ボタンをクリックすると、JSFランタイムはindexという名前のファイルを検索します。リクエスト元のファイル(response.xhtml)で使用されているのと同じファイル拡張子であると想定し、元のファイルと同じディレクトリ内(webrootなど)でindex.xhtmlファイルを探します。

6. 静的テキスト「[response here]」を、UserNumberBeanのresponseプロパティの値で置き換えます。これを行うには、JSF式言語を使用します。次の太字で示したコードを入力します。

   <div id="left" class="subContainer greyBox">
   
       <h4><h:outputText value="#{UserNumberBean.response}"/></h4>

7. プロジェクトを実行します(「プロジェクトの実行」()ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。ブラウザに開始ページが表示されたら、数値を入力して「送信」をクリックします。次のようなレスポンス・ページが表示されます(正しい数値を推測しなかった場合)。
   

   レスポンス・ページの現在の状態に、2つの間違いがあります。

   1. Html<p>タグが、レスポンス・メッセージ内に表示されています。
   2. 「戻る」ボタンが正しい位置に表示されていません。(元のバージョンと比較。)

   次の2つの手順で、これらの間違いを修正します。

8. <h:outputText>タグのescape属性をfalseに設定します。カーソルをoutputTextとvalueの間に置き、スペースを挿入してから[Ctrl]-[Space]を押して、コード補完を呼び出します。下にスクロールしてescape属性を選択し、ドキュメントを確認します。
   

   ドキュメントで示されるように、escapeの値はデフォルトでtrueに設定されます。つまり、前出に示すように、通常はhtmlとして解析される文字がすべて文字列に含まれます。値をfalseに設定すると、htmlとして解析できるすべての文字を、そのようにレンダリングできます。

   [Enter]を押し、値として「false」と入力します。

   <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>

9. <h:form>タグのprependId属性をfalseに設定します。カーソルを<h:form>の「m」のすぐ後に置き、スペースを入力してから[Ctrl]-[Space]を押して、コード補完を呼び出します。下にスクロールしてprependId属性を選択し、ドキュメントを確認します。次に[Enter]を押し、値として「false」と入力します。

   <h:form prependId="false">

   JSFは内部IDを適用して、UIコンポーネントをトラックします。現在の例で、レンダリングされたページのソース・コードを調べると、次のように表示されます。

   <form id="j_idt5" name="j_idt5" method="post" action="/jsfDemo/faces/response.xhtml" enctype="application/x-www-form-urlencoded">
   <input type="hidden" name="j_idt5" value="j_idt5" />
       <input id="j_idt5:backButton" type="submit" name="j_idt5:backButton" value="Back" />
       <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7464469350430442643:-8628336969383888926" autocomplete="off" />
   </form>

   フォーム要素のIDはj_idt5です。このIDは、フォームに含まれている「戻る」ボタンのIDに付加されます(太字で表示)。「戻る」ボタンは#backButtonスタイル・ルール(stylesheet.cssで定義)に依存するため、JSFのIDが付加されると、このルールが妨げられます。これを回避するには、prependIdをfalseに設定します。

10. プロジェクトを再度実行します(「プロジェクトの実行」()ボタンをクリックするか、[F6] (Macの場合は[fn]-[F6])を押します)。開始ページに数値を入力し、「送信」をクリックします。レスポンス・ページに<p>タグのないレスポンス・メッセージが表示され、「戻る」ボタンが正しい位置に配置されます。
    
11. 「戻る」ボタンをクリックします。UserNumberBeanのuserNumberプロパティの現在の値はJSFinputTextコンポーネントにバインドされているため、前に入力した数値がテキスト・フィールドに表示されます。
12. IDEの「出力」ウィンドウでサーバー・ログを確認し([Ctrl]-[4]、Macの場合は[⌘]-[4])、正しい推測値を判断します。

    なんらかの理由でサーバー・ログが表示されない場合は、「サービス」ウィンドウに切り替え([Ctrl]-[5]、Macの場合は[⌘]-[5])、「サーバー」ノードを展開します。次に、プロジェクトがデプロイされているGlassFishサーバーを右クリックし、「サーバー・ログを表示」を選択します。サーバー・ログに数値が見つけることができない場合は、プロジェクト・ノードを右クリックし、「消去してビルド」を選択して、アプリケーションを再ビルドしてみてください。

13. 正しい数値を入力し、「送信」をクリックします。アプリケーションは、入力された数値を現在保存されている数値と比較し、適切なメッセージを表示します。
    
14. 「戻る」ボタンをもう一度クリックします。前に入力した数値はテキスト・フィールドに表示されていません。UserNumberBeanのgetResponse()メソッドは、正しい数値が推測されると現在のユーザー・セッションを無効にします。

Faceletsテンプレート・ファイルの作成

1. Faceletsテンプレート・ファイルを作成します。[Ctrl]-[N] (Macの場合は[⌘]-[N])を押して、ファイル・ウィザードを開きます。「JavaServer Faces」カテゴリを選択し、「Faceletsテンプレート」を選択します。「次」をクリックします。
2. ファイル名として「template」と入力します。
3. 8つのレイアウト・スタイルから任意のスタイルを選択し、「終了」をクリックします。(既存のスタイル・シートを使用するので、どのレイアウト・スタイルを選択してもかまいません。)
   
   ウィザードで、選択に基づいてtemplate.xhtmlファイルおよび付属するスタイル・シートが生成され、プロジェクトのwebroot内の「resources」>「css」フォルダに置かれます。

   ウィザードが完了すると、テンプレート・ファイルがエディタに開かれます。ブラウザでこのテンプレートを表示するには、エディタ内を右クリックし、「表示」を選択します。

4. テンプレート・ファイルのマークアップを確認します。次の点を確認します。
   • faceletsタグ・ライブラリがページの<html>タグ内で宣言されています。タグ・ライブラリに接頭辞uiがあります。

     <html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
           xmlns:h="http://xmlns.jcp.org/jsf/html">

   • Faceletsページで、htmlの<head>および<body>タグではなく、<h:head>および<h:body>タグが使用されています。Faceletsは、これらのタグを使用することによって、ページ全体にわたるコンポーネント・ツリーを構築できます。
   • ページは、ウィザードの完了時に作成されたスタイル・シートを参照します。

     <h:head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
         <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
         <title>Facelets Template</title>
     </h:head>

   • <ui:insert>タグは、選択したレイアウト・スタイルに関連付けられているすべての区画のページ本体で使用されます。それぞれの<ui:insert>タグには、区画を識別するname属性があります。例:

     <div id="top">
         <ui:insert name="top">Top</ui:insert>
     </div>

5. 開始ページとレスポンス・ページを再度確認します。2つのページ間で異なるコンテンツは、グレーの四角形の中にあるタイトルとテキストのみです。そのため、テンプレートで残りのすべてのコンテンツを提供できます。
6. テンプレート・ファイルのすべてのコンテンツを、次のコンテンツに置き換えます。

   <?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:ui="http://xmlns.jcp.org/jsf/facelets"
         xmlns:h="http://xmlns.jcp.org/jsf/html">
   
       <h:head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
   
           <title><ui:insert name="title">Facelets Template</ui:insert></title>
       </h:head>
   
       <h:body>
   
           <div id="left">
               <ui:insert name="box">Box Content Here</ui:insert>
           </div>
   
       </h:body>
   
   </html>

   このコードによって、次の変更が実装されます。
   • プロジェクトのstylesheet.cssファイルによって、ウィザードで作成されたテンプレート・スタイル・シート参照が置き換えられます。
   • <ui:insert>タグ(およびそれらに含まれる<div>タグ)が、boxという名前のものを除き、すべて除去されます。
   • ページ・タイトルを囲んで<ui:insert>タグ・ペアが配置され、titleという名前が付けられています。
7. 該当するコードを、index.xhtmlまたはresponse.xhtmlファイルからテンプレートにコピーします。次に太字で示されているコンテンツを、テンプレート・ファイルの<h:body>タグに追加します。

   <h:body>
       <div id="mainContainer">
           <div id="left" class="subContainer greyBox">
               <ui:insert name="box">Box Content Here</ui:insert>
           </div>
           <div id="right" class="subContainer">
               <img src="duke.png" alt="Duke waving" />
           </div>
       </div>
   </h:body>

8. プロジェクトを実行します。ブラウザで開始ページが開いたら、URLを次のように変更します。

   http://localhost:8080/jsfDemo/faces/template.xhtml

   テンプレート・ファイルが次のように表示されます。
   

これで、プロジェクトには、すべてのビューの外観と構造を定義するテンプレート・ファイルが作成されました。ここで、テンプレートを呼び出すクライアント・ファイルを作成できます。

テンプレート・クライアント・ファイルの作成

開始ページおよびレスポンス・ページ用のテンプレート・クライアント・ファイルを作成します。開始ページのテンプレート・クライアント・ファイルには、greeting.xhtmlという名前を付けます。レスポンス・ページのファイルには、response.xhtmlという名前を付けます。

greeting.xhtml

1. [Ctrl]-[N] (Macの場合は[⌘]-[N])を押して、新規ファイル・ウィザードを開きます。「JavaServer Faces」カテゴリを選択し、「Faceletsテンプレート・クライアント」を選択します。「次」をクリックします。
2. ファイル名として「greeting」と入力します。
3. 「テンプレート」フィールドの横にある「参照」ボタンをクリックし、表示されたダイアログを使用して、前の項で作成したtemplate.xhtmlファイルに移動します。
   
4. 「終了」をクリックします。新しいテンプレート・クライアント・ファイルgreeting.xhtmlが生成され、エディタに表示されます。
5. マークアップを確認します。太字で強調表示されているコンテンツを確認してください。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
   
       <body>
   
           <ui:composition template="./template.xhtml">
   
               <ui:define name="title">
                   title
               </ui:define>
   
               <ui:define name="box">
                   box
               </ui:define>
   
           </ui:composition>
   
       </body>
   </html>

   テンプレート・クライアント・ファイルは、<ui:composition>タグのtemplate属性を使用して、テンプレートを参照します。テンプレートにはtitleおよびboxの<ui:insert>タグが含まれているため、このテンプレート・クライアントには、これらの2つの名前の<ui:define>タグが含まれます。<ui:define>タグの間で指定するコンテンツは、テンプレートの対応する名前の<ui:insert>タグの間に挿入されるコンテンツです。
6. ファイルのタイトルとして「greeting」を指定します。次に太字で示す変更を加えます。

   <ui:define name="title">
       Greeting
   </ui:define>

7. index.xhtmlファイルに切り替え([Ctrl]-[Tab])、表示されるページで、通常はグレーの四角形内に表示されるコンテンツをコピーします。greeting.xhtmlに切り替え、テンプレート・クライアント・ファイルに貼り付けます。変更場所は太字で示されています。

   <ui:define name="box">
       <h4>Hi, my name is Duke!</h4>
   
       <h5>I'm thinking of a number
   
           <br/>
           between
           <span class="highlight">0</span> and
           <span class="highlight">10</span>.</h5>
   
       <h5>Can you guess it?</h5>
   
       <h:form>
           <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
           <h:commandButton id="submit" value="submit" action="response" />
       </h:form>
   </ui:define>

8. ファイルのJSF HTMLタグ・ライブラリを宣言します。エラーのフラグが付いているタグ(「h」接頭辞を使用するタグ)にカーソルを置き、[Ctrl]-[Space]を押します。コード補完による候補の一覧から、タグを選択します。タグ・ライブラリ名前空間がファイルの<html>タグ(太字で表示)に追加され、エラー表示が消えます。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
         xmlns:h="http://xmlns.jcp.org/jsf/html">

   <h:form>の「m」の後にカーソルを置き、[Ctrl]-[Space]を押すと、名前空間が自動的にファイルに追加されます。[Ctrl]-[Space]を押したときに使用可能な論理オプションが1つのみの場合は、それがすぐにファイルに適用されます。タグ上でコード補完を呼び出すときに、JSFタグ・ライブラリが自動的に宣言されます。

response.xhtml

プロジェクトにはresponse.xhtmlという名前のファイルがすでに含まれており、テンプレート・クライアント・ファイルの内容もわかっているので、既存のresponse.xhtmlを変更して、テンプレート・クライアント・ファイルにします。(このチュートリアルでは、提供されているコードをコピーして貼り付けます。)

1. エディタでresponse.xhtmlを開きます。(すでに開かれている場合は、[Ctrl]-[Tab]を押して選択します。)ファイル全体のコンテンツを、次のコードで置き換えます。

   <?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:ui="http://xmlns.jcp.org/jsf/facelets"
         xmlns:h="http://xmlns.jcp.org/jsf/html">
   
       <body>
   
           <ui:composition template="./template.xhtml">
   
               <ui:define name="title">
                   Response
               </ui:define>
   
               <ui:define name="box">
                   <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>
   
                   <h:form prependId="false">
   
                       <h:commandButton id="backButton" value="Back" action="greeting" />
   
                   </h:form>
               </ui:define>
   
           </ui:composition>
   
       </body>
   </html>

   titleおよびboxの<ui:define>タグ間で指定されているコンテンツを除き、ファイルはgreeting.xhtmlと同じになります。
2. プロジェクトのweb.xmlデプロイメント・ディスクリプタで、アプリケーションを実行したときにgreeting.xhtmlページが開かれるように、開始ファイルのエントリを変更します。
   
   「プロジェクト」ウィンドウで「構成ファイル」>「web.xml」をダブルクリックして、エディタで開きます。「ページ」タブで「開始ファイル」フィールドを「faces/greeting.xhtml」に変更します。
   
3. プロジェクトを実行して、ブラウザでどのように表示されるかを確認します。[F6] (Macの場合は[fn]-[F6])を押すか、メイン・ツールバーの「プロジェクトの実行」()ボタンをクリックします。プロジェクトがGlassFishサーバーにデプロイされ、ブラウザで開かれます。

Faceletsテンプレートおよびテンプレート・クライアント・ファイルを使用して、アプリケーションは以前とまったく同じように動作します。アプリケーションの開始ページとレスポンス・ページで重複しているコードを取り除くことによって、アプリケーションのサイズを小さくするとともに、後でページが追加されたときに重複したコードを記述することがなくなりました。これにより、大規模なプロジェクトで作業するときに、開発作業が効率化され、管理が容易になります。

NetBeansの記事およびチュートリアル

• NetBeans IDEでのJSF 2.xのサポート
• データベースからのJavaServer Faces 2.x CRUDアプリケーションの生成
• Scrum Toys - JSF 2.0の完全版サンプル・アプリケーション
• Java EEアプリケーションの開始
• Java EEおよびJava Webの学習

外部リソース

• JavaServer Facesテクノロジ (公式ホーム・ページ)
• JSR 314 JavaServer Faces 2.0の仕様
• Java EE 7チュートリアル、第12章のJavaServer Facesテクノロジを使用した開発
• GlassFishプロジェクトMojarra (JSF 2.xの公式リファレンス実装)
• OTNディスカッション・フォーラム: JavaServer Faces
• JSF Central

ブログ

• Ed Burns
• Jim Driscoll