No announcement yet.
This is a sticky topic.
  • Filter
  • Time
Clear All
new posts

    Import Balsamiq mockups as Smart GWT screens

    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, then take a look at the Balsamiq Import chapter - search for "Balsamiq" in the SmartClient Reference, or look at the "Balsamiq Import" chapter in 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):

    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.


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


    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.
    Last edited by Isomorphic; 11 Jun 2012, 13:27.

    Sorry to be thick about this, BUT...

    I downloaded the 4/13/12 Eval, unzipped it, navigate to

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

    Please advise, thanks.


      3.1d not 3.0p


        Can imported Mockups run client-side without java servlet?

        I use the LGPL version but am prepared to upgrade to PRO for this feature alone. Documentation points to need for a servlet implementation present for this to work. Working on a UI served by embedded C++ web servers this is a blocker for me.


          Yes, imported mockups can be used at runtime without the Java platform on the server. Take the Component XML and convert it to JavaScript files using the techniques in the Component XML overview, then load it with loadScreen().


            Screenloader can't find ScreenName.ui.xml file

            I created our project by using the samples builtInDS project. I have tried putting the Screen.ui.xml file in the shared\ui folder and tried putting the shared\ui folder in various places such as under the war folder
            and under the war\builtinds folder. No matter where I put it the screenloader can't find the file. Looking at the Console output, I see the HTTP GET try to access the ScreenName.ui.xml file and the Status 404 returned indicating file not found.

            The Component XML documentation indicates the shared\ui folder should be placed under webroot. I think this folder is parallel to the sc folder.

            Can anyone tell me what I'm doing wrong?


              Your placement sounds correct, and you can look at the EE Showcase for working samples. Make sure the file name is spelled correctly and has correct letter case. We can't really help further without code to look at and server logs of the attempt.