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 .NET

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

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.
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.
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

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.
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.
Copy the compiled class file into the [WEBORB PATH]/webapp/WEB-INF/classes/sampleBalsamiqServer/ directory (make sure to create "sampleBalsamiqServer" subdirectory).
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
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

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
You can verify if WebORB is properly deployed, by loading its Management Console from the following URL: http://localhost/WEBORBROOT/index.php
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/.
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.
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

Show all / Hide all

What does the Balsamiq Mockups and WebORB integration do?

The integration provides a way to create a Flex application directly from a Balsamiq Mockup. The generated application includes the source code for the client-side (MXML/ActionScript) as well as various implementations for the corresponding server-side code (Java, C#/VB.Net, PHP). Any data displayed in the mockup (in DataGrids, Lists, etc) will be fetched by the Flex application from the generated server code.

What components in Balsamiq Mockups are supported in the generated Flex app?

The code generator translates the following Balsamiq Mockup components to the corresponding Flex components. For all other components, the generated Flex application displays a label with the component ID:

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

We plan to add support for any new components as they become available.

Do I need WebORB to run the generated code?

Yes, the generated code uses Flex remoting to load data from the server. The generated application consists of both a Flex application and the server-side code which returns data to the client. Most of the real-world applications use the client/server integration, so our goal was to provide an implementation which is as close as possible to the real-world scenario.

Do I need to purchase WebORB to run the generated application?

No, you can use the Community Edition of WebORB to run the application as long as you comply with the requirements of the product license. Alternatively, you can use the Development Mode of the product which is available out of the box when you download and run the product.

I am running into a problem with the generated code, where can I get help?

If you're running into a problem or need help with getting the product up and running, please post your questions to the WebORB discussion forum at: tech.groups.yahoo.com/group/flashorb/

Alternatively, Midnight Coders provide commercial support available with the Enterprise Edition subscriptions.