レイアウト・コンポーネントの使用

ページ・レイアウトの希望どおりの作成は、Oracle JDeveloperのIDEを使用して、さまざまなレイアウト・コンポーネントを挿入およびネストすることによって実現できます。

新規アプリケーションの作成：Create Applicationウィザードを使用して、汎用アプリケーションを作成します。

JSFページの作成：Create JSF Pageダイアログを使用して、新規ページを追加します。

ルート・レイアウト・コンポーネントの追加：Panel Stretch Layoutをルート・レイアウト・コンポーネントとして追加します。 その後、Decorative Boxを追加します。

上部/下部コンテンツ領域の作成：拡張/非拡張レイアウト・コンポーネントを使用します。

3つのスプリッタ・ペインの作成：Panel Splitterコンポーネントをネストして、ページに複数のペインを作成します。

左側/右側/中央コンテンツの作成：各種ADF Facesコンポーネントを使用します。

設計編集機能の使用：ビジュアル・エディタ、設計コンテナ、Structureウィンドウ、コンポーネント・パレット、プロパティ・インスペクタなどの設計編集ツールを組み合わせて使用します。

 

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

1. Create Applicationウィザードを開きます（「 File」→「 New」→「 General」→「 Applications」）。
2. 例に合わせて、アプリケーション名 LayoutAppを入力します。
3. Applica tion Template リストから「 Generic Application 」を選択し、「 Finish 」をクリックします。

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

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

   
   
   
4. アプリケーション・ナビゲータで、先ほど作成したプロジェクトを選択し、Project PropertiesダイアログのJSP Tag Librariesページを開きます（「 Tools」→「 Project Properties」）。
5. 「 Distributed Libraries 」フォルダを選択して、「 Add 」をクリックします。
6. Choose Tag Librariesダイアログで「 ADF Faces Components 11 」を選択し、「 OK 」をクリックします。
   

   JSPタグ・ライブラリ

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

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

   IDE内

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

   
   
   

 

JSFページの作成とPanel Stretch Layoutの追加

1. アプリケーション・ナビゲータでプロジェクトを選択し、Create JSF Pageダイアログを開きます（「 File」→「 New」→「 Web Tier」→「 JSF」→「 JSF Page」）。
2. Create JSF Pageダイアログで、ファイル名として LayoutPage.jspxを入力します。 「 Create as XML Document (*.jspx) 」チェックボックスを選択します。 「 Page Implementation 」を展開して、 D o Not Automatically Expose UI Components in a Managed Bean チェックボックスが選択されていることを確認します。 「 OK」をクリックします。
   

   コンポーネント・バインディング

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

   
   
   
3. コンポーネント・パレットの ADF Facesページで、「 Layout 」パネルを開きます。 「 Panel Stretch Layout」を、ビジュアル・エディタ内の空白ページにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Idフィールドに ps-rootと入力します。
   

   ルート・レイアウト・コンポーネント

   デフォルトでは、Oracle ADF Facesテクノロジーを使用するJSFページをプロジェクト内に作成すると、次のように、Oracle JDeveloperによって af:documentおよび af:formタグが、 .jspxページ・ファイルに自動的に組み込まれます。 [ 詳細はこちら]

   
   
   
4. コンポーネント・パレットの Layoutパネルで、「 Decorative Box」をPanel Stretch Layoutルートの centerファセットにドラッグ・アンド・ドロップします。
   

   レイアウト・コンポーネントと拡張

   オラクルでは、Panel Stretch Layoutコンポーネント、Panel Splitterコンポーネント、およびDecorative Boxコンポーネントを使用してページ・レイアウト・コンテンツにフレームを構築することを推奨しています。 レイアウト・コンポーネントでコンポーネント拡張サポートが組み込まれているのはPanel Stretch Layout、Panel Splitter、およびDecorative Boxのみのため、ファセット内の直下の子コンポーネントを自動的に拡張できます（子コンポーネントが拡張可能である場合）。 拡張時に子コンポーネントの inlineStyle属性の幅と高さの値を設定する必要はありません。そのようにして拡張すると、各種Webブラウザのページ表示に一貫性がなくなります。   [ 詳細はこちら]

   
   
   
5. Structureウィンドウで、「 af:panelstretchlayout」ルート（ af:formの真下）をクリックします。 プロパティ・インスペクタの Commonセクションで、 StartWidthと EndWidthのプロパティ値をそれぞれ 5pxに変更します。 次に、 BottomHeightを 25pxに変更して、「 Enter」を押します。
   

   Panel Stretch Layout

   Panel Stretch Layoutは、直下の子要素を受け入れません。子コンテンツはファセット内にのみ配置できます。 Panel Stretch Layoutは、子コンテンツを挿入できるペインを指定するファセットとして、 top、 bottom、 start、 end、 centerの5つのファセットをサポートしています。   [ 詳細はこちら]

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

   IDE内

   JSFページを作成してPanel Stretch LayoutとDecorative Boxを追加するステップが完了すると、ビジュアル・エディタにはページが次のように表示されます。 [ 詳細はこちら]

   
   
   

 

ページの上部/下部領域の作成

1. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel Stretch Layoutを、Panel Stretch Layoutルート（ ps-root）の topファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Idフィールドに ps-topと入力します。 ネストされたPanel Stretch Layoutファセットの幅と高さを以下の値に変更します。
   StartWidth - 200px
   EndWidth - 200px
   TopHeight - 5px
   BottomHeight - 5px
   

   ページの上部領域の設定

   Panel Stretch Layoutルートの topファセットには、ページ上部のコンテンツが含まれます。   [ 詳細はこちら]

   
   
   
2. 上部領域のコンテンツを作成するには、コンポーネント・パレットの Layoutパネルで、「 」 Panel Group Layoutを、先ほど追加したPanel Stretch Layout（ ps-top）の startファセットにドラッグ・アンド・ドロップします。
3. プロパティ・インスペクタの Commonセクションで、 Layoutの値を scrollに変更します。 コンポーネント・パレットで、別の「 」 Panel Group Layoutを、先ほど追加したPanel Group Layoutにドラッグ・アンド・ドロップします。 プロパティ・インスペクタで、 Layoutの値を horizontalに変更します。
   

   Panel Group Layoutコンポーネント

   イメージなどのコンポーネントをPanel Stretch Layoutなどの拡張コンポーネント内で拡張したくない場合は、子コンポーネントを拡張しないレイアウト・コンポーネント（Panel Group Layoutなど）にコンポーネントをラップします。 非拡張レイアウト・コンポーネントを拡張コンポーネントのレイヤーに導入すれば、通常のブラウザ・フローとレイアウトに引き継がれます。つまり、非拡張コンポーネント内のコンテンツはすべて、親の拡張コンポーネントによって自動的に拡張されることはありません。  [ 詳細はこちら]

   
   
   
4. コンポーネント・パレットで、「 Common Components」パネルを開きます。 先ほど追加したPanel Group Layoutに、「 」 Imageをドラッグ・アンド・ドロップします。 Insert Imageダイアログで、イメージ・ファイルのソースを入力するか、 Sourceフィールドの横の「 」ドロップダウン・メニューをクリックして「 Edit」を選択し、イメージ・ファイルを特定し、選択します。 「 Yes 」をクリックしてドキュメント・ルートの下にアイコン・イメージを追加し、「 Save」をクリックします。
   

   イメージの追加

   Insert Imageダイアログの Sourceフィールドにイメージ・ファイル名を入力するか、Edit Propertyダイアログでソースに移動してイメージ・ファイルを選択することにより、イメージを追加できます。 Edit Propertyダイアログを使用する場合は、 Sourceフィールドの最後にある「 」をクリックして、「 Edit」を選択します。   [ 詳細はこちら]

   
   
   
5. ビジュアル・エディタ下部にあるブレッドクラム・リンクで、 af:imageのすぐ前にある「 af:panelgrouplayout」リンクをクリックします。 次に、ページの選択したPanel Group Layoutの右上隅にある「 」 Panel Group Layout Actionsをクリックし、ドロップダウン・メニューから「 Insert inside 」 「 Spacer」を選択します。 ビジュアル・エディタのブレッドクラムで、 af:spacerの前にある「 af:panelgrouplayout」リンクをクリックします。 ページの「 」 Panel Group Layout Actionsをクリックし、「 Insert inside 」 「 Output Formatted」を選択します。 プロパティ・インスペクタの Commonセクションで、 Valueプロパティの値を Layout Exampleに変更します。 「 Style」セクションを展開します。 InlineStyleフィールドに、 font-size:small; color:Red; font-weight:bold;と入力します。
   

   エディタのブレッドクラムとActionsコンテキスト・メニューの使用

   ビジュアル・エディタ内でページを設計する際には、エディタ・ウィンドウ下部（ Designエディタ・タブおよび Sourceエディタ・タブのすぐ上）のブレッドクラム・リンクを使用して、ページ上で既存のコンポーネントまたはタグを選択します。 エディタのブレッドクラム・リンクをクリックすると、現在選択されているコンポーネントまたはタブからそのもとの親コンポーネントまたは親タグへのリンク・パスが表示されます。 パスの最後にあるリンク（太字で表記）は現在選択しているコンポーネントまたはタグで、最後のタグの前にある名前が親コンポーネントまたは親タグになります。 コンポーネントまたはタグに Id属性セットがある場合は、 Id属性値がコンポーネント名またはタグ名に追加されます（たとえば、 af:panelstretchLayout#ps-topでは、 ps-topが Id属性値です）。   [ 詳細はこちら]

   
   
   
6. コンポーネント・パレットの Layoutパネルで、「 」 Panel Group Layoutをこのキュー・カードのステップ1で追加したPanel Stretch Layout（ ps-top）の endファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Halignの値を endに、 Layoutの値を scrollに変更します。
7. コンポーネント・パレットの Layoutパネルで、「 」 Navigation Paneを、先ほど追加して変更したPanel Group Layoutにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Hintの値を buttonsに変更します。 「 Style」セクションを展開します。 InlineStyleフィールドに、 padding-top:5pxと入力します。
   

   Navigation Pane

   Navigation Paneコンポーネントは、ページ階層内の1つのレベルのナビゲーション項目を作成する場合に使用します。 ページ階層とは、アプリケーション内の一連の関連ページを表すノードのツリー型の階層です。 エンドユーザーは、リンクのパスをドリルダウンすることにより、ページ上の情報にアクセスできます。   [ 詳細はこちら]

   
   
   
8. Structureウィンドウで、「 」 af:navigationPaneを右クリックし、コンテキスト・メニューから「 Insert inside af:navigationPane 」 「 Navigation Item 」を選択します。 プロパティ・インスペクタの Commonセクションで、 Textプロパティの値を Homeに変更し、「 Enter」を押します。
9. ページで「 」 Navigation Item Actionsをクリックし、「 」 Insert as Sibling →「 Navigation Item」を選択します。 同じステップを繰り返して、もう1つのナビゲーション項目コンポーネントを追加します。 次に、プロパティ・インスペクタの先ほど追加した2つのコンポーネントの Textプロパティの値を、 Preferencesと Helpに変更します。 「 」 Save Allをクリックして作業内容を保存します。
10. 下部領域のコンテンツを作成するには、コンポーネント・パレットの Layoutパネルで、「 」 Panel Group Layoutを、先ほど追加したPanel Stretch Layout（ ps-top）の bottomファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Halignの値を endに、 Layoutの値を scrollに変更します。 コンポーネント・パレットで、別の「 」 Panel Group Layoutを、先ほど追加したPanel Group Layoutにドラッグ・アンド・ドロップします。 プロパティ・インスペクタで、 Layoutの値を horizontalに変更します。 「 Style and Theme」セクションを展開します。 InlineStyleフィールドに padding-top:5pxと入力し、「 Enter」を押します。
11. ページの選択したPanel Group Layoutの右上隅にある「 」 Panel Group Layout Actionsをクリックします。 ドロップダウン・メニューから「 Design This Container 」を選択します。
    

    Design This Container

    ページの選択したPanel Group Layoutの右上隅にある「 」 Panel Group Layout Actionsをクリックすると、アクション項目のコンテキスト・メニューが表示されます。 メニュー項目の1つに Design This Container があり、これを使用してコンテナとそのコンテナのコンポーネントを編集できます。   [ 詳細はこちら]

    
    
    
12. コンポーネント・パレットの Common Componentsパネルで、「 」 Output FormattedをPanel Group Layoutにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Valueフィールドに Copyright © 2008と入力します。 「 Style」セクションを展開します。 InlineStyleフィールドに margin:0 6px 0 6px; display:blockと入力し、「 Enter」を押します。
    

    スパンを使用するコンポーネント

    marginプロパティには、 5px 5px 2px 1pxなどの4つの値があり、それぞれ上部、右側、下部、左側のマージンを指定します。  [ 詳細はこちら]

    
    
    
13. ビジュアル・エディタのブレッドクラムで、先ほど追加した af:outputformattedの前にある「 af:panelgrouplayout」リンクをクリックします。 ページ上で、「 」 Panel Group Layout Actionsをクリックし、「 Insert inside 」 「 」 Go Linkを選択します。 プロパティ・インスペクタの Commonセクションで、 Textプロパティの値を About XYZに変更します。
14. ページ上で、選択したGo Linkコンポーネントの右上隅にある「 」 Go Link Actionsをクリックし、「 Design Main Page 」を選択します。
15. 「 」 Save Allをクリックして作業内容を保存します。 アプリケーション・ナビゲータで「 」 LayoutPage.jspxを右クリックし、コンテキスト・メニューから「 R un 」を選択します。
    

    IDE内

    ページの上部/下部領域にコンテンツを追加するステップが完了すると、ビジュアル・エディタは次のように表示されます。  [ 詳細はこちら]

    
    
    

 

ページの中間領域を3つのペインに分割

1. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel SplitterをページのDecorative Boxの centerファセットにドラッグ・アンド・ドロップし、2つのペインを作成します。
   

   Panel Splitter

   Panel Splitterコンポーネントは、調整スプリッタで分割されたサイズ変更可能な2つのペインを作成します。 この2つのペインは、 Orientation属性で指定することにより、水平方向（左右）または垂直方向（上下）に作成できます。 デフォルトでは、 Orientationは horizontal（水平方向）に設定されています。   [ 詳細はこちら]

   
   
   
2. 別の「 」 Panel Splitterを、先ほど追加したPanel Splitterの secondファセットにドラッグ・アンド・ドロップして、ペインを2つに分割します。 プロパティ・インスペクタの2番目のPanel Splitterの Commonセクションで、 Idフィールドに s2と入力します。 次に、 PositionedFromEndを trueに変更します。
   

   中間領域における3つのペインの作成

   水平Panel Splitterを第1水平Panel Splitterの secondファセットにネストすることにより、そのペインをさらに2つのペインに分割して、ページに水平方向のペインを3つ作成できます。  [ 詳細はこちら]

   
   
   
3. 左ペインのコンテンツを作成するには、コンポーネント・パレットの Layoutパネルで、「 」 Panel Accordionを、このキュー・カードのステップ1で追加した最初のPanel Splitterの firstファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 DiscloseManyを trueに変更します。
4. Structureウィンドウで、「 」 af:panelAccordionを展開して子要素を表示します。 子要素の「 」 af:showDetailItemをクリックします。 プロパティ・インスペクタの Commonセクションで、 Textフィールドに Pane 1と入力します。 「 Appearance」セクションを展開します。 Flexフィールドに 1と入力します。 次に、 StretchChildrenの値を firstに変更します。
   

   Show Detail Item

   Show Detail Itemは単独では使用できません。Panel AccordionまたはPanel Tabbed内で使用して、子コンテンツのグループを格納する必要があります。   [ 詳細はこちら]

   
   
   
5. ビジュアル・エディタで、ページの「 」 Show Detail Item Actionsをクリックし、コンテキスト・メニューから「 」 Insert as Sibling →「 Show Detail Item」を選択して2番目のペインを追加します。 プロパティ・インスペクタの Commonセクションで、 Textフィールドに Pane 2と入力します。 「 Appearance」セクションを展開します。 Flexフィールドに 2と入力します。 次に、 StretchChildrenの値を firstに変更します。 「 」 Save Allをクリックして作業内容を保存します。
6. 右ペインにコンテンツを追加するには、コンポーネント・パレットの Layoutパネルで、「 」 Panel Group Layoutを、このキュー・カードのステップ2で追加した2番目のPanel Splitter（ s2）の secondファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Layoutを scrollに変更します。
7. コンポーネント・パレットで先ほど追加したPanel Group Layoutに、「 」 Panel Listをドラッグ・アンド・ドロップします。 ビジュアル・エディタで、「 」 Panel List Actionsをクリックし、「 」 Insert inside→「 Go Link 」を選択して最初のリンクを追加します。 「 」 Go Link Actionsをクリックし、「 」 Insert as Sibling →「 Go Link」を選択して、2番目のリンクを追加します。 同じステップを繰り返して、同様に3番目の Go Linkコンポーネントを追加します。
8. 中央ペインを設定するには、コンポーネント・パレットの Layoutパネルで、「 Decorative Box」をこのキュー・カードのステップ2で追加した2番目のPanel Splitter（ s2）の firstファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 TopHeightの値を 30pxに変更します。
   

   Decorative Box

   左ペインと右ペインにコンテンツを追加すると、ビジュアル・エディタのページは次のように表示されます。  [ 詳細はこちら]

   
   
   
9. コンポーネント・パレットの Layoutパネルで、「 」 Panel Group Layoutを、先ほど追加したDecorative Boxの topファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Layoutを scrollに変更します。
10. コンポーネント・パレットの Common Componentsパネルで、「 」 Bread Crumbsを、先ほど追加したPanel Group Layoutにドラッグ・アンド・ドロップします。 ビジュアル・エディタで、ページの「 」 Bread Crumbs Actionsをクリックし、コンテキスト・メニューから「 」 Insert inside →「 Navigation Item」を選択します。 プロパティ・インスペクタの Commonセクションで、 Textプロパティの値を Crumb 1に変更し、「 Enter」を押します。
11. ビジュアル・エディタで、ページの「 」 Navigation Item Actionsをクリックし、コンテキスト・メニューから「 」 Insert as Sibling →「 Navigation Item」を選択します。 プロパティ・インスペクタの Commonセクションで、 Textの値を Crumb 2に変更し、「 Enter」を押します。 同じステップを繰り返し、 Textの値を Crumb 3に変更して3番目の Navigation Itemコンポーネントを追加します。
    

    Bread Crumbsコンポーネント

    Bread Crumbsコンポーネントは、現在のページからルート・ページに戻るリンクのパスを作成する場合に使用します。 Navigation Paneコンポーネントと同様に、Bread Crumbsコンポーネントは一連のCommand Navigation Itemコンポーネントを子要素として受け入れ、各Command Navigation Itemは1つのリンクで表示されます。  [ 詳細はこちら]

    
    
    
12. 「 」 Save Allをクリックして作業内容を保存します。 アプリケーション・ナビゲータで「 」 LayoutPage.jspxを右クリックし、コンテキスト・メニューから「 R un 」を選択します。
    

    IDE内

    ページ内に3つの水平スプリッタ・ペインを作成するステップが完了すると、ビジュアル・エディタは次のように表示されます。 [ 詳細はこちら]

    
    
    

 

Panel Tabbed、Panel Collection、および表の追加

1. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel Stretch Layoutを、先ほどのキュー・カードで追加したDecorative Boxの centerファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 StartWidth、 EndWidth、 TopHeightのプロパティ値をそれぞれ 5pxに変更します。 次に、 BottomHeightを 25pxに変更して、「 Enter」を押します。
2. ページ上で、選択したPanel Stretch Layoutの右上隅にある「 」 Panel Group Layout Actionsをクリックします。 コンテキスト・メニューから「 Design This Container 」を選択します。
3. コンポーネント・パレットの Layoutパネルで、「 」 Panel Tabbedを、Panel Stretch Layoutの centerファセットにドラッグ・アンド・ドロップします。 Structureウィンドウの Sourceタブで、「 af:panelTabbed」を展開して子要素を表示します。 子要素の「 」 af:showDetailItemをクリックします。 プロパティ・インスペクタの Commonセクションで、 Textプロパティの値を Tab 1に変更します。 「 Appearance」セクションを展開します。 次に、 StretchChildrenの値を firstに変更します。
   

   Panel Tabbed

   Panel Tabbedコンポーネントは、コンテンツのある一連のタブ・ペインを作成する場合に使用します。 Panel Tabbedを追加する場合は、Oracle JDeveloperの Position属性でデフォルト値の aboveを使用します。 これにより、タブがペイン・コンテンツの上に表示されます。 Position属性で有効な値には、そのほかに belowと bothがあります。   [ 詳細はこちら]

   
   
   
4. ビジュアル・エディタで、ページ上の「 」 Show Detail Item Actionsをクリックし、コンテキスト・メニューから「 」 Insert as Sibling →「 Show Detail Item」を選択して2番目のタブを追加します。 プロパティ・インスペクタの Commonセクションで、 Textフィールドに Tab 2と入力します。 「 Appearance」セクションを展開します。 次に、 StretchChildrenの値を firstに変更します。
5. ビジュアル・エディタで、最初のタブの「 Tab 1」をクリックします。 コンポーネント・パレットの Common Componentsパネルで、「 」 Tableを最初のタブ・コンポーネントにドラッグ・アンド・ドロップします。 Create ADF Faces Tableダイアログで、 Bind Data Now が選択されていないことを確認して、「 OK」をクリックします。 表コンポーネントのプロパティ・インスペクタで、「 Appearance」セクションを展開します。 ColumnStretchingドロップダウン・リストボックスで、「 blank」を選択します。
   

   表の列拡張

   別の詳細トピックで説明したように、Show Detail Item内の拡張可能な表コンポーネントは、一定の条件を満たすと拡張されます。 拡張されるコンポーネントに合わせて表の幅と高さのプロパティの値を設定する必要はありません。  [ 詳細はこちら]

   
   
   
6. ビジュアル・エディタで、2番目のタブの「 Tab 2」をクリックします。 コンポーネント・パレットの Layoutパネルで、「 」 Panel Collectionを、2番目のタブ・コンポーネントにドラッグ・アンド・ドロップします。 コンポーネント・パレットの Common Componentsパネルで、「 」 Tableを、先ほど追加したPanel Collectionにドラッグ・アンド・ドロップします。 Create ADF Faces Tableダイアログで、 Bind Data Now が選択されていないことを確認して、「 OK」をクリックします。 プロパティ・インスペクタで、「 Appearance」セクションを展開します。 ColumnStretchingドロップダウン・リストボックスで、「 last」を選択します。
   

   Panel Collection

   Panel Collectionコンポーネントは、表、ツリー、ツリー表などの直下の子コンポーネントをラップして、メニュー、ツールバー、およびステータス・バー項目を作成する場合に使用します。 デフォルトの最上位メニュー/ツールバー項目の種類は、格納される子コンポーネントによって異なります。 たとえば、子コンポーネントが表、ツリー、またはツリー表の場合、デフォルトの最上位メニュー項目はViewとなり、デフォルトの最上位ツールバー項目はDetachとなります。   [ 詳細はこちら]

   
   
   
7. コンポーネント・パレットで、「 」 Panel Group Layoutを、このキュー・カードのステップ1で追加したPanel Stretch Layoutコンポーネントの bottomファセットにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Halignプロパティの値を centerに、 Layoutプロパティの値を scrollに変更します。
8. コンポーネント・パレットの Common Componentsパネルで、「 」 Buttonを、先ほど追加して変更したPanel Group Layoutにドラッグ・アンド・ドロップします。 プロパティ・インスペクタで、 Textプロパティの値を Show Printable Pageに変更し、「 Enter」を押します。
9. コンポーネント・パレットで、「 Operations」パネルを開きます。 「 」 Show Printable Page Behaviorを、先ほど追加したコマンド・ボタンにドラッグ・アンド・ドロップします。
   

   Show Printable Page Behavior

   Show Printable Page Behaviorは、 共通のクライアント操作に宣言的なソリューションを提供するクライアント動作タグです。このタグを使用すれば、JavaScriptを使用してコードを記述する必要がありません。 Command Buttonコンポーネントとの関連付けをおこなうと、ユーザーがコマンド・コンポーネントをアクティブにした際に、Show Printable Page Behaviorで現在のページの印刷バージョンが生成されて表示されます。  [ 詳細はこちら]

   
   
   
10. ビジュアル・エディタで、設計コンテナの外側の灰色の領域をクリックして、メイン・ページに戻ります。
11. 「 」 Save Allをクリックして作業内容を保存します。 アプリケーション・ナビゲータで「 」 LayoutPage.jspxを右クリックし、コンテキスト・メニューから「 R un 」を選択します。
    

    IDE内

    Panel TabbedとPanel Collectionに表を追加するステップが完了すると、ビジュアル・エディタは次のように表示されます。 [ 詳細はこちら]

    
    
    

 

Copyright © 1997, 2008, Oracle. All rights reserved.