Balsamiq Support timeframe?

[grayner]

the FAQ mentions automated support for Balsamiq mock ups.

"If you are considering GWT Designer for creating mockups, we recommend using
Balsamiq mockups instead. This tool is much better suited for rapidly & collaboratively
creating mockups, and can be used by non-developers since it is not Eclipse-based.
We also plan future support for converting Balsamiq mockups into live Smart GWT code, in such
a way as to maximally take advantage of data binding, so it makes sense to familiarize yourself
with this tool now."

Can you provide some information on when this is expected to be released?

[Isomorphic]

Hello Grayner,

A specific release date has not been set, however, if you'd like, we can add you to a list of users that will receive the first preview release. Let us know if this is interesting (just reply here).

[bbruyn]

Let us know if this is interesting (just reply here).

Interesting to me. Sign me up, please. :-)

[mv200580]

Very interesting. Sign me too, please.

[grayner]

yes - please include me in the beta release

[gregbenolkin]

yes me too - please include me in the beta release

[amcculley]

I'd like to sign up for this as well. We use Balsalmiq very often.... but we see ourselves loving Axure as well. But for rapid / low-fidelity prototyping, nothing beats Balsalmiq, imo.

[Isomorphic]

We've now made Balsamiq import functionality available in nightly builds of SmartGWT 3.1d and SmartClient 8.3d - download it 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.

NOTE: in order to see the Balsamiq Import menu item in Visual Builder, you must set balsamiq=true in the URL when launching Visual Builder.

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 under webroot, 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.

[abcabd22]

I am trying to create GWT based HTML code based on Balsamiq mockups. We do not have a Isomorphic license, and am wondering how we can download a version that will allow us to try this feature before we buy it. Thanks.

[Isomorphic]

Evaluation is free - download a 3.1d build from smartclient.com/builds.

[Rauel]

Hello, I'm starting my studies in smartGWT tool and I doubt that with this excerpt here

as a standalone tool: go to <project base>/tools/bmmlImporter.jsp and an import dialog similar to Visual Builder's File -> Import dialog will immediately appear. For example, if your bootstrap .html file is at /myProject/start.html, the importer should be at /myProject/tools/bmmlImporter.jsp (be sure your project imports the same tools module required to run Visual Builder).

where should I put this url in a smartgwt application to enable the importer?

and this step can i use without the parameter to mockup for a box appears for you to select the file to import. if yes, how can I do this?

For both tools, 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

Thanks.

[Rauel]

I would like a step by step tutorial of how to do this because I'm very hard to do this

grateful.

[Rauel]

Almost solved already discovered how it is done to import the files. Bmml, but I'm not getting that arquivo.bmml be shown in the browser and the following message appears

Attempt to instantiate FilesystemDataSource denied. Set FilesystemDataSource.enabled in config to turn it on

I'm using IE as browser.

any tips on how I can fix this?