マネージド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ページのテストを実行して、ブラウザで表示します。

 

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

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

Oracle JDeveloperアプリケーションは、組織構造の最上位レベルです。 アプリケーションの開発中に、操作しているオブジェクトの情報がここに格納されます。 同時に、プロジェクトとすべての環境設定が追跡されます。 [ 詳細はこちら]

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

    tell me more iconアプリケーション・テンプレート

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


    tell me more iconIDE内

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

 

JSFページの作成

tell me more iconJSFページの作成

JavaServer Facesを使用したアプリケーションによって作成されるJSFページは、JSPページ(ファイル拡張子は .jsp) またはJSPドキュメント(ファイル拡張子は .jspx)です。 [ 詳細はこちら]

  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 」 をクリックします。

    tell me more iconコンポーネント・バ インディング

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


    tell me more iconIDE内

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

 

Javaクラスの作成

tell me more iconJavaクラスの作 成

JSFアプリケーション・ファイルの初期セットを構築したあと、新しいクラスを作成してプロジェクトに追加し、簡単なBeanオブジェクトを作成で きます。 [ 詳細はこちら

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

    tell me more iconJavaクラスの編 集

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

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

    tell me more iconIDE内

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

 

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

tell me more iconマネージドBean としてのクラスの登録

アプリケーションは、アプリケーション・ページにより表示されるテキストやメッセージを含んだファイルや、アプリケーションが使用するデータを定義する Beanなどの特定のリソースを必要とします。 [ 詳 細はこちら]

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

    tell me more iconJSFマネージド Bean

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

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

    tell me more iconIDE内

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

 

UIの設計

tell me more iconUIの設計

この例では、HTMLおよびJSF UIコンポーネントをJSFページに追加することでユーザー・インタフェースを設計します。 統合ツール(すなわち、コンポーネント・パレット、JSP/HTMLビジュアル・エディタ、プロパティ・インスペクタ)を組み合わせて使用することで、 ページを設計します。 これらのいずれかのツールでページを変更すると、変更した内容がほかのツールにも反映されます。 [ 詳細はこちら]

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

    tell me more iconリソース・バンドル

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

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

    tell me more iconビジュアル・エディ タでの表の操作

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

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

    tell me more iconJSFタグ・ライブ ラリとコンポーネント

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

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

    tell me more icon標準JSFコンポー ネント・タグ属性

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

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

    tell me more iconIDE内

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

 

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

tell me more iconマネージドBean へのUIのバインド

JSFでは、UIコンポーネントまたはコンポーネント・タグ属性値をモデル・レイヤーのデータへバインドすることにより、動的データを送信および表 示します。 このデータはアプリケーション内のあらゆるJavaBeanで保持することができます。 しかし、BeanをマネージドBeanとして登録することにより、Beanがページから式言語(EL)式を通じて最初にアクセスされる際に、JSFアプリ ケーションは実行時に自動的にBeanをオンデマンドでインスタンス化します。 したがって、Beanのプロパティ値を表示でき、ページからデータが送信される際に更新することもできます。 [ 詳細はこちら]

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

    tell me more iconJSF 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」をクリックします。

    tell me more iconIDE内

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

 

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

tell me more iconコードの完成と JSFページの実行

この簡単なJSFアプリケーションを完成させるには、Javaソース・ファイル PersonInfo.javaにコード を追加します。 サンプル・コードは、以前のキュー・カードでBeanに追加したビジネス・メソッド saveInfoを呼び出 します。 このメソッドは2つのパラメータをとり、さらにデータを保存するのではなく、単にデータをコンソールに書き込みます。 [ 詳細はこちら]

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

    tell me more iconJSFページの実行 とテスト

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


    tell me more iconIDE内

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