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

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

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

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

   
   

   IDE内

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

JSFページ・ナビゲーションの作成

1. アプリケーション・ナビゲータで先ほど作成したプロジェクトを選択し、Create JSF Configuration Fileダイアログを開きます（「 File」→「 New」→「 Web Tier」→「 JSF」 →「 JSF Page Flow & Configuration」）。
2. Create JSF Configuration Fileダイアログで、ファイル名の faces-config.xmlを デフォルトのまま受け入れます。 Servlet 2.5JSP 2.1 (Java EE 1.5)が Web Application Version ドロップダウン・リストで選択されている ことを確認します。 「 OK 」をクリックします。
   

   JSFナビゲーショ ン・ダイアグラム、ナビゲーション・ルール、ナビゲーション・ケース

   デフォルトで、Oracle JDeveloperにより faces-config.xmlファイルは空白の JSFナビゲーション・ダイアグラムとして開きます。これは、アプリケーションのページ間のナビゲーションを定義するためです。 [ 詳細はこちら]

3. コンポーネント・パレットのJSF Diagram ObjectsページにあるComponentsパネルで「 」 JSF Pageをクリックし、エディタ・ウィンドウのダイアグラムをクリックして最初のアプリケーショ ン・ページを表すアイコンを追加します。
4. コンポーネント・パレットで「 」 JSF Pageを再度クリックし、ダイアグラムをクリックして2つ目のページ・アイコンを追加します。
5. ステップ4の手順を繰り返し、3つ目のページ・アイコンを追加します。
6. コンポーネント・パレットで「 」 JSF Navigation Caseをクリックします。 次にダイアグラムで、作成した1つ目のページ・アイコンをクリックしてから、2つ目のページ・アイコンをクリックします。
7. コンポーネント・パレットで「 」 JSF Navigation Caseを再度クリックします。 次にダイアグラムで、1つ目のページ・アイコンをクリックしてから、3つ目のページ・アイコンをクリックします。
8. ダイアグラムで、1つ目と3つ目のページ・アイコンの間にある「 case1 」 ナビゲーション・ケース・ラベルをクリックして、ラベルを failureに変えます。
9. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   ダイアグラムでJSFページ・ナビゲーションの作成ステップが完了すると、JSFナビゲーション・ダイアグラムは次のように表示されます。 [ 詳細はこちら]

JSFページの作成

1. 必要に応じて、 faces-config.xmlの エディタ・ウィンドウにある「 Diagram」タブをクリックして、ダイアグラム・モードへ切 り替えます。
2. JSFナビゲーション・ダイアグラムで、 untitled1.jspのテキストを クリックして、デフォルトのページ名を Login.jspに変更します。
3. 編集したページ名のページ・アイコンをダブルクリックして、Create JSF Pageウィザードを起動します。
4. Create JSF Pageダイアログで「 Page Implementation 」 を展開し、 D o Not Automatically Expose UI Components in a Managed Bean チェック・ボックスが選択されていることを確認します。 「 OK 」をクリックします。
   

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

   ウィザードを使用してJSFページを作成する際には、UIコンポーネントをプログラムで操作できるようにするために、ページ上のコンポーネ ントをマネージドBean内に公開するかどうかを指定できます。 指定可能なオプションは、Create JSF Pageウィザードの Page Implementationセクションに一覧表示されます。 この例では、ページ作成時に自動コンポーネント・バインディングを 使用しないように選択します。 [ 詳細はこちら]

5. エディタ・ウィンドウの上部にある「 」 faces-config.xmlタ ブを選択し、ナビゲーション・ダイアグラムを前面に表示します。
6. untitled2.jspと untitled3.jspで ステップ2から4を繰り返し、2ページ目と3ページ目を作成します。新しいページ名として、それぞれ Success.jspと Failure.jspを つけます。
   

   IDE内

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

UIの設計

1. エディタ・ウィンドウの上部にある「 」 Login.jspタ ブを選択し、ページの前面にビジュアル・エディタを表示します。
2. コンポーネント・パレットで、ドロップダウン・リストから「 JSF 」 ページを選択し、「 HTML 」パネルを展開します。
   

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

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

3. 「 」 Input Textをクリックし、ビジュアル・エディタ内のページにドラッグして、入力テキスト・ フィールドを追加します。
   

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

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

4. コンポーネント・パレットで「 」 Command Buttonをクリックし、ページへドラッグして入力フィールドの横にボタンを追加しま す。 プロパティ・インスペクタのCommonタブで、「 Value 」フィール ドをクリックします。 デフォルトのテキストを Loginに変更したら、[Enter]を押します。
5. エディタ・ウィンドウの上部にある「 」 Success.jspタ ブを選択し、ページを前面に表示します。
6. コンポーネント・パレットで「 」 Output Textをクリックして、ページにドラッグします。 プロパティ・インスペクタの Commonセクションで、「 Value 」 フィールドをクリックし、デフォルトのテキストを You have successfully logged inに変更しま す。
7. エディタ・ウィンドウの上部にある「 」 Failure.jspタ ブを選択し、ページを前面に表示します。 出力テキスト値に Login has failedのテキストを使用して、ステップ 6を繰り返します。
8. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   UIの設計ステップが完了すると、 Login.jspページのビジュアル・エ ディタには、ユーザーがテキストを入力できる入力フィールドと、ページのナビゲーションを制御するコードを追加するためのコマンド・ボタンが表示されるよ うになります。 [ 詳細はこちら]

コードを使用した動作の変更

1. エディタ・ウィンドウの上部にある「 」 Login.jspタ ブを選択し、ページを前面に表示します。
2. メイン・メニューで、「 Desi gn 」 「 Page Properties 」を選択します。 Page Propertiesダイアログで、「 Component Binding 」タブを選択し、「 Auto Bind 」チェック・ボックスをオンにします。
   

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

   ページの自動コンポーネント・バインディングを有効にするには、次のいずれかの方法を使用します。 [ 詳細はこちら]

3. Managed Bean ドロップダウン・リストの横の「 N ew 」をクリックします。 Create Managed Beanダイアログで、Bean名として backing_loginを、クラス名として LoginInfoを 入力します。 パッケージ名として project1.backingを入力します。 Generate Class If It Does Not Exist チェック・ボッ クスがオンになっていることを確認してから、「 OK 」をクリックします。 「 OK 」をクリックして、Page Propertiesダイアログを閉じます。
   

   JSFマネージド Bean

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

4. ビジュアル・エディタ内で、コマンド・ボタンをダブル・クリックして、Bind Action Propertyダイアログを開きます。 ダイアログで、 Managed Bean ドロップダウン・リストに backing_loginが表示されていることを確認します。 Me thod ドロップダウン・ボックスには commandButton1_actionと 入力されています。 「 OK 」をクリックします。
5. 必要であれば、エディタ・ウィンドウの上端にある「 」 LoginInfo.javaタ ブを選択します。
6. 「 」 LoginInfo.javaの Javaソース・エディタで、 Login.jspページから Success.jspページまたは Failure.jspペー ジへ移動するためのコードを入力します。
   

   ナビゲーション・ ケースの結果

   JSF構成ファイルにはいくつかのナビゲーション・ルールがあり、それぞれのルールに対していくつかのナビゲーション・ケースが含まれてい ます。 ここまでの例で、JFSナビゲーション・ダイアグラムを作成し、最新のキュー・カードへナビゲーション・ケースを追加した際に、次のナビゲーション・ルー ルとナビゲーション・ケースが faces-config.xmlに自動で作成されました。 [ 詳細はこちら]

   
   サンプル・コードを使用してください

7. 「 」 Save Allをクリックして作業内容を保存します。
8. アプリケーション・ナビゲータで「 Login.jsp 」を右クリッ クし、「 Run 」を選択してJSFアプリケーションの最初のページを実行しま す。
   

   IDE内

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