Import Balsamiq mockups as Smart GWT screens

[Isomorphic]

Nightly builds of SmartGWT 3.1d and SmartClient 8.3d now include an import tool that allows you to take Balsamiq mockups and transform them into a runnable, interactive screen backed by clean, clear code. You can then extend the screen into a real application by adding event handling and data binding, without losing any of the work you put into creating the original Balsamiq mockup.

Download the latest nightly at smartclient.com/builds, then take a look at the Balsamiq Import chapter - search for "Balsamiq" in the SmartClient Reference, or look at the "Balsamiq Import" chapter in com.smartgwt.client.docs for SmartGWT. This chapter explains the different ways to use the tool, how to move from an imported mockup to a final application, and so forth.

Here are a couple sample mockups you can try if you don't already have some on hand (or you're just trying to verify the tool is installed correctly):

• Resize bars & Layouts
• Navigation, Charts

If you have trouble with the importer, please create a new thread and add your Balsamiq BMML files as an attachments. If possible, please post BMML files that represent the minimum mockup that will reproduce a given problem - this will help us fix issues faster.

Note also that while the docs currently say this will be included in Pro Edition, this has not yet been finalized, although it is definite that it will be included in Power Edition.

A quick overview of some of the capabilities of the importer follows - these are excerpts from the Balsamiq Import chapter mentioned above, which you should definitely read before using the tool.

Enjoy!

Balsamiq is a tool for rapidly & collaboratively creating mockups of new software applications. The Balsamiq Importer allows you take exported Balsamiq mockups (.bmml files) and instantly turn them into interactive applications backed by clean, clear code. This allows you to:

• speed up development by reusing all the careful layout work you did in Balsamiq
• use Balsamiq as a development tool for SmartClient & SmartGWT, since you can re-import at any time or even continuously
• instantly create a fully interactive version of a Balsamiq mockup in any skin
• offer such functionality to your end users as a means of extending your application (requires Visual Builder OEM license)

...

When using the standalone tool, you can add the URL parameter "mockup" to cause your mockup to be immediately imported as the tool starts up:

   tools/bmmlImporter.jsp?mockup=myMockup.bmml

This makes your imported mockup into something you can bookmark, which is especially useful if you install the importer onto a shared server.

...

When you provide a mockup stored somewhere on your filesystem, this tool will periodically re-import the mockup, so you can work in Balsamiq and the browser will periodically refresh, showing the live UI updated to reflect your latest changes.

...

Most Balsamiq mockup elements have a directly equivalent UI widget - what Balsamiq calls a "Tabs Bar" is translated to a TabSet component, a Balsamiq "Accordion" is translated to a SectionStack, and so on. However, rather than only translate elements 1-to-1, the importer uses heuristics to try to organize your components into layout managers and logical forms, as follows.

Containers

Balsamiq mockups have no true notion of containers - to put something "in" a container in Balsamiq, you just make sure it visually appears inside of the container - you never assign it as a child of the container. If the importer did the same thing, the resulting code wouldn't be very useful because the screen would become jumbled if anything was resized. Instead the importer detects that you have placed something inside the visual area of a container and automatically creates a true container relationship in SmartClient. A grid inside of a Window really will be inside that Window in SmartClient, and will move with the window if it is dragged.

...

Space Filling & Fluid Layout

By default, the importer assumes your mockup isn't really meant to be fixed size - whatever container it's placed into, whether that's the whole browser or something smaller, your design is actually intended to fill it.
... the importer tries to find a way to allow your design to "flex" by finding elements that can use more space (grids, text areas, accordions, etc) and giving these elements flexible size.

...

Linked Mockups

Balsamiq supports linking multiple mockups together to create basic interactivity for guided walkthroughs of multi-screen mockups. The importer understands certain types of Balsamiq links and can create a combined appliction from several linked mockups, with the interactivity you would expect.

[tinnitus007]

Sorry to be thick about this, BUT...

I downloaded the 4/13/12 Eval, unzipped it, navigate to
...\smartgwtee-3.0p\doc\javadoc\com\smartgwt\client\docs\...

No Balsamiq chapter? Jumps from AutoTest.html to BaseLine.html.

Please advise, thanks.

[Isomorphic]

3.1d not 3.0p