JSFページ・ナビゲーションは、ユーザーがページ内のボタンやリンクをクリックした際に表示されるページを決定する一連のナビゲーション・ルールです。
詳細を表示/非表示詳細表示

まず、ウィザードを使用して、アプリケーションおよびプロジェクトを手早く作成します。 ページ・フローを設計するために、ナビゲーション・ダイアグラマを使用してページを3つ追加し、1つのページから残りの2つのページへ移動するための方法を2つ定義します。

続いてJSFページを作成し、単純なUIコンポーネントをいくつか追加します。 1つのページ上に入力テキスト・フィールドとボタンを1つずつ追加します。 ボタンが押されたら入力フィールドに入力された値を取得して移動先のページを決定するメソッドを記述します。 ページ上のボタンにメソッドを紐付けるには、マネージドBeanを作成して、メソッドをボタンに登録します。 ページをテスト実行すると、ブラウザ内に次のようなページが表示されます。

ブラウザ内のLoginページ

目的 所要時間 アプリケーション
このチュートリアルでは、JSFにページ・ナビゲーションを作成する方法について説明します。 これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍してください。 20分 jsfnavigateapp.zipのダウンロード
ステップ1:新規アプリケーションとプロジェクトの作成
  1. メイン・メニューから「File」→「New」を選択します。 New Galleryで、「General」カテゴリを開き、「Applications」を選択します。Itemsリストで「Custom Application」を選択し、「OK」をクリックします。

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

    Oracle JDeveloperアプリケーションでは、作成するアプリケーションのタイプ(WebアプリケーションやJavaアプリケーションなど)に応じて、あらかじめ構築されたテンプレートに基づいて、事前定義された環境のタイプを指定できます。 アプリケーション・テンプレートには適切な機能の組合せが事前に指定されているため、標準アプリケーションのプロジェクト構造を素早く作成できます。 また、使用している機能に合った選択肢のみが使用できるように、Oracle JDeveloperで実行する処理がアプリケーション・テンプレートによりフィルタリングされます。

    このチュートリアルでは、Custom Applicationテンプレートを使用します。このテンプレートでは、JDeveloperがサポートするすべての機能の関連オブジェクトを1つのプロジェクトから使用できます。

    適切なテンプレートを使用してアプリケーションを作成した後も、新しいプロジェクトをアプリケーションに追加し、使用できるようにする機能を指定できます。 これを実行するには、アプリケーション・ナビゲータでアプリケーション名を右クリックして、「New Project」を選択します。 New Galleryでは、Itemsリストから任意のタイプのプロジェクトを選択できます。
  3. 例に合わせて、アプリケーション名としてJSFNavigateAppを入力します。

    Create generic applicationウィザード
  4. 初期プロジェクト構造(アプリケーションの作業領域内の名前付きプロジェクト・フォルダ)および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。 機能の関連付けは、アプリケーション内のプロジェクトで定義します。 詳細を表示/非表示詳細表示

    JDeveloperプロジェクトは、関連するファイルを論理的にグループ化するときに使用します。ここでは、ソース・ファイル、パッケージ、クラス、イメージ、およびプログラムで必要になるその他の要素が管理されます。プロジェクトでは、プログラムのコンパイル時や実行時に使用するソース・パスや出力パスなどの環境変数を管理します。また、プロジェクトには、コンパイラ、ランタイム、デバッグに関するオプションが用意されており、プロジェクトごとにこれらのツールの動作をカスタマイズできます。

    ソース・コードのアクセス、変更、再利用を簡単にするために、複数のプロジェクトをアプリケーションに追加できます。それぞれのプロジェクトに含まれるファイルは、たとえば多層アプリケーションにおける各層に相当する場合もあれば、複雑なアプリケーションにおける各サブシステムに相当する場合もあります。 これらのファイルはどのディレクトリに配置されていても、1つのプロジェクトに含めることができます。
  5. デフォルト値のままにして、「Finish」をクリックします。

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

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

  6. テンプレートから作成された新規アプリケーションは、プロジェクト階層に分割されてアプリケーション・ナビゲータに表示されます。各プロジェクトには関連する機能が設定されています。 詳細を表示/非表示詳細表示 アプリケーション・ナビゲータでは、プロジェクトは階層内の最上位レベルとして表示されます。アプリケーションで使用したCustom Applicationテンプレートによって、1つのプロジェクトが作成されています。このプロジェクトには、デフォルトのプロジェクト名または事前に入力されたプロジェクト名が指定されています。

    アプリケーション・ナビゲータのパネルはいずれも開閉できます。 2つのパネルの間のスプリッタをドラッグすれば、パネルのサイズを調整できます。 Projectsパネルで項目のグループ化やソートを行う場合は、navigator display optionsアイコンNavigator Display Optionsドロップダウン・メニューを使用します。 アプリケーションを操作するには、「applicationアイコンApplication Menuをクリックしてドロップダウン・メニューからオプションを選択します。

    Oracle JDeveloperには多種多様なファイル・タイプを識別する機能が備わっており、アプリケーション・ナビゲータでファイルをダブルクリックすると、適切なビューアまたはエディタでファイルが表示されます。アプリケーションまたはプロジェクトを終了すると、そのアプリケーションまたはプロジェクトのファイルを表示していたすべてのエディタまたはビューアが閉じられ、メモリからファイルがアンロードされます。

    注:アプリケーション・ナビゲータのイタリック体のノードは、これらの要素が保存されていないことを示しています。 プロジェクトに含まれるファイルが選択されている場合、プロジェクト・ノードは太字で表示されます。

    メイン・メニューから「Application」→「Show Overview」を選択します。 エディタ・ウィンドウ領域にApplication Overviewウィンドウが開きます。

    Application Overviewウィンドウの一部

    Application Overviewのファイル概要ページには、JDeveloper内で作成されるすべてのオブジェクトがオブジェクト・タイプごとに分類されて表示されます。新規作成したファイルとアーチファクトは、ステータスやプロジェクトでフィルタして表示できます。

    このアプリケーションのオブジェクトを作成する際には使用しないので、任意でApplication Overviewウィンドウを閉じることができます。
ステップ2:JSFページ・ナビゲーションの作成
  1. 先ほど作成したプロジェクトをアプリケーション・ナビゲータで右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「JSF Page Flow and Configuration (faces-config.xml)」の順に選択して「OK」をクリックします。

    new gallery、web tier、jsf/facelets
  2. JSFページ・ナビゲーションは、ユーザーがページ内のボタンやリンクをクリックした際に表示されるページを決定する一連のナビゲーション・ルールです。 詳細を表示/非表示詳細表示 ナビゲーション・ルールはJSFアプリケーションの構成リソース・ファイルに定義されます。このファイルには、デフォルトでfaces-config.xmlという名前がつけられます。

    すべてのJSFアプリケーションにfaces-config.xmlファイルがあります。JSF構成ファイルには、サポートするロケールやアプリケーションのページ間を移動するためのルールなど、アプリケーションの詳細情報が含まれています。 この他にも、マネージドBean、カスタム・メッセージ・バンドル、カスタム・バリデータ、コンバータなど、アプリケーションに必要なリソースの詳細情報も含まれています。
  3. Create JSF Configuration Fileダイアログで、ファイル名のfaces-config.xmlをデフォルトのまま受け入れ、「OK」をクリックします。

    Create JSF Configuration Fileダイアログ

  4. エディタ・ウィンドウで、「Diagram」タブが選択されていることを確認します。

    JSFナビゲーション・ダイアグラマとコンポーネント・パレット
  5. Oracle JDeveloperには、JSF構成ファイルへの情報の追加またはJSF構成ファイルの編集を行う3つの方法があります。エディタ・ウィンドウでクリックできるのは、次の3つです。 詳細を表示/非表示詳細表示
    • Diagramでは、JSFナビゲーション・ダイアグラムを使用してJSFアプリケーション内のページを計画し、ページ間をユーザーが移動できるようにナビゲーション・ルールを定義できます。

    • Overviewでは、概要エディタとダイアログを使用して、構成要素を追加および編集できます。

    • Sourceでは、構成要素名を把握していれば、XMLエディタを使用してXMLコードを編集できます。

    追加や修正を行う項目に合わせて最適なツールを使用できます。どのツールを使用しても、編集されるのは同じJSF構成ファイルです。
  6. コンポーネント・パレットのJSF Diagram ObjectsページにあるComponentsパネルで「jsf pageアイコンJSF Pageをクリックし、ダイアグラマにドラッグしてキャンバスにドロップし、アプリケーション・ページを表すアイコンを追加します。 ページ名はデフォルトのままにします。

    JSFナビゲーション・ダイアグラム
  7. JSFナビゲーション・ダイアグラムでページ・ナビゲーションを描画する方法は2つあります。 詳細を表示/非表示詳細表示
    • すでにJSFページを作成している場合は、そのページをアプリケーション・ナビゲータからドラッグして、ダイアグラムにドロップします。

    • JSFページを作成していない場合は、コンポーネント・パレットのJSF Diagram Objectsを使用してダイアグラム上にページ表現を描画します。

    いずれの場合も、ダイアグラムにページを追加したら、ナビゲーション・ルールを適用するページの間に線を描画してページ・ナビゲーション・ルールを定義します。
  8. ステップ4の手順を繰り返し、さらに2つのページ・アイコンを追加します。

  9. コンポーネント・パレットで「navigation caseアイコンJSF Navigation Caseをクリックします。次にダイアグラムで、作成した1つ目のページ・アイコンをクリックしてから、2つ目のページ・アイコンをクリックします。 ケース・ラベルはデフォルトのままにします。

    JSFナビゲーション・ダイアグラム
  10. JSFナビゲーション・ダイアグラムにナビゲーション・ルールを描くと、各ルールに設定したさまざまなナビゲーション・ケースは、ページ間をつなぐ実線としてダイアグラム上に表示されます。 実線の一方の端は矢印になっています。 矢印の向きは、どのページからどのページにユーザーがナビゲートされるのかを示しています。 詳細を表示/非表示詳細表示

    JSF構成ファイルにはいくつかのナビゲーション・ルールがあり、それぞれのルールに対していくつかのナビゲーション・ケースが含まれています。 各ナビゲーション・ルール・ファイルは、1つのページ内にある1つまたは複数のリンクのナビゲーション先を定義します。 そのページ内にあるリンクでナビゲーションが異なるものには、ルールの個別のナビゲーション・ケースが必要です。 たとえば、1つのページに2つのボタンまたはリンクがある場合、ページは2つのナビゲーション・ケースが設定された1つのナビゲーション・ルールを使用します。 各ケースには1つのラベルまたは出力文字列が関連づけられており、1つのページ内で異なるケースを区別する役割があります。 出力結果は、特定の文字列が返された場合にのみ、そのナビゲーション・ケースに従うように指定します。

    JSFナビゲーション・ダイアグラムでナビゲーション・ルールを描くと、ナビゲーション・ルールとナビゲーション・ケースに必要な要素がfaces-config.xmlファイルに追加されます。次に例を挙げます。

    <navigation-rule>
      <from-view-id>/Page1.jsf</from-view-id>
      <navigation-case>
        <from-outcome>success</from-outcome>
        <to-view-id>/Page2.jsf</to-view-id>
      </navigation-case>
    </navigation-rule>


    このナビゲーション・ルールでは、Page1.jsfページからPage2.jsfページへのナビゲーション方法を指定しています。
  11. コンポーネント・パレットで「navigation caseアイコンJSF Navigation Caseを再度クリックします。次にダイアグラムで、1つ目のページ・アイコンをクリックしてから、3つ目のページ・アイコンをクリックします。

  12. ダイアグラムで、1つ目と3つ目のページ・アイコンの間にある「case1」ナビゲーション・ケース・ラベルをクリックして、ラベルをfailureに変えます。

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

    次のようなJSFナビゲーション・ダイアグラムが表示されます。

    JSFナビゲーション・ダイアグラム
  14. これにより、JSFナビゲーション・ダイアグラムには定義したばかりの2つのナビゲーション・ケースが、アプリケーション内のページを接続する矢印として表示されます。 詳細を表示/非表示詳細表示

    Oracle JDeveloperによってJSF構成ファイルに追加されたナビゲーション・ルールとナビゲーション・ケースを表示するには、「Overview」をクリックして概要エディタに切り替え、左側の要素リストから「Navigation Rules」を選択し、右側でページを選択します。

    概要エディタに表示されたナビゲーション・ルール

    エディタ・ウィンドウの「Source」タブをクリックすれば、同じナビゲーション・ルールとナビゲーション・ケースをXMLで確認できます。

    XMLで表示されたナビゲーション・ルール

    このナビゲーション・ルールには、untitled1.jsfページから他の2つのページ(untitled2.jsfuntitled3.jsf)へ移動する方法が指定されています。つまり、ナビゲーション・ルールは2つのナビゲーション・ケースまたは2つの出力結果をもつということです。 参照先のページ・ファイルがまだ作成されていない場合は、コードおよびダイアグラムに警告が表示されます。 ページの実ファイルを作成するとダイアグラム上のページ・アイコンが変わり、アイコンに物理ファイルが関連づけられていることが示され、警告はなくなります。
ステップ3:JSFページの作成
  1. 必要に応じてエディタ・ウィンドウ下部の「Diagram」タブをクリックし、ダイアグラマに戻ります。

  2. JSFナビゲーション・ダイアグラムで「untitled1.jsf」ページ・アイコンをダブルクリックし、Create JSF Pageダイアログを開きます。

  3. ファイル名としてLogin.jsfを入力します。 ドキュメント・タイプとしてFaceletsが選択されていることを確認します。

    Create JSF Pageダイアログ
  4. JavaServer Facesを使用するアプリケーション向けに作成するJSFページには、Faceletsドキュメント(ファイル拡張子は.jsf)、またはXML構文で記述されたJSPドキュメント(ファイル拡張子は.jspx)を使用できます。 詳細を表示/非表示詳細表示

    どちらのJSFページもCreate JSF Pageダイアログを使用して作成できます。次のいずれかの方法でJSFページを開きます。
    • New Gallery

    • JSFナビゲーション・ダイアグラマ

    • Oracle ADFタスク・フロー・ダイアグラマ(JDeveloperのStudio Editionでのみ使用可能)

  5. Page Layoutページで「Blank Page」を選択します。 Managed Beanページで、「Do Not Automatically Expose UI Components in a Managed Bean」を選択して「OK」をクリックします。

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

    デフォルトでは、コンポーネントはマネージドBeanに対して公開されません。 コンポーネントをマネージドBeanにバインドする場合は、このダイアログのManaged Beanページでいずれかの自動バインディング・オプションを選択します。

    Create JSF Page、Managed Beanタブ

    注: 既存のマネージドBeanに対するバインド方法のオプションを選択できるのは、アプリケーションにマネージドBeanが構成されている場合のみです。

    UIコンポーネントをマネージドBean内で自動的に公開するように指定すると、新規のJSFページを作成するたびに自動的にバッキングBeanが作成されます。ページ上にコンポーネントをドロップすると、Oracle JDeveloperは、各コンポーネントのBeanプロパティを挿入し、binding属性を使用して、それらのプロパティにコンポーネント・インスタンスをバインドします。これにより、そのBeanは、コンポーネント・インスタンスを受け取ったり返したりできるようになります。

    ページ作成時に自動コンポーネント・バインディングを使用しないように指定した場合は、プロパティ・インスペクタを使用して手動でページ上のコンポーネントをバインドできます。 たとえば、入力テキスト・コンポーネントを挿入したら、プロパティ・インスペクタで、そのコンポーネントのBindingフィールドの末尾にある「dropdown menuアイコン」ドロップダウン・メニューをクリックして「Edit」を選択します。 マネージドBeanが存在しない場合は、こうしてEdit Propertyダイアログでそのページ用のマネージドBeanを作成できます。

    プロパティ・インスペクタ、プロパティのバインド、編集
  7. エディタ・ウィンドウの上部にあるfaces-config.xmlタブを選択し、ナビゲーション・ダイアグラムを前面に表示します。

    エディタ・ウィンドウのDocumentタブ

  8. untitled2.jsfページ・アイコンとuntitled3.jsfページ・アイコンについて、ステップ2~5を繰り返します。 2つ目のページと3つ目のページを作成するときには、それぞれ次のファイル名を使用します。

    Success.jsf
    Failure.jsf

    デフォルトでは、ビジュアル・エディタに新しいJSF Faceletsページが表示されます。 エディタ・ウィンドウには4つのドキュメントが開かれています。

    エディタ・ウィンドウのDocumentタブ
  9. 新規のJSFページをFaceletsドキュメント・タイプ(ファイル拡張子は.jsf)として作成すると、JSF CoreおよびHTMLの各タグ・ライブラリ用の2つのxmlns属性を持つ初期ページ構造が自動的に作成されます。 詳細を表示/非表示詳細表示 初期ファイルに含まれるその他の要素は、ページ・レイアウト用の要素で、具体的には、<f:view></f:view>に囲まれている他の要素すべてです。 たとえば、新規ページFailure.jsfには次のコードが生成されます。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <f:view xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html">  <html xmlns="http://www.w3.org/1999/xhtml">
    
        <h:head>
          <title>Failure</title>
        </h:head>
        <h:body>
          <h:form></h:form>
        </h:body>
    </html>
    </f:view>
    faces-config.xmlのJSFナビゲーション・ダイアグラムは現在、次のような状態になっており、ページ・アイコンの下にページ名が表示され、ページ・アイコンの間にナビゲーション線とラベルが表示されています。

    JSFナビゲーション・ダイアグラム、3つのページ

    警告アイコンがなくなり、ページ・アイコンも変わって、物理ページ・ファイルが存在することが示されています。

    JSFページの作成ステップが完了すると、アプリケーション・ナビゲータは次のような状態になります。

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

    プロジェクト内で、Java EE Webモジュール・ディレクトリ構造に準拠するフォルダとファイルは次のとおりです。
    • Web Contentフォルダ: 作成したページ、およびアプリケーションのクライアント・ブラウザに表示される必要があるその他のファイル(スタイルシート・ファイルやイメージなど)が格納されます。

    • /WEB-INF/フォルダ:必要なWebアプリケーション・デプロイメント・ディスクリプタ(web.xml)とJSF構成ファイル(faces-config.xml)が格納されます。

    • web.xmlファイル:アプリケーションのWebアプリケーション・デプロイメント・ディスクリプタです。これは、アプリケーションの構成コンポーネントを記述したXMLファイルです。初期化パラメータと、サーバーによって実施されるコンテナ管理のセキュリティ制約も、このファイルに記述されています。

    • faces-config.xmlファイル:バリデータ、コンバータ、マネージドBean、ナビゲーション・ルールといった、JSFアプリケーションの構成リソースが登録されます。

ステップ4:UIの設計
  1. エディタ・ウィンドウの上部にある「Login.jsf」タブを選択し、ページを前面に表示します。

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

    コンポーネント・パレット、JSFページ、HTMLパネル
  3. Faceletsでは、XML名前空間の概念を使用してJSFタグ・ライブラリをサポートしています。 JSFコンポーネントが用意されているライブラリは次のとおりです。 詳細を表示/非表示詳細表示
    • JavaServer Faces HTMLタグ・ライブラリ。一般的なHTMLユーザー・インタフェース・コンポーネントを表すタグが含まれます。

    • JavaServer Faces Coreタグ・ライブラリ。イベント処理やデータ変換といったコア・アクションを実行するタグが含まれます。

    Oracle JDeveloperでは、コンポーネント・パレットを使用して、ビジュアル・エディタ内でJSFページ上にコンポーネントをドラッグ・アンド・ドロップできます。各コンポーネントにはヘルプ情報が備わっており、コンポーネントの目的と属性が説明されています。 ヘルプ情報を検索するには、コンポーネント・パレットのパネル内でアイテムを右クリックし、「Help」を選択します。
  4. input textアイコンInput Textをクリックしてビジュアル・エディタにドラッグし、空白ページにドロップして入力テキスト・フィールドを追加します。

    ビジュアル・エディタ、入力テキスト・フィールドが追加された状態
  5. ビジュアル・エディタ内でページを設計する際には、エディタ・ウィンドウ下部(Designエディタ・タブおよびSourceエディタ・タブのすぐ上)のブレッドクラム・リンクを使用して、ページ上で既存のコンポーネントまたはタグを選択します。 詳細を表示/非表示詳細表示 エディタのブレッドクラム・リンクは、現在選択されているコンポーネントまたはタブからそのルートの親コンポーネントまたは親タグへさかのぼるリンク・パスを表します。

    エディタのブレッドクラム・リンクに表示されているコンポーネントまたはタグをクリックすると、選択したコンポーネントまたはタグがページ上に表示され、選択したアイテムの右上隅にドロップダウン・メニュー・アイコンが表示されます。このドロップダウン・メニューをクリックすると、Oracle JDeveloperは、選択したコンポーネントまたはタグ上で実行可能な操作をコンテキスト・メニューとして表示します。

    ビジュアル・エディタ、JSFページ

    ビジュアル・エディタはStructureウィンドウとも完全に統合されています。JSFコンポーネントを挿入、コピー、移動する際は、ビジュアル・エディタ内、ターゲット・ページ要素に対するStructureウィンドウ内で、ページ上の挿入ポイントを選択します。Oracle JDeveloperは、ターゲット・コンポーネントの前、後、または内部に、挿入ポイントの場所を示すビジュアル・キューを提供します。

    コンポーネントを挿入したら、コンポーネントをドロップする際に表示されるダイアログを使用し、必要に応じてコンポーネントのプロパティを設定できます。プロパティの設定は、プロパティ・インスペクタを使用して後で行うこともできます。

    アプリケーション・ページでは、Oracle JDeveloperに用意されているスタイルシートまたはユーザー固有のスタイルシートを使用することもできます。スタイルシートは、ページの作成時または作成後に、ページを編集することで追加できます。ページにスタイルシートを追加すると、ページ上のテキスト(見出しテキストなど)に、ドロップダウン・リストから選択したスタイルを設定できます。

    ビジュアル・エディタ・ツールバーのスタイル・ドロップダウン・リスト
  6. command buttonアイコンコマンド・ボタンをクリックしてページにドラッグし、追加した入力フィールドの横にドロップします。 プロパティ・インスペクタのCommonセクションで、「Value」フィールドをクリックし、デフォルトのテキストをLoginに変更します。

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

    JSFページにコンポーネントを追加すると、コンポーネント・タグでサポートされている属性が以下のカテゴリに分類されてプロパティ・インスペクタに表示されます。
    • Common: 一般に使用される属性。コンポーネントによって異なります。このカテゴリにはidおよびbinding属性も含まれます。idはコンポーネントの一意な識別子で、有効なXML名でなければなりません。id名の先頭文字に、数字やスペースを使用することはできません。bindingは、コンポーネント・インスタンスをBeanのプロパティにバインドするEL式です。

    • Appearance: 可視パーツを制御する基本属性。titleaccessKeyなどがあります。

    • Style: HTMLのスタイルおよびプレゼンテーションに関する属性。backgroundbordercellpaddingcellspacingfontmarginstyleoutlineなどがあります。対応したHTML要素に宣言するHTML 4.01仕様の属性のほとんどがサポートされています。

    • Behavior: コンポーネントの動作を制御する基本属性。disabledreadOnlyなどのHTMLパススルー属性が含まれます。HTML言語の国際化セクションに指定されるlangdirといった言語変換属性も含まれます。

    • JavaScript: HTMLイベント属性(クライアント側のスクリプトをイベントと関連づける属性)。onclickonkeypressonmouseoverなどがあります。

    コンポーネントの属性に関する説明を表示するには、プロパティ・インスペクタ内でプロパティ名またはプロパティ・フィールドを右クリックします。 サイズ変更ができるポップアップ・ウィンドウが表示され、スクロール機能が付いたProperty Helpボックスにプロパティの説明が表示されます。 プロパティ・ポップアップ・ウィンドウは、「ドロップダウン・メニュー・アイコン」ドロップダウン・メニューをクリックして開くこともできます。

    Property Inspector
  8. エディタ・ウィンドウの上部にある「Success.jsf」タブを選択し、ページを前面に表示します。

  9. コンポーネント・パレットで「output textアイコンOutput Textをドラッグし、ビジュアル・エディタの空白ページにドロップします。

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

  10. プロパティ・インスペクタのCommonセクションで「Value」フィールドをクリックし、デフォルトのテキストをYou have successfully logged inに変更して、[Enter]を押します。

    出力テキストの値を編集した後のSuccess.jsfのビジュアル・エディタは、次のようになります。

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

  11. エディタ・ウィンドウの上部にある「Failure.jsf」タブを選択し、ページを前面に表示します。

  12. コンポーネント・パレットで「output textアイコンOutput Textをドラッグし、ビジュアル・エディタの空白ページにドロップします。 次に、プロパティ・インスペクタで、出力テキストの値をLogin has failedに変更します。

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

    エディタ・ウィンドウの上部にある「Login.jsf」タブを選択し、ページを前面に表示します。

    Login.jsfページには、ユーザーがテキストを入力できる入力フィールドとコマンド・ボタンが表示されます。コマンド・ボタンには、ページ・ナビゲーションを制御するコードを後から追加します。

    ビジュアル・エディタ、Loginページ
  14. Login.jsfページのXMLエディタに切り替えると、<h:form></h:form>の間に追加した2つのコンポーネントのコードを確認できます。 詳細を表示/非表示詳細表示

    <h:form>
      <h:inputText/>
      <h:commandButton value="Login"/>
    </h:form>
ステップ5:コードを使用した動作の変更

メソッドを作成し、Loginページのボタンにアタッチします。 このメソッドは、ユーザーが入力フィールドに入力した値を取得し、適切な出力値を返します。

  1. Login.jsfのエディタ・ウィンドウで、下部にあるDesignタブをクリックし、ビジュアル・エディタがフォーカスされていることを確認します。

  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のことです。 詳細を表示/非表示詳細表示

    いずれの場合も、Beanのインスタンス化に使用するクラスを特定するときにはシンボリック名を使用します。また、Beanのプロパティとメソッドを参照するときにもシンボリック名を使用します。Beanを直接参照する代わりにシンボリック名を使用しているため、プレゼンテーションがアプリケーション・ロジックと分離され、ビューに影響を及ぼすことなくモデルを変更できます。

    ページで自動コンポーネント・バインディングを有効にすると、ページのUIコンポーネントがバッキングBeanのプロパティに自動的に公開され、binding属性を使用してコンポーネント・インスタンスがプロパティにバインドされます。 バッキングBeanとは、ページ固有のUIコンポーネントのロジックとプロパティが格納されたJSFマネージドBeanのことです。このJavaBeanは、既存のクラス(データ転送クラスなど)の場合もあれば、ページ専用のクラスの場合もあります(バッキングBeanと呼ばれるのはこのためです)。 バッキングBeanは、ユーザー入力とUIコンポーネントのデータの状態ホルダーとして動作します。そのため、入力値の検証メソッドや、コンポーネント値を引数としてバックエンド・アプリケーションの呼出しをするイベント・ハンドラ・メソッドを実装するのに便利です。

    Page Propertiesダイアログで自動コンポーネント・バインディングを有効にすると、コンポーネントを既存のマネージドBeanにバインドすることを選択するか、新しいマネージドBeanを構成してページのバッキングBeanを作成できます。

    自動コンポーネント・バインディングのオンとオフは、Page PropertiesダイアログのAuto Bindチェックボックスを選択するか選択解除することで切り替えられます。 たとえば、ページに追加するいくつかのコンポーネントについて、自動的にプロパティとアクセッサ・メソッドが生成されるようにするには、コンポーネントを追加する直前に自動コンポーネント・バインディングをオンにして、コンポーネントを追加した後でオフにします。
  5. Create Managed Beanダイアログで、次の値を入力するか、オプションを選択します。

    フィールドまたはオプション
    Bean Name backing_login
    Class Name LoginInfo
    Package project1.backing
    Extends java.lang.Object
    スコープ リクエスト
    登録 注釈
  6. マネージドBeanのスコープによって、Beanが格納されるスコープが決まります。Beanの有効なスコープは次のとおりです。 詳細を表示/非表示詳細表示
    • application:Webアプリケーションが実行されている間、Beanが使用可能です。このスコープは、LDAPディレクトリなどのグローバルなBeanに有用です。

    • session:クライアント・セッションの間、クライアントがBeanを使用できます。

    • request:インスタンス化されてからクライアントに応答が返されるまで、Beanが使用可能です。これは通常、現在のページの存続期間です。

    • none:Beanは参照されるたびにインスタンス化されます。これは、Beanが別のBean内で参照されている場合に有用です。

    JSF 2.0からは、faces-config.xmlでマネージドBeanを登録するのではなく、BeanクラスでマネージドBeanアノテーションを使用する選択ができるようになりました。 マネージドBeanアノテーションの使用を選択すると、JavaBeanクラス・ファイルにアノテーションが追加されます。次に例を挙げます。

    @ManagedBean(name="backing_mypage")
    @RequestScoped
    public class MypageInfo {
      ...
    }


    faces-config.xmlでJavaBeansを登録する場合は、構成ファイル内のXMLを手動で編集するか、構成ファイルの概要エディタを使用します。概要エディタには、各作成ダイアログと、Beanのクラス・ファイル参照を検索するための参照機能が用意されています。

    JSF構成ファイルの概要エディタ

    構成ファイルの概要エディタを使用してマネージドBeanを作成して構成すると、必要なコードがfaces-config.xmlに追加されます。次に例を示します。

    <managed-bean>
      <managed-bean-name>backing_mypage</managed-bean-name>
      <managed-bean-class>project1.backing.MypageInfo</managed-bean-class>
      <managed-bean-scope>request</managed-bean-scope>
      <!--oracle-jdev-comment:managed-bean-jsp-link:1Mypage.jsf-->
    </managed-bean>


    コメント行<!--oracle-jdev-comment...-->は、自動コンポーネント・バインディングがオンのときにはこのマネージドBeanをfaces-config.xmlページのバッキングBeanとすることを示しています。

    faces-config.xmlファイルはかなりの大きさになることがありますが、マネージドBeanアノテーションを使用するとファイルのサイズと複雑さが減少します。
  7. OK」をクリックして、Create Managed Beanダイアログを閉じます。

    Managed Beanドロップダウン・リストでbacking_loginが選択されているのが確認できます。

    Page Propertiesダイアログ、マネージドBeanが作成された状態

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

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

  9. Oracle JDeveloperによって追加されたマネージドBeanアノテーションを確認します。 詳細を表示/非表示詳細表示

    @ManagedBean(name="backing_login")
    @RequestScoped
    public class LoginInfo {
      ...
    }


    自動コンポーネント・バインディングを有効にすると、JSFページ上のBeanプロパティと各UIコンポーネントのアクセッサ・メソッドがバッキングBeanファイルに追加されます。次に例を挙げます。
    private HtmlInputText inputText1;
    public void setInputText1(HtmlInputText inputText1) {
      this.inputText1 = inputText1;
    }
    public HtmlInputText getInputText1() {
     return inputText1;
    }
    :Oracle JDeveloperは、バッキングBean上のプロパティについて、マネージド・プロパティを作成しません。マネージド・プロパティとは、Beanがインスタンス化される際に値が投入されるBeanのプロパティです。Beanを特定のプロパティ値でインスタンス化する場合は、faces-config.xmlファイルにマネージド・プロパティ設定用のエントリを手動で追加する必要があります。

    JSFページで自動コンポーネント・バインディングを有効にすると、コンポーネントのbinding属性を使用してコンポーネント・インスタンスがBeanプロパティにバインドされます。次に例を挙げます。

    <h:inputText binding="#{backing_login.inputText1}" id="inputText1"/>

    backing_loginはシンボリックBean名です。

    自動コンポーネント・バインディングを使用するページのソース・コードでは、ページの末尾に自動バインディング用のコメント行も挿入されます。次に例を挙げます。

    <!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_login-->
  10. エディタ・ウィンドウで「Login.jsf」タブをクリックしてビジュアル・エディタを前面に表示し、ページ上のコマンド・ボタンをダブルクリックします。

  11. Login.jsfページのコマンド・ボタンをユーザーがクリックした際に、どのナビゲーション・ケースが使用されるかを指定するには、アクション・メソッドか出力結果、またはその両方を指定できます。 詳細を表示/非表示詳細表示
    • 出力結果は、特定の文字列が返された場合にのみ、同じナビゲーション・ケースに従うように指定します。これは、静的なナビゲーションの形式に当たります。ユーザーがボタンまたはリンクをクリックするたびに、定義されて固定されたJSFページが必ず表示されます。ボタンまたはリンク自体は、文字列の出力結果を指定するためにaction属性を使用します。たとえば、<commandButton value="Click" action="success"/>です。

    • アクション・メソッドは、アクション・メソッドでリンクを処理した場合にのみ、同じナビゲーション・ケースへ従うように指定します。また、出力結果を決定するロジックをいくつか実行し、出力結果を返します。ボタンまたはリンク自体は、action属性を使用して、論理的な出力結果を返すアクション・メソッドを参照するメソッド式を指定します。たとえば、<commandButton value="Click" action="#{somebean.somemethod}"/>です。

    • アクション・メソッドと出力結果を使用して、指定されたアクション・メソッドがリンクを処理した場合と、特定の文字列の出力結果を返した場合にのみ、このナビゲーション・ケースへ従うように指定します。

  12. Bind Action Propertyダイアログで、Managed Beanドロップダウン・リストにbacking_loginが表示されていることを確認します。 Methodドロップダウン・ボックスにcommandButton1_actionが移入されていることも確認します。「OK」をクリックします。

    Bind Action Propertyダイアログ

  13. LoginInfo.javaソース・エディタで、ボタンがクリックされたらナビゲーションを実行するためのコードを入力します。

    アクション・メソッドに生成された次のコードを置き換えます。

    // Add event code here...
    return null;

    次のサンプル・コードを使用して、Login.jsfページからSuccess.jsfページまたはFailure.jsfページへのナビゲーションを設定します。

  14. Bind Action Propertyダイアログを使用すると、次の処理が自動的に実行されます。 詳細を表示/非表示詳細表示
    • LoginInfo.javaソース・ファイル内に起動アクション・メソッドが作成されます。
      public Object commandButton1_action() {
        // Add event code here...
        return null;
      }

    • コマンド・ボタンのaction属性が、メソッド式を使用したアクション・メソッドにバインドされます。
      <h:commandButton value="Login"
                       binding="#{backing_login.commandButton1}"
                       id="commandButton1"
                       action="#{backing_login.commandButton1_action}"/>

    アクション・メソッドは、パラメータを受け入れずにObjectを返すパブリック・メソッドです。 Objectは論理的な出力結果を表します。JSFナビゲーション・システムがこの論理的な出力結果とfaces-config.xmlファイルに含まれるナビゲーション・ケースに定義されている出力結果とを比較して、次に表示するページを決定します。

    次のナビゲーション・ケースはすでに作成されています。

    <navigation-rule>
      <from-view-id>/Login.jsf</from-view-id>
      <navigation-case>
        <from-outcome>success</from-outcome>
        <to-view-id>/Success.jsf</to-view-id>
      </navigation-case>
      <navigation-case>
        <from-outcome>failure</from-outcome>
        <to-view-id>/Failure.jsf</to-view-id>
      </navigation-case>
    </navigation-rule>


    したがって、生成されたアクション・メソッドに追加するイベント・コードでは、Login.jsfページから返される可能性のある2つのナビゲーション・ケースの出力結果に対応するために、"success"と"failure"の両方を返す必要があります。
  15. アプリケーション・ナビゲータで「Login.jsf」を右クリックし、「Run」を選択します。

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

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

    ブラウザ内のLoginページ

  16. このチュートリアルが完了すると、アプリケーション・ナビゲータの表示は次のようになります。 詳細を表示/非表示詳細表示

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

    Project1の下のApplication Sourcesフォルダには、project1.backingパッケージに含まれたLoginInfo.javaがあります。

    デフォルトでJDeveloperは、IDEにバンドルされたOracle WebLogic Serverのユーザー固有のインスタンスを参照する、Integrated WebLogic Serverという名前の統合されたサーバーを自動的に構成します。統合されたWebLogic Serverは、パッケージ化されたアーカイブ・デプロイメント用のJava EEランタイム・サービスです。ゼロコピー・デプロイメントに基づき、Integrated WebLogic Serverでは、アプリケーションとそのプロジェクトのJava EEアプリケーションとしての実行とテストをJava EEコンテナ内で行えます。Integrated WebLogic Serverの使用に際し、特別な接続設定は必要ありません。アプリケーション全体、プロジェクト、または個別のJSFページを実行できます。

    IDEでJSFアプリケーションを実行すると、次の処理が自動的に実行されます。
    • まだ実行中でない場合は、Integrated WebLogic Serverを起動します。

    • アプリケーションをコンパイルしてIntegrated WebLogic Serverにデプロイします。

    • 次のデフォルトのアドレスを使用して、デフォルトのブラウザ内でアプリケーションを起動します。 http://<your_machine_IP_address>:<http_port>/<your_application_name>-<your_project_name>-context-root>/faces/<path_to_the_page>

      以下に例を示します。 http://127.0.0.1:7101/JSFNavigateApp-Project1-context-root/faces/Login.jsf

    JSFアプリケーションを起動すると、faces-config.xmlが解析され、登録されているマネージドBeans(存在する場合)が使用可能になります。 また、アノテーションによってマークされたJavaBeansがあれば、実行時にマネージドBeanになります。マネージドBeanが(たとえば、EL式内で値式と呼ばれるコンポーネントのタグ属性の値として)参照されると、マネージドBean作成機能が、そのBeanのデフォルトのコンストラクタ・メソッドを呼び出してBeansをインスタンス化します。プロパティが宣言されている場合は、それらに宣言済みのデフォルト値が設定されます。

    実行中のアプリケーションで、入力フィールドにguestと入力して「Login」ボタンをクリックすると、ログイン状態であることを確認するメッセージを含むページが表示されます。

    ブラウザに表示されたSuccessページ

    他の任意の文字列を入力して「Login」ボタンをクリックすると、ログインが失敗したことを示すメッセージを含むページが表示されます。

    ブラウザに表示されたFailureページ

    アプリケーションを終了する場合は、Oracle JDeveloperで「TerminateアイコンTerminateをクリックし、ドロップダウン・メニューからアプリケーション・バウンド・インスタンスの「JSFNavigateApp」を選択します。

    : アプリケーションを終了すると、アプリケーションは停止し、Integrated WebLogic Serverからアンデプロイされますが、Integrated WebLogic Serverは終了されません。
まとめ
このチュートリアルでは、JSFナビゲーションを使用する簡単なアプリケーションを作成しました。このチュートリアルで学習した内容は、以下のとおりです。 JSF Webアプリケーションの開発の詳細については、下記を参照してください。

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

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



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