宣言的な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コンポーネントの場合と同様に、宣言的なコンポーネントをページに挿入します。

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

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

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

   アプリケーション・テンプレート

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

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」）。
8. 「 Distributed Libraries 」フォルダを選択し て、「 Add 」をクリックします。
9. Choose Tag Librariesダイアログで「 ADF Faces Components 11-ji3 」を選択し、「 OK 」をクリックします。
   

   JSPタグ・ライブラリ

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

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

    IDE内

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

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

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

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

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

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

   IDE内

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

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

   IDE内

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

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

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

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

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

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

   EL式

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

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

   IDE内

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

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

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

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

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

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

   ADF Library JARファイル

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

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

   IDE内

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

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

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

   リソース・パレット

   リソース・パレットでは、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 」 をクリックします。
   

   ADF Library JARが追加されたプロジェクト

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

   
   

   IDE内

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

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

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

   adfc-config.xml

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

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

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

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

7. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

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

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

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

   JSFマネージド Bean

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

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

   グループ使用の制限

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

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

    IDE内

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