1. メイン・メニューから「File」→「New」を選択します。 New Galleryで、「General」カテゴリを開き、「Applications」を選択します。 Itemsリストで「Custom Application」を選択し、「OK」をクリックします。

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

JDeveloperアプリケーションでは、作成するアプリケーションのタイプ（WebアプリケーションやJavaアプリケーションなど）に応じて、あらかじめ構築されたテンプレートに基づいて、事前定義された環境のタイプを指定できます。 アプリケーション・テンプレートには適切な機能の組合せが事前に指定されているため、標準アプリケーションのプロジェクト構造を素早く作成できます。 また、使用している機能に合った選択肢のみが使用できるように、JDeveloperで実行する処理がアプリケーション・テンプレートによりフィルタリングされます。

このチュートリアルでは、Custom Applicationテンプレートを使用します。このテンプレートでは、1つのプロジェクトでJDeveloperがサポートするすべての機能に関連するオブジェクトを使用できます。

適切なテンプレートを使用してアプリケーションを作成した後も、新しいプロジェクトをアプリケーションに追加し、使用できるようにする機能を指定できます。 これを実行するには、アプリケーション・ナビゲータでアプリケーション名を右クリックして、「New Project」を選択します。 New Galleryでは、Itemsリストから任意のタイプのプロジェクトを選択できます。

2. この例に合わせるため、アプリケーション名としてLayoutAppと入力し、「Finish」をクリックします。

   
初期プロジェクト構造（アプリケーションの作業領域内の名前付きプロジェクト・フォルダ）および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。 詳細表示 関連する機能は、アプリケーション内のプロジェクトで定義します。

JDeveloperプロジェクトは、関連するファイルを論理的にグループ化するときに使用します。ここでは、ソース・ファイル、パッケージ、クラス、イメージ、およびプログラムで必要になるその他の要素が管理されます。 プロジェクトでは、プログラムのコンパイル時や実行時に使用するソース・パスや出力パスなどの環境変数を管理します。 また、プロジェクトには、コンパイラ、ランタイム、デバッグに関するオプションが用意されており、プロジェクトごとにこれらのツールの動作をカスタマイズできます。

ソース・コードのアクセス、変更、再利用を簡単にするために、複数のプロジェクトをアプリケーションに追加できます。 それぞれのプロジェクトに含まれるファイルは、たとえば多層アプリケーションにおける各層に相当する場合もあれば、複雑なアプリケーションにおける各サブシステムに相当する場合もあります。 これらのファイルはどのディレクトリに配置されていても、1つのプロジェクトに含めることができます。

3. 今作成したプロジェクトをアプリケーション・ナビゲータでダブルクリックして、Project Propertiesダイアログを開きます。「JSP Tag Libraries」と「Distributed libraries」を選択して、「Add」をクリックします。
   
   

4. Choose Tag Librariesダイアログで「ADF Faces Components 11」を選択し、「OK」を2回クリックしてダイアログを両方とも閉じます。

   
ライブラリは、JDeveloperとともにインストールされるさまざまなAPIやテクノロジーのために提供されます。詳細表示

Oracle ADF Facesは、Oracle ADF FacesコンポーネントJSPタグ・ライブラリを提供します。Oracle ADF Facesコンポーネントのタグ・ライブラリを追加すると、JDeveloperは、タグ・ライブラリ記述子（TLD）ファイルの名前と場所、タグ・ライブラリの一意の識別子、実行時にタグ・ライブラリからタグを実行するために必要なJavaライブラリの名前、ライブラリがJSFページで使用される際のタグの接頭辞の優先値を追加します。



デフォルトでは、コンポーネント・パレットのADF FacesページにADF Facesタグが表示され、タグ・ライブラリのすべてのタグはJSPビジュアル・エディタで使用可能なシミュレートされたJSP/サーブレット・コンテナで実行されます。設計時に実行される必要があるタグをカスタマイズするには、Project PropertiesダイアログのJSP Tag Librariesページでタグ・ライブラリを選択して、「Customize」をクリックします。

5. 「」Save Allをクリックして作業内容を保存します。
   
   アプリケーション・ナビゲータのProjectsパネルは、次のようになります。
   
   

テンプレートから作成された新規アプリケーションは、プロジェクト階層に分割されてアプリケーション・ナビゲータに表示されます。各プロジェクトには関連する機能が設定されています。詳細表示アプリケーション・ナビゲータでは、プロジェクトは階層内の最上位レベルとして表示されます。アプリケーションで使用したCustom Applicationテンプレートによって、1つのプロジェクトが作成されています。このプロジェクトには、デフォルトのプロジェクト名または事前に入力されたプロジェクト名が指定されています。

アプリケーション・ナビゲータのパネルはいずれも開閉できます。2つのパネルの間のスプリッタをドラッグすれば、パネルのサイズを調整できます。Projectsパネルで項目のグループ化やソートを行う場合は、Navigator Display Optionsドロップダウン・メニューを使用します。アプリケーションを操作するには、「」Application Menuをクリックして、ドロップダウン・メニューからオプションを選択します。

JDeveloperには多種多様なファイル・タイプを識別する機能が備わっており、アプリケーション・ナビゲータでファイルをダブルクリックすると、適切なビューアまたはエディタでファイルが表示されます。アプリケーションまたはプロジェクトを終了すると、そのアプリケーションまたはプロジェクトのファイルを表示していたすべてのエディタまたはビューアが閉じられ、メモリからファイルがアンロードされます。

注：アプリケーション・ナビゲータのイタリック体のノードは、これらの要素が保存されていないことを示しています。プロジェクトに含まれるファイルが選択されている場合、プロジェクト・ノードは太字で表示されます。

メイン・メニューから「Application」→「Show Overview」を選択します。エディタ・ウィンドウ領域にApplication Overviewウィンドウが開きます。



このウィンドウの各ファイル概要ページには、JDeveloper内で作成されるすべてのオブジェクトがオブジェクト・タイプごとに分類されて表示されます。新規作成したファイルとアーチファクトは、ステータスやプロジェクトでフィルタして表示できます。

このアプリケーションのオブジェクトを作成する際には使用しないので、任意でApplication Overviewウィンドウを閉じることができます。

1. アプリケーション・ナビゲータでプロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「Page」の順に選択して、「OK」をクリックします。
   
   

2. ファイル名としてLayoutPage.jsfを入力します。ドキュメント・タイプとしてFaceletsが選択されていることを確認します。

   
JavaServer Facesを使用するアプリケーション向けに作成するJSFページには、Faceletsドキュメント（ファイル拡張子は.jsf）、またはXML構文で記述されたJSPドキュメント（ファイル拡張子は.jspx）を使用できます。詳細表示

どちらのJSFページもCreate JSF Pageダイアログを使用して作成できます。次のいずれかの方法でJSFページを開きます。

• New Gallery

• JSFナビゲーション・ダイアグラマ

• Oracle ADFタスク・フロー・ダイアグラマ（JDeveloperのStudio Editionでのみ使用可能）

3. Page Layoutページで「Blank Page」を選択します。Managed Beanページで、「Do Not Automatically Expose UI Components in a Managed Bean」を選択します。

Create JSF Pageダイアログでは、新しいページのルック・アンド・フィールの一部を任意で定義でき、また、ページ上のコンポーネントをマネージドBeanで公開するかどうかを指定できます。公開するように指定すると、UIコンポーネントをプログラムで操作できるようになります。詳細表示

デフォルトでは、コンポーネントはマネージドBeanに対して公開されません。コンポーネントをマネージドBeanにバインドする場合は、このダイアログのManaged Beanページでいずれかの自動バインディング・オプションを選択します。



既存のマネージドBeanに対するバインド方法のオプションを選択できるのは、アプリケーションにマネージドBeanが構成されている場合のみです。
UIコンポーネントをマネージドBean内で自動的に公開するように指定すると、新規のJSFページを作成するたびに自動的にバッキングBeanが作成されます。ページ上にコンポーネントをドロップすると、各コンポーネントにBeanプロパティが挿入され、コンポーネント・インスタンスとプロパティはbinding属性を使用してバインドされます。これにより、Beanでコンポーネント・インスタンスを受け取ったり返したりできるようになります。

注：ページにOracle ADFバインディングを追加する場合は、自動バインディング機能を使用しないでください。自動バインディング機能を使用した場合は、Oracle ADFバインディングを追加した後でマネージドBeanバインディングを削除することが必要になります。

4. 「OK」をクリックします。
   
   デフォルトでは、ビジュアル・エディタに新しいJSF Faceletsページが表示されます。
   
   

新しいJSFページをFaceletsドキュメント・タイプ（ファイル拡張子は.jsf）にすると、初期ページ構造が自動的に作成されます。詳細表示 JSF Coreタグ・ライブラリ用のxmlns属性とADF Facesタグ・ライブラリ用のxmlns属性が1つずつ含まれます。初期ファイルに含まれるその他の要素には、ページのレイアウト用要素、特に<f:view>と</f:view>で囲まれた他のすべての要素が挙げられます。

ページ・コードを表示するには、「Source」タブをクリックして、ビジュアル・エディタからXMLエディタに切り替えます。たとえば、新規ページには次のコードが生成されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core"
        xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:document title="LayoutPage.jsf" id="d1">
    <af:form id="f1"></af:form>
</af:document>
</f:view>

5. コンポーネント・パレットのADF FacesページのLayoutパネルで、「」Panel Stretch Layoutをドラッグして、ビジュアル・エディタの空白ページにドロップします。
   
   ビジュアル・エディタにコンポーネントをドラッグすると、Formという名前の長方形の領域が表示されます。これは、今ドラッグしているコンポーネントがそのターゲット内に挿入されることを意味しています。

   
Oracle ADF Facesを使用するプロジェクト内のJSFページには、af:documentタグとaf:formタグがデフォルトですでに含まれています。詳細表示
<f:view>
  <af:document>
    <af:form></af:form>
</af:document>
</f:view>
af:documentタグは、Oracle ADF Facesコンポーネントを使用するすべてのページに必要です。ページ・コンテンツを構成するすべてのコンポーネントは、af:formに挿入される必要があります。 ほとんどの場合、ページで拡張コンテンツを使用する必要があるため、af:documentコンポーネントによって拡張でき、その子コンポーネントを拡張できるルート・コンポーネントで開始します。 ルート・コンポーネントには、ページのレイアウトとコンテンツを構成する他のすべての子コンポーネントが含まれています。

JDeveloperではデフォルトにより、af:documentのmaximized属性はtrueに設定されているため、ルート・コンポーネントはブラウザの表示可能領域全体を拡張および使用できます（使用されるルート・コンポーネントが拡張可能な場合）。 拡張ページ・コンテンツのルート・コンポーネントとして使用できるレイアウト・コンポーネントの例には、Panel Stretch LayoutやPanel Splitterがあります。 拡張が可能で、子も拡張できる単一のルート・コンポーネントがあるため、ページ・コンテンツは実行時に、ブラウザ・ウィンドウに合うように拡張されます。 ユーザーがウィンドウのサイズを変更すると、ページ・コンテンツもブラウザの使用可能領域内に収まるようにサイズが変わります。

Panel Group Layout、Panel Form Layout、およびPanel Border Layoutなどの他のほとんどのコンポーネントは、子コンポーネントを拡張できません。 Panel AccordionやPanel Tabbedなどの他の一部のレイアウト・コンポーネントは、特定の条件を満たした場合にのみ、子コンポーネントを拡張できます。

Panel Stretch LayoutやPanel Splitterが子コンポーネント（表、他のレイアウト・コンポーネント、および領域など）を拡張できる一方で、すべてのレイアウト・コンポーネントが拡張可能なわけではありません。親の拡張コンポーネントによって拡張可能なレイアウト・コンポーネントは、次のとおりです。
• Decorative Box

• Panel Accordion

• Panel Box（type="stretch"またはtype="default"の場合）

• Panel Collection

• Panel Dashboard

• Panel Group Layout（layout="scroll"またはlayout="vertical"の場合）

• Panel Splitter

• Panel Stretch Layout

• Panel Tabbed
注： 拡張時にコンポーネントのinlineStyle属性の幅と高さの値を設定する必要はありません。そのようにして拡張すると、各種Webブラウザのページ表示に一貫性がなくなります。

親の拡張コンポーネントで拡張不可のレイアウト・コンポーネントは、次のとおりです。
• Panel Border Layout

• Panel Box（type="flow"の場合）

• Panel Form Layout

• Panel Group Layout（layout="default"またはlayout="horizontal"の場合）

• Panel Header

• Panel Label and Message

• Panel List
拡張不可のレイアウト・コンポーネントを拡張コンポーネント内で使用する必要がある場合は、まずは拡張不可のコンポーネントを移行コンポーネント（子コンポーネントは拡張しないがそれ自体は拡張可能なコンポーネント）内にラップする必要があります（たとえば、layout="scroll"またはlayout="vertical"の場合のPanel Group Layout）。

つまり、一貫したページ・コンテンツを複数のブラウザで表示するレイアウトを作成するには、最初にルート・コンポーネントを作成し、自身が拡張可能であり、子コンポーネントも拡張できるコンポーネントの組み合わせを使用して、拡張可能な構造を構築することを推奨します。 この拡張可能な構造内で、拡張可能なコンポーネント（拡張可能な表やレイアウト・コンポーネントなど）またはPanel Group Layout（layout="scroll"またはlayout="vertical"に設定）を挿入することで、拡張不可のフロー・コンポーネントの領域を作成して、ページ・コンテンツを構築できます。 af:document内の最大の単一ルート・コンポーネントは、実行時にブラウザ・ウィンドウに合わせて拡張またはサイズ変更されます。 ルート・コンポーネント内のコンテンツは、拡張可能な構造内のコンポーネントの階層に沿って、移行コンポーネントに達するまで、拡張またはサイズ変更されます。 その時点で、通常のブラウザ・フローとレイアウトに引き継がれ、移行コンポーネント内のコンテンツは、親の拡張コンポーネントによって自動的に拡張されることなくフローされます。 このレイアウトの作成プロセスにより、拡張コンテンツとフロー・コンテンツを必要に応じて、常に作成できます。

注： layout="scroll"のPanel Group Layoutにはネスト・レイヤーを使用しないでください。使用すると、複数のスクロール・バーが表示され、それらを使用することになります。

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

7. Structureウィンドウで、「af:panelStretchLayout」（af:formの真下）を選択します。
   
   

8. パネル拡張レイアウトのプロパティ・インスペクタにあるCommonセクションで、次の属性を指定の値に変更します。

   属性	値
   StartWidth	5px
   EndWidth	5px
   BottomHeight	25px

Panel Stretch Layoutは、直下の子を受け入れません。子コンテンツはファセット内にのみ配置できます。詳細表示 Panel Stretch Layoutは、子コンテンツを挿入できるペインを指定するファセットとして、top、bottom、start、end、centerの5つのファセットをサポートしています。
<af:panelStretchLayout ..>
  <f:facet name="bottom"/>
  <f:facet name="center"/>
  <f:facet name="start"/>
  <f:facet name="end"/>
  <f:facet name="top"/>
</af:panelStretchLayout>


Panel Stretch Layoutは拡張レイアウト・コンポーネントです。つまり、子コンポーネントに特定のディメンションが強制的に設定され、エンドユーザーがブラウザのサイズを変更すると、ブラウザの使用可能領域を満たすよう、centerファセットの子コンポーネントが拡張されます。

centerファセットの使用可能領域は、top、bottom、start、endの各ファセット内の子コンポーネントの有無によって制約を受ける場合があります。topファセットの高さは、Panel Stretch LayoutのTopHeight属性、bottomファセットの高さは、BottomHeight属性によって決定されます。同様に、startファセットとendファセットの幅は、それぞれStartWidth属性とEndWidth属性によって決定されます。

デフォルトでは、JDeveloperのTopHeight、BottomHeight、StartWidth、EndWidthの各属性は、それぞれ50ピクセルに設定されています。top、bottom、start、endの各ファセットに子コンポーネントが存在する場合は、これらの属性で定義されている領域が使用されます。topファセットとbottomファセットの子コンポーネントは、それぞれTopHeight属性とBottomHeight属性で設定されている高さに拡張され、startファセットとendファセットの子コンポーネントは、それぞれStartWidth属性とEndWidth属性で設定されている幅に拡張されます。 centerファセットの子コンポーネントは、使用可能領域に合わせて拡張されます。

9. 「」Save Allをクリックして作業内容を保存します。
   
   ビジュアル・エディタは、次のように表示されます。
   
   
   
   ビジュアル・エディタを最大化するには、エディタ・ウィンドウ上部の「LayoutPage.jsf」ドキュメント・タブをダブルクリックします。 再度同じタブをダブルクリックすると、元のサイズに戻ります。

JSFページの作成ステップが完了すると、アプリケーション・ナビゲータにはプロジェクトが次のように表示されます。詳細表示



プロジェクト内で、Java EE Webモジュール・ディレクトリ構造に準拠するフォルダとファイルは次のとおりです。

• Web Contentフォルダ：作成したページ、およびアプリケーションのクライアント・ブラウザに表示される必要があるその他のファイル（スタイルシート・ファイルや画像など）が格納されます。

• /WEB-INF/フォルダ：必要なWebアプリケーション・デプロイメント・ディスクリプタ（web.xml）とJSF構成ファイル（faces-config.xml）が格納されます。

• web.xmlファイル：アプリケーションのWebアプリケーション・デプロイメント・ディスクリプタです。これは、アプリケーションの構成コンポーネントを記述したXMLファイルです。初期化パラメータと、サーバーによって実施されるコンテナ管理のセキュリティ制約も、このファイルに記述されています。

• faces-config.xmlファイル：バリデータ、コンバータ、マネージドBean、ナビゲーション・ルールといった、JSFアプリケーションの構成リソースを登録する場所です。

• trinidad-config.xmlファイル：スキン・ファミリーやページ・アクセシビリティ・サポートのレベルといったOracle ADF Faces機能を構成するファイルです。

Panel Stretch Layoutルートのtopファセット内で手順を実行して、ページ・ヘッダー・コンテンツを作成します。 最初にPanel Stretch Layoutをもう1つ挿入してから、ネストしたPanel Stretch Layoutのstartファセットとendファセットを操作します。

1. コンポーネント・パレットのLayoutパネルで、「」Panel Stretch Layoutを、Panel Stretch Layoutルート（psl1）のtopファセットにドラッグ・アンド・ドロップします。
   
   

2. プロパティ・インスペクタのCommonセクションで、先ほど追加したPanel Stretch Layoutのファセットの幅と高さを次の値に変更します。

   属性	値
   StartWidth	200px
   EndWidth	200px
   TopHeight	5px
   BottomHeight	5px

3. コンポーネント・パレットのLayoutパネルで、「」Panel Group Layoutを、先ほど変更したPanel Stretch Layoutのstartファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Layoutの値をscrollに変更します。

Panel Stretch Layoutのような拡張コンポーネント内でイメージなどのコンポーネントを拡張したくない場合は、詳細表示 自身は拡張可能だが、子は拡張されないPanel Group Layout（layout="scroll"に設定）などの移行コンポーネントにそのコンポーネントをラップします。

Panel Group Layoutは、子を拡張しませんが、コンポーネント自体は親の拡張コンポーネント（Panel Stretch Layoutなど）により拡張可能です。Panel Group Layoutコンポーネントは、Layout属性がscrollまたはverticalである場合にのみ拡張できます。 Panel Group LayoutのLayout属性がhorizontalまたはdefaultである場合、Panel Group Layoutは拡張できません。

非拡張レイアウト・コンポーネントを拡張コンポーネントのレイヤーに導入すれば、通常のブラウザ・フローとレイアウトが引き継がれ、その時点から、親の拡張コンポーネントによるコンテンツの自動拡張は行われなくなります。 つまり、Panel Group Layout（layout="scroll"に設定）はフロー・レイアウトの領域を作成します。この領域では、非拡張コンポーネントのコンテンツすべてがスクロールされ、親の拡張コンポーネント（Panel Stretch Layout）によって拡張されることはありません。

たとえば、親の拡張レイアウト内にPanel Tabbedコンポーネント（拡張可能）がある場合は、ブラウザ内のページは次のように表示され、タブ・ペインの幅と高さが拡張されます。



同じPanel Tabbedコンポーネントをlayout="scroll"のPanel Group Layout内にラップし、親の拡張レイアウトに挿入すると、拡張されたタブ・パネルがブラウザに表示される代わりに、必要に応じて次のようなスクロール・バーが表示されます。



4. コンポーネント・パレットで、別の「」Panel Group Layoutを、先ほど追加したPanel Group Layoutにドラッグ・アンド・ドロップします。プロパティ・インスペクタで、Layoutの値をhorizontalに変更します。
   
   2つ目のPanel Group Layoutによって、子コンポーネントが水平方向に配列されます。
   
   

5. コンポーネント・パレットのGeneral Controlsパネルで、先ほど追加したパネル・グループ・レイアウトに「」Imageをドラッグ・アンド・ドロップします。

6. Insert Imageダイアログで、Sourceフィールドの横にある「」ドロップダウン・メニューから「Edit」を選択します。続いて、ダイアログを使用してイメージ・ファイルを検索し、選択します。

   
JDeveloperのイメージ・ライブラリからイメージを選択するには、Edit Propertyダイアログで<jdev_home>/jdeveloper/ide/lib/フォルダを検索し、「oicons.jar」をダブルクリックして開きます。詳細表示次に、oracle/javatools/icons/headerへ移動してイメージ・ファイル「jdeveloper.png」を選択します。



7. 「OK」をクリックします。プロンプトが表示されたら、「Yes」をクリックしてイメージをリソース・ディレクトリの下に追加し、「Save」をクリックします。
   
   Sourceフィールドに#{resource['images:jdeveloper.png']}と表示されます。
   
   

8. 「OK」をクリックして、Insert Imageダイアログを閉じます。

9. ビジュアル・エディタ下部にあるブレッドクラム・リンクで、af:imageのすぐ前にあるaf:panelgrouplayoutという名前のコンポーネントをクリックします。

   
エディタのブレッドクラム・リンクをクリックすると、現在選択されているコンポーネントからそのルートの親コンポーネントへの名前のパスが表示されます。詳細表示 パスの最後にある名前（太字で表記）は現在選択しているコンポーネントで、最後の名前の前にある名前が親コンポーネントになります。 コンポーネントのId属性が設定されている場合、コンポーネント名にId属性値が追加されます（af:panelgrouplayout#pgl2など。この場合、pgl2がId属性値）。

エディタのブレッドクラム・リンクに表示されたコンポーネントをクリックすると、JDeveloperは、選択したコンポーネントをページ上に点線の輪郭ボックスで表示します。 ボックスの右上隅は、選択したコンポーネントの「」Actionsコンテキスト・メニューです。

クリックすると、選択したコンポーネントのアクション項目のドロップダウン・メニューが表示されます。 メイン項目の1つは、Insert Insideです。これを使用して、選択したコンポーネントに挿入可能なコンポーネントのサブメニューを選択できます。

10. ビジュアル・エディタで、選択したパネル・グループ・レイアウトの右上隅にある「」にカーソルを重ねます。
    
    ページにツールチップ・テキストPanel Group Layout Actionsが表示されます。
    
    

11. 「」をクリックして、ドロップダウン・メニューから「Insert Inside」→「Spacer」を選択します。
    
    

12. ビジュアル・エディタのブレッドクラム・リンクで、af:spacerの前にある「af:panelgrouplayout」をクリックします。 ページで「」をクリックして、「Insert Inside」→「Output Text (Formatted)」を選択します。

13. プロパティ・インスペクタのCommonセクションで、Value属性の値をLayout Exampleに変更します。 次に、「Style」セクションを展開し、InlineStyleフィールドにfont-size:small; color:Red; font-weight:bold;と入力して、[Enter]を押します。
    
    
    
    startファセットにコンテンツが追加されました。

14. コンポーネント・パレットのLayoutパネルで、「」Panel Group Layoutを、ネストされたPanel Stretch Layout（psl2）のendファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Halignの値をendに、Layoutの値をscrollに変更します。

15. コンポーネント・パレットのLayoutパネルにあるInteractive Containers and Headersセクションで、「」Navigation Paneを、先ほど変更したPanel Group Layoutにドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Hintの値をbuttonsに変更します。 StyleセクションのInlineStyleフィールドにpadding-top:5pxと入力し、[Enter]を押します。

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



ナビゲーション項目には、タブ、バー、ボタンなどを設定できます。Navigation Paneコンポーネントは、一連のCommand Navigation Itemコンポーネントを子コンポーネントとして受け入れ、各Command Navigation Itemコンポーネントを1つの項目として表します。
<af:navigationPane hint="buttons">
  <af:commandNavigationItem text="Link 1"../>
  <af:commandNavigationItem text="Link 2"../>
  <af:commandNavigationItem text="Link 3"../>
</af:navigationPane>
ナビゲーション項目のタイプは、Navigation PaneコンポーネントのHint属性により決定されます。 Hint属性に設定可能な値は、 tabs、bar、buttons、choice、listです。

各タイプは、ページ階層のノードまたはページの1つのレベルを表すために使用します。 通常、ページ階層内の移動にNavigation Paneを使用する場合は、第1レベルのノードにtabsを使用し、第2レベルのノードにbarを使用します。 階層内のあらゆるページからアクセスできるページ（ヘルプ・ページなど）には、グローバル・リンクを示すbuttonsを使用します。この例では、Navigation Paneを使用してテキスト・リンクのみを作成します。

Navigation Paneコンポーネントは、XMLメニュー・モデルに宣言的にバインドできます。 Command Navigation Itemコンポーネントを個々に使用してナビゲーション・リンクを表す代わりに、nodeStampファセットとCommand Navigation Itemを1つだけ使用すれば、そのリンクのレベルを適当な数に削除できます。

16. Structureウィンドウで、「af:navigationPane」を右クリックし、コンテキスト・メニューから「Insert Inside af:navigationPane」→「Navigation Item」を選択します。
    
    

17. プロパティ・インスペクタのCommonセクションで、Textの値をHomeに変更し、[Enter]を押します。

18. 手順（ステップ16と17）を繰り返し、Textの値Helpを使用して、もう1つのナビゲーション項目コンポーネントを追加します。

19. 「」Save Allをクリックして作業内容を保存します。
    
    ビジュアル・エディタのページ上部には次のようなページが表示されます。

    

Panel Stretch Layoutルートのbottomファセット内で手順を実行して、ページ・フッター・コンテンツを追加します。

1. コンポーネント・パレットのLayoutパネルで、「」Panel Group Layoutを、Panel Stretch Layoutルート・コンポーネント（psl1）のbottomファセットにドラッグ・アンド・ドロップします。
   
   

2. プロパティ・インスペクタのCommonセクションで、Halignの値をendに、Layoutの値をscrollに変更します。

3. コンポーネント・パレットで、別の「」Panel Group Layoutを、先ほど追加したPanel Group Layoutにドラッグ・アンド・ドロップします。プロパティ・インスペクタで、Layoutの値をhorizontalに変更します。 次に、「Style」セクションを展開して、InlineStyleフィールドにpadding-top:5pxと入力し、[Enter]を押します。
   
   

4. ビジュアル・エディタで選択したパネル・グループ・レイアウト・コンポーネントで、「」をクリックして、ドロップダウン・メニューから「Design This Container」を選択します。

   
Actionsメニュー・オプションのDesign This Containerにより、選択したコンポーネントとそのコンテンツを特殊コンテナで編集できます。詳細表示 または、「」設計コンテナ・アイコン（使用可能な場合）をクリックすると、選択したコンポーネントがコンテナで開きます。



コンテナで作業を行う場合、選択したコンポーネントとそのコンテンツのみが編集のために表示されます。 選択したコンポーネント以外の部分はすべて、ページで灰色に表示されます。



5. コンポーネント・パレットのText and Selectionパネルで、設計コンテナのパネル・グループ・レイアウト・コンポーネント（水平方向）に「」Output Text (Formatted)をドラッグ・アンド・ドロップします。
   
   

6. プロパティ・インスペクタのCommonセクションにあるValueフィールドのデフォルト値をCopyright © 2011に置き換えます。 次に、StyleセクションのInlineStyleフィールドに、margin:0 6px 0 6px; display:blockと入力し、[Enter]を押します。

marginプロパティには、5px 5px 2px 1pxなどの4つの値が設定され、それぞれ上部、右側、下部、左側のマージンを指定します。詳細表示

ただし、ピクセル単位の幅と高さの値を設定できないコンポーネントもあります。 これはレイアウト・コンポーネントでは稀ですが、入力/出力コンポーネントではよくあります。 たとえば、入力/出力コンポーネントにInlineStyle属性がある場合は、"スパン"要素が使用されます。スパン要素では、ディメンション（ピクセル・ディメンションを含む）は考慮されません。 スパン要素でピクセル・ディメンションとパーセント幅を有効にするには、InlineStyle属性にdisplay: block;を追加します。

7. コンポーネント・パレットのGeneral Controlsパネルで、「」Link (Go)をStructureウィンドウ内のaf:panelGroupLayout - horizontalにドラッグ・アンド・ドロップします。

8. プロパティ・インスペクタのCommonセクションで、Textの値をAbout XYZに変更し、[Enter]を押します。
   
   コンテナ・ビジュアル・エディタは、次のように表示されます。
   
   

9. コンテナの外側の灰色の領域をクリックして、ビジュアル・エディタのページ全体に戻ります。

10. アプリケーション・ナビゲータで「LayoutPage.jsf」を右クリックし、「Run」を選択します。
    
    Create Default Domainダイアログが表示されたら、PasswordフィールドとConfirm Passwordフィールドにデフォルト・パスワード（例：weblogic1）を入力し、「OK」をクリックします。
    
    次のようなページがブラウザに表示されます。

    
デフォルトでJDeveloperは、IDEにバンドルされたOracle WebLogic Serverのユーザー固有のインスタンスを参照する、Integrated WebLogic Serverという名前の統合サーバーを自動的に構成します。詳細表示

Integrated WebLogic Serverは、パッケージ化されたアーカイブ・デプロイメント用のJava EEランタイム・サービスです。ゼロコピー・デプロイメントに基づき、Integrated WebLogic Serverでは、アプリケーションとそのプロジェクトのJava EEアプリケーションとしての実行とテストをJava EEコンテナ内で行えます。Integrated WebLogic Serverの使用に際し、特別な接続設定は必要ありません。アプリケーション全体、プロジェクト、または個別のJSFページを実行できます。

IDEでJSFアプリケーションを実行すると、次の処理が自動的に実行されます。
• まだ実行中でない場合は、Integrated WebLogic Serverを起動します。

• アプリケーションをコンパイルして、Integrated WebLogic Serverにデプロイします。

• 次のデフォルトのアドレスを使用して、デフォルトのブラウザ内でアプリケーションを起動します。http://<your_machine_IP_address>:<http_port>/<your_application_name>-<your_project_name>-context-root>/faces/<path_to_the_page>
アプリケーションを終了する場合は、JDeveloperで「」Terminateをクリックし、ドロップダウン・メニューからアプリケーション・バウンド・インスタンス「LayoutApp」を選択します。

注： アプリケーションを終了すると、アプリケーションは停止し、Integrated WebLogic Serverからアンデプロイされますが、Integrated WebLogic Serverは終了されません。

Decorative Box（db1）のcenterファセット内で操作を行って3つのペインを作成し、次に、コンテンツを左ペインと右ペインに追加します。

1. コンポーネント・パレットのLayoutパネルにあるInteractive Containers and Headersセクションで、「」Panel Splitterをページ中央のDecorative Boxのcenterファセットにドラッグ・アンド・ドロップし、2つのペインを作成します。

   
Panel Splitterコンポーネントは、調整スプリッタで分割されたサイズ変更可能な2つのペインを作成します。詳細表示 この2つのペインは、Orientation属性で指定することにより、水平方向（左右）または垂直方向（上下）に作成できます。 デフォルトでは、Orientationは水平方向に設定されています。Panel Splitterを使用すれば、エンドユーザーは子コンテンツ間で領域を再配分できます。調整スプリッタをドラッグすることにより、ペインのサイズを変更できます。スプリッタの矢印をクリックすると、ペインを（コンテンツと一緒に）矢印方向に折りたためます。





次の図に示すように、さまざまな方向のPanel Splitterコンポーネントをネストして、複数の垂直/水平ペインを作成できます。



Panel Stretch Layoutのように、Panel Splitterは、直下の子を受け入れません。子コンテンツはファセット内にのみ配置できます。 Panel Splitterでは、子コンテンツを挿入できるペインを指定する2つのファセット（firstとsecond）がサポートされます。
<af:panelSplitter ..>
  <f:facet name="first">
    <!-- pane contents here -->
</f:facet>
  <f:facet name="second">
    <!-- pane contents here -->
</f:facet>
</af:panelSplitter>
Panel Splitterは拡張レイアウト・コンポーネントであるため、エンドユーザーがブラウザのサイズ変更、ペインのサイズ変更、ペインの展開や折りたたみを実行すると、子コンポーネントがブラウザの使用可能領域を満たすように特定のディメンションが自動的に設定されます。

2. 別の「」Panel Splitterを、先ほど追加したPanel Splitterのsecondファセットにドラッグ・アンド・ドロップして、ペインを2つに分割します。
   
   

3. 先ほど追加した2番目のパネル・スプリッタのプロパティ・インスペクタにあるCommonセクションで、PositionedFromEndの値をtrueに変更します。
   
   これで、左、中央、右の3つのスプリット・ペインがビジュアル・エディタに作成されます。これらはそれぞれ、パネル・スプリッタps1のfirstファセット、パネル・スプリッタps2のfirstファセット、およびパネル・スプリッタps2のsecondファセットに相当します。

   
Panel Splitterを追加すると、JDeveloperで次の属性とデフォルト値が使用されます。詳細表示
• Orientation：horizontal。ペインが左右に並んで配置されます（言語の読み方向に応じて、左から右、または右から左に配置）。ペインを上下に並べて配置（上から下に配置）する場合は、値をverticalに変更します。

• PositionedFromEnd：false。調整スプリッタの位置が、第1ファセットから調整されます。第1ファセットは、水平配置では左ペインまたは右ペイン（言語の読み方向によります）、垂直配置では上ペインとなります。第2ファセット（水平配置では右ペインまたは左ペイン、垂直配置では下ペイン）からスプリッタの最初の位置を調整する場合は、値をtrueに変更します。

• SplitterPosition： 200 pixels。PositionedFromEnd値に応じて、第1または第2ファセットから調整スプリッタまでの距離を表します。

• Collapsed：false。 これは、ペインが展開されていることを意味します。 ペインが展開されている状態の場合は、調整スプリッタの矢印をクリックすると、調整スプリッタの矢印方向にペインが折りたたまれ、再度矢印をクリックすると、ペインが展開されます。 値をtrueに変更すると、ペインが折りたたまれた状態になります。
水平配置では、PositionedFromEndがfalseで、SplitterPositionが200の場合、調整スプリッタの最初の位置は、第1ファセット（左ペイン）から200ピクセルの位置になります。 垂直配置では、PositionedFromEndがfalseで、SplitterPositionが200の場合、調整スプリッタの最初の位置は、第1ファセット（上ペイン）から200ピクセルの位置になります。

PositionedFromEndがfalseの場合、調整スプリッタの矢印は第1ファセットの方向を指し、PositionedFromEndがtrueの場合、調整スプリッタの矢印は第2ファセットの方向を指します。 第2水平Panel Splitter（ps2）のPositionedFromEndをtrueに変更すると、右ペイン（言語の読み方向が左から右の場合）から調整スプリッタまでの距離が200ピクセルとなり、中央ペインが右ペインよりも大きくなります。

4. コンテンツを左ペインに追加するには、コンポーネント・パレットのLayoutパネルにあるInteractive Containers and Headersセクションで、「」Panel Accordionを第1パネル・スプリッタ（ps1）のfirstファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、DiscloseManyをtrueに変更します。

Show Detail Itemコンポーネントに属するコンテンツのグループを表示するには、Panel AccordionとPanel Tabbedを使用します。詳細表示 コンテンツは実行時に、折りたたみ可能、展開可能なアコーディオン・ペインまたはタブ・ペインにそれぞれ編成されます。

1つまたは複数のShow Detail Itemを子コンポーネントとして、Panel Accordion内またはPanel Tabbed内で使用する必要があります。Show Detail Itemはそれぞれ、1つのアコーディオン・ペインまたは1つのタブ・ペインに該当します。Show Detail Item内の1つまたは複数の子コンポーネントが、アコーディオン・ペインまたはタブ・ペインのコンテンツを構成します。次に例を示します。
<af:panelAccordion discloseMany="true">
  <af:showDetailItem text="Pane 1" ..>
    <af:outputText value="Pane contents here"/>
  </af:showDetailItem>
  ...
</af:panelAccordion>
注：Show Detail Itemは単独では使用できません。Panel AccordionまたはPanel Tabbed内で使用して、子コンテンツのグループを格納する必要があります。

Panel AccordionのDiscloseMany属性は、一度に複数のペイン（Show Detail Item）の公開（オープン）を可能にするかどうかを決定します。デフォルトでは、DiscloseManyはfalseに設定されています。これは、一度に1つのペインのみを公開できることを意味します。 DiscloseManyをtrueに設定すると、エンドユーザーが一度に複数のペインを公開できるようになります。

5. Structureウィンドウで、「af:panelAccordion」を展開します。 子「af:showDetailItem」をクリックします。 プロパティ・インスペクタのCommonセクションで、Textの値をPane 1に変更します。
   
   

6. 「Appearance」セクションを展開します。 Flexの値を1に変更してから、StretchChildrenの値をfirstに変更します。

Panel TabbedとPanel Accordionは、親の拡張レイアウト・コンポーネントによって拡張できますが、子コンテンツは自動的に拡張されません。詳細表示 Show Detail Itemコンポーネントは、次の条件を満たす場合にのみ拡張可能です。
• Show Detail Item内に子コンポーネントが1つだけ存在する

• Show Detail ItemのStretchChildren属性がfirstに設定されている

• 子コンポーネントに幅、高さ、ボーダー、マージン、パディングのプロパティが設定されていない

• 子コンポーネントを拡張できる
Show Detail Item内で拡張可能または拡張できないコンポーネントのリストについては、af:panelAccordionまたはaf:panelTabbedタグのドキュメントを参照してください。

Show Detail Item内の子コンポーネントを拡張したくない場合は、自身は拡張可能かつ子コンポーネントを拡張しないレイアウト・コンポーネント（layout="scroll"のPanel Group Layoutなど）に子コンポーネントをラップします。

Show Detail ItemのFlex属性は、Panel Accordionコンテナ内のコンポーネントの柔軟度を決定します。 コンテナ内の複数のShow Detail ItemのFlex値がゼロより大きい場合は、そのFlex 値に基づいて、公開ペイン・コンテンツ間で領域が再配分されます。 大きい値のShow Detail Itemコンポーネントは、小さい値のコンポーネントに比べて大きくなります。

7. Structureウィンドウで「af:panelAccordion」を右クリックし、「Insert Inside af:panelAccordion」→「Show Detail Item」を選択して、2つ目のペインを追加します。 プロパティ・インスペクタのCommonセクションで、Textの値をPane 2に変更します。 Appearanceセクションで、Flexを2に変更します。次に、StretchChildrenの値をfirstに変更します。

8. 「」Save Allをクリックして作業内容を保存します。
   
   ビジュアル・エディタの左ペインには次のようなページが表示されます。
   
   

9. コンテンツを右ペインに追加するには、コンポーネント・パレットのLayoutパネルから「」Panel Group Layoutをビジュアル・エディタのsecondファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Layoutをscrollに変更します。

10. コンポーネント・パレットで先ほど追加したPanel Group Layoutに、「」Panel Listをドラッグ・アンド・ドロップします。 Structureウィンドウで「af:panelList」を右クリックし、「Insert Inside af:panelList」→「Link (Go)」を選択して、goLinkコンポーネントを追加します。 手順を繰り返して、goLinkコンポーネントをさらに2つ追加します。
    
    

11. 「」Save Allをクリックして作業内容を保存します。
    
    ビジュアル・エディタの右ペインには次のようなページが表示されます。
    
    

12. 中央ペインを設定するには、コンポーネント・パレットのLayoutパネルから「」Decorative Boxをビジュアル・エディタのfirstファセットにドラッグ・アンド・ドロップします。
    
    

13. プロパティ・インスペクタのCommonセクションで、TopHeightの値を30pxに変更し、[Enter]を押します。

Panel Stretch LayoutやPanel Splitterと同様に、Decorative Boxは、直下の子を受け入れない拡張レイアウト・コンポーネントです。詳細表示



子のコンテンツは、ファセット内のみに格納できます。 Decorative Boxでは、子コンテンツを挿入できるペインを指定する2つのファセット、 topとcenterがサポートされます。
<af:decorativeBox topHeight="30px"..>
  <f:facet name="center"/>
  <f:facet name="top"/>
</af:decorativeBox>
Decorative Boxを第2のパネル・スプリッタ（ps2）のfirstファセットにネストすることで、コンテンツを追加する前に中央ペインが設定されます。

14. コンポーネント・パレットで「」Panel Group Layoutを、先ほど追加したDecorative Box（db2）のtopファセットにドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Layoutをscrollに変更します。

15. コンポーネント・パレットのGeneral ControlsパネルにあるLocationセクションで、「」Bread Crumbsを、先ほど追加したPanel Group Layoutにドラッグ・アンド・ドロップします。 Structureウィンドウで、「af:breadCrumbs」を右クリックし、「Insert Inside af:breadCrumbs」→「Navigation Item」を選択して、リンクを追加します。 プロパティ・インスペクタのCommonセクションで、Textの値をCrumb 1に変更し、[Enter]を押します。

Bread Crumbsコンポーネントは、現在のページからルート・ページに戻るリンクのパスを作成する場合に使用します。詳細表示 Navigation Paneコンポーネントと同様に、Bread Crumbsは一連のCommand Navigation Itemコンポーネントを子として受け入れ、各Command Navigation Itemは1つのリンクを表示します。
<af:breadCrumbs>
  <af:commandNavigationItem text="Crumb 1"../>
  <af:commandNavigationItem text="Crumb 2"../>
  <af:commandNavigationItem text="Crumb 3"../>
</af:breadCrumbs>
デフォルトでは、ブレッドクラム・リンクは横線で表示されます。Bread CrumbsコンポーネントのOrientation属性をverticalに設定すると、縦線のステップ・リストに変更できます。

最後のブレッドクラム・リンク（最後のCommand Navigation Itemの子）が、常に現在のページになります。レンダラやクライアントのデバイスの種類によっては、最後のブレッドクラム・リンクが表示されない場合がありますが、その場合にもCommand Navigation Itemコンポーネントの追加は必要です。最後のブレッドクラム・リンクが表示されるクライアントの場合、ADF Facesのデフォルトでは、現在のページのリンクが"selected"と表示されます。

Navigation Paneコンポーネントと同様に、Bread CrumbsコンポーネントではXMLメニュー・モデルに宣言的にバインドできます。 Command Navigation Itemコンポーネントを個々に使用してリンクを表す代わりに、nodeStampファセットとCommand Navigation Itemを1つだけ使用して、リンクを適宜削除できます。

16. Structureウィンドウで、「af:breadCrumbs」を右クリックし、「Insert Inside af:breadCrumbs」→「Navigation Item」を選択して、2番目の項目を追加します。 プロパティ・インスペクタのCommonセクションで、Textの値をCrumb 2に変更し、[Enter]を押します。 次に、Text値のCrumb 3を使って手順を繰り返して、3番目の項目を挿入します。
    
    ビジュアル・エディタのページには次のような中央ペインが表示されます。
    
    

17. アプリケーション・ナビゲータで「LayoutPage.jsf」を右クリックし、「Run」を選択します。
    
    次のようなページがブラウザに表示されます。

    

Decorative Box（db2）のcenterファセット内で操作を行うことで、中央ペインのコンテンツを作成して、ページを完成します。

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

2. プロパティ・インスペクタのCommonセクションで、パネル拡張レイアウトの次の属性を指定の値に変更します。

   属性	値
   StartWidth	5px
   EndWidth	5px
   TopHeight	5px
   BottomHeight	25px

3. コンポーネント・パレットのLayoutパネルにあるInteractive Containers and Headersセクションで、「」Panel Tabbedを、先ほど変更したパネル拡張レイアウトのcenterファセットにドラッグ・アンド・ドロップします。

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



Panel Accordionと同様に、複数のShow Detail ItemコンポーネントをPanel Tabbed内で使用する必要があります。 Show Detail Item内の1つまたは複数の子コンポーネントが、タブ・ペインのコンテンツを構成します。次に例を示します。
<af:panelTabbed position="both"..>
  <af:showDetailItem text="Tab 1"..>
    <af:outputText value="Pane contents here"../>
  </af:showDetailItem>
  <af:showDetailItem text="Tab 2"..>
    <af:outputText value="Pane contents here"../>
  </af:showDetailItem>
</af:panelTabbed>
各Show Detail Itemは、1つのタブに該当します。エンドユーザーがタブを選択すると、そのShow Detail Itemに属する子コンポーネントが表示され、それ以外のタブ・コンテンツはすべて非表示になります。

Panel Tabbedは、Panel Stretch Layoutなどの親の拡張レイアウト・コンポーネントによって拡張可能です。Panel Stretch Layoutのファセットに挿入した場合、拡張されるコンポーネントに合わせてPanel Tabbedの幅と高さのプロパティを設定する必要はありません。

Panel Tabbedでは子コンポーネントは拡張されませんが、Show Detail Itemでは拡張されます。ただし、Show Detail Itemで拡張されるためには、次のような条件を満たす必要があります。
• Show Detail Item内に子コンポーネントが1つだけ存在する

• Show Detail ItemのStretchChildren属性がfirstに設定されている

• 子コンポーネントに幅、高さ、ボーダー、マージン、パディングのプロパティが設定されていない

• 子コンポーネントを拡張できる
Show Detail Item内で拡張可能または拡張できないコンポーネントのリストについては、af:panelTabbedタグのドキュメントを参照してください。

注：Panel TabbedとNavigation Paneを混同しないでください。 Navigation Paneコンポーネントは、ページ階層内の1つのナビゲーション・レベルを表す一連のナビゲーション項目（タブを含む）を作成するものです。

4. Structureウィンドウで、「af:panelTabbed」を展開します。 子「af:showDetailItem」をクリックします。 プロパティ・インスペクタのCommonセクションで、Textの値をTab 1に変更します。 Appearanceセクションで、StretchChildrenをfirstに変更します。

5. Structureウィンドウで「af:panelTabbed」を右クリックし、「Insert Inside af:panelTabbed」→「Show Detail Item」を選択して、2つ目のタブを追加します。 プロパティ・インスペクタのCommonセクションで、Textの値をTab 2に変更します。 Appearanceセクションで、StretchChildrenをfirstに変更します。
   
   

6. ビジュアル・エディタで、最初のタブの「Tab 1」を選択します。
   
   

7. コンポーネント・パレットのData Viewsパネルで、「」Tableを最初のタブにドラッグ・アンド・ドロップします。 Create ADF Faces Tableダイアログで、Bind Data Nowが選択されていないことを確認して、「OK」をクリックします。
   
   

8. 表コンポーネントのプロパティ・インスペクタにあるAppearanceセクションで、ColumnStretchingドロップダウン・リストから「blank」を選択します。
   
   ビジュアル・エディタには次のような表が表示されます。

   
ビジュアル・エディタでは、表の列拡張は表示されません。詳細表示



columnStretchingの有効な値は次のとおりです。
• none：列は拡張されません。これがデフォルト値になります。最適なパフォーマンスを得るためには、デフォルト値を使用してください。

• blank：表の最後の列の後に、空白列が1列自動的に挿入されます。この空白列を拡張して、ブラウザの表示領域内の未使用領域を満たすことができます。表の行の背景色は、表の全幅に適用されます。

• last：この最終列を拡張して、ブラウザのビューポート内の未使用領域を満たすことができます。

• multiple： 複数の列を拡張する場合に選択します。 次に、関連する列の幅をパーセンテージに設定します。 パーセンテージを使用した幅が存在し、表columnStretchingが"multiple"に設定されている場合、パーセンテージが正規化の比率の決定に使用されます。
表の特定の列を拡張する場合は、プロパティ・インスペクタの表コンポーネントのcolumnStretchingフィールドで、接頭辞column:を使用して列のidを指定します。 たとえば、列のidがmyCol1である場合、column:myCol1とcolumnStretchingフィールドに入力します。 または、列idをcolumnStretchingドロップダウン・リストから選択できます。

注： 表をShow Detail Item内で使用する場合は、拡張するコンポーネントに合わせて表の幅と高さのプロパティを設定する必要はありません。

9. ビジュアル・エディタで、2番目のタブの「Tab 2」を選択します。 コンポーネント・パレットのLayoutパネルで、「」Panel Collectionを、2番目のタブにドラッグ・アンド・ドロップします。

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

Panel Collectionは、Panel Stretch LayoutやShow Detail Itemなどの親の拡張コンポーネントによって拡張可能です。Panel Stretch Layoutのファセットに挿入すれば、拡張されるコンポーネントに合わせてPanel Collectionの幅と高さのプロパティを設定する必要がありません。Panel CollectionをShow Detail Itemに挿入する場合、Show Detail Itemの次のような条件を満たせばPanel Collectionを拡張できます。
• Show Detail Item内に子コンポーネントが1つだけ存在する

• Show Detail ItemのStretchChildren属性がfirstに設定されている

• 子コンポーネントに幅、高さ、ボーダー、マージン、パディングのプロパティが設定されていない
Panel Collectionでは、単一の表、ツリー、ツリー表の子コンポーネントを拡張できます。 Panel Collectionで拡張されるコンポーネントに合わせて、表の幅と高さのプロパティの値を設定する必要はありません。

10. コンポーネント・パレットのData Viewsパネルで、「」Tableを、先ほど追加したPanel Collectionにドラッグ・アンド・ドロップします。 Create ADF Faces Tableダイアログで、Bind Data Nowが選択されていないことを確認して、「OK」をクリックします。 表コンポーネントのプロパティ・インスペクタにあるAppearanceセクションで、ColumnStretchingドロップダウン・リストから「last」を選択します。
    
    

11. コンポーネント・パレットのLayoutパネルで、「」Panel Group LayoutをPanel Tabbbedの表の下にあるbottomファセットにドラッグ・アンド・ドロップします。
    
    

12. プロパティ・インスペクタのCommonセクションで、Halignの値をcenterに、Layoutの値をscrollに変更します。

13. コンポーネント・パレットのGeneral Controlsパネルで、「」Buttonを、先ほど追加して変更したPanel Group Layoutにドラッグ・アンド・ドロップします。 プロパティ・インスペクタで、Textの値をShow Printable Pageに変更し、[Enter]を押します。
    
    

14. コンポーネント・パレットで、「Operations」パネルを開きます。 Behaviorセクションで、「」Show Printable Page Behaviorを、先ほど追加したコマンド・ボタンにドラッグ・アンド・ドロップします。
    
    Structureウィンドウのbottomファセット内のコンポーネントの階層は、次のように表示されます。

    
Show Printable Page Behaviorは、共通のクライアント操作に宣言的なソリューションを提供するクライアント動作タグです。このタグを使用すれば、JavaScriptを使用してコードを記述する必要がなくなります。詳細表示 Command Buttonコンポーネントとの関連付けを行うと、ユーザーがコマンド・コンポーネントをアクティブにした際に、Show Printable Page Behaviorで現在のページの印刷バージョンが生成されて表示されます。
<af:commandButton text="Show Printable Page"..>
  <af:showPrintablePageBehavior/>
</af:commandButton>
Show Printable Page BehaviorをPanel AccordionやPanel Splitterと一緒に使用する場合は、印刷するコンテンツが格納されているペインやファセット内に、必ずCommand Buttonを（ネストしたShow Printable Page Behaviorタグと一緒に）配置してください。

この例では、Command Buttonを（ネストしたShow Printable Page Behaviorタグと一緒に）Panel Stretch Layoutのファセット内に配置することにより、中央ペインのコンテンツのみが印刷可能になります。

コマンド・ボタンを実行時にアクティブにすると、サーバーに印刷ページを取得するリクエストが送信され、コマンド・コンポーネントがアクティブになった場合に通常起動されるアクション・イベントは、送信されません。 Oracle ADF Facesには、新規ブラウザ・ウィンドウやブラウザ・ウィンドウの新規タブに、ページの印刷バージョンが表示されます。

15. アプリケーション・ナビゲータで「LayoutPage.jsf」を右クリックし、「Run」を選択します。
    
    次のようなページがブラウザに表示されます。
    
    
    
    表をデータソースにバインドしていないため、表には列ヘッダーのみが表示されます。

16. スプリッタ・バーの右向き矢印をクリックして、右ペインを折りたたみます。
    
    Tab 1の表には6つの列があり、最後の列ヘッダーは空で拡張されています。
    
    

17. 「Tab 2」をクリックします。
    
    表には5つの列があります。 最後の列col5は拡張されています。
    
    

18. 「Show Printable Page」ボタンをクリックします。
    
    選択したタブのコンテンツのみを含む新規ブラウザ・ウィンドウまたはブラウザ・ウィンドウの新規タブが表示されます。

    

このチュートリアルでは、ヘッダー・コンテンツとフッター・コンテンツ、および3つのスプリット・ペインの本文コンテンツを作成しました。このチュートリアルで学習した内容は、以下のとおりです。

• JDeveloperのウィザードおよびダイアログを使用して、アプリケーションおよび初期ページを作成する
• ビジュアル・エディタ、コンポーネント・パレット、プロパティ・インスペクタ、構造ウィンドウを使用して、UIページを作成する
• ページ・コンテンツの拡張可能な外枠を作成する
• 拡張ページ・コンテンツと非拡張コンテンツのコンテナ・コンポーネントの層を使用する
• さまざまなレイアウト・コンポーネントでコンポーネントを拡張する
• Integrated WebLogic Serverを使用してOracle ADF Facesアプリケーションを実行する

Oracle ADF Facesの使用について、詳しくは以下を参照してください。

• Oracle® Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework 11g Release 2 (11.1.2.0.0)
• Oracle® Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework 11g Release 2 (11.1.2.0.0)