更新日： 14/04/16

yFiles FLEX のセットアップとサンプルの動作 (3)

Flash Builder 上で動作するデモ：Flash 開発環境を利用

yFiles FLEX は FLEX (Flash) で動作するライブラリーを提供し、Windows デスクトップ上で動作するアプリケーションを開発できます。以下に、 yFiles FLEX 本体と、そのサンプルをインストールする手順を紹介します。

以下のWEB-サイトから評価版をダウンロードできます。

yFiles FLEX .NET Server Bundle

ダウンロードされるモジュール
yfilesflex-1.6-.NET-server-3.4-eval.zip ... 119 MB

ここで説明する例は "サーバー／クライアント" モデルです。また、ここでは "クライアント" の起動と操作について説明します。
予め以下の手順に従ってサーバーを起動しておいて下さい。

yFiles FLEX のセットアップとサンプルの動作 (2)
.NET Server 上で動作するデモ：C# 開発環境を利用
クライアント用の設定をします。
前述のサーバー側にて、使用したフォルダー "yfilesflex-1.6-.NET-server-3.4-eval" を以下の説明で、<yFiles-FLEX> と記述します。
　
"<yFiles-FLEX>\client\src-demo\client-flex4" がクライアント用の領域です。
以下のように設定ファイルを修正し、サーバーの URL を指定します。

【設定ファイル】
<yFiles-FLEX>\client\src-demo\client-flex4\src\config.xml

≪修正前≫
```
<config>
<context-root>http://localhost:49619/Web%20Site/</context-root>
<service-extension>.ashx</service-extension>
</config>
```
≪修正後≫
```
<config>

<context-root>http://localhost:51013/Web%20Site/</context-root>
<service-extension>.ashx</service-extension>
</config>
```
　※ "51013" は、実際のサーバーに合わせて下さい。

"プログラム(P)-> Adobe Flash Builder 4.5-> Adobe Flash Builder 4.5" を選択します。

--> 「Flash Builder 体験版」の画面が表示されるので、[体験版を起動] を押します。
"ファイル(F)-> Flash Builderプロジェクトを読込み(I).." を選択します。

--> ダイアログが開くので、
　　プロジェクトフォルダー(P):　<yFiles-FLEX>\client\src-demo\client-flex4\
　　をセットして、[終了]を押します。

--> [Flex SDK のバージョンの選択] ダイアログが開くので、[OK] を押します。
　　※ バージョンが一致している場合はこの警告はでません。

※ また、今後作業を進めて行くうちに以下の警告が表示されることがありますが、その時は [はい] を押して下さい。

--> Flush Builder の画面が開きます。

メニュの "実行-> 実効構成(N).." を選択します。

-->「実効構成」の画面が表示されるので、"アプリケーションファイル(A)" をクリックし、"src/AuxComponentDemo.mxml" を選択し、[実行] ボタンを押します。
図のようにボタンが付いたノードが表示されるので、"Edit" ボタンをクリックします。

--> ３つのボタン（Add Parent, Add Sibling, Add Child）が表示されるので、

"AddParent" をクリックし、表示されたダイアログ上で Name：PARENT-Node を入力します。
同様の手順で、以下の２つの操作を行います。
　　・Add Sibling をクリック --> Name：SIBLING-Node を入力します。
　　・Add Chld をクリック --> Name：CHILD-Node を入力します。

上記の 4) と同様の手順で、「実効構成」の画面から "src/BusinessProcessDiagramDemo.mxml" を選択します。

-->「ワークフロー」の画面が表示されるので、

"Open Diagram:" をクリックし "NormalFlow" を選択します。
ツール・パレットの "Gateways" を選択し、その中の "Complex" アイコンを編集画面上にドラッグします。

ガイド用補助ラインが表示されるので、それに沿って "Complex" アイコンを置きます。
編集画面左上のアイコン (Working Group Active) 上で、左クリックして、そのまま下方にドラッグします。

下にあるノードの近辺までマウス・ポインターが移動すると、接続可能な４つのポートのガイドが表示されます。