Oracle ADFのデータ可視化コンポーネント（グラフ、ゲージ、マップ、ピボット・テーブル、ガント・チャート）の概要

目的

このチュートリアルでは、Oracle Application Development Framework（Oracle ADF）のData Visualization Tool（DVT）コンポーネントを使用して、棒グラフ、ゲージ、ガント・チャート、地理マップなどのグラフ表示を作成します。また、ピボット・テーブル の使用方法についても確認します。

所要時間

45分

トピック

このチュートリアルでは、以下の項について説明します。

	概要
	シナリオ
	前提条件
	マスター/ディテール注文ページの作成
	棒グラフの追加
	ゲージの追加
	地理マップの追加
	ピボット・テーブルの作成
	ガント・チャートの作成
	まとめ

スクリーンショットの表示

このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロード し、表示されます。（警告：この操作によって、同時にすべてのスクリーンショットがロードされるため、ご使用のインターネット接続によっては応答時間が遅 くなる場合があります。）

注：各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあるアイコンの 上にカーソルを置いてください。スクリーンショットをクリックすると、非表示になります。

概要

Oracle ADFデータの可視化コンポーネントは、充実したインタラクティブなOracle ADF Facesコンポーネントのセットで、データを解析するためにグラフまたは表形式で表示する機能を提供します。前提条件の項を実行後、Oracle ADF DVTコンポーネントを使用して、データをグラフ表示する方法について説明します。

トピック・リスト に戻る

シナリオ

マスター/ディテール・ページ作成後、アプリケーションにグラ フ・データを追加して、高度な機能の一部を実際に使用します。ページに新しいタブを追加して、専用のOracle ADF DVTコンポーネントを使用します。Oracle ADF Business Componentに基づく事前定義済みのアプリケーション・モデルを使用します。

トピック・リストに戻る

前提条件

このチュートリアルを始める前に、次のことを確認してください。

	必要なコンポーネントのダウンロード とJDeveloper 11gの起動
	データベース・スキーマのインストー ル
	スタートアップ・アプリケーションの アップロード
	データベース接続の作成

トピック・リストに戻る

必要なコンポーネントのダ ウンロードとOracle JDeveloper 11gの起動

以下の手順で、JDeveloper 11gとこのチュートリアルで必要なそのほかのファイ ルをダウンロードします。

トピックに戻る

トピック・リストに戻る

データベース・スキーマの インストール

ここでは、JDeveloperアプリケーションを使用して、データベースにスキーマをインストールし、FOD スキーマと対応するデータを移入します。

トピックに戻る

トピック・リストに戻る

スタートアップ・アプリ ケーションのアップロード

コンポーネントを作成する前に、まずはスタートアップ・アプリ ケーションを開始する必要があります。以下の手順を実行します。

トピックに戻る

トピック・リストに戻る

データベース接続の作成

FODスキーマにデータベース接続を作成します。以下の手順を実 行します。

1.	メニュー・バーから、「 View」→「 Database Navigator」 を選択します。
2.	Database Navigatorで「 BrowseEditApp」を右クリックして、コンテ キスト・メニューから「 New Connection」を選択します。
3.	接続の名前を入力し、接続タイプを選択して、ユーザー名とパスワードを入力します。この例では、接続名に FOD、 ユーザー名に fod、パスワードに fusionを使用します。
4.	「 Test Connection」をクリックして、接続可能であることを確認します。 接続に成功したら、「 OK」をクリックします。
5.	アプリケーション・ナビゲータで、「 Application Resources」パネルをクリッ クして開きます。
6.	アプリケーション・ナビゲータで、Application Resourcesパネルの「 Connections and Database」ノードを展開し、作成したFOD接続を表示します。FODノードを開いて、データベース・オブジェクトを表 示できます。

トピックに戻る

トピック・リストに戻る

スタートアップ・アプリケーション の確認

スタートアップ・アプリケーションは、Orders、OrderItems、ProductsBaseエンティ ティ・オブジェクト、およびそれらに対応するビュー・オブジェクトを使用します。また、必要な追加のビュー・オブジェクトも使用します。

1.	アプリケーション・ナビゲータを開き、「 Model」プロジェクト・ノードを展開します。既存のエ ンティティ、ビュー、リンク・オブジェクト、FODモジュールを確認します。 モデル・プロジェクトには、アプリケーションに必要なすべてのコンポーネントが含まれています。
2.	アプリケーション・ナビゲータで「 Model」プロジェクト・ノードを右クリックし、コンテキス ト・メニューから「 Project Properties」を選択します。
3.	Projedt Propertiesダイアログで「 Business Components」 ノードを選択し、Connectionフィールドで使用可能リストから「 FOD」接続を選択します。次に、「 Update」 ボタンをクリックします。
4.	Connectionダイアログで、「 Test Connection」ボタンをクリックし、操作 が成功したことを確認します。 「 OK」をクリックしてダイアログを閉じ、もう一度「 OK」を クリックします。
5.	Business Componentテスターのモジュールをテストするため、アプリケーション・ナビゲータで「 FODModule」 を右クリックして、「 Run」を選択します。 ブラウザ・ウィンドウが開くまで待ちます。
6.	Oracle Business Component Browserで、「 OrdersItemsOrdersFkLink1」 をダブルクリックします。
7.	ナビゲーション・ボタンを使用して、注文を参照します。
8.	Oracle Business Component Browserウィンドウを 閉じます。
9.	Modelプロジェクトを閉じます。「 ViewController」プロジェクト・ノードを展開 します。Fusion Web Application作成時にデフォルトで作成される既存のコンポーネントを確認します。

トピックに戻る

トピック・リストに戻る

マスター/ディテール注文ページの作 成

スタートアップ・アプリケーションは、Orders、OrderItems、ProductsBaseエンティ ティ・オブジェクト、およびそれらに対応するビュー・オブジェクトを使用します。また、必要な追加のビュー・オブジェクトも使用します。

1.	アプリケーション・ナビゲータで「 ViewController」ノードを右クリックし、コンテキ スト・メニューから「 New」を選択します。
2.	New Galleryで、「 Current Project Technologies」タブを クリックします。次に、「 Web Tier」→「 JSF」カテゴリを選択し、「 JSF Page」項目を選択します。 「 OK」をクリックします。
3.	File Nameフィールドに OrdersAndStocksを設定します。 「 OK」をクリックします。
4.	設計エディタで新しいページが開きます。
5.	コンポーネント・パレットの「 ADF Faces」→「 Layout」 ライブラリで、「 Panel Tabbed」コンポーネントをドラッグし、ページにドロップします。 プロパティ・インスペクタで、 Styleノードの Boxタブで Widthを 100 Percent、Heightを 600 Pixelに設定します。
6.	「 showDetailItem」を選択し、プロパティ・インスペクタの Commonノー ドを使用して、テキスト・フィールドに MDOrdersと入力します。
7.	アプリケーション・ナビゲータで、「 Data Controls」アコーディオン・パネルを展開 し、次に「 FODModuleDataControl」ノードを展開します。
8.	「 OrdersView1」ノードをビジュアル・エディタにドラッグして、ページにドロップしま す。Createコンテキスト・メニューから「 Forms」→「 ADF Read-only Form」を選択します。
9.	Edit Form Fieldsダイアログで、「 Include Navigation Controls」 チェック・ボックスを選択し、次を除くすべてのフィールドを選択します。 OrderId、OrderDate、 OrderStatusCode、OrderTotal、および CustomerId。次に Deleteア イコン「 」をクリックします。 「 OK」をクリックします。
10.	Data Controlsパネルで、「 OrdersView1」ノードを展開します。「 OrderItemsView2」 ノードをフォームの下部にドラッグします。
11.	Createコンテキスト・メニューから「 Tables」→「 ADF Read-only Table」を選択します。
12.	Edit Table Columnsダイアログで、「 Row Selection」と「 Sorting」 を選択します。次を除くすべての列を選択します。 LineItemId、Quantity、UnitPrice、およ び ProductName。 Deleteアイコン「 」をクリックします。 「 OK」をクリックします。
13.	新しい表を選択した状態で、プロパティ・インスペクタの Styleノードで「 Box」 タブを選択し、Widthを 100 Percentに設定します。次に、 Heightを 100 Pixelと設定します。 「 Common」タブを選択し、Idに OrdItemと入力し ます。
14.	ページは次のように表示されます。
15.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、「 File」→「 Save All」を選択します。
16.	ページ内で右クリックし、コンテキスト・メニューから「 Run」を選択するか、 Runボ タン「 」をクリックして、ページを実行します。
17.	ブラウザにページがロードされます。
18.	ナビゲーション・ボタンを試します。
19.	ディテール列の ソート機能を試します。
20.	ブラウザ・ウィンドウを 閉じます。 これで作業用ページが作成されました。次に、棒グラフ、ゲージ、ガント・チャート、地理情報などの グラフ・コンポーネントを追加して、ピボット・テーブルを作成します。

トピック・リスト に戻る

ペー ジへの棒グラフの追加

この項では、倉庫情報に基づいて基本的な棒グラフをOrdersAndStocksページに追加します。次に、 より洗練されたレンダリングを使用して、棒グラフを拡張します。

	基本的な棒グラフの作成
	基本的な棒グラフの改善

トピック・リスト に戻る

基本的な棒グラフの作成

WarehouseStockLevelsViewを使用して、OrdersAndStocksページの MDOrdersタブに棒グラフを追加し、特定の注文の各製品とそれに対応する各倉庫の在庫レベルをレンダリングします。 WarehouseStockLevelsViewは、productId属性でOrderItemsViewにリンクしています。

トピックに戻る

トピック・リストに戻る

基 本的な棒グラフの改善

この項では、棒グラフを拡張し、いくつかのアニメーション機能を 追加します。

トピックに戻る

トピック・リストに戻る

在庫レベルのゲージの使用

同じビューで、各倉庫の在庫レベルを反映するゲージ・グラフを追加できます。

1.	JDeveloperに戻り、エディタ・ウィンドウの OrdersAndStocks.jspxペー ジで、「 MDOrders」タブを右クリックして、コンテキスト・メニューから「 Insert after Show Detail Item」→「 Show Detail Item」を選択し ます。
2.	プロパティ・インスペクタで Commonノードを使用して、Textを StockLevelsに 設定します。
3.	「 StockLevels」タブをクリックし、「 Data Controls」 アコーディオンを開き、「 FODModuleDataControl」→「 OrdersView1」 →「 OrderItemsView2」→「 WarehouseStockLevelsView1」 の順に選択します。 StockLevelsペインにドロップします。
4.	「 Tables」→「 ADF Read-only Table」 を選択します。
5.	Edit Table Columnsダイアログで、「 Row Selection」と「 Sorting」 チェック・ボックスを選択します。次の属性を削除「 」します。 WarehouseId、Address1、PostalCode。 「 OK」をクリックします。
6.	プロパティ・インスペクタの表コンポーネントで、Styleノードの Boxタブを使用して、 Widthを 100 Percent、Heightを 600 pixelsに設定します。
7.	Behaviorノードを使用して、Partial Triggersプロパティを ::OrdItemに 設定します。
8.	コンポーネント・パレットで、「 ADF Data Visualization」→「 Gauge」 コンポーネントを選択して、 Quantity列にドロップします。 Create Gaugeダイアログで、「 Status Meter」カテゴリを選択し、「 Horizontal Status Meter with Thresholds」を選択します。 「 OK」をクリックします。
9.	Structureペインで、「 outputText #{row.Quantity}」を右ク リックして、 削除します。
10.	Structureペインで「 dvt:gauge」コンポーネントを選択し、プロパティ・インスペ クタで次のプロパティを設定します。 Commonノードで、Gauge Typeを STATUSMETERに 設定します。Valueフィールドの横のリストから「 Expression Builder」を選択します。 Expression Builderダイアログで、「 JSP Objects」→「 Row」 を展開し、「 QuantityOnHand」をダブルクリックして、Expressionペインに移動させます。 「 OK」をクリックします。
11.	「 Gauge Data」タブを選択し、MinValueに 0、 MaxValueに 1000を入力します。この例では便宜上、倉庫の単一製品の在庫レベルが常に1,000未満である と仮定します。
12.	「 Style」ノードを選択し、Widthに 100 Percent、 Heightに 80 Pixelと入力します。
13.	Structureペインで、Gaugeコンポーネントの上の「 af:column」を選択し、プ ロパティ・インスペクタの Appearanceノードで、Widthを 200に設 定します。
14.	次に、ゲージのためのしきい値を使用して、最大と最小の在庫レベル指標を指定できるようにします。 Structureペインで、「 gauge」→「 ThresholdSet」 コンポーネントを展開します。
15.	3つのしきい値がThreshold Setに存在することを確認します。
16.	Structureペインで、 1番目の「 Threshold」 コンポーネントを選択します。プロパティ・インスペクタで、idフィールドに t00、 ThresholdMaxValueに 30を設定します。これは、設定したい最小在庫レベルの警告値です。次に、 Textに miniを入力します。
17.	Structureペインで、 2番目の「 Threshold」 コンポーネントを選択します。プロパティ・インスペクタで、idフィールドに t01、 ThresholdMaxValueに 700を設定します。これは、設定したい最適な在庫レベルです。次に、Text に maxiを入力します。
18.	Structureペインで、 3番目の「 Threshold」 コンポーネントを選択します。プロパティ・インスペクタのThresholdMaxValueは、空欄のままにします。AdvancedノードのId フィールドを t02に設定します。
19.	Structureペインで「 tickLabel」コンポーネントを右クリックして、コンテキス ト・メニューから「 Insert inside dvt:tickLabel」→「 Number Format」を選択します。
20.	プロパティ・インスペクタのNumber Formatタグで、 Scaleタブを使用して、 ScaleFactorプロパティを「 SCALEFACTOR_NONE」に設定します。
21.	Structureペインで、「 Metric Label」コンポーネントを選択します。 Commonノー ドを使用して、Metric LabelのPositionプロパティを LP_INSIDE_GAUGE_RIGHTに 設定します。
22.	Structureペインで「 metricLabel」コンポーネントを右クリックして、コンテキ スト・メニューから「 Insert inside dvt:metricLabel」→「 Number Format」を選択します。
23.	プロパティ・インスペクタのNumber Formatタグで、 Scaleタブを使用して、 ScaleFactorプロパティを「 SCALEFACTOR_NONE」に設定します。
24.	ページは次のように表示されます。
25.	Runボタン「 」をクリックして、ページを実行します。
26.	「 StockLevels」タブをクリックして、対応するゲージ付きの在庫レベルを表示します。 在庫レベル・ゲージは、最小警告レベルと最大警告レベルに関して、倉庫内の製品の状況を示します。ゲージ上にマウスを移動すると対応す る数量が表示されます。
27.	別の注文を使用して、 MDOrdersタブから StockLevelsタ ブへの切替えができます。
28.	ブラウザ・ウィンドウを 閉じます。

トピック・リストに戻る

地理マップの作成

先ほどUSにある倉庫に使用したのと同じビューで、Oracleの空間機能を使用して、関連する倉庫の地理的な 位置を示すマップを既存のページの新しいタブに追加します。

1.	JDeveloperに戻り、OrdersAndStocksページの「 StockLevels」 タブを右クリックして、「 Insert after Show Detail Item」→「 Show Detail Item」を選択します。
2.	プロパティ・インスペクタで、 Commonノードを使用して、Textを Locationに 変更します。 Styleノードの Boxタブを使用して、Widthを 100 Percentに、Heightを 600 Pixelに設定します。
3.	「 Location」タブをクリックします。次に、Data Controlsパネルで、「 OrdersView1」 →「 OrderItemsView2」ノードを展開します。「 WarehouseStockLevelsView1」 ノードを選択し、Locationタブのページ上にドロップします。
4.	Createコンテキスト・メニューから、「 Geographic Map」→「 ADF Map and Point Theme」を選択します。
5.	Create Geographic Mapダイアログで、 Newボタン「 」 をクリックして、新規マップ構成を作成します。
6.	必要な場合は、Idに mapConfig1と入力し、次にMapViewer URLフィールドのリストから「 tapViewer」を選択し、「 Edit」ボタ ンをクリックします。 ダイアログで、以下のURL情報を入力します。 URL： http://elocation.oracle.com/mapviewer 「 Test Connection」ボタンをクリックします。接続が成功します。 「 OK」をクリックします。
7.	値 geoを使用して、Geocoder URLフィールドに前の手順を繰り返し、「 Edit」 をクリックします。 次のURL情報を入力します。URL： http://elocation.oracle.com/geocoder/gcserver 「 Test Connection」ボタンをクリックします。接続が成功します。 「 OK」をクリックしますMap Configurationダイアログに戻り、「 OK」をクリックします。
8.	世界地図が表示されます。 Starting Xに -100、Starting Yに 40を 入力して、北米に焦点を合わせます。次に、ズーム・カーソルを上に移動し、 2倍に設定して、「 Refresh」 をクリックします。 「 OK」をクリックします。
9.	Create Point Map Theme Bindingダイアログが表示されます。Addressに「 US (street, city, state, zip)」を選択して、次のフィールドを選択します。 Street Address1 City City State StateProvince Zip Code PostalCode Label WarehouseName Point Dataの下で、以下を指定します。 Data Quantity on Hand Label Quantity 「 OK」をクリックしてマップを挿入します。
10.	Structureウィンドウで、「 dvt:map」コンポーネントを選択します。プロパティ・イ ンスペクタの Behaviorノードで、 PartialTriggersプロパ ティを ::OrdItem（表のID）に設定します。
11.	Appearanceノードで、MapZoomを 3に設定しま す。
12.	マップにツールバーを追加して、ズームやエリア選択などの機能を使用できるようにするには、コンポーネント・パレットから「 Toolbar」 コンポーネントを選択して、 dvt:mapコンポーネントの下にドラッグ・アンド・ドロップします。
13.	Create Map Toolbarダイアログで、MapId（マップ・コンポーネント名）として mapを 選択します。 「 OK」をクリックします。
14.	ページは次のように表示されます。
15.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、「 File」→「 Save All」を選択します。
16.	Runボタン「 」をクリックして、 OrdersAndStocks.jspxペー ジを実行します。製品が複数の場所に保管されている注文と品目を選択します。
17.	「 Location」タブをクリックして、この製品の倉庫の地理的な位置を示すマップを表示しま す。 ウィンドウを移動して、地図のほかの地域を選択します。
18.	右下のウィンドウを縮小します。 ツールバー・ボタンを使用してみます。ここでは、 Zoom inボタン「 」をクリックします。 ズームを実行するため、マップ内をクリックします。
19.	ツールバーのマウス・ポインタ・アイコンをクリックします。次に、任意の 赤色の点をクリックして、 場 所名と 数量を表示するウィンドウをポップアップ表示します。 ポップアップ・ウィンドウを閉じます。
20.	そのほかの機能を使用してみます。たとえば、 Areaボタン「 」を選択して、 Rectangular selectionボタン 「 」をクリックします。次に、マップをクリックして長方形エリアを選択します。
21.	選択したエリアの表面積が計算されて表示されます。
22.	ツールバーで「 View」をクリックし、「 Information Panel」 を選択します。
23.	マップ上にマウスを移動し、地理座標（経度/緯度）を取得します。
24.	ツールバーで、 distanceアイコン「 」をクリックします。
25.	地図上で最初のスポットをダブルクリックし、次に地図のほかのスポットをダブルクリックして2つの場所の間の距離を調べます。
26.	ブラウザ・ウィンドウを 閉じます。

トピック・リストに戻る

ピ ボット・テーブルの作成

先ほど作成したビューを使用して、ページ・フロー・ダイアグラムに新しいページを追加し、新しいページにピボッ ト・テーブルを作成します。

1.	JDeveloperに戻り、「 Model」→「 Application Sources」→「 oracle.fod.model」を展開し、「 SalesPivotTable」 ビューをダブルクリックして、エディタで開きます。
2.	エディタの「 Query」タブをクリックして、SQL文を表示します。このビューでは、製品カテゴ リ、製品名、米国の州によって販売が表示されます。 SELECT category_translations.CATEGORY_NAME as "Category", products_base.product_name as "Product", addresses.state_province as "State", sum(order_items.QUANTITY * order_items.UNIT_PRICE) as "Sales" FROM products_base, product_categories_base, category_translations, orders, order_items, addresses WHERE products_base.product_id = order_items.product_id and products_base.CATEGORY_ID = product_categories_base.CATEGORY_ID and product_categories_base.CATEGORY_ID = category_translations.CATEGORY_ID and orders.SHIP_TO_ADDRESS_ID = addresses.ADDRESS_ID and orders.order_id = order_items.ORDER_ID and addresses.COUNTRY_ID = 'US' GROUP BY category_translations.CATEGORY_NAME, products_base.product_name, addresses.state_province order by category_translations.CATEGORY_NAME, products_base.product_name
3.	「 OrdersAndStocks」タブをクリックしてページを開き、「 Location」 タブを右クリックして、「 Insert after Show Detail Item」→「 Show Detail Item」 を選択します。
4.	プロパティ・インスペクタの Commonノードで、Textを PivotTableに 変更します。 Styleノードの Boxタブで、Widthを 100 Percent、 Heightを 600 Pixelに 設定します。
5.	「 Pivot Table」タブをクリックします。次に、Data Controlsパネルで、「 SalesPivotTable1」 データ・コントロールをページにドラッグします。
6.	Createコンテキスト・メニューから「 Tables」→「 ADF Pivot Table」を選択します。
7.	Create Pivot Table Bindingダイアログが表示されます。「 Category」 と「 Product」を行エッジに、「 State」を列エッジに、「 Sales」 を右側のデータ領域にそれぞれドラッグします。 「 Data Aggregation」タブをクリックします。
8.	Data Aggregationで、 Addボタン「 」をクリックして、新しい合計を作成します。次の値を選択または入力します。 Attribute： Product Function： Sum（デフォルト） Aggregate Value Display： After Aggregate Value Label： Total Product
9.	「 Preview」タブをクリックして、設計をプレビューします。 「 OK」をクリックして、ページにピボット・テーブルを挿入します。
10.	Structureウィンドウで、「 dvt:pivotTable」コンポーネントを選択します。 プロパティ・インスペクタの Styleノードの Boxタブで、Widthを 800 Pixel、Heightを 100 Percentに設定します。
11.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、「 File」→「 Save All」を選択します。
12.	Runボタン「 」をクリックして、ページを実行します。
13.	ブラウザで OrdersAndStocksページが開きます。「 PivotTable」 タブをクリックします。
14.	Sales Tableのデフォルト・ビューが表示されます。列合計を確認します。
15.	ピボット機能をテストします。たとえば、「 Product」列を選択して、 State行 のすぐ下に移動します。
16.	新しい表に各州の製品売上が表示されます。新しい合計を確認します。
17.	「 Product」行を選択して、元の位置に戻します。そのほかの列や行も移動できます。たとえ ば、「 product category」列を選択して、 State行の上に移動 し、州の各製品売上を表示します。 また、レイヤーを交換することもできます。たとえば、レイヤーを別のレイヤーにドロップして、CategoryとStateを交換でき ます。
18.	ブラウザ・ウィンドウを 閉じます。

トピック・リストに戻る

ガン ト・チャートの作成

この項では、ページにガント・チャートの新しいタブを追加します。マスター/ディテール関係にリンクされた OrderShippingSummaryとOrderShippingDetailsの2つの既存のビューを使用して、ページに新しいタブを追加し、新 しいページにガント・チャートを作成します。

1.	JDeveloperに戻り、「 Model」→「 Application Sources」→「 oracle.fod.model」の順にノードを展開して、「 OrderShippingSummary」 ビュー・オブジェクトを選択します。
2.	エディタの「 Query」タブをクリックして、SQL文を表示します。この問合せでは、すべての注 文の各ユーザーに対し、もっとも古い発注日と最新の出荷日を取得します。問合せは次のように表示されます。 SELECT persons.PERSON_ID, persons.FIRST_NAME as "First Name", persons.LAST_NAME as "Last Name", min(orders.ORDER_DATE) as "Order Date", max(orders.ORDER_SHIPPED_DATE) as "Shipped Date", concat('Summary', '') as "Task Type" FROM orders, persons WHERE orders.CUSTOMER_ID = persons.PERSON_ID group by persons.person_id, persons.FIRST_NAME, persons.last_name
3.	「 Model」→「 Application Sources」 →「 oracle.fod.model」の順にノードを展開して、「 OrderShippingDetails」 ビュー・オブジェクトを選択します。
4.	エディタの「 Query」タブをクリックして、SQL文を表示します。この問合せでは、各ユーザー のすべての注文とOrderShippingSummaryの詳細情報を取得します。問合せは次のように表示されます。 SELECT persons.PERSON_ID, orders.ORDER_ID, orders.ORDER_DATE as "Order Date", orders.ORDER_SHIPPED_DATE as "Shipped Date", persons.FIRST_NAME as "First Name", persons.LAST_NAME as "Last Name", concat('Normal', '') as "Task Type" FROM orders, persons WHERE orders.CUSTOMER_ID = persons.PERSON_ID
5.	「 FODModule」をダブルクリックして、OrderShippingSummaryと OrderShippingDetails間の既存の関係を表示します。
6.	OrdersAndStocksページに戻り、「 PivotTable」 タブを右クリックして、「 Insert after Show Detail Item」→「 Show Detail Item」を選択します。
7.	プロパティ・インスペクタの Commonノードで、Textを OrdersPlanningに 変更します。 Styleノードの Boxタブで、Widthを 100 Percentに、Heightを 600 Pixelに設定します。
8.	「 OrdersPlanning」タブをクリックします。次に、Data Controlsパネルで、「 OrderShippingSummary2」を選択し、ページにドロップします。
9.	動的メニューから、「 Gantts」→「 Project」を選 択します。
10.	Create Project Ganttダイアログで、「 PersonId」属性を選択して、 Deleteボタン「 」をクリックします。 Tasksタブで、ドロップダウン・リストか ら次の値を選択します。 Task Id PersonId Task Type TaskType Start Time OrderDate End Time ShippedDate これらの値は、個々の注文すべてについて、各ユーザーに、もっとも古い発注日から最新の出荷日までのタスク期間のサマリーが作成される ことを示します。
11.	次に、各注文に特定の期間を表示するサブタスクを作成します。ダイアログの「 Subtasks」タ ブをクリックし、ドロップダウン・リストから次の値を選択します。 Subtasks Accessor OrderShippingDetails Sub Task Id OrderId Sub Task Type TaskType Start Time OrderDate End Time ShippedDate 「 OK」をクリックします。
12.	プロパティ・インスペクタの Commonタブで、Start TimeとEnd Timeをそれぞれ現在の日付（またはFODスキーマをインストールした日付）の2カ月前と1カ月後に変更します。 ここに示されている日付は、実際に使用しているデータベースの日付とは一致しない可能性が高いことに注意してください。 Styleノードの Boxタブで、Widthを 100 Percentに、Heightを 100 Percentに設定します。 ページは次のように表示されます。
13.	Runボタン「 」をクリックして、ページを実行します。
14.	ブラウザにページがロードされます。 「 OrdersPlanning」タブをクリックします。
15.	ガント・チャートに、各ユーザー/顧客ごとの全注文の合計期間が表示されます。
16.	いずれかのユーザーの「 +」アイコンをクリックして、発注明細を展開し、各注文の状態を表示しま す。
17.	左ペインを 拡大して、さらに列を表示します。
18.	ガント・チャートのツールバーがデフォルトで作成されたことを確認します。 Zoom outアイコ ン「 」をクリックして、タスクの表示の変化を確認します。列ラベルを 週か ら 月や 四半期に置き換えます。
19.	メニューの「 View」→「 Time Scale」をクリック します。 時間スケールの単位を選択できます。
20.	ブラウザ・ウィンドウを 閉じます。
21.	これでこのチュートリアルは完了です。

トピック・リストに戻る

まとめ

このチュートリアルでは、タブ付きのJSFページの作成方法と、 Oracle ADF DVTグラフ機能の使用方法について説明しました。

	マスター/ディテール・ページの作成
	棒グラフの追加
	ゲージ・チャートの追加
	地理情報の追加
	ピボット・テーブルの作成
	ガント・チャートの作成

トピック・リストに戻る

このアイコンの上にカーソルを置くと、すべてのスクリーンショットが非表示になります。