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

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

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

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

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

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

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

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

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

 

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

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

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





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

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

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



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

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

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



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

    tell me more iconIDE内

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



 

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

tell me more iconJSFページの作成とPanel Stretch Layoutの追加

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





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

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

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



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

    tell me more iconルート・レイアウト・コンポーネント

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



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

    tell me more iconレイアウト・コンポーネントと拡張

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



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

    tell me more icon Panel Stretch Layout

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



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

    tell me more iconIDE内

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



 

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

tell me more iconページの上部/下部領域の作成

この例では、Panel Stretch Layoutルートのファセットにコンテンツを追加して、ページの上部/下部領域を作成します。 このキュー・カードでは、Decorative Boxファセットへのコンテンツの追加はおこないません。  [ 詳細はこちら]





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

    tell me more iconページの上部領域の設定

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



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

    tell me more icon Panel Group Layoutコンポーネント

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



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

    tell me more iconイメージの追加

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



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

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

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



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

    tell me more icon Navigation Pane

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



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

    tell me more icon Design This Container

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



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

    tell me more iconスパンを使用するコンポーネント

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



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

    tell me more iconIDE内

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



 

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

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

先ほどのキュー・カードに上部/下部コンテンツ領域を作成すると、ビジュアル・エディタは次のように表示されます。  [ 詳細はこちら]





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

    tell me more icon Panel Splitter

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



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

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

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



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

    tell me more icon Show Detail Item

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



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

    tell me more icon Decorative Box

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



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

    tell me more icon Bread Crumbsコンポーネント

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



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

    tell me more iconIDE内

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



 

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

tell me more icon Panel Tabbed、Panel Collection、および表の追加

このキュー・カードでは、Decorative Boxの centerファセットに中央ペインの残りのコンテンツを作成していきます。   [ 詳細はこちら]





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

    tell me more icon Panel Tabbed

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



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

    tell me more icon表の列拡張

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



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

    tell me more icon Panel Collection

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



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

    tell me more icon Show Printable Page Behavior

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



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

    tell me more iconIDE内

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



 











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