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

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

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

  1. Create Applicationダイアログを開きます(「 File」→「 New」→「 General」 →「 Applications」→「 Application」)。
  2. このキュー・カードの例に合わせるため、アプリケーション名として JSFNavigateAppと入力します。
  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ページ・ナビ ゲーションの作成

例に合わせるため、各キュー・カードの指示にしたがって、値を入力するかオプションを選択します。 そうすることで、記載されているとおりにキュー・カードの手順を実行できます。 [ 詳細はこちら]

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

    tell me more iconJSFナビゲーショ ン・ダイアグラム、ナビゲーション・ルール、ナビゲーション・ケース

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

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

    tell me more iconIDE内

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

 

JSFページの作成

tell me more iconJSFページの作成

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

  1. 必要に応じて、 webdiagram icon 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 」をクリックします。

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

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

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

    tell me more iconIDE内

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

 

UIの設計

tell me more iconUIの設計

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

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

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

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

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

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

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

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

    tell me more iconIDE内

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

 

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

tell me more iconコードを使用した動 作の変更

JSFナビゲーション・ルール以外にも、アプリケーションで必要なそのほかのリソースはJSF構成ファイル faces-config.xmlに 定義されています。 アプリケーションで必要となるリソースには、アプリケーション・ページで表示するテキストを含むファイルやアプリケーションで取り扱えるよう JavaBeansで定義されたデータなどがあります。 [ 詳細はこちら]

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

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

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

  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ダイアログを閉じます。

    tell me more iconJSFマネージド Bean

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

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

    tell me more iconナビゲーション・ ケースの結果

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


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

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

    tell me more iconIDE内

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