このチュートリアルでは、Oracle Application Development Framework(Oracle ADF)のData Visualization Tool(DVT)コンポーネントを使用して、棒グラフ、ゲージ、ガント・チャート、地理マップなどのグラフ表示を作成します。 また、ピボット・テーブルの使用方法についても確認します。 Oracle ADFデータの可視化コンポーネントは充実したインタラクティブなOracle ADF Facesコンポーネントのセットであり、データの解析を目的としたグラフまたは表形式での表示機能を提供します。
詳細を表示/非表示詳細表示
目的 所要時間 アプリケーション

このチュートリアルでは、事前定義されたアプリケーションを確認してから、Oracle JDeveloper 11g Version 11.1.2.0.0を使用してWebアプリケーションを構築します。 FODデータベース・スキーマに基づくデータ・モデルに対しては、Oracle ADF Business Componentsを使用します。 Webクライアント側では、JavaServer Faces(JSF)が使用されます。 マスター・ディテール関係を持つメインの注文ページを作成した後で、棒グラフ、ゲージ、地理マップ、ガント・チャート、ピボット・テーブルを追加して、UIを改良します。
これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍します。

120分 zipファイルのダウンロード
パート1: モデルの検証とUIの構築開始
はじめに、専用アプリケーションを使用してFODスキーマをインストールし、このチュートリアルに必要なデータベースを構築します。 次に、事前定義されたアプリケーションを開き、あらかじめ含まれているModelプロジェクトを検証します。 最後に、Oracle ADF Business Componentsを使用してマスター・ディテール・ページの作成を開始します。
EJB/JPAコンポーネントを使用してモデルを構築します。 詳細を表示/非表示詳細表示
ステップ1: データベース・スキーマの作成と移入
アプリケーションの使用を開始する前に、FODデータベース・スキーマを作成する必要があります。
  1. OTNからFODスキーマのzipファイルをダウンロードするか、またはこのリンクを右クリックして、コンテキスト・メニューから「対象をファイルに保存」を選択し、fod_11.zipファイルを任意のローカル・ディレクトリにダウンロードします。

  2. 任意のローカル・ディレクトリ(例:tempディレクトリ)で、fod_11.zipファイルを解凍します。

  3. スタート」→「すべてのプログラム」→「Oracle Fusion Middleware 11.1.2.0.0」→「JDeveloper Studio 11.1.2.0.0」を選択して、Oracle JDeveloperを起動します。

  4. ロールを選択するよう指示されたら、「Studio Developer (All Features) 」を選択して、「OK」をクリックします。

    起動時のSelect Roleダイアログ
  5. Close」をクリックして、Tip of the Dayウィンドウを閉じます。

    ロードが終了すると、JDeveloper IDEが表示されます。 詳細を表示/非表示詳細表示
  6. Open Application」リンクをクリックするか、ツール・メニューから「File」→「Open」を選択します。

    Open Applicationリンク
  7. fod_11.zipファイルを解凍した場所(例:d:\temp\FOD_11\Infrastructure)で、ワークスペースinfrastructure.jwsを見つけます。

    Open Applicationダイアログ

    Open」をクリックします。 プロジェクトを移行するよう指示された場合は、移行ウィザードの手順に従って次に進みます。

    プロジェクトを移行します。 詳細を表示/非表示詳細表示
  8. アプリケーション・ナビゲータで、「MasterBuildScript」→「Resources」ノードを展開し、「build.properties」をダブルクリックしてエディタで開きます。

    build.propertiesファイル
  9. build.propertiesファイルに適切な値を設定します(jdeveloper.homeと、すべてのjdbc.*とdb.*の設定)。 関連する設定は、次のとおりです。

    パラメータ名
    middleware.home middleware.home変数に、JDeveloperをインストールしたディレクトリ(例:C:/oracle/middleware)を設定します。
    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
    build.propertiesファイル
  10. MasterBuildScriptプロジェクトで、「build.xml」ファイルを選択します。

    Infrastructureアプリケーションを表示したアプリケーション・ナビゲータ
  11. Structureウィンドウで、「refreshSchema」ターゲットを右クリックして、「Run Target "refreshSchema"」を選択します。

    Structureペイン
  12. プロンプトが表示されたら、データベース・システム・ユーザーのパスワードを入力します。

    データベース・パスワードのEnter Propertyダイアログ

    Continue」をクリックします。

  13. ログ・ウィンドウに重要なエラーが表示されていないことを確認します。 次のように表示されます。

    Logウィンドウ
  14. Infrastructureのアプリケーション名の横にある下矢印「Close」をクリックし、「Close Application」を選択します。

    アプリケーションの終了
ステップ2: スタートアップ・アプリケーションの準備

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

  1. Gantt.zipファイルをダウンロードします。 このリンクを右クリックしてコンテキスト・メニューから「対象をファイルに保存」を選択し、gantt.zipファイルを任意のローカル・ディレクトリにダウンロードします。

    Save Asダイアログ
  2. 選択したローカル・ディレクトリ(例:temp)で、Gantt.zipファイルを解凍します。

    Gantt.zipファイルのコンテキスト・メニュー
  3. アプリケーション・ナビゲータで「Open Application」リンクをクリックします。

    Open Applicationリンク
  4. ワークスペースc:\temp\Gantt\BrowseEditApp\BrowseEditApp.jwsを見つけます。

    Open Applicationダイアログ

    Open」をクリックします。 プロジェクトを移行するよう指示された場合は、「Yes」をクリックします。

    プロジェクトを移行します。 詳細を表示/非表示詳細表示
  5. FODスキーマに対するデータベース接続を作成する必要があります。 次の手順を実行します。 アプリケーション・ナビゲータで「Model」プロジェクト・ノードを右クリックし、コンテキスト・メニューから「Project Properties」を選択します。

    Project Propertiesオプション
  6. Project Propertiesダイアログで「ADF Business Components」ノードを選択し、Connectionフィールドで「AddボタンCreateアイコンをクリックして新規データベース接続を作成します。

    Creating a new connectionオプション
  7. 接続の名前を入力し、接続タイプを選択して、ユーザー名とパスワードを入力します。 この例では、接続名にFOD、ユーザー名にfod、パスワードにfusionを使用します。 ここに例として示した値は、使用環境に合わせて変更する必要があります。

    プロパティ
    Connection Name FOD
    Username/Password fod /fusion
    Save Password チェック・ボックスを選択
    Driver Thin
    Host Name スキーマがインストールされているマシン(例:localhost)
    SID

    FODスキーマがインストールされているデータベース(例:XE、orcl)


    新規データベース接続のパラメータ
  8. Test Connection」をクリックして、接続可能であることを確認します。

    新規接続のテスト

    接続に成功したら、「OK」をクリックします。 もう一度「OK」をクリックして、Project Propertiesダイアログを閉じます。


    接続に失敗した場合、詳細を表示/非表示詳細表示
  9. アプリケーション・ナビゲータで「Application Resources」アコーディオンをクリックして開きます。

    アプリケーション・ナビゲータ
  10. Application Resourcesで「Connections」→「Database」ノードを展開し、先ほど作成したFOD接続を表示します。 FODノードを展開すると、データベース・オブジェクトを表示できます。

    Application Resources
ステップ3: スタートアップ・アプリケーションの確認

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

  1. アプリケーション・ナビゲータを開き、「Model」プロジェクト・ノードを展開します。 既存のエンティティ、ビュー、リンク・オブジェクト、FODモジュールを確認します。

    アプリケーション・ナビゲータのModelプロジェクト

    モデル・プロジェクトには、アプリケーションに必要なすべてのコンポーネントが含まれています。

  2. テスターでモジュールを実行するため、アプリケーション・ナビゲータで「FODModule」を右クリックして「Run」を選択します。

    FODModuleの実行

    ブラウザ・ウィンドウが開くまで待ちます。

    モデルをテストします。 詳細を表示/非表示詳細表示
  3. Oracle ADF Model Testerで、「OrdersItemsOrdersFkLink1」をダブルクリックします。

    Oracle Business Component Browser
  4. ナビゲーション・ボタンを使用して、複数の注文を参照します。

    BCブラウザ内のマスター・ディテール・フォーム
    BCブラウザでは、 詳細を表示/非表示詳細表示
  5. 前後にナビゲートしてデータを確認します。

    BCブラウザでのマスター行の変更
  6. Oracle Business Component Browserウィンドウを閉じます

    BCブラウザの終了
  7. Modelプロジェクトを閉じます。 「ViewController」プロジェクト・ノードを展開します。 Fusion Web Applicationの作成時にデフォルトで作成される既存のコンポーネントを確認します。

    アプリケーション・ナビゲータのViewControllerプロジェクト
ステップ4: マスター・ディテール注文ページの作成

ViewControllerプロジェクトでは、Orders、OrderItems、ProductsBaseエンティティ・オブジェクトに加えて、それらに対応するビュー・オブジェクトを使用します。 また、必要な追加のビュー・オブジェクトも使用します。 UIプロジェクトのベースとして使用されるマスター・ディテール・ページを作成するには、次の手順を実行します。

  1. アプリケーション・ナビゲータで「ViewController」ノードを右クリックし、コンテキスト・メニューから「New」を選択します。

    プロジェクトのNewメニュー・オプション
  2. New Galleryで、「Current Project Features」タブをクリックします。次に、「Web Tier」→「JSF/Facelets」カテゴリを選択し、「Page」項目を選択します。

    New Galleryダイアログ

    OK」をクリックします。

  3. File NameフィールドにOrdersAndStocksを設定します。

    Create JSF Pageダイアログ

    OK」をクリックします。

  4. 設計エディタで新しいページが開きます。 ページが選択されていることを確認します。

    ページ設計エディタ
  5. コンポーネント・パレットの「ADF Faces」→「Layout」ライブラリで、「Panel Tabbed」コンポーネントをドラッグし、ページにドロップします。
    特定のコンポーネントを探すには、コンポーネント・リストの上にある検索ボックスを使用します。

    ページへのPanel Tabbedのドロップ
  6. showDetailItem」を選択し、プロパティ・インスペクタのCommonノードを使用して、テキスト・フィールドにMDOrdersと入力します。

    プロパティ・インスペクタ
  7. アプリケーション・ナビゲータで、「Data Controls」アコーディオン・パネルを開き、「FODModuleDataControl」ノードを展開します。

    Data Controlsアコーディオン
  8. OrdersView1」ノードをビジュアル・エディタにドラッグして、ページにドロップします。 Createコンテキスト・メニューから「Forms」→「ADF Read-only Form」を選択します。

    ページへのDataControlのドロップ
  9. Edit Form Fieldsダイアログで、「Include Navigation Controls」チェック・ボックスを選択し、OrderId、OrderDate、OrderStatusCode、OrderTotal、CustomerIdを除くすべてのフィールドを選択します。 次に、「DeleteアイコンDeleteアイコンをクリックします。

    Edit Form Fieldsダイアログ

    OK」をクリックします。

    フィールドの削除方法についての追加事項。 詳細を表示/非表示詳細表示
  10. Data Controlsパネルで、「OrdersView1」ノードを展開します。 「OrderItemsView2」ノードをフォームの下部にドラッグします。

    ページへのDataControlのドロップ
  11. Createコンテキスト・メニューから「Table」→「ADF Read-only Table」を選択します。

    ページへのDataControlのドロップ
  12. Edit Table Columnsダイアログで、「Single Row」と「 Enable Sorting」を選択します。 すべての列を選択してから、LineItemId、Quantity、UnitPrice、ProductNameの選択を解除します。 次に、「DeleteアイコンDeleteアイコンをクリックします。

    Edit Table Columnsダイアログ

    OK」をクリックします。

  13. 新しい表を選択した状態で、プロパティ・インスペクタのStyleノードで「Layout」タブを使用し、StyleClassプロパティにAFStretchWidthを設定します。

    プロパティ・インスペクタ
  14. Common」タブを選択し、IdにOrdItemと入力します。

    プロパティ・インスペクタ
    デフォルトIDを上書きします。詳細を表示/非表示詳細表示
  15. ページは次のように表示されます。

    ページ設計エディタ
  16. JDeveloperメニュー・バーの「Save AllアイコンSave Allアイコンをクリックするか、または「File」→「Save All」を選択します。

  17. ページ内で右クリックし、コンテキスト・メニューから「Run」を選択するか、または「RunアイコンRunボタンをクリックして、ページを実行します。

    Runコンテキスト・メニュー・オプション
  18. ブラウザにページがロードされます。

    ブラウザ内で実行されているページ
  19. ナビゲーション・ボタンを試します。

    ブラウザ内で実行されているページ
  20. ディテール列のソート機能を試します。

    ブラウザ内で実行されているページ
  21. ブラウザ・ウィンドウを閉じます

    これで作業用ページが作成されました。次に、棒グラフ、ゲージ、ガント・チャート、地理情報などのグラフ・コンポーネントを追加して、ピボット・テーブルを作成します。

ブックマーク 印刷 すべて表示 | すべて非表示
トップへ戻る
Copyright © 2011, Oracle and/or its affiliates. All rights reserved.