IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
IBM WebSphere Dashboard Framework V6.0
開発自習ガイド
作成・更新日 2008 年 4 月 30 日
日本アイ・ビー・エム システムズ・エンジニアリング株式会社
1/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<目次>
1
はじめに.............................................................................................................................. 4
1.1
2
3
4
資料中の表記について ................................................................................................... 4
レッスンの前提 ................................................................................................................... 5
2.1
前提知識 ......................................................................................................................... 5
2.2
前提環境（想定環境） ................................................................................................... 6
レッスンの進め方 ............................................................................................................... 9
3.1
レッスンの一覧および概要 ............................................................................................ 9
3.2
各レッスンの関連 ........................................................................................................ 11
レッスン............................................................................................................................ 12
4.1
［レッスン 1］黒丸グラフ(BULLET GRAPH)とポートレット編集............................... 12
4.1.1
設定内容 ............................................................................................................... 12
4.1.2
実行結果 ............................................................................................................... 19
4.2
［レッスン 2］STATUS PAGE ....................................................................................... 20
4.2.1
設定内容 ............................................................................................................... 20
4.2.2
実行結果 ............................................................................................................... 27
4.3
［レッスン 3］EXCEL と STATUS INDICATOR .............................................................. 28
4.3.1
設定内容 ............................................................................................................... 28
4.3.2
実行結果 ............................................................................................................... 36
4.4
［レッスン 4］EXCEL と WEB チャート...................................................................... 37
4.4.1
設定内容 ............................................................................................................... 37
4.4.2
実行結果 ............................................................................................................... 51
4.5
［レッスン 5］DATABASE へのアクセス...................................................................... 53
4.5.1
設定内容 ............................................................................................................... 53
4.5.2
実行結果 ............................................................................................................... 64
4.6
［レッスン 6］DATABASE と RECORD LIST AND DETAIL ............................................. 65
4.6.1
設定内容 ............................................................................................................... 65
4.6.2
実行結果 ............................................................................................................... 71
4.7
［レッスン 7］DATABASE と HIERARCHY DRILLDOWN ............................................... 72
4.7.1
設定内容 ............................................................................................................... 72
4.7.2
実行結果 ............................................................................................................... 89
4.8
［レッスン 8］DATABASE と SUMMARY AND DRILLDOWN ........................................... 91
2/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.8.1
設定内容 ............................................................................................................... 91
4.8.2
実行結果 ............................................................................................................. 104
4.9
［レッスン 9］単純な FILTER.................................................................................... 105
4.9.1
設定内容 ............................................................................................................. 105
4.9.2
実行結果 ............................................................................................................. 116
4.10
［レッスン 10］FILTER とデータ階層....................................................................... 118
4.10.1
設定内容 ............................................................................................................. 118
4.10.2
実行結果 ............................................................................................................. 131
4.11
［レッスン 11］FILTER と EXCEL 連携...................................................................... 133
4.11.1
設定内容 ............................................................................................................. 133
4.11.2
実行結果 ............................................................................................................. 147
3/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1 はじめに
当資料は、IBM WebSphere Dashboard Framework V6.0.X(以下 Dashboard Framework)
を用いて WebSphere Poratl V6.0.X で使用する Portlet を開発する際の作業のうち、
Dashboard Framework 独自のビルダーを用いた Portlet 開発について、レッスンを通じて
自習していただくための資料です。
この資料中のレッスンを通じて、Dashboard Framework 独自のビルダーの使い方について
容易に習得でき、実際の出力結果からどのような場合にビルダーを用いるべきか判断する
ことが可能になるように、資料は構成されています。
なお、最終的な成果物としては、Dashboard Framework を使ったポートレットが数点作成
されます。
資料中の表記について
1.1
※ 説明文中の画面キャプチャについては、一部実際の使用者の表示結果と異なる場合があ
ります。
※ 当資料は IBM WebSphere Portlet Factory の知識がある使用者を前提としているため、
すべての手順について記述があるわけではありません。場合に応じて使用者が手順を追
加してください。
※ 参考資料として以下の文献があります。当資料中に詳細な記述がない項目に関しては、
以下の資料を参考にしてください。
¾
IBM WebSphere Portal バージョン 6 Information Center
¾
http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/index.jsp
IBM WebSphere Application Server 資料
http://publib.boulder.ibm.com/infocenter/wasinfo/v6r0/index.jsp?topic=/co
m.ibm.websphere.base.doc/info/welcome_base.html
¾
IBM WebSphere Portlet Factory Information Center
http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstr
eet.designer.doc/designer/welcome.html
¾
IBM WebSphere Dashboard Framework
http://publib.boulder.ibm.com/infocenter/wdfhelp/v6r0m0/index.jsp
4/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2 レッスンの前提
前提知識
2.1
この資料中のレッスンを実施するに当たり以下の前提知識が必要となります。なお前提知
識については、
「知識があると望ましい」というレベルであり必須のものではありませんが、
レッスンを実施する際にある程度の知識が必要となります。
z
z
WebSphere Portal V6 に関する一般知識
¾
WebSphere Portal 構成についての概要
¾
WebSphere Portal 管理についての概要
z
ラベル/ページの作成/管理
・・・
※
Portlet（アプリケーション）の配置/管理
・・・
※
ユーザー/グループ管理
アクセス権限管理
WebSphere Application Server V6 に関する一般知識
¾
z
サーバー/アプリケーションの管理
サーバーの管理/設定
アプリケーションの管理/設定
データベースとの連携（データソースの設定）
Java に関する一般知識
¾
Java コーディングに関する知識
¾
アプリケーション/Servlet の仕組みについての知識
IBM WebSphere Portlet Factory に関しての一般知識
¾
IBM WebSphere Portlet Factory の操作
プロジェクト/モデル/プロファイルの作成/管理
・・・
※
オートデプロイに関する知識
・・・
※
※ この印のついているものについては、特に必要となります。
5/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.2
前提環境（想定環境）
IBM WebSphere Dashboard Framework は IBM WebSphere Portlet Factory の上で動作
します。そのため動作環境としては IBM WebSphere Portlet Factory の動作環境と同じに
なります。
IBM WebSphere Portlet Factory を用いて Portlet を開発する場合、構成のパターンとして
以下の４通りが考えられます。
z
１ 台 の マ シ ン に IBM WebSphere Portal と IBM WebSphere Portlet
Factory/Dashboard Framework を導入して構成する
IBM WebSphere Dashboard Framework
IBM WebSphere Portlet Factory
IBM WebSphere Portal Server
IBM WebSphere Application Server
開発時のプレビュー
Portlet の自動デプロイ
ローカル環境
図 1 １台にすべて導入
6/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
z
２ 台 の マ シ ン に IBM WebSphere Portal と IBM WebSphere Portlet
Factory/Dashboard Framework を別々に導入して構成する。
¾
Portlet の自動デプロイ先及び開発用サーバーとしてモートの IBM WebSphere
Portal を指定する。（図２※１）
¾
Portlet の自動デプロイ先にリモートの IBM WebSphere Portal を指定し、開発用
サ ー バ ー と し て は ロ ー カ ル の WebSphere Application Server Community
Edition(導入時に選択可能)を指定する（図２※２）
IBM WebSphere Portal Server
IBM WebSphere Application Server
IBM WebSphere Dashboard Framework
リモート環境
※１開発時のプレビュー
Portlet の自動デプロイ
IBM WebSphere Portlet Factory
ローカル環境
※２開発時のプレビュー
図 2 ２台に別々に導入
z
自動デプロイを行わない
7/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
基 本 的 に １ 台 の マ シ ン に IBM WebSphere Portal/IBM WebSphere Portlet
Factory/Dashboard Framework を導入して構成して、自動デプロイ設定を行う方法が簡単
ですが、マシンリソースの関係でこの構成が取れない場合があります。その場合は IBM
WebSphere Portal と IBM WebSphere Portlet Factory/Dashboard Framework を別々のマ
シンに構成して開発を行います。
別々のマシンに構成する場合、１台のマシンで構成する場合に加えて、IBM WebSphere
Portlet Factory プロジェクト作成の際に多少の追加手順が必要となります。方法について
は以下のリンクを参照してください。
z
Deploying a project to a remote server
¾
http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstreet.
designer.doc/designer/deploying_to_a_remote_server.htm
IBM WebSphere Applicatoin Server Commnity Edition の使用方法については、以下のリ
ンクを参照してください。
z
Quick start with WAS CE
¾
http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstreet.
designer.doc/tutorials/TutorialBasics_Quick_Start_WASCE.htm
また IBM WebSphere Portlet Factory プロジェクト作成の手順については、以下のリンク
を参照してください。（前提知識のため、この資料には記述していません）
z
Tutorial – Creating a Web Application Project
¾
http://publib.boulder.ibm.com/infocenter/wpfhelp/v6r0m2/topic/com.bowstreet.
designer.doc/tutorials/TutorialBasics_Create_Project.htm
8/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3 レッスンの進め方
この資料には合計で１１のレッスンが含まれています。よってすべてのレッスンを終了す
ると１１個の Portlet が作成されます。なお、すべてのレッスンを記述順に行う必要はあり
ませんが、レッスンによっては、前提となるレッスンもあります。その場合は前提のレッ
スンを終了した後、実施してください。
3.1
レッスンの一覧および概要
この資料に含まれるレッスンの一覧です。
表 1 レッスン一覧
レッスン名
タイトル
概要
使用する主な
Dashboard ビルダー
レッスン１
黒丸グラフ(Bullet Graph)と Portlet 編
Dashboard Framework を
Bullet Graph
集モード
用いた簡単なサンプルで
(Portlet Adapter)
す。Portlet の編集モード
の使い方も学習します。
レッスン２
Status Page
外部からデータを取り込
Status Page
まずに Status 表示をさせ
ます。
レッスン３
Excel と Status Indicator
Excel からデータを取り込
Excel Import – 拡張
み、データの値の応じた
Status Indicator
状 況 の 表 示 (Status
Indicator)を行います。
レッスン４
Excel と WebChart
Excel からデータを取り込
Excel Import
み、グラフ化して表示しま
Web Chart – 拡張
す。
レッスン５
Database へのアクセス
以後のレッスンのための
-
Database アクセス用モジ
ュールを作成します。
レッスン６
Database と Record List Detail
Database レコードの一覧
Record List Detail
表示と詳細項目の表示を
行います。
レッスン７
Database と Hierarchy Drilldown
Database レコードの一覧
表示及びカテゴリごとの
の階層表示（Drilldown）を
行います。
9/147
Hierarchy Drilldown
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
レッスン８
Database と Summary and Drilldown
Database レコードの一覧
Summary and Drilldown
表示と、レコードから作成
したグラフの表示を行い
ます。
レッスン９
単純な Filter
２つのポートレット間で単
照会フィルター
純な連携を行います。
Query Filter Form
Query Filter Observer
レッスン１０
Filter とデータ階層
２つのポートレット間で連
照会フィルター
携を行います。連携する
Query Filter Form
データを複数使用しま
Query Filter Observer
す。
レッスン１１
Filter と Excel 連携
Excel から取り込んだデー
Excel Import – 拡張
タをフィルタリングし、別
照会フィルター
のポートレットへ表示しま
Query Filter Form
す。
Query Filter Observer
10/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.2
各レッスンの関連
各レッスン間の関連は以下のようになります。すべてのレッスンを順番に実施する必要は
ありませんが、前提となるレッスンが存在するものもあります。
下図にて実線が引かれているものは、順に学習することが必須です。点線のものは順に学
習する必要はありませんが、前提知識として学習しておくことが推奨されます。
Dashboard 基礎
レッスン１
Database 連携とグラフ表示
レッスン５
レッスン２
レッスン６
レッスン７
参考
レッスン３
レッスン８
レッスン４
フィルタリングと Portlet 連携
レッスン９
必須
レッスン１０
図 3 各レッスン間の関連
11/147
レッスン１１
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4 レッスン
本章では、さまざまな Dashboard Framework 用ビルダーの使い方を理解するために演習
を実施します。
4.1
［レッスン 1］黒丸グラフ(Bullet Graph)とポートレット編集
Dashboard Framework が機能していることを確認する為に、Dashboard 用ビルダー単体
での動作確認をおこないます。
ここではポートレットの「共用設定の編集(edit_defaults)モード」で設定した値を、黒丸グ
ラフ(Bullet Graph)で使用します。設定する値はあらかじめプロファイル・セットで項目を
用意しておく必要があります（他のモードを利用する場合でも同様です）。
「共用設定の編集」用のページを新たに作成しません。ポートレットデータの保存先にプ
ロファイル・セットを利用すると、デフォルトで用意されているページを使用できる為で
す。
4.1.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_BulletGraphAndPortletEdit
追加する機能セット:
Dashboard Framework
モデル名: sample1（モデルタイプは空にする）
プロファイル・セット名: SampleProfileSet1
============================================================
<<SampleProfileSet1.pset>>
1.プロファイル・セットの作成
ポートレットで使用するプロファイルを作成します。以下のように設定します。
設定値
ファイル名
SampleProfileSet1.pset
プロジェクト
DF_BulletGraphAndPortletEdit
名前
SampleProfileSet1
説明
sample
複写するプロファイル・セットの選択
なし
12/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.プロファイル項目の作成
プロファイル・セットに以下の２プロファイル項目を設定します。
項目１
名前
current_value
プロンプト
現行値
UI タイプ
TextInput
幅
10
デフォルト値
400
実行時間
false
項目２
名前
target_value
プロンプト
目標値
UI タイプ
TextInput
幅
10
デフォルト値
900
実行時間
false
設定した画面は以下のようになります。
図 4 プロファイル設定エディター画面１
13/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
プロファイルの管理タブにて内容を確認すると、以下の図のようになります。
図 5 プロファイル設定エディター画面２
この設定により、作成するポートレットにてプロファイル（≒パラメータ）の設定が可能
になります。
14/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<sample1.model>>
3.sample1 モデルの作成
予め作成しておいた sample1 モデルを開き、ビルダーを追加していきます。
1.Page ビルダーの追加
黒丸グラフを表示する為のページを用意する必要があるので、Page ビルダーを追加します。
設定値
名前
startPage
ページ・コンテンツ
（デフォルトのまま）
図 6 Page ビルダー設定画面
15/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.黒丸グラフビルダーの追加
黒丸グラフ(Bullet Graph)を表示するためのビルダーを追加します。
設定値
bullet
名前
ページの場所
位置指定の方法
名前付きタグ上
ページ
startPage
タグ
namedTag
グラフ情報
タイトル
黒丸グラフのタイトル
グラフ・データ
状況開始値
0
色ソース
色ファミリー
状況ファミリー
キウイ・フルーツ
状況
状況名: 状況 A, 終了値: 200,
色: #ecefec
状況名: 状況 B, 終了値: 500,
色: #c7cec5
状況名: 状況 C, 終了値: 1000,
現行値
＜
プ
ロ
フ
ァ
イ
色: #a2ae9e
ル
項
目
＞
SampleProfileSet1:current_value
※プロファイル入力 -> プロファイル・セット名:
SampleProfileSet1
プロファイル項目名:
current_value
目標値
＜
プ
ロ
フ
ァ
イ
ル
項
目
＞
SampleProfileSet1:target_value
※プロファイル入力 -> プロフ
ァイル・セット名: SampleProfileSet1
イル項目名: target_value
グラフ・カスタマ
目盛りタイプ
数値
イズ
ラベル・フォーマ
###,##0 個
ット
機能
main ア ク シ ョ ン
チェック
を生成
16/147
プロファ
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
設定画面のイメージは次のようになります。
図 7 黒丸グラフ設定画面（一部）
17/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet
ポートレットのタイトル
黒丸グラフとポートレット編集（※１）
ポートレットの短いタイトル
黒丸グラフとポートレット編集
デフォルト・ロケール
ja
プロファイル・セット
SampleProfileSet1: デフォルト編集で個々
のプロファイル値を表示（※２）
※１）ポータルサーバーにおいてポートレットの一覧表示を行った際に表示されるタイトルは、
「ポー
トレットのタイトル」の値となります。
※２）事前に、任意のビルダーでプロファイル・セットを利用していると、「プロファイル・セット」
の項目が表示されます。今回は、黒丸グラフビルダーで利用しています。
図 8 Portlet Adapter ビルダー設定画面（一部）
18/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.1.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。
ページに配置直後の表示モード
図 9 初期表示
編集モードでは、プロファイルとして設定した値が表示されていることが確認できます。
共用設定の編集(edit_defaults)モード
図 10 編集モード表示
値を変更すると、表示が変わることが確認できます。
パラメータ変更後の表示モード
図 11 変更後の表示
19/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.2
［レッスン 2］Status Page
Dashboard Framework が機能していることを確認する為に、Dashboard 用ビルダー単体
での動作確認をおこないます。外部から値を取り込まずに、値を直接指定して作成します。
もちろん、外部から取り込んだ値を設定することも可能です。
4.2.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_StatusPage
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: sample1（モデルタイプは空にする）
============================================================
<<sample1.model>>
sample1 モデルの編集
予め追加しておいた sample1 モデルにビルダーを追加します。
図 12 sample1 モデル
20/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Status Page ビルダーを追加します。今回はオプションとして、「印刷機能」と「Excel
ファイルエクスポート機能」を有効にします。
設定値
status_page
名前
状況プロパ
望ましい傾向
上方向
ティー
状況オプション
状況 A, 上限／しきい値: 1000
状況 B, 上限／しきい値: 2000
状況 C, 上限／しきい値: 3000
現行値
2800
作成するペ
チャート・ページ
チェック
ージ
テーブル・ページ
チェック
main アクションを作成
チェック
ページ・レ
ページ・レイアウト・モード
チャートとテーブルを別々のページに
イアウトお
ページ・ナビゲーション・タイ
タブ付きページ
よびナビゲ
プ
ーション
チャート・
チャート・スタイルの選択
カスタム・スタイルを指定
プロパティ
チャート・スタイル
/solutions/dashboard/chartstyles/Dial.x
ml
ー
チャートのタイトル
チャートのタイトル
値のフォーマット設定
###,##0 個
チャート凡例
凡例なし
チャート・フォーマット
PNG
テーブル・
目標の決定
別の値を使用
プロパティ
目標の値
3000
ア ク シ ョ
自動表示／非表示を有効にする:
非チェック
ン・メニュ
ツールバー・ラベル:
メニュー
ーのオプシ
Excel へのエクスポートを有効
チェック
ョン
にする:
ー
Excel ツールチップ・テキスト
エクスポート
エクスポート・ファイル名:
エクスポート.xls
ページの印刷を有効にする
チェック
印刷ツールチップ・テキスト
印刷
21/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
※ チ ャ ー ト の グ ラ フ を 半 円 に し た い 場 合 は 、「 チ ャ ー ト ・ ス タ イ ル 」 の 項 目 を
'/solutions/dashboard/chartstyles/DialChartStyle.xml'に変更します。
なおここではビルダーの使用方法を習得することが第一と考えているため、現行値や目標
値などを直接指定しています。一般的には外部（データベース、XML ファイル、EXCEL
ファイル等）から取得した値を設定します。
図 13 Status Page ビルダー設定画面（一部）
22/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet
ポートレットのタイトル
ステータスページ・ポートレット
ポートレットの短いタイトル
ステータスページ・ポートレット
デフォルト・ロケール
ja
図 14 Portlet Adapter ビルダー設定画面
23/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.チャート・スタイルファイルの変更
Web charts 系の画像はデフォルトでは日本語が扱えません。
「チャート・スタイル」で指定
した XML ファイルにおいて、日本語が扱えないフォントを使用する設定になっている為で
す。例えばチャート・スタイルが、/solutions/dashboard/chartstyles/Dial.xml の場合、'Arial
Unicode MS'という文字列を'MS UI Gothic'に置き換えることで日本語が正しく表示され
ます（上記のファイルの場合 6 箇所ある）。変更例を載せておきます。
【変更前】
<?xml version="1.0" encoding="UTF-8"?>
<dialChart dial="Full240" inside="#B3DBF6" hand="#F7E859" is3D="false" font="Arial Unicode
MS-11-bold"
foreground="#666666">
<axis scaleMin="0">
<labelFormat pattern="#,##0.###"/>
<parseFormat pattern="#,##0.###"/>
<titleStyle font="Arial Unicode MS-14-bold"/>
<groupStyle>
<format pattern="#,##0.###"/>
</groupStyle>
</axis>
<handStyle isInside="true" size="6" type="Bar" shadowOffset="0"/>
<knobStyle color="#999999" shadowOffset="0"/>
<dialStyle
labelStyle="Inside
"
majorTickStyle="Rectangle"
majorTickSize="2"
minorTickSize="1" minorTicksPlacement="Outer"
dialSize="12" majorTickLength="6" minorTickLength="4" isAxisInside="true"
fillColor="#CCCCCC">
<outerBorder fillColor="#CCCCCC"/>
</dialStyle>
<dataLabels style="Pattern" background="null" font="Arial Unicode MS-13-bold"
foreground="black" isMultiline="true">
<decoration foreColor="#333333"/>
<![CDATA[
$(value)
]]>
</dataLabels>
<legend equalCols="false" isVisible="false" font="Arial Unicode MS-10"/>
<elements drawOutline="false" drawShadow="true">
24/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<series index="0">
<paint color="#CCFF99"/>
</series>
<series index="1">
<paint color="#FFCC99"/>
</series>
<series index="2">
<paint color="#FF99CC"/>
</series>
<![CDATA[
$(colLabel) ¥t
]]>
</elements>
<table cellSpacing="4" cellPadding="0"/>
<title placement="Left" font="Arial Unicode MS-12-bold">
<decoration style="None"/>
</title>
<popup
background="#C8FFFFFF"
foreground="#333333"
font="Arial
Unicode
MS-10"/>
<paint palette="Pastel" min="18"/>
</dialChart>
【変更後】
<?xml version="1.0" encoding="UTF-8"?>
<dialChart dial="Full240" inside="#B3DBF6" hand="#F7E859" is3D="false" font="MS UI
Gothic-11-bold"
foreground="#666666">
<axis scaleMin="0">
<labelFormat pattern="#,##0.###"/>
<parseFormat pattern="#,##0.###"/>
<titleStyle font="MS UI Gothic-14-bold"/>
<groupStyle>
<format pattern="#,##0.###"/>
</groupStyle>
</axis>
<handStyle isInside="true" size="6" type="Bar" shadowOffset="0"/>
25/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<knobStyle color="#999999" shadowOffset="0"/>
<dialStyle
labelStyle="Inside
"
majorTickStyle="Rectangle"
majorTickSize="2"
minorTickSize="1" minorTicksPlacement="Outer"
dialSize="12" majorTickLength="6" minorTickLength="4" isAxisInside="true"
fillColor="#CCCCCC">
<outerBorder fillColor="#CCCCCC"/>
</dialStyle>
<dataLabels
style="Pattern"
background="null"
font="MS
UI
Gothic-13-bold"
foreground="black" isMultiline="true">
<decoration foreColor="#333333"/>
<![CDATA[
$(value)
]]>
</dataLabels>
<legend equalCols="false" isVisible="false" font="MS UI Gothic-10"/>
<elements drawOutline="false" drawShadow="true">
<series index="0">
<paint color="#CCFF99"/>
</series>
<series index="1">
<paint color="#FFCC99"/>
</series>
<series index="2">
<paint color="#FF99CC"/>
</series>
<![CDATA[
$(colLabel) ¥t
]]>
</elements>
<table cellSpacing="4" cellPadding="0"/>
<title placement="Left" font="MS UI Gothic-12-bold">
<decoration style="None"/>
</title>
<popup background="#C8FFFFFF" foreground="#333333" font="MS UI Gothic-10"/>
<paint palette="Pastel" min="18"/>
</dialChart>
26/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.2.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。
図 15 チャート表示ページ
図 16 テーブル表示ページ
27/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.3
［レッスン 3］Excel と Status Indicator
Excel ファイルから取り込んだ値を Dashboard に表示します。さらにその値を基に Status
Indicator も表示します。外部から取り込んだ値を利用する場合は、モデルを 2 つ作成する
必要があります。
z
provider モデル: 外部から値を取り込むモデル
z
consumer モデル: provider モデルから値を受け取り、Dashboard に表示する
「provider モデル内の Service Definition ビルダー」と「consumer モデル内の Service
Consumer ビルダー」が関連付けされることで、モデル間のアクセスが可能となっています。
Excel ファイル
provider モデル
consumer モデル
図：データの流れ
4.3.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_ExcelandStatusIndicator
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: provider（モデルタイプは空にする）
モデル名: consumer（モデルタイプは空にする）
============================================================
<<<外部データの用意>>>
プロジェクト内の /WebContent 直下に Excel ファイル（売上げ集計.xls）をコピーしてお
きます。
28/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<<provider.model>>>
1.provider モデルへのビルダー追加
予め作成しておいた provider モデルへビルダーを追加していきます。
図 17 provider モデル
1.Service Definition ビルダーを追加します。
設定値
サービス名
provider1
サービスを公開
チェック
このビルダーを追加することにより、後述する consumer モデルからこの provider モデル
内のビルダーで定義されるメソッドを provider1/xxxxx という名前で利用することが出来
るようになります。
29/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Excel インポート 拡張ビルダーを追加します。
設定値
名前
getProductSalesSource
インポートするファイル
/売上げ集計.xls
スキーマを生成
Designer 再生成時
コンテンツ選択方法
自動
シート
集計
ヘッダー行あり
チェック
空の行を保持
非チェック
セルのフォーマット設定を保持
チェック
※Excel ファイルの中で「オートフィルタ」を使用していると、インポート時にシート名が
指定できません。つまりインポートに失敗します。また、シートの背景を指定した場合も
うまくいかない場合があります。
3.Service Operation ビルダーを追加します。
設定値
サービス
データ・サービス
provider1
操作プロ
操作名
getProductSales
パティー
呼び出すアクション
DataServices/getProductSalesSource/execute
操作入力
入力構造処理
入力なし
捜査結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マッピング
自動
ここまでの設定で、Excel シートからデータを取り出す provider モデルの作成が終了しま
した。続いてこの provider モデルを呼び出し、データを表示させる consumer モデルの作
成に移ります。
30/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<<consumer.model>>>
2.consumer モデルへのビルダー追加
図 18 consumer モデル
1.Service Consumer ビルダーの追加。
設定値
名前
consumer1
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
この設定により、consumer モデル内部から provider モデルで設定された操作を利用する
ことが出来るようになります。
31/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.View & Form ビルダーの追加。
Excel シートのデータを表示するためのビルダーを追加します。View & Form ビルダーは
データの取得と表示を同時に行うビルダーです。
設定値
form1
名前
ビュー・ペ
ビュー・データ操作
DataServices/consumer1/getProductSales
ージ・オプ
ビュー・ページ HTML
/factory/pages/view_and_form_view.html
ション
HTML テンプレートファイル
/factory/html_templates/gridtable.html
ページ単位のデータ表示
チェック
ページあたりの行数
3
Main を生成
チェック
ページ送りボタンを追加する
チェック
拡張
3.「ビュー・ページ HTML」で指定したファイル(view_and_form_view.html)を開きます。
後で作成する Status Indicator の凡例ビルダーの配置場所を確保するために、HTML タグ
を追加します。（青字の箇所が追加分）
<html>
<HEAD>
</HEAD>
<body>
<div><span name="area1" /><div>
<span name="search_section" />
<table name="data" cellspacing="0" cellpadding="3" />
<span name="paging_buttons" />
<br>
<span name="back_button" />
<span name="update_button" />
</body></html>
32/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Status Indicator ビルダーの追加。
このビルダーを追加することによって、Excel シートからのデータに応じて Status を設定
することが可能になります。
設定値
名前
indicator1
フィールド
[form1_ViewPage]form1_ViewPage/ExcelContent/Row/今年度
標識のタイプ
イメージ標識
標識
イメージの場所
新規列とイメージを追加
オプ
新規列名
status
ショ
列の配置
最初の列
ン
状況オプション
状況：上昇
イメージ: /solutions/images/arrow_up_green.gif
状況: 同一
イメージ: /solutions/images/arrow_left_black.gif
状況: 下降
イメージ: /solutions/images/arrow_down_red.gif
標識
標識ロジック
値をしきい値と比較
ロジ
比較値
選択されたフィールド
ック
しきい値
状況: 上昇
比較: >
しきい値: 1000
状況: 同一
比較: =
しきい値: 1000
状況: 下降
比較: <
しきい値: 1000
図 19 Status Indicator ビルダー設定画面（一部）
33/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Status Indicator の凡例ビルダーを追加します。
Status Indicator ビルダーを追加しただけでは、画面上に凡例（イメージ）は表示されない
ため、凡例を使うを設定するために Status Indicator の凡例ビルダーを追加します。
設定値
indicator_legend
名前
ページの場
位置指定の方法
名前付きタグ上
所
ページ
form1_ViewPage
タグ
area1
凡例タイトル
凡例
基本 Status Indicator
indicator1
凡例内の状況オプション設定
状況オプション設定の変更
状況オプション設定
状況オプション:
説明テキスト:
表示／非表示:
上昇
上昇
表示
状況オプション:
説明テキスト:
表示／非表示:
同一
同一
表示
状況オプション:
説明テキスト:
表示／非表示:
下降
下降
表示
この設定により、値の状況に応じた凡例が表示されるようになります。
図 20 Status Indicator の凡例設定（一部）
34/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
6.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet
ポートレットのタイトル
Status Indicator ポートレット
ポートレットの短いタイトル
Status Indicator ポートレット
デフォルト・ロケール
ja
ここまでの設定で、Excel シートからデータを取り込み、状況に応じてステータスをイメー
ジで表示するポートレットの作成が完了しました。
35/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.3.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。
図 21 デフォルト表示画面
Excel シート中のデータが 3 行ずつ表示され、傾向（Status Indicator）が表示されること
がわかります。ページを遷移させると次のようになります。
図 22 次ページ表示
36/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.4
［レッスン 4］Excel と Web チャート
Excel ファイルから取り込んだ値を Dashboard に表示します。さらにその値を基に各グラ
フ(Web チャート)を表示します。外部から取り込んだ値を利用する場合は、モデルを 2 つ作
成する必要があります。
z
provider モデル: 外部から値を取り込むモデル
z
consumer モデル: provider モデルから値を受け取り、Dashboard に表示する
「provider モデル内の Service Definition ビルダー」と「consumer モデル内の Service
Consumer ビルダー」が関連付けされることで、モデル間のアクセスが可能となっています。
Excel ファイル
provider モデル
consumer モデル
図：データの流れ
4.4.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_ExcelandWebCharts
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: provider（モデルタイプは空にする）
モデル名: consumer（モデルタイプは空にする）
============================================================
<<<外部データの用意>>>
プロジェクト内の /WebContent 直下に Excel ファイル（売上げ集計.xls）をコピーしてお
きます。
37/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<<provider.model>>>
1.provider モデルへのビルダー追加
予め作成しておいた provider モデルへビルダーを追加していきます。
図 23 provider モデル
1.Service Definition ビルダーを追加します。
設定値
サービス名
provider1
サービスを公開
チェック
このビルダーを追加することにより、後述する consumer モデルからこの provider モデル
内のビルダーで定義されるメソッドを provider1/xxxxx という名前で利用することが出来
るようになります。
38/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Excel インポート 拡張ビルダーを追加します。
設定値
名前
getProductSalesSource
インポートするファイル
/売上げ集計.xls
スキーマを生成
Designer 再生成時
コンテンツ選択方法
自動
シート
集計
ヘッダー行あり
チェック
空の行を保持
非チェック
セルのフォーマット設定を保持
チェック
※Excel ファイルの中で「オートフィルタ」を使用していると、インポート時にシート名が
指定できません。つまりインポートに失敗します。また、シートの背景を指定した場合も
うまくいかない場合があります。
3.Service Operation ビルダーを追加します。
設定値
サービス
データ・サービス
provider1
操作プロ
操作名
getProductSales
パティー
呼び出すアクション
DataServices/getProductSalesSource/execute
操作入力
入力構造処理
入力なし
捜査結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マッピング
自動
ここまでの設定で、Excel シートからデータを取り出す provider モデルの作成が終了しま
した。続いてこの provider モデルを呼び出し、データを表示させる consumer モデルの作
成に移ります。
39/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<<consumer.model>>>
2.consumer モデルへのビルダー追加
予め作成しておいた consumer モデルにグラフ表示のためのビルダーを追加します。
図 24 consumer モデル
1.Service Consumer ビルダーの追加
provider モデルに定義されている操作を、consumer モデルから実行するために、Service
consumer ビルダーを追加します。
設定値
名前
consumer1
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
40/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Page ビルダーの追加
グラフを表示するためのページを作成する Page ビルダーを追加します。雛形の HTML は
全て削除して、新たに HTML を書き直します。
名前
startPage
ページ・コンテンツ
<html>
<body>
<h3>インポートした Excel ファイルを使ってテーブルやグラフを表
示</h3>
<div><span name="area_table" /></div>
<hr>
<div><span name="area_chart1" /></div>
<hr>
<div><span name="area_chart2" /></div>
<hr>
<div><span name="area_javascript" /></div>
</body>
</html>
3.Action List ビルダーの追加
今回はこの Action List を main 関数とします。名前は'main'である必要があります。
【アクションの内容】
(1)Excel ファイルから値を取得する処理を呼び出す
(2)先ほど作成した startPage ページを表示
設定値
main
名前
アクション
アクション・リスト
DataServices/consumer1/getProductSales
startPage
こ の ビ ル ダ ー で の 設 定 に よ り 、 Portlet が 実 行 さ れ た 場 合 、 ま ず
DataServices/consumer1/getProdictSales という操作が実行され、その後 startPage に遷
移することになります。
41/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Data Page ビルダーの追加
Excel ファイルから取得した値をテーブルに表示するために Data Page ビルダーを追加し
ます。同様のビルダーに View & Form ビルダーがありますが、View & Form ビルダーは
ページまで作成するビルダーで、今回は利用せず、Data Page ビルダーを利用してデータ
を作り、Page ビルダーで作成したページに表示させる方法をとっています。
設定値
名前
dataPage1
変数
DataServices/consumer1/getProductSales/results
モデル内のページ
startPage
ページ・タイプ
HTML から推測
作成済みエ
データから UI を作成
チェック
レメントの
新規タグの場所
area_table
設定値
HTML テ ン プ レ ー
/factory/html_templates/gridtable.html
ト・ファイル
ラベルを生成
チェック
図 25 Data Page ビルダー設定画面
42/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Web チャート 拡張ビルダーの追加
このビルダーにより、取得した値を基に棒グラフを表示する機能が追加されます。
設定値
chart1
名前
ページの場
位置指定の方法
名前付きタグ上
所
ページ
startPage
タグ
area_chart1
チャートス
チャート・タイプ
棒
タイルおよ
カスタム・スタイルを指
チェック
びデータ
定
スタイル・データ
/solutions/dashboard/chartstyles/BaseFrameCh
artStyle.xml
チャート・データ
${DataServices/consumer1/getProductSales/res
ults}
データ形式
データ・ソース・フォー
変更
マット
テーブル形式データ(Rowset/Row)
X 軸のタグ
商品名
列を組み込むまたは除外
すべての列を使用する
する
チャート・
チャートのタイトル
売上げ集計（棒グラフ）
プロパティ
イメージ・タイプ
PNG
ー
幅
600
高さ
400
チャートの 3D 表示
3D
チャート凡例を表示する
凡例を使用する
ポップアップ
MouseOver
なお、Web charts 系の画像はデフォルトでは日本語が扱えません。
「スタイル・データ」で指定した XML ファイルにおいて、日本語が扱えないフォントを使
用する設定になっている為です。例えばスタイル・データが、
/solutions/dashboard/chartstyles/BaseFrameChartStyle.xml
の場合、'Arial Unicode MS'という文字列を'MS UI Gothic'に置き換えることで日本語が正
しく表示されます（上記のファイルの場合 2 箇所ある）。変更例を載せておきます。
43/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
【変更前】
<!-Chart Style file accompanying ForcastByStageBase model.
-->
<frameChart font="Arial Unicode MS-11">
<frame yDepth="3" />
<xAxis>
<labelStyle orientation="Vertical" />
</xAxis>
<yAxis scaleMin="0">
<labelFormat style="Pattern" pattern="###,###" />
<parseFormat pattern="#,##0.###" />
</yAxis>
<legend placement="Right" />
<elements
action="javascript:doChartClick('$(colLabel)',
'$(rowLabel)',
'$(rowIndex)');" shapeSize="50" lineWidth="1" drawShadow="true" fixedWidth="1">
<morph morph="Grow" />
</elements>
<title font="Arial Unicode MS-12-bold">
<decoration style="None" />
</title>
<paint isVertical="true" min="47" max="83" />
</frameChart>
【変更後】
<!-Chart Style file accompanying ForcastByStageBase model.
-->
<frameChart font="MS UI Gothic-11">
<frame yDepth="3" />
<xAxis>
<labelStyle orientation="Vertical" />
</xAxis>
44/147
'$(colIndex)',
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<yAxis scaleMin="0">
<labelFormat style="Pattern" pattern="###,###" />
<parseFormat pattern="#,##0.###" />
</yAxis>
<legend placement="Right" />
<elements
action="javascript:doChartClick('$(colLabel)',
'$(rowLabel)',
'$(rowIndex)');" shapeSize="50" lineWidth="1" drawShadow="true" fixedWidth="1">
<morph morph="Grow" />
</elements>
<title font="MS UI Gothic-12-bold">
<decoration style="None" />
</title>
<paint isVertical="true" min="47" max="83" />
</frameChart>
45/147
'$(colIndex)',
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
6.Client JavaScript ビルダーの追加
chart1 のスタイル・データ'/solutions/dashboard/chartstyles/BaseFrameChartStyle.xml'
において、棒グラフをクリックすると JavaScript 関数を呼び出すようになっています。
//一部抜粋
<elements
action="javascript:doChartClick('$(colLabel)',
'$(rowLabel)',
'$(colIndex)',
'$(rowIndex)');" shapeSize="50" lineWidth="1" drawShadow="true" fixedWidth="1">
<morph morph="Grow" />
</elements>
ただし、doChartClick という関数が定義されていないため、棒グラフをクリックした際、
JavaScript エラーが発生します。よって JavaScript 関数の doChartClick を定義する必要
があります。ここではブラウザのステータスバーに、選択した棒の名前を表示します。
設定値
名前
javascript1
場所のタイプ
明示的なページの場所
ページの場所
位置指定の方法
名前付きタグ上
ページ
startPage
タグ
area_javascript
スクリプト・ソース・タイプ
Builder 入力として明示的に指定
JavaScript
function doChartClick(var1, var2, var3, var4){
var moji = var2 + 'の' + var1;
window.status = moji;
}
46/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
7.Web チャート 拡張ビルダーの追加
このビルダーにより、取得した値を基に折れ線グラフを表示します。
設定値
chart2
名前
ページの
位置指定の方法
名前付きタグ上
場所
ページ
startPage
タグ
area_chart2
チャート
チャート・タイプ
折れ線
スタイル
カスタム・スタイ
チェック
およびデ
ルを指定
ータ
スタイル・データ
/solutions/dashboard/chartstyles/BaseLineChartStyle.
xml
チャート・データ
${DataServices/consumer1/getProductSales/results}
データ形
データ・ソース・
テーブル形式データ(Rowset/Row)
式変更
フォーマット
X 軸のタグ
商品名
列を組み込むまた
すべての列を使用する
は除外する
チ ャ ー
チャートのタイト
売上げ集計（折れ線グラフ）
ト・プロパ
ル
ティー
イメージ・タイプ
PNG
幅
600
高さ
400
チャートの 3D 表
3D
示
チャート凡例を表
凡例を使用する
示する
ポップアップ
MouseOver
棒グラフと同様に折れ線グラフ用のスタイル・データもデフォルトでは日本語が扱えませ
ん。例えばスタイル・データが、/solutions/dashboard/chartstyles/BaseLineChartStyle.xml
の場合、font 属性や<title>タグが存在しないので、追加する必要があります。変更例を載
せておきます。
47/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
【変更前】
<?xml version="1.0" encoding="UTF-8"?>
<frameChart autoAdjust="false" is3D="false">
<frame xDepth="3" yDepth="1" leftAxisPlacement="Back" isHStripVisible="true">
<background minColor="#FDFEF6"/>
</frame>
<xAxis>
<labelFormat pattern="#,##0.###"/>
<parseFormat pattern="#,##0.###"/>
</xAxis>
<yAxis scaleMin="0" scaleMax="2000">
<labelFormat pattern="#,##0.###"/>
<parseFormat pattern="#,##0.###"/>
<groupStyle>
<format pattern="#,##0.###"/>
</groupStyle>
</yAxis>
<legend placement="Right" valign="Bottom">
<decoration style="None"/>
</legend>
<elements place="Default" shape="Line" drawShadow="true">
<morph morph="Grow"/>
</elements>
</frameChart>
【変更後】
<?xml version="1.0" encoding="UTF-8"?>
<frameChart autoAdjust="false" is3D="false" font="MS UI Gothic-11">
<frame xDepth="3" yDepth="1" leftAxisPlacement="Back" isHStripVisible="true">
<background minColor="#FDFEF6"/>
</frame>
<xAxis>
<labelFormat pattern="#,##0.###"/>
<parseFormat pattern="#,##0.###"/>
</xAxis>
48/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<yAxis scaleMin="0" scaleMax="2000">
<labelFormat pattern="#,##0.###"/>
<parseFormat pattern="#,##0.###"/>
<groupStyle>
<format pattern="#,##0.###"/>
</groupStyle>
</yAxis>
<legend placement="Right" valign="Bottom">
<decoration style="None"/>
</legend>
<elements place="Default" shape="Line" drawShadow="true">
<morph morph="Grow"/>
</elements>
<title font="MS UI Gothic-12-bold" />
</frameChart>
49/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
8.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet
ポートレットのタイトル
Web チャートポートレット
ポートレットの短いタイトル
Web チャートポートレット
デフォルト・ロケール
ja
ここまでの設定で Excel シートのデータから、表／棒グラフ／折れ線グラフを生成して表
示するポートレットが完成しました。
50/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.4.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。
図 26 Web チャートポートレット表示（テーブル）
図 27 Web チャートポートレット表示（棒グラフ）
51/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
図 28 Web チャートポートレット表示（折れ線グラフ）
ここまでのレッスンで IBM WebSphere Portlet Factory/Dashboard Framework を用いて
・ステータスを表示するオブジェクト（黒丸グラフ／ゲージチャート）を作成する。
・Excel シートからデータを取り出す。
・テーブルを作成する。
・グラフを表示する。
といったことを行えるようになりました。ここまでで基本的な機能としてはおおよそカバ
ーしています。次のレッスンからは、さらに細かい動作（例：データベース接続／ドリル
ダウンテーブル作成など）についてのレッスンとなります。
52/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.5
［レッスン 5］Database へのアクセス
このレッスンではデータベースのテーブルから取得したデータをページに表示します。
まずはデータベースアクセスの動作確認をするために単純なアプリケーションを作成しま
す。当レッスンで作成したプロジェクトを基に、
「Record List and Detail」、
「Summary and
Drilldown」、
「Hierarchy Drilldown」ビルダーを使ったレッスンも実施します。
外部から取り込んだ値を利用する場合は、モデルを 2 つ作成する必要があります。
z
provider モデル: 外部から値を取り込むモデル
z
consumer モデル: provider モデルから値を受け取り、Dashboard に表示する
「provider モデル内の Service Definition ビルダー」と「consumer モデル内の Service
Consumer ビルダー」が関連付けされることで、モデル間のアクセスが可能となっています。
provider モデル
consumer モデル
データベース
図：データの流れ
4.5.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_DatabaseOperation
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: provider（モデルタイプは空にする）
モデル名: consumer_base（モデルタイプは空にする）
============================================================
53/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1..外部データの用意(データ・ソースの設定)
ここでは商品売上げを管理するサンプルを作成します。
あらかじめデータベース上にテーブルを作成し、WAS 側でデータ・ソースの設定を行って
おきます。（使用したデータベース製品: DB2 v9.1）なお、WebSphere Portal V6 導入時に
自動的に導入される Cloudscape での設定方法も後述します。
1.DB2 での設定
ここでは以下の通りに設定しました。
データベース: SAMPDB1
スキーマ: DB2ADMIN
テーブル: AMOUNT
JDBC 名: jdbc/SAMPDB1
テーブル AMOUNT の定義
列名
データ・タイプ
長さ
NULL 可
主キー
MAIN_CATEGORY
VARCHAR
80
×
○
SUB_CATEGORY
VARCHAR
80
×
○
PNAME
VARCHAR
80
×
○
UNITPRICE
INTEGER
-
×
×
QUANTITY
INTEGER
-
×
×
1. データベース/テーブルを作成します。DB2 コマンドを実行可能なディレクトリに移動し、
以下の SQL を実行します。
データベース SAMPDB1 にテーブル AMOUNT を作成する SQL
db2 connect to sampdb1 user db2admin using <password>
db2 CREATE TABLE AMOUNT ( MAIN_CATEGORY VARCHAR (80)
L , SUB_CATEGORY VARCHAR (80)
T NULL , UNITPRICE INTEGER
NOT NUL
NOT NULL , PNAME VARCHAR (80)
NOT NULL , QUANTITY INTEGER
ULL , PRIMARY KEY ( MAIN_CATEGORY, SUB_CATEGORY, PNAME)
db2 connect reset
54/147
NO
NOT N
)
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.テーブルにデータをインポートします。
テーブル AMOUNT にデータをインポート（25 レコード）
db2 connect to sampdb1 user db2admin using <password>
db2 "insert into AMOUNT values ('暖房器具','電気ストーブ','遠赤外線シーズヒーター',17800,2)"
db2 "insert into AMOUNT values ('暖房器具','電気ストーブ','遠赤外線メタルヒーター',7980,4)"
db2 "insert into AMOUNT values ('暖房器具','電気ストーブ','赤外線ヒーター',3980,3)"
db2 "insert into AMOUNT values ('暖房器具','石油ストーブ','業務用石油ストーブ',79800,1)"
db2 "insert into AMOUNT values ('暖房器具','石油ストーブ','におい吸収式石油ストーブ',8980,6)"
db2 "insert into AMOUNT values ('暖房器具','石油ストーブ','電動給油ポンプ',1880,2)"
db2 "insert into AMOUNT values ('暖房器具','ホットカーペット','ホットカーペット（1 畳相当）',4980,
2)"
db2 "insert into AMOUNT values ('暖房器具','ホットカーペット','ホットカーペット（3 畳相当）',8980,
1)"
db2 "insert into AMOUNT values ('掃除機・クリーナー','ショルダー掃除機','サイクロン式掃除機',1280
0,10)"
db2 "insert into AMOUNT values ('掃除機・クリーナー','ショルダー掃除機','紙パック式掃除機',11800,
3)"
db2 "insert into AMOUNT values ('掃除機・クリーナー','ハンドクリーナー','充電式ウエット＆ドライク
クリーナー',4170,5)"
db2 "insert into AMOUNT values ('掃除機・クリーナー','ハンドクリーナー','パソコン用ミニクリーナー
',1280,2)"
db2 "insert into AMOUNT values ('掃除機・クリーナー','掃除用品','掃除用モップ',340,5)"
db2 "insert into AMOUNT values ('掃除機・クリーナー','掃除用品','掃除用クロス',560,10)"
db2 "insert into AMOUNT values ('調理家電','電動ポット','マイコン沸騰ジャーポット（3.0L）',15800,
1)"
db2 "insert into AMOUNT values ('調理家電','電動ポット','マイコン沸騰ジャーポット（1.0L）',4280,4)
"
db2 "insert into AMOUNT values ('調理家電','カセットコンロ','カセットコンロ（小型）',2980,3)"
db2 "insert into AMOUNT values ('調理家電','カセットコンロ','カセットコンロ（大型）',5980,2)"
db2 "insert into AMOUNT values ('調理家電','ミキサー・ジューサー','ジュースミキサー',3980,3)"
db2 "insert into AMOUNT values ('調理家電','ミキサー・ジューサー','業務用ミキサー',32300,1)"
db2 "insert into AMOUNT values ('洗濯機','二槽式洗濯機','二槽式洗濯機（8kg）',60600,1)"
db2 "insert into AMOUNT values ('洗濯機','二槽式洗濯機','二槽式洗濯機（3.5kg）',18600,3)"
db2 "insert into AMOUNT values ('洗濯機','全自動洗濯機','全自動洗濯機（4.2kg)',23800,2)"
db2 "insert into AMOUNT values ('洗濯機','全自動洗濯機','全自動洗濯機（5.5kg）',39800,3)"
55/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
db2 "insert into AMOUNT values ('洗濯機','全自動洗濯機','簡易乾燥機能付き洗濯機（6kg）',52800,2)"
db2 connect reset
3. これでデータベースの準備は終了しました。後は WebSphere Application Server の管理
コンソールからデータ・ソースの設定を行うことにより、開発するポートレットからデー
タベースへのアクセスが可能になります。設定方法については、WebSphere Application
Server の InfoCenter を参照してください。
56/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Cloudscape での設定：
ここでは以下の通りに設定しました。
データベース: SAMPDB1
テーブル: AMOUNT
JDBC 名: jdbc/SAMPDB1
テーブル AMOUNT の定義
列名
データ・タイプ
長さ
NULL 可
主キー
MAIN_CATEGORY
VARCHAR
80
×
○
SUB_CATEGORY
VARCHAR
80
×
○
PNAME
VARCHAR
80
×
○
UNITPRICE
INTEGER
-
×
×
QUANTITY
INTEGER
-
×
×
1. コマンドラインから Cloudscpae のツールである ij を起動します。ij を起動するには以
下のディレクトリに移動した後、ij.bat を実行します。
（注：ij を利用する場合、WebSphere
Portal/WebSphere Applicatoin Server を停止しておく必要があります）
<WAS インストールディレクトリ>¥cloudscape¥bin¥embedded
2. データベースを作成して接続します。作成するには以下のコマンドを ij から実行します。
ij> connect ‘SAMPLEDB1;create=true;’
3. テーブル AMOUNT を作成します。
データベース SAMPDB1 にテーブル AMOUNT を作成する SQL
ij>CREATE TABLE AMOUNT ( MAIN_CATEGORY VARCHAR (80)
SUB_CATEGORY VARCHAR (80)
NULL , UNITPRICE INTEGER
NOT NULL ,
NOT NULL , PNAME VARCHAR (80)
NOT NULL , QUANTITY INTEGER
L , PRIMARY KEY ( MAIN_CATEGORY, SUB_CATEGORY, PNAME)
57/147
NOT
NOT NUL
) ;
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4. テーブル AMOUNT にデータをインポートします。
テーブル AMOUNT にデータをインポート（25 レコード）
ij> insert into AMOUNT values ('暖房器具','電気ストーブ','遠赤外線シーズヒーター',17800,2);
ij> insert into AMOUNT values ('暖房器具','電気ストーブ','遠赤外線メタルヒーター',7980,4);
ij> insert into AMOUNT values ('暖房器具','電気ストーブ','赤外線ヒーター',3980,3);
ij> insert into AMOUNT values ('暖房器具','石油ストーブ','業務用石油ストーブ',79800,1);
ij> insert into AMOUNT values ('暖房器具','石油ストーブ','におい吸収式石油ストーブ',8980,6);
ij> insert into AMOUNT values ('暖房器具','石油ストーブ','電動給油ポンプ',1880,2);
ij> insert into AMOUNT values ('暖房器具','ホットカーペット','ホットカーペット（1 畳相当）',4980,2);
ij> insert into AMOUNT values ('暖房器具','ホットカーペット','ホットカーペット（3 畳相当）',8980,1);
ij> insert into AMOUNT values ('掃除機・クリーナー','ショルダー掃除機','サイクロン式掃除機',12800,
10);
ij> insert into AMOUNT values ('掃除機・クリーナー','ショルダー掃除機','紙パック式掃除機',11800,3);
ij> insert into AMOUNT values ('掃除機・クリーナー','ハンドクリーナー','充電式ウエット＆ドライク
クリーナー',4170,5);
ij> insert into AMOUNT values ('掃除機・クリーナー','ハンドクリーナー','パソコン用ミニクリーナー',
1280,2);
ij> insert into AMOUNT values ('掃除機・クリーナー','掃除用品','掃除用モップ',340,5);
ij> insert into AMOUNT values ('掃除機・クリーナー','掃除用品','掃除用クロス',560,10);
ij> insert into AMOUNT values ('調理家電','電動ポット','マイコン沸騰ジャーポット（3.0L）',15800,1);
ij> insert into AMOUNT values ('調理家電','電動ポット','マイコン沸騰ジャーポット（1.0L）',4280,4);
ij> insert into AMOUNT values ('調理家電','カセットコンロ','カセットコンロ（小型）',2980,3);
ij> insert into AMOUNT values ('調理家電','カセットコンロ','カセットコンロ（大型）',5980,2);
ij> insert into AMOUNT values ('調理家電','ミキサー・ジューサー','ジュースミキサー',3980,3);
ij> insert into AMOUNT values ('調理家電','ミキサー・ジューサー','業務用ミキサー',32300,1);
ij> insert into AMOUNT values ('洗濯機','二槽式洗濯機','二槽式洗濯機（8kg）',60600,1);
ij> insert into AMOUNT values ('洗濯機','二槽式洗濯機','二槽式洗濯機（3.5kg）',18600,3);
ij> insert into AMOUNT values ('洗濯機','全自動洗濯機','全自動洗濯機（4.2kg)',23800,2);
ij> insert into AMOUNT values ('洗濯機','全自動洗濯機','全自動洗濯機（5.5kg）',39800,3);
ij> insert into AMOUNT values ('洗濯機','全自動洗濯機','簡易乾燥機能付き洗濯機（6kg）',52800,2);
これで Cloudscape でのデータ設定は終了しました。後は WebSphere Appcation Server の
管理コンソールから、データ・ソースの設定を行うことで、データベースへのアクセスの
準備が出来たことになります。手順については、WebSphere Application Server の
InfoCenter 等をご確認ください。
58/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<provider.model>>
2.provider モデルへのビルダー追加
WAS 上でのデータ・ソースの設定が完了したので、続いてデータ・ソースから実際のデー
タを取り出す provider モデルにビルダーを追加していきます。予め作成しておいた
provider モデルを開きます。
図 29 provider モデル
1.Service Definition ビルダーの追加
設定値
サービス名
provider
サービスを公開
チェック
後ほど作成する consumer_base モデルからの操作を許可するために、provider というサー
ビス名でサービスを定義します。
59/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.SQL Call ビルダーの追加
データ・ソースに接続し、データを取得するための SQL ステートメントを実行するための
SQL Call ビルダーを設定します。このビルダーは、接続先のデータ・ソースおよび SQL
ステートメントを設定することにより、他のモデルから DB への Query を実施することを
可能にします。
設定値
名前
getAllRecordsSource
SQL DataSource
jdbc/SAMPDB1
データベース・エ
SQL ステートメ
select
クスプローラー
ント
PNAME, UNITPRICE, QUANTITY
from
MAIN_CATEGORY, SUB_CATEGORY,
AMOUNT
ここで設定する SQL DataSource は前節で設定した WAS のデータ・ソース名となります。
図 30 SQL Call ビルダー
60/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Service Operation ビルダーの追加
consumer_base モデルから SQL Call ビルダーで定義した操作を呼び出すための操作名等
の設定を行います。
操作名
サービス操
データ・サービス
provider
作プロパテ
操作名
getAllRecords
ィー
呼び出すアクション
DataServices/getAllRecordsSource/execute
操作入力
入力構造処理
入力なし
捜査結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マッピング
自動
ここまでの設定で、データベースに WAS のデータ・ソースを利用して接続し、テーブルの
データを取得するための provider モデルの作成が終了しました。このモデルはこのレッス
ンだけではなく、続くレッスンでも利用します。
61/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<consumer_base.model>>
3.consumer_base モデルへのビルダー追加
前節で作成した provider モデルが動作していることを確認するために、簡単なテーブル表
示用の Portlet を作成します。ここでは View & Form ビルダーでページを作成し、そのペ
ージに表を表示します。
図 31 consumer_base モデル
1.Service Consumer ビルダーの追加
前節で設定した provider モデルにアクセスするための設定を行います。
設定値
名前
consumer_base
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
62/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.View & Form ビルダーの追加
provider モデルの操作(getAllRecords)を使って取り出したデータを表示するためのテーブ
ル、およびテーブルを配置するページを作成するビルダーを追加します。このビルダーは
テーブルを作成するだけでなく、自動的にテーブルを配置するページまで作成します。
設定値
form1
名前
ビュー・ペ
ビュー・データ操作
DataServices/consumer_base/getAllRecords
ージ・オプ
ビュー・ページ HTML
/factory/pages/view_and_form_view.html
ション
HTML テンプレートファイル
/factory/html_templates/gridtable.html
ページ単位のデータ表示
チェック
ページあたりの行数
10
Main を生成
チェック
ページ送りボタンを追加する
チェック
拡張
図 32 View&Form ビルダー（一部）
63/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet
ポートレットのタイトル
DB 基本アクセスポートレット
ポートレットの短いタイトル
DB 基本アクセスポートレット
デフォルト・ロケール
ja
これで、データベースから WAS のデータ・ソースを利用してデータを取得し、ポートレッ
ト上にテーブルとして表示させるポートレットが完成しました。
4.5.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。
図 33 DB 基本アクセスポートレット表示
以上でこのレッスンは終了です。続いてここで作成した provider を利用した Portelt を作
成するレッスンに進みます。
64/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.6
［レッスン 6］Database と Record List and Detail
このレッスンを行う前に「［レッスン 5］Database へのアクセス」を実行しておく必要が
あ り ま す 。「［ レ ッ ス ン 5 ］ Database へ の ア ク セ ス 」 の 際 に 作 成 し た プ ロ ジ ェ ク ト
「DF_DatabaseOperation」の provider モデルを再利用する為です。
consumer モデルは新たに作成します。consumer モデルの中で Record List and Detail ビ
ルダーを作成します。Record List and Detail ビルダーは最初に一覧を表示します。一覧の
項目（ここでは商品名）をクリックすると、選択された項目の個別情報が表示されます。
データが階層になっている場合には適していません。データが階層になっていて、複数の
レベルのドリルダウン（詳細化）が必要な場合は、このビルダーの代わりに Hierarchy
Drilldown ビルダーを使います。Hierarchy Drilldown ビルダーについては後のレッスンで
利用します。
4.6.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_DatabaseOperation（作成済み）
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: provider（作成済み）
モデル名: consumer_recordlist（モデルタイプは空にする）
============================================================
65/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<consumer_recordlist.model>>
1.consumer_recordlist モデルへのビルダー追加
予め作成しておいた consumer_recordlist モデルに、テーブルを表示するためのビルダーを
追加します。自動的に作成されるテーブルは一覧表示および詳細表示テーブルとなります。
図 34 consumer_recordlist モデル
1.Service Consumer ビルダーを追加します。
設定値
名前
consumer_recordlist
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
66/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Record List and Detail ビルダーの追加
データ表示用テーブル／詳細表示用テーブルを追加するビルダーを設定します。
設定値
recordlist1
名前
作成するページ
レコード・リス
レコード・リスト・ページ
チェック
レコード・詳細ページ
チェック
main アクションを生成
はい
データをロードするアクション
DataServices/consumer_recordlist
/getAllRecords
ト・プロパティ
詳細リンク列
PNAME
ページのタイトル
レコードリスト
HTML テンプレート・ファイル
/solutions/dashboard/templates/gr
idtable.htm
表示スタイル
ページ単位のリスト
ページあたりの行数
10
範囲テキストフォーマット
{start} - {end} of {count}
レコード詳細プ
レコード詳細ソース
レコード・リスト内の選択行
ロパティー
ページのタイトル
詳細
※以下のような警告がでますが無視して下さい。
PageLocation
式
「
Page
recordlist1Breadcrumbs_breadcrumbsPage
BreadcrumbsFinalItemText」は場所に対して評価を行いません
図 35 Record List and Detail ビルダー設定画面（一部）
67/147
NameSearch
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Data Column Modifier ビルダーの追加
一覧表示の際、テーブルの各項目（ラベル）を日本語として表示するために、Data Column
Modifier ビルダーを追加します。
設定値
名前
column_modifier_list
コンテナー・
[recordlist1RecordListPage]recordlist1DataPageForRecordListPage/Ro
フィールド
wSet/Row
列を管理
チェック
列１
列名: MAIN_CATEGORY
状況: 表示
列見出し: メインカテゴリ
列２
列名: SUB_CATEGORY
状況: 表示
列見出し: サブカテゴリ
列３
列名: PNAME
状況: 表示
列見出し: 商品名
列４
列名: UNITPRICE
状況: 非表示
列見出し: UNITPRICE
列５
列名: QUANTITY
状況: 非表示
列見出し: QUANTITY
列を表示する／しないの設定を下図のように行います。
図 36 Data Column Modifier 設定画面（一部）
68/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Data Column Modifier ビルダーの追加(その２)
詳細表示の際、テーブルの各項目（ラベル）を日本語として表示するために、Data Column
Modifier ビルダーを追加します。
設定値
名前
column_modifier_detail
コンテナー・
[recordlist1RecordDetailPage]recordlist1DataPageForRecordDetailPag
フィールド
e/Row
列を管理
チェック
列１
列名: MAIN_CATEGORY
状況: 表示
列見出し: メインカテゴリ
列２
列名: SUB_CATEGORY
状況: 表示
列見出し: サブカテゴリ
列３
列名: PNAME
状況: 表示
列見出し: 商品名
列４
列名: UNITPRICE
状況: 表示
列見出し: 単価
列５
列名: QUANTITY
状況: 表示
列見出し: 販売数
列を表示する／しないの設定を下図のように行います。
図 37 Data Column Modifier 設定画面（一部）
69/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet2
ポートレットのタイトル
Record List and Detail ポートレット
ポートレットの短いタイトル
Record List and Detail ポートレット
デフォルト・ロケーる
ja
これでデータベースからデータを取得して表示するポートレットが作成されました。
70/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.6.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。
一覧表示
図 38 Record List and Detail ポートレット一覧表示
商品名列の商品のリンクを押すと以下の詳細画面に表示が切り替わります。
個別情報表示
図 39 Record List and Detail ポートレット詳細表示
71/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.7
［レッスン 7］Database と Hierarchy Drilldown
このレッスンを行う前に「［レッスン 5］Database へのアクセス」を実行しておく必要が
あ り ま す 。「［ レ ッ ス ン 5 ］ Database へ の ア ク セ ス 」 の 際 に 作 成 し た プ ロ ジ ェ ク ト
「DF_DatabaseOperation」の provider モデルを再利用する為です。
consumer モデルは新たに作成します。consumer モデルの中で Hierarchy Drilldown ビル
ダーを作成します。データが階層になっていて、複数のレベルのドリルダウン（詳細化）
が必要な場合に適しています。例えば商品カタログのように、メインカテゴリ>サブカテゴ
リ>商品名とドリルダウンしたり、ロールアップ（上の階層に戻ったり）します。
このレッスンでは、データは 3 階層になっています。
メインカテゴリ > サブカテゴリ > 商品一覧
というようなドリルダウンを実現する為に、既存の provider モデルに SQL を 3 つ追加作
成します。
z
メインカテゴリ取得用 SQL
z
サブカテゴリ取得用 SQL
z
商品一覧用 SQL
4.7.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_DatabaseOperation（作成済み）
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: provider（作成済み）
モデル名: consumer_hierarchy（モデルタイプは空にする）
============================================================
注）プロジェクトはレッスン５で使用したものをそのまま使いますが、後のレッスンでも
同じプロジェクトを利用するため、場合によっては一度プロジェクトをコピーして名前変
更をして利用する方法をとってください。
72/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<provider.model>>
1.provider モデルの拡張
レッスン５で作成した provider モデルを拡張します。
図 40 provider モデル（拡張済み）
上図において赤枠で囲まれた部分のビルダーを追加していきます。
73/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.SQL Call ビルダーの追加
メインカテゴリ取得用 SQL を作成する為に、SQL Call ビルダーを追加します。
設定値
名前
getMainCategorySource
SQL DataSource
jdbc/SAMPDB1
データベース・エ
SQL ステートメ
select MAIN_CATEGORY, sum(UNITPRICE *
クスプローラー
ント
QUANTITY) as
TOTAL from AMOUNT group
by MAIN_CATEGORY
図 41 SQL Call ビルダー（メインカテゴリ取得）
2.Service Operation ビルダーの追加
追加した SQL Call を実行する操作を追加します。
操作名
サービス操
データ・サービス
provider
作プロパテ
操作名
getMainCategory
ィー
呼び出すアクション
DataServices/getMainCategorySource/execute
操作入力
入力構造処理
入力なし
操作結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マッピン
自動
グ
74/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.SQL Call ビルダーの追加
サブカテゴリ取得用 SQL を作成する為に、SQL Call ビルダーを追加します。
設定値
名前
getSubCategorySource
SQL DataSource
jdbc/SAMPDB1
データベー
SQL ステートメ
select
ス・エクス
ント
QUANTITY) as TOTAL from AMOUNT
SUB_CATEGORY,
MAIN_CATEGORY
プローラー
=
sum(UNITPRICE
?
group
*
where
by
SUB_CATEGORY
パラメーター・バインディング
自動(XML 変数の作成)
パラメータ
位置
1
ー
方向
入力
JDBC 型キャスト
自動
値または設定
${Variables/getSubCategorySourceInputs/Parameter1
Value}
ここでは、SQL ステートメント中にパラメータ・マーカー’?’を設定し、そのマーカーに
${Variables/getSubCategorySourceInputs/Parameter1Value} という変数で示される値を
設定しています。
図 42 SQL Call ビルダー（サブカテゴリ取得）
75/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Service Operation ビルダーの追加
追加した SQL Call を実行する操作を追加します。
操作名
サービス
データ・サービス
provider
操作プロ
操作名
getSubCategory
パティー
呼び出すアクション
DataServices/getSubCategorySource/execute
操作入力
入力構造処理
入力スキーマを指定
入力スキーマ
getSubCategorySourceInputs/getSubCategorySource
Inputs
操作結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マ
自動
ッピング
5.SQL Call ビルダーの追加
商品一覧用 SQL を作成する為に、SQL Call ビルダーを追加します。
設定値
名前
getItemsInCategorySource
SQL DataSource
jdbc/SAMPDB1
データベー
SQL ステートメ
select
ス・エクス
ント
(UNITPRICE
PNAME,
AMOUNT
プローラー
*
where
UNITPRICE,
QUANTITY)
as
QUANTITY,
TOTAL
MAIN_CATEGORY
=
?
from
AND
SUB_CATEGORY = ?
パラメーター・バインディング
自動(XML 変数の作成)
パラメータ
位置
1
ー
方向
入力
JDBC 型キャスト
自動
値または設定
${Variables/getItemsInCategorySourceInputs/Paramet
er1Value}
位置
2
方向
入力
JDBC 型キャスト
自動
値または設定
${Variables/getItemsInCategorySourceInputs/Paramet
er2Value}
76/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
ここではパラメータ・マーカーが２つ設定されていますので、パラメータとしては２つ設
定します。次のページの図のように設定します。
図 43 SQL Call ビルダー設定画面（アイテム）
上図の青点線で囲まれた部分に、SQL ステートメントのパラメータ・マーカー部分に代入
する変数を設定します。
6.Service Operation ビルダーの追加
追加した SQL Call を実行する操作を追加します。
操作名
サービス
データ・サービス
provider
操作プロ
操作名
getItemsInCategory
パティー
呼び出すアクション
DataServices/getItemsInCategorySource/execute
操作入力
入力構造処理
入力スキーマを指定
入力スキーマ
getItemsInCategorySourceInputs/getItemsInCategor
ySourceInputs
操作結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マ
自動
ッピング
77/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<consumer_hierarchy.model>>
2.consumer_hierarchy モデルへのビルダー追加
provider モデルで取得したデータをドリルダウン形式で表示するモデルを作成します。
定義した操作の結果を表示する部分を作成することになります。
図 44 consumer_hierarchy モデル設定画面
1.Service Consumer ビルダーの追加
provider で定義した操作を利用するために Service Consumer ビルダーを追加します。
設定値
名前
consumer_hierarchy
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
78/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Variable ビルダーの追加（その１）
ドリルダウン時に選択したメインカテゴリを記憶しておく為の変数をセットします。まず
はメインカテゴリを記憶しておく変数を定義します。
操作名
名前
varMain
タイプ
String
初期値
（空のままにしておきます）
図 45 Variable ビルダーの設定画面
3.Variable ビルダーの追加
続いてサブカテゴリを記憶しておく為の変数を定義します。
操作名
名前
varSub
タイプ
String
初期値
（空のままにしておきます）
79/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Hierarchy Drilldown ビルダーの追加
MainCategory > SubCategory > Product の 3 階層のページを作成する為に、Hierarchy
Drilldown ビルダーを追加します。まずページを３つ作成し、後ほど追加修正を行います。
設定値
名前
hierarchy1
main アクションを作成
チェック
アクション
ページ
MainCategory
フロー（そ
インポートするページ
/solutions/dashboard/hierarchydrilldown.html
の１）
ロードするアクション
＜とりあえず空白のまま。後で設定します＞
ページ・データ
DataServices/consumer_hierarchy/getMainCat
egory/results
「ドリルダウン・リン
MAIN_CATEGORY
ク」フィールド
Breadcrumb のテキスト
メインカテゴリ
アクション
ページ
SubCategory
フロー（そ
インポートするページ
/solutions/dashboard/hierarchydrilldown.html
の２）
ロードするアクション
＜とりあえず空白のまま。後で設定します＞
ページ・データ
DataServices/consumer_hierarchy/getSubCate
gory/results
「ドリルダウン・リン
SUB_CATEGORY
ク」フィールド
Breadcrumb のテキスト
サブカテゴリ
アクション
ページ
Product
フロー（そ
インポートするページ
/solutions/dashboard/hierarchydrilldown.html
の３）
ロードするアクション
＜とりあえず空白のまま。後で設定します＞
ページ・データ
DataServices/consumer_hierarchy/getItemsInC
ategory/results
「ドリルダウン・リン
（空白のままにしておきます）
ク」フィールド
Breadcrumb のテキスト
商品一覧
※以下のような警告がでますが無視して下さい。
PageLocation
式
「
Page
hierarchy1Breadcrumbs_breadcrumbsPage
NameSearch
BreadcrumbsFinalItemText」は場所に対して評価を行いません。
※このビルダーのスクリーンショットは、後述する追加修正の説明時に載せてあります。
図 49/図 50/図 51 が該当しますので参照してください。
80/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Action List ビルダーの追加（その１）
ページを表示する際のアクションを定義する為に、Action List ビルダーを追加します。
【アクションの内容】
(1)メインカテゴリ取得用 SQL を実行します。
設定値
actionGetMainCategory
名前
アクション
アクション・リスト
DataServices/consumer_hierarchy/getMainCategory
図 46 Action List ビルダー（メインカテゴリ用）
上図において青点線で囲まれた部分にアクションを定義します。
このアクションは、ポートレットを表示した際に最初に実行されるアクションです。
81/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
6.Action List ビルダーの追加（その２）
メインカテゴリをドリルダウン時のアクションを定義します。
【アクションの内容】
(1)選択したメインカテゴリを変数 varMain に代入します。
(2)サブカテゴリ取得用 SQL の入力引数に、変数 varMain の値を代入します。
(3)サブカテゴリ取得用 SQL を実行します。
設定値
actionGetSubCategory
名前
アクショ
ア ク シ ョ
Assignment!Variables/varMain=${Variables/hierarchy1_Mai
ン
ン・リスト１
nCategory_SelectedRowData/Row/MAIN_CATEGORY}
ア ク シ ョ
Assignment!DataServices/consumer_hierarchy/getSubCateg
ン・リスト２
ory/inputs/getSubCategorySourceInputs/Parameter1Value=
${Variables/varMain}
ア ク シ ョ
DataServices/consumer_hierarchy/getSubCategory
ン・リスト３
図 47 Action List ビルダー（サブカテゴリ用）
青点線枠内にアクションの設定をします。１つ目のアクションについては、赤枠内のボタ
ンを押し、Special>Assignment を選択した後、ソース／ターゲットを Variablers/varMain 、
${Variables/hierarchy1_MainCategory_SelectedRowData/Row/MAIN_CATEGORY } と
セットすることで設定します。２つ目についても同様の手段です。
82/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
7.Action List ビルダーの追加（その３）
サブカテゴリをドリルダウン時のアクションを定義します。
【アクションの内容】
(1)選択したサブカテゴリを変数 varSub に代入します。
(2)商品一覧用 SQL の入力引数に、変数 varMain の値を代入します。
(3)商品一覧用 SQL の入力引数に、変数 varSub の値を代入します。
(4)商品一覧用 SQL を実行します。
設定値
actionGetItem
名前
アクション
アクション・リ
Assignment!Variables/varSub=${Variables/hierarchy1_S
スト１
ubCategory_SelectedRowData/Row/SUB_CATEGORY}
アクション・リ
Assignment!DataServices/consumer_hierarchy/getItemsI
スト２
nCategory/inputs/getItemsInCategorySourceInputs/Para
meter1Value=${Variables/varMain}
アクション・リ
Assignment!DataServices/consumer_hierarchy/getItemsI
スト３
nCategory/inputs/getItemsInCategorySourceInputs/Para
meter2Value=${Variables/varSub}
アクション・リ
DataServices/consumer_hierarchy/getItemsInCategory
スト４
図 48 Action List ビルダー（商品一覧用）
83/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
8.Hierarchy Drilldown ビルダー(hierarchy1)への設定追加
「ロードするアクション」に先ほど作成した Action List をそれぞれ割り当てます。
追加設定値
ペ
ー
ジ
：
MainCategory
ペ
ー
ジ
ロードするアクショ
(Methods)actionGetMainCategory
ン
：
ロードするアクショ
SubCategory
ン
ページ：Product
ロードするアクショ
(Methods)actionGetSubCategory
(Methods)actionGetItems
ン
実際の設定画面は以下のようになります。
図 49 Hierarchy Drilldown ビルダー設定１
上図は MainCategory ページの設定画面です。青点線枠内がページに関連する設定項目で
す。
84/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
図 50 Hierarchy Drilldown ビルダー設定 2
図 51 Hierarchy Drilldown ビルダー設定 3
85/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
9.Data Field Modifier ビルダーの追加
TOTAL（合計金額）と UNITPRICE（単価）の書式を変更（3 桁ごとにカンマを表示）す
る為に、Data Field Modifier ビルダーを追加します。
設定値
名前
field_modifier
フィールド・セレクター・ツール
名前で選択
フィー
変更するフィールドの
[MainCategory]MainCategory/RowSet/Row/TOTAL
ルド
リスト
[SubCategory]SubCategory/RowSet/Row/TOTAL
[Product]Product/RowSet/Row/TOTAL
[Product]Product/RowSet/Row/UNITPRICE
フォー
フォーマッター・クラス
ndardFormatter
マット
設定
com.bowstreet.builders.webapp.pageautomation.Sta
フォーマット式
NumberFormat(FormatString)
図 52 Data Field Modifoer ビルダー設定画面（一部）
86/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
10.Data Hierarchy Modifier ビルダーの追加
テーブルの各項目（ラベル）を日本語として表示するために、Data Hierarchy Modifier ビ
ルダーを追加します。
設定値
名前
hierarchy_modifier
フィールド・セレクター・ツ
名前で選択
ール
フィール
変更されるグル
[MainCategory]MainCategory/RowSet/Row
ド
ープのリスト
[SubCategory]SubCategory/RowSet/Row
[Product]Product/RowSet/Row
名前: MAIN_CATEGORY
状況: 表示
ラベル: メインカテゴリ
名前: SUB_CATEGORY
状況: 表示
ラベル: サブカテゴリ
名前: PNAME
状況: 表示
ラベル: 商品名
名前: UNITPRICE
状況: 表示
ラベル: 単価
名前: QUANTITY
状況: 表示
ラベル: 販売数
名前: TOTAL
状況: 表示
ラベル: 売上げ
※登録順番は関係あります。表に表示したい順番に登録してください。
図 53 Data Hierarchy Modifier ビルダー設定画面（一部）
ラベルに関する設定を上図の青点線枠内に表示する順番に設定します。
87/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
11. Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet3
ポートレットのタイトル
Hierarchy Drilldown ポートレット
ポートレットの短いタイトル
Hierarchy Drilldown ポートレット
デフォルト・ロケーる
ja
88/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.7.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます
図 54 Hierarchy Drilldown ポートレット初期表示
メインカテゴリ列のリンクをクリックすると、一段階ドリルダウンします。
図 55 Hierarchy Drilldown ポートレット（サブカテゴリ表示）
89/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
さらにサブカテゴリ列のリンクをクリックするともう一段階ドリルダウンして、商品一覧
のテーブルが表示されます。
図 56 Hierarchy Drilldown ポートレット（商品一覧表示）
このようにメインカテゴリ->サブカテゴリ->さらに下のカテゴリのような構造をしている
データを表示する際に、Hierarchy Drilldown ポートレットは適しています。また表の上部
にある Beardcrumb（パンくず）のリンクをクリックすると、いつでもそのレベルの表示が
できます。
これでこのレッスンは終了です。
90/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.8
［レッスン 8］Database と Summary and Drilldown
このレッスンを行う前に「［レッスン 5］Database へのアクセス」を実行しておく必要が
あ り ま す 。「［ レ ッ ス ン 5 ］ Database へ の ア ク セ ス 」 の 際 に 作 成 し た プ ロ ジ ェ ク ト
「DF_DatabaseOperation」の provider モデルを再利用する為です。
consumer モデルは新たに作成します。consumer モデルの中で Summary and Drilldown
ビルダーを作成します。このビルダーは Record List and Detail ビルダーと Web チャート
ビルダーが組み合わさった機能を持っています。
4.8.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_DatabaseOperation（作成済み）
追加する機能セット:
Dashboard Framework
GreenPoint Web Chart Builder
Excel 拡張機能
モデル名: provider（作成済み）
モデル名: consumer_summary（モデルタイプは空にする）
============================================================
91/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<provider.model>>
1.provider モデルの拡張
メインカテゴリ取得用 SQL を作成する為に、SQL Call ビルダーを追加します。なおこの
レッスンを行う前に「［レッスン 7］Database と Hierarchy Drilldownn」を実行していた
場合、既に作成されている筈なので、新たに作成する必要はありません。このセクション
はスキップして 2.consumer_summry モデルの作成のセクションに進んでください。
図 57 provider モデル（拡張済み）
上図において赤枠で囲まれた部分のビルダーを追加していきます。
92/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.SQL Call ビルダーの追加
メインカテゴリ取得用 SQL を作成する為に、SQL Call ビルダーを追加します。
設定値
名前
getMainCategorySource
SQL DataSource
jdbc/SAMPDB1
データベース・エ
SQL ステートメ
select MAIN_CATEGORY, sum(UNITPRICE *
クスプローラー
ント
QUANTITY) as
TOTAL from AMOUNT group
by MAIN_CATEGORY
図 58 SQL Call ビルダー（メインカテゴリ取得）
2.Service Operation ビルダーの追加
追加した SQL Call を実行する操作を追加します。
操作名
サービス操
データ・サービス
provider
作プロパテ
操作名
getMainCategory
ィー
呼び出すアクション
DataServices/getMainCategorySource/execute
操作入力
入力構造処理
入力なし
操作結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マッピン
自動
グ
93/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.SQL Call ビルダーの追加
サブカテゴリ取得用 SQL を作成する為に、SQL Call ビルダーを追加します。
設定値
名前
getSubCategorySource
SQL DataSource
jdbc/SAMPDB1
データベー
SQL ステートメ
select
ス・エクス
ント
QUANTITY) as TOTAL from AMOUNT
SUB_CATEGORY,
MAIN_CATEGORY
プローラー
=
sum(UNITPRICE
?
group
*
where
by
SUB_CATEGORY
パラメーター・バインディング
自動(XML 変数の作成)
パラメータ
位置
1
ー
方向
入力
JDBC 型キャスト
自動
値または設定
${Variables/getSubCategorySourceInputs/Parameter1
Value}
ここでは、SQL ステートメント中にパラメータ・マーカー’?’を設定し、そのマーカーに
${Variables/getSubCategorySourceInputs/Parameter1Value} という変数で示される値を
設定しています。
図 59 SQL Call ビルダー（サブカテゴリ取得）
94/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Service Operation ビルダーの追加
追加した SQL Call を実行する操作を追加します。
操作名
サービス
データ・サービス
provider
操作プロ
操作名
getSubCategory
パティー
呼び出すアクション
DataServices/getSubCategorySource/execute
操作入力
入力構造処理
入力スキーマを指定
入力スキーマ
getSubCategorySourceInputs/getSubCategorySource
Inputs
操作結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マ
自動
ッピング
以上で provider モデルへのビルダー追加は終了しました。次のセクションへ進んでくださ
い。このレッスンを行う前に「［レッスン 7］Database と Hierarchy Drilldownn」を実行
していた場合、既に作成されている筈なので、新たに作成する必要はありません。このセ
クションはスキップして 2.consumer_summry モデルの作成のセクションに進んでくださ
い。
95/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<consumer_summary.model>>
2.consumer_summry モデルへのビルダー追加
予め作成しておいた consumer_summry モデルに、サマリーテーブルおよびチャートを追
加するためのビルダーを設定していきます。
図 60 consumer_summry モデル設定画面
1.Service Consumer ビルダーの追加
provider モデルで定義した操作を consumer_summry モデル内から利用するために、
Service Consumer ビルダーを追加します。
設定値
名前
consumer_summry
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
96/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Summary and Drilldown ビルダーの追加
provider から取得したデータを、テーブルおよびチャートに表示させるためのビルダーを
追加します。このビルダーはテーブル／チャートとともに表示するページも作成します。
設定値
名前
summary1
初期化アクション
DataServices/consumer_summary/get
MainCategory
DataServices/consumer_summary/get
要約データ
MainCategory/results
要約ページのタイトル
メインカテゴリ
作成する要
要約チャート／テーブル・ページ
チャートとテーブルの両方
約ページ
main アクションを作成
はい
ページ・レ
ページ・レイアウト・モード
チャートとテーブルを別々のページに
イアウトお
ページ・ナビゲーション・タイプ
タブ付きページ
要約チャー
カスタム・スタイルを指定
チェック
ト・プロパ
チャート・スタイル
/solutions/dashboard/chartstyles/Base
よびナビゲ
ーション
HorizontalBarChart.xml
ティー
X 軸の列
MAIN_CATGORY
列の選択
すべての列を使用
値のフォーマット設定
###,##0 円
チャート凡例
凡例なし
チャート・フォーマット
PNG
チャートの幅
600
チャートの高さ
400
※以下のような警告がでますが無視して下さい。
PageLocation
式
「
Page
summary1Breadcrumbs_breadcrumbsPage
NameSearch
BreadcrumbsFinalItemText」は場所に対して評価を行いません。
ここまでの作業で Summry のチャート表示部分についての設定は終了しています。表ノブ
部はまだ作成せず、後に追加修正を行います。
※このビルダーのスクリーンショットは、後述する追加修正の説明時に載せてあります。
97/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Action List ビルダーの追加
テーブル表示用データを取得するために、Action List ビルダーを追加します。
【アクションの内容】
(1)サブカテゴリ取得用 SQL の入力引数に、選択したメインカテゴリを代入します。
(2)サブカテゴリ取得用 SQL を実行します。
設定値
actionGetSubCategory
名前
アクショ
アクショ
Assignment!DataServices/consumer_summary/getSubCategory/
ン
ン・リス
inputs/getSubCategorySourceInputs/Parameter1Value=${Varia
ト１
bles/summary1_SelectedRowData/Row/MAIN_CATEGORY}
アクショ
DataServices/consumer_summary/getSubCategory
ン・リス
ト２
図 61 Action List ビルダー設定画面
上図青点線枠内にアクションを設定します。
98/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Summary and Drilldown ビルダー(summary1)の拡張
前節で追加したアクションを、テーブルを呼び出す際に使用するよう設定します。
追加設定値
要約テーブ
リンクの列
MAIN_CATEGORY
ル・プロパ
HTML テンプレート・ファイル
/solutions/dashboard/templates/gridtabl
e.htm
ティー
ドリルダウ
ドリルダウン・タイプ
アクションを呼び出してデータを表示
ン・プロパ
呼び出すアクション
(Methods)actionGetSubCategory
ティー
ドリルダウン・データ
DataServices/consumer_summary/getS
ubCategory/results
ページのタイトル
サブカテゴリ
アクション
自動表示／非表示を有効にする
非チェック
メニューの
ラベル
メニュー
オプション
Excel へのエクスポートを有効
チェック
にする
Excel テキスト
Excel
エクスポート・ファイル名
エクスポート.xls
ページの印刷を有効にする
チェック
印刷ツールチップ・テキスト
印刷
以下に実際の設定画面のスクリーンショットを添付します。
図 62 Summary and Drilldown ビルダー設定画面（基本設定部）
99/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
図 63
図 64
Summary and Drilldown ビルダー設定画面（基本設定部）
Summary and Drilldown ビルダー設定画面（要約チャート設定）
100/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
図 65
Summary and Drilldown ビルダー設定画面（テーブル設定）
これで基本的な設定が終わり、ポートレット上にサマリーチャートとドリルダウン表が表
示されるようになります。
なお Web charts 系の画像はデフォルトでは日本語が扱えません。
「チャート・スタイル」で指定した XML ファイルにおいて、日本語が扱えないフォントを
使用する設定になっている為です。例えばチャート・スタイルが、
/solutions/dashboard/chartstyles/BaseHorizontalBarChart.xml の場合、'Arial Unicode
MS'という文字列を'MS UI Gothic'に置き換えることで日本語が正しく表示されます（上記
のファイルの場合 2 箇所ある）。変更例を載せておきます。
【変更前】
<frameChart font="Arial Unicode MS-11">
<frame yDepth="3" />
<yAxis scaleMin="0">
<labelFormat style="Pattern" pattern="###,###" />
<parseFormat pattern="#,##0.###" />
<labelStyle orientation="Horizontal" />
</yAxis>
<xAxis>
<labelFormat pattern="#,##0.###" />
<parseFormat pattern="#,##0.###" />
<labelStyle orientation="Horizontal" />
101/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
</xAxis>
<legend placement="top" />
<elements
shape="Column"
shapeSize="50"
lineWidth="1"
drawShadow="true"
lineWidth="1"
drawShadow="true"
fixedWidth="1">
<morph morph="Grow" stage="Cols" />
</elements>
<title font="Arial Unicode MS-12">
<decoration style="None" />
</title>
<paint isVertical="true" min="47" max="83" />
</frameChart>
【変更後】
<frameChart font="MS UI Gothic-11">
<frame yDepth="3" />
<yAxis scaleMin="0">
<labelFormat style="Pattern" pattern="###,###" />
<parseFormat pattern="#,##0.###" />
<labelStyle orientation="Horizontal" />
</yAxis>
<xAxis>
<labelFormat pattern="#,##0.###" />
<parseFormat pattern="#,##0.###" />
<labelStyle orientation="Horizontal" />
</xAxis>
<legend placement="top" />
<elements
shape="Column"
shapeSize="50"
fixedWidth="1">
<morph morph="Grow" stage="Cols" />
</elements>
<title font="MS UI Gothic-12">
<decoration style="None" />
</title>
<paint isVertical="true" min="47" max="83" />
</frameChart>
102/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Data Column Modifier ビルダーの追加（メインカテゴリ用）
メインカテゴリを表示の際、テーブルの各項目（ラベル）を日本語として表示するために、
Data Column Modifier ビルダーを追加します。
設定値
名前
column_modifier_main
コンテナー・フィールド
[summary1Table]summary1_table/RowSet/Row
列を管理
チェック
列名: MAIN_CATEGORY
状況：表示
列見出し：メインカテゴリ
列名：TOTAL
状況：表示
列見出し：売上げ合計
6.Data Column Modifier ビルダーの追加（サブカテゴリ用）
サブカテゴリを表示の際、テーブルの各項目（ラベル）を日本語として表示するために、
Data Column Modifier ビルダーを追加します。
設定値
名前
column_modifier_sub
コンテナー・フィールド
[summary1DetailTable]summary1DetailsDataPage/Ro
wSet/Row
列を管理
チェック
列名: SUB_CATEGORY
状況：表示
列見出し：メインカテゴリ
列名：TOTAL
状況：表示
列見出し：売上げ合計
7.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet4
ポートレットのタイトル
Summary and Drilldown ポートレット
ポートレットの短いタイトル
Summary and Drilldown ポートレット
デフォルト・ロケール
ja
ここまでの設定でデータベースから WAS のデータ・ソースを用いてデータを取得し、サマ
リーチャートとドリルダウンテーブルを表示するポートレットの作成が終了しました。
103/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.8.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます
図 66 Summary and Drilldown ポートレット表示（サマリチャート）
図 67 Summry and Drilldown ポートレット表示（ドリルダウンテーブル）
104/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.9
［レッスン 9］単純な Filter
Filter は、同一ページに配置してあるポートレット間のデータ通信を行います。よってモデ
ルを 2 つ作成する必要があります。
z
sender モデル: 指定されたアクションにより値を送信する
z
receiver モデル: sender モデルから値を受け取り、Dashboard に表示する
このレッスンでは単純に文字列を送受信します。
「sender モデル内の Query Filter Form ビルダー」が「照会フィルター(Query Filter)ビル
ダー」の値を送信し、「receiver モデル内の Query Filter Observer ビルダー」が受信しま
す。受信後、任意のアクションを実行できます。
sender モデル
receiver モデル
図：データの流れ
4.9.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_FilterSimple
追加する機能セット:
Dashboard Framework
モデル名: sender（モデルタイプは空にする）
モデル名: receiver（モデルタイプは空にする）
============================================================
105/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<sender.model>>
1.sender モデルへのビルダー追加
メッセージを送る元となるポートレットを作成するためにビルダーを追加します。
図 68 sender モデル設定画面
106/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Lookup Table ビルダーの追加
ドロップダウン・リストの項目を登録する為に、Lookup Table ビルダーを追加します。
設定値
名前
lookup1
データ・ソース
新規 XML データ
新規 XML データ
<Items><Item><Label> 北 海 道 </Label><Value> 北
海道は少ないです。</Value></Item>
<Item><Label>東京都</Label><Value>東京都は非
常に多いです。</Value></Item>
<Item><Label>広島県</Label><Value>広島県は多
いです。</Value></Item>
<Item><Label>鹿児島県</Label><Value>鹿児島県
は少ないです。</Value></Item></Items>
変数タイプ
値タグおよびラベル・タグ
値タグ
Value
ラベル・タグ
Label
追加データ定義
データの入手元
Builder 入力
ブランクの選択
チェック
項目を追加
図 69 Look Table ビルダー設定画面（一部）
107/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Query Filter Form ビルダーの追加
ポートレット上に Filter のフォームを設定するビルダーを追加します。このビルダーはペ
ージも自動的に作成します。
設定名
名前
form1
ページのタイトル
スギ花粉情報
セッション・キー名
sessionKey1
フォーム・
フォーム名
queryFilterForm
サブミット
サブミットの動作
自動
ページ・プ
基本 HTML ページ
/solutions/dashboard/queryFilterForm.htm
ロパティー
レイアウト・メカニズム
データ・ページ・テンプレートを使用
データ・ページ・テンプレー
/solutions/dashboard/templates/verticalsear
ト
ch_labelabove.htm
main アクションを生成
チェック
の動作
拡張
図 70 Query Filter Form ビルダー設定画面（一部）
108/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.照会フィルタービルダーの追加
実際に送信されるメッセージを選択するための照会フィルターを定義します。
設定名
名前
filter1
フィルター・フォーム
form1
フィルターのタイプ
ルックアップ・テーブル
使用されるルックアップ・テーブル
lookup1
デフォルト値
（空白のまま）
UI コントロール・タイプ
ドロップダウン・リスト（選択）
図 71 照会フィルター設定画面
109/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Text ビルダーの追加
Query Filter Form を作成すると、ページ<Query Filter Form 名>FilterForm に、<Query
Filter Form 名>label タグが生成されます。その部分にドロップダウン・リストのタイトル
を表示する為に、Text ビルダーを追加します。
設定値
label1
名前
ページの場所
ページ
form1FilterForm
タグ
FILTER1label
テキスト
エリアを選択してください。
5.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet1
ポートレットのタイトル
FilterSimpleSender ポートレット
ポートレットの短いタイトル
FilterSimpleSender ポートレット
デフォルトのロケール
ja
ここまでの設定で、フィルタリングされたメッセージを送信する元となるポートレットの
作成が終了しました。続いてメッセージを受信するポートレットの作成に移ります。
110/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<receiver.model>>
2.receiver モデルへのビルダーの追加
ここでは、送信されたメッセージを受信して表示するポートレットを作成します。メッセ
ージはポートレット間連携(Click-to-Action,Property Broker)を用いたものではなく、セッ
ションに保持されたデータを介して行います。
図 72 receiver モデル設定画面
111/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Page ビルダーの追加
受信したメッセージを表示するページを作成します。雛形の HTML は全て削除して、新た
に HTML を書き直します。
設定値
名前
startPage
ページ・コンテンツ(HTML)
<html>
<body>
<h3>スギ花粉情報</h3>
<div><span name="area_message"/></div>
</body>
</html>
2.Action List ビルダーの追加
最初に表示するページを呼び出す為に、Action List ビルダーを追加します。
設定値
main
名前
アクション
アクション・リスト
startPage
図 73 Action List ビルダー設定画面
112/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Method ビルダーの追加（デバッグメッセージ出力用）
メッセージ受信時に、System ログにデバッグメッセージを出力させるために Method ビル
ダーを追加します。メソッド中に Java のコードを埋め込みます。
設定値
名前
debugMethod
メソッド本体
{
System.out.println(“メッセージを受信しました!!”);
}
図 74 Method ビルダー設定画面
113/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Query Filter Observer ビルダーの追加
sender モデルで作成したポートレットから送信されたメッセージを受信する為に、Query
Filter Observer ビルダーを追加します。
設定値
名前
observer1
照会フィルター・モデル
sender
フィルターごと
フィルター
FILTER1_FILTER
のアクション
変更時に呼び出すアクション
debugMethod
図 75 Query Filter Observer ビルダー設定画面
114/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Text ビルダーの追加
受信したメッセージが格納されている変数の書式は以下の通りです。
${Variables/<Query Filter Observer 名 >FilterData/FILTERS/< 照 会 フ ィ ル タ ー 名
>_FILTER/<照会フィルター名>}
メッセージが格納されている変数値を表示する為に、Text ビルダーを追加します。
設定値
text1
名前
ページ
ページ
startPage
の場所
タグ
area_message
テキスト
${Variables/observer1FilterData/FILTERS/FILTER1_FILTER/FILT
ER1}
6.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet2
ポートレットのタイトル
FilterSimpleReceiver ポートレット
ポートレットの短いタイトル
FilterSimpleReceiver ポートレット
デフォルトのロケール
ja
ここまでの設定により、メッセージを受信するポートレットの作成が終了しました。この
ポートレットはメッセージを受信した際、System ログに「メッセージを受信しました！！」
と出力します。また、画面上には送られてきたメッセージが表示されます。
115/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.9.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。このレッスンでは２つのポートレットを作成しましたので、その２つを同じペー
ジ上に配置します。デフォルトでは以下のように表示されます。
図 76 FilterSimpleSender/Receiver ポートレット表示（初期表示）
FilterSimpleSender ポートレットで値を選択すると FilterReveiver ポートレットにメッセ
ージが表示されます。
選択
メッセージ表示
図 77 FilterSimpleSender/Receiver ポートレット表示（メッセージ送信）
116/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
FilterSimpleSender ポ ー ト レ ッ ト で 選 択 す る 値 を 変 更 す る と 、 異 な る メ ッ セ ー ジ が
FilterSimpleReceiver ポートレットに表示されます。
選択
メッセージ表示
図 78 FilterSimpleSender/Receiver ポートレット表示（メッセージ送信２）
このレッスンでは基本的なメッセージ送受信（送信側の選択により、フィルタリングされ
たメッセージを送信して、受信）について説明しました。続いてより複雑な連携にを行う
ポートレットの作成に進みます。
117/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.10
［レッスン 10］Filter とデータ階層
Filter は、同一ページに配置してあるポートレット間のデータ通信を行います。よってモデ
ルを 2 つ作成する必要があります。
z
sender モデル: 指定されたアクションにより値を送信する
z
receiver モデル: sender モデルから値を受け取り、Dashboard に表示する
このレッスンでは、sender モデルから複数のメッセージを送信します。データが階層にな
っていて、複数のレベルのドリルダウン（詳細化）が必要な場合に適しています。しかし、
実際のデータ階層を扱ったサンプルは「［レッスン 7］Database と Hierarchy Drilldown」
の際に行っているので、ここでは階層になっていないサンプルデータを用います（Filter
の使い方を主眼に置いている為）。
「sender モデル内の Query Filter Form ビルダー」が「照会フィルター(Query Filter)ビル
ダー」の値を送信し、「receiver モデル内の Query Filter Observer ビルダー」が受信しま
す。受信後、任意のアクションを実行できます。
sender モデル
receiver モデル
図：データの流れ
4.10.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_FilterAndHierarchy
追加する機能セット:
Dashboard Framework
モデル名: sender（モデルタイプは空にする）
モデル名: receiver（モデルタイプは空にする）
============================================================
118/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<sender.model>>
1.sender モデルへのビルダー追加
メッセージを送信する元となる sender モデルにビルダーを追加します。sender モデルから
はどのようなデータを表示するかというメッセージ（フィルターメッセージ）を送信しま
す。
図 79 sender モデル設定画面
119/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Lookup Table ビルダーの追加（その１）
ドロップダウン・リストの項目を登録する為に、Lookup Table ビルダーを追加します。こ
のレッスンでは３つのメッセージを送信します。はじめに１番目のメッセージのリストを
作成するビルダーを設定します。
設定値
名前
lookup1
データ・ソース
新規 XML データ
新規 XML データ
<Items><Item><Label>北海道</Label><Value>北
海道における</Value></Item>
<Item><Label>東京都</Label><Value>東京都にお
ける</Value></Item>
<Item><Label>広島県</Label><Value>広島県にお
ける</Value></Item>
<Item><Label>鹿児島県</Label><Value>鹿児島県
における</Value></Item></Items>
変数タイプ
値タグおよびラベル・タグ
値タグ
Value
ラベル・タグ
Label
追加デー
データの入手元
Builder 入力
タ定義
ブランクの選択項目を追加
非チェック
図 80 Lookup Table ビルダー設定（その１）
120/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Lookup Table ビルダーの追加（その２）
同様に２番目のメッセージのリストを作成するビルダーを設定します。
設定値
名前
lookup2
データ・ソース
新規 XML データ
新規 XML データ
<Items>
<Item><Label>今日の天気</Label><Value>今日の
天気は</Value></Item>
<Item><Label>明日の天気</Label><Value>明日の
天気は</Value></Item>
<Item><Label>明後日の天気</Label><Value>明後
日の天気は</Value></Item>
</Items>
変数タイプ
値タグおよびラベル・タグ
値タグ
Value
ラベル・タグ
Label
追加デー
データの入手元
Builder 入力
タ定義
ブランクの選択項目を追加
非チェック
図 81 Lookup Table ビルダー設定（その２）
121/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
3.Lookup Table ビルダーの追加（その３）
同様に３番目のメッセージのリストを作成するビルダーを設定します。
名前
lookup3
データ・ソース
新規 XML データ
新規 XML データ
<Items>
<Item><Label> 晴 れ </Label><Value> 晴 れ で す 。
</Value></Item>
<Item><Label> 曇 り </Label><Value> 曇 り で す 。
</Value></Item>
<Item><Label> 雨 </Label><Value> 雨 で す 。
</Value></Item>
<Item><Label> 雪 </Label><Value> 雪 で す 。
</Value></Item>
</Items>
変数タイプ
値タグおよびラベル・タグ
値タグ
Value
ラベル・タグ
Label
追加デー
データの入手元
Builder 入力
タ定義
ブランクの選択項目を追加
非チェック
図 82 Lookup Table ビルダー設定（その３）
122/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Query Filter Form ビルダーの追加
フィルタリングされたメッセージを送信するフォームおよびページを作成するビルダーを
追加します。
設定値
名前
form1
ページのタイトル
メッセージ選択画面
セッション・キー名
sessionKey1
フォーム・サブ
フォーム名
queryFilterForm
ミットの動作
サブミットの動作
自動
ページ・プロパ
基本 HTML ページ
/solutions/dashboard/queryFilterForm.htm
ティー
レイアウト・メカニズム
データ・ページ・テンプレートを使用
データ・ページ・テンプ
/solutions/dashboard/templates/verticalsear
レート
ch_labelabove.htm
main アクションを作成
チェック
拡張
図 83 Query Filter Form ビルダー設定画面（一部）
123/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.照会フィルタービルダーの追加
送信するメッセージを選択してフィルタリングするビルダーを追加します。メッセージは
３つ（３レベル）あるので３通りの設定をします。
設定値
名前
filter1
フィルター・フォーム
form1
フィルターのタイプ
データ階層
階層レベ
レベル
page1
ル1
リスト・オプションのデータ
Variables/lookup1XmlData/Items
値タグ
Value
ラベル・タグ
Label
すべてのオプションのラベル
選択してください
階層レベ
レベル
page2
ル2
リスト・オプションのデータ
Variables/lookup2XmlData/Items
値タグ
Value
ラベル・タグ
Label
すべてのオプションのラベル
選択してください
階層レベ
レベル
page3
ル3
リスト・オプションのデータ
Variables/lookup3XmlData/Items
値タグ
Value
ラベル・タグ
Label
すべてのオプションのラベル
選択してください
次のページ以降に、実際の設定画面の一部について記載します。どのような形で設定する
のか参照してください。
124/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
page1 の設定画面は以下のようになります。赤枠内に特に注意して入力してください。
図 84 照会フィルタービルダー設定画面（page1)
続いて page2 の設定画面です。
図 85 照会フィルタービルダー設定画面（page2)
125/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
最後に page3 の設定画面です。
図 86 照会フィルタービルダー設定画面（page3)
126/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
6.Text ビルダーの追加（その１）
Query Filter Form を作成すると、ページ<Query Filter Form 名>FilterForm に、<Query
Filter Form 名>label タグが生成されます。その部分にドロップダウン・リストのタイトル
を表示する為に、Text ビルダーを追加します。
設定値
label1
名前
ページの場所
ページ
form1FilterForm
タグ
PAGE1label
テキスト
地域
7.Text ビルダーの追加（その２）
設定値
label2
名前
ページの場所
ページ
form1FilterForm
タグ
PAGE2label
テキスト
タイプ
8.Text ビルダーの追加（その３）
設定値
label3
名前
ページの場所
ページ
form1FilterForm
タグ
PAGE3label
テキスト
結果
9.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet1
ポートレットのタイトル
FilterAndHierarchy Sender ポートレット
ポートレットの短いタイトル
FilterAndHierarchy Sender ポートレット
デフォルト・ロケール
ja
以上でメッセージを送信するポートレットの作成は終了しました。
127/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<receiver.model>>
2.receiver モデルへのビルダー追加
送信されたメッセージを受信するために reveiver モデルにビルダーを追加します。
図 87 receiver モデル
128/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Page ビルダーの追加
受信したページを表示するために Page ビルダーを追加します。雛形の HTML は全て削除
して、新たに HTML を書き直します。
設定値
startPage
名前
ページ・コンテンツ（HTML） <html>
<body>
受信したメッセージ
<div><h3><span name="area1" /><span name="area2"
/><span name="area3" /></h3></div>
</body>
</html>
2.Action List ビルダーの追加
最初に表示するページを呼び出す為に、Action List ビルダーを追加します。
設定値
main
名前
アクション
アクション・リスト
startPage
3.Query Filter Obverver ビルダーの追加
メッセージを受信する為に、Query Filter Observer ビルダーを追加します。
設定値
名前
obverver1
照会フィルター・モデル
sender
フィルターごと
フィルター
FILTER1
のアクション
変更時に呼び出すアクション
（空白のまま）
129/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Text ビルダーの追加（その１）
受信したメッセージが格納されている変数の書式は以下の通りです。
${Variables/<Query Filter Observer 名>FilterData/FILTERS/<照会フィルター名>/<レベ
ル名>}
1 つ目のメッセージをページ上に表示する為にビルダーを追加します。
設定値
text1
名前
ページの
ページ
startPage
場所
タグ
area1
${Variables/observer1FilterData/FILTERS/FILTER1/PAGE1}
テキスト
5.Text ビルダーの追加（その２）
2 つ目のメッセージをページ上に表示する為にビルダーを追加します。
設定値
text2
名前
ページの
ページ
startPage
場所
タグ
area2
${Variables/observer1FilterData/FILTERS/FILTER1/PAGE2}
テキスト
6.Text ビルダーの追加（その３）
3 つ目のメッセージをページ上に表示する為にビルダーを追加します。
設定値
text3
名前
ページの
ページ
startPage
場所
タグ
area3
テキスト
${Variables/observer1FilterData/FILTERS/FILTER1/PAGE3}
7.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet2
ポートレットのタイトル
FilterAndHierarchy Receiver ポートレット
ポートレットの短いタイトル
FilterAndHierarchy Receiver ポートレット
デフォルト・ロケール
ja
130/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.10.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。このレッスンでは２つのポートレットを作成しましたので、その２つを同じペー
ジ上に配置します。デフォルトでは以下のように表示されます。
図 88 FilterAndHierarchySender/Receiver ポートレット表示
フィルターを順に選択していくと、以下のようにメッセージが変化していきます。
図 89 地域選択後の表示
131/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
タイプを選択します。
図 90 タイプ選択後画面
結果を選択します。
図 91 結果選択後画面
このように段階的にフィルターを選択するとそれに応じてメッセージが表示されます。以
上でこのレッスンは終了です。
132/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.11
［レッスン 11］Filter と Excel 連携
Excel のデータを表示します。ただし、全てのレコードを表示する訳ではなく、Filter によ
って指定されたカテゴリのレコードのみ表示します。このレッスンではモデルを 3 つ作成
する必要があります。
z
provider モデル: Excel からデータを読み取る
z
sender モデル: カテゴリを選択し、値を送信する
z
receiver モデル: sender モデルから値を受け取り、検索を実行。対象の行だけ抽出して
Dashboard に表示する
Excel ファイルからデータを全て読み取り、対象の行だけ抽出する検索機能は(Method ビル
ダーを使って)Java プログラミングで実装します。
Excel ファイル
provider モデル
sender モデル
receiver モデル
図：データの流れ
4.11.1 設定内容
============================================================
Portlet Factory プロジェクト名: DF_FilterAndCollaborationExcel
追加する機能セット:
Dashboard Framework
Excel 拡張機能
モデル名: provider（モデルタイプは空にする）
モデル名: sender（モデルタイプは空にする）
モデル名: receiver（モデルタイプは空にする）
============================================================
<<<外部データの用意>>>
プロジェクト内の /WebContent 直下に Excel ファイル（商品売上げ.xls）をコピーしてお
きます。
133/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<<provider.model>>>
1.provider モデルへのビルダー追加
Excel シートからデータを取り込むための provider モデルを作成します。このモデルでは
通常デフォルトで提供されるデータ取得機能に加えて、独自のデータ取得機能を Java コー
ドにて実装します。
図 92 provider モデル設定画面
134/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Service Definition ビルダーの追加
設定値
サービス名
provider1
サービスを公開
チェック
2.Excel インポート 拡張ビルダーの追加
Excel シートを読み込むためのビルダーを追加します。このビルダーでは読み込みとともに
すべてのデータを取得するメソッドも自動的に設定されます。
設定値
名前
getAllRecordsSource
インポートするファイル
/商品売上げ.xls
スキーマを生成
Designer 再生成時
コンテンツ選択方法
自動
シート
売上げ
ヘッダー行あり
チェック
空の行を保持
非チェック
セルのフォーマット設定を保持
チェック
3.Service Operation ビルダーの追加
すべてのデータを取得するメソッドを公開するためにビルダーを追加します。
設定値
サービス
データ・サービス
provider1
操作プロ
操作名
getAllRecords
パティー
呼び出すアクション
DataServices/getAllRecordsSource/execute
操作入力
入力構造処理
入力なし
操作結果
結果構造処理
呼び出されたアクションからの構造を使用
結果フィールド・マッピング
自動
135/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Method ビルダーの追加
Excel ファイルからデータを全て読み取り、対象の行だけ抽出する検索機能を実装する為、
Method ビルダーを追加します。なおこのロジックは汎用的に作成してあるので、他の
Factory サンプルにも適用できます。
・引数の役割
(1)searchKey: 検索したい列の名前
(2)searchValue: 検索文字列
(3)serviceOperationName: Excel の全データを取得する Service Operation 操作名
設定値
名前
getSearchRecordsMethod
引数
名前：searchKey
データ型：String
名前：searchValue
データ型：String
名前：serviceOperationName
データ型：String
戻りの型
IXml
メソッド
{
本体
//Excel ファイルからデータを全て読み取る
IXml allRecords = webAppAccess.getVariables().getXml(serviceOperationName
+ "Results");
if(allRecords == null){
//<Service Operation 操作名>Execute を実行する。
//値は <Service Operation 操作名>Results に格納される。
webAppAccess.callMethod(serviceOperationName + "Execute");
allRecords = webAppAccess.getVariables().getXml(serviceOperationName
+ "Results");}
//指定した列の文字列が検索文字列と一致した行だけ出力対象とする
IXml outputRecords = XmlUtil.create("ExcelContent");
IXml row = allRecords.getFirstChildElement();
while(row != null) {
String w_value = row.getText(searchKey);
if(searchValue.equals(w_value)){
outputRecords.addChildElement(row.cloneElement());
}
row = row.getNextSiblingElement();
}
return outputRecords;
}
136/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Service Operation ビルダーの追加
前節で実装した機能を公開するために Service Operation ビルダーを追加します。
設定値
サービス
データ・サービス
provider1
操作プロ
操作名
getSearchRecords
パティー
呼び出すアクション
getSearchRecordsMethod
操作入力
入力構造処理
呼び出されたアクションからの構造を使用
入力フィールド・マッピング
自動
結果構造処理
結果スキーマを指定
結果スキーマ
getAllRecordsSource_Schema/ExcelContent
結果フィールド・マッピング
自動
操作出力
これで provider モデルの設定は終了しました。ここまでの設定で Excel シートからデータ
を取り込み、全レコードを返す操作および指定されたレコードを返す操作が追加され、別
のモデルから利用することが可能になりました。
137/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<sender.model>>
2.sender モデルへのビルダー追加
予め作成しておいた sender モデルに、フィルタリングされたメッセージを送信するための
機能を追加します。このモデルは実際に provider モデルからデータを取得はせず、メッセ
ージを送信するのみです。
図 93 sender モデル設定画面
138/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Lookup Table ビルダーの追加
ドロップダウン・リストの項目を登録する為に、Lookup Table ビルダーを追加します。
設定値
名前
lookup1
データ・ソース
新規 XML データ
新規 XML データ
<Items>
<Item><Label> 暖 房器具 </Label><Value> 暖 房
器具</Value></Item>
<Item><Label> 掃 除 機 ・ ク リ ー ナ ー
</Label><Value> 掃 除 機 ・ ク リ ー ナ ー
</Value></Item>
<Item><Label> 調 理家電 </Label><Value> 調 理
家電</Value></Item>
<Item><Label> 洗 濯機 </Label><Value> 洗濯機
</Value></Item>
</Items>
変数タイプ
値タグおよびラベル・タグ
値タグ
Value
ラベル・タグ
Label
追加のデータ
データの入手元
定義
ブランクの選択項目を追加
非チェック
図 94 Lookup Table ビルダー設定画面
139/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
2.Query Filter Form ビルダーの追加
フィルタリングされたメッセージを送信するフォームおよびページを作成するビルダーを
追加します。
設定値
名前
form1
ページのタイトル
メッセージ選択画面
セッション・キー名
sessionKey1
フォーム・サブ
フォーム名
queryFilterForm
ミットの動作
サブミットの動作
自動
ページ・プロパ
基本 HTML ページ
/solutions/dashboard/queryFilterForm.htm
ティー
レイアウト・メカニズム
データ・ページ・テンプレートを使用
データ・ページ・テンプ
/solutions/dashboard/templates/verticalsear
レート
ch_labelabove.htm
main アクションを作成
チェック
拡張
3.照会フィルタービルダーの追加
送信するメッセージを選択してフィルタリングするビルダーを追加します。
設定値
名前
filter1
フィルター・フォーム
form1
フィルターのタイプ
ルックアップ・テーブル
使用されるルックアップ・テーブル
lookup1
デフォルト値
暖房器具
UI コントロール・タイプ
ドロップダウン・リスト（選択）
140/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Text ビルダーの追加
Query Filter Form を作成すると、ページ<Query Filter Form 名>FilterForm に、<Query
Filter Form 名>label タグが生成されます。その部分にドロップダウン・リストのタイトル
を表示する為に、Text ビルダーを追加します。
設定値
label1
名前
ページの場所
ページ
form1FilterForm
タグ
FILTER1label
テキスト
メインカテゴリ
5.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet1
ポートレットのタイトル
Filter と CollaborationExcelSender ポートレット
ポートレットの短いタイトル
Filter と CollaborationExcelSender ポートレット
デフォルト・ロケール
ja
これでフィルタリングされたメッセージを送信する sender モデル（ポートレット）の作成
は終了しました。続いてメッセージを受信して、その値の基づきデータを検索して表示す
る receiver モデルの設定に進みます。
141/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
<<receiver.model>>
3.receiver モデルへのビルダーの追加
このモデルで作成されるポートレットの役割としては、
1)sender モデルで作成されたポートレットからメッセージを受け取る
2)受け取ったメッセージを元に provider モデルからデータを取得する
の２つがあります。
図 95 receiver モデル設定画面
142/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
1.Service Consumer ビルダーの追加
provider モデルの操作を利用するために Service Consumer ビルダーを追加します。この
ビルダーは後のセクションで追加設定を行います。
設定値
名前
consumer1
プロバイダー・モデル
provider
すべてのプロバイダー操作を追加
チェック
2.Summary and Drilldown ビルダーの追加
テーブルを表示するために Summary and Drilldown ビルダーを追加します。
設定値
名前
summary1
初期化アクション
DataServices/consumer1/getSearchRecords
要約データ
DataServices/consumer1/getSearchRecords/results
要約ページのタイトル
（空白のまま）
作成する
要約チャート／テー
テーブルのみ
要約ペー
ブル・ぺ時
ジ
main アクションを
はい
作成
3.Query Filter Observer ビルダーの追加
設定値
名前
observer1
照会フィルター・モデル
sender
フィルターごと
フィルター
FILTER1_FILTER
のアクション
変更時に呼び出すアクション
summary1CallInitializationAction
143/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.Service Consumer ビルダー（consumer1）の拡張
受信したメッセージが格納されている変数の書式は以下の通りです。
${Variables/<Query Filter Observer 名 >FilterData/FILTERS/< 照 会 フ ィ ル タ ー 名
>_FILTER/<照会フィルター名>}
もう一度 Service Consumer ビルダー(consumer1)を開きます。「オーバーライドされる入
力」に、受信したメッセージを割り当てます。
・操作 getSearchRecords に渡す引数
(1)searchKey: 検索したい列の名前
(2)searchValue: 検索文字列
(3)serviceOperationName: Excel の全データを取得する Service Operation 操作名
追加設定値
入力をオーバーライド
チェック
オーバーラ
入力名：arguments
操作:getSearchRecords
イドされる
入力値：（空白のまま）
入力
入力名：arguments.searchKey
入力値：メインカテゴリ
入力名：arguments.searchValue
入力値：${Variables/observer1FilterData/FIL
TERS/FILTER1_FILTER/FILTER1}
入力名：arguments.serviceOperationName
入力値：getAllRecords
入力名：（空白のまま）
操作：getAllRecords
入力値：（空白のまま
実際の設定画面は以下のようになります。
144/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
まず getSearchRecords の設定部分です。
図 96 consumer1 拡張設定その１
続いて getAllRecords の設定部分です。
図 97 consumer2 拡張設定その２
145/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
5.Portlet Adapter ビルダーの追加
WAR ファイルを作成するために、Portlet Adapter ビルダーを追加します。
設定値
名前
samplePortlet2
ポートレットのタイトル
Filter と CollaborationExcelReceiver ポートレット
ポートレットの短いタイトル
Filter と CollaborationExcelReceiver ポートレット
デフォルト・ロケール
ja
ここまでの設定で、フィルタリングされたメッセージを基に Excel シートからデータを取
り出し、表示する２つのポートレットが作成されました。
146/147
IBM WebSphere Dashboard Framework V6.0. 開発自習ガイド
4.11.2 実行結果
作成したポートレットを WebSphere Portal のページ上に配置すると次のような表示がさ
れます。このレッスンでは２つのポートレットを作成しましたので、その２つを同じペー
ジ上に配置します。デフォルトでは以下のように表示されます。
図 98 Filter と CollaborationExcelSender/Receiver ポートレット（初期画面）
図 99 Filter と CollaborationExcelSender/Receiver ポートレット（カテゴリ選択後）
147/147