The random utterances of David Arno

Balsamiq mockups is a truly outstanding mock-up drawing tool. It is simple to use, yet enables the quick and easy creation of detailed mock-ups of even quite complicated user interfaces. Yet it has always had one big problem: it only creates mock-ups. The design then has to be painstakingly recreated using some application-dependent GUI creation tool, for example Flex Builder. What Balsamiq mockups lacks is the ability to generate MXML directly from a mock-up.

Step forward a new application: Napkee. It is an Adobe AIR application (so should work with Windows, Linux and Mac OS X) with a simple yet effective aim: transforming Balsamiq-generated mock-ups into web pages and Flex views. As this is something I’ve wanted to do for a while, I took the application for a spin, with the following results.

Installation
Being an AIR application, installation was a breeze. Simply visit the Napkee website and click on the Launch Now button. On Windows, if you haven’t got AIR installed, it prompts you to install that first automatically. Then the application itself is installed. I don’t know if this simple installation method applies to Linux and OS X, but I assume it does.

Functionality overview
Napkee is very simple to use: start it up, import a mock-up and convert it to a Napkee file. This can then be previewed, copied to the clipboard and saved as a Flex project. And that is about it. Simple, yet effective.

Putting Napkee through its paces
To test it out, I created the following mock-up. It’s not going to win any design rewards, but it shoehorns lots of controls into a space small enough to display here

Balsamiq mock-up for my Napkee test

So it has:

• A canvas with a scrollbar, containing:
  • An accordion opened on “Item One”. containing:
    • A button bar and menu
    • Breadcrumbs and a button
    • A checkbox (not ticked) and a text box
    • An expanded combo-box and a text field
    • Then on the left going down: a collapsed combo-box, two radio buttons, a link and a numeric stepper.
    • Beside them, a tab set on tab One, containing:
      • Vertical divider, with a label above and a progress bar below.

I then saved this, started up Napkee and imported my mock-up. It loaded it OK and presented me with the following preview:

Napkee preview of the imported mock-up

Visually, it looks near spot-on. The only things that didn’t get imported were the vertical divider and scrollbar. The preview is actually created using real Flex controls, so one can interact with it. Doing so reveals that the values for the top combo-box were successfully imported. As the screen shot below shows though, it also reveals a flaw with the program:

Rendering problems with the Flex view

I’ve selected “Item Four” on the accordion and “Four” on the tab set. This reveals (in a rather messy fashion) that Napkee failed to treat these items as containers, so as the tabs change, the visual contents do not.

Finally I exported the project, fired up Flex Builder and imported the project. Running it reveals another odd bit of behaviour: the project MXML has no size constraint and the canvas created from the mock-up has a x=4, y=8 offset. This results in a flex-coloured background filling the browser windows, with a white rectangle slightly offset from the top left corner. After fixing these, I ended up with the following SWF:

And another thing
The MXML code that Napkee generates automatically assigns id’s to the imported components. The resultant code ends up looking like:

  <mx:Canvas id="nap8" .../>
  <mx:Accordion id="nap0" ...>
    <mx:Canvas id="nap0i0" label="Item One".../>
    <mx:Canvas id="nap0i1" label="Item Two" .../>
    <mx:Canvas id="nap0i2" label="Item Three" .../>
    <mx:Canvas id="nap0i3" label="Item Four" .../>
  </mx:Accordion>

I feel is OK, but is very little messy. I’d really like to be able to give the components real names. Given that Balsamiq doesn’t have the facility to name components, I’d like to see Napkee providing some facility for applying useful labels to components. This could either be in the form of some interactive import dialogue, or by being able to select items in the preview and name them.

Conclusion
Napkee costs $49 for the Flex license (a version that can output HTML+CSS as well is available for $79) and for that you get a very effective tool for turning Balsamiq mock-ups into Flex MXML code. Sure I have a couple of gripes with it and feel it has a key missing feature, but the developers aim to provide frequent updates to the product. Hopefully therefore, these issues will be addressed soon. I have no hesitation therefore in recommending this product to anyone who does Flex development.

Reference files
You can download the source files I used for this article via the links below:

The original Balsamiq mock-up file

The Napkee source file

A zip of the Flex Builder project Napkee generated