Generate Flex Code from Balsamiq Mockup Sources

Having the need to generate an application skeleton after having created the mockup using Balsamiq (http://www.balsamiq.com), and to poke into its file format, as explained in the page http://balsamiq.com/products/mockups/help/bmml, I wrote a plugin for my Open Source project QXmlEdit.

It is very easy to use, but you should remember that it is a very simple tool and not a full fledged IDE.

The plugin can be activated via ‘Tools’ menu, as in the following screenshot:



The plugin window is divided in two: the upper part is dedicated to the Balsamiq sources to translate, the bottom one contains the destination directory where a MXML Application file is generated for each selected source file.

The translation is done by transforming the source using templates that can refer original attributes or calculated fields.

Data bound controls are supported by generating data sources as mx:Array containing mx:Object in a global section.

Not all Balsamiq controls are supported, only a subset of most commonly used ones, controls not supported are converted to mx:Label

List of supported controls:

• Button

• Label

• LinkBar

• DataGrid

• List

• TabBar

• VRule

• HRule

• TextInput

• ComboBox

• TextArea

• Paragraph

• CheckBox

• RadioButton

• Tree

About these ads