yFiles FLEX のセットアップとサンプルの動作 (2)
.NET Server 上で動作するデモ：C# 開発環境を利用
【概要】
yFiles FLEX は FLEX (Flash) で動作するライブラリーを提供し、WEB-ブラウザ上で動作するアプリケーションを開発できます。以下に、 yFiles FLEX 本体と、そのサンプルをインストールする手順を紹介します。
1) 評価版 (３０日) のダウンロード
以下の WEB-サイトから評価版をダウンロードできます。
2) "yFiles FLEX" (.NET Server Bundle) の内容を見る
- yfilesflex-1.6-.NET-server-3.4-eval.zip を展開して下さい。
yfilesflex-1.6-.NET-server-3.4-eval と言うフォルダーが生成されます。
以下の説明では、このフォルダーを <yFiles-FLEX> と記述します。
以下のフォルダーがあります。
- クライアント用モジュールが格納されています。
client\src-demo\client-flex3
client\src-demo\air-flex3
client\src-demo\client-flex4
client\src-demo\air-flex4
- サーバー用モジュールが格納されています。
server\src-demo\Web Site
3) Flashライブラリーと 関連する DLL をコピーする
4) コンパイルして、Flash ファイル (*.swf) と HTML ファイル (*.html) を作成する
- <yFiles-FLEX> フォルダーに移動して、ANT の DOS コマンドを実行します。
（FlashDevelop 3.X、および、ANTのインストールを行っていない場合は、下記※の手順にてインストールを行って下さい。）
% ant -Dflex.sdk.dir=C:\Program Files\FlashDevelop\Tools\flexsdk build-website
-->
Buildfile: <yFiles-FLEX>\build.xml
........
BUILD SUCCESSFUL
Total time: 9 minutes 8 seconds
--> 数分～数十分して、以下のようにモジュールが作成されます。
<yFiles-FLEX>/server\src-demo\Web Site\demo\ の下に 30個のフォルダーが作成されます。
auxcomponent/ ～ templatestyledemo/
<yFiles-FLEX>/bin\client\ の下に72個のモジュールが作成されます。
AuxComponentDemo.swf ～ TemplateStyleDemo.swf
AuxComponentDemo.html ～ TemplateStyleDemo.html
| ※ "C:\Program Files\FlashDevelop\Tools\flexsdk" は FlashDevelop 3.X のインストール
フォルダーです。以下のWEB-サイトを参考にして下さい。 |
| FlashDevelop 3.X のインストール |
| ※ Windows用 ANTのインストールは、以下のWEB-サイトを参考にして下さい。 |
|
|
5) デモ・アプリを起動：Web サーバー／クライアント・モデル
- "スタート-> 全てのプログラム-> Microsoft Visual Studio 2010-> Microsoft
Visual Web Developer 2010 Express" を選択します。
-->「Visual Web Developer 2010 Express」が起動します。
- "ファイル(F)-> Web サイトを開く(E)..." を選択します。
-->「Web サイトを開く」ダイアログが表示されるので「yfilesflex-1.6-.NET-server-3.4\server\src-demo\Web Site」を選択し、[開く] を押します。
※ 下図のような警告が出ることがあるので、その場合は [はい]を押します。
- メニューの "デバッグ(D)->デバッグ開始(S)" を選択します。
--> Web ブラウザ (IE, Firefoxなど)に、"yFiles FLEX Web Application" のスタート・ページが表示されます。
ローカル PC 上に "localhost:51013/Web Site/" の url で
Web サーバーが動作しています。
- スタート・ページをスクロールして下方にある「The Organization Chart Demo」の画像をクリックします。
- "Organization Chart Demo" が表示され、左サイド・メニューの "Data Selection" 欄に、人事組織図の階層ツリーが表示されます。その中の "Francis Raymond" さんをクリックします。
- 組織図の部分が拡大表示され、"Francis Raymond" さんと直接接続されているノードだけが選択されて表示されます。"Francis Raymond" さんが中心に描かれ、その属性が表示されます。また、画面上で、右クリックすると Flash Player のメニューが表示されるので、Flash アプリが動作しているのを確認できます。
6) デモ・アプリの概要
デモ・アプリは大きく次の７種類があります。
(1) Example Application：実業務に近い４つのアプリケーション
- The Business Process Diagram Demo：
ワークフローを作成し、編集できます。国際標準の表記法である BPMN（Business Process Modeling Notation）に沿ったコンポーネントを定義できます。
- The Graph Canvas Demo ：
XMLファイルからロードしたグラフを対話的に編集できます。また、画面上のグラフに対して種々のレイアウターを適用して効果を確認できます。
- The Layout Module Demo ：
次の５つのレイアウト・アルゴリズムに対して、各種パラメータを変化させて動作確認ができます。
- Hierachical: 階層レイアウト
- Orthogonal : 直交交差レイアウト
- Organic : 組織バランス・レイアウト
- Circular : 円環状レイアウト
- Tree : ツリー(樹木) レイアウト
- The Organization Chart Demo ：
ツリー構造を持つデータを読込み組織図を表示します。その表示に対して多くの操作が行えます。組織の一部をグループ化したり、グループの階層を辿って自在にグループ間を移動できます。
(2) Visual Aspects
グラフ構成要素 (コンポーネント) が持つ多くの属性を編集できます。属性には次のようなものがあります。
- カスタム・スタイルを持つノード
- エッジの交差をブリッジする (種々のブリッジ・スタイルを定義)
- エッジのラベル付けのスタイルを定義
(3) User Interaction
多くのユニークなユーザ・インターフェイスを実装できます。その一例として、
- コンポーネントをドラッグ＆ドロップできます。
- 種々のツールチップや吹き出しを付加できます。
- 特定の格子点を定義して、スナップさせることができます。
(4) Expand/Collapse Navigation
複雑な階層を持つグループを含むグラフ・データをロードして、その階層上のグループへの移動を次のようなナビゲータで実現しています。
- The Collapsible Tree Demo：
ノードのデザインで、グループの展開・縮退状態を表現します。
種々のグラフ・レイアウターが適用できます。
- The Drill Down Demo：
ドリルで掘り下げるような操作を実装しています。
- The Incremental Hierarchic Grouping Demo：
階層レイアウトを保持したまま、グループも同時に表示します。
各グループには、展開・縮退用のボタンがあり、マウスにて自在に操作できます。
- The Organization Chart Demo：
２つの小ウィンドウにグラフ・ナビゲータを表示します。１つは、全体のナビゲータとして動作します。２つ目は、ツリー・ビュー表示を行い、任意の階層のグループに自由に移動できます。
(5) Client-Server Communication
- アプリケーションの中で、２つの部分が通信するようなデモが紹介されています。
(6) Layout
ユニークな機能を拡張したレイアウターが紹介されています。
- 常に階層レイアウターを保持しながら、対話的にグラフの編集ができます。
- ノードを特定のレーヤーに制約しながら、対話的にグラフを編集できます。
- 複数の部分グラフに対して、夫々異なったレイアウターを適用します。
- ポート構成を自在に設定し、そのポートに接続を制約してレイアウトを行います。
(7) Grouping and Folding
- ユニークな表現のグループを持ったグラフが紹介されています。
