IBM ILOG JViews Gantt 8.8 開発ガイド 日本アイ・ビー・エム システムズ・エンジニアリング(株)
by user
Comments
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アプリケーション 1.Designer スタート Javaアプレット SDK 2.開発ツール 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で作成されるガントチャートは以下4種の構成要素の相互関係を表とガント・シートで表現する – これらの値はデータ・ソースとしてJViews Ganttに与える必要がある アクティビティー (Activities) – 期間内(開始と終了(共に予定)日時を持つ)になされるべき個々のタスク – 一つのガント・チャート内には複数のアクティビティーが定義される – アクティビティーは親子関係を持つ(階層構造) • 例:設計アクティビティーは外部設計、内部設計、詳細設計アクティビティーがある リソース (Resources) – アクティビティーを実行するのに必要なリソース • 人員であったり道具であったりする – アクティビティー同様親子関係を持つ(階層構造) • 例:「営業部」リソース以下に「山田太郎」、「田中一郎」がいる 制約 (Constraints) – あるアクティビティーの開始や終了が他のアクティビティーの開始や終了に与える制約 – 制約を与えるアクティビティーと受けるアクティビティーの開始/終了の組み合わせより4種存在 • START-START, START-END, END-START, END-END 予約 (Reservations) – リソースとアクティビティー間の紐付け情報 © 2012 IBM Corporation / © 2012 ISE Corporation JViews Ganttのデータ要件 Ganttで作成するガント・チャートには、4つのカテゴ リーにそれぞれ右表のデータが必要。 4カテゴリーの全てを定義しなくても、いずれか一つ 以上のカテゴリーのデータがあれば、プロジェクトフ ァイル自体の作成は可能。ただし、作成するカテゴリ ー内のカラムは右表に記述したもの全てが必要。 – 実際には少なくともアクティビティーが定義され ていないと意味をなさない。 データソース(次ページ参照)がXMLの場合は親子 関係をIDではなくタグの包含関係で表現。 この他、4カテゴリーのいずれでも任意の属性を追加 し、以下の用途で使用することが可能。 – Designerのスタイル・ルール – SDKでコーディングするアプリケーション 属性名 説明 アクティビティー id アクティビティーを識別するためのキー name アクティビティーの内容を表す名前、説明 parentID 親アクティビティーのID startTime アクティビティーの開始日時 endTime アクティビティーの終了日時 リソース id リソースを識別するためのキー name リソースを表す名前 parentID 親リソースのID quantity リソースの数量/人数 制約 constraintType 制約の4種いずれかを指定 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 • 以下4種類の制約タイプに対するマッピングが必要(=マッピング列挙) > 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の3つのモード スタイル編集モード – 外観を編集するためのモード – 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の画面で、元のデータソースにはない新たなデータを特定の行単位で追加可能 – ガントチャートの外観をデータの内容によって変更するスタイル・ルールの判別に利用する – 以下2種類の方法があり、共に「編集」モード( )時の「データ・プロパティー・シート」より行う 新規プロパティー – プロパティーの名前と値を自由に設定できる – 値は文字列以外にも数字なども指定可能 「新規プロパティー」からプロパティー名を指定後、値を入力する ユーザー定義タイプ – tagsプロパティーとして1つ以上の値を設定できる – 複数の値はカンマ区切りで指定し、スタイル・ルールにてフラグ的な使い方をする 「ユーザー定義タイプの設定」から値を入力すると、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では、スタイル変更時の操作対象を以下6つの「領域」に分割、 ① チャートの一般プロパティー ② ガント・シート ③ 表 ④ 時間スケール ⑤ 水平グリッド ⑥ 垂直グリッド この他、データであるガント・シート内のアクティビティー(またはリソース)と制約にはより柔軟にスタイル定義が可能(後述) スタイル変更作業時には、上記6領域のいずれか「スタイル・ルール」の「オプション」以下からまず選択する ①一般プロパティー(チャート全体) ③表 ④時間スケール データに対するスタイルは 別途定義できる ⑤垂直グリッド ⑥垂直グリッド ②ガント・シート © 2012 IBM Corporation / © 2012 ISE Corporation スタイルの領域にて変更可能な項目 表示有無に関する項目(チャートの一般プロパティー) – ガント・シート –表 – 時間スケールの開始/終了日時 – スクロールバー 例:シート部分のみ表示に変更↓ 変更例 一般的なスタイル項目 – 表・グリッドの線種、太さ、色、マージン(余白) – 全てのフォントの種類、色、大きさ – 時間スケール/シート/表の背景色 時間スケールの背景色、フォント、文字色、 水平/垂直グリッドの色、週末の表示色 奇数行と偶数行の色分け © 2012 IBM Corporation / © 2012 ISE Corporation スタイルの編集 領域の選択 – スタイル変更モードとする – スタイル・ルールのオプション、あるいはGantt表示領域を直接クリックして6つの領域から編 集対象の領域を選択する 編集の実施 – 選択した領域における変更可能項目に関して、「スタイリング・プロパティー」及び「スタイリン グ・カスタマイザー」を利用して変更を実施する(次ページ) ←「スタイル・編集」のモードとする 「スタイリング・プロパティー」及び「スタイリング・カスタマイザー」 を表示させておく(デフォルト) ガント・シートを選択した状態 「スタイル・ルール」の「オプション」以下から、あるいは対象領域を直接クリック © 2012 IBM Corporation / © 2012 ISE Corporation スタイリング・カスタマイザーとスタイリング・プロパティー 共にGUIベースで選択した対象領域内のスタイル要素を変更するためのツール。これらの変更結 果が成果物のCSSに反映される。どちらを使ってもよい スタイリング・カスタマイザー – スタイル要素のカテゴリ別にタブやグループ分けされている マークをクリックして縦(▲)にすることで、デ フォルト値(あるいは上位からの継承値(後述の 階層スタイル・ルールの場合))に上書きされる ▲ スタイリング・プロパティー – 表形式でスタイル要素とその値が一覧されている © 2012 IBM Corporation / © 2012 ISE Corporation 条件に応じたデータのスタイリング Designerではガント・シートにおけるデータの表現であるアクティビティー(リソース・データ・チャートに おいてはリソース)と制約のスタイルを以下の条件に応じて変更することができる – アクティビティー(リソース)、制約に共通の条件 • アプリケーション上で選択されているかどうか • ユーザー定義のものを含むデータのプロパティーの値に対する条件(大小やヌルでない等) • ユーザー定義タイプに特定のフラグが指定されている(=tagsプロパティーの値(前述)) – アクティビティー(リソース)のみに指定可能な条件 • 親アクティビティーである(子アクティビティーを持つ) • 子アクティビティーである(子アクティビティーを持たない) • マイルストーンである(開始と終了日時が同一のアクティビティーである) 「スタイル・ルール」の作成、変更と言う場合には、 この条件に応じたデータのスタイリングのことを指す スタイル・ルール の追加/削除は不可 (無効化は可能) ※Designer中では「スタイル・ルール」ビューにまとめられているが、 「オプション」以下の6領域は条件指定のない静的なスタイルの定義で あり、「スタイル・ルール」を作成/編集/追加できるのはデータ項目に対 してのみ(デフォルトではactivity及びその子ルールとconstraint)である スタイル・ルール の追加/削除が可能 © 2012 IBM Corporation / © 2012 ISE Corporation データのスタイリングにおいて変更できるポイント 「アクティビティー(もしくはリソース)」のバー – レンダラーの選択 • レンダラー:アクティビティー/リソースのバーを表示するための1つ以上の要素の組み合わせ以下3種 類のグループから選択し、カスタマイズする > 基本 » 要素の追加は不可能。 > 基本エレメント/コンプレックス » 要素の追加が可能 • レンダラーを決定し、必要な要素の追加/削除を行った後、各要素のスタイルをカスタマイズする このような「基本」レンダラーの場合、開始と終了のシンボルと中心の棒状部分を 独立にスタイリングできるが、それ以上の要素の追加は不可 例えば「基本エレメント」レンダラーならば必要に応じて要素が追加できる。 ユーザーが用意した画像ファイルの追加も可能 個々の「要素」のスタイルはそれぞれカスタマイズできる (カスタマイズ可能項目は色や画像パターン、表示間隔 など要素によりさまざま) 例:進捗度の表現を追加(元データに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アプリケーションについては5章で解説 © 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ファイルも追加する。 ライセンスの受け入れ – 3章で記載したように、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, アクティビ ティー名, 開始時刻, 終了時刻の5つのデータ)のみでデータ・モデルを構成する場合は「単純」、 これらにカスタムの属性を加えて使用したい場合は「デフォルト」を選択する。 単純メモリー・ベースの場合は「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と同じく6つの「領域」に対応した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