From Mockups to Flex in Seconds!

Midnight Coders have partnered with Balsamiq to provide a streamlined developer experience in creating Flex applications directly from Balsamiq Mockups. The latest version of the product supports generation of remoting-enabled Flex applications based on the contents of mockups.

To generate an application from your mockup, select Help > Generate Flex Application (WebORB) as shown in the image below:

Click the 'Generate Application' button in the popup window that opens. The button sends a request to our server to generate a Flex-remoting application based on the current mockup. The generated application consists of two parts: Flex MXML application and server-side counterpart. The server code provides access to the data rendered in various components included in the mockup. For instance, if the mockup contains a DataGrid component with some data, the generated application will render a DataGrid which will load data from the provided server code.

Using Generated Code

The generated application contains both Flex client and server-side code. The clien-side code must be deployed into a Flex Builder project. The server code should be compiled (except for PHP) and deployed into WebORB. 

To get started, create a Flex Builder project as described in an article corresponding to the server-side technology you are using:

Flex Builder project with Java

Flex Builder project with PHP

Once the project is created, you can deploy the generated client-side code by copying the contents of the client/src folder from the ZIP into the src folder of your Flex Builder project.

Deploying Server Code

Server-side code deployment requires an installation of the WebORB server. Please follow the instructions below for the server technology of your choice:

.NET

  1. Download and install WebORB for .NET. If you accept all the default settings in the installer, it creates "weborb30" virtual directory mapped to c:/Inetpub/wwwroot/weborb30 physical directory.
  2. The ZIP file created from your mockup contains both source code (C# and VB.Net) as well as a compiled assembly. To deploy the server-side code copy the assembly from server\csharp\bin\ or server\csharp\bin\ into the "bin" folder of a WebORB-enabled virtual directory. To use the default installation of WebORB, copy the assembly into c:/Inetpub/wwwroot/weborb30/bin directory.
  3. You can verify the classes from the assembly using WebORB Management Console. The console for the default installation of WebORB is available at http://localhost/weborb30. Open the Management tab and locate the deployed assembly in the list of DLLs in the "Services" tab. Expand the dll, navigate to the classes contained in the assembly, expand the class node and try invoking the methods using the "Test  Drive" feature.

Java

  1. Download and install WebORB for Java. The file you download from our website is the installer. You can run it using the following command: java -jar weborb4java.jar.
  2. The ZIP file with the code generated from your mockup contains Java source code at the following path in the ZIP: server\java\sampleBalsamiqServer\. Compile the Java code using a Java IDE or JDK's compiler.
  3. Copy the compiled class file into the [WEBORB PATH]/webapp/WEB-INF/classes/sampleBalsamiqServer/ directory (make sure to create "sampleBalsamiqServer" subdirectory).
  4. Open a command prompt window and change the current directory to the root of WebORB installation. Start WebORB for Java using the following command:
    java -jar weborb.jar
  5. You can verify the deployed class using WebORB Management Console. The console is available after you start WebORB at http://localhost:8080. Open the Management tab and locate the deployed class in the "WEB-INF/classes" node in the "Services" tab. Expand the node, navigate to the MockupSampleService class, expand the class node and try invoking the methods using the "Test  Drive" feature.

PHP

  1. Download WebORB for PHP and deploy it into a PHP-enabled webserver. To deploy WebORB for PHP, copy the following files and folders from the product distribution ZIP into a folder in your webserver document root hierarchy (for the sake of simplicity of this instructions, the folder is named WEBORBROOT):
    /Weborb 
    /Services
    /Console
    /index.php
    /weborb.php
  2. You can verify if WebORB is properly deployed, by loading its Management Console from the following URL: http://localhost/WEBORBROOT/index.php
  3. Deploy the generated PHP class from the ZIP created for your mockup (the file is located at "server\php\sampleBalsamiqServer\")  into the following directory WEBORBROOT/Services/sampleBalsamiqServer/.
  4. You can verify the deployed class using WebORB Management Console. Open the Management tab and locate the deployed class in the "sampleBalsamiqServer" node in the "Services" tab. Expand the node, navigate to the MockupSampleService class, expand the class node and try invoking the methods using the "Test  Drive" feature.
  5. IMPORTANT: Copy weborb.php from WEBORBROOT into the "src" folder of your Flex Builder project. When the Flex application compiles, the weborb.php file must be deployed into the same directory as the compiled SWF, adding the file to the "src" folder should accomplish that task. Finally, modify weborb.php (which should be now in your "src"  folder) so the relative path to Weborb/ORBHttpHandler.php is correct. For more information see the "Deployment" section of the "Getting Started with WebORB for PHP" article.

Getting Help

If you have any questions about the integration or need help with deploying or running the generated code, please post to the WebORB discussion forum located at:

http://tech.groups.yahoo.com/group/flashorb/

Balsamiq Integration FAQ