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

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

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

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

2. 例に合わせ、アプリケーション名としてPlaceholderDCAppと入力します。

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

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

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

3. デフォルト値のままにして、「Finish」をクリックします。
   
   新しいアプリケーションを作成すると、Application Overviewウィンドウがデフォルトでエディタ・ウィンドウ領域に開きます。 このアプリケーションのオブジェクトの作成では使用しないので、任意でこのウィンドウを閉じることができます。
   
   

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

Checklistにより、オラクルが推奨するベスト・プラクティスに従って、Fusion Webアプリケーションを段階的に構築できます。 アプリケーションを構成、構築するプロセス全体を任意で進めることができ、特定のダイアログやウィザードへのリンクが用意されています。 各ステップでは、段階的な手順、開発者ガイドの関連セクション、ステップの実行でIDEに生じる結果の説明へのリンクを組み合わせることで、アーキテクチャ、ツール、結果のファイルについて説明します。

JDeveloper内で作成するファイルとアーチファクトはすべて、オブジェクト・タイプ別に編成されたファイル・サマリー・ページに表示されます。新規作成したファイルとアーチファクトは、ステータスやプロジェクトでフィルタして表示できます。

4. アプリケーション・ナビゲータで「Model」プロジェクトを選択して、「File」→「New」→「Business Tier」→「Data Controls」→「Placeholder Data Control」を選択し、「OK」をクリックして、Create Placeholder Data Controlダイアログを開きます。

   
プレースホルダ・データ・コントロールは、静的なサンプル・データを含んだ単純なデータ・コントロールです。 データ・コントロールを初めて作成したときには、関連付けられたデータ型はありません。 データ型も手動で作成します。詳細表示 データ型も手動で作成します。 このチュートリアルでは、単純な静的データを含んだプレースホルダ・データ・コントロールを作成してから、プレースホルダ・データ・コントロールを含んだ単純なJSFページを作成します。

ページ設計者は、基盤となるデータベースまたはビジネス・サービス・テクノロジーの知識がなくても、プレースホルダ・データ・コントロールを素早く作成できます。次に、これらのデータ・コントロールとADFデータ・バインディングを使用して、完全な実行可能ページを構築します。 これらのページを開発者に渡し、開発者はページを本番データ・コントロールに再バインドすることができます。

5. データ・コントロールの名前としてProductDataと入力し、Dummy data for product pagesなどの説明を追加します。「OK」をクリックします。

   

6. 「」Save Allをクリックして作業内容を保存します。 アプリケーション・ナビゲータで、「Data Controls」パネルを開き、新しいProductDataデータ・コントロールを表示します。

アプリケーション・ナビゲータにおいて、プロジェクトは階層内の最上位レベルとして表示されます。アプリケーション・ナビゲータは、次のように表示されます。 詳細表示



このアプリケーションでは、Oracle ADF Business ComponentsテクノロジーをModelプロジェクトで使用し、Oracle ADF FacesテクノロジーをViewControllerプロジェクトで使用します。 各プロジェクトには、選択したFusion Web Application (ADF)テンプレートに定義された適切なテクノロジーとファイルがすでに含まれています。

JDeveloperでは、アプリケーションの開発中に使用しているプロジェクト（関連ファイルの集合）がアプリケーションによって追跡されます。それぞれのプロジェクトに含まれるファイルは、たとえば多層アプリケーションにおける各層に相当する場合もあれば、複雑なアプリケーションにおける各サブシステムに相当する場合もあります。これらのファイルはどのディレクトリに配置されていても、1つのプロジェクトに含めることができます。

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

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

1. Data Controlsパネルで「ProductData」ノードを右クリックして、「Create Placeholder Data Type」を選択します。

   
標準データ・コントロールは、モデルまたはビジネス・コンポーネント・レイヤーの基礎となるデータソースからデータ集合と属性を取得します。 たとえば、アプリケーション・モジュール・データ・コントロールは、ビュー・オブジェクトおよび関連するデータベース表からデータ集合を取得します。詳細表示

プレースホルダ・データ・コントロールの場合、データ集合ではなく、プレースホルダ・データ型があります。 プレースホルダ・データ型は、 データ集合に似ています。 ページにドロップして、フォーム、表、ツリーなどの複雑なコンポーネントを作成できます。 また、入力テキスト、出力テキスト、選択肢などの個々のコンポーネントとしてページにドロップできる一連の属性もあります。 一部の属性はLOVとして定義できます。

カテゴリと製品のデータ型をデータ・コントロールに追加することで、マスター/ディテール・データ・モデルを定義します。 最初にカテゴリ・データ型を作成し、次に製品データ型を作成して、マスター/ディテール関係のカテゴリに追加します。

プレースホルダ・データ型を作成する際、属性名、タイプ、デフォルトUIコンポーネント、その他のオプションを指定します。 1つのアプリケーション・モジュールの複数のデータ集合の場合と同様に、1つのデータ・コントロールで複数のデータ型を作成できます。

2. Create Placeholder Data Typeダイアログで、データ型の名前としてCategoriesと入力します。

   

3. デフォルトの最初の属性（Attribute）をCategoryIdという名前に置き換えて、Typeで「Number」を選択します。

   

4. 「」 Addをクリックして、新しい属性を追加します。 CategoryNameという名前を入力して、TypeにStringが選択されていることを確認します。「OK」をクリックします。

   
Data Controlsパネルでは、コントロール・パネル・オブジェクトをオープンWebページまたはADF Swingパネルにドラッグ・アンド・ドロップすることで、アプリケーションのビジネス・サービスの表示やデータバインドUIコンポーネントの作成用に作成したデータ・コントロールを表示できます。詳細表示

Data Controlsパネルには、データ集合、属性、ビジネス・サービス開発者がOracle ADFデータ・コントロールを介して公開したメソッド、およびすべてのデータ集合で一般的な、特定の組込みの処理など、UIコンポーネントをバインドできるオブジェクトが表示されます。



プレースホルダ・データ・コントロールは他のデータ・コントロールとともに、Data Controlsパネルのルート・ツリーに表示されます。 データ型が定義されていないプレースホルダ・データ・コントロールでは、CommitとRollbackの組込み処理のみを使用できます。 標準データ・コントロールのマスター/ディテール・データ集合の場合と同様に、プレースホルダ・データ型間のマスター/ディテール関係を作成できます。 マスター/ディテール・データ型をページにドロップして、マスター/ディテール・フォームや表を作成できます。

5. Data Controlsパネルで「Categories」ノードを右クリックして、「Create Placeholder Data Type」を選択します。
   
   Categoriesを選択することで、ディテール・データ型をCategoriesデータ型の子として作成します。 マスター・データ型の最初の属性はJoin属性です。ディテール・データ型に自動的に追加され、変更はできません。

   

6. データ型の名前としてProductsと入力します。

   

7. 「」 Addをクリックして、4つの属性を次の名前と設定で追加します。 コロン":"を各ラベルの一部として含めてください。

   Name	Type	Label	Format Type	Default Component
   ProductName	String	Name:	該当なし	該当なし
   ProductDesc	String	Description:	該当なし	該当なし
   Price	Number	List Price:	Currency	該当なし
   Supplier	String	Supplier:	該当なし	Choice List

   
   

8. 「OK」をクリックし、Data Controlsパネル・ツールバーの「」Refreshアイコンをクリックします。
   
   Data Controlsパネルを展開すると、次のように表示されます。

   
Data Controlsパネルには、データ・モデルであるマスター/ディテール関係のCategoriesとProducts、各データ型の属性が表示されます。詳細表示 組込み処理もData Controlsパネル内にあります。これらの処理に基づいてUIコンポーネントを作成できますが、これらのUIコンポーネントによってアプリケーション・データが変更されることはありません。 たとえば、Deleteボタンをページに追加できますが、サンプル・データはこのボタンで削除されません。

プレースホルダ・データ・コントロールを作成すると、データ・コントロールを含めるために選択したパッケージがアプリケーション・ナビゲータのプロジェクト・ノードに表示されます（modelなど）。 プレースホルダ・データ・コントロールのXMLファイルは、パッケージ下に表示されます（ProductDataなど）。

アプリケーション・ナビゲータには、新しいファイルが複数あります。





• CategoriesとProductsには、2つのデータ型の定義が含まれます。

• DTLinkは、データ型間のマスター/ディテール関係を定義します。

• ModelBundle.propertiesには、アプリケーションの変換可能リソース（追加したラベルとフォーマッタ）が含まれます。

プレースホルダ・データ・コントロールを使用してアプリケーションを実行するには、実行用のサンプル・データを追加する必要があります。 プレースホルダ・データ型の属性にサンプル・データを追加するには、手動で追加するか、.csvファイルからデータをインポートします。 サンプル・データは、データ型を作成したときに追加できます。または、すべてのサンプル・データ、ならびにマスター/ディテール関係を作成した後で、データ型を編集し、追加できます。

1. Data Controlsパネルで「Categories」ノードを右クリックし、「Edit Placeholder Data Type」を選択して、Categoriesデータ型を編集します。

   

2. Edit Categoriesダイアログで「Sample Data」タブを選択します。

   

3. 「」Addをクリックして、CategoryIdおよびCategoryNameの次の値を入力します。[Tab]キーを押して、次のフィールドに移動するか、別の行を追加します。

   CategoryId	CategoryName
   1	Hardware
   2	Computer Accessories
   3	Office Supplies

   
   

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

プレースホルダ・コントロールをサンプル・データとともにロードして、現実的なアプリケーション実行のシミュレーションを行って設計を評価できます。詳細表示 実際のデータ・コントロールの準備ができたら、UIコンポーネントを容易に再バインドしてアプリケーションを完成できます。 多くの複雑なアプリケーションの場合、UIの設計により、モデルまたはデータソースの開発が実質的に進むことがあります。 このUI重視のシナリオの場合、プレースホルダ・データ・コントロールとサンプル・データを準備することが、アプリケーションの動作を適切にモデル化する上で必要不可欠となります。 場合によっては、本番データ・コントロールが利用可能でも、UI設計者はその柔軟性や使いやすさから、プレースホルダ・データ・コントロールの使用を選択することがあります。

サンプル・データを追加すると、アプリケーションの稼働時にページが実際にどのように表示されるのかを把握できます。 次に、テキスト・エディタを使用して.csvファイルを作成し、ファイルをSample Dataタブからインポートします。 また、スプレッドシートからデータをエクスポートして、ファイルを作成することもできます。

5. プレースホルダで使用するサンプル・データを、ノートパッドなどのテキスト・エディタでコピーして貼り付けます。

   1,Laptop,Standard 14 inch display 2GB memory,850.00,Hardware Solutions
   1,Flat Panel Monitor,22 inch with adjustable height stand,499.00,Computer Superstore
   2,Keyboard,Compact USB keyboard,8.00,Computer Superstore
   2,Mouse,Ergonomic wheel mouse,19.99,Office Discounters
   3,Notebooks,One dozen spiral bound notebooks,10.00,Office Discounters
   3,Blue pens,Box of 24 blue pens,20.00,Office Discounters
   3,Stapler,Medium size black stapler,11.99,Office Discounters
   

6. 一時的な場所にファイルを保存して、products.csvという名前を付けます。

7. Data Controlsパネルで、「」Refreshアイコンをクリックし、次に、「Products」ノードを右クリックして、「Edit Placeholder Data Type」を選択します。

   

8. 「Sample Data」タブを選択して、「Import」をクリックします。 Openダイアログで、先ほど作成した「products.csv」ファイルにナビゲートして選択し、「Open」をクリックします。

9. データがEdit Productsダイアログに正しくインポートされたことを確認して、「OK」をクリックします。

   

10. Externally Modified Files警告ダイアログが開いた場合は、「Yes」をクリックします。

プレースホルダ・サンプル・データは、ダイアログを使用して手動で追加、またはインポートした.csvファイルを使用して追加のどちらでも、プレースホルダ・データ・コントロール・パッケージ内のメッセージ・バンドル・プロパティ・ファイルに保存されます。詳細表示 ModelBundle.propertiesファイルには、CategoriesデータとProductsデータのサンプル・データ・プロパティ・ファイルが表示されます。

サンプル・データの追加後、ModelBundle.propertiesファイルをソース・エディタで開くと、次のように表示されます。

プレースホルダ・データ型の属性は、値のリスト（LOV）を構成できます。詳細表示 LOVフォーマット属性は、ドロップダウン・リストまたは選択リスト・ダイアログを表示するUIコンポーネントにバインドします。 プレースホルダ・データ型を作成している場合は、その属性をLOVに構成するためのダイアログを開くオプションを選択できます。 データソースが1つだけの場合は、固定されたLOVのリストのみを作成できます。 動的なLOVのリストを作成するには、ソースとして利用可能なプレースホルダ・データ型が複数存在する必要があります。

属性の構成を開始するため、再びEdit Placeholder Data Typeダイアログを開きます。

1. Data Controlsパネルで「Products」ノードを右クリックして、「Edit Placeholder Data Type」を選択します。

   

2. Edit Productsダイアログで「Supplier」を選択して、Default ComponentがChoice Listに設定されていることを確認します。
   
   実行中のページで値のドロップダウン・リストを表示するため、Supplier属性を構成します。 値のリストには、静的リストを使用します。また、別のプレースホルダ・データ型も使用できます。

   

3. Use Lov Bindingの横にある「」Editをクリックします。

4. Configure List of Valuesダイアログで「Fixed List」を選択します。
   
   
   
   Configure List of Valuesダイアログを使用して、リスト・データを手動で追加することで、プレースホルダ・データ型属性を固定リストとして構成します。

5. 「」Addをクリックして、3つの行のリスト・データを次のラベルと値で追加します。
   
   ドロップダウン・リストで表示されるのがラベルで、値はデータ型の対応する値です。 この場合、ラベルと値は同じです。

   ラベル	値
   Computer Superstore	Computer Superstore
   Hardware Solutions	Hardware Solutions
   Office Discounters	Office Discounters

   
   

6. 「OK」を2回クリックして、両方のダイアログを閉じます。 警告ダイアログが表示されたら、「Yes」をクリックします。
   
   Productsデータ型のSupplier属性のみが変更されたので、IDEの表示時にデータ・コントロールで変更されている箇所はありません。

   

プレースホルダ・データ・コントロールを作成し終えたので、このプレースホルダ・データ・コントロールを使用して、サンプル・データを含んだ実際のページを設計、構築できます。 単純なJSFページを構築して、製品情報を表示および更新します。

1. アプリケーション・ナビゲータで「ViewController」プロジェクトを選択し、メイン・メニューから「File」→「New」→「Web Tier」→「JSF/Facelets」→「Page」を選択します。 次に、「OK」をクリックして、Create JSF Pageダイアログを開きます。

   

2. editProducts.jsfというファイル名を入力して、Dodument TypeにFaceletsが設定されていることを確認します。 Initial Page Layout and Contentの下で「Quick Start Layout」を選択します。 次に、「Browse」をクリックします。

   
   
新しいFacelets（.jsf）ページを作成すると、ADF Facesタグ・ライブラリとJSF Coreタグ・ライブラリ用の2つのxmlns属性を持つ初期ページ構造が自動的に作成されます。詳細表示 初期ファイルに含まれるその他の要素は、ページ・レイアウト用の要素で、具体的には、とに囲まれている他の要素すべてです。 たとえば、新しい空白ページには次のコードが生成されます。

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

3. Component Galleryで、「Two Column」カテゴリ、最初のタイプ、および最初のレイアウト（デフォルトでの選択）を選択します。
   
   右側のOptionsの下にTwo Column Left Sidebar (Split and Stretched)が表示されます。

   
Oracle ADF Facesには、ページの全体レイアウトを定義するときに使用できるコンポーネントが多数用意されています。詳細表示JDeveloperには、こうしたレイアウト・コンポーネントを使用する事前定義済みのページ・レイアウトが含まれているため、正しいページ・レイアウトを素早く簡単に決定できます。

クイック・スタート・レイアウトのComponent Galleryでは、1列、2列、または3列のレイアウトのいずれかを選択し、列の動作（固定幅にするか拡張できるようにするかなど）を決定できます。「Apply Themes」チェックボックスを選択することで、選択したクイック・スタート・レイアウトに色とスタイルを追加することもできます。

4. 「OK」を2回クリックして、両方のダイアログを閉じます。

5. Data Controlsパネルで「Products」ノードを選択してページにドラッグし、secondファセットにドロップします。 Createコンテキスト・メニューから、「Table」→「ADF Table」を選択します。

   
Data Controlsパネルから「Products」の集合をドラッグしてページにドロップし、コンテキスト・メニューから「ADF Table」を選択すると、Productsビュー・オブジェクトのデータを表示、編集する表が作成されます。詳細表示

Data Controlsパネルは、使用可能なビジネス・オブジェクト、メソッド、およびデータ・コントロールのオペレーションを階層で表示します。 Data Controlsパネルを使用すると、一連のドラッグ・アンド・ドロップによるUI設計が実現します。パネルからページに選択されたデータ・オブジェクトをドロップすると、使用できるUIコントロールのリストが表示されます。選択したデータ・オブジェクト（集合または属性）の表示に適切なUIコントロールだけがリストに表示されます。 たとえば、Data Controlsパネルから集合をドラッグする場合、テキスト・フィールドではなく表コントロールとフォーム・コントロールがUIの選択に含まれます。

6. Edit Table Columnsダイアログで「」Deleteをクリックして、CategoryIdをリストから削除し、「OK」をクリックします。

   

7. Data Controlsパネルで「Categories」ノードを選択してページにドラッグし、firstファセットにドロップします。 Createコンテキスト・メニューから、「Table」→「ADF Tree」を選択します。
   
   
   
   「Categories」の集合をData Controlsパネルからページにドラッグして、コンテキスト・メニューから「ADF Tree」を選択すると、表のProductsをナビゲートできるツリーが作成されます。

8. Edit Tree BindingダイアログのでCategoryNameをDisplay Attributesリストに移動し、でCategoryIdをDisplay Attributesリストから外します。

   

9. 「Target Data Source」を展開して、「EL Picker」をクリックします。 Variablesダイアログで、「ADF Bindings」と「bindings」を展開し、「ProductsIterator」を選択します。 次に、「OK」を2回クリックして、両方のダイアログを閉じます。

   

10. Structureウィンドウで、「af:table」コンポーネントを選択します。 次に、プロパティ・インスペクタで、「Behavior」セクションを展開します。

    
    
    

11. Partial Triggersプロパティ・メニューから「Edit」を選択します。 Edit Property: Partial Triggersダイアログで、「facet (first)」を展開し、でtreeコンポーネントをSelectedリストに移動します。「OK」をクリックします。
    
    
    
    この操作は、ツリーの選択が変更されたときに、表をリフレッシュするために必要です。 ツリー・コンポーネントと表コンポーネントをビジュアル・エディタで追加すると、ページは次のように表示されます。

    

12. エディタ・ウィンドウでページを右クリックして、「Run」を選択します。
    
    Create Default Domainダイアログが表示されたら、PasswordフィールドとConfirm Passwordフィールドにデフォルト・パスワード（例：weblogic1）を入力し、「OK」をクリックします。
    
    editProducts.jsfページを実行すると、ブラウザ内に次のようなページが表示されます。
    
    
    
    ページが表示されたら、ツリーのカテゴリを選択して、そのカテゴリの製品を表示できます。製品の詳細を変更でき、ドロップダウン・リストから新しいSupplierを選択できます。 完全なアプリケーションでは、複数のWebページ間のナビゲーションやデータベースへのデータのコミットに対応するために、その他のUIコントロールが追加されます。

このチュートリアルでは、プレースホルダ・データ・コントロールとOracle ADFデータ・バインディングを使用して、完全な実行可能ページを作成しました。このチュートリアルで学習した内容は、以下のとおりです。

• JDeveloperのウィザードおよびダイアログを使用して、アプリケーションおよびプロジェクトを作成する
• サンプル・データの追加を手動および.csvファイルのインポートで行う
• 固定された値のリスト（LOV）を追加する
• JSFページを作成して、Data ControlsパネルからUIコンポーネントをドラッグ・アンド・ドロップする

Oracle ADFデータ・バインディングとOracle Fusion Webアプリケーションについて詳しくは、以下を参照してください。

• Beanデータ・コントロールの使用
• URLサービス・データ・コントロールの使用
• 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)