IBM ILOG JViews Diagrammer 8.8 開発ガイド 日本アイ・ビー・エム（株） 日本アイ・ビー・エム
by user
Comments
Transcript
IBM ILOG JViews Diagrammer 8.8 開発ガイド 日本アイ・ビー・エム（株） 日本アイ・ビー・エム
2013年1月15日
IBM ILOG JViews Diagrammer 8.8
開発ガイド
日本アイ・ビー・エム（株）
日本アイ・ビー・エム システムズ・エンジニアリング（株）
© 2013 IBM Corporation / © 2013 ISE Corporation
Disclaimer
この資料は日本アイ・ビー・エム株式会社ならびに日本アイ・ビー・エム システムズ・エンジニアリ
ング株式会社の正式なレビューを受けておりません。
当資料は、資料内で説明されている製品の仕様を保証するものではありません。
資料の内容には正確を期するよう注意しておりますが、この資料の内容は2012年12月現在の情
報であり、製品の新しいリリース、修正などによって動作、仕様が変わる可能性があるのでご注意
下さい。
今後、国内で提供されるリリース情報は、対応する発表レターなどでご確認ください。
© 2013 IBM Corporation / © 2013 ISE Corporation
当資料について
目次
1章 ： ILOG JViews Diagrammer アプリ開発概要
2章 ： ツールを使用したパーツの開発
3章 ： Designerを使用したダイアグラムの開発
4章 ： Dashboard EditorとSDKを使用したダッシュボードの開発
5章 ： SDKを使用したダイアグラムの開発
目的
– 本資料は、ILOG JViews Diagrammer を利用したアプリケーション開発に関するガイドです。この資料では
、製品の概要、アーキテクチャーと開発方法を基本から説明しています。この資料を読んでいただくことによ
り、プロジェクトでILOG JViews Diagrammer を利用したダイアグラム・アプリケーションの開発が可能となり
ます。
対象
– システムのアーキテクチャーを検討するエンジニア
– システムの画面を設計／構築するエンジニア
前提
– Webシステム及びJavaアプリケーションに関する基本的なスキル
© 2013 IBM Corporation / © 2013 ISE Corporation
注意事項
SDKのクラス名に関して
– ILOG JViews Diagrammerでは、以下の様なクラス名が使用されています。
本資料では、フォントの関係で分かり難くなっていますが、各文字は以下の様になります。
• 1文字目が「アイ」（大文字）、2文字目が「エル」（小文字）
• 他のクラスもIlvで始まる物は同様の規則です。
IlvProductUtil クラス
アイ（大文字）
エル（小文字）
© 2013 IBM Corporation / © 2013 ISE Corporation
1章 ILOG JViews Diagrammer アプリ開発概要
© 2013 IBM Corporation / © 2013 ISE Corporation
IBM ILOG 可視化（GUIコンポーネント）製品群
【ソリューション】
z
Java、およびAdobe Flex用のリッチなGUI構築を実現
z
ダイアグラムや各種チャートの構築を実現
z
開発時間と開発コストの大幅な削減を実現
z
コーディング不要なデザインツール搭載。ユーザ固有の表示パーツを開発するシンボルエディタ装備
IBM ILOG Visualization – 製品構成
IBM ILOG 可視化製品 画面イメージ
ILOG 可視化 製品ラインナップ
Java版
JViews Enterprise
JViews Diagrammer
JViews Gantt
JViews Maps
JViews Charts
JViews Maps for Defense
（防衛専用製品）
＊JViews TGO (テレコム専用製品）
＊JViews Graph Layout for Eclipse
Flex版
Elixir Enterprise
C++版
Views
注： C++版のViewsは、
2012年5月にRogue
Wave Software社に譲
渡される事が発表され
ました。
＊ ・・・ 日本語版未発表
IBM ILOG JViews製品の全体概要については、別資料「IBM ILOG JViews Gantt 8.8 開発ガイド」を参照してください。
© 2013 IBM Corporation / © 2013 ISE Corporation
IBM ILOG JViews 製品群の構成
さまざまなグラフィクス開発のためのコンポーネント群
Diagrammer
Gantt
Maps
Charts
Dojo
Diagrammer
JTGO
Maps for Defense
Enterprise
注 ： Dojo Diagrammerは、単体製品として提供されていません。
© 2013 IBM Corporation / © 2013 ISE Corporation
ILOG JViewsアプリ開発／実行に必要な製品
開発時に必要となる製品
– ILOG JViews Enterprise V8.8
• Windows、Linux、Mac OSなどに対応
• Diagrammer、Gantt、Maps、Chartsをパッケージした製品
• 開発者人数分開発用ライセンスが必要
– Java開発ツール
• JDKやEclipse、RAD（Rational Application Developer）など好きな製品を使用可能
実行時に必要となる製品
– ILOG JViews Enterprise内にある実行ライブラリー
– Enterpriseまたは、Diagrammer、Gantt、Maps、Chartsの中の必要なコンポーネン
トの実行時ライセンスが必要。ライセンスは、ユーザー数もしくはCPU能力単位
– Ajax/JSFタイプのアプリケーションを稼働させる場合は、Webアプリサーバーが必要
© 2013 IBM Corporation / © 2013 ISE Corporation
IBM ILOG JViews Diagrammer
操作可能なダイアグラムなどを作成
ダイアグラム
– ノードとリンクを表現可能
– 自動レイアウト・アルゴリズムを搭載
– 専用Designer
ダッシュボード
– Symbol Editor
• カスタム・シンボルを作成
– Dashboard Editor
• カスタム・シンボルなどを配置して画面部品を
作成
© 2013 IBM Corporation / © 2013 ISE Corporation
ダイアグラム＆ダッシュボードの例
飛行機トラフィック表示
ビジネス・プロセス・モデラー
Webのページ間の関係を表したダイアグラム
トンネルの状況表示
© 2013 IBM Corporation / © 2013 ISE Corporation
ILOG JViews 開発フロー概要
実行タイプ
デザインツール
専用のGUIツールを使用
して、各パーツのデザイ
ンを行う
ケースによっては、デザ
インツールだけでほぼ作
成する事も可能
スタート
Javaアプリケーション
クライアント上で直接実行す
るJavaアプリケーション
Javaアプレット
各パーツの高度なカスタマイ
ズ、パーツを使用して画面全
体を作成する作業を実施
ブラウザー内のJVMで実行す
るJavaアプレット
SDK
SDKのみで、開発
する事も可能
Java開発ツールでSDK
を使用してコーディングを
行う
Ajax/JSF
ブラウザーのJavaScriptで実
行するWebアプリケーション
EclipseやRAD等を使用して開発
© 2013 IBM Corporation / © 2013 ISE Corporation
デザインツール
Designer
– 各製品のコンポーネントを使用して画面を作成
するためのツール
– Designerは、各製品で機能が違う
その他ツール
– 各製品で使用する小さなパーツ等を作成する
ためのツール
Diagrammer
Designer
Dashboard
Editor
Symbol
Editor
Symbol
Compiler
Diagrammer Designer
Gantt
Designer
Charts
Maps
Designer
Map
Builder
Designer
Symbol
Editor
© 2013 IBM Corporation / © 2013 ISE Corporation
JViews Diagrammer に関連する開発ツール
.jarファイルを生成
Symbol Editor （２章で説明）
– ダイアグラムやダッシュボード内で使用する記号（小さな表示パーツ）を作成
– 条件により表示を変える設定が可能
.jarファイルを生成
Symbol Compiler （３章で説明）
– Symbol Editorで作成されたCSSベースの記号をJavaコードに変換するツール
Designer ( JViews Diagrammer) （３章で説明） .idprファイル、.cssファイル、.xmlファイルを生成
– ダイアグラム・アプリケーションをGUIで作成するツール
– ウィザードにより簡単にダイアグラム・アプリケーションを作成可能
Dashboard Editor （４章で説明）
.idbdファイル、あるいは.idbinファイルを生成
– ダッシュボード・アプリケーションをGUIで作成するツール
Map Builder ( JViews Maps ) （２章で説明）
.ivlファイルを生成
– ダイアグラム・アプリケーションの地図背景となる地図を作成するツール
– 緯度、経度情報によるマッピングが可能で、市販の地図データを利用可能
© 2013 IBM Corporation / © 2013 ISE Corporation
ダイアグラム・アプリケーションの作成
ダイアグラム・アプリケーションの例
２．Designer (JViews Diagrammer)を使用して作成
１．Symbol Editorを使用して作成
３．全体とボタン／メニューは、 Diagrammer
のAPIとJavaのAPIを使用してコーディング
© 2013 IBM Corporation / © 2013 ISE Corporation
ダイアグラム・アプリケーション開発フロー例
実行タイプ
デザインツール
Javaアプリケーション
１．Symbol Editor
スタート
２．Designer
Javaアプレット
SDK
３．開発ツール
Ajax/JSF
© 2013 IBM Corporation / © 2013 ISE Corporation
各ツールで生成するモジュール
cssファイル
全体、各パーツのスタイル情報を格納
idprファイル
プロジェクト情報を格納
jarファイル
Symbol Editor
xmlファイル
jarファイル
もしくは
earファイル
表示するデータ内容と表示情報を格納
Designer
開発ツール
（Eclipseなど）
Diagrammer
SDK
Java API
ダイアグラムの中で使用する
シンボルを作成
メインのダイアグラム表示
部分を作成
画面全体とダイアグラム部分
以外の部分を作成。
動的なデータ構造にする場合
は、データモデルも作成
© 2013 IBM Corporation / © 2013 ISE Corporation
ILOG JViews 実行時アーキテクチャー
Javaアプリケーション
Javaアプリケーションとして事前に
配布してから実行。
データは、ロー
カル、サーバー
どちらでもアク
セス可能
Javaアプリケーション
JViews ライブラリー
データ
JVM
データ
Javaアプレット
Webサーバーからアプリケーション
をダウンロードして実行。
ブラウザーの制約を受ける。
事前にローカルにJREの導入が必要。
Javaアプリケーション
Javaアプリケーション
JViews ライブラリー
ダウンロード
JViews ライブラリー
JVM
ブラウザー
Ajax/JSF
データ
データ
JSアプリケーション
実行時にダウンロードして実行。
画像生成は毎回サーバー側で実施
されるので、サーバーに負荷がかかる。
JViews
Ajax ライブラリー
JSアプリケーション
画面操作や表示
する画像の要求
はAjaxライブラ
リーが行う
ダウンロード
Javaアプリケーション
JViews
Ajax ライブラリー
ブラウザー
画像
JViews ライブラリー
（JSF）
Java EEサーバー
（JVM）
表示するための
画像をライブラ
リーがサーバーで
生成して送信する
データ
© 2013 IBM Corporation / © 2013 ISE Corporation
注意事項 ： ライセンスの宣言
ILOG JViews DiagrammerのJava APIを呼び出す前に、必ず以下の宣言を行う必要がある
– アプリケーションの先頭で一度宣言すれば、再度記述する必要はない
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Diagrammer_Deployment);
上記宣言を行わないと、実行時に以下のようなエラーダイアログが表示される
– Webアプリケーション（JSF/Ajax）では、直接Java APIで呼び出す代わりに「web.xml」を編集
する
© 2013 IBM Corporation / © 2013 ISE Corporation
試用版のダウンロードとILOG JViewsの導入
ILOG JViews 試用版
– 以下のサイトからダウンロード可能
• https://www.software.ibm.com/webapp/iwm/web/preLogin.do?source=swgiijve86t&S_TACT=109HE90W&S_PKG=dl&submit=Continue7S_CMP%3Dweb_ibm_ws_ilgvisu_hero_visualization-ov
• 英語サイトで名前などの登録が必要 （ソフトは日本語も入っています）
• 評価版は90日使用可能で、評価作業に関しては機能制限はなし
ILOG JViewsの導入
– 前提
• サポート対象のJava実行環境が導入されている事
> サポート環境
http://www.ibm.com/software/integration/visualization/jviews/enterprise/reqs/
– 導入
• １．ダウンロードしたモジュールのexeファイルを実行
• ２．導入ディレクトリやヘルプ情報の導入の有無などを選択して導入実行
> 全てデフォルト値での導入で問題ない
© 2013 IBM Corporation / © 2013 ISE Corporation
2章 ツールを使用したパーツの開発
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 概要
JViews Diagrammer で利用可能な「記号」（Symbol）を作成
– 各記号にパラメーターと条件を設定し、データの変化に応じて見た目を変化させることが可能
• 例：境界値によって色の変わるプログレスバー
– 複数の記号の組み合わせて新たな記号を作成することも可能
記号は他のJViews製品にインポートしたり、JViews Java APIにより直接操作できる
– JViews DiagrammerのDesignerとDashboard Editorでの利用は各項目で説明
記号のベース画像としてサポートされるグラフィック形式には、以下のようなものがある
– .png, .jpg, .gif, .sgv, .svgz, .ivl（IBM ILOG JViews グラフィック）
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 編集モード
記号の見た目や振る舞いの編集
作成した記号をパレットに保存し、各アプリケーションや別の記号の要素として利用できる
記号アウトライン
描画ペイン
記号を構成する各要素と、記号
の見た目や振る舞いに関連付
けられる各パラメーターを表示
編集中の記号を表示。各要素
の幅や位置を直接編集可能
編集モード、プレビュー
モードを切替
記号パレット
スタイリング・カスタマイザー
見た目やパラメーターの調整
を行う
作成済みの記号を階層
構造で管理。新規に作成
する記号の一部として利
用可能
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - オブジェクトの追加
各種図形や画像が追加可能
グリッドにより描画サイズ変更が補助される
– メニューの「表示」 > 「グリッド」のチェックを外すことで、補助を無効化可能
多角形の場合
1. 矩形の追加
2. 描画パレット上でドラッグ
多角形や折れ線など複数の交点を持つ
図形は、最後の交点でダブルクリックする
多角形の追加
図形作成後に
各交点を移動可能
描画色の選択
前景色の選択
– 「前景色の選択」で描線の色を設定
（クリックすると色の選択ダイアログを表示）
– 「背景色の選択」で塗り潰しの色を設定
背景色の選択
– 描画色は図形作成後に個別に変更することも可能 （前景色の選択ボタンとは独立している）
描画した図形の色に反映される
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - オブジェクトのカスタマイズ
オブジェクトを選択すると、スタイリング・カスタマイザーにスタイル設定の一覧が表示される
– オブジェクトは記号アウトラインから、または選択モードで描画ペインから選択可能
選択モードの切り替えボタン
基本オブジェクト
アイコンに下線のあるオブジェクトは、基本
オブジェクトとして最背面に描画される。
記号内の全てのオブジェクトは、このオブ
ジェクトを基準に、相対的に配置されている
表示されるスタイル設定の項目
はオブジェクトごとに異なる
「変換」タブではオブジェクトの位置
やサイズ、回転角度が設定可能
基本オブジェクトは位置や回転角度
を変更できない
入力した値は即座に描画パレットへ
と反映される。最後にエンターキーを
押さないと反映されない点に注意
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - オブジェクトの削除
オブジェクトを選択してDeleteキーを押すか、オブジェクトの右クリックメニューから「削除」を選択す
ることで削除が可能
基本オブジェクトを削除すると、別のオブジェクトが基本オブジェクトとなる
– 基本オブジェクト以外のオブジェクトが存在しない場合は削除できない
– 元の基本オブジェクトを削除するには、新たなオブジェクトを先に作っておく必要がある
基本オブジェクトを削除しようとすると
基本オブジェクト変更の確認ダイアログが出現する
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - パレット
1つ以上の記号を任意のカテゴリーごとにまとめたもの
– 作成した記号は、パレットに対して保存する
実体は.jarファイルで、主に以下の内容を含む
– パレットを構成する各カテゴリーと記号をまとめたXMLファイル
– 各記号の見た目や振る舞いを表すCSSファイル
開いているパレットの一覧は「記号パレット」ペインに表示される
数字は左側が記号数、
右側がカテゴリー数
アイコンの右下に鍵マークが付いて
いるのはデフォルトの記号パレットで、
上書きなど一部機能に制限がある
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - パレットの作成
メニューから「パレット」 > 「新しいパレット」を選択すると以下のようなダイアログが表示されるので
、各項目を入力してOKボタンをクリックする
– 入力した値は、パレットの右クリックメニュー「パレットのプロパティー」で確認／修正が可能
識別用パレット名
パレットのJavaパッケージ名
パレットの概要
「パレット・ファイルを保存」ダイアログが出るので、任意の場所へ.jarファイルを保存する
– 作成されたパレットは、「記号パレット」に表示される
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - カテゴリーの作成
パレット内の記号は、カテゴリーによって分類できる
作成したパレットの右クリックメニューから、「新規カテゴリー」を選択する
– デフォルトの記号パレット（「Shared_Symbold」、「Controls」、「Entities」）では新規記号、新規
カテゴリーは選択不可
「カテゴリーのプロパティー」ダイアログが出るので、各項目欄を入力してOKをクリックする
– 入力した値は、カテゴリーの右クリックメニュー「カテゴリーのプロパティー」で後から修正可能
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 作成した記号を保存する
メニューから「ファイル」 >「 名前を付けて保存」を選択すると、「記号の保存」ダイアログが表示
「記号パレットの選択」から、保存先のパレットを選択
– 「新しいパレット」から新たなパレットを作成することも可能
「この記号を保存するカテゴリーと置き換える記号の選択」から、保存先のカテゴリーを選択
– 「新規カテゴリー」から新たなカテゴリーを作成することも可能
「名前」欄に保存する記号の名前を入力し、「保存」ボタンをクリック
保存した記号は記号パレットに反映される
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 記号やパレットを開く
パレットを開く
– メニューから「パレット」 > 「パレットを開く」を選択し、「パレット・ファイルを開く」ダイアログを開く
– ダイアログからファイルシステムにあるパレットの.jarファイルを選択
記号を開く
– 「記号パレット」ペインで既に記号のパレットが開いている場合
• パレット内の記号をダブルクリックする
– 記号のパレットがまだ開いていない場合
• メニューから「ファイル」 > 「開く」を選択し、「記号パレットの選択」ダイアログを開く
• 「参照」ボタンからファイルシステムにあるパレットの.jarファイルを選択
• 「記号の選択」から記号を選択し、「開く」ボタンをクリック
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - パラメーターの利用
パラメーターはオブジェクトの位置やサイズ、色などに結び付けることの出来る変数
– 例：幅に結び付けると、パラメーターが増えるにつれ、オブジェクトの幅が広がる
パラメーターは以下のいずれかの種類になる
– ストリング（文字列）、整数、ブール型（真偽値）、浮動小数点、倍精度、色、ペイント（色）
パラメーターの新規作成
– 「記号アウトライン」ペインで「パラメーター」の右クリックメニューから「新規パラメーター」を選択
– スタイリング・カスタマイザーでパラメーターの名前、タイプ、デフォルト値などを入力する
入力後、Enterキーを押すと
記号アウトラインへ反映される
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - パラメーターをオブジェクトの状態に関連付ける
手順
– パラメーターを設定するオブジェクトを選択
– スタイリング・カスタマイザーの「変換」タブで「幅」の「バインド」ボタンをクリック
– 開いたダイアログで「パラメーター」に結び付けるパラメーターを指定
– 「次の最小／最大値に従って変換を計算」にチェックを入れる
– 最大値に120を入力し、「OK」をクリック
最小パラメーター/最大パラメーター
はパラメーターの変動する範囲
固定値の他、別のパラメー
ターを指定することも可能
最小値/最大値はパラメーター
の値に応じた実際の図形の幅
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 実際の記号の動作を確認する
プレビュー・モードでは各パラメーターの値に応じて記号がどのように表示されるのか確認できる
– 画面左端の矢印アイコンをクリックすると、プレビュー・モードに切り替わる
画面下端にパラメーター名と値の一覧が表示される
各値の変更に応じて、描画ペイン上の記号が変化する
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 条件の作成
記号の各要素は特定の条件下におけるスタイリング方法を切り替えることができる
– Symbol Editorでは特定の条件と、それに応じたスタイリング方法を「条件」として定義できる
新しい条件の作成
– 記号アウトラインで、条件を作成する要素の右クリックメニューから「新規条件」を選択する
– 「新規条件」ダイアログで、スタイルを切り替える基準を設定し、「OK」ボタンをクリックする
• 基準としてはパラメーターの値のほか、記号が選択されているかどうかなども利用できる
条件名は自動生成されるが、
チェックを外して自分で入力することも可能
作成された条件
条件は複数指定できる
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - 条件に対するスタイルの指定
作成した条件に対するスタイルの設定
– 作成した条件を選択し、スタイリング・カスタマイザーで「ペイント」 > 「塗りつぶしペイント」欄右
のボタンをクリック
– ペイント・エディターで上の方に表示されている右の円をクリックし、色を設定
プレビュー・モードで変化を確認
– 条件を満たすと要素の色が変化する
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - リンクを記号の任意の位置に接続する（ポートの使用）
記号に「ポート」を作成することで、リンクをその位置に接続できるようになる
– リンクイン・ポート、リンクアウト・ポートの２種類があり、リンク先、リンク元として機能する
• 両方の機能を兼ねることも可能
ポート化する要素の右クリックから、「ポートとして有効にする」 > 「任意のポートタイプ」を選択
– ポート・オブジェクトは記号アウトライン上で矢印付きのアイコンで表示される
– 「ポートとして無効にする」で無効化
：リンクインのみ
：リンクアウトのみ
：両方として機能
Dashboard Editorにおけるポートの利用については４章を参照
© 2013 IBM Corporation / © 2013 ISE Corporation
Symbol Editor - ユーザー操作への反応の設定（インタラクターの設定）
インタラクターとは
– ユーザー操作への反応を可能にする機能で、タイプによって以下のいずれかを行う
• ユーザー操作に応じて、記号のパラメーターを書き換える（マウスの水平ドラッグなど）
• 「ユーザー操作が発生した状態」をオブジェクトの条件として追加する（マウスクリックなど）
インタラクターの例
回転インタラクター：マウスのドラッグに応じてオブジェクトを回転
スタイリング・カスタマイザーの「変換 > 回
転」で、黒い三角形が「rotation」浮動小数
点変数の値に応じた角度になるよう設定
同じくインタラクタータブで、マウス
の回転によって「rotation」浮動小数
点変数の値が変わるように設定
プッシュ・インタラクター：マウスのクリックに応じて条件を作成
スタイリング・カスタマイザーで
「click」ストリング変数にマウスの
クリック状態が格納されるよう設定
記号アウトラインにマウスのクリック状態に応
じた条件が作成されるので、通常時（親）に青、
BUTTON_DOWNのとき赤になるようそれぞ
れ「ペイント > 塗りつぶしペイント」を設定する
© 2013 IBM Corporation / © 2013 ISE Corporation
ILOG JViews DiagrammerにおけるMap Builderの役割
Designerにて「地図ダイアグラム」タイプのダイアグラムを作成する際の背景地図を作成
Map Builderを使用するにはDiagrammerと別にJViews Mapsのライセンスが必要
JViews Mapsで作成する地図ファイル(.ivlファイル)と「longitude/latitude（=緯度／経度）」属性を
持つノードのデータを組み合わせることで、地理情報を連携させたダイアグラムを作成できる
JViews Maps
Map Builder
JViews
地図ファイル（.ivl）
地図データ上にマッピングされたダイアグラム
JViews Diagrammer
Designer
地図ダイアグラム
作成
ノードのデータ属性
- longitude
- latitude
データソース
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builderの使い方の概略
1. 地図元データの取り込み
– 複数の地図データを取り込み、重ね合わせた地図を作成できる
例）縮尺を意識した複数枚の地図画像や境界線や街路、都市などの位置情報データ
2. 地図情報の編集
– 取り込んだ地図元データごとのスタイル設定
• 基本となるスタイル設定
• 各縮尺に合わせたスタイル設定（可視/不可視や線の太さ/色の変更による強調など）
– 座標系の変更
– 付加情報の追加
• ラベル、注釈付き折れ線や図形、Symbol Editorで作成した記号の配置
• それらのデフォルト・スタイル、及び各縮尺に合わせたスタイルの設定
3. 地図ファイルの保存
– ILOG JViews Diagrammer Designerで使用できる「.ivl」形式で保存
– 他の一般的な地図データ形式へのエクスポート
JViews Maps
Map Builder
動的/静的
スタイル編集
地図データ
読み込み
合成/加工
ラベル/図形/
記号追加
地図データ
書き出し
JViews Maps
ファイル(.ivl)
or
汎用地図形式
にエクスポート
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builderで扱える地図データ
下記のような多岐に渡る地図形式ファイルを取り込んで元データとして利用可能（太字はエクスポートにも対応）。
詳細はInfoCenter参照（サポートされている地図データ）
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.maps.doc/Content/Visualization/Documenta
tion/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrbldmaps207.html
ラスター形式
– 地理参照されるラスター・イメージ用 TIFF ファイル・ベースの相互交換形式 (GeoTIFF) (.tif)
– 地理参照用以外のラスター・イメージ (.gif .tif .jpg .png)
– Web Map Server イメージ
ベクトル形式
– Environmental Systems Research Institute (ESRI) シェープファイル (.shp)
– MapInfo 交換形式 (.mif)
– トポロジー的に統合された地理コード化/参照システム (TIGER/Line® ) ファイル (.rt*)
– Drawing Interchange Format ファイル (.dxf)
– Google Earth™ Keyhole Markup Language (KML) および KML Zipped (KMZ) 形式 (.kml .kmz)
– Scalable Vector Graphics (SVG) ファイル
地形標高
– Digital Terrain Elevation Data (DTED® ) 0、1、および 2
– Global Topographic Data (GTOPO30) DEM
データベース
– IBM® DB2® Spatial Extender
– IBM® Informix® Spatial DataBlade™
– Oracle® Spatial
これらの元データは一般向けに販売されており、ユーザーが用意する必要がある。InfoCenterにていくつかの無償ダウンロードサイ
トも紹介されている。
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.maps.doc/Content/Visualization/Docu
mentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrprgmaps837.html
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builderの開始
「IBM ILOG JViews Maps 8.8」より「Map Builder」を開始する（※Diagrammerには含まれていない）
Map Builderを起動すると、デフォルトで一つの世界地図のShapeファイル（World_Countries.shp）が読み込ま
れている
– 海岸線と国境線の情報のみを含む地図
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - 表示領域の操作
地図の一部にフォーカスしたい場合や全体を見たい場合などに利用できる移動／拡大／縮小の手
段は充実している
「地図概要」領域の操作
矩形をドラッグ、サイズ変更すると右の表示領域が追随
ズームを変更
各種ボタンの操作
拡大
縮小
プレスした領域を虫眼鏡風に拡大表示（ドラッグ移動可）
選択したレイヤー（後述）の全体表示
全体表示
マウスホイールで拡大縮小
クリックする位置を中心に矩形で拡大
表示領域をドラッグして移動
表示領域に合わせたスケールが自動掲示される（端から端までが表示の長さ）
直接入力でも縮尺を指定可
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - グリッド表示と投影図法の変更
「グリッド設定」より地図上にグリッドを追加可能
– 緯度/経度グリッド
– MGRSグリッド（軍用）
「座標系」より地図の投影図法を選択可能
– デフォルトは「等緯度経度図法」
緯度/経度グリッドを表示
例）モルワイデ図法に変更
メルカトル図法
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - 地図の回転
「回転」ボタンをクリックし、地図上でドラッグして地図を回転できる（デフォルト：北が上）
地図上でドラッグして回転
「コンパス」を選択すると、右の表示領域における方角を確認できる
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - 地図の読み込み
「ファイル」 > 「地図データの追加」より追加の地図データを取り込む
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - レイヤーの理解
GeoTiffファイルを一つ追加した場合の例
自動的にグループ分けされている
GeoTiffファイルが最前面となり、「グリッド」やShapeファイルは見えなくなっている
JViews 地図ファイル（.ivl）には「レイヤー」が存在
– 新たに追加したものが最前面のレイヤーとなる（下に表示されるものがより前面）
• リソースの種類（ファイル種別やグリッド/オブジェクト）に応じてレイヤーは自動的にグループ分けされる
• 同種のリソースは同じレイヤーグループ内の「最前面」に登録される
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - レイヤーの操作
「地図レイヤー」にて以下を変更可能
– レイヤーの上下関係の変更（ドラッグ&ドロップ or 右クリックメニュー）
– レイヤーの表示/非表示の切り替え（チェックボックス or 右クリックメニュー）
– わかりやすいレイヤー名に変更
– レイヤー自体の削除
• レイヤー・グループの場合、配下の全レイヤーが削除される
「地図レイヤー」の右クリック・メニュー
例）GeoTiffレイヤー・グループを最背面に移動
例）Shapeレイヤー・グループを非表示
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - スタイルの変更
レイヤーを選択すると、該当レイヤーにて変更可能なスタイルのプロパティーと値が下に表示される
レイヤー・グループに属する子レイヤーはグループ全体のスタイルを継承できる
例）Shapeレイヤー「World_Countries.shp」の塗りつぶしを「なし」にし、国境線を白色に変更
下位GeoTiff地図上に国境線が引かれた合成地図ができる
対象のレイヤーを選択すると、
編集可能なスタイル・プロパ
ティーが表示される
レイヤー・グループ全体の属
性として検証しているものは
「▲」、対象のレイヤー特有の
ものは「 」となる
▲
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - 動的スタイル設定
JViews Mapsでは地図が表示されている縮尺に応じたスタイル設定が可能
– ある縮尺以上に拡大された時のみ表示されるレイヤー、縮小された時に消えるレイヤー
– 例）下記のように解像度の異なる複数のGeoTiffファイルをロードしているが、広域表示の時は高解像度のも
のは非表示としてメモリーを節約。拡大表示の時のみ表示する
地図表示を目的の縮尺にし、「動的スタイル設定」の「+」ボタンをクリック
例えばこの「スタイルの対象の縮尺」にて透明化を100%にした場合、
対象レイヤーはこれより広域では表示されず、これより拡大された時
に表示される（=デフォルト・スタイルが適用される）
縮尺が下記青線表示の位置に対応する場合、スタ
イルは赤矢印の位置で設定したものが適用される
動的スタイルは縮尺を変えていくつでも作成可能。動的スタイルの数だけ黄
色/白に色分けされた領域ができる。拡大率がそのエリア内となる場合に常
に左側の縮尺境界にて設定したスタイルが適用される
特定の動的スタイル設定を削除する場合は該当の「スタイルの対象
© 2013 IBM Corporation / © 2013 ISE Corporation
の縮尺」が表示されている状態で「−」ボタンをクリック
Map Builder - 注釈の追加
地図上に「注釈」として線や点、多角形などを描画できる
– 各注釈には「ラベル」と「説明」をつけることができる
• ラベルは注釈に重ねて表示できる文字列
注釈ボタン（左から折れ線、多角形、ポイント、リンク）
※地図上にドラッグして描画
リンクは２つの注釈間を結合
注釈（折れ線）
ラベル
同一種注釈の色分け
・注釈のスタイルは基本的にはレイヤー内で左記のようにしか別れ
ないので注釈の種類（折れ線、多角形など）ごとにしか設定できない
（注釈とそのラベルは独立）
・ただし、対象レイヤーの右クリックメニュー「レイヤーのスタイル設
定」より同一種注釈の「ラベル」または「説明
ごとに「色分け」が可能となっている
右クリック
© 2013 IBM Corporation / © 2013 ISE Corporation
Map Builder - アウトプットの保存
ファイル > 「地図に名前を付けて保存」より、編集した地図をILOG JViews Mapファイル(.ivl)として
保存する
– Diagrammer Designerにて「地図ダイアグラム」タイプのダイアグラムの「背景地図」として利用
する
– .ivl ファイル = XML形式の定義ファイル ⇒ バイナリ形式も選択可（サイズ小）
– 地図データファイルの同時保存（.imgファイルとして）、非保存（元位置から読み込み）も選択可
このivlファイルを用いることで、
Diagrammer Designerにて「背景地図」ありのダイアグラムを作成可能
ファイル保存オプション
.ivlファイル
一般ファイル形式にエクスポート
・Shape, GeoTiffなど
・エクスポート対象のレイヤーを選択
© 2013 IBM Corporation / © 2013 ISE Corporation
3章 Designerを使用したダイアグラムの開発
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer （for JViews Diagrammer）概要
ILOG JViews Diagrammer の開発GUIツール
– ウィザードとGUI操作によって開発工数を大幅に削減
Diagrammerアプリケーションにおける以下の部分を作成することが可能
– データの定義
• データ・ソースの定義
• 取得したデータからダイアグラムへのマッピング
– スタイルの定義
• 静的なスタイル
> 一般的なCSSの項目
> ノードの表す対象に応じた記号の設定
• スタイル・ルール
> ある条件を満たした要素に対するスタイルの変更
• インタラクション
> ユーザーの操作に対する反応
以下の様な、より高度な処理を加える場合には、Java APIで直接カスタマイズする必要がある
– JDBCを経由し、毎回データベース上の最新情報を反映する
– 高度なスタイル・ルール（「特定の条件を満たす子」を持つ親ノードへのスタイル適用など）
など
© 2013 IBM Corporation / © 2013 ISE Corporation
Designerによる開発の効率化
開発の高速・省力化
– あらかじめ用意されたテンプレートが利用可能
– データソース定義
• データ・ソースをコーディングレスで指定可能
> CSVなどのフラットデータからも、構造化されたXML形式で保存できる
> ただし、更新の発生するJDBCへの接続は、SDKで設定する必要がある
– スタイルの変更
• CSSの知識不要で、変更の影響を確認しながら動的な変更が可能
– Symbol Editorで作成した記号を動的に配置・確認可能
• ユーザー操作への反応も設定可能
Designer活用の例
– データが既にあればウィザード形式ですぐに可視化、アプリケーションの見た目を確認できる
– サンプル・データを用意して、スタイルやスタイル・ルールをGUIベースで詳細に作り込める
© 2013 IBM Corporation / © 2013 ISE Corporation
新規ウィザードの説明について
次のページから、Designerの新規作成ウィザードでダイアグラムを作成する手順を説明する
– 元となるデータがDB2上に以下の形式で保存されていることを前提とする
扱うデータのテーブル定義
create table ARIZONA.NODE (
CITY VARCHAR(16) not null,
POPULATION INTEGER not null,
LATITUDE VARCHAR(16) not null,
ARIZONA.NODE
のサンプル
LONGITUDE VARCHAR(16) not null
);
create table ARIZONA.LINK (
FROM_CITY VARCHAR(16) not null,
TO_CITY VARCHAR(16) not null,
TRAFFIC REAL not null
);
ARIZONA.LINK
のサンプル
© 2013 IBM Corporation / © 2013 ISE Corporation
新規作成ウィザード開始画面
Designer起動時や、メニューから「ファイル」 > 「ウィザードを基に新規作成」を選択すると、以下の
ようなダイアログが表示される
「次へ」をクリック
© 2013 IBM Corporation / © 2013 ISE Corporation
インポートするデータ形式の選択
読み込むデータ形式を選択
– 今回は「データベース（JDBC）を選択し、「次へ」をクリック
© 2013 IBM Corporation / © 2013 ISE Corporation
補足：JViews Diagrammer XML ファイルの形式について
選択肢の1つ「JViews Diagrammer XMLファイル」は以下のような形式となっている必要がある
ルート要素”diagram”の直下に各ノード、リンク要素が記載される
各ノード、リンク要素のプロパティーは”property”タグで表される
Diagrammer付属のサンプルであるgenealogy.xmlの例
<diagram>
…
<couple id="couple_1">
id はノード要素の必須パラメーター
<property name="name">lastname</property>
<!-- … -->
islink属性がtrueだとリンク、それ以外はノードとみなされる
</couple>
<couplelink from="person_1" id="couple_11" islink="true" to="couple_1">
<property name="name">lastname</property>
<!-- … -->
</couplelink>
</diagram>
各プロパティーのプロパティー名は
name属性、値は要素のテキストで表す
from, to はリンク要素の必須パラメーター
それぞれリンク元、リンク先ノード要素のID
ノードとリンクは異なるタグ名で区別する
このタグ名は「ユーザー定義タイプ」として、ノードやリンクをグループ分けする手段の1つとし
て利用可能（グループ分けについては、スタイル・ルールの作成についてのページを参照）
より詳細な仕様については下記URLを参照
JViews Diagrammer の XML ファイルによるアプリケーション・データ
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.dia
grammer.doc/Content/Visualization/Documentation/JViews/JViews_PPA/JViews_E
nterprise/_pubskel/ps_usrcompdiag1781.html
© 2013 IBM Corporation / © 2013 ISE Corporation
新規ドライバーの登録（DB2のJDBCドライバーを使用する場合）
※組み込みのドライバー（Excel用など）を利用する場合は新規ドライバーの登録は不要
「新規ドライバー」ボタンをクリックすると、「新規ドライバー」ダイアログが表示される
「ドライバー・アーカイブ・ファイル」には、DB2 JDBCドライバーとして”db2jcc4.jar”を指定
「ドライバー･クラス名」は入力欄の右側にあるボタンを押すと自動で検出される
「OK」をクリック
「新規ドライバー」ボタン
ファイルシステムからファイルを選択
クラス名検索ボタン
「データベースURL」に未登録のドライバープロトコル
を指定すると、このようなエラーメッセージが出現
© 2013 IBM Corporation / © 2013 ISE Corporation
新規データ・ソース構成の作成
「新規構成」ボタンから「新規構成」ダイアログを開き、任意の構成名を入力
– このとき選択されていた構成を元に、新規構成が作成される
作成した構成の保存は「新規構成ボタン」の左の「構成の保存」ボタンから行う
「新規構成」ボタン
© 2013 IBM Corporation / © 2013 ISE Corporation
データ・ソース構成の編集
各データの抽出方法を定義する
– 「データベースURL」には「jdbc:db2://<ホスト名>:<ポート番号>/<データベース名>」を指定
– 「ユーザー」、「パスワード」には接続するユーザーの情報を入力
• 上記2つの情報は、「ユーザー」入力欄右側のボタンで他のタブへコピー可能
– 「照会」にデータ抽出用のクエリーを入力（文法は扱うDBの形式に依存）
ノード・リンクのタブそれぞれに対して設定
データベースURL、ユーザー、パス
ワードの設定を「リンク」タブへコピー
ノード照会用SQL
select * from ARIZONA.NODE
ここに照会結果が反映される
リンク照会用SQL
select * from ARIZONA.LINK
© 2013 IBM Corporation / © 2013 ISE Corporation
テーブルとダイアグラマー・モデルのマッピングを定義する
ダイアグラムで用いるプロパティーと、データ・ソースから得られた各データ列を対応付ける
– 左のプロパティー一覧から各プロパティーを選択し（左図）、下段の表から、そのプロパティーに
割り当てる列を選択する（右図）
– 全ての必須プロパティーをマップすると警告マークが消え、「次へ」をクリックできるようになる
• ノードでは”id”、リンクでは”from”, “to”がそれぞれ必須プロパティー
必須でないプロパティー（オプション・プ
ロパティー）は自由に追加/削除が可能。
x, y, nameなど、よく利用されるプロパ
ティーは最初から表示されている
データ列へマップされていないオプション・
プロパティーはベルのマークで表示される
同じ列へ複数のプロパティーをマップしても良い
© 2013 IBM Corporation / © 2013 ISE Corporation
データ・モデルの編集
データベースから取得したデータを編集できる
– 各値の修正や列（オブジェクトのプロパティー）の追加／編集／削除が可能
© 2013 IBM Corporation / © 2013 ISE Corporation
ダイアグラムのタイプを選択
「レイアウト・ダイアグラム」を選択し、「次へ」をクリックする
– 「X/Y ダイアグラム」または「地図ダイアグラム」を選択する場合はここで「終了」をクリックする
データのプロパティーにlatitude, longitudeが含まれず、
x, yが含まれている場合はデフォルトで選択状態になる
各ノード間の関係（リンク）と、次に指定するグラフ・レ
イアウト・アルゴリズムによってノードが配置される
データのプロパティーにlatitude, longitudeが含
まれている場合はデフォルトで選択状態になる
© 2013 IBM Corporation / © 2013 ISE Corporation
グラフ・レイアウトのテーマの選択
ダイアグラム上の各ノードの配置と、リンクの表示方法を選択
以下のテーマが選択可能（各レイアウトの詳細な説明はウィザード上に表示される）
– 今回は「デフォルト」を選択し、「終了」をクリック
対称ダイアグラム
依存関係図
グリッド・ダイアグラム
- 列に配置
直交長リンク
ツリー・ダイアグラム
直交短リンク
直接リンク
グリッド・ダイアグラム
- マトリックスに配置
ワークフロー・ダイアグラム
組織図ダイアグラム
放射型ツリー・ダイアグラム
グリッド・ダイアグラム
- 行に配置
デフォルト
© 2013 IBM Corporation / © 2013 ISE Corporation
作成したダイアグラムの保存
以上の手順でダイアグラムが作成される
– メニューから「ファイル > 名前を付けて保存」で任意のパスへ保存
– 保存先にidprファイル、cssファイル、xmlファイルがそれぞれ作成される
• 保存したダイアグラムはidprファイルから開くことが可能
• データ・ソースをJDBCにした場合も、DBから取得されたデータがxmlファイルに保存される
> 毎回DBを参照したい場合は、SDKを使用してコーディングする必要がある
© 2013 IBM Corporation / © 2013 ISE Corporation
Designerの３つのモード
スタイル編集モード
– ダイアグラムのノードやリンクの外観を編集する
– Designerが生成するCSSファイルに変更内容が反映される
ダイアグラム編集モード
– 各データのプロパティーの編集や、新たなノード／リンクの追加／削除を行える
– Designerが生成するXMLファイルに変更内容が反映される
プレビュー・モード
– 編集したデータやスタイル、動的な効果が実際にどのように表示されるかをプレビューする
Designer左上のアイコンか、
メニューの「表示」 > 「モード」から変更可能
各モードに対して
ショートカットコマンドも用意されている
© 2013 IBM Corporation / © 2013 ISE Corporation
Designerによるスタイル定義の流れ
スタイル・ルールの作成
– ノードやリンクを特徴ごとにグループ分けする
– 例：
• 表現対象の違い（建物と人）
• 属性の違い（男女、稼働率が一定割合を越えているか）
• ダイアグラム上での状態（選択されている状態か）
スタイル・ルールごとに、ノードの記号を変更する
– 表現対象ごとに分かりやすく区別
– 例（左図）：
• 家系図で「人」とその「婚姻関係」に別々の記号を割り当て
スタイル・ルールごとに、記号やリンクのプロパティーを設定する
– ルールごとに、固定値や元データの属性の割り当てが可能
– 設定できる項目は記号ごとに異なる（ラベル表示や色など）
– 例（左図）：
• 「女性」スタイル・ルールに属するものだけ記号の色を変更
• 元データから名前や出生年を取り出して表示
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - スタイル・ルールを作成する
Designerを「スタイル編集モード」にして、「スタイル・ルール」でグループ分けしたい要素の右クリッ
クメニューから「スタイル・ルールの作成」を選択
「スタイル・ルール作成ウィザード」の「条件」で、ルールの対象とする要素の条件を指定する
– 「生成された名前」のチェックを外し、「スタイル・ルール名」に任意の名前を入力（オプション）
– 右端にある「＋」ボタンをクリックして新たな判定条件を追加し、左から順に条件を設定
– 必要な条件を追加し終わったら、「終了」をクリック
ノード・リンクの元データ一覧を表で確認できる
作成結果
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - スタイル・ルールで指定可能な条件
元データの属性
– 文字列：属性が存在するか、指定した文字列と等しいか、指定した文字列を含むか
– 数値：属性が存在するか、指定した値との間に等号や不等号が成り立つか
選択されている：その要素が選択されているか
凡例にある：その要素の表示場所が凡例上か（凡例はオプションから表示可能）
展開（省略）されている：サブグラフ（オプションで作成可能）がそれぞれの状態のときの表示方法
ハイ（通常）コントラストである：アプリケーションでの表示がそのコントラストになっているか
詳細度は高（中/低）である：アプリケーションでの表示がその詳細度になっているか
– 上記2項目の状態は、Designerからは「表示」メニューで変更できる
ユーザー定義タイプ：指定した文字列と等しいか
– 「ユーザー定義タイプ」は、要素を区別するための識別子のようなもの
• Designerが参照するXMLファイル内では各要素を同名のタグで囲っている
• 「ダイアグラム編集モード」で追加／変更が可能
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - スタイル・ルールごとにノード記号を変更する
記号を変更したいルールを選択し、 「スタイリング・カスタマイザー」下部中央にある「記号の割り当
て」をクリック
「記号の割り当て」ダイアログで割り当てる記号を選択し、「適用」をクリック
– 自分で作成した記号を選択する場合は、「パレットのロード」から.jarファイルを選択可能
変更結果
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - スタイル・ルールごとにプロパティーを設定する
各ルールを選択すると、「スタイリング・カスタマイザー」に現在のプロパティーが表示される
各入力欄には、以下2つの入力状態が存在する（入力欄を右クリックすれば変更可能）
– 「リテラル値を入力」：シンプルな数値や文字列で、入力した文字列がそのまま反映される
• 「数値の欄には数字しか入力できない」など、入力内容が制限される
– 「式を入力」：モデル属性、関数呼び出し、リテラルの組み合わせ
• 入力時に属性名や関数名を補完するドロップダウン・リストが現れる
各値を入力した後Enterキーを押さないと、値が反映されない場合があることに注意
ルール固有の設定を行うと、入力欄左に
ある三角形が上向きから右向きに変化
（クリックすると初期状態にリセットされる）
元データの属性は@<属性名>で参照可
中央のラベルと左上の数値がそれぞれ変化
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - スタイル・ルールの階層構造と親子関係
スタイル・ルールはツリー構造を形成し、この親子関係は「スタイル・ルール」ペインに表示される
– 子のルールが親のルールに優先され、子で指定されなかった設定は親のものを引き継ぐ
– 同階層のルールは、より下に表示されているものが優先される
スタイル・ルール選択時に、関連する上位のスタイル・ルールは青丸アイコン（ ）がつく
スタイル・ルール選択時に、そのルールに属するオブジェクトはダイアグラム上で強調される
– そのルールが最優先で適用される要素…太い点線
– 更に優先度の高いルールが別に存在する要素…細い点線
node.personに属するが、より優先度の
高いルール「person[sex=female]」が存在
node.personに属さないので、強調されない
node.personに属す
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - ダイアグラムの元データを編集する
「ダイアグラム編集モード」で「データ・モデル・ビュー」またはダイアグラムからオブジェクトを選択
– 「データ・プロパティー」にそのオブジェクトのプロパティーが表示される
「データ・プロパティー」に表われたオブジェクトのプロパティーを編集
– 編集内容は、プロジェクト・ファイルが参照しているXMLファイルへと反映される
– 「tags」プロパティーは書き換え不可で、代わりに「CSSclass」というプロパティーが生成される
• 「ユーザー定義タイプ」は「tags」、または「CSSclass」プロパティーの値を参照している
ボタンは左から、新規プロパティーの追加と削除、
ユーザー定義タイプ（CSSclassプロパティー）の設定
Enterキーを押すまで変更
は反映されないことに注意
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - ダイアグラムに新しいノードやリンクを追加する
水平ツールバー右端にユーザー定義タイプ別のノード・リンク作成ボタンが配置されている
左側2つのボタン「新しいタイプのノード（リンク）作成」を使うと
新たなユーザー定義タイプのノード（リンク）を作成可能
（このユーザー定義タイプはtagsプロパティーで定義される）
新たなユーザー定義タイプを設定するたびに右側に専用のボタ
ンが増えて行く。CSSclassプロパティーで設定されたユーザー
定義タイプは、元のCSSclass、tagsの組み合わせを引き継ぐ
ノードの追加
– 追加するタイプのノード追加ボタンを選択し、ダイアグラム上でクリックする
グラフ・レイアウトが自動になっている場合、ノー
ドの追加位置はクリック位置と無関係に決まる
リンクの追加
– 追加するタイプのリンク追加ボタンを選択し、リンク元ノード、リンク先ノードを順にクリックする
グラフ・レイアウトが自動になっている場
合、追加時に各要素の配置が修正される
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - ダイアグラムのデータへのその他の操作
ノードの移動
– ダイアグラム上でノードをドラッグ・アンド・ドロップする（グラフ・レイアウトが「自動」だと無効）
– 有効にするには、「スタイル・ルール」で「オプション > グラフ･レイアウト」を選択し、
「スタイリング・カスタマイザー」で「コントロール > 実行」を「オンデマンド」に設定する
グラフ・レイアウトが「自動」の場合、
ドロップ時に以下のような警告が出現
ドラッグ中は要素サイズ
の黒枠が表示される
リンクの移動
– リンクを付け替えたい側の端を、付け替え先のノードへとドラッグする
ドラッグ中のリンク端からは、カーソルと「最後にカーソ
ルが触れたノード」それぞれとの間に黒線が表示される
要素の削除
– 要素を選択してDeleteキー、またはメニューから「編集 > 削除」を選択
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - ダイアグラムの動作を確認する
プレビュー・モードでは、他のモードで見られないアプリケーションの振る舞いを確認可能
– 例：ツールチップの表示
ツールチップ・テキストは
「スタイリング・カスタマイザー」で設定可能
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - オプションの設定
「スタイル・ルール」ペインの「オプション」から、ダイアグラマー全体のオプション項目が設定可能
– 各項目の右クリックメニューから有効/無効を切り替え可能
– 各項目ごとに、「スタイリング・カスタマイザー」ペインで詳細なオプションを設定可能
利用可能なオプション項目として、以下の項目がある
– ダイアグラマーの一般プロパティー：ダイアグラマー全体の配置
– 背景：ダイアグラマーの背景に色やパターン、画像を配置できる
– 点滅：点滅機能を持つ記号の点滅間隔を設定
• 点滅機能はSymbol Editorで設定可能
– グラフ･レイアウト：ダイアグラム要素の自動配置方法を設定
– リンク・レイアウト：リンクの配置方法を設定
– ラベル・レイアウト：要素のラベルがノード/リンクと重ならないよう設定
– サブグラフ：ノードのグループ化と、その折りたたみ/展開を可能にする
• XML形式データでのみ有効
– 背景地図：ダイアグラムの背景に背景地図を表示
– ズームのしきい値：ダイアグラムの拡大/縮小時に、各ノードの拡大/縮小量の上限を設定
– 凡例：ダイアグラム上に凡例を表示するように設定
– 情報バルーン：ダイアグラム上の要素をクリックした際に吹き出しで情報表示するよう設定
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer- ユーザーの操作に反応させる（インタラクターの設定）
インタラクターについて
定義済みインタラクター（Designerで有効。SDKを使い、ユーザーアプリケーションにも追加できる）
– 全モード：パン（表示領域移動）、選択、ズーム
– 「情報バルーン」オプション有効時：情報バルーン表示
– 「サブグラフ」オプション有効時：ノードの展開/折りたたみ
– ダイアグラム編集モード：ノード／リンクの作成、ラベルの編集
各記号のインタラクターを扱うパラメーターはスタイリング・カスタマイザーからアクセス可能
– これにデータ・モデルの属性をマップすることで、インタラクターを有効にする
Symbol Editorのインタラクターの項で作成した記号による例
記号の「rotation」プロパティーに、
モデル属性の「angle」を紐付ける
元データのangle属性に回
転状態が反映されている
プレビュー・モードで動作確認
© 2013 IBM Corporation / © 2013 ISE Corporation
Designer - Javaアプリケーション（アプレット）への組み込み
作成されたダイアグラムを実行するには、以下の作業を実施し
JavaアプリケーションかJavaアプレット内に組み込む必要がある。（詳細は次ページから説明）
– ライセンスの宣言 （必須の共通作業）
• JViews Diagrammerアプリを使用するに必要な使用宣言を行う
• ライセンスの宣言方法については1章を参照
– Javaアプリケーションへの組み込み
• Javaアプリケーション（Java Swingアプリケーション）画面内にダイアグラムを組み込む
– Javaアプレットへの組み込み
• Javaアプレット画面内にダイアグラムを組み込む
– API による拡張
• 組み込んだダイアグラムをSDKを使用して拡張する
© 2013 IBM Corporation / © 2013 ISE Corporation
Javaアプリケーション（アプレット）へのidprファイルの取り込み
IlvDiagrammer を利用
– DiagrammerのAPIをカプセル化（詳細は５章 SDKプログラミングの説明を参照）
– 各APIを個別に直接利用するのに比べて容易に実装可能
– データ・ソースやCSSを直接設定することもできる
IlvDiagrammer diagrammer = new IlvDiagrammer();
// idprファイルをセット
diagrammer.setDataFile(new File(PROJECT_FILE_PATH).toURI().toURL());
diagrammer.setScrollable(true);
frame.add(diagrammer);
// フレームの大きさを明示的に設定
frame.setSize(700, 400);
アプリケーション
の実行例
© 2013 IBM Corporation / © 2013 ISE Corporation
HTMLファイルへのJavaアプレット記述方法
アプリケーション部分の記述方法はJavaアプリケーションの場合と同様
<object type="application/x-java-applet"
作成したクラス名
classid="java:my.DiagrammerApplet.class"
使用しているJViewsライブラリの
JARファイルを列挙
archive="../DiagrammerApplet.jar,../lib/jviews-framework-all.jar,……"
width="500" height="500">ブラウザが対応していません</object>
アプレットの制限から、ローカル環境では実行ファイル（Appletとして実行するjarファイルやclassフ
ァイル）よりも上の階層にあるファイルにはアクセスできないことに注意
– Designerでの作成物やデータソースファイル、独自に作成したファイルなど
– ローカルでのサーバー起動、ファイルの配置変更などによって回避可能
アプレットの実行例
© 2013 IBM Corporation / © 2013 ISE Corporation
API による拡張
以下の様な項目をSDKを使用して後から拡張することが可能 （詳細は５章を参照）
– データ・ソースの変更
• Designerによる作成時とは異なるデータ・ソースの指定
• 任意形式のデータをデータ・ソースとして読み込むための独自クラスの作成
– スタイルシートの適用
• Designerによる作成時とは異なるスタイルシートの指定
– カスタム・インタラクション
• 定義済みインタラクター以外に独自のインタラクション（ユーザー操作への反応）を追加
– カスタム・レンダリング
• 定義済みのレンダラー（グラフィック表示を管理するコンポーネント）以外のものを追加
© 2013 IBM Corporation / © 2013 ISE Corporation
記号コンパイラー （Symbol Compiler）
記号コンパイラーとは
– Symbol Editorで作成されたCSSベースの記号をJavaコードに変換する
– 以下のようなメリットがあるため、必要に応じて利用する
• パフォーマンスの向上
• 記号をJavaコードで拡張できる
• JViews Diagrammerなしの、JViews Graphic Frameworkのみの環境で記号が使用可能
「ソースファイルの生成」 or 「生成とコンパイ
ル」でJavaコードを生成し、下段中央に表示
生成されるJavaファイル、リ
ソース（画像など）ファイル、
クラスファイルのパスを指定
コンパイルした記号のテストが可能
パレットからドラッグ＆ドロップ
で記号が表示される
パレットからドラッグ＆ドロップ
で記号が表示される
パレットの.jarファイルをロード
© 2013 IBM Corporation / © 2013 ISE Corporation
記号コンパイラー - コンパイルされた記号のDiagrammerでの利用
IlvDiagrammerは、デフォルトで通常のCSS版の記号を使用する
IlvDiagrammerに以下の設定を加えることで、コンパイルされたバージョンの記号を使用できる
– コンパイルされた記号のクラスがアプリケーションから参照できなかった場合はCSS版を使う
diagrammer.getEngine.setCompiledSymbolAutoLoad(true);
同様に、IlvDashboardDiagramにも適用可能
© 2013 IBM Corporation / © 2013 ISE Corporation
4章 Dashboard EditorとSDKを使用したダッシュボードの開発
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboard Editorの役割
ダッシュボード
– ビジネスやシステムの重要な情報をグラフィカルに表示するために使用。背景の上に配列され
たILOG JViewsの記号から成るグラフィック・コンポーネント
Dashboard Editorはダッシュボード・アプリケーションの表示部分を作成するためのGUIツール
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboard Editor
パレットのパーツを配置して、プロパティーで各パーツの配置、リンクの編集、背景の設定を行う
– Designerの様なウィザードは無い
プロパティー
パレット
ダッシュボード編集領域
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboardの３つの構成要素
記号
– Symbol エディターで作成する記号
リンク
– 各記号を１：１で視覚的に結合する線
背景
– 背景の画像や文字
記号
リンク
背景
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboard Editorの役割 (idbd/idbinファイル)
Dashboard Editorは記号／リンク／背景をGUIを使用して配置し、組み合わせ、プロパティーを設
定して一つのダッシュボード・アプリケーションの表示部分を作成する
アウトプットはXMLファイル（.idbd）あるいはバイナリファイル（.idbin）となり、Diagrammer SDKで
表示部として利用する
Java Objects
記号
記号
記号
リンク
リンク
リンク
背景
背景
背景
配置／組み合わせ／プロパティー設定
idbd
XML/可読性,移植性
or
Dashboard Editor
idbin
バイナリ/サイズ小
利用
※データソースとの関連付けは当Editorでは不可。コーディングで行う。
SDKでアプリケーション開発
© 2013 IBM Corporation / © 2013 ISE Corporation
記号
観察対象の状態や制御の機能をそれ一つ、あるいは複数の組み合わせで表現するための記号
Dashboard Editorでは、ダッシュボードに任意の記号を任意の数配置可能
記号は、Symbol Editorで作成できる
記号の具体例
– 一次元の連続した数量を表すゲージやバーなど
– 棒や円、折れ線などのいわゆるグラフ
– いくつかの状態を表すサイン
• 例）正常、異常、休止中などのステータス
– 背景と組み合わせて位置や意味を表す図形
– 単なる装飾
– インタラクターとしてユーザーからの入力を受け付
けるためのスイッチやボタン
色々な記号
これ以外にも多くの種類の「記号」が考えられる
※詳細は2章のSymbol Editorの項目を参照
© 2013 IBM Corporation / © 2013 ISE Corporation
記号の実体
パレット
– 記号はJavaで記述され、パレットと呼ばれるjarファイルに保存される
– 一つのパレットには一つ以上の記号を保存でき、ディレクトリでカテゴリ分けが可能
※詳細は２章のSymbol Editorの項目を参照
– Dashboard Editorの右下に「パレット」の子ウィンドウが表示される
パレットの子ウィンドウ
デフォルトのパレット
– Shared_Symbols：カテゴリ分けされた汎用的な記号群
– Controls：入力を受け付ける部品や一次元のゲージ類
– Tunnel：サンプルのトンネル監視ダッシュボードの記号
– Charts：各種グラフ。JViews Chartsのライセンスが必要
– Links：リンク（後述）
自作のパレットの利用
–パレット子ウィンドウの「パレットのロード」からSymbol Editorで
保存したパレットのjarファイルを読み込む
–一つのパレットが一つのタブで開く
–既存のダッシュボードを開くと含まれる記号のパレットも自動的
に開く
新しいパレットの読み込み
© 2013 IBM Corporation / © 2013 ISE Corporation
ダッシュボードへの記号の追加
パレットから目的の記号を選択し、エディターにドラッグ
– 配置場所やサイズなどはマウス操作で行う
プロパティー・シートにて配置された記号の編集
–記号IDをつける
•SDK利用時の対象記号の特定に使用
•デフォルトで記号名_番号が割り当てられる
–プロパティーの編集
•パラメーター名変更やパラメーターの追加
はSymbol Editorでしかできない
•マッピング名にはSymbol Editorで定義した
マッピング名が入っているが、変更したり空
白の箇所に新たに指定することもできる
•値に任意の値を入れてEnterを押すとエディ
ター側の表示に反映される
概要ウィンドウ
エディターの表示範囲
を動したり拡大縮小可
エディター部分
記号の追加
ツリー
ここからも記号が選択できる
プロパティー・シート
記号IDの付与
プロパティーの変更
© 2013 IBM Corporation / © 2013 ISE Corporation
リンク
記号と記号を結合する記号
視覚的に線で結んだ表現を提供することが目的であり、結合された記号間でのデータの受け渡し
や連動したアクションなどに使用できるものではない
記号と同じく、デフォルトで提供されているLinksパレットから選択して複数の記号間を結合
リンクによる記号結合の例
利用可能なリンク
© 2013 IBM Corporation / © 2013 ISE Corporation
リンクによる記号の結合
リンクには方向がある（FromとTo）
1. パレットより目的のリンクを選択し、Fromとなる記号にドラッグすると対象の記号が赤四角で囲わ
れる
2. そこでドロップすると、Toとなる記号に向かってリンクを引ける状態になるので、再びドラッグして
対象の記号でドロップして結合する
パレットよりドラッグして結合
リンクで結合された記号
を移動させた場合の例
記号にはいくつかリンクを接続できる
ポイントがあり、自動的に両端の記号
間の最短のポイント同士で結ばれる
※次ページで紹介する「orthogonal」
型の場合はこの限りではない
© 2013 IBM Corporation / © 2013 ISE Corporation
リンクの編集
プロパティーの編集
– 記号と同様に、対象のリンクを選択した状態でプロパティー・シートを編集できる
– 記号IDを指定し、マッピング名のある属性をSDKから変更することも可能
• 例）特定の記号のステータスがCriticalになったらリンクの色を赤にする、等
– リンク特有のパラメーターとしては以下がある
• orthogonal ： リンクを水平と垂直の線のみで表現する。falseだと記号同士を最短で結ぶ
• oriented/backOriented：リンクの線を矢印表現にする
折れ線ポイント
orthogonal時の例
折れ線や、他の記号との干渉を避ける回り込み
などの表現時に使用
折れ線ポイントの追加
– リンクの線には途中で折れる「折れ線ポイント」を追加できる
• リンクの線上でCtrlを押しながらクリック。再度同じことをするとポイントを削除できる
• 折れ線ポイントはドラッグして任意の位置に動かせる
© 2013 IBM Corporation / © 2013 ISE Corporation
リンクのポート
リンクは通常、各記号の「基本要素」同士を結合することができるが、各記号の個別の要素に「ポー
ト」が設定されている場合、この限りではない（Symbol Editorの解説参照）
ポートにはリンクのどの方向を受け付けるかで３種類ある(Fromのみ、Toのみ、両方)
– 結合方法は、通常のリンクと同じくマウスを使う。リンク記号をドラッグすると、利用可能なポー
トを持った記号の要素が強調表示される
一つの記号の中で特定の箇所にリンクを結合させたい場合、記号の中で稼働する要素にリンク結
合を連動させたいケースなどで使用
通常（基本要素）のリンクの場合、外周のもっとも近い部分にリンクが結合されるが、個別要素のポ
ートの場合、その要素の中心点と結合される。後述のレイヤーの解説にあるように、リンクは常に
記号より後ろに表示されるので、リンクの端の方は記号に覆われて表示されない（矢印表示が使え
ない）
この例ではこの範囲が一つの記号
各電池マークの先端要素にポートが設定されている
© 2013 IBM Corporation / © 2013 ISE Corporation
背景
記号とリンクの背景となるオブジェクトの集合
– テキスト、線や図形（長方形や円など）、外部の画像などのオブジェクトを
利用可能
– 各オブジェクトには記号同様デザインに関するプロパティーがある
背景の作成方法
– 対象のオブジェクトをツールバーから選択し、目的の位置でドラッグして描く
• 必ず記号やリンクより後ろ側に配置される
背景オブジェクトのツールバー
外部画像の利用
背景オブジェクトを選択
記号
リンク
背景
（目的の位置でドラッグして描画）
© 2013 IBM Corporation / © 2013 ISE Corporation
背景の用途
ダッシュボードの装飾としてのデザイン
各記号の説明等の文章の掲示
各記号に関連した位置の模式化
– 地理的な位置だけでなく、回路図や組織図
等も
– 下記例はオブジェクトを組み合わせているが
地図画像を流用することも可能
例）トンネルの渋滞状況/温度等を監視するダッシュボード
↓背景オブジェクトでデザインや説明文章を表示
↓各記号の位置を模式的に表す画像を背景オブジェクト
の組み合わせで作成
© 2013 IBM Corporation / © 2013 ISE Corporation
背景の編集
背景オブジェクトの編集
– 移動やサイズ変更：記号やリンク同様マウスで行うことができる
– デザイン項目の値はプロパティー・シートで直接編集
サイズ変更
複数の背景オブジェクトの編集
– Shiftキーで複数選択可能
• プロパティー・シートは選択したオブジェクトに共通の項目のみ表示
• 右クリックでオブジェクト同士の前後関係やグループ化、整列が可能
複数の背景オブジェクトを選択
した場合の右クリックメニュー
※MS Officeの「オートシェイプ」に似た操作感
プロパティーの動的変更
– 背景オブジェクトには記号やリンクのような「マッピング」名
は設定できず記号IDもない
– 記号やリンクと同じアプローチでコーディングによる動的な
プロパティー変更をしたい場合は、背景要素を記号として
作っておく
• 例）Shared Symbole > Controls のPanelなど
• ただしこのアプローチだと後述のレイヤーは「記号レイ
ヤー」となり「背景レイヤー」は使えない
↓背景オブジェクト風の「記号」もあり。これだと
「記号ID」や「マッピング」が使える
© 2013 IBM Corporation / © 2013 ISE Corporation
ダッシュボードのレイヤー
ダッシュボードに配置される各要素（記号/リンク/背景）は下記の11層のレイヤーのいずれかに属する
レイヤーは、ダッシュボードを表示した際の前後関係となり、レイヤー番号の大きいものが手前に表示される
レイヤー番号
デフォルトのレイヤー名
用途
10
Nodes
記号用
9
Links
リンク用
8
（なし）
背景用
7
（なし）
背景用
6
（なし）
背景用
5
（なし）
背景用
4
（なし）
背景用
3
（なし）
背景用
2
（なし）
背景用
1
（なし）
背景用
0
（なし）
背景用（デフォルト）
記号やリンク、背景オブジェクトの右クリッ
クメニューで変更できる「前後関係」はあく
まで同一レイヤー内での前後関係
記号はレイヤー番号10に、リンクはレイヤー番号9に配置され、これらのレイヤーに背景オブジェクトは配置
できない。
© 2013 IBM Corporation / © 2013 ISE Corporation
レイヤーの使い方
同一レイヤーに属しているオブジェクトは、まとめて以下の属性を指定できる
– 可視／不可視
– 選択可能／不可能
• 選択不可能になると、対象オブジェクトの一切の編集ができなくなる
> サイズや位置の変更
> プロパティーの変更
– 透過性（アルファ）
※グループ化とは違い、各オブジェクトは独立した状態のまま
例）レイヤーを活用して複数オブジェクトにまとめて透過性指定
Dashboard Editorでは上記属性は固定（静的）だが、SDKを使用することで特定レイヤーの属性を
動的に変更可能
© 2013 IBM Corporation / © 2013 ISE Corporation
レイヤーの編集／移動 - レイヤー・パネル
レイヤー・パネル
– Dashboard Editorにおいてレイヤーに関する編集を行うパネル
– ツール > レイヤー・パネル より実行
レイヤー・パネル
レイヤーの選択
デフォルトでは背景
レイヤーに名前が
なくレイヤー番号で
表示されている
レイヤーの移動
レイヤー名の作成/変更
プロパティー変更
複数のオブジェクトを含むレイヤー自体の前後関係の変更
– 対象のレイヤーを選択し、「上へ」「下へ」で移動
レイヤーの名前
– 背景用レイヤーには名前がついておらず、レイヤー自体を移動して
もレイヤー番号で表示されるためわかりにくい（レイヤー・パネル上
での順序は変わっていないように見える）
• レイヤー番号は下から0→10の順序で不変
– レイヤーに名前をつけると異動後の位置に名前が表示されるため、
分かり易い
背景オブジェクトを別のレイヤーに移動
– Editor上でオブジェクトを選択し、「選択したオブジェクトを含むレイヤ
ー」で移動先のレイヤーを指定
デフォルト挿入レイヤー
– 背景オブジェクトが自動的に配置されるレイヤーを指定
– デフォルトはレイヤー番号０
レイヤーのプロパティー変更
– 可視／選択可能／可視性（アルファ）を各レイヤーごとに指定
背景オブジェクトがまず配
置されるレイヤーの指定
背景オブジェクトの別レイヤーへの移動
© 2013 IBM Corporation / © 2013 ISE Corporation
SDKを利用したダッシュボード・アプリケーションの開発
ここでは、Dashboard Editorを使用してダッシュボード・アプリケーションを作成する場合に、追加
のSDK開発が必要となる最低限の基本的な事項を解説する
（Diagrammer SDKでは、ここで紹介する以外にも様々な開発が可能。必ずしもDashboard Editor
を使用しなければいけないわけではない。）
SDKを使用した開発の詳細はマニュアルを参照のこと
– （参考）Dashboard Editor のプログラミング
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.diagram
mer.doc/Content/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_
pubskel/ps_usrdashboarddiag1826.html
– （参考）Diagrammer SDKのDashboard部分のAPI Document
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.diagram
mer.doc/html/refjava/html/ilog/views/dashboard/package-summary.html
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboard EditorとSDK
Dashboard EditorとDiagrammer SDKの役割分担
– Dashboard Editor
• Dashboardアプリケーションの表示部分を作成。以下を一つの表示部分として組み合わせ
> 記号
> リンク
> 背景
– Diagrammer SDK
• Dashboard Editorの成果物をViewとした時の、ModelやController部分を作成
> アプリケーションとしての実行
» Swing（JFrame、JApplet、Java Web Start）
» Webアプリケーション（JSF）
» Eclipse RCP
> データソースから記号のパラメータ値の取得し、反映
> インタラクターからの操作の受け付け
© 2013 IBM Corporation / © 2013 ISE Corporation
SDKによる開発の適用範囲
Dashboard Editorによる作業
Dashboard Editor
View部分（記号、リンク、背景が配置されたGUI画面）は
Dashboard Editorで作成（idbdファイル）
GUI
Diagrammer SDKによるアプリケーション開発
ダッシュボード・アプリケーション
アプリケーション化
：作成されたidbdファイルを元に、Swing等のアプリケーションにする
バックエンド・データの記号への反映
：データベースなどからダッシュボードに表示
させたい値を取得し、記号のパラメータに割り当てる
<インタラクターが設定された記号の例>
：ユーザーからのマウス操作を受け付けるスイッチ
インタラクターからの操作を受けたアクション
：インタラクターがGUIから操作されたことを検知し、
操作後の状態に応じたアクションを記述する
コーディング
<記号のパラメーターの値を指定するケースの例>
：DBから値を取得して、電池メーターの色に反映
DB
© 2013 IBM Corporation / © 2013 ISE Corporation
JViews Diagrammer Dashboardアプリケーション開発時の準備
SwingにおけるJFrameやJAppletを始めとした各種クラスの使用法を理解していることが前提。
http://java.sun.com/javase/ja/6/docs/ja/api/javax/swing/package-summary.html
必要なライブラリ（以下はJViews Diagrammer 8.8における例）
– Diagrammer用のみでなくJViews Frameworkのライブラリも必要とする。
– 最低限必要なjarファイル
• jviews-diagrammer88/lib/jviews-diagrammer.jar
• jviews-framework88/lib/jviews-framework.jar
• jviews-framework88/lib/external/icu4j-4_8.jar
– この他必要に応じてこれらと同じディレクトリにあるjarファイルも追加する。
ライセンスの受け入れ
– 他の箇所でも記載しているように、JViews製品が提供するJavaライブラリを使用するためには、「ライセンス
を保有していること」をコーディング内で宣言する必要がある。
– Diagrammerの場合は以下のような定数をIlvProductUtilクラスのメソッドで宣言する。
• IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Diagrammer_Depl
oyment);
• Webアプリケーションの場合はweb.xmlに記載する
• 詳細は以下を参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.diagrammer.doc/
Content/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_gene
ral_information1471.html
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboardアプリケーションのコーディング – Swingのアプリケーション
Swing Application FrameworkのJFrameを利用したアプリケーションを例としたコーディング例
//JFrameを拡張してクラスを作成
public class MyDashBoard extends JFrame{
//コンストラクタの定義
public MyDashBoard() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
∼∼∼∼∼∼∼∼∼∼中略∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
//Swingのメソッドを利用してアプリケーションのGUIを定義
add(BorderLayout.CENTER, diagram); //”diagram”はIlvDashboardDiagramのインスタンス
pack();
setSize(900,300);
setVisible(true);
setTitle("My Dashboard");
//mainメソッド
public static void main(String[] args) {
//ライセンス保持の宣言
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Diagrammer_Deploym
ent);
//このクラスのコンストラクタを呼び出す
new MyDashBoard();
}
IlvDashboardDiagramのインスタンスにDashboard Editorの成果物であるidbd/idbnファイルを読み込ませて使
用する（次頁）
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboardアプリケーションのコーディング – idbdファイルの利用
Dashboardではjava.awt.Componentを継承したIlvDashboardDiagramクラスでダッシュボードを実
装する。
javax.swing.JComponent
ilog.views.diagrammer.IlvDiagrammer
ilog.views.dashboard.IlvDashboardDiagram
IlvDashboardDiagramインスタンスを作成し、idbdファイルを読み込むコード例
URL url = new URL(‘file://C:/mywork/bamdasbod.idbd’)
IlvDashboardContext context = new IlvDashboardContext();
IlvDashboardDiagram diagram = new IlvDashboardDiagram(context);
diagram.readDashboard(url);
© 2013 IBM Corporation / © 2013 ISE Corporation
記号のパラメーターに対する値の入力
ダッシュボード中に配置した記号のパラメーターに「マッピング」名があるものについて
は、SDKを使用したコーディングでその値を与えることができる
//記号のパラメーターに対する値のセット（IlvDashboardDiagramのsetObjectPropertyメソッドを利用）
diagram.setObjectProperty(記号ID, マッピング名, 値)
例）下記のようなダッシュボード上の記号（記号ID：SatMeter_A）のパラメーター「value」の値として、
DB2上に作成されたDB「SALES」のテーブル「DAILYCSI」内で、「DATE」の値が最新のものの「CSI」
の値を取得して表示するケースを考える
DB2
DAILYCSI
db2inst1/
password
DATE
CSI
2012-11-30
72.8
2012-12-03
69.9
2012-12-04
71.2
SALES
次ページに、この例の場合のコーディング例を記載
© 2013 IBM Corporation / © 2013 ISE Corporation
前ページの例におけるコーディング（DBからの値の取得）
int latestcsi = 0;
Connection conn = null;
PreparedStatement ps = null;
ResultSet result = null;
try {
conn = DriverManager.getConnection("jdbc:db2://dbs_server_hostname:50000/SALES", "db2inst1", “password");
ps = conn.prepareStatement("SELECT csi FROM dailycsi WHERE date = (SELECT MAX(date) FROM dailycsi)");
result = ps.executeQuery();
while (result.next()){
latestcsi = result.getInt("QUANTITY");
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
if (result != null) {
try {
result.close();
} catch (SQLException e) { }
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) { }
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) { }
}
}
diagram.setObjectProperty(diagram.getObject(“SatMeter_A"),“custSatIndex",latestcsi);
プログラム内から
データベースに
JDBC接続をして
テーブル内の値を
取得
※JViewsに関係なく
一般的なコーディング例で
この通りである必要はない
記号のパラメーターへの反映
（このメソッドが呼ばれるタイミングで
画面が再描画される）
© 2013 IBM Corporation / © 2013 ISE Corporation
Dashboardアプリケーションのコーディング – インタラクターから操作受付
記号エディターで「インタラクター」が設定された操作可能な記号からの入力を受け付けることができる。
ダッシュボード中のオブジェクトのプロパティーの値が変更されたことに反応するListenerを定義する
（インタラクターからの操作に連動してプロパティー値が変更されるため、このListenerが反応する）
//SDMPropertyChangeListenerを継承
public class MyListener implements SDMPropertyChangeListener
//コンストラクター
public MyListener(IlvDashboardDiagram diagram) {
//diagramから取得しておきたいものがあれば取得する
}
//propertyChangedメソッド（リスナーに定義した記号中のインタラクターが操作されたことを感知して実
行されるメソッド）をオーバーライド
public void propertyChanged(SDMPropertyChangeEvent event) {
//この中にプロパティーの値が変更された場合のアクションを定義
//以下でイベントの内容が取得できる
Object ChangedObject = event.getObject(); //インタラクターが操作された記号のオブジェクト
String ChangedPropertyName event.getPropertyName(); //インタラクターに紐付いたプロパティ名
Object NewValueOfTheProperty = event.getNewValue(); //インタラクター操作後の値
}
}
//以下のようにIlvDashboardDiagramインスタンスにListenerを関連付ける
MyListener listener = new MyListener(diagram);
diagram.getEngine().getModel().addSDMPropertyChangeListener(listener);
© 2013 IBM Corporation / © 2013 ISE Corporation
記号のインタラクターからの操作を受けるコーディング例
下図左のようなダッシュボード上のダイヤル記号（記号ID：e_furnace_3）のダイヤル部分がインタ
ラクターとなっており、GUIからのマウス操作で値（マッピング名：OutputPower）を変更できる。
操作を受け、ダイヤルの値（0-100）に比例して、右側の垂直バー記号（記号ID：
e_furnace_3_temp）のバーの高さ（0-2000/マッピング名：value）が変化する、という単純なケース
を考える
ダイヤルの値が、バーの値に反映されるようにする
マウスで操作可能
（インタラクター）
次ページに、この例の場合のコーディング例を記載
© 2013 IBM Corporation / © 2013 ISE Corporation
前ページの例におけるコーディング（インタラクターからの操作受け付け）
【Listenerのコーディング】
//オブジェクトのプロパティーが変更されたことを検知するListener
public class OutputListener implements SDMPropertyChangeListener {
private IlvDashboardDiagram diagram = null; // コンストラクタの引数で受けるIlvDashboarDiagramの受け皿
public OutputListener(IlvDashboardDiagram diag) {
diagram = diag;
//コンストラクタ
//用意した受け皿に引数のIlvDashboarDiagramインスタンスを格納
}
public void propertyChanged(SDMPropertyChangeEvent event) { //プロパティー変更時に呼ばれるメソッドをオーバーライド
//発生したイベントが意図したものであることを確認する（このif文を抜かすと自身による変更を無限に検知してループする）
if (event.getObject().equals(diagram.getObject("e_furnace_3")) && event.getPropertyName().equals("OutputPower")) {
diagram.setObjectProperty(diagram.getObject(“e_furnace_3_temp”),“value”,Double.parseDouble(event.getNewVa
lue().toString())*20); //対象のオブジェクトに変更後の値をセット（今回の例だと20倍して規格化）
}
}
}
【ダッシュボードのmainアプリケーション側でのコーディング】
//作成したListenerをインスタンス化して、IlvDashboardDiagramインスタンス自身にセット
OutputListener listener = new OutputListener(diagram);
diagram.getEngine().getModel().addSDMPropertyChangeListener(listener);
© 2013 IBM Corporation / © 2013 ISE Corporation
５章 SDKを使用したダイアグラムの開発
© 2013 IBM Corporation / © 2013 ISE Corporation
SDKを使用したDiagrammer開発で扱う内容
以降のページでは、以下の様な内容について解説する
Designerの仕組み
– ダイアグラムが描画される仕組み
– 低レベルAPIの直接利用について
アプリケーションへの組み込み
– IlvDiagrammerApplicationクラスの利用
– Javaアプリケーション/アプレットへ直接Diagrammerを乗せる
– 利用可能なコンポーネント、ダイアグラムの操作／編集、スタイル・シートの適用
データの取り扱い
– データ・ソース
– データ・モデルを利用した各種データからの読み込み
– 最新情報の読み込みについて
レンダラーの利用と独自レンダラーの作成
インタラクター2種類の利用と独自インタラクターの作成
116
© 2013 IBM Corporation / © 2013 ISE Corporation
ダイアグラムが描画される仕組み
ダイアグラム・コンポーネントにより、ダイアグラムの表示/編集に必要となる基本機能を全て提供
– IlvDiagrammerとして提供され、下図のような仕組みで元データからダイアグラムを生成する
SDMエンジン
– スタイル・シートに基づいて、アプリケーション・データをグラフィック・オブジェクトに変換する
データ・ソース
元となるデータ
スタイル・シート
各要素の描画方法を指定
ビュー
SDMエンジン
SDM
データ・モデル
データの読み込み
レンダラー
各要素の描画
（オブジェクト・）
インタラクター
IlvDiagrammer
117
ユーザーによる操作を
データ・モデルへ反映
結果の描画
グラファー
各要素をグラフとして配置
IlvGraphic
描画される画像オブジェクト
をまとめて管理している
© 2013 IBM Corporation / © 2013 ISE Corporation
低レベルAPIの直接使用について
開発者は、JViews Diagrammer APIの代わりに JViews Framework の低レベルAPIを直接使用
することも可能
– 前ページのIlvDiagrammerやSDMエンジンはこの基本フレームワークの上に作成されている
通常低レベルAPIを使用する必要は無く、JViews Diagrammer APIを使用することが推奨される
– 基本機能自体を拡張する必要があるなど、SDMで不十分な場合に、こちらを直接利用する
データ・ソース
元となるデータ
スタイル・シート
表示を行う（矩形）領域GUIコンポーネント
（前ページのビューはこのサブクラス）
各要素の描画方法を指定
IlvManagerView
ビュー 結果の描画
SDMエンジン
SDM
データ・モデル
データの読み込み
レンダラー
各要素の描画
（オブジェクト・）
インタラクター
IlvDiagrammer
118
ユーザーによる操作を
データ・モデルへ反映
IlvManager
グラファー
IlvGraphicをまとめるデータ構造
各要素をグラフとして配置
（前ページのグラファーはこのサブクラス）
IlvGraphic
IlvGraphic
描画される画像オブジェクト
をまとめて管理している
© 2013 IBM Corporation / © 2013 ISE Corporation
IlvDiagrammerApplicationクラスの利用
IlvDiagrammerApplicationクラス
– Swingアプリケーションとして既に完成しているクラス
• 実行することで、そのままSwingアプリケーション／アプレットとして動作
– ライセンス宣言を行う必要があるため、サブクラス化などで対応する
使用例
public class SimpleDiagram extends IlvDiagrammerApplication {
{
IlvDiagrammerApplicationを継承
// ライセンス宣言
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Enterprise_Deployment);
}
@Override public void init(Container contentPane) {
super.init(contentPane);
try {
// 表示するプロジェクトファイルを指定（省略すると空のダイアグラムを表示）
URL documentBase = isApplet() ? getDocumentBase() : new URL(“file:./”);
URL idprPath = new URL(documentBase, “resources/genealogy.idpr”);
getCurrentDiagrammer().setProject(new IlvDiagrammerProject(idprPath));
} catch (Exception e) {
アプリケーションが表示している
e.printStackTrace();
IlvDiagrammerオブジェクトを取得できる
}
}
public static void main(String[] args) {
new SimpleDiagram().init(args);
}
実行結果
ダイアグラムの表示や編集
など、一通りの機能を提供
}
119
© 2013 IBM Corporation / © 2013 ISE Corporation
Javaアプリケーション／アプレットに直接Diagrammerを乗せる場合
Jappletを継承して初期化処理を共通化する
public class SimpleSwing extends JApplet {
public void init(Container container, URL baseURL) { ことで、アプリ/アプレット両方に対応できる
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Diagrammer_Deployment);
IlvDiagrammer diagrammer = new IlvDiagrammer();
try {
URL idprPath = new URL(baseURL, “resources/genealogy.idpr”);
diagrammer.setProject(new IlvDiagrammerProject(idprPath));
} catch (Exception e) {
e.printStackTrace();
}
container.add(diagrammer, BorderLayout.CENTER);
}
アプレットの開始位置。Diagrammerの貼り付け先と、
@Override public void init() { 基準ディレクトリーを共通の初期化メソッドへ渡す
init(getContentPane(), getDocumentBase());
}
アプリケーションの開始位置。
Swingで推奨されている非同期呼び出しを行うためにスレッドを作成し、
Diagrammer貼り付け先としてJFrameを、基準ディレクトリーとして
カレントディレクトリーを共通の初期化メソッドへ渡す
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
@Override public void run() {
JFrame frame = new JFrame(“SimpleSwing”);
try {
new SimpleSwingShortest().init(frame.getContentPane(), new URL(“file:./”));
} catch (MalformedURLException e) {
System.exit(1);
}
メニューやツールバーは
≪省略：ウィンドウのサイズ調整など≫
個別に追加する必要がある
frame.setVisible(true);
}
});
}
}
120
© 2013 IBM Corporation / © 2013 ISE Corporation
アプリケーションに利用できるコンポーネント
IlvDiagrammerApplicationクラスからも利用されている、アプリケーションの構成パーツ
– Swingアプリケーションへ直接導入可能
以下の様な種類を提供
– アクション（IlvDiagrammerAction）
• メニューやツールバーの項目となり、IlvDiagrammerクラスのメソッドを呼び出せる
– ツールバー（IlvDiagrammerToolBar）
• アクションを乗せることのできるツールバー
• ダイアグラムの制御/編集を行うための定義済みサブクラスも提供されている
– メニュー（IlvDiagrammerMenu）
• アクションを乗せることのできるメニュー
• 編集などを行うための定義済みサブクラスや、一纏めにしたメニューバーも提供されている
– 概要（IlvDiagrammerOverview）
• ダイアグラムの縮小ビューを表示する
– 上記の他にも、ダイアグラムの縮小ビュー、ツリー表示、各データのプロパティーなどが存在
各コンポーネントはスタイル・シートによるカスタマイズも可能
121
© 2013 IBM Corporation / © 2013 ISE Corporation
コンポーネントの利用例
IlvDiagrammerToolBarの追加（ContentPaneに追加すれば良い）
public void init(Container container, URL baseURL) {
...
IlvDiagrammer diagrammer = buildDiagrammer(baseURL);
container.add(diagrammer, BorderLayout.CENTER);
container.add(new IlvDiagrammerEditBar(), BorderLayout.NORTH);
}
IlvDiagrammerMenuBarの追加（ContentPaneではなく、フレームに追加する）
アプリケーション
JFrame frame = new JFrame(“SimpleSwing”);
…
frame.setJMenuBar(new IlvDiagrammerMenuBar());
アプレット
@Override
public void init() {
….
setJMenuBar(new IlvDiagrammerMenuBar());
}
メニューバー
ツールバー
122
個別のアクション
© 2013 IBM Corporation / © 2013 ISE Corporation
ダイアグラムを操作／編集する
ダイアグラムを操作可能にする
– ダイアグラムをクリックした際の動作を、IlvDiagrammerのメソッドから変更可能
• setZoomMode： 拡大または縮小
• setPanMode： 任意の方向への移動
• setSelectMode： オブジェクトの選択/解除
アクションを利用して有効化することも可能
（IlvDiagrammerViewBarにも含まれている）
コードの例
IlvDiagrammer diagrammer = new IlvDiagrammer();
diagrammer.setSelectMode(true);
…
ズーム
パン
選択
ダイアグラムを編集可能にする
– setEditingAllowedメソッドにより、ダイアグラムに対する変更が可能になる
アクションを利用して有効化することも可能
• setSelectModeをtrueに設定する必要がある
（IlvDiagrammerMenuBarにも含まれている）
コードの例
IlvDiagrammer diagrammer = new IlvDiagrammer();
diagrammer.setEditingAllowed(true);
…
その他各要素のコピー/削除や、印刷用のメソッドが存在
– 詳細はIlvDiagrammerのJava APIを参照
123
© 2013 IBM Corporation / © 2013 ISE Corporation
スタイル・シートによるカスタマイズ
アプリケーションの見た目やレイアウトは、スタイル・シートによって制御される
– IlvDiagrammerが参照しているSDMエンジンに対して、使用する各CSSファイルを指定する
使用する各CSSファイルのパスを文字列の配列として指定する例
getCurrentDiagrammer().getEngine().setStyleSheets(new String[] { “file:./resources/mystyle.css” });
CSS構文や優先順位は一般的なものと同様
ノードやリンク、各スタイル・ルールなどをCSSから指定できる
– 編集の容易性などから、各CSSファイルはDesignerで作成することを推奨
– エディターなどを利用して直接編集する場合は、下記の資料を参照
スタイル・シート内での CSS 構文の使用
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.il
og.jviews.diagrammer.doc/Content/Visualization/Documentation/JView
s/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextdiag1941.html
124
© 2013 IBM Corporation / © 2013 ISE Corporation
データ・ソース
データ・ソースの役割
– 表示するデータのダイアグラムへの読み込み
– 変更が加えられた場合に元の場所へ書き込み
データ・ソースの設定方法（プロジェクトファイル経由でも設定可能）
IlvXMLDataSource dataSource = new IlvXMLDataSource();
dataSource.setDataURL(new URL("file:example.xml"));
diagrammer.setDataSource(dataSource);
提供済みのデータ・ソースやデータ・モデルで対応出来ないデータの処理を行う際は、データ・ソー
スや次のページのデータ・モデルを作成する
125
© 2013 IBM Corporation / © 2013 ISE Corporation
各種データ・ソースからダイアグラムのデータを読み込む
データ・モデルの各既存クラスにより、以下のようなデータ・ソースから読み込みが行える
利用可能なクラス
利用するデータの種類
IlvDefaultSDMModel
既存データが無い or XMLから読み込む場合
IlvJDBCSDMModel
データベースから読み込む場合（編集は不可）
IlvJavaBeanSDMModel
データを表すJavaBeanが存在する場合
IlvAbstractSDMModel
Javaクラスやその他の既存オブジェクト
IlvBasicSDMModel
126
© 2013 IBM Corporation / © 2013 ISE Corporation
XMLファイルからデータを読み込む場合
IlvDiagrammerが参照しているSDMエンジンに対してXMLファイルを直接設定可能
IlvDiagrammerApplicationのサブクラス内で設定する例
getCurrentDiagrammer().getEngine().setXMLFile(“file:./resources/genealogy.xml”);
上記以外に、SDMエンジンからは以下のようなメソッドが利用できる
– データの読み込み
• readXML: 入力ストリームから読み込み
• readDOM: DOMツリーから読み込み
– データの書き込み
• writeXML: ファイル、または出力ストリームへ書き込み
• writeDOM: DOMツリーへ書き込み
127
© 2013 IBM Corporation / © 2013 ISE Corporation
データベースからデータを読み込む場合
IlvJDBCSDMModelクラスを利用する
– 接続先DBが1つで、ノードの識別IDなどが列名のみで指定できる必要がある
– より複雑なデータを扱うには、より低レベルなAPIを直接利用する必要がある
• このクラスは内部で IlvJDBCTableModel, IlvTableSDMModel などを利用している
DB2からデータを取り込む例
IlvJDBCSDMModel myDBModel = new IlvJDBCSDMModel(
“jdbc:db2://≪ホスト名≫:≪ポート番号≫/≪DB名≫”, “≪DBのユーザー名≫”,
“≪DBのパスワード≫”, “com.ibm.db2.jcc.DB2Driver”,
“select * from ARIZONA.NODE”, “CITY”, // ノード取得用クエリーとIDとして使う列
“select * from ARIZONA.LINK”, “FROM_CITY”, “TO_CITY”); // リンク取得用クエリーと、連結するノードのIDとして扱う列
IlvSDMEngine sdmEngine = getCurrentDiagrammer().getEngine();
sdmEngine.setModel(myDBModel);
sdmEngine.setStyleSheets(new String[] { “file:./resources/db2genstyle.css” });
CSSファイルが指定されなかった場合
（ノードが全て同じ位置に描画されている）
レイアウトや記号の見た目などは全てCSSで制御するため、
データ・モデルに合わせたスタイル・シートも指定する必要がある
JDBC用のデータ・ソース、データ・モデルはいずれも読み込
み専用となっているため、書き込みを行うには専用のデー
タ・モデルやデータ・ソースを作成する必要がある。
128
もしくは、ノードやリンクへの変更を独自インタラクターで取得
してSQLに変換し、コミット用に別のアクションを定義しておく。
© 2013 IBM Corporation / © 2013 ISE Corporation
データ・ソースの最新情報の読み込み
IlvDiagrammerDataSourceのreadメソッドから、データ・ソースの再読み込みが可能
Diagrammerに自身のデータ・ソースを再読み込みさせる例
diagrammer.getDataSource().read(diagrammer);
最新情報に基づいたデータ・モデルを作成し、SDMエンジンにセットし直すことも可能
SDMエンジンに新しいモデルをセットする例
diagrammer.getEngine().setModel(new IlvJDBCSDMModel(…));
アクション（IlvDiagrammerAction）にすることで、メニューやツールバーから操作可能
実行されるたびにモデルをリロードするアクションの例
public class ReloadModelAction extends IlvDiagrammerAction {
private final factory;
public ReloadXMLModel(ModelFactory factory) { // モデル作成用のファクトリーをコンストラクターに指定
super(null);
this.factory = factory;
putValue(Action.NAME, “Reload Model”); // ボタンの表示名。詳細はSwingのActionインターフェースを参照
}
…
@Override public void perform(ActionEvent e, IlvDiagrammer diagrammer) throws Exception {
// diagrammer.getDataSource().read(diagrammer);
diagrammer.getEngine().setModel(factory.provideDBModel());
}
}
ツールバーへの追加
IlvDiagrammerEditBar bar = new IlvDiagrammerEditBar();
bar.add(new ReloadModelAction(factory));
129
© 2013 IBM Corporation / © 2013 ISE Corporation
レンダラーの使用とカスタマイズ
グラフィック表示を管理するためのJavaクラス
– スタイル・シートから有効化とカスタマイズが可能
– 基本的には全てDesignerでインタラクティブに設定できるため、Designerによる設定を推奨
有効化の設定例
セレクターにSDMエンジンを指定（固定値）
SDM {
Decoration : true;
レンダラーの有効化を示す“true”の代わりに、
GraphLayout : “Hierarchical”;
デフォルトのプロパティーを直接設定することも可能
}
プロパティー名に使用するレンダラーの名前をそれぞれ指定
カスタマイズの例
カスタマイズ対象のレンダラー名
GraphLayout {
graphLayout : “Hierarchical”;
savingNodePositions: true;
}
レンダラーのプロパティー名と設定値を指定
オブジェクトに対するプロパティー設定の例
node {
オブジェクトに元からあるプロパティー（先頭は通常小文字）
shapeType: “Ellipse”;
Fixed: true;
}
GraphLayoutのレンダリング・プロパティー（先頭は通常大文字）
事前定義レンダラーの一覧と、それぞれが持つプロパティーについては以下を参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.diagrammer.doc/Content
/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextdiag1980.html
130
© 2013 IBM Corporation / © 2013 ISE Corporation
独自レンダラーの作成
IlvSDMRendererクラスのサブクラスとして定義する
– その子クラスのIlvFilterSDMRendererを継承すれば、必要な部分だけの上書きで済む
最後に追加されたノードにマークを付けるレンダラーの例
マーク用の矩形グラフィックオブジェクト
public class MarkNewest extends IlvFilterSDMRenderer {
private IlvGraphic newMarker = new IlvGraphicFactories.Rectangle().createObject(new IlvRect(5, 5, 5, 5));
private IlvGraphic = currentTarget;
@Override public void addNodeGraphic(IlvSDMEngine engine, Object node, IlvGraphic graphic, boolean redraw) {
super.addNodeGraphic(engine, node, graphic, redraw);
currentTarget = graphic;
新たなノードが追加されたとき、
moveMarker(graphic);
マークをその左上へと移動する
if (!engine.getGrapher().isManaged(newMarker))
engine.getGrapher().addObject(newMarker, true);
マークされているオブジェクトの位置が変わったら、
}
マークもそれに合わせて移動する
@Override public void nodeGraphicBBoxChanged(…) {
super.nodeGraphicBBoxChanged(engine, node, graphic, oldBBox, newBBox, pseudoClasses);
if (graphic.equals(currentTarget))
moveMarker(currentTarget);
}
マークを実際に移動させるメソッド
private void moveMarker(IlvGraphic target) {
IlvRect markerRect = newMarker.boundingBox();
IlvRect targetRect = target.boundingBox();
newMarker.move(targetRect.x - markerRect.width, targetRect.y - markerRect.height);
}
}
131
© 2013 IBM Corporation / © 2013 ISE Corporation
独自レンダラーの登録
作成したレンダラーの登録とロード、カスタマイズ
– 以下のように、スタイル・シートのSDMカスタマイズ・ルールで登録する
前ページのレンダラークラスを登録する例
SDM {
Renderers : "MyRenderer=mypackage.MarkNewest";
MyRenderer : true;
…
}
実行結果
この例では前ページのコードに加え、
マーク用の矩形の色設定を行っている
132
© 2013 IBM Corporation / © 2013 ISE Corporation
インタラクター
イベントに反応してオブジェクトの振る舞いを管理するJavaクラス
2種類のインタラクターが存在する
– ビュー・インタラクター
• ビュー全体に対する表示/操作に影響する（ズームやノードの選択状態の管理など）
– オブジェクト・インタラクター
• 各オブジェクトに対してそれぞれ設定される
133
© 2013 IBM Corporation / © 2013 ISE Corporation
ビュー・インタラクターの仕組み
ビューにスタック構造で格納され（通常は同時に1つだけ保持）、ユーザーの操作に反応する
– 最後に追加されたものだけが動作に影響
push
pop
ビュー
インタラクター
操作
インタラクター
インタラクター
表示
下記のような提供済みアクションでも、内部的にはスタックの先頭を各ビュー・インタラクターに切り
替えることで、ユーザーのマウス操作がダイアグラムにどう反映されるかを入れ替えている
IlvMakeSDMNodeInteractor
IlvZoomViewInteractor
IlvPanInteractor
IlvMakeSDMLinkInteractor
IlvSelectInteractor
134
© 2013 IBM Corporation / © 2013 ISE Corporation
ビュー・インタラクターの作成
提供済みインタラクターを拡張し、ノードやリンクの作成に制約を与えたり、追加動作を加えられる
別種のノード間にのみリンクを作成するインタラクターの例
IlvMakeLinkInteractorと紛らわしいので注意
public class MakeLinkForGeneology extends IlvMakeSDMLinkInteractor {
private String tagNameOf(IlvGraphic graphic) {
return getEngine().getModel().getTag(getEngine().getObject(graphic)); IlvGraphicsから元データのタグ名を取得する
}
@Override protected boolean acceptDestination(IlvPoint p, IlvGraphic toNode) {
if (tagNameOf(toNode).equals(tagNameOf(getFrom()))) {
return false;
リンク先選択時に呼ばれ、リンクして良い場合にtrueを返すメソッド
}
今回は同種のノード間をリンクしないようにオーバーライド
return super.acceptDestination(p, toNode);
}
@Override public IlvLinkImage createObject(IlvGraphic from, IlvGraphic to, IlvPoint[] points, boolean oriented) {
setTag(tagNameOf(from).equals("person") ? "couplelink" : "childlink");
return super.createObject(from, to, points, oriented);
}
}
リンクを表すオブジェクトを作成するメソッド
今回は、リンク元の内容に従ってリンクの種類を変更するように記述
各ビュー・インタラクターはIlvSDMViewに対して接続する
– アクション内で実行すれば提供済みアクション同様に使える
diagrammer.getView().pushInteractor(new MakeLinkForGeneology());
135
同種のノードをリンク先としてクリックしても
リンクが作成されない
© 2013 IBM Corporation / © 2013 ISE Corporation
ビュー・インタラクターの補足事項
その他のビュー・インタラクター
– 多くのビュー・インタラクターは ilog.views.interactor パッケージ内に入っている
– IlvMakeSDMNodeInteractor（オブジェクトの作成）など、他にも提供済みのものが多数存在
インタラクターの変化の監視
– InteractorListenerインターフェースを実装したクラスをビューに登録することで、インタラクター
の変化に応じた処理が実行可能
インタラクターが入れ替わるたびに、新旧のインタラクターのクラス名をコンソールへ印字するInteractorListener
diagrammer.getView().addInteractorListener(new InteractorListener() {
private String classNameOf(IlvManagerViewInteractor interactor) {
return interactor != null ? interactor.getClass().getSimpleName() : "null";
}
@Override public void interactorChanged(InteractorChangedEvent event) {
System.out.println(classNameOf(event.getOldValue()) + " -> " + classNameOf(event.getNewValue()));
}
IlvSelectInteractor -> IlvPanInteractor
});
初期状態（選択）から『パン』を選択すると
インタラクターが入れ替わることを確認できる
IlvPermanentInteractorInterfaceインターフェースの機能
– 実装したインタラクターはtransient(一時的)、permanent（恒久的）の2種類のモードを取る
– transientのとき、インタラクターは実行時に自分自身をスタックから取り除くようになる
• 連続で実行しないものは、このインターフェースを実装することで自動的に解除できる
• 逆に、実装済みインタラクターを連続実行したい場合は、permanentに切り替えれば良い
136
© 2013 IBM Corporation / © 2013 ISE Corporation
オブジェクト・インタラクターの作成と適用
ビュー・インタラクターが適用されなかった場合に参照される
Interactorレンダラーを有効にして、スタイル・ルールのInteractorプロパティーにクラス名を指定
– IlvObjectInteractorのサブクラスを指定する必要がある
クリックのたびに性別プロパティーを書き替えるインタラクターの例
IlvObjectInteractorの記号用サブクラス
public class MyCompositeInteractor extends IlvSDMCompositeInteractor {
@Override
public boolean processEvent(IlvGraphic graphic, AWTEvent event, IlvObjectInteractorContext context) {
IlvSDMEngine engine = IlvSDMEngine.getSDMEngine(graphic);
if (engine != null) {
IlvSDMModel model = engine.getModel();
元データを取得し、male→female、female→maleに変換
Object modelObject = engine.getObject(graphic);
if (model.getTag(modelObject).equals("person")) {
String currentSex = (String) model.getObjectProperty(modelObject, "sex");
model.setObjectProperty(modelObject, "sex", currentSex.equals("male") ? "female" : "male");
return true;
}
}
return false;
}
}
インタラクターはCSSでスタイル・ルールに紐付ける
SDM {
Interactor : "true" ;
}
137
node.person {
Interactor : "my.MyCompositeInteractor";
}
© 2013 IBM Corporation / © 2013 ISE Corporation
リスナーを利用してインタラクターの動作を監視する
オブジェクトのプロパティーが書き換えられたことをリスナーで検知できる
– 記号のインタラクター（2章）による書き換え先を監視すれば、記号の動作も検知可能
デフォルトのノード記号のpush_stateインタラクターによるプロパティー書き換えを監視するリスナー
diagrammer.getView().getModel().addSDMPropertyChangeListener(new SDMPropertyChangeListener() {
@Override
public void propertyChanged(SDMPropertyChangeEvent event) {
if (event.getPropertyName().equals(“push_check”)) {
IlvDefaultSDMNode node = (IlvDefaultSDMNode)event.getObject();
System.out.println(node.getTag() + “ : " +event.getOldValue() + " -> " + event.getNewValue());
}
}
push_checkプロパティーが変更されると、
});
変更されたオブジェクトのタグ名と新旧の値を印字
push_stateインタラクターの書き換え先を
push_checkプロパティーと指定しておく
person: null -> BUTTON_DOWN
person: BUTTON_DOWN -> BUTTON_CLICKED
最初はpush_checkというプロパティーが存在しないので
マウスボタンを押すとnullからBUTTON_DOWNへ変化し、
マウスボタンを離したとき更にBUTTON_CLICKEDに変化
138
© 2013 IBM Corporation / © 2013 ISE Corporation
【参考】 ILOG JViews 参考サイト
© 2013 IBM Corporation / © 2013 ISE Corporation
参考サイト
ILOG JViews 製品サイト
– http://www.ibm.com/software/jp/websphere/ilog/visualization/java/
評価版ダウンロードサイト （英語）
– https://www.software.ibm.com/webapp/iwm/web/preLogin.do?source=swgiijve86t&S_TACT=109HE90W&S_PKG=dl&submit=Continue7S_CMP%3Dweb_ibm_ws_ilgvisu_hero_visualization-ov
製品サポート環境サイト （英語）
– http://www.ibm.com/software/integration/visualization/jviews/enterprise/reqs/
ILOG JViews Infocenter （日本語オンラインヘルプ）
– http://pic.dhe.ibm.com/infocenter/jviewent/v8r8/index.jsp?topic=%2Fcom.ibm.ilog.jviews.gantt.doc%2
FContent%2FVisualization%2FDocumentation%2FJViews%2FJViews_PPA%2FJViews_Enterprise%
2F_pubskel%2Fps_jviews_gantt3097.htmlhttp://www06.ibm.com/software/jp/websphere/ilog/visualization/demo/jviews_enterprise.html
ILOG JViews フォーラム （英語）
– http://www.ibm.com/developerworks/forums/forum.jspa?forumID=2051
© 2013 IBM Corporation / © 2013 ISE Corporation