• NetBeans IDE の Java バンドル版には、このチュートリアルに必要な、Java EE 6 準拠サーバーの GlassFish サーバー 3.0.1 も含まれています。
• このチュートリアルのソリューションプロジェクトを入手するには、ConsultingAgencyJSF20.zip をダウンロードしてください。

<h:outputStylesheet name="css/jsfcrud.css"/>

<application>
    <resource-bundle>
        <base-name>/resources/Bundle</base-name>
        <var>bundle</var>
    </resource-bundle>
</application>

完了したプロジェクトの確認

1. プロジェクトを実行するには、「プロジェクト」ウィンドウでプロジェクトノードを右クリックして「実行」を選択するか、メインツールバーで「プロジェクトを実行」() をクリックします。
   
   アプリケーションの開始ページが表示されると、リンクリストが表示され、これらを使用して各データベース表に格納されたエントリを表示することができます。
   
   これらのリンクは、「エンティティーからの JSF ページクラス」ウィザードを完了したら、開始ページ (index.xhtml) に追加されます。これらはコンサルティングエージェンシーデータベース上で CRUD 機能を提供する Facelets ページへのエントリポイントとして提供されます。

   <h:body>
       Hello from Facelets
       <h:form>
           <h:commandLink action="/address/List" value="Show All Address Items"/>
       </h:form>
       <h:form>
           <h:commandLink action="/billable/List" value="Show All Billable Items"/>
       </h:form>
       <h:form>
           <h:commandLink action="/client/List" value="Show All Client Items"/>
       </h:form>
       <h:form>
           <h:commandLink action="/consultant/List" value="Show All Consultant Items"/>
       </h:form>
       <h:form>
           <h:commandLink action="/consultantStatus/List" value="Show All ConsultantStatus Items"/>
       </h:form>
       <h:form>
           <h:commandLink action="/project/List" value="Show All Project Items"/>
       </h:form>
       <h:form>
           <h:commandLink action="/recruiter/List" value="Show All Recruiter Items"/>
       </h:form>
   </h:body>

2. 「Show All Consultant Items」リンクをクリックします。前出のコードを参照すると、ターゲットページが /consultant/List.xhtml であることがわかります。JSF 2.0 では、ファイル拡張子は暗黙のナビゲーションによって推定されます。
   
   このデータベースには、現在サンプルデータが含まれていません。「Create New Consultant」リンクをクリックし、表示される Web フォームを使用することで、データを手動で追加できます。これにより、/consultant/Create.xhtml ページの表示がトリガーされます。また、SQL スクリプトを IDE で実行し、サンプルデータを含む表を生成することもできます。次の副節では、両方の選択肢を示します。

インデックスリンクをクリックすると、開始ページ内に一覧表示されたリンクに戻ることができます。これらのリンクには、各データベース表に保存されたデータのビューと、各エンティティーフォルダの List.xhtml ファイルを表示するためのトリガーがあります。後述の説明にあるように、データを表に追加したあと、各エントリにほかのリンクが表示され、単一の表レコードのデータを表示 (View.xhtml)、編集 (Edit.xhmtl)、および破棄できます。

SQL スクリプトを使用したデータベースの生成

提供されたスクリプトを実行します。このスクリプトにより、データベース表のサンプルデータが生成されます。このスクリプト (mysql_insert_data_consult.sql) はコンサルティングエージェンシーデータベースの ZIP ファイルに格納されており、必要なソフトウェアの表からダウンロードできます。

操作するデータベースサーバー (MySQL または JavaDB) に応じて、提供されているスクリプトを実行できます。このスクリプトにより、データベース表のサンプルデータが生成されます。MySQL の場合は、mysql_insert_data_consult.sql スクリプトになります。JavaDB の場合は、javadb_insert_data_consult.sql スクリプトになります。どちらのスクリプトも、必要なソフトウェアの表からダウンロードできるそれぞれのアーカイブの中に含まれています。

1. メインメニューから「ファイル」>「ファイルを開く」を選択し、コンピュータ上のスクリプトの場所に移動します。「開く」をクリックします。ファイルが IDE の SQL エディタで自動的に開きます。
2. SQL エディタのツールバーの「接続」ドロップダウンリストで consult データベースが選択されていることを確認します。
   
   エディタ内を右クリックして「文を実行」を選択するか、「SQL を実行」() ボタンをクリックします。スクリプトの実行結果は「出力」ウィンドウで確認できます。
3. GlassFish サーバーを再起動します。consult データベースに含まれる新しいデータをサーバーが再読み込みしたりキャッシュに保存したりできるようにするには、この手順が必要となります。これを行うには、「出力」ウィンドウの GlassFish サーバーのタブ (サーバーのログが表示されているタブ) をクリックし、左側の余白にある「サーバーを再起動」() ボタンをクリックします。GlassFish サーバーが停止し、再起動します。
4. プロジェクトを再度実行し、「Show All Consultant Items」リンクをクリックします。リストが空でなくなっていることがわかります。
   
   
   

   NetBeans のデータベースサポート

   IDE のデータベース表ビューアを使用すると、管理されている表データをデータベース内で直接表示および変更できます。たとえば、consultant 表を「サービス」ウィンドウで右クリックし、「データを表示」を選択します。

   

   アクションの実行に使用される SQL クエリーがエディタの上部に表示され、表のグラフィカルビューが下部に表示されます。

   表のセルの内側をダブルクリックして、データへのインライン変更を実行します。「レコードをコミット」() アイコンをクリックし、変更をデータベースにコミットします。
   
   グラフィカルビューには多数の機能が用意されています。詳細は、「NetBeans IDE 6.5 でのデータベースのサポートの改善」を参照してください。

   
   

Facelets ページでのエディタのサポートの確認

1. エディタで /consultant/List.xhtml ページを開きます。描画する Facelets の template.xhtml ファイルに依存するページが 8 行目に示されます。

   <ui:composition template="/template.xhtml">

   行番号を表示するには、エディタの左マージンを右クリックし、「行番号を表示」を選択します。

2. IDE の「ファイル」ダイアログを使用し、template.xhtml を開きます。Alt-Shift-O (Mac の場合は Ctrl-Shift-O) キーを押して、「template」と入力します。
   
   「了解」をクリックするか、Enter キーを押します。
3. このテンプレートは、ほかのファイルからタイトルと本体に内容を挿入するための <ui:insert> タグを適用します。<ui:insert> タグの上にカーソルを置いて、Ctrl- スペースキーを押し、ドキュメントポップアップウィンドウを呼び出します。
   
   JSF タグおよびその属性上で Ctrl- スペースキーを押すと、ドキュメントポップアップを呼び出しできます。表示されるドキュメントは、公式の JSF タグライブラリドキュメントで提供されている説明から取得したものです。
4. List.xhtml ファイルに戻ります (Ctrl-Tab キーを押す)。<ui:define> タグは、テンプレートのタイトルと本体に適用する内容を定義するために使用されます。このパターンは、各エンティティークラスに対して生成される 4 つの Facelets ファイル (Create.xhtml、Edit.xhtml、List.xhtml、および View.xhtml) すべてに使用されます。
5. Bundle.properties ファイルに含まれる、ローカライズされたメッセージに使用される任意の EL 式にカーソルを置きます。Ctrl- スペースキーを押してローカライズされたメッセージを表示します。
   
   前出の画像に、「List」を解決する EL 式が表示されています。これは、テンプレートのタイトルに適用され、ブラウザに描画されるページから検証できます。
6. ファイルの最下部にスクロールし、92 行目にある「Create New Consultant」リンクのコードに移動します。この内容は次のとおりです。

   <h:commandLink action="#{consultantController.prepareCreate}" value="#{bundle.ListConsultantCreateLink}"/>

7. commandLink の action 属性の上で Ctrl- スペースキーを押し、ドキュメントポップアップを呼び出します。
   
   action 属性は、ブラウザ内でリンクがクリックされた際の要求を処理するメソッドを示します。次のドキュメントが表示されます。
   
   
   ユーザーがこのコンポーネントをアクティブにしたときに起動するアプリケーションアクションを表すメソッド式。この式は、パラメータを取得せず、オブジェクト (論理的な結果を取得するために呼び出される toString() オブジェクト) を返す public メソッドに評価される必要があり、このオブジェクトはこのアプリケーションの NavigationHandler に渡されます。
   
   つまり、action 値は通常、String 型として評価される JSF 管理対象 Bean 内のメソッドを参照します。この文字列は、要求を適切なビューに転送するため、JSF の NavigationHandler に使用されます。これは次の手順で確認します。
8. カーソルを consultantController の上に置き、Ctrl- スペースキーを押します。エディタのコード補完で、consultantController が JSF 管理対象 Bean であることが示されます。
   
9. カーソルを prepareCreate に移動し、Ctrl- スペースキーを押します。コード補完によって、ConsultantController 管理対象 Bean 内に格納されたメソッドの一覧が表示されます。
   
10. Ctrl (Mac の場合は &#8984) を押し、マウスを prepareCreate の上に移動します。リンクが形成され、このリンクを使用して ConsultantController 管理対象 Bean 内の prepareCreate() メソッドに直接移動できます。
    
11. リンクをクリックし、次に示す prepareCreate() メソッドを表示します。

    public String prepareCreate() {
        current = new Consultant();
        selectedItemIndex = -1;
        return "Create";
    }

    このメソッドは、Create を返します。NavigationHandler はバックグラウンドで情報を収集し、要求に対する応答として送信されるビューをターゲットとするパスに Create 文字列を適用します (/consultant/Create.xhtml)。JSF 2.0 では、ファイル拡張子は暗黙のナビゲーションによって推定されます。

フィールド検査を使用したデータベース整合性の確認

1. ブラウザの Consultants List ページから、「Create New Consultant」リンクをクリックします。前に副節で説明したように、これによって /consultant/Create.xhtml ページの描画がトリガーされます。
2. 次の詳細をフォームに入力します。ここでは RecruiterId フィールドと StatusId フィールドの両方を空白のままにします。
   
   

   フィールド	値
   ConsultantId	2
   Email
   Password	jack.smart
   HourlyRate	75
   BillableHourlyRate	110
   HireDate	07/22/2008
   Resume	I'm a great consultant. Hire me - You won't be disappointed!
   RecruiterId	---
   StatusId	---

3. 「保存」をクリックします。これを実行すると、StatusId フィールドに検査エラーのフラグが表示されます。
   
   この状態になる理由は、コンサルティングエージェンシーデータベースのエンティティーの関係図を再度考察するとわかります。前出の関係表にあるように、CONSULTANT 表および CONSULTANT_STATUS 表は null 可能ではない 1 対多の関係を共有しています。そのため、CONSULTANT 表のすべてのエントリには、CONSULTANT_STATUS 表内のエントリに対する参照が含まれている必要があります。これは、2 つの表をリンクする consultant_fk_consultant_status 外部キーによって示されています。

   表に保持されている外部キーは、「サービス」ウィンドウ (Ctrl-5、Mac の場合は &#8984-5) で表の「外部キー」ノードを展開すると表示できます。

   
4. 検査エラーを解決するには、「StatusId」ドロップダウンリストから「entity.ConsultantStatus[statusId=A]」を選択します。
   
   注: RecruiterId フィールドは空白のままでかまいません。データベースのエンティティー関係図に示すとおり、CONSULTANT 表と RECRUITER 表との間には、null 可能な 1 対多の関係があります。これは、CONSULTANT 内のエントリは RECRUITER エントリと関連付ける必要がないということです。
5. 「保存」をクリックします。consultant のエントリが正常に保存されたことを示すメッセージが表示されます。「Show All Consultant Items」をクリックすると、表にリストされた新規エントリが表示されます。

一般に、生成された Facelets ページには、次のことが発生するユーザー入力に対してエラーを表示します。

• null 可能ではない表のセルに対する空のフィールド。
• 主キーなどの変更できないデータの変更。
• 型が正しくないデータの挿入。
• ユーザーのビューがデータベースと同期していないときのデータの変更。

エンティティークラスの編集

前の副節で、ユーザーにとってわかりやすくない「entity.ConsultantStatus[statusId=A]」オプションを「StatusId」ドロップダウンリストに表示する方法を確認しました。ドロップダウンリストの各項目に表示されるテキストは、たとえばエンティティークラスの toString() メソッドが呼び出されることよって発生した、各 ConsultantStatus エンティティーに対する文字列表現であることがすでにおわかりでしょう。

この副節では、このチュートリアルの締めくくりとして、エディタのコード補完、ドキュメント、およびナビゲーションサポートを使用する方法を説明します。また、ユーザーにとってよりわかりやすいメッセージをドロップダウンリストに表示する方法も示します。

1. エディタで /consultant/Create.xhtml ファイルを開きます。これは、先ほどブラウザで表示した「Create New Consultant」フォームです。次にボールドで示す、「StatusId」ドロップダウンリストのコードまでスクロールします。

       <h:outputLabel value="#{bundle.CreateConsultantLabel_resume}" for="resume" />
       <h:inputTextarea rows="4" cols="30" id="resume" value="#{consultantController.selected.resume}" title="#{bundle.CreateConsultantTitle_resume}" />
       <h:outputLabel value="#{bundle.CreateConsultantLabel_statusId}" for="statusId" />
       <h:selectOneMenu id="statusId" value="#{consultantController.selected.statusId}" title="#{bundle.CreateConsultantTitle_statusId}" required="true" requiredMessage="#{bundle.CreateConsultantRequiredMessage_statusId}">
           <f:selectItems value="#{consultantStatusController.itemsAvailableSelectOne}"/>
       </h:selectOneMenu>
       <h:outputLabel value="#{bundle.CreateConsultantLabel_recruiterId}" for="recruiterId" />
       <h:selectOneMenu id="recruiterId" value="#{consultantController.selected.recruiterId}" title="#{bundle.CreateConsultantTitle_recruiterId}" >
           <f:selectItems value="#{recruiterController.itemsAvailableSelectOne}"/>
       </h:selectOneMenu>
   </h:panelGrid>

2. <f:selectItems> タグに適用される value を確認します。value 属性は、ドロップダウンリストの各項目に表示するテキストを決定します。
   
   itemsAvailableSelectOne 上で Ctrl- スペースを押します。エディタのコード補完に、ConsultantStatusController の getItemsAvailableSelectOne() メソッドが SelectItem オブジェクトの配列を返すことが示されます。
   
3. Ctrl (Mac の場合は &#8984) を押し、マウスを itemsAvailableSelectOne の上に移動します。リンクが形成され、このリンクを使用して ConsultantStatus エンティティーのソースコード内の getItemsAvailableSelectOne() メソッドに直接移動できます。リンクをクリックします。
4. メソッド署名内の SelectItem[] 戻り値の上にカーソルを置き、Ctrl- スペースキーを押してドキュメントポップアップを呼び出します。
   

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

   表示されるように、SelectItem クラスは JSF フレームワークに属しています。このドキュメントにあるように、UISelectOne コンポーネントは、前出の手順 1 で調べたマークアップからの <h:selectOneMenu> タグによって表現されます。
5. Ctrl (Mac の場合は &#8984) を押し、マウスを findAll() の上に移動します。ポップアップが表示され、メソッド署名が示されます。
   
   ここで、ejbFacade.findAll() が ConsultantStatus オブジェクトの List を返すことが確認できます。
6. JsfUtil.getSelectItems に移動します。マウスを getSelectItems の上に移動し、Ctrl キー (Mac の場合は &#8984) を押し、表示されるリンクをクリックします。
   
   注: JsfUtil は、「エンティティーからの JSF ページクラス」ウィザードの完了時に生成されたユーティリティークラスの 1 つであることを思い出してください。
   
   このメソッドは、エンティティーのリスト (ConsultantStatus オブジェクトの List など) をループし、各エンティティーに SelectItem を作成します。次にボールドで示すように、各 SelectItem はエンティティーオブジェクトとオブジェクトのラベルを使用して作成されます。

   public static SelectItem[] getSelectItems(List<?> entities, boolean selectOne) {
       int size = selectOne ? entities.size() + 1 : entities.size();
       SelectItem[] items = new SelectItem[size];
       int i = 0;
       if (selectOne) {
           items[0] = new SelectItem("", "---");
           i++;
       }
       for (Object x : entities) {
           items[i++] = new SelectItem(x, x.toString());
       }
       return items;
   }

   このラベルは、エンティティーの toString() メソッドを使用して作成され、応答で描画されるときのオブジェクトの表現です。SelectItem(java.lang.Object value, java.lang.String label) コンストラクタに対する Javadoc の定義を参照してください。
   
   これで、ドロップダウンリストに項目を表示するときにブラウザに描画されるのがエンティティーの toString() メソッドであることを確認したので、ConsultantStatus toString() メソッドを変更します。
7. エディタで ConsultantStatus エンティティークラスを開きます。statusId および description を返すように、toString メソッドを変更します。これらは、CONSULTANT_STATUS 表の 2 つの列に対応するエンティティープロパティーです。

   public String toString() {
       return statusId + ", " + description;
   }

8. プロジェクトを再実行します。ブラウザに開始ページが表示されたら、「Show All Consultant Items」リンクをクリックし、「Create New Consultant」をクリックします。
   
   「StatusId」ドロップダウンリストを確認します。これで、データベースの CONSULTANT_STATUS 表に格納されている、あるレコードについてのステータス ID と説明が表示されるようになりました。
   

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

• NetBeans IDE での JavaServer Faces 2.0 入門
• NetBeans IDE での JSF 2.0 サポート
• Scrum Toys - JSF 2.0 の完全版サンプルアプリケーション
• Java EE 6 アプリケーション入門
• Java EE および Java Web の学習

外部リソース

• JavaServer Faces テクノロジ (公式ホームページ)
• JSR 314 Specification for JavaServer Faces 2.0
• Java EE 6 チュートリアル: 第 5 章 - JavaServer Faces テクノロジ
• GlassFish サーバープロジェクト Mojarra (JSF 2.0 の公式リファレンス実装)
• Sun JavaServer Faces フォーラム
• JSF Central

ブログ

• Ed Burns
• Ryan Lubke
• Jim Driscoll