Articles
JDeveloper 11g によるリッチクライアント開発第5章 ADF Modelを使用したアプリケーションの作成日本オラクル株式会社 セールスコンサルティング統括本部 Fusion Middleware SC本部 Fusion Middleware レディネス部 智野 潤子 (ちの じゅんこ) Part1 ｜ Part2 目次Part1 Part2 パネルの追加この節では、データベース表から取得したデータを表示するテーブルやグラフを配置するために次の2つのコンポーネントを追加します。
タブ区切りパネルにタブ・ページを追加最初に、第4章で作成したindex.jspxに新しいタブ・ページを追加します。エディタ・ウィンドウでindex.jspxを開いて [ファイル一覧]タブを右クリックし、コンテキスト・メニューから[Show Detail Item – ファイル一覧の後ろに挿入]→[Show Detail Item]を選択します。
これにより、index.jspxにaf:showDetailItemタグが追加されるので、エディタ・ウィンドウでタブをクリックします。プロパティ・インスペクタでは、追加されたaf:showDetailItemタグの属性が編集できるようになっているので、[Common]カテゴリの[Text]に「HRデータ」と入力します。
スプリッタ区切りパネル次に、追加したタブ・ページにスプリッタ区切りパネルを追加します。コンポーネント・パレット上部のドロップダウン・リストで[ADF Faces]を選択し、[Layout]パネルに表示されている[パネル・スプリッタ]を図29のようにエディタ・ウィンドウにドラッグ&ドロップします。
[パネル・スプリッタ]をエディタ・ウィンドウにドロップすると、af:panelSplitterタグが追加されます。スプリッタ区切りパネルは、2つの領域が左右に配置されるので、上下に配置されるように変更します。エディタ・ウィンドウまたは構造ウィンドウで追加されたaf:panelSplitterタグを選択し、プロパティ・インスペクタの[Common]カテゴリの[Orientation]で「vertical」を選択します。
次に、パネルの幅と高さを指定するために、プロパティ・インスペクタの[Style]カテゴリを開きます。[ボックス]タブをクリックして、[Width]および[Height]に「100」と入力します。これにより、[InlineStyle]に「width:100%; height: 100%」と表示されます。
テーブルのバインドこの節では、DEPARTMENTS表から取得したデータを表示するテーブルを追加します。
この節の手順を実行すると、JSFページは次のように表示されます。
パネル・コレクションの追加最初に、「 パネルの追加」で追加したスプリッタ区切りパネル（af:panelSplitterタグ）の上部にテーブルを配置するためのパネル・コレクションを追加します。コンポーネント・パレット上部のドロップダウン・リストで[ADF Faces]を選択し、[Layout]パネルに表示されている[パネル・コレクション]を図34のようにエディタ・ウィンドウにドラッグ&ドロップします。
[パネル・コレクション]をエディタ・ウィンドウにドロップすると、af:panelSpliterタグのfirstファセットにaf:panelCollectionタグが追加されます。
プロパティ・インスペクタでは、追加されたaf:panelCollectionタグの属性の値を編集できるようになっています。プロパティ・インスペクタの[Common]カテゴリを開き、[Id]に「deptPanel」と入力します（ここで指定した[Id]の値は、後に出てくる グラフのバインドで使用します）。
部門データを表示するテーブルの追加ここでは、DEPARTMENTS表のデータを表示するテーブルをパネル・コレクション（af:panelCollectionタグ）内に配置します。ADF Modelによるデータ・バインドを使用する場合、アプリケーション・ナビゲータの[データ・コントロール]パネルから、ユーザー・インタフェースで表示または編集するデータ項目をエディタ・ウィンドウにドラッグ&ドロップするだけです。
[DepartmentsView1]をエディタにドロップすると、[表の列の編集]ダイアログが表示されます。画面上部に表示されている[行選択]、[ソート] 、[フィルタリング]の3つをすべてチェックしてから[OK]ボタンをクリックします。
[表の列の編集]ダイアログの[OK]ボタンをクリックすると、実行時にエラーが発生した場合にそのメッセージを表示するためのaf:messagesタグと、ビュー・オブジェクトによって取得したデータをテーブル形式で表示するaf:tableタグが追加されます。
これにより、ADF Bindingsのためのページ定義ファイル（indexPageDef.xml）が生成されます。エディタ・ウィンドウの下部の[Bindings]タブをクリックすると、ページ定義ファイルに記述されたデータ・バインドの情報がビジュアルに表示されます。
次に、追加されたaf:tableタグの属性値を編集します。プロパティ・インスペクタで[Common]カテゴリを開き、[Id]に「deptTable」と入力します。
この状態でindex.jspxを実行すると、Webブラウザには図42のように表示されます。
NOTE テーブル・データのフィルタリングindex.jspxを実行すると、各列の上部にテキスト・フィールドが表示され、データのフィルタリングが可能になります。例えば、DepartmentsId列のフィルタに「>=100」と入力し[Enter]キーを押すと、DepartmentsIdが100以上の部門のデータのみが表示されます。
このようにフィルタリングの機能を有効にするには、af:tableタグのfilterModelおよびqueryListener属性の値を指定する必要があります。ADF BCによるデータベース・アクセス・コンポーネントを使用した場合は、自動的に設定されます。
コントロール・ヒントの指定第4章「テーブルを使用したアプリケーションの作成」の「 列の書式のカスタマイズ」でも説明したとおり、列ヘッダーのテキストはaf:columntタグのheaderText属性で指定します。ADF Modelによるデータ・バインドを使用した場合、headerText属性の値には自動的にJSF EL式が設定されます。例えば、DepartmentsIdを表示するaf:columnタグのheaderText属性は次のように設定されています。
#{bindings.DepartmentsView1.hints.DepartmentId.label}
このJSF EL式はADF BCのエンティティ・オブジェクトまたはビュー・オブジェクトに定義されたコントロール・ヒントの値を取得しています。
これにより、[属性の編集]ウィンドウが起動されるので、画面右のツリーから[コントロール・ヒント]をクリックし、[ラベル・テキスト]に「部門ID」と入力します。
同様に、他の3つのエンティティ属性のラベル・テキストを表3のように指定します。
index.jspxを実行すると、Webブラウザには図46のように表示されます。
グラフのバインドこの節では、ADF Data Visualization ComponentsのADF Faces Graphを使用して、選択された部門に所属する従業員の給与データを表示する棒グラフを追加します。
この節の手順を実行すると、JSFページは次のように表示されます。
パネル・グループ・レイアウトの追加この項では、この後追加する棒グラフを配置するためのパネル・グループ・レイアウトを追加します。コンポーネント・パレット上部のドロップダウン・リストで[ADF Faces]を選択し、[Layout]パネルに表示されている[パネル・グループ・レイアウト]を図49のようにエディタ・ウィンドウにドラッグ&ドロップします。
[パネル・グループ・レイアウト]をエディタ・ウィンドウにドロップすると、af:panelSplitterタグのsecondファセット内に af:panelGroupが追加されたら、プロパティ・インスペクタで[Common]カテゴリを開き、[Layout]で「scroll」を選択します。これにより、パネルですべてを表示できない場合に、スクロール・バーが表示されるようになります。
グラフの追加と設定この項では、テーブルで選択されている部門に所属する従業員の給与データを示す棒グラフを追加します。「 テーブルのバインド」と同様に、[データ・コントロール]パネルに表示されるデータ項目をドラッグ&ドロップするだけで棒グラフの追加が可能です。 棒グラフの追加棒グラフを追加するために、アプリケーション・ナビゲータの[データ・コントロール]パネルから、[EmployeeView2]を図51のようにスプリッタの下の領域にドラッグ&ドロップし、コンテキスト・メニューから[Graphs]選択します。これにより、[コンポーネント・ギャラリ]ウィンドウが表示されるので、[カテゴリ]から[Bar]を、[Graph Types]から[Bar]を、[Quick Start Layouts]で一番左のレイアウトを選択します（図51）。
これにより、[Create Graph Binding]ダイアログが表示されます。ダイアログの左部にある[Available]リストから[Salary]を[Bars]に、[EmplyeeId]を[X Axis]にドラッグ&ドロップします。[Attribute Labels]テーブルの[Attribute]行に[EmployeeId]と表示されている行の[Label]のセルをクリックすると、ドロップダウン・リストが表示されるので、[FirstName]を選択します。
[Create Graph Binding]ダイアログの[Preview]タブをクリックすると、追加されるグラフをプレビューすることができます。
[Create Graph Binding]ダイアログで[OK]ボタンをクリックすると、index.jspxにdvt:barGraphタグが追加されます。 部分ページ・レンダリングの設定index.jspxにdvt:barGraphタグを追加したら、テーブルで選択された行データと連動してグラフの表示が切り替わるように部分ページ・レンダリングの設定をします。
これにより、[プロパティの編集]ダイアログが表示されます。[使用可能]ツリーで[table – deptTable]を選択した状態で、画面中央の[>]をクリックします。
画面右の[選択済]リストに「table – deptTable」が表示されていることを確認したら、[OK]ボタンをクリックします。 NOTE index.jspxを実行すると、スプリッタの下の領域に従業員の給与を示す棒グラフが表示されます。テーブルで選択されている部門データに応じて、棒グラフの表示が切り替わります。
ADF Data Visualization Toolが提供する各種グラフは、FlashやPNG、SVGなどフォーマットを選択することができます。デフォルトの設定では、WebブラウザにFlash Playerがインストールされている場合はFlashが使用され、それ以外の場合はPNGが使用されます。 縦軸の設定この項では、縦軸に表示される数値の書式を変更します。
グラフの縦軸の設定は、dvt:barGraphタグの中にdvt:y1Axisタグを記述して定義します。構造ウィンドウで[dvt:barGraph]を右クリックし、コンテキスト・メニューから[dvt:barGraphの中に挿入]→[ADF Data Visualization]を選択します。
これにより、[ADF Data Visualization]ダイアログが表示されるので、[Y1 Axis]を選択して[OK]ボタンをクリックします。
[ADF Data Visualizationアイテムの挿入]ダイアログで[OK]ボタンをクリックすると、dvt:barGraphタグ内にdvt:y1Axisタグが追加されます。縦軸に表示される数値の書式を指定するには、さらにdvt:y1Axisタグ内にdvt:numberFormatタグを追加する必要があります。
これにより、dvt:y1Axisタグ内にdvt:numberFormatタグが追加され、プロパティ・インスペクタで属性値を編集できるようになっています。プロパティ・インスペクタで表4の3つを編集します。
index.jspxを実行するとWebブラウザには図62のように表示されます。
まとめこの章では、ADF Modelが提供するデータ・バインドの仕組みを使用したアプリケーションの開発方法について、チュートリアル形式で説明しました。ADF Modelを使用すると一般的なJSFアプリケーションに比べて、少ないJavaコーディングでアプリケーション開発が可能になります。 Part1 ｜ Part2
|
Printer View