UML4AS 導入してみた

Flex

インストールメモ。
ActionScript の UML を作成できる Eclipse ベースのプラグイン。

ユーザー登録

http://www.uml4as.com/forum/index.php?action=register
このあたりからユーザー登録する。（英語）

ダウンロード

UML4AS - UML for ActionScript and Flex - Download
このページの uml4as_site_1.0.0.M2u2_2011-01-12.jar をダウンロードする。新しいほうの M3 っていうバージョンはライセンスキーがまだリリースされていないらしい。なんか誤解されるとイヤなので一応書いておくと、オープンソースにはフリーライセンスらしく、ライセンスキーリクエストするといいらしい。それは下記のURLとかを参考にすると幸せなのかも。何もしないと30日トライアル。
http://www.uml4as.com/forum/index.php?topic=220.0
ダウンロードが完了したら、FlashBuilder の plugin フォルダとかにおいておく。

インストール

FlashBuilder を開き、メニューの [ヘルプ] -> [新規ソフトウェアをインストール] を選択。
ダイアログが表示されるので、追加ボタンをクリック。
アーカイブボタンをクリックし、先ほどダウンロードした jar ファイルを選択する。
操作対象に「ローカルサイトのみ」を選択すると、「Flower Modering Platform - UML4AS」っていうのがリストに表示されるので、そいつをチェックして「次へ」をクリック。
あとはEclipseにしたがって作業をすすめていき、再起動したら完了。

チュートリアル

UML4AS - UML for ActionScript and Flex - Getting Started Tutorial
このへんのヤツを超絶簡易和訳してみる。

1. モデリングファイルを作成
  1. 新規に Flex プロジェクトを作成し、「MyFirstUML4ASProject」と名前をつける。
  2. そのプロジェクトフォルダ直下に、「model」というフォルダを作成する。
  3. modelフォルダを右クリックし、
    1. 「新規」->「その他」->「Flower Modeling Platform」->「UML4AS」を選択、
    2. ファイル名は「model」にし、
    3. ソースフォルダは「src」フォルダを選択する。

これで、model/model.uml4as ファイルができあがる。

2. プロジェクトエクスプローラー/自動同期

とりあえずパースペクティブバーに「Flower Modeling」パースペクティブを追加し、切り替える。すると、プロジェクトエクスプローラーの model.uml4as の左側に+マークがでてくるはず。こいつを展開することでいろいろ編集/確認とかができるみたい。
自動同期の設定は Eclipse の環境設定から「Flower Modeling Platform」を選択し、「Enable automatic synchronization」にチェックを入れればいいらしい。これはデフォルトではオンだそうだ。

3. ソースファイルの追加と修正

適当にファイルを追加する。

  • com.url4as.example.MyInterface と適当な関数
  • com.url4as.example.MyClass と適当な属性/関数

このとき、モデリングファイルが修正されていることを確認すべし。

・・・って書かれてるけど、なんかすごく適当すぎるので、それぞれのファイルは下記のようにする。
MyInterface.as

package com.uml4as.example
{
	public interface MyInterface
	{
		public function get value():String;
		public function myMethod1(param:int):String;
	}
}

MyClass.as

package com.uml4as.example
{
	public class MyClass implements MyInterface
	{
		public function MyClass()
		{
		}
		
		private var _value:String;
		
		public function get value():String
		{
			return _value;
		}
		
		public function myMethod1(param:int):String
		{
			return param.toString();
		}
	}
}
4. ダイアグラムの扱い

ダイアグラムの編集方法は下記の2パターン

  • モデルツリーの編集の反映
  • ダイアグラムから直

とりあえず、ダイアグラムを作ってみる。

  1. Flower Modeling パースペクティブで、「model.uml4as」直下のRootフォルダを右クリック、
  2. 「Create Element」->「Package」を選択
  3. 作成されたフォルダを「Diagrams」にリネームする
  4. Diagramsフォルダを右クリックし、
  5. 「Create Diagram」->「Class Diagram」を選択する

これで、ダイアグラムファイルができあがるので、それを編集していく。（ここまでが上記の前者の話かな？）

  1. 作成されたDiagramファイルをダブルクリック
  2. プロジェクトエクスプローラーの model 内のクラスやインターフェイスをワークスペースにドラッグアンドドロップする
  3. すると、クラスやインターフェイスのダイアグラムが作成される。（上記で記述した内容はすでに反映されているはず）
  4. MyClass ダイアグラムを選択してマウスオーバーすると、編集メニューが出てくるので「Add Related Elements and Display Relations」を選択。（MyInterface との関係を示す矢印が表示される）
  5. MyFirstUML4ASProject ダイアグラムを選択し、attribute の右にある四角のマークをクリックして属性を追加する
  6. 「+myClass:MyInterface」と入力する
  7. 追加された「myClass」を選択し、「Create Association for Attribute」をクリックする。（MyInterfaceとの関係が表示される）
  8. 追加された関係の「Association1」、「attribute1」その下の「1..1」をそれぞれ選択し、「Hide Label」で非表示にする。
  9. これでダイアグラムを保存すると、mxml 側にも反映されている（myClass）ことが確認できる（自動同期している場合）

（これは後者の話っぽい）

5. ActionScript and Analysis Elements, SrcDirs

モデルには二つのタイプのエレメントがある。

  • analysis elements
    • 例えば、パッケージ、クラス、オペレーションなど。これらはソースコードと同期しない。
  • language specific elements（この場合はActionScript）
    • ツリーから編集したり、ダイアログを編集したときに作成され、ソースコードに影響するエレメント。
6. ダイアグラムにて新しいタイプの追加

これも二つの方法がある。
一つ目はエレメントをツリーから作成し、ダイアグラムにドラッグアンドドロップする。具体的には、

  1. モデルツリーのcom.uml4as.exampleフォルダを右クリックする
  2. 「Create ActionScript Element」-> 「Class」を選択
  3. 「MyClass1」 にリネーム
  4. 追加したエレメントをダイアグラムにドラッグアンドドロップする

この場合、UML4AS上ではクラスエレメントを作成して保存しても、ソースコードには反映されなかった。（これでいいのかな・・・？）
別の方法はダイアグラム上からクラスエレメントを作成する。こっちもソースコードには反映されなかった。謎。

7. モデルプロパティビュー、ドキュメンテーションビュー
  • モデルプロパティビュー
    • モデルプロパティビューは選択したモデルエレメントのプロパティが有効かどうかを表示する。このビューを表示するには、「ウィンドウ」->「ビューの表示」->「Model Properties」を選択。
  • ドキュメンテーションビュー
    • ドキュメンテーションビューは選択したモデルエレメントのドキュメントを表示する。このビューを表示するには「ウィンドウ」->「ビューの表示」->「Documentation」を選択。
8. 次のステップ

フォーラムに参加したらいいじゃない。




これ入れたら設計楽になるかなー。