WEB-アプリに柔軟なレイアウトを提供する「yFiles for Silverlight」

【１】 概要

Microsoft Silverlight 環境にて、WEB アプリケーションを開発するためのライブラリーを提供します。グラフ、ダイアグラム、ネットワーク図の分析や可視化機能を WEB-ブラウザから利用できるアプリケーションを作成できます。

 

【２】 特徴

1) グラフの解析と自動最適レイアウト機能

グラフや、ダイアグラム、ネットワーク図に対して、以下のような強力な解析機能を提供します。即ち、最短経路探索やスパンニング・ツリー・アルゴリズムなどです。通常のコーディングでは、多くのステップを必要としますが、yFiles for Silverlight ではシンプルなファンクションとして容易に実現できます。

階層構造、直交レイアウト、円環状レイアウトなどの多様なレイアウトを提供します。種々のレイアウトを組み合わせて、洗練された簡潔なレイアウトを実現できます。

yFiles for Silverlight のルーティング機能により、グラフ要素間の接続を最適化したり、よりスッキリした結線を可能にします。

 

2) グラフ属性に対する強力なコントロール機能

ダイアグラムに対して、Silverlight のコントロール機能を提供します。それによって、ダイアグラムを直感的に操作できます。マウスによるシンプルな操作で、ダイアグラムの属性を容易に編集できます。以下のような種々の編集機能を提供します。

• 独創的なズーム機能による拡大・縮小
• 編集操作の取消・再実行 (UNDO/REDO)、クリップボード対応
• 構成要素を手動で配置する際の高機能ガイドライン

 

【３】 応用事例

以下の応用事例は、yFiles (for Java) や yFiles.NET (for C#) での事例ですが、yFiles for Silverlight においても、十分に実現可能です。これらの商品 (yFiles, yFiles.NET, yFiles for Silverlight) が持つライブラリーとしての基本機能は同じです。大きな違いとしては、夫々動作環境が異なることです。

1) ドキュメント管理

ドキュメント管理

• 階層構造を持ったツリー・ビューにより、多種のドキュメントを管理できます。CSV ファイルやデータ・ベースから読みだしたデータをツリー・ビューに渡すことができます。
• ツリー・ビューの階層の並びをメニューから指定できます。
• ツリー・ビューの各要素は、フォルダー (青色、オレンジ色) とファイル (緑色) です。
• フォルダーは展開された状態 (青色) と縮退した状態 (オレンジイ色) で表現されます。また、そのフォルダーに含まれる要素数が () 内の数字で示されます。
• ファイルに添付データがある場合は、添付データの形式に対応したアイコンが付加されます。例として、PDF、エクセル、ワードなどです。このアイコンをクリックすると、添付データに対応したビュワーが起動されます。

 

2) ネットワーク・システム管理

詳細情報

• ネットワーク・リソースの構成を管理したり、個々の構成要素の状態を監視したりできます。
• データ・ベースより読みだしたデータに基づいて、ダイアグラムを描画します。
• 各構成要素の状態は、データ・ベースより逐一更新して、異常状態を素早く通知できます。
• 構成要素をいくつかのグループに分けて、各グループ毎に展開したり縮退させたりできます。注目するグループだけを展開して表示することにより、システムの管理を効率良く行えます。
• 各構成要素の属性を確認したり、内容を更新したりして管理できます。

 

3) ビジネス・ワーク・フロー管理

ビジネス・ワーク・フロー管理

• ビジネス用のワーク・フローを定義して、その進捗を管理できます。
• ワーク・フローの各ノードの状態に従って、ノード属性 (形状や背景色など) を更新することにより、視覚的にワーク・フローを管理できます。

 

4) データベース・スキーマの可視化

データベース・スキーマの可視化

• データ・ベースを構成するテーブルの定義 (スキーマ) を可視化できます。
• 複数テーブルに関連する複雑な定義をダイアグラム的に可視化することによりテーブル相互の関係を明確に把握することができます。
• 種々パラメータの条件設定を変更して、テーブル間の詳細情報を簡潔なダイアグラム上の変化として表示できます。その結果テーブル間の相互関係を把握することができます。

 

5) ソフトウェア・モジュール間の依存関係を可視化

ソフトウェア・モジュール間の依存関係を可視化

• 大規模ソフトウェアは、通常多くのモジュールで構成されます。その多くのモジュール間の複雑な依存関係をビジュアルなダイアグラムとして可視化します。
• 特定のモジュールを修正した時に影響するモジュールを把握することで、システム全体での信頼性を高めることができます。

　

【４】 多くの有用なサンプル・コード

yFiles for Silverlight をインストールすると、以下の２つのフォルダーがあります。

1. yFiles for Silverlight 2.0 ... システム・フォルダー
2. yFiles for Silverlight 2.0 Samples ... サンプル・フォルダー

サンプル・フォルダーに、45個の有用なサンプル・コードがあります。そのいくつかを以下に紹介します。

 

1) Demo.yFiles.GraphEditor

フォルダー： yFiles for Silverlight 2.0 Samples/demos/yEd for Silverlight/

• グラフの要素に対して、全ての属性を編集できます。
  
  
• 編集操作の取消／再試行、印刷ができます。
  
  
• グラフの要素 (ノード、エッジなど) に対して豊富なテンプレートがあります。
  
  
• ８種類のサンプル・グラフが用意されています。
  
  
  1. Computer-network ... ネットワーク構成図、ノードに画像を適用する例です。
  2. Movies 　　　　　... SHIFT+クリックで、詳細ダイアログが開く例です。
  3. Family-tree 　　 ... 'FamilyTree' レイアウターを用いている例です。
  4. Hierarchy ... 'Hierarchical (階層構成)' レイアウターを用いている例です。
  5. Nesting ... CTRL-SHIFT+クリックで、グループの内部に入る例です。
  6. Social-network ... 'Organic' レイアウターを用いている例です。
  7. Uml-diagram ... 'DirectedOrthogonal' レイアウターを用いている例です。
  8. Large-tree ... 要素数が膨大 (パフォーマンス計測用) な場合の例です。

 

2) Demo.yFiles.Graph.Viewer

フォルダー： yFiles for Silverlight 2.0 Samples／demos／GraphViewerDemos／

• 上記の GraphEditor と同様８種類のサンプル・グラフが用意されています。
  
  
• 豊富な UI が用意されています。
  
  
  • ズーム制御１：スライダー、ズーム制御２：ボタン
  • ナビゲータ１：ボタン、 ナビゲータ２：Overviewコンポーネント
  • グラフ選択１：コンボボックス、グラフ選択２：ボタン
  • 種々のサブ・ウィンドウ：操作ガイド、属性表示、説明などを表示します。

 

3) Demo.yFiles.Graph.OrgChart

フォルダー： yFiles for Silverlight 2.0 Samples／demos／CompleteDemos／

• ４つのパネル構成を持った例です。
  
  
  1. Main Panel ... グラフ、ダイアグラムを表示します。
  2. OverView ... 全体俯瞰図を表示します。
  3. Structure ... ノード構成用のツリーを表示します。
  4. Details ... 詳細情報を表示します。
     
     
• 各パネルで、マウスや複数キーの組合せが種々の機能に割り当てられています。１つのパネルでの操作によって、他のパネルの表示内容が連携して変化します。
  
  
• 「選択された要素」に対して、構成制御ボタンで、次の操作が行われます。
  
  
  1. 上位ノードを隠す ... 該当ノードより上位の全てのノードを隠します。
  2. 上位ノードを表示 ... 該当ノードより上位の全てのノードを表示します。
  3. 下位ノードを隠す ... 該当ノードより下位の全てのノードを隠します。
  4. 下位ノードを表示 ... 該当ノードより下位の全てのノードを表示します。
  5. 全体表示 ... 全てのノードを表示します。
     　　
     
• 詳細ボタン (ズーム制御の右端) を押すと、図の様に各ノードの詳細情報を表示します。
  

 

4) Demo.yFiles.Graph.Collapse

フォルダー： yFiles for Silverlight 2.0 Samples／demos／CompleteDemos／

• 下記機能の例です。
  
  
  1. ツリー・ビューの各枝を展開、または縮退した状態で表示できます。
  2. マウスのクリックで、各枝の展開・縮退した状態をトグルできます。
  3. ノードに属性を追加したり、アイコンを付加できます。
  4. ツリー・ビューのノードに対して、リーフ (葉) の判定を行い、属性値を変更できます。
     (例えば、リーフの場合背景色を緑色にしたり、特別なアイコンを付加することができます。)

 

5) Demo.yFiles.Graph.IncrementalHierarchicGrouping

フォルダー： yFiles for Silverlight 2.0 Samples／demos／CompleteDemos／

• 下記機能の例です。
  
  
  1. グループ・ノードに対する操作が直感的に行えます。
     "＋アイコン" をクリックすると、グループを開きます。
     "－アイコン" をクリックすると、グループを閉じます。
     グループの開閉動作が、アニメーションを伴って行われます。
  2. グループ・ノードも含めた状態で、全体として統一のとれたレイアウトが行われます。
  3. 'Hierarchical (階層構成)' レイアウターを用いています。

 

6) Demo.yFiles.Graph.SimpleCustomStyle

フォルダー： yFiles for Silverlight 2.0 Samples／demos／StyleDemos／

 

• 下記機能の例です。
  
  
  1. 以下のようなグラフの構成要素に対して、種々のカスタマイズが行えます。
     ノード、エッジ、ラベル、ポート(ノード接続点)、エッジの矢印
  2. [Modify Selected Nodes ] ボタンで、ノードの色を変更します。
  3. ノードから出るエッジの色は、ノードの色に従います。
  4. エッジを選択すると、一時的にハイライト色に変化します。
  5. グラフを拡大すると、ラベルに '修正アイコン' が付加されて、このアイコンをクリックすると、ラベルの文字列を変更できます。
  6. グラフ全体を XML データとして保存できます。

　

【５】 開発環境の設定とサンプルのコンパイル

1) yFiles for Silverlight のインストール

• 「yFiles for Silverlight のインストール」を参照下さい。

 

2) 「ShortestPath(最短経路探索)」のコンパイルと実行

1. "Microsoft Visual Web Developer 2010 Express" を起動します。
   
   
2. プロジェクトを開きます。
   
   
   • "ファイル(F)-> プロジェクトを開く(P).." を実行します。
     
     --> [プロジェクトを開く] ダイアログが起動します。
     　
     yFiles for Silverlight 2.0Samples\demos\CompleteDemos\Demo.yFiles.Algorithms.ShortestPath\
     フォルダーにあるDemo.yFiles.Algorithms.ShortestPath.csproj を開きます。
     
     
   • メニューの "デバッグ(D)-> デバッグ開始(S)" を実行します。
     
     --> 出力欄に [ビルド：正常終了] のメッセージが表示されます。
     
     --> WEB-ブラウザが起動して、グラフが表示されるます。
     
     　　 ・適当にノードを選び、"Mark as Source" ボタンを押す --> ノードが緑色になります。
     　　 ・適当にノードを選び、"Mark as Traget" ボタンを押す --> ノードが赤色になります。
     　　　 自動的に経路探索が行われて、最短経路が表示されます。
     
     　　 ・右上コーナーにある "Undirected" ボタンをおして、"Directed" を選択します。
     　　　 自動的に再探索が行われて、結果が表示されます。エッジに方向があるので、
     　　　 最短経路は、前回の "Undirected" の場合とは異なります。

 

3) 「Collapse (ツリー・ビュー)」のコンパイルと実行

1. プロジェクトを開く
   
   
   
   • "ファイル(F)-> プロジェクトを開く(P).." を実行します。
     
     --> [プロジェクトを開く] ダイアログが起動します。
     
     yFiles for Silverlight 2.0Samples\demos\CompleteDemos\Demo.yFiles.Graph.Collapse\
     フォルダーにある Demo.yFiles.Graph.Collapse.csproj を開きます。
     
     
   • メニューの "デバッグ(D)-> デバッグ開始(S)" を実行します。
     
     --> 出力欄に [参照コンポーネント "Demo.yFiles.SilverlightToolKit" が見つかりません] のメッセージが表示されます。
     
     このアプリは、"SilverlightToolKit" に依存しているため、先ず "SilverlightToolKit" をコンパイルする必要があります。
     
     
2. "SilverlightToolKit.dll" を作成する
   
   
   
   • "ファイル(F)-> プロジェクトを開く(P).." を実行します。
     
     --> [プロジェクトを開く] ダイアログが起動します。
     
     yFiles for Silverlight 2.0 Samples\demo-support\SupportDemos\Demo.yFiles.SilverlightToolkit\
     フォルダーにある Demo.yFiles.SilverlightToolkit.csproj を開きます。
     
     
   • メニューの "デバッグ(D)-> Demo.yFiles.SilverlightToolkit のビルド(U)" を実行します。
     
     --> 出力欄に [ビルド：正常終了] のメッセージが表示されます。
     
     
3. "Demo.yFiles.Graph.Collapse" を再度コンパイルします。
   
   
   
   • "ファイル(F)-> プロジェクトを開く(P).." を実行
     
     --> [プロジェクトを開く] ダイアログが起動されます。
     
     yFiles for Silverlight 2.0 Samples\demos\CompleteDemos\Demo.yFiles.Graph.Collapse\
     フォルダーにある Demo.yFiles.Graph.Collapse.csproj を開きます。
     
     
   • "ソリューションエクスプローラー-> 参照設定" の下にある Demo.yFiles.SilverlightToolkit を削除します。
     
     
   • 「参照設定」を右クリックして、「参照の追加(R)..」を選択します。
     
     --> ダイアログが表示されるので、
     
     yFiles for Silverlight 2.0 Samples\demo-support\SupportDemos\Demo.yFiles.SilverlightToolkit\bin\Debug\
     フォルダーにある "Demo.yFiles.SilverlightToolkit.dll" を選択し、 [OK] を押します。
     
     
   • メニューの "デバッグ(D)-> デバッグ開始(S)" を実行します。
     
     --> 出力欄に [ビルド：正常終了] のメッセージが表示されます。
     
     続いて、WEB-ブラウザが起動し、グラフが表示されます。