宣言的なJSFコンポーネントの作成と使用

Oracle JDeveloperのIDEを使用して、プロジェクト内で宣言的なJSFコンポーネントの定義を作成し、その定義を含むプロジェクトを配置したあと、宣 言的なコンポーネントをほかのプロジェクトのJSFページで使用できます。

プロジェクト内での宣言的なコンポーネント定義の作成:Create JSF Declarative Componentダイアログを使用して、宣言的なコンポーネントのメタデータを作成し、ADF Facesコンポーネントを使用して、宣言的なコンポーネントのレイアウトを作成します。

宣言的なコンポーネントの定義を含むプロジェクトの配置:ADF Library JARのデプロイメント・プロファイルを作成し、プロジェクトを配置します。

ADF Library JARのプロジェクトへのロード:リソース・パレットを使用して、宣言的なコン ポーネントを使用するプロジェクトにADF Library JARを追加します。

ページの作成と宣言的なコンポーネントの追加:Create JSF Pageダイアログを使用して新規ページを作成してから、ほかのADF Facesコンポーネントの場合と同様に、宣言的なコンポーネントをページに挿入します。

宣言的なコンポーネントの使用:プロパティ・インスペクタを使用して、ラベルを追加し、メソッドを関連づけ ます。

 

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

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

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

  1. Create Applicationダイアログを開きます(「 File」→「 New」→「 General」 →「 Applications」→「 Application」)。
  2. このキュー・カードの例に合わせるため、アプリケーション名 MyWebAppを入力します。
  3. Applica tion Template リストボックスで「 Fusion Web Application (ADF) 」を選択し、「 Finish 」をクリックします。

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

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

  4. Create Applicationダイアログを再度開きます(「 File」→「 New」→「 General」 →「 Applications」→「 Application」)。
  5. アプリケーション名として DeclarativeComponentsと入力します。 Applica tion Template リストボックスから「 No Template [All Technologies] 」を選択し、「 OK 」をクリックします。
  6. Create Projectダイアログで、プロジェクト名として DeclarativeComponentsと 入力し、「 OK 」をクリックします。
  7. アプリケーション・ナビゲータで、作成したばかりのプロジェクトを選択し、Project PropertiesダイアログのJSP Tag Librariesページを「 Tools > Project Properties」 開きます(「 Tools」→「 Project Properties」)。
  8. Distributed Libraries 」フォルダを選択し て、「 Add 」をクリックします。
  9. Choose Tag Librariesダイアログで「 ADF Faces Components 11-ji3 」を選択し、「 OK 」をクリックします。

    tell me more iconJSPタグ・ライブラリ

    ライブラリは、Oracle JDeveloperとともにインストールされるさまざまなAPIやテクノロジーのために提供されます。 これらのライブラリは、拡張ライブラリに分類され、すべてのユーザーによって共有されます。 [ 詳細はこちら]

  10. OK 」をクリックして、Project Propertiesダイアログを閉じます。
  11. the save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

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

 

宣言的なJSFコンポーネント用メタデータの作成

tell me more icon宣言的なJSFコンポーネント用メタデータの作成

宣言的なコンポーネントは再使用可能な複合コンポーネントで、ほかの既存のADF Facesコンポーネントで構成されています。 また、異なったコンテンツあるいは同一のコンテンツを使用して、1つのページの異なる部分または複数のページを構築するための基盤として使用できます。 たとえば、1ページの異なる部分または複数ページにわたって共通する一連のボタンがある場合、これらのボタンを含む宣言的なコンポーネントを作成してか ら、共通の機能を必要とするページ上で、その宣言的なコンポーネントを使用できます。 [ 詳細はこちら]

  1. 必要に応じて、アプリケーション・ナビゲータのApplicationsドロップダウン・リストから「 DeclarativeComponents 」を選択し、 DeclarativeComponentsアプリケーションに切り替えます。
  2. アプリケーション・ナビゲータで「 DeclarativeComponents 」 プロジェクトを選択し、Create JSF Declarative Componentダイアログを開きます(「 File」→「 New」 →「 WebTier」→「 JSF」→「 JSF Declarative Component」)。
  3. 宣言的なコンポーネントの名前として myMenubarと入力します。 「 Add Ta g Library 」をクリックして、ダイアログを開きます。 例に合わせるため、タグ・ライブラリ名として MyDeclComponents、タグ・ライブラリのURIとして /mycomponents、 タグ・ライブラリの接頭辞として mcを使用します。 「 OK 」 をクリックします。

    tell me more icon宣言的なコンポーネント名とタグ・ライブラリ

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

  4. Create JSF Declarative Componentダイアログで、 Facet Definitionsタブを前面に表示し、「 Add 」 をクリックして今後のコンテンツのためにプレースホルダを追加します。 Nameフィールド に moreMenusと入力します。 そのほかはデフォルト値のままにします。

    tell me more iconIDE内

    宣言的なコンポーネントのメタデータの作成ステップが完了すると、ビジュアル・エディタとStructureウィンドウは次のように表示さ れます。 [ 詳細はこちら]

  5. Attributes 」をクリックしてそのタブを前面に表示し、 次に「 Add 」をクリックして属性を追加し、そのあと宣言的なコ ンポーネント上で設定します。 Nameフィールドに menuLabelと 入力します。 デフォルトのままにします。
  6. Methods 」をクリックしてそのタブを前面に表示し、次に「 Add 」をクリックしてメソッドを追加し、そのあと宣言的なコンポーネント に登録します。 デフォルトのメソッド名を受け入れます。 Method Signatureフィー ルドに void method(javax.faces.event.ActionEvent)と入力します。 「 OK 」をクリックします。
  7. the save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

    宣言的なコンポーネントのメタデータの作成ステップが完了すると、ビジュアル・エディタが宣言的なコンポーネントの定義ファイルを空白の ページとして表示します。 Structureウィンドウは次のように表示されます。 [ 詳細はこちら]

 

宣言的なコンポーネントのレイアウトの定義

tell me more icon宣言的なコンポーネントのレイアウトの定義

宣言的なコンポーネントのメタデータを定義するとすぐに、宣言的なコンポーネントの定義ファイル( .jspxファイル) は、Oracle JDeveloperによって空白のページとしてビジュアル・エディタに表示されます。 [ 詳細はこちら]

  1. まだ開いていない場合は、アプリケーション・ナビゲータ内で宣言的なコンポーネントの定義ファイル「 faces page iconmyMenubar.jspxを ダブルクリックして、ビジュアル・エディタで開きます。
  2. コンポーネント・パレットの ADF Facesページで、「 Common Components 」パネルを展開します。 次に、ビジュアル・エディタを使用して、そのページ上で「 menu iconPanel Menu Barをドラッグ・アンド・ドロップして、宣言的なコンポーネントのレイアウトの定義を始めます。
  3. 追加したばかりのパネル・メニュー・バーに、「 menu iconMenuを ドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Textプロパティの値を Fileに変更します。 [Enter]を押します。
  4. 追加したばかりのメニュー・コンポーネントに、「 menu item iconMenu Item をドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセ クションで、 Textプロパティの値を Deleteに変更し、 [Enter]を押します。
  5. プロパティ・インスペクタの Appearanceセクションで、 Iconフィールドの横に表示されている down arrow iconドロップダウン・メニューか ら「 Edit 」を選択します。 次に、移動してイメージ(たとえば、 delete.png) を選択し、メニュー項目のコンポーネントに加えます。

    tell me more icon宣言的なコンポーネントへのイメージの追加

    イメージに移動して選択することで、どんなイメージでも宣言的なコンポーネントに追加できます。 [ 詳細はこちら]

  6. コンポーネント・パレットの Common Componentsパネルで、別の「 menu item iconMenu Item をStructureウィンドウの menu icon af:menu - File要素にドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセ クションで、 Iconフィールドの横に表示されている down arrow iconドロップダウン・メニューか ら「 Edit 」を選択します。 次に、移動してイメージ(たとえば、 user.png) を選択し、追加したばかりのメニュー項目のコンポーネントに加えます。
  7. プロパティ・インスペクタの Commonセクションで、 Textプロパティとして #{attrs.menuLabel}ActionListenerプロパティとして #{component.handleMethod1}と 入力します。

    tell me more iconEL式

    EL式を使用すると、オブジェクトに保存されたデータにアクセスできます。 [ 詳細はこちら]

  8. コンポーネント・パレットの Common Componentsパネルで、「 facet iconFacet Refを Structureウィンドウの menu icon af:menuBar要 素にドラッグ・アンド・ドロップします。 Insert Facet Refダイアログで、ドロップダウン・リストから「 moreMenus 」を選択します。 「 OK 」 をクリックします。 (これによって、 af:facetRefaf:menu - File のあとに挿入され、ページ作成者はほかのメニューをあとで追加できるよ うになります。)
  9. the save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

    宣言的なコンポーネントのレイアウトを定義するステップが完了すると、ビジュアル・エディタとStructureウィンドウは次のように表 示されます。 [ 詳細はこちら]

 

ADF Library JARへの定義プロジェクトの配置

tell me more iconADF Library JARへの定義プロジェクトの配置

宣言的なコンポーネントを使用するWebページは、宣言的なコンポーネントが定義されるプロジェクトに存在できません。 宣言的なコンポーネントを共有または再使用するには、まずそのようなコンポーネントの定義を含むプロジェクトをADF Library JARファイルに配置する必要があります。 1つ以上の定義プロジェクトがある場合は、各プロジェクトを1つのADF Library JARに配置する必要があります。 [ 詳細はこちら]

  1. アプリケーション・ナビゲータで「 DeclarativeComponents 」 プロジェクトを選択し、Create Deployment Profile - ADF Library JAR Fileダイアログを開きます(「 Run」 →「 Deploy」→「 New Deployment Profile」→「 ADF Library JAR File」)。
  2. デプロイメント・プロファイル名として adflibDeclarativeComponents1と入力し、「 OK 」をクリックします。

    tell me more iconデプロイメント・プロファイル名とADF Library JARファイル名のデフォルト値

    Oracle JDeveloperでは、次の形式を使用してデフォルトのデプロイメント・プロファイル名を作成します。 [ 詳細はこちら]

  3. OK 」をクリックしてADF Library JAR Deployment Profile Propertiesダイアログを閉じ、すべてのデフォルト値を受け入れます。
  4. OK 」をクリックして、Property Propertiesダイアログを閉じます。
  5. the save all iconSave Allをクリックして作業内容を保存します。
  6. アプリケーション・ナビゲータで「 DeclarativeComponents 」 プロジェクトをダブルクリックし、「 Deplo y then chooseadflibDeclarativeComponents1then chooseto ADF Library JAR」の順に選択して、配置を開始します。

    tell me more iconADF Library JARファイル

    宣言的なコンポーネントの定義プロジェクトをADF Library JARに配置すると、Oracle JDeveloperはプロジェクトをコンパイルし、必要なアーチファクトとコントロール・ファイルを作成して、関連するプロジェクト・ファイル(イメー ジ・ファイルなど)をJARにパッケージします。 また、JARにはタグ・ライブラリ・ディスクリプタ・ファイル( .tldファ イル)や、宣言的なコンポーネントのために作成されたコンポーネント・クラスとタグ・クラスも含まれます。 [ 詳細はこちら]

  7. Deploymentログ・ウィンドウで、ADF Library JARファイルを含むデプロイメント・フォルダの場所を確認します。

    tell me more iconIDE内

    宣言的なコンポーネントの定義プロジェクトをADF Library JARファイルに配置すると、デプロイメント・ログは次のように表示されます。 [ 詳細はこちら]

 

ファイル・システム接続の作成とプロジェクトへのADF Library JARの追加

tell me more iconファイル・システム接続の作成とプロジェクトへの ADF Library JARの追加

宣言的なコンポーネントのような再使用できるコンポーネントを含んだADF Library JARファイルを共有するには、ほかの開発者がアクセスしてプロジェクトにインポートできるようにするために、JARファイルをリポジトリに保存する必要 があります。 宣言的なコンポーネントのADF Library JARのためにリポジトリを準備するには、ファイル・システム接続を使用します。 [ 詳細はこちら]

  1. Viewthen chooseResource Palette」の順に選択し、リソース・パレットを開きます。
  2. リソース・パレットで、「 IDE Connections」パネルを展開します。 Create File System Connectionダイアログを開きます(「 File」→「 New」→「 General」 →「 Connections」→「 File System Connection」)。

    tell me more iconリソース・パレット

    リソース・パレットでは、ADF Library JARファイルを配布および使用する簡単で効率的な手段を提供します。 ADF Library JARをリソース・パレットに追加すると、ほかの開発者が検索してプロジェクトに追加できるようになります。 [ 詳細はこちら]

  3. Create File System Connectionダイアログで、「 IDE Connections 」を選択します。
  4. 接続名として DeclarativeComponentsと入力します。
  5. Directory Path の横に表示されている「 Browse 」をクリックして、宣言的なコンポーネントの定義プロジェクト を配置した際に作成された デプロイメント・フォルダを検索し、選択します。
  6. Test Connection 」をクリックし て、接続性をテストします。 「 OK 」をクリックします。
  7. リソース・パレットで「 File System 」ノードを展開し、 次に、作成したばかりの「 DeclarativeComponents 」接続を 展開して、配置したADF Library JARファイルの adflibDeclarativeComponents1.jarを 表示します。
  8. アプリケーション・ナビゲータで、アプリケーション・ドロップダウン・リストからアプリケーション「 MyWebApp 」を選択して、宣言的なコンポーネントを使用するアプリケーションに切り 替えます。 アプリケーションで、JSFページを収容する ViewControllerプロ ジェクトを選択します。
  9. リソース・パレットで、ADF Library JARファイル「 adflibDeclarativeComponents1.jar 」 を右クリックし、「 Add to Project 」を選択しま す。 Confirm Add ADF Libraryダイアログで、「 Add Library 」 をクリックします。

    tell me more iconADF Library JARが追加されたプロジェクト

    ADF Library JARを使用するプロジェクトにADF Library JARを追加すると、Oracle JDeveloperは宣言的なコンポーネントを含むタグ・ライブラリをプロジェクトのJSPタグ・ライブラリのリストに追加します。 [ 詳細はこちら]


    tell me more iconIDE内

    ADF Library JARにファイル・システム接続を作成すると、リソース・パレットは次のように表示されます。 [ 詳細はこちら]

 

ページの作成と宣言的なコンポーネントの追加

tell me more iconページの作成と宣言的なコンポーネントの追加

宣言的なコンポーネントを使用するWebページは、宣言的なコンポーネントが定義されるプロジェクトに存在できません。 MyWebAppアプリケーションの ViewControllerプ ロジェクトでWebページを作成します。 [ 詳細はこ ちら]

  1. アプリケーション・ナビゲータで、ADF Library JARファイルを追加された「 ViewController 」 プロジェクトを展開します。 次に、「 Web Content | Page Flows 」 を展開し、「 taskflow iconadfc-configを ダブルクリックしてデフォルトのページ・フロー・ダイアグラムを開きます。

    tell me more iconadfc-config.xml

    adfc-config.xmlファイルは、 Fusion Web Applicationテンプレートをベースにアプリケーションを作成した際の、Oracle JDeveloperによるデフォルトのページ・フロー・ダイアグラムです。 adfc-config.xmlは、無制限のタス ク・フローのデフォルトのファイル名です。 このダイアグラムに、新しいページを作成できます。 [ 詳細はこちら]

  2. コンポーネント・パレットの ADF Task Flowページの Componentsパネルで、「 jsf page iconViewをクリックし、次にダイアグラムをクリックしてページ・アイコンをダイアグラムに追加します。 デフォルトのページ名を myPageに変更します。
  3. ページ・フロー・ダイアグラムでページ・アイコンをダブルクリックし、Create JSF Pageダイアログを開きます。 「 Page Implementation 」を展開します。 D o Not Automatically Expose UI Components in a Managed Bean チェックボックスが選択されていることを確認します。 「 OK 」 をクリックします。
  4. コンポーネント・パレットの ADF Facesページの Layoutパネルで、ビジュアル・エディタのページ上で「 flowlayout iconPanel Group Layoutをドラッグ・アンド・ドロップします。
  5. プロパティ・インスペクタの Commonセクションで、 Layoutプロパティの値を scrollに 変更します。
  6. コンポーネント・パレットで、ドロップダウン・リストから「 MyDeclComponents 」 を選択します。 (MyDeclComponentsは、以前に作成したタグ・ライブラリで、宣言的なコンポーネントを含んでいます)宣言的なコンポーネント「 MyMenubar 」をページ上のパネル・グループのレイアウト・コンポーネントにドラッ グ・アンド・ドロップします。

    tell me more iconページの宣言的なコンポーネント

    ページに宣言的なコンポーネントを追加する方法は、ほかのADF Facesコンポーネントを追加する方法と同じです。 コンポーネント・パレットから宣言的なコンポーネントを選択し、ページ上の希望の場所にドロップします。 [ 詳細はこちら]

  7. the save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

    ページの作成および宣言的なコンポーネント追加ステップが完了すると、ビジュアル・エディタは次のように表示されます。 [ 詳細はこちら]

 

ページの宣言的なコンポーネントの変更

tell me more iconページの宣言的なコンポーネントの変更

ページの宣言的なコンポーネントの使用は、ほかのADF Facesコンポーネントの使用と同じです。 宣言的なコンポーネントを変更する場合、設計ツール、つまりStructureウィンドウとプロパティ・インスペクタを自由に組み合わせて使用できます。 [ 詳細はこちら]

  1. Structureウィンドウで、宣言的なコンポーネント「 mc:myMenubar 」 を選択します。
  2. プロパティ・インスペクタで、 MenuLabelプロパティとして Helloと 入力し、[Enter]を押します。 Method1フィールドの横に表示されている down arrow iconドロップダウン・メニューか ら「 Edit 」を選択します。
  3. Edit Propertyダイアログで、 Managed Bean ド ロップダウン・リストの横に表示されている「 New 」をクリック して、ダイアログを開きます。 Bea n Name フィールドに myBean Class Name フィールドに MyBeanと入力します。 Generate Class If It Does Not Exist ボッ クスが選択されていることを確認します。 「 OK 」をクリックします。

    tell me more iconJSFマネージド Bean

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

  4. Edit Propertyダイアログで、 Me thod ドロップダ ウン・リストの横に表示されている「 N ew 」をクリックして、 Create Methodダイアログを開きます。 Method Name フィー ルドに myMethodと入力します。 「 OK 」を クリックします。
  5. OK 」をクリックして、Edit Propertyダイアログを閉じます。
  6. エディタ・ウィンドウで、最上部の「 java iconMyBean.javaド キュメント・タブをクリックして、Javaソース・エディタを前面に表示します。 Oracle JDeveloperによって自動的に生成されたメソッドにコードを追加します。
    code sample icon サ ンプル・コードを使用してください
  7. faces page iconmyPage.jspxド キュメント・タブをクリックして、ビジュアル・エディタを前面に表示します。 必要に応じて、それぞれのウィンドウ下部の「 Design 」タブをクリックします。
  8. Structureウィンドウで、宣言的なコンポーネント「 mc:myMenubar 」 を展開し、次に、ファセット・ノード「 MyMenubar facets 」を展 開して、定義済みのファセット moreMenusを表示します。 コンポーネント・パレットの ADF Facesページの Common Componentsパネルで、「 menu iconMenumoreMenusファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Textプロパ ティとして Editと入力します。

    tell me more iconグループ使用の制限

    通常、 af:group内のメニュー・コンポーネントをグループ化することにより、メニュー間でセパレータを使 用できます。 [ 詳細はこちら]

  9. 追加したばかりのメニュー・コンポーネントに、「 menu item iconMenu Itemをドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセ クションで、 Textプロパティとして Cutと入力します。
  10. 別の「 menu item iconメニュー項 目をStructureウィンドウの menu icon af:menu - Edit要素にドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセ クションで、メニュー項目の Textプロパティ値として Copyと 入力します。
  11. the save all iconSave Allをクリックして作業内容を保存します。
  12. エディタ・ウィンドウで、「 taskflow iconadfc-config.xmlド キュメント・タブをクリックして、そのページ・フロー・ダイアグラムを前面に表示します。 ダイアグラムで、「 myPage 」 ページ・アイコンを右クリックして、「 R un 」を選択します。

    tell me more iconIDE内

    ページ上の宣言的なコンポーネント変更ステップが完了すると、ビジュアル・エディタは次のように表示されます。 [ 詳細はこちら]