Go Back   SmartClient Forums > Smart GWT Technical Q&A
Wiki Register Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 28th Mar 2012, 19:52
Isomorphic Isomorphic is offline
Administrator
 
Join Date: May 2006
Posts: 37,994
Default 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 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):

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!

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

Last edited by Isomorphic; 11th Jun 2012 at 13:27..
Reply With Quote
  #2  
Old 13th Apr 2012, 12:26
tinnitus007 tinnitus007 is offline
Registered Developer
 
Join Date: Sep 2010
Posts: 155
Default

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.
Reply With Quote
  #3  
Old 13th Apr 2012, 13:04
Isomorphic Isomorphic is offline
Administrator
 
Join Date: May 2006
Posts: 37,994
Default

3.1d not 3.0p
Reply With Quote
  #4  
Old 29th Jan 2014, 05:03
johng johng is offline
Registered Developer
 
Join Date: Feb 2013
Posts: 1
Default 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.
Reply With Quote
  #5  
Old 29th Jan 2014, 08:00
Isomorphic Isomorphic is offline
Administrator
 
Join Date: May 2006
Posts: 37,994
Default

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().
Reply With Quote
  #6  
Old 31st Jan 2014, 03:46
pegasuswebservices pegasuswebservices is offline
Registered Developer
 
Join Date: Apr 2013
Posts: 9
Default 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?
Reply With Quote
  #7  
Old 31st Jan 2014, 05:55
Isomorphic Isomorphic is offline
Administrator
 
Join Date: May 2006
Posts: 37,994
Default

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.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads
Thread Thread Starter Forum Replies Last Post
Microsoft Windows Internet Explorer 9 supported? evansmith1 Smart GWT Technical Q&A 9 6th Feb 2012 09:48
"this.form is null or not an object with ValuesManager" atlanticdecisionsciences Smart GWT Technical Q&A 13 2nd Feb 2012 08:25
IBATIS/SPRING GWT-RPC DataSource implementation meindert Smart GWT Technical Q&A 4 1st Feb 2012 17:02
The Smart GWT FAQ Isomorphic Smart GWT Technical Q&A 0 27th Oct 2009 17:41
I cannot filter data using criteria contdav Smart GWT Technical Q&A 5 12th Mar 2009 15:50

© 2010,2011 Isomorphic Software. All Rights Reserved