4.3 "Layout 拡張・モジュール ／AIR アプリ" の動作確認
【概要】
yFiles FLEX ／Layout 拡張・モジュール は FLEX (Flash) で動作するライブラリーを提供し、Windows デスクトップ上で動作するスタンドアロンの AIR アプリケーションを開発できます。
1) 評価版 (３０日) のダウンロード
2) "yFiles FLEX ／Layout拡張・モジュール" の内容を見る
- yfilesflex-layout-1.2.0.1-eval.zip を展開して下さい。
yfilesflex-layout-1.2.0.1-eval と言うフォルダーが生成されます。
以下の説明では、このフォルダーを <yFiles-FLEX> と記述します。
- 以下のフォルダーがあります。
４つのクライアント用モジュールが格納されています。
<yFiles-FLEX>\src-demo\air-layout-flex3 ... AIR アプリ用
<yFiles-FLEX>\src-demo\air-layout-flex4 ... AIR アプリ用 ※ 今回使用する
<yFiles-FLEX>\src-demo\client-layout-flex3 ... WEB アプリ用
<yFiles-FLEX>\src-demo\client-layout-flex4 ... WEB アプリ用
3) Flash ライブラリーと 関連する ライセンス をコピーする
- "<yFiles-FLEX>\src-demo\air-layout-flex4\libs" フォルダーに以下の２つの Flash ライブラリーをコピーする
・<yFiles-FLEX>\lib\yfiles-flex-layout-flex4.swc
・
Client\yfilesflex-1.6.0.1-eval\lib\client\yfiles-flex-Flex4.swc
- "<yFiles-FLEX>\src-demo\air-layout-flex4\src" フォルダーに以下のライセンスをコピーする
・Client\yfilesflex-1.6.0.1-eval\license.xml
※ "Client\yfilesflex-1.6.0.1-eval" は、【４.２. "Clientモジュール ／
WEB アプリ" の動作確認】で使用された yfilesflex-1.6.0.1-eval.zip を展開したフォルダーを示します
4) Flash Builder 4.5 を起動する
- "プログラム(P)-> Adobe Flash Builder 4.5-> Adobe Flash Builder 4.5" を選択します。
| ※ 【注意】もし、"Adobe Flash Builder 4.6" を使用している場合は、以下の設定が必要です。Flash Builder 4.6 の SDK はサポートされていません。≪Flex SDK のセットアップ≫ |
- "ファイル(F) -> Flash Builderプロジェクトを読込み(I).." を選択します。
--> ダイアログが開くので、
プロジェクトフォルダー(P): <yFiles-FLEX>\src-demo\air-layout-flex4
をセットして、[終了] を押します。
--> [Flex SDK のバージョンの選択] ダイアログが開くので、[OK] を押します。
※ バージョンが一致している場合はこの警告はでません。
--> Flsh Builder の画面が開きます。
5) BusinessProcessDiagramDemo (ビジネス・プロセス・デモ) を実行する
- メニュの "実行-> 実効構成(N).." を選択します。
-->「実効構成」の画面が表示されるので、"デスクトップアプリケーション" を右クリックし、"新規(W)" を選択する。
-->「実効構成」の画面にて、以下の操作を行う
・名前(N): BusinessProcessDemo
・プロジェクト(P): yFilesAirDemos
・アプリケーションファイル(A): src/BusinessProcessDiagramDemo.mxml
--> 以上を設定して、「適用(Y)」ボタンを押す
--> 左側の "フィルタ入力"欄で、"デスクトップアプリケーション -> BusinessProcessDemo" を選択し、[実行] ボタンを押す
--> コンパイルが開始されて、しばらくすると、アプリが起動する
6) 上方にあるツール・バーの "Open Diagram:" をクリックすると、グラフ・データの一覧が表示されるので、"New Diagram" を選ぶ
--> 「新規のダイアグラム」が表示されるので、以下の操作を行う
- 左側に、５つの「ノード／エッジ要素」のタブがある。
"Events" グループのタブを選び、必要な要素をグラフ描画ビューに、ドラッグ＆ドロップする。
同様にして、"Activities" グループ、"Gateways" グループのから必要な要素をドラッグ＆ドロップする。
次に、各ノードをエッジで接続する。
- ツール・バーの "Save Diagram:" に適当な名前を指定して、グラフ・データとして保存出来ます。
7) 別なグラフ・データを表示する
- 上方にあるツール・バーの "Open Diagram:" をクリックすると、グラフ・データの一覧が表示されるので、"Discussion Cycle" を選ぶ
--> 下図のようなグラフが表示される。左側の "Relations" タブを選ぶと、多種類のエッジの要素が現れる。ノード間を接続する時に、より適切なタイプのエッジを選択できます。
- 上方にあるツール・バーの "Open Diagram:" をクリックすると、グラフ・データの一覧が表示されるので、"Normal Flow" を選ぶ
--> 下図のようなグラフが表示される。左側の "Gateways" タブを選ぶと、多種類のノードの要素が現れる。フローにおいて条件により分岐する時に、より適切なタイプのノードを選択できます。
