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

詳細表示

また、ゲージ・コンポーネントを使用して倉庫内の数量を表し、最後にExcelへのエクスポート機能を追加します。

1. JDeveloperに戻り、「Model」→「Application Sources」→「oracle.fod.model」を開きます。続いて「WarehouseStockLevelsView」ビューをダブルクリックして、エディタで開きます。

   

2. エディタの「Query」タブをクリックして、SQL文を表示します。 このビューは、製品の在庫がある米国内のすべての倉庫について、WAREHOUSE_ID、WAREHOUSE_NAME、PRODUCT_ID、QUANTITY_ON_HANDという列を返します。
   

   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.jsf」タブをクリックして、ページを表示します。

   

4. Data Controlsパネルで、「OrdersView1」→「OrderItemsView2」ノードを開きます。 「WarehouseStockLevelsView1」ノードを選択し、StructureペインのshowDetailItem - MDOrders上にドロップします。

   

5. Createコンテキスト・メニューから、「Graph」オプションを選択します。

   

6. Component Galleryダイアログで、カテゴリとして「Bar」を選択し、グラフ・タイプとして「Bar」を選択します。 Quick Start Layoutsでは、カテゴリごとに各種のレイアウトが提供されています。 デフォルトのクイック・レイアウトを選択したままにします。

   

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

7. 必要に応じて、Create Bar Graphダイアログで「Include Child Accessors」の選択を解除します。次に、以下の値を指定します。
   - Bars： 「」Addアイコンをクリックし、Availableリストから「QuantityOnHand」を選択します。
   - X Axis： 「」Addアイコンをクリックして、ドロップダウン・リストから「WarehouseId」を選択します。
   - X Axis： 「」Addアイコンをクリックして、ドロップダウン・リストから「City」を選択します。
   ドラッグ・アンド・ドロップ方式を使用して、Availableリストからコンポーネントを選択し、BarsフィールドまたはX Axisフィールドにドロップすることもできます。

   Attribute Labelsセクションで以下の設定を行います。
   

   Attribute	Label
   QuantityOnHand	Quantity（値を入力）
   WarehouseId	WarehouseName （ドロップダウン・リストから選択）
   City	City （ドロップダウン・リストから選択）

   

   「Swap Bars 」ボタンをクリックし、次に「Preview」タブをクリックします。

   

8. データベースに接続した後で、棒グラフのプレビューが表示されます。

   

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

9. dvt:barGraphコンポーネントのProperty Inspectorで、Appearanceノードの3D Effectプロパティをtrueに設定します。

   

10. Imageセクションで、ImageFormatにFLASHを設定します。

    

11. BehaviorノードのPartialTriggers項目の横で「Edit」オプションを選択します。

    

12. Edit Propertyダイアログで、「table* - OrdItem」を右側に移動します。 こうすることで、現在選択されている注文項目行とグラフが同期するようになります。

    
    

    このウィンドウは開いたままにします。

13. 「panelFormLayout」→「facet」→「panelGroupLayout」ノードを開き、4つのcommandButtonsすべてを右側に移動します。こうすることで、ナビゲーション・コントロールのクリック時にもグラフが同期されます。

    

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

14. Partial Triggersプロパティは、次のように表示されます。

    

15. 作業内容を保存してから、ページ内で右クリックし、コンテキスト・メニューから「Run」を選択します。

    

16. ブラウザにページがロードされます。 右側の凡例には、各棒の倉庫名と都市が示されます。 棒ごとに色が異なります。 各棒の上にカーソルを置くと、ツールチップ・ラベル（倉庫名、都市、数量）が表示されます。

    

17. 棒グラフの同期プロセスをテストするため、ディテール表内の別の行を選択します。

    

18. 「Next」ボタンをクリックして、順序を変えた場合の棒グラフの同期をテストします。

    

19. ブラウザ・ウィンドウを閉じます。

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

1. JDeveloperに戻り、Structureペインで「dvt:barGraph」コンポーネントを選択します。次に、Property InspectorのAppearance セクションで、SeriesEffectにSE_GRADIENTを、SeriesRolloverBehaviorにRB_HIGHLIGHTを設定します。

   
   Findフィールドを使用すると、簡単にプロパティを取得できます。 詳細表示 Propertyペインで特定のプロパティを探すには、プロパティ名に相当する文字列の最初の部分を入力します。 入力を進めると、最初に一致した文字列が表示され、ハイライトされます。 「Find next」ボタンまたは「Find previous」ボタンをクリックすると、一致したプロパティ間をナビゲートできます。
   
   
   

2. AppearanceのAnimationセクションで、AnimationOnDataChangeをautoに、AnimationDurationを3000に、AnimationOnDisplayをautoに設定します。

   
   アニメーション・パラメータについて。 詳細表示
   
   animationOnDisplayがautoに設定されている場合、グラフが最初にページ上に表示された際にアニメーション・エフェクトが適用されます。
   
   AnimateOnDataChangeがautoに設定されている場合、データが変更されるたびに（表の行をクリックした場合も同様に）、グラフにアニメーション・エフェクトが適用されます。

   .
   
   AnimationDurationはアニメーション・エフェクトが適用される時間（ミリ秒）を示します。

3. Structureペインで「dvt:barGraph」コンポーネントを開き、「dvt:legend Area」を選択します。 Property Inspectorで、Renderedプロパティを<default> (TRUE)に、AutomaticPlacementをAP_NEVERに設定します。

   

4. 作業を保存し、「」Runボタンをクリック（またはページを右クリックしてコンテキスト・メニューから「Run」を選択）して、ページを実行します。

5. ブラウザ・ウィンドウにページが表示されます。 棒グラフのアニメーションが最後の値の位置に到達するまで確認します。

   
   
   

6. 特定の棒の上にマウスを置くと、その他の棒が影の表示になります。

   

7. その他の棒を選択して、ハイライト表示を変更します。 それに応じて、右側の凡例もハイライトされます。

   

8. ディテール表から別の行を選択し、この新しい項目に対する在庫を視覚化します。 ここでも明細項目の変更に従って、グラフ・データが変更されることを確認します。

   

9. 「Next」ボタンをクリックして別の順序に変更します。 引き続き同期が実行されます。

   

10. 凡例セクションで倉庫名を選択した場合も、対応する棒がハイライト表示されます。

    

11. ブラウザ・ウィンドウを閉じます。

WarehouseStockLevelsViewを使用して、各倉庫の在庫レベルを反映するゲージ・グラフを追加します。

1. JDeveloperに戻り、エディタ・ウィンドウのOrdersAndStocks.jsf ページで、「MDOrders」タブ上で右クリックして、コンテキスト・メニューから「Insert after Show Detail Item」→「Show Detail Item」を選択します。

   

2. Property InspectorでCommonノードを使用して、TextをStockLevelsに設定します。

   

3. 「StockLevels」タブをクリックし、「Data Controls」アコーディオンを開き、「FODModuleDataControl」→「OrdersView1」→「OrderItemsView2」→「WarehouseStockLevelsView1」の順に選択します。 StockLevelsペインにドロップし、「Table」→「ADF Read-only Table」を選択します。

   

4. Edit Table Columnsダイアログで、「Single Row」と「Enable Sorting」のチェック・ボックスを選択します。 WarehouseId、Address1、PostalCodeの属性を削除します。

   

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

5. Property Inspectorの表コンポーネントで、Styleグループの「」Layoutタブを使用して、Widthを600pxに、Heightをautoに設定します。

   

6. Behaviorグループで、Partial Triggersフィールドの横の下矢印をクリックして、「Edit」を選択します。

   

7. Edit Propertyダイアログで、「 table* - OrdItem」をSelectedペインに移動します。

   

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

   意味のあるIDを使用する理由。 詳細表示
   
   デフォルトの名前を、より意味のある名前に変更すると、プロジェクトに採用したネーミング規則に従って簡単にオブジェクトを見つけることができます。

8. Component Paletteで、「ADF Data Visualizations」→「Gauge」ライブラリを選択し、「Gauge」コンポーネントを選択して、QuantityOnHand列にドロップします。

   

9. Create Gaugeダイアログで、「Status Meter」カテゴリを選択し、「Horizontal Status Meter with Thresholds」を選択します。

   

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

10. Structureペインで「outputText #{row.QuantityOnHand}」を右クリックし、削除します。

    

11. Structureペインで「dvt:gauge 」コンポーネントを選択し、Property InspectorのCommonグループで、GaugeTypeにSTATUSMETERを設定します。 Valueフィールドの横のリストから「Expression Builder」を選択します。

    

12. Expression Builderダイアログで「JSP Objects」→「Row」を開き、「QuantityOnHand」をダブルクリックしてExpressionペインに挿入します。

    

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

13. 同じゲージ・コンポーネントのGauge Data グループで、MinValueに0を、MaxValueに1000を入力します。この簡単な例では便宜上、倉庫内の単一製品の在庫レベルが常に1,000以下であると仮定します。

    

14. Styleグループで、Widthを100%に、Heightを80pxに設定します。

    

15. StructureペインのGaugeコンポーネントの上の「af:column」を選択し、Property InspectorのAppearanceグループで、Widthを200に設定します。

    

16. Structureペインで、「dvt:gauge」→「dvt:thresholdSet」コンポーネントを開きます。

    
    ゲージ・タイプの選択時に、thresholdSetエントリが作成されています。 詳細表示
    
    thresholdSetには、3つのしきい値が存在することを確認します。
    
    次に、ゲージのしきい値を使用して、最大と最小の在庫レベル指標を指定できるようにします。
    
    

17. Structureペインで、1番目のthresholdコンポーネントを選択します。 Property Inspectorで、Idフィールドにt00を、ThresholdMaxValueに30を設定し、Textにminiを入力します。

    
    30は、製品に対して設定する在庫レベルの最小警告値になります。

18. Structureペインで、2番目のthresholdコンポーネントを選択します。 Property InspectorでIdフィールドにt01を設定し、Textにmaxiと入力します。

    
    700は、製品に対して設定する在庫レベルの最適値になります。

19. Structureペインで、3番目のthresholdコンポーネントを選択します。 Property InspectorでThresholdMaxValueを空白のままにし、Idフィールドにt02を設定します。

    

20. Structureペインで「tickLabel」コンポーネントを右クリックし、コンテキスト・メニューから「Insert inside dvt:tickLabel」→「Number Format」を選択します。

    

21. Number FormatタグのProperty Inspectorで、Scaleグループを使用して、ScaleFactorプロパティをSCALEFACTOR_NONEに設定します。

    

22. Structureペインで、「metricLabel」コンポーネントを選択します。 PositionプロパティをLP_INSIDE_GAUGE_RIGHTに設定します。

    

23. Structureペインで「metricLabel」コンポーネントを右クリックし、コンテキスト・メニューから「Insert inside dvt:metricLabel」→「Number Format」を選択します。

    

24. Property InspectorのNumber Formatタグで、Scaleグループを使用して、ScaleFactorプロパティをSCALEFACTOR_NONEに設定します。

    

25. ページは次のように表示されます。

    

26. 作業を保存し、「」Runボタンをクリックして、ページを実行します。

27. 「StockLevels」タブをクリックして、対応する在庫レベルをゲージとともに表示します。

    
    在庫レベル・ゲージは、最小警告レベルと最大警告レベルに関して、倉庫内の製品の状況を示します。詳細表示
    
    在庫レベルは、マスター・ディテール・フォーム内で選択された製品に関連付けられています。
    

28. ゲージ上にマウスを移動すると、対応する数量が表示されます。

    

29. MDOrdersタブに戻って別の注文を選択してから、「StockLevels」タブをクリックすると、新しいゲージ値が表示されます。

30. ブラウザ・ウィンドウを閉じます。

表示されたデータをExcel形式のファイルにエクスポートするボタンを、ページに追加します。

1. OrdersAndStocksページに戻り、「Button」を追加して、StructureペインのStockLevelsコンポーネントにドロップします。

   

2. Property Inspectorで、TextフィールドにExport to Excelと入力します。

   

3. Component PaletteのOperationsライブラリから「Export Collection Action Listener」コンポーネントをドラッグし、StructureペインのExport to Excelボタンにドロップします。

   

4. Insert Export Collection Action Listenerダイアログで、ExportedIdフィールドの横にあるドロップダウン・リストから「Edit」を選択します。

   

5. Edit Propertyで「table* - t1」を選択します。

   

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

6. Insert Export Collection Action Listenerダイアログに戻り、TypeにexcelHTMLがデフォルトで選択されていることを確認します。

   

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

7. Property Inspectorで、FilenameにMyExcelData.xlsを、TitleにExcel Exported Dataを指定します。

   

8. JDeveloperメニュー・バーの「」Save Allアイコンをクリックするか、「File」→「Save All」を選択します。

9. 「」Runボタンをクリックして、ページを実行します。

10. ブラウザでOrdersAndStocksページが開きます。「StockLevels」タブをクリックします。

    

11. 「Export to Excel」ボタンをクリックします。

    

    ファイルのダウンロードに関する警告メッセージが表示されたら右クリックし、「Download File」を選択し、操作を受け入れます。

    

12. File Downloadダイアログで、「Save」をクリックしてファイルをローカルに保存します （ここでは保存を選択していますが、ファイルを開くこともできます）。

    

13. Save Asダイアログで、ファイルを保存するディレクトリ（temp）を選択します。 Action ListenerからExcelへの操作で指定した値が、File nameとしてあらかじめ指定されています。

    

    「Save」をクリックします。

14. Download completeダイアログで、「Open Folder」をクリックします。

    

15. 表示されたフォルダで「MyExcelData.xls」をダブルクリックしてExcelファイルを開きます。

    

16. 形式の違いに関する情報ダイアログが表示されたら、「Yes」をクリックしてExcelの表示を受け入れます。

    

17. ワークシートに倉庫の在庫レベルが表示され、Excel環境で作業ができます。

    

18. Excelウィンドウを閉じます。

19. ブラウザ・ウィンドウを閉じます。

すべて表示 | すべて非表示