ウィザードを使用して、アプリケーション、プロジェクト、および空白のJavaServer Faces(JSF)ページを短時間で作成できます。 ページを設計するには、ビジュアル・エディタを使用して、入力フィールド、ボタン、および表示フィールドを追加します。
詳細を表示/非表示詳細表示
目的 所要時間 アプリケーション
このチュートリアルでは、簡単なJSFアプリケーションを作成し、実行する方法を説明します。これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終アプリケーションのzipファイルをダウンロードし、Oracle JDeveloperのmyworkフォルダに解凍します。 20分 jsfapplication.zipのダウンロード
ステップ1:新規アプリケーションとプロジェクトの作成
  1. メイン・メニューから「File」→「New」を選択します。New Galleryで「General」カテゴリを展開し、「Applications」を選択します。Itemsリストで「Custom Application」を選択し、「OK」をクリックします。

    New Gallery、Applications
  2. JDeveloperアプリケーションは、組織構造の最上位レベルです。アプリケーションの開発中に、操作しているオブジェクトの情報がここに格納されます。同時に、プロジェクトとすべての環境設定が追跡記録されます。詳細を表示/非表示詳細表示
  3. この例に合わせるため、アプリケーション名としてJSFApplicationと入力します。

    カスタム・アプリケーションの作成
  4. 初期プロジェクト構造(アプリケーションの作業領域内にある名前付きプロジェクト・フォルダ)および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。関連する機能はアプリケーション内の1つ以上のプロジェクトにより定義されます。詳細を表示/非表示詳細表示
  5. デフォルト値のままにして、「Finish」をクリックします。

    アプリケーション・ナビゲータのProjectsパネルは、次のように表示されます。

    アプリケーション・ナビゲータ

  6. テンプレートから作成された新規アプリケーションは、プロジェクト階層に分割されてアプリケーション・ナビゲータに表示されます。各プロジェクトには関連する機能が設定されています。詳細を表示/非表示詳細表示
ステップ2:JSFページの作成
  1. アプリケーション・ナビゲータで、プロジェクトを右クリックして「New」→「Web Tier」→「JSF/Facelets」→「Page」を選択し、「OK」をクリックします。

    New Gallery、Web Tier、JSF/Facelets

  2. Create JSF Pageダイアログで、ファイル名としてStart.jsfを入力します。 ドキュメント・タイプにFaceletsが選択されていることを確認します。

    Create JSF Pageダイアログ
  3. JavaServer Facesを使用したアプリケーションによって作成されるJSFページは、Faceletsドキュメント(ファイル拡張子は.jsf)またはXML構文で記述されたJSPドキュメント(ファイル拡張子は.jspx)です。詳細を表示/非表示詳細表示
  4. Page Layout」ページで、「Blank Page」を選択します。 Managed Beanページで、「Do Not Automatically Expose UI Components in a Managed Bean」を選択します。

  5. Create JSF Pageダイアログで、新規ページのルック・アンド・フィールの一部を任意で定義できます。また、UIコンポーネントをプログラムで操作できるようにするために、ページ上のコンポーネントをマネージドBean内に公開するかどうかを指定できます。詳細を表示/非表示詳細表示
  6. OK」をクリックします。

    デフォルトではビジュアル・エディタに新規のJSF Faceletsページが表示されます。

    ビジュアル・エディタ、コンポーネント・パレット

  7. コンポーネント・パレットのJSFページから、JSF HTMLとJSF Coreコンポーネントを使用してページの編集を開始できます。詳細を表示/非表示詳細表示
ステップ3:UIの設計
  1. エディタ・ウィンドウで、下部の「Design」タブをクリックして、Start.jsfのビジュアル・エディタがフォーカスされていることを確認します。

  2. 特定のファイルをエディタ・ウィンドウで開いたときに表示されるウィンドウ下部の各タブは、エディタ・タブです。詳細を表示/非表示詳細表示
  3. コンポーネント・パレットで、ドロップダウン・リストから「JSF」を選択し、「HTML」パネルを展開します。

    コンポーネント・パレット、JSFページ、HTMLパネル
  4. Faceletsは、XML名前空間の概念を使用して、JSFタグ・ライブラリをサポートします。 JSFコンポーネントを提供するライブラリは次のとおりです。詳細を表示/非表示詳細表示
  5. 入力テキスト・アイコンInput Textをクリックし、ビジュアル・エディタにドラッグして、空白のページにドロップし、入力テキスト・フィールドを追加します。

    ビジュアル・エディタ、追加された入力テキスト・フィールド
  6. ビジュアル・エディタの下方にあるエディタ・ブレッドクラム・リンクには、現在選択されているコンポーネントまたはタブからそのルートの親コンポーネントまたは親タグへのリンク・パスが表示されます。詳細を表示/非表示詳細表示
  7. コマンド・ボタン・アイコンCommand Buttonをクリックしてページにドラッグし、追加した入力フィールドの横にドロップします。プロパティ・インスペクタのCommonセクションで、「Value」フィールドをクリックし、デフォルトのテキストをClick hereに変更します。

    プロパティ・インスペクタ、コマンド・ボタンのテキスト
  8. JDeveloper内でJSFコンポーネントを使用しながら、プロパティ・インスペクタ内でコンポーネント・タグ属性を表示および設定できます。詳細を表示/非表示詳細表示
  9. コンポーネント・パレットで、ドロップダウン・リストから「HTML」を選択し、「Common」パネルを展開します。

    コンポーネント・パレット、HTML Common

  10. 改行アイコンLine Breakをドラッグして、ページのコマンド・ボタンの横にドロップします。

  11. Structureウィンドウで、「br」を右クリックし、「Insert After br」→「JSF」を選択します。

    Structureウィンドウ、Insertコンテキスト・メニュー

  12. Insert JSF Itemダイアログで、「出力テキスト・アイコンOutput Textを選択し、「OK」をクリックします。

    入力テキスト・フィールドの下に出力テキスト・コンポーネントが追加されます。

    ビジュアル・エディタ、追加された出力テキスト

  13. 出力テキスト・コンポーネントのプロパティ・インスペクタのCommonセクションで、Valueフィールドのデフォルトのテキストを削除し、フィールドを空白にして[Enter]を押します。

  14. すべて保存アイコンSave Allをクリックして作業内容を保存します。

    ビジュアル・エディタが次のように表示されます。

    ビジュアル・エディタ内のStartページ

  15. ユーザーがデータを入力するための入力フィールドと、アクションを起動するためのボタンがあります。デフォルトの出力テキスト値を削除したため、出力テキスト・フィールドはページ上に表示されません。詳細を表示/非表示詳細表示
ステップ4:コードを使用した動作の変更

メソッドを作成して、ページのボタンに関連付けます。このメソッドはユーザーが入力フィールドに入力した値を取得して、入力フィールドの下に表示します。

  1. エディタ・ウィンドウで、上部の「Start.jsf」ドキュメント・タブをクリックします。

  2. メイン・メニューから「Design」→「Page Properties」を選択します。

    IDE、Designメニュー

  3. Page Propertiesダイアログで、「Component Binding」タブを選択し、「Auto Bind」を選択します。 Managed Beanドロップダウン・リストの横にある「New」をクリックします。

    Page PropertiesとCreate Managed Beanダイアログ
  4. マネージドBeanとは、JSF構成ファイルfaces-config.xmlに登録されているか、Beanクラスに特別なマネージドBeanアノテーションを持つ、任意のアプリケーションJavaBeanです。詳細を表示/非表示詳細表示
  5. Create Managed Beanダイアログで、次の値を入力するか、オプションを選択します。

    フィールドまたはオプション
    Bean Name backing_start
    Class Name StartInfo
    Package project1.backing
    Extends java.lang.Object
    Scope request
    Registration Annotations
  6. マネージドBeanのスコープによって、Beanが格納されるスコープが決まります。Beanの有効なスコープは次のとおりです。詳細を表示/非表示詳細表示
  7. OK」をクリックして、Create Managed Beanダイアログを閉じます。

    Managed Beanドロップダウン・リストで選択したbacking_startが表示されます。

    Page Propertiesダイアログ

  8. OK」をクリックして、Page Propertiesダイアログを閉じます。

    ソース・エディタにバッキングBeanファイルStartInfo.javaが表示されます。

  9. JDeveloperによって追加されたマネージドBeanアノテーションに関する注意事項:詳細を表示/非表示詳細表示
  10. エディタ・ウィンドウで「Start.jsf」タブをクリックして、ビジュアル・エディタを前面に表示し、ページのコマンド・ボタンをダブルクリックします。

  11. Bind Action Propertyダイアログで、マネージドBeanドロップダウン・リストにbacking_startが表示されていることを確認します。 また、Methodドロップダウン・ボックスにcommandButton1_actionと表示されます。「OK」をクリックします。

    Bind Action Propertyダイアログ

  12. StartInfo.javaのソース・エディタで、入力テキスト・フィールドに入力された値を取得するコードを入力して、値を出力テキスト・フィールドに表示します。

    たとえば、生成されたコードのコマンド・ラインの後です。

    // Add event code here...

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

  13. アプリケーション・ナビゲータで「Start.jsf」を右クリックし、「Run」を選択します。

    Create Default Domainダイアログが表示されたら、デフォルトのパスワード(たとえば、weblogic1)を「Password」および「Confirm Password」フィールドに入力して、「OK」をクリックします。

    ブラウザのページが次のように表示されます。

    ブラウザ内のStartページ

  14. このチュートリアルが完了すると、アプリケーション・ナビゲータは次のように表示されます。詳細を表示/非表示詳細表示
まとめ
このチュートリアルでは、JSFコンポーネントを使用して、簡単なアプリケーションを作成しました。このチュートリアルで学習した内容は、以下のとおりです。 JSF Webアプリケーションの開発の詳細は、下記のWebサイトを参照してください。

ブックマーク 印刷 すべて表示 | すべて非表示
トップへ戻る

このページはお役に立ちましたか。



Copyright © 2011, Oracle and/or its affiliates.All rights reserved.