IBM ILOG JViews Gantt 8.8 開発ガイド日本アイ・ビー・エムシステムズ・エンジニアリング（株）

by user

on 15 сентября 2016

Category: Documents

>> Downloads: 22

159

views

Report

Comments

Description

Download IBM ILOG JViews Gantt 8.8 開発ガイド日本アイ・ビー・エムシステムズ・エンジニアリング（株）

Transcript

IBM ILOG JViews Gantt 8.8 開発ガイド日本アイ・ビー・エムシステムズ・エンジニアリング（株）

2012年07月09日
IBM ILOG JViews Gantt 8.8 開発ガイド
日本アイ・ビー・エムシステムズ・エンジニアリング（株）
© 2012 IBM Corporation / © 2012 ISE Corporation
Disclaimer
この資料は日本アイ・ビー・エム株式会社ならびに日本アイ・ビー・エムシステムズ・エンジニアリ
ング株式会社の正式なレビューを受けておりません。
当資料は、資料内で説明されている製品の仕様を保証するものではありません。
資料の内容には正確を期するよう注意しておりますが、この資料の内容は2012年6月現在の情報
であり、製品の新しいリリース、修正などによって動作、仕様が変わる可能性があるのでご注意下
さい。
今後、国内で提供されるリリース情報は、対応する発表レターなどでご確認ください。
© 2012 IBM Corporation / © 2012 ISE Corporation
当資料について
目次
1章： ILOG JViews 8.8 製品概要
2章： ILOG JViews Gantt アプリ開発概要
3章： Designerを使用した開発
4章： SDKを使用した開発
5章： Webアプリケーション（Ajax/JSF）の開発
目的
– 本資料は、ILOG JViews Gantt を利用したアプリケーション開発に関するガイドです。この資料では、製品の
概要、アーキテクチャーと開発方法を基本から説明しています。この資料を読んでいただくことにより、プロジ
ェクトでILOG JViews Gantt を利用したガントチャートアプリケーションの開発が可能となります。
対象
– システムのアーキテクチャーを検討するエンジニア
– システムの画面を設計／構築するエンジニア
前提
– Webシステム及びJavaアプリケーションに関する基本的なスキル
© 2012 IBM Corporation / © 2012 ISE Corporation
注意事項
SDKのクラス名に関して
– ILOG JViews Gantt では、以下の様なクラス名が使用されています。
本資料では、フォントの関係で分かり難くなっていますが、各文字は以下の様なります。
• 1文字目が「アイ」（大文字）、2文字目が「エル」（小文字）
• 他のクラスもIlvで始まる物は同様の規則です。
IlvGanttChart クラス
アイ（大文字）
エル（小文字）
© 2012 IBM Corporation / © 2012 ISE Corporation
1章 ILOG JViews 8.8 製品概要
© 2012 IBM Corporation / © 2012 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社に譲
渡される事が発表され
ました。
＊・・・日本語版未発表
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViews とは
Java アプリケーション
Java アプレット
Ajax Webインターフェースの為のGUI開発ツール
GUI構築の為の高機能コンポーネントスイート
開発者向けのクラスライブラリ： SDK（Software Development Kit）
＋
デザインツール： Designer/各種Editor
標準的なGUI を補強するビジュアルコンポーネント
単なる入力フォームではない…
トポロジー/フロー図、スケジュール、地図、グラフなど
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViewsの特徴
GUI要求の厳しいアプリケーションの為の設計
高いカスタマイズ能力
– 描画のカスタマイズを可能にするカスケード･スタイル･シート（CSS)
– 高度なカスタマイズを可能にする包括的なSDK（ソフトウェア開発キット）
– グラフィックス開発よりも、ビジネス･エンティティに集中
ハイスペックな課題に対応
– 最適化されたデータ構造とリフレッシュ･メカニズム
– 大量データに対応するタイリングとロードオンデマンド
多様な実行環境
– Javaリッチクライアント(JavaアプリケーションとJavaアプレット)
• Eclipseプラグイン化することも可能
– Ajax Webインターフェース
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViewsの提供する価値
エンドユーザの生産性向上
– 複雑さと変更を解りやすく管理するグラフィカルな表現と編
集機能を備えたモデリング・ツールの実現
– より良く、素早い意思決定を可能とする、グラフィカルな監視
／分析ツールの実現
– エンドユーザの学習速度が高い直感的なアプリケーションの
操作性
ビジネスの差別化
– 優れたユーザ・エクスペリエンス
– ユーザと顧客に対する自社の付加価値
アプリケーション開発の効率化
– 開発と保守コストを最大80％まで削減
– 開発者はGUIより、業務の中核ロジックに集中
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViews 製品群の構成
さまざまなグラフィクス開発のためのコンポーネント群
Diagrammer
Gantt
Maps
Charts
Dojo
Diagrammer
JTGO
Maps for Defense
Enterprise
注： Dojo Diagrammerは、単体製品として提供されていません。
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViews Diagrammer
操作可能なダイアグラムなどを表現
ダイアグラム
– ノードとリンクを表現可能
– 自動レイアウト・アルゴリズムを搭載
– 専用Designer
ダッシュボード
– Symbol Editor
• カスタム・シンボルを作成
– Dashboard Editor
• カスタム・シンボルなどを配置して画面部品を
作成
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViews Gantt
時間軸上のタスク／リソースの
スケジュール表現
ガントチャート
– ガントチャート
– スケジュールチャート
– 負荷積上げチャート
– 専用Designer
• 簡単プロトタイピング
– SDK
• 詳細な要件に対応可能なライブラリー
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViews Maps
地図対応アプリケーション
– GISシステムの構築
– 各種投影図法への対応
地図機能
– Map Builder
– ベクターおよびラスタの地図と業務シンボ
ルの表示
– 地図フォーマットリーダー
Shapefile,DTED,
CADRG,MID/MIF,Image
– ロード・オン・デマンド
– ラベル再配置機能
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG JViews Charts
高性能チャートを表示
チャートの作成
– 幅広い種類のチャートを作成
点、線、バー、バブル、
ロウソク足、ハイ＆ロー、
レーダー、パイ、極座標、
ツリーチャート、etc.
– ユーザー要件に合わせたカスタマイズ
– 高パフォーマンス
専用Designer
– 素早い構築が可能
© 2012 IBM Corporation / © 2012 ISE Corporation
IBM ILOG Dojo Diagrammer
Dojoで各種ダイアグラムを表示
– Dojoは高機能なAjaxライブラリー
– Webブラウザーのみで表示可能
– 操作可能なダイアグラム
– 最適な自動レイアウト
利用形態
– 産業施設の監視
• 電話通信網監視、電力網監視
– エンタープライズ・ビジネス
• BPM、BAM、BPM モデリングツール、
デシジョン・ツリー、PERT図
– エンタープライズ・ダッシュボード
• 組織図、BPモニタリング
– ソフトウェア・マネージメント
• UML図
– インダストリアル・エンジニアリング
• 各種プロセス図、
セマンティック・デザイン・ダイアグラム
注： Dojo Diagrammerは、単体製品として提供されていません。
© 2012 IBM Corporation / © 2012 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内にある実行ライブラリー
– 以下の中から使用するILOG JViews製品の実行時ライセンスが必要。ユーザー数
もしくはCPU能力単位
•
•
•
•
ILOG
ILOG
ILOG
ILOG
JViews Diagrammer V8.8
JViews Gantt V8.8
JViews Maps V8.8
JViews Charts V8.8
– Ajax/JSFタイプのアプリケーションを稼働させる場合は、Webアプリサーバーが必要
© 2012 IBM Corporation / © 2012 ISE Corporation
ILOG JViews 開発フロー概要
実行タイプ
デザインツール
専用のGUIツールを使用
して、各パーツのデザイ
ンを行う
ケースによっては、デザ
インツールだけでほぼ作
成する事も可能
スタート
Javaアプリケーション
クライアント上で直接実行す
るJavaアプリケーション
Javaアプレット
各パーツの高度なカスタマイ
ズ、パーツを使用して画面全
体を作成する作業を実施
ブラウザー内のJVMで実行す
るJavaアプレット
SDK
SDKのみで、開発
する事も可能
Java開発ツールでSDK
を使用してコーディングを
行う
Ajax/JSF
ブラウザーのJavaScriptで実
行するWebアプリケーション
EclipseやRAD等を使用して開発
© 2012 IBM Corporation / © 2012 ISE Corporation
デザインツール
Designer
– 各製品のコンポーネントを使用して画面を作成
するためのツール
– Designerは、各製品で機能が違う
その他ツール
– 各製品で使用する小さなパーツ等を作成する
ためのツール
Diagrammer
Designer
Dashboard
Editor
Symbol
Editor
Symbol
Compiler
Diagrammer Designer
Gantt
Designer
Charts
Maps
Designer
Map
Builder
Designer
Symbol
Editor
© 2012 IBM Corporation / © 2012 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）
表示するための
画像をライブラ
リーがサーバーで
生成して送信する
データ
© 2012 IBM Corporation / © 2012 ISE Corporation
2章 ILOG JViews Gantt アプリ開発概要
© 2012 IBM Corporation / © 2012 ISE Corporation
Ganttアプリ開発フロー
実行アプリ内に
組み込むコー
ディングは必要
デザインツール
実行タイプ
Javaアプリケーション
１．Designer
スタート
Javaアプレット
SDK
２．開発ツール
Ajax/JSF
注： Javaアプリケーション／アプレットと
Ajax/JSFでは描画用のAPIが違い、機能
に違いがあります。Ajax/JSFの方が描画
機能が少なくなっています。
© 2012 IBM Corporation / © 2012 ISE Corporation
開発で生成するファイル
cssファイル
ガント・チャート及び表のスタイル定義が保存されている
igprファイル
jarファイル
プロジェクト情報を格納
もしくは
xmlファイル
ガント・チャートのデータ・ソースとなるSDXL形式XMLファイル
データ・モデルとして「JDBC」を選択した場合はigprファイルに
アクセス情報が保存される
Designer
earファイル
開発ツール
（Eclipseなど）
Gantt SDK
Java API
表示するGanttチャートを作成
画面全体とGanttチャート部分
以外の部分を作成。
動的なデータ構造にする場合
は、データモデルも作成
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer （for Gantt）ースタイル編集モード
Ganttチャートのスタイル・ルールを編集するモード
メニュー
スタイル・ルール
サンプル表示
変更可能な表示
スタイルの項目
設定内容を反
映したサンプ
ルのGantt
チャートを表示
モード選択
スタイリング・
カスタマイザー
選択されたスタ
イル項目の設定
内容
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer （for Gantt）ー Gantt 編集モード
Ganttチャートのデータ・モデルを編集するモード
Ganttチャート表示
この画面でデータ項目の
追加、変更、インデント、
制約などの編集を行う
画面
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer （for Gantt）ープレビュー・モード
Ganttチャートのプレビューを実行するモード
プレビュー画面
設定した項目が正しく動
作するか確認する画面
© 2012 IBM Corporation / © 2012 ISE Corporation
開発ツールでのコーディング
アプリケーションの最終的なコーディング
– 画面全体とGanttチャート以外の部分を作成。Ganttチャートの高度なカスタマイズが必要な
場合は、APIを使用してコーディングを行う
– 動的なデータ構造にする場合は、データモデルも作成
使用可能な開発ツール
– EclipseやRAD（Rational Application Developer）などのJava開発ツール
実施する作業
– Javaアプリケーション／Javaアプレット
• Designerで作成したGanttチャートをそのまま稼働させる場合は、Gantt Beansにigprファ
イルを指定する事で稼働可能
• Java Swing APIとGanttのAPIを使用して、画面の最終的なコーディングを行う
– Ajax/JSF
• Ganttが提供するJSFのタグライブラリーを使用してダイアグラムの表示部分をコーディ
ングする。ダイアグラム以外の部分やダイアグラムとの連携は、Dojoなどを使用して
JavaScriptのコーディングを行う
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Ganttにおけるガント・チャートの構成要素
JViews Ganttで作成されるガントチャートは以下４種の構成要素の相互関係を表とガント・シートで表現する
– これらの値はデータ・ソースとしてJViews Ganttに与える必要がある
アクティビティー（Activities）
– 期間内（開始と終了（共に予定）日時を持つ）になされるべき個々のタスク
– 一つのガント・チャート内には複数のアクティビティーが定義される
– アクティビティーは親子関係を持つ（階層構造）
• 例：設計アクティビティーは外部設計、内部設計、詳細設計アクティビティーがある
リソース（Resources）
– アクティビティーを実行するのに必要なリソース
• 人員であったり道具であったりする
– アクティビティー同様親子関係を持つ（階層構造）
• 例：「営業部」リソース以下に「山田太郎」、「田中一郎」がいる
制約（Constraints）
– あるアクティビティーの開始や終了が他のアクティビティーの開始や終了に与える制約
– 制約を与えるアクティビティーと受けるアクティビティーの開始/終了の組み合わせより４種存在
• START-START, START-END, END-START, END-END
予約（Reservations）
– リソースとアクティビティー間の紐付け情報
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Ganttのデータ要件
Ganttで作成するガント・チャートには、４つのカテゴ
リーにそれぞれ右表のデータが必要。
４カテゴリーの全てを定義しなくても、いずれか一つ
以上のカテゴリーのデータがあれば、プロジェクトフ
ァイル自体の作成は可能。ただし、作成するカテゴリ
ー内のカラムは右表に記述したもの全てが必要。
– 実際には少なくともアクティビティーが定義され
ていないと意味をなさない。
データソース（次ページ参照）がXMLの場合は親子
関係をIDではなくタグの包含関係で表現。
この他、４カテゴリーのいずれでも任意の属性を追加
し、以下の用途で使用することが可能。
– Designerのスタイル・ルール
– SDKでコーディングするアプリケーション
属性名
説明
アクティビティー
id
アクティビティーを識別するためのキー
name
アクティビティーの内容を表す名前、説明
parentID
親アクティビティーのID
startTime
アクティビティーの開始日時
endTime
アクティビティーの終了日時
リソース
id
リソースを識別するためのキー
name
リソースを表す名前
parentID
親リソースのID
quantity
リソースの数量/人数
制約
constraintType
制約の４種いずれかを指定
fromActivityID
制約を与えるアクティビティーのID
toActivityID
制約を受けるアクティビティーのID
予約
activityID
リソースを割り当てるアクティビティーのID
resourceID
アクティビティーに割り当てるリソースのID
© 2012 IBM Corporation / © 2012 ISE Corporation
データソースの種類
Designerで利用できるデータソースの種類
– RDB上のデータ(JDBC) ： JDBCドライバーは別途用意する必要あり
– 以下のMicrosoftのOfficeアプリケーション
• MS Excel (.xls)
• MS Access (.mdb)
• MS Project (.mpd)
– XMLファイル（Schedule Data eXchange Language (SDXL) 準拠）
＊次ページ参照
– フラットファイル(CSV)
– Designer 上で手動入力で作成することも可能
製品で各種のデータソースのサンプルが提供されている。
これらのデータソースの中に、前ページ「データ要件」に記載したデータが存在している必要がある。
データ要件のカテゴリごとに異なるデータソース上のデータを用いることも可能。
注意：RDB接続時のIDとパスワードはプロジェクト（igpr）ファイルに、平文のまま保存されるので扱
いに注意が必要
© 2012 IBM Corporation / © 2012 ISE Corporation
SDXL（Schedule Data eXchange Language）について

JViews Ganttでスケジュール・データを記述するためのXML形式のデータ・フォーマット
Ganttアプリケーションからのデータの読み取りだけでなく、書き込みが可能
データのマッピング情報をファイル中に保持（例：「アクティビティーのID」は「X12」等）
専用reader/writerクラスがあり、designerを使わない場合でもデータアクセスが容易
例：SDXLにおける「リソース」の記述
<resources>
<resource id="JCOM" name="A JCompany Employees" quantity="1.0">
<resource id="MKT" name="Marketing" quantity="1.0">
<resource id="BM" name="Bill McDonald" quantity="1.0" />
<resource id="SJ" name="Steve Knoll" quantity="1.0" />
</resource>
<resource id="RnD" name="Research and Development" quantity="1.0">
<resource id="LT" name="Linus Dane" quantity="1.0" />
<resource id="JG" name="James Hook" quantity="1.0" />
</resource>
</resource>
</resources>
データは各タグ中の属性値として記載。親子関係はXMLタグの包含関係にて表現。「アクティビティー」でも同様。
詳細は、下記Infocenterを参照。
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Documentation
/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3313.html
© 2012 IBM Corporation / © 2012 ISE Corporation
データ型の指定
以下のデータに関しては、データソースによっては型が指定されており、準拠したデータを用意する
必要がある。
– アクティビティーのstartTime/endTime
• JDBC： java.sql.Calendar
• Excel：
> 日付のみの場合：日付 *2012/3/14 (日本語ロケールの場合)
> 時刻も表示する場合：日付 *2012/3/14 1:30 PM (日本語ロケールの場合)
• CSV：
> 日付のみの場合：2012/3/14
> 時刻も表示する場合：2012/3/14 10:00 AM
> 任意の形式を指定する場合：”HH:mm:ss MM/dd/yyyy, 10:00:00 10/25/2011” （例）
– 制約のConstraintType
• 以下４種類の制約タイプに対するマッピングが必要（=マッピング列挙）
> START_START
> START_END
> END_START
> END_END
マッピングの例⇒”ConstraintTypeのカラムのデータ「1」をSTART_STARTに対応付け”
© 2012 IBM Corporation / © 2012 ISE Corporation
Designerで作成できるガント・チャートの種類
アクティビティー指向のガントチャート
– アクティビティー毎の開始・終了日時の関係を全体的に見るためのチャート
– タスク全体の進行状況を管理するために使用される
リソース指向のガントチャート（=スケジュール・チャート）
– 各リソースの使用状況のスケジュールを見るためのチャート
– 各日時毎にどのリソースがどのアクティビティーのために使用されるか（空いているか）を確認することができ
る
© 2012 IBM Corporation / © 2012 ISE Corporation
アクティビティー指向のガントチャートの構成要素
※メニューバーはカスタム開発が必要なオプション
© 2012 IBM Corporation / © 2012 ISE Corporation
リソース指向のガントチャートの構成要素
※メニューバーはカスタム開発が必要なオプション
© 2012 IBM Corporation / © 2012 ISE Corporation
3章 Designerを使用した開発
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews GanttのDesignerとは
ILOG JViews GanttチャートのGUIの開発ツール
– ウィザード及びGUI操作による容易な開発を支援
Ganttアプリケーションにおける以下の部分を作成することが可能
– データの定義
• データソースとドライバーの定義
• 取得データのGantt要素へのマッピング
– スタイルの定義
• 静的なスタイル
> 一般的なスタイルシートの項目
> アクティビティー・バーの画像
• スタイル・ルール
> ある条件を満たした要素に対するスタイルの変更
上記以外の開発は不可
– アプリケーションの機能の拡張
• 例：右クリックメニューの追加
© 2012 IBM Corporation / © 2012 ISE Corporation
Designerの価値
開発の高速・省力化
– あらかじめ用意されたテンプレートが利用可能
– データソース定義
• データ・ソースをコーディングレスで指定可能
• データ・ソースへのアクセス情報などを設定ファイルで保存しておける
– スタイルの変更
• 変更の影響を確認しながら、動的に変更可能
• CSSの知識不要
Designer活用の例
– データが既にあれば即ガント・チャートとして可視化、アプリケーションの見た目を確認できる
– テスト・データを準備して、スタイルやスタイル・ルールをGUIベースで詳細に作り込める
© 2012 IBM Corporation / © 2012 ISE Corporation
新規ウィザードの説明について
ガント・チャートの元データは自由に選択可能だが、この資料の新規ウィザードの説明ではDB2上
に以下の形式で保存されていることを前提として説明する。
gantt.harborのサンプル
次ページから下記データのGanttチャートを作成
する手順を説明。
扱うデータのテーブル定義
CREATE TABLE gantt.harbor (
Dock VARCHAR(32) NOT NULL,
ActivityName VARCHAR(32) NOT NULL,
ActivityID VARCHAR(32) NOT NULL,
StartTime TIMESTAMP NOT NULL,
EndTime TIMESTAMP NOT NULL
);
CREATE TABLE gantt.constraints (
FROM_ACTIVITY_ID VARCHAR(32) NOT NULL,
gantt.constraintsのサンプル
TO_ACTIVITY_ID VARCHAR(32) NOT NULL,
TYPE_PROPERTY VARCHAR(1) NOT NULL
);
© 2012 IBM Corporation / © 2012 ISE Corporation
①新規作成ウィザード開始画面
Designer起動時や、メニューから「ファイル」 > 「ウィザードを基に新規作成」を選択すると、以下のようなダイアロ
グが表示される
– 「テンプレートから開始」では、データ・ソースとスタイルの組を既存テンプレートとして選択可能
• テンプレート選択後、すぐに「終了」をクリックすると、各テンプレートに応じたデータ・ソース、スタイルの
組み合わせでチャートが作成される
• 「次へ」をクリックすると、データ・ソースやスタイルを変更できる。この場合、選択可能なテーマ（詳細は
後述）が、テンプレートのスタイルに影響を受ける
– 「基本要素から開始」では、データ・ソース、スタイルを一から選択する
今回は「基本要素から開始」を選択し、「次へ」をクリック
© 2012 IBM Corporation / © 2012 ISE Corporation
②データ･ソースの種類を選択
「データ・ソースの種類を選択」で読み込むデータ形式を選択
– ここではデータベース（JDBC）を選択し、「次へ」をクリック
© 2012 IBM Corporation / © 2012 ISE Corporation
③新規ドライバーの登録（DB2のJDBCドライバーを使用する場合）
※組み込みのドライバー（Excel用など）を利用する場合は新規ドライバーの登録は不要

「新規ドライバー」ボタンをクリックすると、「新規ドライバー」ダイアログが表示される。
「ドライバー・アーカイブ・ファイル」には、DB2 JDBCドライバーがあるディレクトリー内のdb2jcc4.jarを指定。
「ドライバー･クラス名」は入力欄の右側にあるボタンを押すと自動入力される。
「OK」をクリック。
© 2012 IBM Corporation / © 2012 ISE Corporation
④新規データ・ソース構成の作成
「新規作成」ボタンから「新規作成」ポップアップ・ウィンドウを開き、任意の構成名を入力。
– このとき選択されていた構成を元に、新規に構成が作成される。
© 2012 IBM Corporation / © 2012 ISE Corporation
⑤データ・ソース構成の編集
各データの抽出方法を定義する
– 「データベースURL」には「jdbc:db2://<IPアドレス>:<ポート番号>/<DB名>」を指定
– 「ユーザー」、「パスワード」には接続ユーザーの情報を入力
• 上記2つの情報は、右側の「次の接続パラメーターを他のモデルにコピーします」ボタンで
他のモデルへコピー可能
– 「照会」にデータ抽出用のクエリーを入力（文法は扱うDBの形式に依存）
• 必須パラメータのParentID, Quantityが元データに無いので、定数列を作成している
アクティビティー
select ActivityID as ID, ActivityName, StartTime,
EndTime, cast(null as char) as ParentID, Arrival,
Demurrage from gantt.harbor
リソース
select Dock as ID, '1' as Quantity, cast(null as char)
as ParentID from gantt.harbor group by Dock
制約
select FROM_ACTIVITY_ID, TO_ACTIVITY_ID,
TYPE_PROPERTY from gantt.constraints
予約
select ActivityID, Dock from gantt.harbor
© 2012 IBM Corporation / © 2012 ISE Corporation
⑥マッピングの定義
「表とガント・チャート・モデル間のマッピングを定義」では、ガント・チャートで用いるプロパティーと、
データ・ソースから得られた各データの列を対応付ける
– 左のプロパティー一覧から各プロパティーを選択し（左図）、下段の列から、そのプロパティーに
割り当てる列を選択する（右図）
– 必須プロパティーが適切に対応付けられていない場合は警告マークが表示され、全ての必須
プロパティーを設定し終わると、「次へ」をクリックできるようになる
© 2012 IBM Corporation / © 2012 ISE Corporation
補足：マッピングの制約定義
ガント・チャートでアクティビティー間の制約を扱う場合
– 元データの値をそれぞれどの種類の制約として扱うかを設定する必要がある
– ここで設定した対応付けは、igprファイルへと保存される
元データの0をEnd-Endに、
1をEnd-Startに…と設定する
© 2012 IBM Corporation / © 2012 ISE Corporation
⑦チャート･タイプの選択
「チャート・タイプの選択」では、ガント･チャートの形式を「アクティビティー指向のガント・チャート」・「
リソース指向のガント・チャート」から選択できる
今回は「アクティビティー指向のガント・チャート」を選択し、「次へ」をクリック
リソース指向を選択した場合
© 2012 IBM Corporation / © 2012 ISE Corporation
⑧テーマの選択
ガント・チャート全体の外観（色やフォント）のベースとなるスタイル・シートを選択
– 各ガント・チャートの詳細なスタイルは、ウィザード終了後にDesignerで編集可能
チャート・タイプによって、それぞれ以下のテーマが選択可能
– 今回は「デフォルト」を選択し、「終了」をクリック
アクティビティー・ベースで選択可能
リソース・ベースで選択可能
アクティビティー・ベースの
ガント・チャート用の
デフォルトのテーマ
緑のテーマ
リソース・ベースの
ガント・チャート用の
デフォルトのテーマ
標準的な見た目のテーマ
デフォルト
輸送計画の表現
緑のテーマ
デフォルト
© 2012 IBM Corporation / © 2012 ISE Corporation
⑨作成したガント・チャートの保存
ガント・チャートの作成は以上で完了。
– 名前を付けて保存し、保存されたプロジェクトファイルからガント・チャートを開けることを確認。
– 今回はJDBCを元に作成したため、igprファイルとcssファイルだけが作成される。
– データはデータ・ソースの構成を元に、Designer起動のたびにDBから読み込まれる。
© 2012 IBM Corporation / © 2012 ISE Corporation
Designerの３つのモード
スタイル編集モード
– 外観を編集するためのモード
– Designerが生成するCSSファイルに変更内容が反映される
編集モード
– データを編集するためのモード
– データ・ソースにJDBC（Microsoft Officeファイル含む）を使用している場合は変更不可
– 新規アクティビティーやリソースの追加、親子関係の変更等が可能
プレビュー・モード
– 編集したデータとスタイル及び動的な効果が実際にどのように表示されるかをプレビューする
編集モードのメニュー
アクティビティー指向のチャートリソース指向のチャート
Designerの左上部のアイコンもしくは
「表示→モード」からモードを変更
＊表示される画面はP23−P25を参照
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer上でのデータの変更
以下のデータソースでは、Designer上で「編集モード」にてデータの変更が可能
– XMLファイル(SDXL) （Designer上で手入力したデータ含む）
– フラットファイル(CSV)
データ・モデルのテーブル・ビュー領域を直接編集
もしくはガント・シート領域でドラッグして日時を変更
CSVのデータソースは、Designer上でデータを変更した瞬間、SDXL形式のXMLファイルとして書き
出される。以降、データソースとしてはこのXMLファイルから読み取られる。
データベース及びMS Officeファイルに対しては専用のドライバーが用意されており、プロジェクトの
新規作成時及び読み込み時にDesigner上にデータが読み込まれて表現される。このタイプのデータ
ソースでは、Designerでデータを更新することができない。
© 2012 IBM Corporation / © 2012 ISE Corporation
新規プロパティーとユーザー定義タイプの追加
Designerの画面で、元のデータソースにはない新たなデータを特定の行単位で追加可能
– ガントチャートの外観をデータの内容によって変更するスタイル・ルールの判別に利用する
– 以下２種類の方法があり、共に「編集」モード（）時の「データ・プロパティー・シート」より行う
新規プロパティー
– プロパティーの名前と値を自由に設定できる
– 値は文字列以外にも数字なども指定可能
「新規プロパティー」からプロパティー名を指定後、値を入力する
ユーザー定義タイプ
– tagsプロパティーとして１つ以上の値を設定できる
– 複数の値はカンマ区切りで指定し、スタイル・ルールにてフラグ的な使い方をする
「ユーザー定義タイプの設定」から値を入力すると、tagsとして反映される
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews GanttにおけるDesignerとデータソース、及びマッピングの関係
データのマッピング
– Designerを利用するとGUIのウィザードでマッピングを設定できる
– CSV及びウィザードでの手入力は自動的にSDXLが作成される
データマッピング情報自体をsdxl中に保持
データ更新も可能
Ganttアプリ
ケーション
SDXL
Designer成果物
igpr
手入力
JDBC
ドライバー
専用ドライバでデータにアクセス
データの更新は不可
DB
データソース
csv
MS Office
ファイル
Designer利用
SDXLを利用
（CSV及びウィザードでの手入力含む）
JDBCを利用
（Microsoft Officeフォーマット含む）
使用する
igpr中では、sdxlファイルをポイントする
データマッピングはigpr中に記載される
使用しない
データのマッピングはSDXL中に記載
どのカラムをどう解釈するか、をコーディングす
る
© 2012 IBM Corporation / © 2012 ISE Corporation
Designerにおけるスタイルの変更
Designerはガントチャートの見た目をGUIで簡単に定義可能
この見た目の定義を「スタイル・ルール」と呼ぶ
– GUIで定義した変更はJava用CSS形式でCSSファイルに保存される。CSSファイルは
Designerの主成果物であるigprファイルから参照される
GUI上でスタイルを変更
Designer
スタイルの定義はcssに書き出される
Designer成果物
igpr
css
スタイルの変更
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイルの領域

Designerでは、スタイル変更時の操作対象を以下６つの「領域」に分割、
① チャートの一般プロパティー
② ガント・シート
③ 表
④ 時間スケール
⑤ 水平グリッド
⑥ 垂直グリッド
この他、データであるガント・シート内のアクティビティー（またはリソース）と制約にはより柔軟にスタイル定義が可能（後述）
スタイル変更作業時には、上記６領域のいずれか「スタイル・ルール」の「オプション」以下からまず選択する
①一般プロパティー（チャート全体）
③表
④時間スケール
データに対するスタイルは
別途定義できる
⑤垂直グリッド
⑥垂直グリッド
②ガント・シート
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイルの領域にて変更可能な項目
表示有無に関する項目（チャートの一般プロパティー）
– ガント・シート
–表
– 時間スケールの開始／終了日時
– スクロールバー
例：シート部分のみ表示に変更↓
変更例
一般的なスタイル項目
– 表・グリッドの線種、太さ、色、マージン（余白）
– 全てのフォントの種類、色、大きさ
– 時間スケール／シート／表の背景色
時間スケールの背景色、フォント、文字色、
水平/垂直グリッドの色、週末の表示色
奇数行と偶数行の色分け
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイルの編集
領域の選択
– スタイル変更モードとする
– スタイル・ルールのオプション、あるいはGantt表示領域を直接クリックして６つの領域から編
集対象の領域を選択する
編集の実施
– 選択した領域における変更可能項目に関して、「スタイリング・プロパティー」及び「スタイリン
グ・カスタマイザー」を利用して変更を実施する（次ページ）
←「スタイル・編集」のモードとする
「スタイリング・プロパティー」及び「スタイリング・カスタマイザー」
を表示させておく（デフォルト）
ガント・シートを選択した状態
「スタイル・ルール」の「オプション」以下から、あるいは対象領域を直接クリック
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイリング・カスタマイザーとスタイリング・プロパティー
共にGUIベースで選択した対象領域内のスタイル要素を変更するためのツール。これらの変更結
果が成果物のCSSに反映される。どちらを使ってもよい
スタイリング・カスタマイザー
– スタイル要素のカテゴリ別にタブやグループ分けされている
マークをクリックして縦（▲）にすることで、デ
フォルト値（あるいは上位からの継承値（後述の
階層スタイル・ルールの場合））に上書きされる
▲
スタイリング・プロパティー
– 表形式でスタイル要素とその値が一覧されている
© 2012 IBM Corporation / © 2012 ISE Corporation
条件に応じたデータのスタイリング
Designerではガント・シートにおけるデータの表現であるアクティビティー（リソース・データ・チャートに
おいてはリソース）と制約のスタイルを以下の条件に応じて変更することができる
– アクティビティー（リソース）、制約に共通の条件
• アプリケーション上で選択されているかどうか
• ユーザー定義のものを含むデータのプロパティーの値に対する条件（大小やヌルでない等）
• ユーザー定義タイプに特定のフラグが指定されている（=tagsプロパティーの値（前述））
– アクティビティー（リソース）のみに指定可能な条件
• 親アクティビティーである（子アクティビティーを持つ）
• 子アクティビティーである（子アクティビティーを持たない）
• マイルストーンである（開始と終了日時が同一のアクティビティーである）
「スタイル・ルール」の作成、変更と言う場合には、
この条件に応じたデータのスタイリングのことを指す
スタイル・ルール
の追加/削除は不可
（無効化は可能）
※Designer中では「スタイル・ルール」ビューにまとめられているが、
「オプション」以下の６領域は条件指定のない静的なスタイルの定義で
あり、「スタイル・ルール」を作成/編集/追加できるのはデータ項目に対
してのみ（デフォルトではactivity及びその子ルールとconstraint）である
スタイル・ルール
の追加/削除が可能
© 2012 IBM Corporation / © 2012 ISE Corporation
データのスタイリングにおいて変更できるポイント
「アクティビティー（もしくはリソース）」のバー
– レンダラーの選択
• レンダラー：アクティビティー／リソースのバーを表示するための１つ以上の要素の組み合わせ以下３種
類のグループから選択し、カスタマイズする
> 基本
» 要素の追加は不可能。
> 基本エレメント／コンプレックス
» 要素の追加が可能
• レンダラーを決定し、必要な要素の追加/削除を行った後、各要素のスタイルをカスタマイズする
このような「基本」レンダラーの場合、開始と終了のシンボルと中心の棒状部分を
独立にスタイリングできるが、それ以上の要素の追加は不可
例えば「基本エレメント」レンダラーならば必要に応じて要素が追加できる。
ユーザーが用意した画像ファイルの追加も可能
個々の「要素」のスタイルはそれぞれカスタマイズできる
（カスタマイズ可能項目は色や画像パターン、表示間隔
など要素によりさまざま）
例：進捗度の表現を追加（元データにcompletionフィールドが必要）
「制約」の線
– アクティビティーを結合する線の色や太さ、矢印の大きさや形状が選択できる
「ツールチップ・テキスト」（これらのバーや線にマウスオーバーでポップアップするテキスト）の追加も可能
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイル・ルールの階層構造と親子関係
スタイル・ルールはいくつでも作ることができるが、複数の条件に合致する対象の外観を決定する
ため、ツリー構造の親子関係を形成する
この親子関係は「スタイル・ルール」ウィンドウ内で表現される
あるスタイル・ルールが適用される際に関連する上位のスタイル・ルールは青丸アイコン（）がつく
ある対象が複数のルールに合致する場合に、その外観を決定する各スタイル要素の値に何が採
用されるか、は下位のルールで定義された値が優先され、特にそのルールで指定しなかったもの
は上位から継承される
各ルールに適用されるスタイル要素の値は、「スタイル・ルール」ウィンドウ内で対象のルールを選
択し、スタイリング・カスタマイザーやスタイリング・プロパティーにて指定する
スタイル・ルールを利用する際には上記の法則を理解して、ツリーの中の正しい位置にルールを作
成する
※デフォルトではアクティビティーとその三つの子ルール（親アク
ティビティー用、子アクティビティ用、マイルストーン用）及び制約
用のスタイル・ルールがある
※このデフォルトのアクティビティー用のルールは必ず必要（ス
タイルの変更は可能だが、削除すると正しく表示できない）
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイル・ルールの作成(1/2)
1. 新規のスタイル・ルールの作成は、既存のルール・ツリーの中で適切な箇所を右クリックして「ス
タイル・ルールの作成」を選択
（※変更の場合も基本的に同じ）
2. 新たに作成するスタイル・ルールの条件を指定する
1. 「生成された名前」のチェックを外し、任意のルー
ル名をつける（オプション）
2. 「＋」アイコンをクリックし、判定条件を追加する
3. 選択された条件の対象の種類に応じて適切な
演算子がドロップダウンボックスに表示されるの
で選択する
4. 演算子の判別対象となる値を入力する
5. 以上の容量で必要なだけ条件を追加する
必要に応じてデータ内容を参照可
ルール名の指定
判別値の入力
判断対象データ
の選択
演算子選択
条件追加
© 2012 IBM Corporation / © 2012 ISE Corporation
スタイル・ルールの作成(2/2)
3. レンダラーの選択
上位ルールから継承させることも新しいレンダラー
を指定することもできる
4. 表示スタイルの設定
ルールが作成されたら、そのルールを選択し、適
用されるべきスタイルを、スタイリング・カスタ
マイザーやスタイリング・プロパティーで設定
する
© 2012 IBM Corporation / © 2012 ISE Corporation
Javaアプリケーション／アプレットへの組み込み
作成されたGanttチャートを実行するには、以下の作業を実施しJavaアプリケーションかJavaアプ
レット内に組み込む必要がある。（詳細は次ページから説明）
– ライセンスの宣言（必須の共通作業）
• JViews Ganttアプリを使用するに必要な使用宣言を行う
– Javaアプリケーションへの組み込み
• Javaアプリケーション（Java Swingアプリケーション）画面内にGanttチャートを組み込む
– Javaアプレットへの組み込み
• Javaアプレット画面内にGanttチャートを組み込む
– API による拡張
• 組み込んだGanttチャートをSDKを使用して拡張する
＊Webアプリケーションへの組み込みは5章を参照
© 2012 IBM Corporation / © 2012 ISE Corporation
ライセンスの宣言
ILOG JViews GanttのJava APIを呼び出す前に、必ず以下の宣言を行う
– アプリケーションの先頭で一度宣言すれば、再度記述する必要はない
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Gantt_Deployment);
上記宣言を行わないと、実行時に以下のようなエラーダイアログが表示される
Webアプリケーション（JSF/Ajax）では、直接Java APIで呼び出す代わりに「web.xml」を編集する
– 詳細は「5章 Webアプリケーション（Ajax/JSF）の開発」を参照
© 2012 IBM Corporation / © 2012 ISE Corporation
Javaアプリケーション／Javaアプレットへのigprファイルの取り込み
Gantt Beans（IlvGanttChart / IlvScheduleChart）を利用
– ガント・チャートのAPIをカプセル化（詳細は4章を参照）
– 各APIを個別に直接利用するのに比べて容易に実装可能
– データ・ソースやCSSを直接設定することも可能
// igprファイルのパスを指定
URL project = new File("./resources/myproject.igpr").toURI().toURL();
// Gantt Beanを生成してigprファイルをセット
IlvGanttChart chart = new IlvGanttChart();
アプリケーションの実行例
IlvTimeScale
chart.setProject(project);
// チャートの表示期間を自動調整
IlvGanttSheet sheet = chart.getGanttSheet();
sheet.setAutoFitToContents(true);
// フレーム（JFrameなど）にBeanを乗せる
frame.add(BorderLayout.CENTER, chart);
igprファイルを取り込む例
IlvJTable
IlvGanttSheet
© 2012 IBM Corporation / © 2012 ISE Corporation
HTMLファイルへのJavaアプレット記述方法
アプリケーション部分の記述方法はJavaアプリケーションの場合と同様
<object type="application/x-java-applet"
作成したクラス名
classid="java:my.GanttApplet.class"
archive="../GanttApplet.jar,../lib/jviews-fchart-all.jar,……"
使用しているJViewsライブラリの
JARファイルを列挙
width="500" height="500">ブラウザが対応していません</object>
アプレットの制限から、ローカル環境では実行ファイル（Appletとして実行するjarファイルやclassフ
ァイル）よりも上の階層にあるファイルにはアクセスできないことに注意
– Designerでの作成物やデータソースファイル、独自に作成したファイルなど
– ローカルでのサーバー起動、ファイルの配置変更などによって回避可能
アプレットの実行例
© 2012 IBM Corporation / © 2012 ISE Corporation
API による拡張
以下の様な項目をSDKを使用して後から拡張することが可能（詳細は4章を参照）
– データ・ソースの変更
• Designerによる作成時とは異なるデータ・ソースの指定
• 任意形式のデータをデータ・ソースとして読み込むための独自クラスの作成
• データの読み込みなどを工夫することで、オーバーヘッドを極小化
– スタイルシートの適用
• Designerによる作成時とは異なるスタイルシートの指定
– インタラクション（ユーザー操作への反応）の追加
• ズーム機能やスクロールする際のキーの変更
• ポップアップ・（右クリック）メニューの自作など
– 表示の変更
• 初期表示期間を1週間/1か月単位など用途に合わせて調整
• ガント・チャートや表の位置関係の変更
• 複数チャートの同時表示
© 2012 IBM Corporation / © 2012 ISE Corporation
4章 SDKを使用した開発
© 2012 IBM Corporation / © 2012 ISE Corporation
SDKによる開発が必要になる場面
基本的な考え方
– なるべくDesignerを利用して開発を効率化する
– Designerでは実現できない部分に対してSDKによる開発を行う
Designerで実現できない開発
– Designerプロジェクトファイルのアプリケーション化
• Designerで作成したものを、最終的にSwingのローカルアプリケーションやWebアプリケ
ーション化する作業
> DesignerはあくまでDesignerで編集できるigprファイルを作成するのみ
– 高度／複雑／特殊な要件
• カスタム・データモデルの利用
• リソース・データ・チャートやカレンダー・ビュー（71ページ参照）の開発
• グラフィックやインタラクションにおいて、Designerの機能でサポートされていない詳細／
高度なカスタマイズが必要な場合
• etc.
© 2012 IBM Corporation / © 2012 ISE Corporation
SDKによる開発の適用範囲
高度／複雑／特殊な要件の場合、及びJavaアプリケーション化
Designerで実現できない開発
CSS
スタイル
/スタイル・ルール
データモデル
CSV
SDXL
手入力
igpr
Swing、
アプリケーション化
Servlet等
DB
MS Office
ファイル
JDBC
高度／複雑／特殊な要件
カスタム・
データモデル
独自の動作の追加
リソース・データ・チャートの
開発
© 2012 IBM Corporation / © 2012 ISE Corporation
リソース・データ・チャートとカレンダー・ビュー
SDKでのみ開発可能
リソース・データ・チャート
横軸に時間、縦軸にリソースの利用量を表現するチャート
リソースに同時に割り当てられたアクティビティーの合計数を各リソースごとに表示する事が可能
各日時ごとにどのリソースがもっとも逼迫するか／余裕があるかを俯瞰するために使用する
カスタマイズにより、リソースのコストや利用可能なリソースなどを重ねて表示することもできる
リソース・データ・チャートの例
・各リソースごとに色分けした積み上げ
塗り潰し面で表示
カレンダー・ビュー
各月もしくは日のスケールで、アクティビ
ティーがどのように予定されているかを確
認することができるビュー
月次カレンダー・ビューの例
日次カレンダー・ビューの例
※当ガイドではアクティビティー／リソース指向のチャートを扱って
いるため、これらのチャートの開発方法の詳細は、
Information Centerを参照の事。
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer成果物のアプリケーション化
Designerを利用して開発できる成果物はプロジェクトファイル(igpr)。Designerでのみ開ける形式
– Designerでは作成できないタイプのチャートも存在する。そのタイプのチャートは最初からSDK
で開発する必要がある。（リソース・データ・チャートとカレンダー・ビュー）
プロジェクトファイル(igpr)をアプリケーションとして利用するためには、以下の形式を選択
– Swing
• JFrame
• JApplet
– Eclipse RCP
– Webアプリケーション
• JSF
• Ajax
以降の説明ではSwingアプリケーションをモデルに実装方法をガイド
– Eclipse RCPアプリケーションはリッチ・クライアントのアプリケーションである。この実装方法に
ついては以下を参照
• http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content
/Visualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3
470.html
– Webアプリケーションについては５章で解説
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Ganttアプリケーションの画面表示
Designer上での画面と同じく以下の領域がアプリケーション化した時にデフォルトで表示される
– データの表示部分
– 時間スケール
– アクティビティーやリソースのバー表示部分
デフォルトでユーザーから以下の操作を受け付ける
– データ表示部分のツリー構造の展開、折りたたみ（データとチャートが連動して表示／非表示となる）
– 時間スケールの拡大、縮小
– データを変更した時のチャートの変化の観察（データ自身の手入力変更及び、バーのドラッグによる伸展）
この他画面領域を足したり、機能を追加する場合は、追加のコーディングが必要
– 例）メニューバーを作り、「新規アクティビティーの追加」ボタンを設置する
– 例）右クリックでアクティビティーのカスタムのプロパティー（ステータスなど）を変更できるようにする
データ表示部分
時間スケール表示部分
チャート部分
© 2012 IBM Corporation / © 2012 ISE Corporation
各チャート/ビューに対応するJavaBeanクラス
JViews Ganttではjava.awt.Componentを継承したJavaBeanクラスでガントチャートを実装する。
各チャートやビューに対応したJavaBeanのクラス
– IlvGanttChart ：アクティビティー指向のチャート（ガント・チャート）
– IlvScheduleChart ：リソース指向のチャート（スケジュール・チャート）
– IlvResourceDataChart ：リソース・データ・チャート
– IlvMonthView ：月次カレンダー・ビュー
– IlvDateView ：日次カレンダー・ビュー
JComponent
各チャートとクラスの対応関係
JPanel
IlvHierarchyChart
IlvMonthView
IlvScheduleDataChart
IlvDateView
IlvResouceDataChart
Designerで
作成できるチャート
IlvGanttChart
IlvScheduleChart
日次カレンダー・ビュー
月次カレンダー・ビュー
ガント・チャート
リソース・データ・チャート
スケジュール・チャート
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Ganttアプリケーション開発時の準備
SwingにおけるJFrameやJAppletを始めとした各種クラスの使用法を理解していることが前提。
http://java.sun.com/javase/ja/6/docs/ja/api/javax/swing/package-summary.html
必要なライブラリ（以下はJViews Gantt 8.8における例）
– Gantt用のみでなくJViews Frameworkのライブラリも必要とする。
– 最低限必要なjarファイル
• jviews-gantt88/lib/jviews-gantt.jar
• jviews-framework88/lib/jviews-framework.jar
• jviews-framework88/lib/external/icu4j-4_8.jar
– この他必要に応じてこれらと同じディレクトリにあるjarファイルも追加する。
ライセンスの受け入れ
– ３章で記載したように、JViews製品が提供するJavaライブラリを使用するためには、「ライセンスを保有して
いること」をコーディング内で宣言する必要がある。
– Ganttの場合は以下のような定数をIlvProductUtilクラスのメソッドで宣言する。
• IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Gantt_Deployment
);
• Webアプリケーションの場合はweb.xmlに記載する
• 詳細は以下を参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Doc
umentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_general_info3111.html
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer成果物を利用したSwing（JFrame）アプリケーション・コーディングの例
public class GanttSwing extends JFrame {
private static final long serialVersionUID = 1L;
JFrameを継承する
public GanttSwing() {
setDefaultCloseOperation(EXIT_ON_CLOSE);
（この例ではアクティビティー・指向のガント・チャートなので）
IlvGanttChart chart = new IlvGanttChart();
IlvGanttChartをインスタンス化する
try {
URL project = new URL("file:./resources/mytest.igpr");
IlvGanttChartインスタンスにDesigner成果物であるigprのURLを
chart.setProject(project);
セットしてやるだけ
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (IlvStylingException e) {
e.printStackTrace();
}
add(BorderLayout.CENTER, chart);
Componentとして配置
pack();
setVisible(true);
setTitle("My Gantt Chart");
}
最初にライセンス保持宣言をする
public static void main(String[] args) {
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Gantt_Deployment);
new GanttSwing();
}
}
© 2012 IBM Corporation / © 2012 ISE Corporation
Designer成果物を利用したSwing（JApplet）アプリケーション・コーディングの例
public class GanttApplet extends JApplet{
private static final long serialVersionUID = 1L;
public void init(){
IlvProductUtil.DeploymentLicenseRequired(IlvProductUtil.IBM_ILOG_JViews_Gantt_Deployment);
IlvGanttChart chart = new IlvGanttChart();
try {
URL project = new URL("http://hostname/mytest.igpr");
chart.setProject(project);
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (IlvStylingException e) {
e.printStackTrace();
}
add(chart, BorderLayout.CENTER);
}
© 2012 IBM Corporation / © 2012 ISE Corporation
データモデル
Designerを使用しない／できない場合は、データ・モデルをコーディングし、各チャート／ビューのインスタンスに紐
付ける
JViews Ganttにおけるデータモデルを表すインターフェースと実装クラスがある。
データモデルの要素としてアクティビティー／リソース／制約／予約に対応するインターフェース／クラスがある。
既存のデータ・モデルでは要件を満たせない場合は、抽象実装を拡張し、カスタムのデータ・モデルを用意する。
対象
インターフェ
ース
抽象実装
単純メモリー・
ベース
データモデル
IlvGanttMod
el
IlvAbstract
GanttModel
アクティビティ
ー
IlvActivity
リソース
デフォルト・メ
モリー・ベー
ス
Swingの
TableModel
JDBC
IlvDefaultGanttModel
IlvTableGan
ttModel
IlvJDBCGan
ttModel
IlvAbstractAc
tivity
IlvSimpleActi
vity
IlvGeneralAc
tivity
IlvTableActivity
IlvResource
IlvAbstractR
esource
IlvSimpleRes
ource
IlvGeneralRe
source
IlvTableResource
制約
IlvConstraint
IlvAbstractC
onstraint
IlvSimpleCon
straint
IlvGeneralCo
nstraint
IlvTableConstraint
予約
IlvReservatio
n
IlvAbstractR
eservation
IlvSimpleRes
ervation
IlvGeneralRe
servation
IlvTableReservation
© 2012 IBM Corporation / © 2012 ISE Corporation
データ・モデルのインターフェースとクラス
データ・モデルのクラスはアクティビティー／リソース／制約／予約の情報を保持/管理する。
IlvGanttModelインターフェースが各要素を保持／管理するためのメソッドを定義しており、
IlvAbstractGanttModelがその抽象実装。
実装クラスはデータ・ソースによって使い分ける。データをメモリ上で扱う場合や、SDXLファイルを
利用する場合はIlvDefaultGanttModelを、SwingのTableModelやcsvから読み込む場合は
IlvTableGanttModel、Microsoft Office系のファイルやデータベースから読み込む場合は
IlvJDBCGanttModelを使用する。
IlvGanttModel
IlvAbstractClass
Swing TableModel
csvファイル
メモリー・ベース
SDXL
IlvDefaultGanttModel
IlvTableGanttModel
MS Officeファイル
RDB
IlvJDBCGanttModel
© 2012 IBM Corporation / © 2012 ISE Corporation
メモリー・ベースのデータ・モデル
メモリー・ベースは、各モデルにコード内で直接データを与えるデータ・モデル。
メモリー・ベースのデータ・モデルには単純メモリー・ベースとデフォルト・メモリー・ベースの二種類
がある。
JViews Ganttデータ・モデルにおける必須属性（例えばアクティビティーなら、ID, 親ID, アクティビ
ティー名, 開始時刻, 終了時刻の５つのデータ）のみでデータ・モデルを構成する場合は「単純」、
これらにカスタムの属性を加えて使用したい場合は「デフォルト」を選択する。
単純メモリー・ベースの場合は「IlvSimple∼」クラス、デフォルト・メモリー・ベースの場合はその継
承クラスである「IlvGeneral∼」クラスを使用する。
例）メモリー・ベースのアクティビティーの実装クラス
単純メモリー・ベース
IlvSimpleActivity
デフォルト・メモリー
・ベース
IlvGeneralActivity
IDやNameのsetter/getterがある
上記に加え、独自プロパティを扱う
メソッドがある
•プロパティ名と値のsetter/getter
•プロパティ値変更があった場合のイベント実行
© 2012 IBM Corporation / © 2012 ISE Corporation
データ・モデルのチャートへの実装例（単純メモリー・ベース）
//チャートとデータ・モデルのインスタンスを取得
IlvGanttChart chart = new IlvGanttChart();
IlvGanttModel ganttModel = new IlvDefaultGanttModel();
//アクティビティーのインスタンスを作成（引数は名前やID、開始/終了Dateなど）
IlvActivity rootActivity = new IlvSimpleActivity(~);
IlvActivity leaf1Activity1 = new IlvSimpleActivity(~);
IlvActivity leaf1Activity2 = new IlvSimpleActivity(~);
//データ・モデルへの要素の読み込み
ganttModel.setRootActivity(rootActivity);
ganttModel.addActivity(leaf1Activity1,rootActivity,0);
ganttModel.addActivity(leaf1Activity2,rootActivity,1);
//チャートにデータ・モデルを設定
chart.setGanttModel(ganttModel);
© 2012 IBM Corporation / © 2012 ISE Corporation
データ・モデルにおける各種のデータ・ソースの利用
Designer同様既存の各種データ・ソース上のGantt用データの利用をコーディングすることができる。
SDXL
– メモリー・ベースのデータ・モデルを使用
– SDXLファイルからデータを読み込んだり、メモリー・ベースのデータをシリアライズしてSDXLファイルを更
新することが可能
– 専用のReader/Writerクラスを使用してデータ・モデルがSDXLファイルのDocumentオブジェクトの内容に
アクセスできるように関連付ける
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Docu
mentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3311.html
SwingのTableModelインスタンス及びCSV
– テーブルの内容やCSVの各列をデータ要素にマッピングする
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Docu
mentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3317.html
JDBC
– 一般的なJavaアプリケーション同様JDBCドライバやデータベースのURL、ユーザー名／パスワードを指定
してDBのConnectionを取得
– 所定の各データのパラメータ名に対するクエリーを記述
– クエリーの取得結果をGanttデータのパラメータ名にマッピングして、DB接続情報と共に
IlvJDBCGanttModelインスタンスに渡す
– 書き込み可能なテーブルに対してはGantt側から更新することも可能
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Docu
mentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3330.html
© 2012 IBM Corporation / © 2012 ISE Corporation
SDKにおけるJViews Ganttのスタイル
SDKにてデータ・モデルだけを規定してGanttチャート・アプリケーションを作成するとデフォルトの
スタイルが適用される
SDKを使用する場合、各要素のスタイルはCSSファイルまたは、Javaコードの双方でカスタマイズ
することができる
– スタイルをカスタマイズできる対象はDesignerを使用した時と同じである（リソース・データ・チャ
ートに関しては別途Infocenter参照）
– CSSファイルを使用する場合はIlvHierarchyChartやIlvScheduleDataChartオブジェクトの単
位でsetStyleSheet/setStyleSheets（複数の場合）メソッドでCSSファイルのURLを指定する
例）
IlvGanttChart chart = new IlvGanttChart();
chart.setStyleSheet("./resources/mytest.css");
– CSSファイル中でのセレクターをJavaオブジェクトやクラスに対応させる方法は以下を参照
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Vis
ualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3341.htm
l
– JavaコードとCSSで同じ対象をカスタマイズした場合は、コードの読み込み順で後で読み込ま
れる方のスタイルがオーバーライドされる
© 2012 IBM Corporation / © 2012 ISE Corporation
ガント／スケジュール・チャートのスタイル領域
Designerと同じく６つの「領域」に対応したBeanクラスがあり、CSSファイルがなくてもそれぞれのプロパティーに直
接値を指定することができる
① チャートの一般プロパティー：IlvGanttChart、IlvScheduleChart
② ガント・シート
：IlvGanttSheet
③ 表
：IlvJTable
④ 時間スケール
：IlvTimeScale
⑤ 水平グリッド
：IlvHorizontalGanttGrid
⑥ 垂直グリッド
：IlvWeekendGrid
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Documentatio
n/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3358.html
IlvJTable
IlvTimeScale
IlvGanttSheet
IlvHorizontalGanttGrid
IlvWeekendGrid
スタイルの指定例
IlvGanttChart chart = new IlvGanttChart();
IlvJTable table = chart.getTable();
table.setBackground(Color.yellow);
※~Gridの場合はIlvGanttSheetから取得する
© 2012 IBM Corporation / © 2012 ISE Corporation
アクティビティー／リソースや制約に対するスタイリング

データに対するスタイリングはJavaコーディングするのではなく、CSSファイルで記載する
（Javaコードでレンダラーオブジェクトをカスタマイズすることも可能）
– アクティビティー（リソース）を対象にしたルールはCSSのセレクタに以下のように記述
①ユーザー定義タイプ
（例）tagsプロパティーにcriticalが指定されている⇒ acitivity.critical
②規定の条件（CSS疑似クラスとなる）
（例）リーフ・アクティビティーである ⇒actiriby:leaf
③データのプロパティーの値に対する条件
（例）departmentがNullでない ⇒actiriby:[“department”]
（例）アクティビティー名にcustomerを含む⇒activity.[name~="customer"]
– 具体的な書き方はDesignerのウィザードで該当するルールを作って作成されるCSSの記載
を見るのが最も早い
–
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Vi
sualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_usrextsched3359.
html
© 2012 IBM Corporation / © 2012 ISE Corporation
本格的な開発を行うために
当ガイドで基本を理解したら、Information Centerに情報が豊富なので参照する
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/Content/Vis
ualization/Documentation/JViews/JViews_PPA/JViews_Enterprise/_pubskel/ps_programmers_doc32
91.html
JViews GanttのJava API
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.ilog.jviews.gantt.doc/html/refjava/
html/overview-summary.html
高度なカスタマイズは製品付属の豊富なサンプル・コードを参照
– <ILOG_ROOT>/jviews-gantt88/samples以下
SDKによる開発で、できることの例
– 独自のアクティビティー・レンダラーの作成
– 右クリックやツールバーによるアクション・メニューの追加
– クリティカル・パス分析
– 巨大データを扱う際のパフォーマンス向上のための部分読み込み（ロード・オンデマンド）
– 印刷用の成型
© 2012 IBM Corporation / © 2012 ISE Corporation
5章 Webアプリケーション（Ajax/JSF）の開発
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Webアプリケーションの概要
JSF アプリケーション、JavaScript（Ajax）アプリケーションの2種類のアプリケーションを作成可能
利点
– プラグインを追加することなくWebブラウザーに表示できる
– アプリケーションの更新が即座にすべてのユーザーへ反映される
– アプリケーションを集中管理できる
欠点
– ネットワークを介するため、ユーザーからの入力に対する応答が比較的遅くなる
– 大規模なユーザー基盤を扱うため、サーバーのスケーラビリティーが弱い
– オフラインでの利用が難しい
JViews JSF アプリケーションとJViews JavaScript（Ajax）アプリケーションの違い
– JViewsで実現できる機能についての差は無い。実現方法のみが違う
– JSFは内部でJavaScriptのライブラリーを利用している
– JSFの方が短時間で開発でき、コーディング量も少ない
– JViews Ganttでは、技術的な制約が無ければ、JSFを使うことを推奨する
JSFとJavaScriptの違いの詳細については以下のURLを参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic
/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Docu
mentation/JViews/JViews_PPA/JViews_Enterprise/_pubsk
el/ps_usrwebsched3761.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Webアプリケーションの動作イメージ
①ページを開くとJSアプリケーション、Ajaxライブラリーをダウンロード
②ユーザーの操作に応じて画面表示データ（画像）や追加情報（JSONデータ）をサーバーが生成
し、送信
ビジネス・ロジック
– クライアント側（JavaScript）でもサーバー側
（Java）ででも実装可能
JSFでアプリケーションを
作成する場合に記述
JSFアプリケーション
JavaScriptでアプリケーションを
作成する場合は直接記述
（JSFの場合も動作/表示をカスタ
マイズの際に必要に応じて記述
生成
JSアプリケーション
ページを開いたときに
ダウンロード
JSアプリケーション
ユーザーによる操作
（インタラクション）の情報
JViews
Ajax ライブラリー
ブラウザー
画像や追加情報など
画面操作や表示する
画像の要求はAjaxラ
イブラリーが行う
JViews
Ajax ライブラリー
JViewsの機能を拡張するクラス
やビジネス・ロジックなどを記述
Javaアプリケーション
JViews ライブラリー
（JSF）
Java EEサーバー
（JVM）
データ（DBや
プロジェクトファイルなど）
ユーザーからの操作情報などを元に
ビジネスロジックを実行し（※）、画像
や追加情報を生成して応答として返す。
クライアント側
サーバー側
送信される画像の例
（更新されたガント・チャートと表）
（※）ビジネス・ロジックの一部（プロパティの取得や変
更など）はJSアプリケーション側で実装することも可能
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews Gantt JSF Webアプリケーションの構成要素
以下の要素から構成される
タグ・ライブラリー（JSPタグのセット）
– サーバー側でコンテンツを生成／操作するためのJavaコードへ変換され、同時にク
ライアント側で表示やサーバーとの通信を行うためのJavaScriptを動的に生成する
– 主要なライブラリーの一覧（各URLはライブラリーの識別子としてのみ用いられる）
• JViews Core (http://www.ilog.com/jviews/tlds/jviews-faces.tld)
> JViews Webアプリケーションの基本ライブラリー
• JViews Framework (http://www.ilog.com/jviews/tlds/jviews-framework-faces.tld)
> ツール・チップや強調表示用のコンポーネント
• JViews Charts (http://www.ilog.com/jviews/tlds/jviews-charts-faces.tld)
> サーブレットによるラスター・イメージ生成やSVG
• JViews Gantt (http://www.ilog.com/jviews/tlds/jviews-gantt-faces.tld)
> ガント・チャートや専用のインタラクター
サーバー・サイド Java API（JSPタグから生成、動作のカスタマイズにも利用）
– クライアントからの要求（ユーザー入力の結果など）を受け取り、応答を返す
JavaScript ライブラリー（JSPタグから生成、動作のカスタマイズにも利用）
– サーバー・サイドへの要求、ブラウザーへの表示を行う
© 2012 IBM Corporation / © 2012 ISE Corporation
開発環境の準備
Rational Application Developerの場合は動的Webプロジェクトとして作成する
ライブラリーの構成
– 各プロジェクトのlibディレクトリーに、以下の .jar ファイルをコピーする。下記.jarファイルは、
JViews 製品導入ディレクトリーにある。
• .jarファイルがあるディレクトリー
> %JViews-root%¥jviews-framework88¥lib
> %JViews-root%¥jviews-gantt88¥lib
• ファイル
> jviews-framework-all.jar
> jviews-framework-all_ja.jar
> jviews-gantt-all.jar
> jviews-gantt-all_ja.jar
> jviews-jsf1-facelets-support.jar
> jviews-jsf2-facelets-support.jar
開発環境構成手順の詳細については以下のURLを参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic
/com.ibm.ilog.jviews.gantt.doc/Content/Visualization/Docu
mentation/JViews/JViews_PPA/JViews_Enterprise/_pubsk
el/ps_gantt_getstart_top3735.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発： web.xmlの編集
通常のJSF設定以外に、web.xmlに以下の要素を追加する
ライセンス宣言
<listener>
<listener-class>ilog.views.util.servlet.DeploymentLicenseRequired_for_IBM_ILOG_JViews_Gantt_Deployment</listenerclass>
–
</listener>
IlvFacesControllerサーブレットの宣言とそのマッピング
<context-param>
<param-name>ilog.views.faces.CONTROLLER_PATH</param-name>
<param-value>/_contr</param-value>
</context-param>
<servlet>
<servlet-name>Controller</servlet-name>
<servlet-class>ilog.views.faces.IlvFacesController</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Controller</servlet-name>
<url-pattern>/_contr/*</url-pattern>
</servlet-mapping>
web.xmlの全体の記述は下記URLやサンプルを参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.i
log.jviews.gantt.doc/Content/Visualization/Documentation/JViews/JVi
ews_PPA/JViews_Enterprise/_pubskel/ps_fw_getstart3742.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発：単純なガント・チャート・ビューの表示
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
JViews Gantt用に
名前空間を宣言
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://www.ilog.com/jviews/tlds/jviews-gantt-faces.tld" prefix="jvgf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Designerで作成したガント・チャートの表示</title>
</head>
必ずh:formコンポーネントで囲う
<body>
読み込むプロジェクトの
パスを指定
<f:view>
<h:form id="jviewsForm">
<jvgf:ganttView id="gantt“ data="/data/db2harbor.igpr“
style="width:800px;height:400px;" />
</h:form>
</f:view>
</body>
</html>
表示領域の大きさをstyle属性で指定
（width, height属性による指定も可）
インタラクションを指定していないため、
表示されたビューはユーザーによる操作に
基本的には反応しない（表の列幅の調整などは可能）
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発： ganttViewタグのカスタマイズ
プロジェクトファイルを介さずにデータ・ソースやCSSファイルを直接指定可能
– SDXL形式XMLファイルの指定
<jvgf:ganttView id="gantt" data="/data/data_source.xml" style="width:800px;height:400px;" />
– CSSファイルの直接指定
<jvgf:ganttView id="gantt" data="/data/data_source.xml"
styleSheets="data/gantt_style.css“ style="width:800px;height:400px;" />
表示方法やインターフェースの変更
<jvgf:ganttView id='gantt' data='/data/data_source.xml‘ imageFormat=“PNG”
resizable="true" sheetHScrollable="true" sheetVScrollable="true"
style="width:800px;height:250px" />
sheetVScrollableをtrueにすると、ガント・チャートが
垂直方向に広がったときにスクロールバーを表示
Webアプリケーションの開発時、ブラウザーのキャッシュが原因
となり、スタイルの更新などが即座に反映されないことがある。
その場合は各ブラウザのキャッシュを削除し、再度更新する。
その他設定可能な属性については、下記URLやサンプルを参照
sheetHScrollableをtrueにすると、
水平方向にスクロールバーを表示
resizableをtrueにすると、
右下をドラッグ&ドロップして
表示領域を調整できるようになる
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/co
m.ibm.ilog.jviews.gantt.doc/html/refjsf/html/jvgf/ganttView.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発：サーバーサイドの拡張
サーバーサイド拡張の例
– サンプルアプリケーションでガント・チャート表示期間変更のためにEditingBean、ユーザー操作への対応を
カスタマイズするためにGanttEditingServletという自作クラスを導入している例
サンプル（ガント・チャート編集）の例
JSPファイル
Javaファイル
<jvgf:ganttView id="gantt" chart="#{ganttBean.gantt}“
public class EditingBean {
自作のBeanからチャートを
取得するようにカスタマイズ
…
servlet="GanttEditingServlet">
public IlvGanttChart getGantt() {
…
faces-config.xml
<faces-config>
表示用のサーブレット自体も拡張可能
（IlvFacesGanttServletを継承、web.xmlに登録）
<managed-bean>
<description>The java bean that contains the logic of this sample</description>
<managed-bean-name>ganttBean</managed-bean-name>
<managed-bean-class>demo.editing.EditingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
…
faces-config.xml ファイルに
Managed Beanの情報を追加
サンプル（ガント・チャート編集）の全体像については下記URLを参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.il
og.jviews.gantt.doc/jviews-gantt88/samples/jsf-gantt-editing/index.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発： Beanによって提供される値のバインディング
ガント・データ・モデルをManaged Beanから取得する
<jvgf:ganttView id="gantt" data=“#{ganttBean.ganttModel}" style="width:800px;height:400px;" />
public class GanttBean {
…
<managed-bean>
public IlvGanttModel getGanttModel() {
<managed-bean-name>ganttBean</managed-bean-name>
…
<managed-bean-class>GanttBean</managed-bean-class>
return ganttModel;
<managed-bean-scope>session</managed-bean-scope>
}
</managed-bean>
データ・モデルを返すようにメソッドを作成
}
<faces-config …>
</faces-config>
faces-config.xml ファイルに
Managed Beanの情報を追加
IlvGanttChart コンポーネントをManaged Beanで直接作成することも可能
<jvgf:ganttView id="gantt" chart=“#{ganttBean.ganttChart}" style="width:800px;height:400px;" />
public IlvGanttChart getGanttChart() {
…
return ganttChart;
}
ガント・チャートを返すようにメソッドを作成
CSSの設定もManaged Beanから取得することが可能
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発：インタラクターの追加
インタラクターを追加することで、ガント・チャートを操作できるようになる
<h:form id="jviewsForm">
<jvgf:selectInteractor id="sheetSelect" />
インタラクターをガント・チャー
ト・ビューと同じformタグの中
に記載して、idを割り当てる
<jvgf:rowExpandCollapseInteractor id="tableExpand" />
<jvgf:ganttView id="gantt" data="/data/mytest.igpr" tableInteractorId="tableExpand"
sheetInteractorId="sheetSelect" style="width:800px;height:400px" />
</h:form>
表・シート部分それぞれに対して、
追加するインタラクターのidを記載する
rowExpandCollapseInteractorタグを使うと
（表の場合はアクティビティー名の左のパーツを）
クリックすることで展開・折りたたみが可能になる
sheetSelectInteractorタグを使うと
各アクティビティーの選択、ドラッグ&ド
ロップによる位置変更が可能になる
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発：インタラクターのカスタマイズ
各インタラクター同士の組み合わせやファセットによるカスタマイズを利用して、
ガント表やガント・シートに対するユーザー操作をより細かくカスタマイズすることが出来る。
選択インタラクターのカスタマイズ例
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://www.ilog.com/jviews/tlds/jviews-faces.tld" prefix="jv"%>
<%@ taglib uri="http://www.ilog.com/jviews/tlds/jviews-gantt-faces.tld" prefix="jvgf"%>
……
<h:form id="jviewsForm">
選択インタラクターと一緒に使うことで
アクティビティーの幅が変更可能になる。
<jvgf:selectInteractor id="sheetSelect" />
<jvgf:resizeActivityInteractor id="resizeInteractor" />
interactorGroupタグを使うと、表やシート
に複数のインタラクターの組を指定できる。
<jv:interactorGroup id="sheetGroup" interactors="sheetSelect resizeInteractor" />
<jvgf:rowExpandCollapseInteractor id="tableExpand" />
<jvgf:ganttView id="gantt" data="/data/mytest.igpr" tableInteractorId="tableExpand"
sheetInteractorId="sheetGroup" style="width:800px;height:400px">
<f:facet name="sheetSelectionManager">
<jvgf:selectionManager imageMode="false" />
選択インタラクターでは、選択の実行/表示方法を
「選択マネージャー・ファセット」により変更できる。
</f:facet>
</jvgf:ganttView>
</h:form>
選択インタラクターの「イメージ・モード（デフォルト）」を無効にする
と、負荷の小さい「通常モード」になる。
アクティビティーのプロパティーにアクセスするには、通常モードに
するか、プロパティー更新を強制するように設定する必要がある。
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発：クライアント側でユーザー操作に反応させるインタラクター
Hitmap技術を利用すると、サーバーとの通信を必要とせずにユーザー操作への反応が可能となる
ツールチップ・インタラクター、強調表示インタラクター、cursorChangeインタラクターなど
<h:form id="jviewsForm">
<jvf:highlightInteractor id="tableHighlight" color="#0000FF" />
<jvf:tooltipInteractor id="tableTooltip" />
<jv:cursorChangeInteractor id="tableCursorChange" />
<jv:interactorGroup id="tableGroup"
interactors="tableHighlight tableTooltip tableCursorChange" />
<jvgf:ganttView id="gantt" data="/data/mytest.xml" tableInteractorId="tableGroup"
style="width:800px;height:400px" />
</h:form>
強調表示インタラクターにより、
各要素を指定色でハイライト表示
Hitmap技術についての詳細は以下のURLを参照
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.i
log.jviews.charts.doc/Content/Visualization/Documentation/JViews/J
Views_PPA/JViews_Enterprise/_pubskel/ps_usrwebcharts4309.html
Hitmap技術を使用したインタラクターのカスタマイズは以下のURLやサン
プルを参照
cursorChangeインタラクターにより、
各要素上でカーソルの表示を変更
ツールチップ・インタラクターにより、
各要素の情報（デフォルトは要素のID）を表示
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.i
log.jviews.gantt.doc/Content/Visualization/Documentation/JViews/JVi
ews_PPA/JViews_Enterprise/_pubskel/ps_usrwebsched3782.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JSF開発：ポップアップ・メニューの追加
タグで静的に記述する方法と、サーバー・サイドで動的に生成する方法がある
– 静的に記述する場合は、menu, menuItem, menuSeparatorタグを使って記述する
<jvgf:ganttView [...] >
各ポップアップ・メニューはganttViewタグの中に記述する
<jvgf:ganttContextualMenu>
<jv:menu label="root">
アイコンとして用いる画像
JavaScriptを指定する場合
<jv:menuItem label="Zoom ...“ onclick="zoomButton.doClick()“ image="images/zoomrect.gif" />
<jv:menuSeparator />
<jv:menuItem label="Select“ actionListener="#{ganttBean.action}“
アクションリスナーを指定する場合
image="images/arrow.gif“ invocationContext="IMAGE_SERVLET_CONTEXT" />
</jv:menu>
</jvgf:ganttContextualMenu>
</jvgf:ganttView>
– 動的に生成する場合は、factory属性かfactoryClass属性を指定する
• ここで指定するクラスは、IlvMenuFactoryインターフェースを実装している必要がある
<jvgf:ganttContextualMenu factory="#{bean.factory}" />
public class DemoFactory implements IlvMenuFactory {
IlvMenu createMenu(Object graphicComponent,
<jvgf:ganttContextualMenu
Object selectedObject, String menuModelId) {
factoryClass="com.xyz.demo.DemoFactory" />
…
return menu;
}
}
© 2012 IBM Corporation / © 2012 ISE Corporation
JavaScript（Ajax）開発
サーブレットクラス・JavaScriptライブラリーを直接用いて開発することもできる
単純なガント・チャートの表示は以下のようになる
– JSFを使用できない環境でなければ、より簡潔で高速に開発できるJSFの利用が推奨される
<html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="Mon, 01 Jan 1990 00:00:01 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script type="text/javascript" src="script/IlvUtil.js" ></script>
<script type="text/javascript" src="script/IlvEmptyView.js"></script>
<script type="text/javascript" src="script/IlvImageView.js"></script>
<script type="text/javascript" src="script/IlvGlassView.js"></script>
<script type="text/javascript" src="script/IlvResizableView.js"></script>
必要なライブラリーのロード。スクリプトや画像用のディレ
<script type="text/javascript" src="script/IlvAbstractView.js"></script>
クトリは予め用意し、各リソースを入れておく必要あり
<script type="text/javascript" src="script/IlvScrollbar.js"></script>
<script type="text/javascript" src="script/IlvGanttView.js"></script>
<script type="text/javascript">
function init() { chartView.init();}
function handleResize() { if (document.layers) window.location.reload();}
</script>
ページのロード時に
</head>
JavaScriptを実行してビューを初期化
<body onload="init()" onunload=”IlvObject.callDispose()”
onresize="handleResize()“ bgcolor="#ffffff">
<script type="text/javascript">
// The Gantt chart servlet.
サーブレットの指定
var servletName = "/gantt/GanttChartServlet";
// Position of the Gantt chart.
var chartX = 25, chartY = 25, chartH = 350, chartW = 700;
var chartView = new IlvGanttView(chartX, chartY, chartW, chartH);
chartView.setServletURL(servletName);
chartView.toHTML();
JavaScriptによる開発について、詳細は下記URLやサンプルを参照
</script>
</body>
必要なHTMLの生成
http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/topic/com.ibm.i
</html>
log.jviews.gantt.doc/Content/Visualization/Documentation/JViews/JVi
ews_PPA/JViews_Enterprise/_pubskel/ps_usrwebsched3835.html
© 2012 IBM Corporation / © 2012 ISE Corporation
JViews 参考サイト
製品サイト（日本語）
– http://www.ibm.com/software/jp/websphere/ilog/visualization/java/
評価版のダウンロード
– http://www.ibm.com/software/jp/websphere/evaluate/jviews_enterprise.html
デモサイト（英語）
– http://www.ibm.com/software/jp/websphere/ilog/visualization/demo/jviews_enterprise.html
Infocenter （日本語）
– http://publib.boulder.ibm.com/infocenter/jviewent/v8r8/index.jsp
フォーラム（英語）
– https://www.ibm.com/developerworks/mydeveloperworks/blogs/javavisualization/?lang=en_us
© 2012 IBM Corporation / © 2012 ISE Corporation

IBM ILOG JViews Gantt 8.8 開発ガイド 日本アイ・ビー・エム システムズ・エンジニアリング（株）

Comments

Description

Transcript

IBM ILOG JViews Gantt 8.8 開発ガイド日本アイ・ビー・エムシステムズ・エンジニアリング（株）