このセクションでは、スタータ・アプリケーションを開いて、作成予定の追加ページに使用するページ・テンプレートを作成します。ページ・テンプレートを作成するには、以下の手順を実行します。

1. Applicationsウィンドウで「Open Application」をクリックします。

   
   

2. Open Application(s)ダイアログで、アプリケーションの解凍先フォルダを見つけて「ADF_Faces_Tutorial.jws」を選択します。「Open」をクリックします。
   
   
   


Applicationsウィンドウにアプリケーションがロードされます。

3. Applicationsウィンドウで、「View Controller」プロジェクトを右クリックして、コンテキスト・メニューから「New」→「ADF Page Template」を選択します。
   
   
   

4. Create ADF Page Templateダイアログで、テンプレート・ファイル名にstoretemplate.jsfと入力します。「Next」をクリックします。
   
   
   
   「Next」を再度クリックして、空のテンプレートからテンプレートを作成します。

5. Facet DefinitionsタブでAdd「」ボタンをクリックし、ファセットのNameにcenterを入力します。

   
   

6. 「Attributes」セクションでAdd「」ボタンをクリックして、Nameにtitle、Default ValueにDefault Titleを入力します。
   
   
   
   
   「Next」、「Finish」の順にクリックしてテンプレートの作成を完了します。

   設計エディタでstoretemplate.jsfテンプレート・ページが開きます。

   
   
   

7. ADF Faces Componentsウィンドウの「Layout」ノードを開いて、「Decorative Box」を設計ビューの空のページにドラッグします。

   
   
   
   
   

   PropertiesウィンドウのStyle and Themeカテゴリで、Themeプロパティを「light」に設定します。
   
   

8. Decorative Boxには2つのファセットがあり、設計ビュー内では破線と'top'、'center'という単語で表示されます。ComponentsウィンドウのLayoutカテゴリから、「Panel Grid Layout」をtopファセットにドラッグ・アンド・ドロップします。
   
   

9. Panel Grid Layoutダイアログ・ボックスで、列を「2」、行を「1」に設定して「Next」をクリックします。

   
   

10. 列1のグリッド幅を250ピクセル（px）、列2のグリッド幅を100ピクセル（px）に設定して「Finish」をクリックします。
    
    
    

11. Applicationsウィンドウで、「Web Content」ノードと「images」ノードを展開します。「branding_logo.jpg」をパネル・グリッド・レイアウトの最初のセルにドラッグします。



メニューで、「ADF Faces Image」を選択します。




12. ComponentsウィンドウのText and Selectionセクションから、パネル・グリッド・レイアウトの2番目のグリッド・セルに「Output Text」コンポーネントをドロップします。
    
    
    

13. これは、レイアウト内のコンポーネントの配置場所が正確にわからない場合です。出力テキスト・コンポーネントの配置を確認するには、「Structure」ウィンドウを展開し、af:outputTextコンポーネントを見つけます。
    
    必要に応じてStructureウィンドウ内でドラッグ・アンド・ドロップし、af:outputTextコンポーネントが2番目のaf:gridCellコンポーネント内に配置されていることを確認します。
    
    
    

14. Structureウィンドウまたはビジュアル・エディタで、「outputText」コンポーネントを選択します。PropertiesウィンドウでValueプロパティを見つけます。「Property Menu」アイコンをクリックして、「Expression Builder...」を選択します。
    
    
    

15. Expression Builderダイアログで「Scoped Variables」と「attrs」を展開し、「title」を選択して式を「#{attrs.title}」に設定します。
    「OK」をクリックします。
    
    
    

16. Componentsウィンドウで「Layout」ノードを展開し、Core Structureセクションまでスクロール・ダウンします。「Facet Definition」をcenterファセットにドラッグ・アンド・ドロップします。

    

    Insert Facet Definitionダイアログで、ファセット名として「center」を選択し、「OK」をクリックします。

    

17. JDeveloperメニュー・バーのSave All「」アイコンをクリックするか、メニューから「File」→「Save All」を選択してページを保存します。
    

テンプレートを作成したら、新しいページを作成し、ページのデフォルト構造としてテンプレートを使用できます。次のステップを実行します。

1. 「ViewController」プロジェクトを右クリックして、「New」→「Page...」を選択します。

   
   

2. Create JSF Pageダイアログで、ファイル名を「products.jsf」に変更し、Document Typeが「Facelets」に設定されていることを確認します。「Reference ADF Page Template」ラジオ・ボタンを選択して、「Storetemplate」テンプレートを選択します。「OK」をクリックします。




3. Applicationsウィンドウに新規ノードとしてproducts.jsfが表示され、storetemplate.jsfテンプレートを使用するDesignエディタが開きます。



設計エディタで視覚的にレンダリングされず、一連のネストされたボックスが表示される場合は、ワークスペースを閉じてもう一度開きます。

4. Componentsウィンドウから、「Layout」ライブラリを展開し、「Panel Splitter」コンポーネントをcenterファセットにドラッグ・アンド・ドロップします。
   
   

   ADF Facesには、Panel Splitterの他にも、ページ上のその他のコンポーネントの配置に使用できるレイアウト・コンポーネントが多数あります。詳細表示
   
   通常は、これらのレイアウト・コンポーネントを使用してページ構築を開始します。次に、ファセット内で、またはこれらのレイアウト・コンポーネントの子コンポーネントとして、その他の機能（表やフォームとしてのデータのレンダリングなど）を提供するコンポーネントを追加します。ADF Facesには、単にコンテナとして機能するレイアウト・コンポーネントの他に、対話型レイアウト・コンポーネントもあります。このコンポーネントでは、コンテンツを表示/非表示にしたり、セクション、リスト、空の領域を提供したりすることができます。レイアウト・コンポーネントには、ジオメトリ管理機能（ウィンドウのサイズ変更時にブラウザ・ウィンドウに合わせてコンテンツを拡張する機能）や、拡張するコンポーネント内への配置時に拡張される機能もあります。レイアウト・タイプやコンポーネントの一部を以下に示します。
   
   ページ・レイアウト・コンテナ
   - panelStretchLayout：他のコンポーネントを配置できるtop、bottom、start、center、およびendファセットが含まれます。
   - panelSplitter：再配置可能なディバイダで、領域を2つの部分（firstファセットとsecondファセット）に分割します。ファセット内に他のコンポーネントを配置できます。
   - panelDashboard：子コンポーネント（通常はpanelBoxコンポーネント）が縦欄式で表示されます。
   - panelGridLayout：1つ以上のgridRowの子コンポーネントを使用して、グリッド・レイアウト構造の高さと余白を定義します。各gridRowコンポーネントでは、gridCellの子コンポーネントを使用して、グリッド・レイアウトの列の幅、列間隔、余白、その他が定義されます。
   - panelFormLayout：入力フォーム・コントロール（inputTextコンポーネントなど）のラベルやフィールドが縦に並ぶように配置されます。複数の列がサポートされ、フッター・ファセットが含まれます。
   
   表示/非表示機能があるコンポーネント
   - showDetailHeader：ヘッダーの下のコンテンツを表示/非表示できます。panelHeaderコンポーネントの子コンポーネントとして使用される場合がよくあります。
   - showDetailItem：panelAccordionの別ペインや、panelTabbedコンポーネントの別タブのコンテンツの保持に使用されます。
   - panelBox：子コンポーネントを含めることができるタイトル付きボックスです。toolbarファセットが含まれます。
   - panelAccordion：showDetailItemコンポーネントと一緒に使用され、開閉可能なパネルとして表示されます。
   - panelTabbed：showDetailItemコンポーネントと一緒に使用され、タブ付きパネルのセットとして表示されます。
   

5. 「Panel Accordion」レイアウト・コンポーネントを、パネル・スプリッタの左側の'first'ファセットにドラッグ・アンド・ドロップします。





Panel Accordionコンポーネントがファセットに追加され、ネスト化されたShow Detail Itemも作成されて、アコーディオンの最初のペインのコンテンツが保持されます。


6. 構造ビューまたは設計ビューで「showDetailItem」を選択し、PropertiesウィンドウのCommon領域でshowDetailItemのTextを「My Cart」に設定します。
   
   
   

7. 他のペインをアコーディオンに追加します。この操作を実行するには、構造ビューまたは設計ビューで「My Cart showDetailItem」を右クリックして「Insert After Show Detail Item」→「Show Detail Item」を選択するか、構造ビューまたは設計ビューで「panelAccordion」を右クリックし、「Insert Inside Panel Accordion」→「Show Detail Item」を選択します。
   
   
   
   
   

8. Propertiesウィンドウで、Textプロパティを「Recommendations」に変更します。
   
   
   

9. 別の「Panel Splitter」コンポーネントを、パネル・スプリッタのsecondファセットにドラッグ・アンド・ドロップします。Structureウィンドウを使用して、このアクションを実行したい場合もあるかもしれません。



10. Propertiesウィンドウを使用して、このネストされたパネル・スプリッタのOrientationを「vertical」に設定します。

    

11. 「Panel Collection」コンポーネントを、ネストされた垂直パネル・スプリッタのfirstファセットにドラッグ・アンド・ドロップします。ADF Faces Componentsウィンドウでコンポーネントが見つからない場合は、ウィンドウ上部の検索ボックスを使用して検索できます。
    
    

12. 「Panel Tabbed」コンポーネントを、パネル・スプリッタのsecondファセットにドラッグ・アンド・ドロップします。このコンポーネントは、LayoutカテゴリのInteractive Containers and Headersグループに表示されます。

    

     

13. Structureウィンドウで、Panel Tabbedコンポーネントに自動的に追加された「af:showDetailItem」コンポーネントを選択し、PropertiesウィンドウのTextプロパティにProduct Detailsと入力します。

    
    

14. 「Product Details」タブを右クリックし、ビジュアル・エディタで、コンテキスト・メニューから「Insert After Show Detail Item」→「Show Detail Item」を選択します。

    新しいaf:showDetailItemコンポーネントが選択された状態で、PropertiesウィンドウのTextプロパティにRatingを入力します。

    
    
    

15. 「products.jsf」タブをダブルクリックして、設計ビューを最大化します。ページは次のイメージのように表示されます。
    
    
    

16. すべての作業内容を保存します。次にページの設計ビューの任意の場所を右クリックし、コンテキスト・メニューから「Run」を選択します。最大化されたビューを切り替えるには、「products.jsf」タブを再度ダブルクリックします。
    
    
    

17. このページは、統合されたOracle WebLogic Serverにデプロイされると、ブラウザにロードされます（統合されたWebLogic Serverは、JDeveloperからアプリケーションを初めて実行している場合に、インストールおよび構成されます）。タブを選択したり、Recommendationsパネルを開いたりして、操作を試します。終了したら、ブラウザを開いたままJDeveloperに戻ります。
    
    
    

18. 次のステップでは、ページ・タイトルをカスタマイズして、既存ページでどのように使用されるかを確認します。このプロセスを開始するには、設計エディタでstoretemplate.jsfテンプレート・ページを開きます。
    
    
    

19. 設計ビューまたは構造ウィンドウで、タイトルが含まれる「outputText」コンポーネントを選択します。PropertiesウィンドウのStyleノードで、Font Colorプロパティを任意の色（例ではオレンジ色）に設定します。
    
    

20. Font Sizeプロパティで、ドロップダウン・リストから「large」を選択します。

    
    

21. すべての作業内容を保存します。ブラウザに戻り、ページを再ロードして新しい特性を表示します。
    
    JDeveloperアプリケーションを保存した後、ブラウザ・ウィンドウをリフレッシュすると、バインディング・コンポーネントを更新していない限り、アプリケーションに加えた新しい変更内容が反映されます。ブラウザに変更内容を反映させるには、JDeveloperから、そのページを再実行する必要があります。
    
    
    

22. 設計エディタで「products.jsf」ページを開きます。Structureウィンドウで「af:pageTemplate」タグを選択し、PropertiesウィンドウでTitleプロパティを「Store Front」に設定します。
    
    
    

23. すべての作業内容を保存します。次にブラウザにページを再ロードして、新しい特性を表示します。
    
    

ページ・レイアウトが完了したら、データを追加します。このプロセスの最初のステップは、Products POJO（Plain Old Java Object）からのデータ・コントロールの作成です。次のステップを実行します。

1. ADFデータ・バインディング機能を使用して、既存のPOJOクラスからデータ・コントロールを作成します。
   Applicationsウィンドウで「Model」プロジェクトを展開します。「Application Sources」ノードと「model」ノードを展開します。「Products.java」を右クリックして、コンテキスト・メニューから「Create Data Control」を選択します。
   
   
   

2. Bean Data Controlダイアログの最初のページで、データ・コントロール名を「StoreProducts」に変更して「Next」をクリックします。

   
   
   
   

3. Choose ADF Data Control Featuresページで、「Transactions」と「Custom CRUD」の機能を選択し、「Finish」をクリックします。
   
   
   
   

4. DataControls.dcxファイルが作成され、エディタで開かれます。このレイヤーでUIのヒントと検証を定義できますが、ここではデフォルトのままにして引き続きユーザー・インタフェースを作成します。
   
   
   
   「products.jsf」タブをクリックして、エディタの前面に移動します。
   

5. Applicationsウィンドウで、「Data Controls」アコーディオンを展開し、「StoreProducts」ノードを展開します。Data Controlsパネルの更新アイコンをクリックして、StoreProductsノードを有効化することが必要な場合もあります。
   
   
   
   

6. StoreProductsデータ・コントロールの「products」コレクションを、設計エディタのaf:panelCollectionの中央領域にドラッグ・アンド・ドロップします。ポップアップ・メニューから「ADF Table...」を選択します。
   
   

ADF Faces表コンポーネントを使用して、行/列で構成される表として構造化データを表示できます。詳細表示

表コンポーネントでは、CollectionModelクラスを使用して基盤となる収集のデータにアクセスします。このクラスによってJSF DataModelクラスが拡張され、行のキーとソートのサポートが追加されます。DataModelクラスでは、行はすべてインデックスで識別されます。これが原因で、基盤となるデータがあるリクエストから次のリクエストに変更された場合に問題が発生することがあります。たとえば、ある行の削除をリクエストした場合に別のユーザーが行を追加すると、別の行が削除される可能性があります。

この問題を解決するため、CollectionModelクラスはインデックスではなく行キーに基づいています。表コンポーネントの直接の子は列コンポーネントである必要があります。列の可視コンポーネントは、それぞれ別の列として表に表示されます。列コンポーネントには、コンテンツ、イメージの表示、またはその他の機能の提供に使用されるコンポーネントが含まれます。

各列の子コンポーネントには、その列内の各行のデータが表示されます。列によって行単位の子コンポーネントが作成されることはありません。代わりに表では、スタンピングを使用して各行がレンダリングされます。各子は行ごとに1回スタンプされ、これがすべての行で繰り返されます。各行がスタンプされると、現在の行のデータがプロパティ（EL式を使用してアドレス指定が可能）にコピーされます。表のvarプロパティを使用して、このプロパティに使用する名前を指定します。表でレンダリングが完了すると、このプロパティは削除されるか前の値に戻ります。






7. Create Tableダイアログで、「Row Selection (Single Row) 」オプションを選択し、「Enable Sorting」と「Read-Only Table」のオプションをクリックします。
   「OK」をクリックします。
   
   
   

8. Structureウィンドウで「af:table」コンポーネントを選択し、Propertiesウィンドウで「Behavior」ノードを展開します。EdtingModeプロパティを「clickToEdit」に設定します。Appearanceノードで、ColumnStretchingプロパティを「last」に設定します。
   
   ヒント：プロパティを名前で簡単に見つけるには、Propertiesウィンドウの上部にある検索フィールドにプロパティ名を入力します。
   
   
   
   作業内容を保存します。

9. products.jsfページの設計ビューで、「Product Details」タブを選択して前面に表示します。StoreProductsデータ・コントロールからProduct Detailsタブ・コンポーネントに、「products」コレクションをドラッグ・アンド・ドロップします。ポップアップ・メニューで「ADF Form ...」を選択します。
   
   

10. Create Formダイアログで「Submit」チェック・ボックスを選択して、送信アクションのコントロールを含めます。
    
    
    
    
    「OK」をクリックします。

11. ここで、ADF List Viewコンポーネントを追加します。ListViewコンポーネントでは、oracle.adf.view.rich.model.CollectionModelを使用して基盤となるリストのデータにアクセスします。他のモデル・インスタンス（java.util.List、配列、javax.faces.model.DataModelなど）も使用する場合があります。listViewでは、インスタンスが自動的にCollectionModelに変換されます。
    
    設計ビューの「Recommendations」アコーディオン・ペインを展開します。Data ControlsウィンドウからRecommendationsアコーディオンに、「products」ノードをドラッグ・アンド・ドロップします。ポップアップ・メニューで「Table/List View」→「ADF List View...」を選択します。
    
    
    

12. Create List Viewダイアログで、「Panel Grid Layout」レイアウトを選択して「Next」をクリックします。
    
    
    
    

13. Columnsの行あたりのセル数を「2」に、Rowsの数を「1」に設定します。
    
    
    
    「Next」をクリックします。
    

14. Column 1の幅を「auto」、Column 2の幅を「50 px（ピクセル）」に設定します。
    
    
    
    
    「Next」をクリックします。
    

15. 最初の列の値バインディングをクリックして、「name」項目を選択します。2番目の列の値バインディングを「rating」に設定します。
    
    
    
    「Finish」をクリックします。

16. このページには、productsデータ・コントロールからのデータが3つの異なるバインディング・スタイルで表示されています。すべての行を使用可能にして、3つのバインディングすべてが同期されるようにするには、productsIteratorの範囲サイズを変更します。products.jsfページの「Bindings」タブをクリックします。Executablesセクションで、「productsIterator」を選択します。
    
    

17. Propertiesウィンドウで、RangeSizeプロパティを「-1」に設定します。
    
    

18. すべての作業を保存し、ページを右クリックして「Run」を選択し、ページを再デプロイして再実行します。
    ページには、Recommendationsアコーディオン、表、フォームに商品データが次のように表示されます。
    
    
    

19. 表の列ヘッダーの1つを選択して、表の他の場所に移動します。
    
    
    

20. 「shortdesc」列を使用して、表で列のサイズ変更を試します。「Detach」メニュー・オプションをクリックして、パネルのコンテンツをブラウザ内に独立表示します。
    
    
    
    
    「Detach」オプションを再度クリックして元の表示に戻します。
    

21. Viewメニュー・オプションで一部の列を非表示にします。
    
    
    
    この列は、再表示するまで非表示のままとなります。非表示列の数が、表の下のメッセージに表示されます。列の並べ替えとサイズ変更はADF Faces表コンポーネントの機能で、Viewメニューとその機能、およびDetachボタンはPanel Collectionコンポーネントの一部です。
    
    

22. 次のいくつかのステップでは、ページにイメージやグラフィカル項目をいくつか追加します。
    Product Detailsタブで、フォーム中の「cost」inputText項目を右クリックし、コンテキスト・メニューから「Convert To...」を選択します。
    
    

グラフィカル・コンポーネントを使用して、エンドユーザーがデータを簡単に分析できるようにする、さまざまな方法があります。詳細表示

スライダ・コンポーネントを使用すると、1つまたは2つのマーカーの付いたスライダが表示されます。このマーカーのスライダ上の位置が値と対応します。スライダ値が表示されます。一方の端にマイナス記号アイコン、もう一方の端にプラス記号アイコンがあります。マーカーを選択してスライダに沿って移動し、値を選択します。inputNumberSliderコンポーネントにはマーカーが1つあり、スライダから値を1つ選択できます。

ページ上にイメージを表示するには、イメージ・コンポーネントを使用してソース属性をファイルの場所のURIに設定します。またイメージ・コンポーネントでは、イメージの説明にリンクする方法があり、アクセス可能性がサポートされています。また、イメージ・コンポーネントがgoLinkコンポーネント内に配置されている場合、リンクとして使用してイメージ・マップを含めることもできます。

richTextEditorコンポーネントを使用すると、リッチ・テキスト入力（複数行入力や、フォント、サイズ、行端ぞろえ、その他の編集機能を使用した形式設定が可能）を行うことができます。これは、簡単なテキスト以上の内容を入力する際に必要となる場合があります。たとえば、richTextEditorはWebベースのディスカッション・フォーラムで使用される場合があります。これにより、公開予定のテキストの形式を設定できます。







23. Convertダイアログで、「Input Number Spinbox」を選択して、「OK」をクリックします。
    
    
    
    
    Confirm Convertボックスで「OK」を再度クリックして、不要な属性を削除します。

24. imageLocation属性がinputTextコンポーネントとしてレンダリングされていることを確認します。イメージを表示するには、コンポーネント・スタイルを変更します。Product Detailsタブで、「imageLocation」項目を右クリックし、コンテキスト・メニューから「Convert To...」を選択します。Convertダイアログで、「Image」を選択して、「OK」をクリックします。



Confirm Convertボックスで「OK」を再度クリックして、不要な要素と属性を削除します。



25. 新しいimageコンポーネントを選択したまま、Propertiesウィンドウに移動し、sourceプロパティの横でプロパティ・メニュー・アイコンをクリックして、ドロップダウン・リストから「Expression Builder」を選択します。
    
    
    

26. Expression Builderダイアログで、Expressionテキスト領域にimages/products/と入力します。残りの式を作成するには、「ADF Bindings」、「bindings」、「imageLocation」を展開します。「inputValue」を選択して式を生成し、「OK」をクリックします。
    
    
    

27. Product Detailsタブで「rating」コンポーネントを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。Convertダイアログで、「Slider (Number)」を選択して、「OK」をクリックします。
    
    
    
    
    「Confirm Convert」ボックスで再度「OK」をクリックします。
    
    

28. Product Detailsタブで「shortDesc」コンポーネントを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。Convertダイアログで、「Rich Text Editor」を選択して、「OK」をクリックします。
    
    
    
    
    「Confirm Convert」ボックスで再度「OK」をクリックします。
    
    

29. StructureウィンドウのProduct Detailsタブで、「panelFormLayout」を選択します。Propertiesウィンドウで、Rowsプロパティに6と入力し、7番目の行項目（imageLocation）がpanelFormLayoutの2番目の列にラップされるようにします。Product Detailsタブは次のように表示されます。
    
    
    

30. すべての作業内容を保存します。ブラウザに戻ってページを再ロードします。
    
    

31. ratingスライダとcostスピンボックスの移動、およびRich Text Editorの使用を試します。商品表のいずれかの行を選択すると、Product Detailsタブの行の通貨が自動的に変わります。これは、ADF Data Bindingレイヤーによって処理されます。

操作コンポーネントとは、アプリケーションに操作機能を提供するコンポーネントです。このセクションでは、メニュー、ポップアップ、および印刷可能なページを作成し、ユーザーがショッピング・カート領域に商品をドラッグ・アンド・ドロップできるようにします。このタイプの機能を実装するには、次の手順を実行します。

1. アプリケーションにメニューを実装するには、表のパネル・コレクションにメニューを追加します。products.jsfページの設計エディタで、パネル・コレクションの「menu」ファセット内を右クリックし、コンテキスト・メニューから「Insert inside Facets menus」→「Menu」を選択します。

   
   

2. Propertiesウィンドウで、メニューのTextプロパティを「My Options」に設定します。

Behaviorカテゴリで、Detachableプロパティを「true」に設定します。




3. 「My Options」メニューを右クリックして、コンテキスト・メニューから「Insert inside Menu」→「Menu Item」を選択します。
   
   

4. Propertiesウィンドウで、Textプロパティを「Export to Excel」に設定します。

   
   

5. Structureウィンドウで「af:commandMenuItem」コンポーネントを右クリックして、コンテキスト・メニューから「Insert after Menu Item」→「Menu Item」を選択します。
   
   

6. Propertiesウィンドウで、このメニュー項目のTextプロパティを「Show Specials」に設定します。

   
   
   

7. Componentsウィンドウで「Operations」ノードを展開し、Listenersカテゴリを検索します。「Export Collection Action Listener」コンポーネントを、Structureウィンドウのメニュー項目Export to Excelにドラッグします。
   
   

Insert Export Collectionダイアログで、ExportedIdにt1（t1は表のID）を入力し、Typeの「excelHTML」を選択します。



「OK」をクリックします。


8. すべての作業を保存し、ブラウザに戻ってページを再ロードします。「My Options」メニュー・オプションをクリックし、メニュー・バーからメニュー・オプションを分離できることを確認します。
   
   
   
   

9. 「Export to Excel」メニュー・オプションを選択します。
   
   
   

10. ブラウザによっては、ダイアログが表示され、このファイルをどうするかを尋ねられます。ファイルをExcelで開くか、保存することができます。
    
    

    「Open with 」を選択してExcelで表を表示し（Excelがインストールされている場合）、「OK」をクリックします。
    
    表がエクスポートされていることを確認し、必要に応じてExcelを閉じます。

11. ここで、products.jsfページにポップアップ・ウィンドウを作成します。Structureウィンドウで、一番上の「af:form」コンポーネントを選択します。
    
    /
    
    

12. Componentsウィンドウで「Layout」カテゴリを展開し、Secondary Windowsセクションを見つけます。Structureウィンドウで「Popup」コンポーネントをformコンポーネントにドラッグします。設計ビューが変更され、ポップアップを視覚的に編集できるようになります。
    
    

他の多くのADF Facesコンポーネントが含まれるポップアップ・コンポーネントを使用して、エンドユーザーからの情報やリクエスト入力を提供するさまざまなダイアログ、メニュー、ウィンドウを作成できます。詳細表示

これらのコンポーネントを使用して、エンドユーザーがセカンダリ・ウィンドウで情報の表示/非表示を切り替えたり、追加データを入力したり、他の機能を起動したりするための機能を構成できます。これらのコンポーネントの機能を使用して、プライマリ・インタフェースでレンダリングしたコンテンツを補完するコンテンツや機能をレンダリングできるため、すっきりしたユーザー・フレンドリーなインタフェースを開発できます。

ポップアップ・コンポーネントは非表示のレイアウト・コントロールで、他のコンポーネントと組み合わせて使用され、（同じページに属する）インライン・ダイアログ、ウィンドウ、メニューを表示します。ポップアップ・コンポーネントはプライマリ・インタフェース内から起動されます。アプリケーションによって、ポップアップ・コンポーネントでレンダリングされるコンテンツ（プライマリ・インタフェース内のコンテンツなど）が、ポップアップ・ブロッカにより妨害されることなく管理されます。ポップアップ・コンポーネントでレンダリングするコンテンツ・タイプは、HTMLにすることを推奨します。他のタイプのコンテンツ（FlashやPDFファイルなど）は、ポップアップ・コンポーネントで正しくレンダリングされない場合があります。






13. Designビューでポップアップ内を右クリックし、コンテキスト・メニューから「Insert inside Popup」→「Dialog」を選択します。
    
    
    
    

14. Componentsウィンドウで「General Controls」カテゴリを展開して、「Image」コンポーネントを「Dialog」にドラッグします。
    
    
    

15. Insert Imageダイアログで、ソース・プロパティの横の「Property」メニュー・アイコンをクリックし、「Edit」を選択します。イメージ・ディレクトリを展開して、ソースとして「JDeveloper.gif」イメージを選択します。
    
    
    
    「OK」をクリックします。「Yes」をクリックしてアプリケーションのリソース・ディレクトリでgifイメージを再配置し、「Save」をクリックしてデフォルトの場所に保存します。
    再度「OK」をクリックします。
    

16. ダイアログの外側の灰色の領域をクリックして、メイン・ページの設計ビューに戻ります。Designビューで「My Options」メニュー項目を選択し、Structureウィンドウでコンポーネントを前面に表示します。

Componentsウィンドウで「Operations」カテゴリを展開し、Behaviorセクションで「Show Popup Behavior」コンポーネントをStructureウィンドウの「commandMenuItem」→「Show Specials」コンポーネントにドラッグします。





17. Propertiesウィンドウで、PopupIdプロパティの横の「Property Menu」アイコンをクリックし、「Edit」を選択します。
    
    

18. Edit Propertyダイアログで、「document」ノードと「form」ノードを展開します。「popup - p1」コンポーネントを選択して「OK」をクリックします。
    
    

19. ファイルを右クリックして「Run」を選択し、ページを再実行します。
    「My Options」メニューをクリックし、「Show Specials」を選択します。

    

    JDeveloperイメージが含まれるポップアップ・ダイアログが表示されます。
    
    

20. ここで、Product DetailsタブとMy Cartアコーディオンの間にドラッグ・アンド・ドロップ機能を追加し、簡単なドラッグ・アンド・ドロップ操作で、Product Detailsから商品を効率的にカートに入れられるようにします。
    Componentsウィンドウで、ADF FacesライブラリからOutput Textコンポーネントを見つけます。このコンポーネントをMy Cartアコーディオン・ペインにドラッグします。

    

    Propertiesウィンドウで、Valueプロパティを「No Items」に設定します。

    
    

21. 商品表で「name」出力テキスト・コンポーネントを選択し、設計ビューの前面に表示します。Componentsウィンドウで「Operations」カテゴリを展開し、Drag and Dropセクションを見つけます。「Attribute Drag Source」コンポーネントを選択してname出力テキスト・コンポーネントにドロップします。Attribute Drag Sourceが、列ではなくname出力テキストにドロップされていることを確認します。確認できない場合は、Structureウィンドウを使用します。
    
    

Insert Attribute Drag Sourceダイアログで、ドロップダウン・リストから「value」を選択します。



「OK」をクリックします。

22. Componentsウィンドウから、「Attribute Drop Target」コンポーネントをNo Items出力テキスト・コンポーネントにドラッグ・アンド・ドロップします。

    

    Insert Attribute Drop Targetダイアログで、Attributeプロパティの「value」を選択します。
    
    
    
    「OK」をクリックします。

23. すべての作業を保存し、ブラウザでページを再ロードします。商品表で名前の値を選択し、My CartのNo Itemsテキストにドラッグ・アンド・ドロップします。
    
    
    
    
    商品名がカートに追加されます。
    
    

24. ここで、メニュー・オプションを追加して最新の表情報を取得し、印刷可能なページに表示します。JDeveloperでは、他の「Menu Item」をMy Optionsメニューに追加して、Textプロパティを「Printable Page」に設定します。
    
    

25. これで、Componentsウィンドウでコンポーネントを見つけて設計ウィンドウやStructureウィンドウにドラッグし、ページの正しい場所にコンポーネントを追加する方法がおわかりになったと思います。また多くの場合、設計ウィンドウやStructureウィンドウでコンポーネントを選択して、コンポーネントを追加する場所を明確にするのが最善であることも理解できたと思います。
    
    作成したメニュー・コンポーネントにShow Printable Page Behaviorコンポーネントをドロップします。
    
    

26. 次のいくつかのステップでは、ポップアップ・ページを追加してカルーセルを使用して商品を表示します。
    
    

    回転するカルーセルにイメージを表示できます。詳細表示
    
    一連のイメージ（レコードごとに1つ）を表示できます。下部のスライダを使用するか補助イメージの1つをクリックして特定のイメージを前面に移動することによって、前面のイメージを変更できます。
    
    デフォルトでは、カルーセルは横に表示されます。カルーセルの横方向内のオブジェクトは、中央に縦に配置され、カルーセル自体はそのコンテナの中央に横に配置されます。
    
    参照"ローロデックス"が必要な場合は、カルーセルが縦に表示されるよう構成できます。デフォルトでは、カルーセルの縦方向内のオブジェクトは中央に横に配置され、カルーセル自体は中央に縦に配置されます。カルーセルの位置合せ属性を使用して、位置合せを変更できます。
    
    
    

    「Popup」コンポーネントを、ComponentsウィンドウからStructureウィンドウの最初のaf:formコンポーネントにドラッグします。

    
    
    

27. 新しい「af:popup」を右クリックして、「Insert Inside Popup」→「Dialog」を選択します。
    
    
    
    

28. Propertiesウィンドウで、Typeプロパティを「ok」に設定します。
    
    
    

29. Data Controlsウィンドウで「StoreProducts」を展開し、「products」コレクションを設計ビューのダイアログにドロップします。メニューから「Carousel」を選択します。
    
    
    

30. 「Image」コンポーネントをカルーセル項目コンポーネント内にドラッグします。
    
    
    
    Insert Imageダイアログで、Sourceプロパティの値として/images/products/#{item.imageLocation}と入力します。
    
    
    
    「OK」をクリックします。
    

31. ポップアップの外側の灰色の領域をクリックして、products.jsfのメイン設計ビューに戻ります。
    Structureウィンドウで、panelCollectionの「viewMenu」ファセットを見つけます（panelCollectionは商品表コンポーネントの親コンポーネント）。
    「viewMenu」ファセットを右クリックして、「Insert inside f:facet - viewMenu」→「Menu Item」を選択します。
    
    
    

32. Propertiesウィンドウで、Textプロパティを「View As Carousel」に設定します。
    
    
    

33. 「Show Popup Behavior」コンポーネントをView As Carouselメニュー項目にドロップします。
    
    
    

34. Propertiesウィンドウで、PopupIdプロパティ・メニューから「Edit」を選択します。
    
    
    

35. Edit Propertyダイアログで「document」ノードと「form」ノードを展開し、「popup - p2」コンポーネントを選択します。
    
    
    
    
    「OK」をクリックします。
    

36. すべての作業を保存し、ページを再実行します。ブラウザに表示されたら、「My Options」→「Printable Page」メニューをクリックします。ページの表コンポーネントがブラウザの別タブに表示され、プリンタに送信できる状態になります。
    
    
    

37. 印刷可能なビューを閉じて、Viewメニューから「View As Carousel」を選択します。
    
    
    

ゲージを追加して特定の商品の評価を表示します。このゲージを作成するには、次の手順を実行します。

1. products.jsfページの設計ビューで、「Rating」タブをクリックします。

   
   

2. データ・コントロール・ウィンドウで「StoreProducts」と「products」を展開し、「rating」属性を設計エディタの「Rating」タブにドラッグします。ポップアップ・メニューから「Gauge...」を選択します。
   
   
   
   

3. Component Galleryダイアログで「Dial」カテゴリを選択し、ゲージ・タイプとして「Dial with Thresholds」を選択します。一番左の「Quick Start Layouts」を選択します。
   
   
   
   「OK」をクリックします。
   

4. Create Dial Gaugeダイアログで、Maximum Valueフィールドを「10」に設定します。
   
   最小しきい値（threshold1）を「1」に設定します。
   中間しきい値（threshold2）を「5」に設定します。
   最高しきい値（threshold3）は「Maximum」のままにします。



「OK」をクリックします。

5. Propertiesウィンドウで、GaugeコンポーネントのShortDescプロパティを「rating gauge」に変更します。

   
   

6. 作業を保存し、ブラウザでページを更新します。ゲージに、現在（最初）の商品の現在の評価値が表示されます。
   
   

7. 「Product Details」タブをクリックし、スライダを移動して、評価値を変更します。

   

    

8. 「Submit」をクリックしてから「Rating」タブをクリックし、新しい値が表とゲージに反映されていることを確認します。表で別の評価の商品が選択されている場合、ゲージは変更されません。次の手順でこれを修正します。

   
   
   
   ステップ6：部分ページ・レンダリングの実装

   表の行の選択時にゲージを更新するには、Partial Page Renderingの操作を明示的に定義する必要があります。このためには、次の手順を実行します。
   

   部分ページ・レンダリングの目的は、Webページのインタラクティビティ、速度、ユーザビリティの向上です。詳細表示
   
   Ajax（Asynchronous JavaScript and XML）は、対話型Webアプリケーションを作成するためのWeb開発技法です。Ajaxでは、Webページ全体を再レンダリングするのではなく、サーバーを使用して少量のデータがやり取りされるため、Webページの応答性が向上します。
   
   ADF FacesでAjaxの部分ページ・レンダリング動作を提供する機能は、部分ページ・レンダリング（PPR）と呼ばれます。PPRによって、ページ上の特定のコンポーネントを再レンダリングできます（ページ全体の再レンダリングが不要です）。たとえば出力コンポーネントで、ページ全体を再レンダリングせずに、入力コンポーネントで選択/入力した内容を表示できます。PPRが機能するには、ライフ・サイクルを境界内のコンポーネントでのみ実行できるページに、境界を設定する必要があります。境界を決定するには、フレームワークに対して、処理するルート・コンポーネントを通知する必要があります。ルート・コンポーネントは、次の2つの方法で識別できます。
   
   - イベント：特定のイベントでは、コンポーネントがルートとして示されます。たとえば、showDetailコンポーネントの開閉時に開示イベントが送信される場合は、showDetailコンポーネントがルートであることを意味します。showDetailコンポーネントが開閉された場合、そのコンポーネントだけがライフ・サイクルを経由します。また、ツリー上のノードや表のソート・イベントを開く際の開示イベントによっても、ルート・コンポーネントを識別できます。
   
   - コンポーネント：特定のコンポーネントは境界、すなわちルート・コンポーネントとして認識されます。たとえば、フレームワークではポップアップ・ダイアログが境界と認識されます。ダイアログ内でイベントがトリガーされても、ライフ・サイクルがダイアログ外のコンポーネントで実行されることはありません。ポップアップのみで実行されます。
   
   組込みのPPR機能の他に、コンポーネントを構成してコンポーネント間レンダリングを使用できます。これにより依存性を設定して、1つのコンポーネントをトリガー、他のコンポーネントをリスナーとして動作させることができます。トリガー・コンポーネントでイベントが発生すると、ライフ・サイクルはリスナー・コンポーネントとリスナーの子コンポーネントでのみ実行され、リスナー・コンポーネントとその子コンポーネントのみが再レンダリングされます。コンポーネント間レンダリングは、宣言的に実装できます。ただしデフォルトでは、トリガー・コンポーネントからのイベントはすべてPPRとなります（一部のコンポーネント（表など）では、そのイベントのサブセットでのみ部分ターゲットがトリガーされます）。このように、PPRを起動するイベントを厳密に制御する必要がある場合や、何らかのロジックを使用してターゲットを特定したい場合は、PPRをプログラムによって実装できます。
   

   1. JDeveloperで、設計ビューの評価ゲージ・コンポーネントを選択します。Propertiesウィンドウで、「Behavior」カテゴリを展開します。PartialTriggersプロパティの「Property」メニュー・アイコンをクリックし、「Edit」を選択します。

      
      
      
      

   2. Edit Propertyダイアログで、「document」、「form」、「pageTemplate」、「facet (center)」、「panelSplitter - ps1」、「facet (second)」、「panelSplitter - ps2」、「facet (first)」、および「panelCollection」コンポーネントを選択します。「table* - t1」コンポーネントを選択し、「Selected」ペインに移動します。これで、ゲージの更新をトリガーするものが定義されます。
      
      
      
      「OK」をクリックします。
      

   3. すべての作業を保存し、ブラウザでページを再ロードします。「ratings」タブをクリックし、表の別の行を選択してゲージを更新します。
      
      
      

最後に、別のスキンを使用して、アプリケーション全体のルック・アンド・フィールを変更する方法について説明します。この機能を実装するには、以下の手順に従います。

1. Applicationsウィンドウで「Web Content」→「WEB-INF」ノードを展開し、「trinidad-config.xml」ファイルをダブルクリックしてエディタで開きます。

   
   

2. このファイルでは、スキン・ファミリー要素で使用されるスキンが定義されます。skin-familyを「simple.desktop」に変更します。カスタム・スキン作成を最初に始める際には、simpleスキンがよく選択されます。
   
   
   

3. すべての作業を保存し、ブラウザでページを更新します。アプリケーションのルック・アンド・フィールが変更されたことに注意してください。
   
   
   
   
   
   終了したら、ブラウザ・ウィンドウを閉じます。これでこのチュートリアルは完了です。
   
   

このチュートリアルでは、ページ・テンプレートの開発、テンプレートに基づくページの作成、ページへのデータ・コントロールの追加、DVTコンポーネントの追加、部分ページ・レンダリングの使用、およびスキンを使用したページのルック・アンド・フィールの変更を行いました。このチュートリアルで学習した内容は、以下のとおりです。

• ページ・テンプレートの作成
• ページ・テンプレートを使用したページの設計
• 入力コンポーネントと出力コンポーネントの使用
• 操作コンポーネントの使用
• Oracle ADFデータ可視化コンポーネントの使用
• 部分ページ・レンダリングの実装
• スキンを使用したアプリケーションのルック・アンド・フィールの変更

レイアウト・コンポーネント、メニュー、ツールバー、操作コンポーネント、およびデータ可視化コンポーネントの使用について詳しくは、以下を参照してください。

• Oracle Application Development FrameworkによるFusion Webアプリケーションの開発
• Oracle ADF FacesによるWebユーザー・インタフェースの開発
• ADF Insider Recorded Sessions