マネージドBeanへのJSFページのバインド

ここでは、アプリケーション・ファイルを整理するプロジェクトの作成を素早く実行できます。 さらに、Oracle JDeveloperのIDEを操作して、JSFアプリケーションの開発とテストランを実行します。

JSFページの作成：Create JSF Pageウィザードを使用して、JSPページ・ディレクティブと、JSF CoreおよびHTMLタグ・ライブラリに対する2つのtaglibディレクティブのある初期ページ構造を作成します。

簡単なBeanオブジェクトの作成：Create Java Classダイアログを使用して初期javaクラスを作成してから、Javaソース・エディタを使用してサンプル・コードを .javaソー ス・ファイルに追加します。

マネージドBeanとしてのクラスの登録： faces-config.xmlに 概要エディタを使用して、マネージドBeanとして新しいクラスを登録します。

UIの設計：JSP/HTMLビジュアル・エディタとほかの設計ツールを使用して、JSFアプリケーション に対するユーザー・インタフェース（UI）の要素を容易にアセンブルします。

マネージドBeanへのUIのバインド：Expression Builderを利用し、JSF式言語を使用して属性値をデータへバインドします。

コーディングの終了と実行：Javaソース・エディタを使用して、追加のサンプル・コードを .javaソー ス・コードに追加します。 さらにJSFページのテストを実行して、ブラウザで表示します。

新規アプリケーションとプロジェクトの作成

1. Create Applicationダイアログを開きます（「 File」→「 New」→「 General」 →「 Applications」→「 Application」）。
2. このキュー・カードの例に合わせるため、アプリケーション名として JSFBeanAppと入力します。
3. Applica tion Template リストボックスから「 No Template [All Technologies] 」を選択し、「 OK 」をクリックします。
4. プロジェクト名はデフォルトのままにして、「 OK 」をクリックしま す。

   アプリケーション・テンプレート

   アプリケーション・テンプレートを使用すると、標準アプリケーション向けのプロジェクト構造を素早く作成できます。このプロジェクト構造に は、適切なテクノロジーの組合せが事前に指定されています。 テンプレートから作成された新規アプリケーションがアプリケーション・ナビゲータに表示される際、各プロジェクトには関連するテクノロジー・スコープが設 定され、プロジェクト階層に分割されます。 [ 詳細は こちら]

   
   

   IDE内

   新しいアプリケーションを作成すると、Application Overviewウィンドウがデフォルトでエディタ・ウィンドウ領域に開きます。 このウィンドウには、Oracle JDeveloper内で作成されるすべてのオブジェクトがオブジェクト・タイプごとに配置されて表示されます。 新しいオブジェクトを作成したり、まだ作成していない新しいタイプのオブジェクトを参照したり、オブジェクトのコンテキスト・メニューからアクションを起 動したりできます。 [ 詳細はこちら]

JSFページの作成

1. アプリケーション・ナビゲータで先ほど作成したプロジェクトを選択し、Create JSF Pageウィザードを起動します（「 File」 →「 New」→「 Web Tier」→「 JSF」→「 JSF Page」）。
2. Create JSF Pageダイアログで、ファイル名として Register.jspを入力します。
3. 「 Page Implementation 」を展開して、 D o Not Automatically Expose UI Components in a Managed Bean チェックボックスが選択されていることを確認します。 「 OK 」 をクリックします。
   

   コンポーネント・バ インディング

   このキュー・カードの例に合わせるため、このステップおよびキュー・カード全体を通じて指示どおりの値を入力するかオプションを選択してく ださい。 そうすることで、記載されているとおりにキュー・カードの手順を実行できます。 [ 詳細はこちら]

   
   

   IDE内

   JSFページの作成ステップが完了すると、デフォルトのアプリケーション・ナビゲータは次のように表示されます。 [ 詳細はこちら]

Javaクラスの作成

1. アプリケーション・ナビゲータで、作成したプロジェクトを選択し、Create Java Classダイアログを開きます（「 File」 →「 New」→「 General」→「 Simple Files」→「 Java Class」）。
2. このキュー・カードの例に合わせるため、アプリケーション名として PersonInfoと入力します。 そのほかはデフォルト値のままにして、「 OK 」をクリックします。
3. Javaソース・エディタで、新しいファイルを編集してプロパティを追加します。
   サンプル・コードを使用してください
4. エディタでファイルを右クリックし、「 Ge nerate Accessors 」 を選択します。
5. Generate Accessorsダイアログで、「 PersonInfo」ク ラスを選択して、「 OK」をクリックします。
   

   Javaクラスの編 集

   エディタ・ウィンドウの上部のタブはドキュメント・タブです。 Selecting a document tab gives that file focus, bringing it to the foreground of the window in the current editor. 特定のファイルをエディタ・ウィンドウで開いたときに表示されるウィンドウ下部の各タブは、エディタ・タブです。 [ 詳細はこちら]

6. 入力したデータを保存し、保存メッセージを表示するように、ファイルにコードを追加します。
   サンプル・コードを使用してください
7. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   Javaクラスの作成ステップが完了すると、アプリケーション・ナビゲータは次のように表示されます。 [ 詳細はこちら]

マネージドBeanとしてのクラスの登録

1. アプリケーション・ナビゲータで、「 Web Content」と「 WEB-INF」フォルダを展開し、「 」 faces-config.xmlファ イル・アイコンをダブルクリックしてエディタ・ウィンドウで開きます。
2. 「 Overview」タブを選択し、概要エディタを使用して設定ファイルを編集し ます。
3. 概要エディタで、左の要素リストから「 Managed Beans」を選択しま す。
   

   JSFマネージド Bean

   JSFを使用すると、ユーザー・インタフェース内のコンポーネントを任意のJavaBeanに直接バインドできますが、JSFマネージド Beanを使用する方法が最適です。 [ 詳細はこちら]

4. 「 」 Addア イコンをクリックしてCreate Managed Beanダイアログを使用します。
5. Bean名として personDataを入力します。
6. Class Name フィールドの横の「 Browse 」をクリックし、クラス・ブラウザを開きます。
7. 「 PersonInfo（ packagename ） 」 を探して選択し、「 OK 」をクリックしてクラス・ブラウザを閉じます。
8. 「 OK 」をクリックして、Create Managed Beanダイアログを閉じます。
   

   IDE内

   マネージドBeanとしてJavaクラスの登録ステップが完了すると、マネージドBean定義が概要エディタに次のように表示されます。 [ 詳細はこちら]

UIの設計

1. エディタ・ウィンドウの上部にある「 Register.jsp」タブを選択し、 ページを前面に表示します。
2. ビジュアル・エディタで、ページ上部にテキスト Registration Formを入力します。
   

   リソース・バンドル

   デフォルトでは、ビジュアル・エディタでUIコンポーネントを編集する際に、Oracle JDeveloperはページのリソース・バンドルでテキスト・リソースを自動的に作成しません。 リソース・バンドルを使用する必要がある場合は、Project Propertiesダイアログの Resource Bundleページで、「 Automatically Synchronize Bundle 」オプションを選択します。 デフォルトのバンドル・タイプは Properties Bundleで、これは PropertyResourceBundleプ ロパティ・ファイルまたは変換可能テキストを含むプレーン・テキスト・ファイルです。 プロパティ・ファイルにはStringオブジェクトに対する値のみを含めることができます。 ほかの種類のオブジェクトを保存する必要がある場合は、代わりに ListResourceBundleを使用します。 [ 詳細はこちら]

3. コンポーネント・パレットで、ドロップダウン・リストから「 HTML」ページを選 択し、「 Common」パネルを展開します。 「 」 Tableアイコンをクリックしてビジュアル・エディタへドラッグし、表をページに追加します。
4. Insert Tableダイアログで、行数を 3に、列数を 2に設定します。 そのほかはデフォルト値のままにして、「 OK」をクリックします。
   

   ビジュアル・エディ タでの表の操作

   この例のように、表はデータのレイアウトやWebページ上のテキストおよびグラフィックスの配置だけでなく、ページ・レイアウトの設計に使 用できます。 Insert Tableダイアログを使用して、HTML <table>要素を追加し、スケル トン表に初期プロパティを設定できます。 [ 詳細はこ ちら]

5. コンポーネント・パレットで、ドロップダウン・リストから「 JSF」ページを選択 し、「 HTML」パネルを展開します。
   

   JSFタグ・ライブ ラリとコンポーネント

   ページを作成した時点で、JSFコンポーネントを提供する次の2つのJSFライブラリがページ内に含まれました。 [ 詳細はこちら]

6. 「 」 Input Textアイコンをクリックし、表の最初の行の2番目の列にドラッグします。
   

   標準JSFコンポー ネント・タグ属性

   Oracle JDeveloper内で標準のJSFコンポーネントを使用しながら、プロパティ・インスペクタ内でコンポーネント・タグ属性を表示および設定できます。 大部分の標準JSFコンポーネント・タグ属性には、JSF Expression Language（EL）を使用して、値式（ #{ expression} ） を指定できます。 たとえば、 #{personData.username}となります。 [ 詳細はこちら]

7. 「 」 Input Textアイコンを再度クリックし、2番目の行の2番目の列にドラッグします。
8. 「 」 Command Buttonアイコンをクリックし、3番目の行の2番目の列にドラッグします。 プロパティ・インスペクタの Commonセクションで、「 Value」フィールドをクリックし、デフォルトのテキストを Sign Me Upに 変更します。
9. ビジュアル・エディタで、最初の列にテキストを入力して入力フィールドのラベルを作成します。 最初の行の最初の列から開始し、セルをクリックして Username:と入力し、[Enter]を押します。 最初の列の2番目の行でセルをクリックして Email:と入力し、[Enter]を押します。
   

   IDE内

   ユーザー・インタフェースの設計ステップが完了すると、アプリケーション・ナビゲータは次のように表示されます。 [ 詳細はこちら]

マネージドBeanへのUIのバインド

1. ビジュアル・エディタで、最初の入力テキスト・フィールドを選択します。 次にプロパティ・インスペクタの Commonセクションで、 Valueフィー ルドの端にある「 」ドロップダウン・メニュー・アイコンをクリックして、「 Expression Builder 」を選択します。
2. Expression Builderで、「 JSF Managed Beans」 →「 personData」の順で展開します。 「 username」 を選択し、 username変数を使用して式を作成します。 「 OK」 をクリックします。
   

   JSF EL式を使用するバインディング

   JavaEE 5.0およびJSP 2.1で導入された統合式言語（EL）は、JSP 2.0により提供される式言語の集合であり、JSFテクノロジー1.0用に作成された式言語です。 この統合ELにより、ページの作成者は引き続きEL式を使用して、UIコンポーネント値とオブジェクトをバッキングBeanプロパティにバインドするか、 バッキングBeanメソッドをUIコンポーネント・タグから参照できます。 [ 詳細はこちら]

3. 2番目の入力テキスト・フィールドでこの手順を繰り返しますが、今回はExpression Builderで「 email」変数を選択します。
4. ビジュアル・エディタで「 Command」ボタンをダブルクリックし、Bind Action Propertyダイアログを開きます。
5. Managed Bean ドロップダウン・リストから「 personData」を選択します。 ダイアログのそのほかの値はデフォルトのままにして、「 OK」をクリックします。
   

   IDE内

   Expression Builderを使用してUIをマネージドBeanにバインドする場合、Oracle JDeveloperはEL式を入力テキストおよびコマンド・ボタン・コンポーネントに追加します。 [ 詳細はこちら]

コードの完成とJSFページの実行

1. エディタ・ウィンドウで、「 PersonInfo.java」タブを選択し、この ファイルをJavaソース・エディタで編集します。
2. 以前Beanに追加したビジネス・メソッド saveInfoを呼び出すコードを追加します。 このメソッドは2つのパラメータをとり、データをコンソールに書き込みます。
   サンプル・コードを使用してください
3. 「 」 Save Allをクリックして作業内容を保存します。
4. アプリケーション・ナビゲータで「 」 Register.jspア イコンを右クリックし、「 Run」を選択してJSFページを実行します。
   

   JSFページの実行 とテスト

   Oracle JDeveloperは、統合されたOracle Containers for Java EE（OC4J）と呼ばれるJava EEランタイム・サービスを備えています。このランタイム・サービスを使用すると、Oracle JDeveloper IDEから、アプリケーションとそのプロジェクトをJava EEコンテナ内のJava EEアプリケーションとして実行およびテストできます。 デフォルトでは、Oracle JDeveloperにバンドルされたスタンドアロンOC4Jのインスタンスを参照する、DefaultServerという名前のサーバー・インスタンス が自動的に構成されます。 特別な接続設定は必要ありません。 アプリケーション・プロジェクト全体または個々のJSFページを実行できます。 [ 詳細はこちら]

   
   

   IDE内

   JSFページを実行すると、ブラウザに次のような登録フォームが表示されます。 [ 詳細はこちら]