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/