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とこのチュートリアルで必要なそのほかのファイ ルをダウンロードします。

1.	Oracle JDeveloper 11g製品版にアクセスできるか、または インストール済みであること。この製品は、Oracle Technology Networkからダウンロードできます。
2.	OTNからFODスキーマのzipファイルをダウンロードするか、またはこのリ ンクを右クリックして、コンテキスト・メニューから「対象をファイルに保存」を選択し、FOD_11.zipファイルを任意のローカル・ディレクトリにダ ウンロードします。
3.	任意のローカル・ディレクトリ（tempディレクトリなど）で、FOD_11.zip ファ イルを解凍します。
4.	「スタート」→「すべてのプログラム」 →「Oracle Fusion Middleware」→「JDeveloper Studio 11.1.1.0.0」を選択して、Oracle JDeveloperを起動します。 Migrate User Settingsダイアログ・ボックスが開いたら、「NO」 をクリックします。 ユーザー・ロールを設定するよう尋ねられたら、「Default」 を選択します。 Tip of the Dayウィンドウを閉じます。
5.	JDeveloper IDEが表示されます。

トピックに戻る

トピック・リストに戻る

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

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

1.	「Open Application」リンクをクリックするか、ツール・メニューから「File」 →「Open」を選択します。 FOD_11.zipファイルを解凍 した作業領域infrastructure.jws（d:\temp\Infrastructure） を見つけます。 「Open」をクリックします。プロジェクトを移行するよう指 示された場合は、移行ウィザードの手順に従って次に進みます。
2.	アプリケーション・ナビゲータで、「MasterBuildScript」→「Resources」 ノードを展開し、「build.properties」をダブルクリックしてエディタで開きます。
3.	build.propertiesファイルに適切な値を設定します（jdeveloper.homeと、すべてのjdbc.*と db.*の設定）。関連する設定は、次のとおりです。 jdeveloper.home JDeveloperをインストールした場所（c:/middleware/jdeveloper） jdbc.urlBase データベースのベースURI（jdbc:oracle:thin:@localhost） jdbc.port データベースのポート番号（1521） jdbc.sid データベースのインスタンス名（XEまたはORCL） db.adminUser 管理者権限をもつデータベース・ユーザー（system） db.demoUser 作成するデータベース・ユーザーおよびスキーマ名（fod） db.demoUser.password 作成するデータベース・ユーザーのパスワード（fusion） db.demoUser.tablespace ユーザー表領域名（USERS） db.demoUser.tempTablespace 一時表領域名（TEMP）
4.	MasterBuildScriptプロジェクトで、「build.xml」ファイルを選択しま す。
5.	Structureウィンドウで、「refreshSchema」ターゲットを右クリックして、「Run Target "refreshSchema"」を選択します。 プロンプトが表示されたら、データベース・システム・ユーザーのパスワードを入力します。 「Continue」をクリックします。
6.	ログ・ウィンドウに重要なエラーが表示されていないことを確認します。次のように表示されます。
7.	Infrastructureのアプリケーション名の横にある下矢印「」をクリックして、「Close Application」を選択 します。
8.	Confirm Close Applicationダイアログで、「Close application and remove it from IDE」を選択します。 「OK」をクリックします。

トピックに戻る

トピック・リストに戻る

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

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

1.	Gantt.zipファイルをダウンロードします。このリンクを右クリックしてコンテキスト・メニューから「対象をファイルに保存」 を選択し、Gantt.zipファイルを任意のローカ ル・ディレクトリにダウンロードします。
2.	選択したローカル・ディレクトリ（temp）で、Gantt.zipファ イルを解凍します。
3.	アプリケーション・ナビゲータで「Open Application」 リンクをクリックします。 作業領域c:\temp\BrowseEditApp\BrowseEditApp.jwsに 移動します。 「Open」をクリックします。プ ロジェクトを移行するか尋ねられた場合は、「Yes」をクリックします。
4.	アプリケーションがOracle JDeveloperにロードされます。

トピックに戻る

トピック・リストに戻る

データベース接続の作成

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に戻り、「Model」→「Application Sources」→「oracle.fod.model」を展開します。続いて「WarehouseStockLevelsView」 ビューをダブルクリックして、エディタで開きます。
2.	エディタの「Query」タブをクリックして、SQL文を表示 します。製品のあるUSの倉庫IDに基づいて、倉庫ID、倉庫名、製品ID、手持ち在庫数量の列がビューに返されるのを確認します。 SELECT Warehouses.Warehouse_id, Warehouses.Warehouse_Name, WarehouseStockLevels.Product_Id, WarehouseStockLevels.Quantity_On_Hand, Addresses.Address1, Addresses.City, Addresses.State_Province, Addresses.POSTAL_CODE, Addresses.Country_Id FROM WAREHOUSES Warehouses, Warehouse_Stock_Levels WarehouseStockLevels, Addresses Addresses WHERE Warehouses.warehouse_id = WarehouseStockLevels.warehouse_id and Addresses.address_id = Warehouses.address_id and Addresses.Country_id='US'
3.	エディタ・ウィンドウで、「OrdersAndStocks」タブをクリックして、ページを表示し ます。
4.	Data Controlsパネルで、「OrdersView1」→「OrderItemsView2」 ノードを展開します。「WarehouseStockLevelsView1」ノードを選択し、OrderItemsディ テール表の下のStructureペインにドロップします。 Createコンテキスト・メニューから、「Graphs」を 選択します。
5.	Component Galleryダイアログで、カテゴリとして「Bar」を選択します。次に、 グラフの種類として「Bar」を選択します。それぞれのカテゴリに対し、Quick Start Layoutにさまざまなレイアウトが提供されていることを確認します。最初のレイアウトを選択します。 「OK」をクリックします。
6.	必要に応じて、Create Bar Graphダイアログで「Include Child Accessors」 の選択を解除します。次に、以下の値を指定します。 - Bars：Add「」 をクリックして、使用可能リストから「QuantityOnHand」を選択しま す。 - X Axis：Add「」 をクリックして、ドロップダウン・リストから「WarehouseId」を選択します。 - X Axis：Add「」 をクリックして、ドロップダウン・リストから「City」を選択します。 Attribute Labelsセクションで、以下の設定をします。 Attribute Label QuantityOnHand Quantity（値を入力） WarehouseId WarehouseName （ドロップダウ ン・リストから） City City （ドロップダウン・リストから） 「Swap Bars with X Axis」ボタンをクリックし、次に「Preview」 タブをクリックします。 データベースに接続後、棒グラフのプレビューが表示されます。 「OK」をクリックします。
7.	dvt:barGraphコンポーネントのプロパティ・インスペクタのAppearanceグルー プで、次のプロパティを設定します。 Style Comet 次に、「Image」ノードを展開し、次のプロパティを設定し ます。 ImageHeight 300 ImageWidth 400 ImageFormat Flash 3D Effect true
8.	BehaviorノードのPartialTriggers項目の横で「Edit」 オプションを選択します。 次に、Edit Propertyダイアログから「table* - OrdItem」を移動しま す。 これにより、グラフがOrder Item行の選択に同期するようになります。 「panelFormLayout」ノード→「facet」 ノード→「panelGroupLayout」ノードのように展開し、グラフがナビゲーション操作に同期するようにし ます。 「OK」をクリックします。
9.	Partial Triggersプロパティは、次のように表示されます。
10.	作業内容を保存してから、ページ内で右クリックし、コンテキスト・メニューから「Run」 を選択します。
11.	ブラウザにページがロードされます。それぞれの棒グラフに対して、倉庫名と都市が右側の凡例に示されます。個々の棒グラフは、異なる色 と関連づけられます。各棒グラフの上にカーソルを置くと、ツールチップ・ラベル（倉庫名、都市、数量）が表示されます。
12.	ディテール表で別の行を選択し、同期プロセスをテストします。
13.	「Next」ボタンをクリックして、順序を変えた場合の棒グラフの同期をテストします。 ブラウザ・ウィンドウを閉じます。

トピックに戻る

トピック・リストに戻る

基 本的な棒グラフの改善

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

1.	JDeveloperに戻り、「dvt:barGraph」コンポーネントを選択します。次に、Appearance セクションで、SeriesEffectにSE_GRADIENT、 SeriesRolloverBehaviorにRB_HIGHLIGHTを設定します。
2.	AppearanceのAnimationセクションで、 AnimationOnDataChangeをON、AnimationOnDisplayをAutoに 設定します。 注意：animateOnDisplay がonに設定されている場合、ページでグラフが最初に表示された際に、アニメーション・エフェクトが適用されます。 AnimateOnDataChangeがonに設定されている場合、データが変更されるたびに（表の列をクリックした場合も同様に）グラフにアニメー ション・エフェクトが適用されます。
3.	Structureペインでdvt:barGraphを展開し、Legend Areaで、RenderedプロパティをDefault (TRUE) に、 AutomaticPlacementをAP_NEVERに設定します。
4.	作業を保存し、Runボタン「」をクリックして、ページを実行します。
5.	ブラウザ・ウィンドウにページが表示されます。最後の値の位置に到達するまで、棒グラフのアニメーションに注意します。
6.	棒グラフの上にマウスを置くと、ほかの棒グラフが目立たなくなります。
7.	ほかの棒グラフを選択して、ハイライト・プロセスを変更します。それに応じて、右側の凡例もハイラ イトされます。
8.	「Next」ボタンをクリックして順序を変更します。アニメーション（伸びていく棒グラフの上に三 角マークが表示されている）は続き、 最後の棒グラフに到達すると終わります。1つの棒グラフの上にマウスを移動します。
9.	凡例の部分で倉庫名を選択して、ほかの棒グラフをハイライトしてみることもできます。
10.	ブラウザ・ウィンドウを閉じます。

トピックに戻る

トピック・リストに戻る

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

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

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グラフ機能の使用方法について説明しました。

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

トピック・リストに戻る

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