2009/05/26

Flex Applicationを自動生成 〜Balsamiq Mockups〜

手書き感いっぱいのUIモックアップ作成ソフトBalsamiq Mockupsに、もうすぐ「Generate Flex Application (WebORB)」メニューが追加されます。

これはUIモックアップを作成した後、[Help]-[Generate Flex Application (WebORB)]を選択するとユーザーインターフェースのMXMLとクライアント/サーバーの通信部分(雛形)のコード生成をしてくれる機能です。

この機能は現在、「Balsamiq Mockups Next Release Preview」で試すことができます。
http://www.balsamiq.com/products/mockups/desktop/next

自動生成されるコードは、クライアント側はMXML/ActionScript、サーバー側はJava, C#/VB.Net, PHPとなっているのでサーバー環境にあったものが利用できます。

FAQを見たところ対応しているUIコンポーネントが結構ありますね。
accordion, barchart, button, buttonbar, calendar, canvas, checkbox, colorpicker, columnchart, combobox, datagrid, datechooser, hslider, label, linechart, list, numericstepper, piechart, radiobutton, rule, tabbar, textinput, title, verticaltabbar, vslider

いくつかスクリーンショットを載せておきます。
LabelとButtonだけのシンプルなHello World Flexアプリをデザインしました。

Generate Flex Application (WebORB)メニュー

Flex Applicationの生成

Flex Applicationのダウンロード
Flex Applicationの生成はThe Midnight Codersのサーバー側で行われるようで、zipにまとめられたものをダウンロードできます。

Flex BuilderにMXMLをインポートしデザインモードで表示


自動生成されたクライアント側のコード(もちろん雛形だけ)
MockupSampleView.mxml
<?xml version="1.0" encoding="utf-8"?>
<MockupSampleController xmlns="sampleBalsamiqClient.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Button x="309" y="107" width="73" height="28">
<mx:label>sayHello</mx:label>
</mx:Button>
<mx:Label x="216" y="109" width="-1" height="-1">
<mx:text>Hello World!</mx:text>
</mx:Label>
</MockupSampleController>
MockupSampleController.as
        package sampleBalsamiqClient
{
import mx.containers.Canvas;
import mx.rpc.remoting.RemoteObject;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.AsyncToken;
import mx.rpc.IResponder;
import mx.collections.ArrayCollection;

public class MockupSampleController extends Canvas
{
[Bindable]
public var model:MockupSampleModel = new MockupSampleModel();

private var remoteObject:RemoteObject;

public function MockupSampleController()
{
super();
remoteObject = new RemoteObject("GenericDestination");
remoteObject.source = "sampleBalsamiqServer.MockupSampleService";



remoteObject.addEventListener("fault", onFault);

initializeController();
}

public function onFault (event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}

public function initializeController():void
{

}
}
}
MockupSampleModel.as
        package sampleBalsamiqClient
{
import mx.collections.ArrayCollection;

public class MockupSampleModel
{

}
}

ちなみにBalsamiq MockupsはAdobe AIRで作られていますのでMac OS X, Windowsでも動作しますし、Web版も公開されています。
日本語が使用できない場合は[View]-[Use System Fonts]にチェックを入れてお試しください。

Balsamiq MockupsはUIモックアップの定義だけであって、Flash Catalystのようにインタラクションの定義は今のところできません。
なお、ライセンスは有償で79ドルとなっていますが評価利用は可能です。
Balsamiq Mockups
http://www.balsamiq.com/products/mockups

From Mockups to Flex in Seconds! - The Midnight Coders: Balsamiq Integration
http://www.themidnightcoders.com/develop-ria/balsamiqapp

Weekly Release: New Default Font (on OS X) and more -Coming soon: WebORB integration!-
http://www.balsamiq.com/blog/2009/05/25/newfont/

0 件のコメント: