Note: Updated version available
I've been using Balsamiq a lot lately, but I started to find it tedious to do mockup's that were additions to already existing dialogs/windows in JBoss Tools.
Then over the weekend I saw Elias Volanakis blogging about how to dump the hiearchy of SWT and with some sniffing on how the Plug-In Spy works I could very quickly create my little own SWT Spy.
The Spy simply installs a command under the Alt+Shift+F3 shortcut which then takes the window in focus, generates the appropriate XML and put it in the clipboard for easy pasting into Balsamiq.
That allows me to have something like this:
and convert it into this:
Which I then can edit and enhance as I want to.
I also created a quick video of the whole process too.
Going to save me a lot of time in the future.
You can try it out your self by using http://update.xam.dk as your updatesite in Eclipse.
I made the source available at github if others want to add support for the components I didn't got around to handle yet (Warning: It's a big hack, but get's the job done :)
Hope you find it as useful as I do - Have fun!
Amazingly handy and smart !
Thanx a lot for sharing this.
Regards,
Cédric Vidal
I have looked at the plugin but didn't like it since it was Eclipse only. I like the integration stuff Balsamiq have done. But sure, if anyone want to provide a patch to make the output work for wireframesketcher then please do.
--max
The whole point about mockups is that they aren't real - plus I constantly make any SWT or Swing UI builder crash and burn as soon as I try and use it for real development.
Hence I like Balsamiq since it never look like something I will use beyond ideas.
--max
Awesome!
Thanks for sharing this, Elias.
Got a link ? The SWTBuilder I could find were all for-pay or broken in M7.
Btw. I use mockup to avoid having to bother - If I find a Visual UI editor that works I would still use mockups because its the right balance IMO.
--max
I really like it ... tried it out ... and unfortunately it didn't work well with the app under test ;)
I suggest 3 small improvements:
- create a Text or Canvas for 'unknown' controls (or leave them out).
Currently Balsamiq can't import GUIs which have 'unknown' Controls, as you leave the original classname.
- Composites may have subclasses. These classes should be treated like Composites
- most missed Controls are Table and CTabFolder
Again - great work, just for fun I'm converting and converting :D
Max, I've just added the Spy functionality to the WireframeSketcher plugin. For more details see my blog post.
This works amazingly well and is spreading across our company very quickly.
Nice post.
And now for requests... ;)
Is there anything you can do to prevent Balsamiq seeing loads of unknown controls and popping up a message for each one of them? eg could your plugin identify the unknown controls in the first place and not include them in the XML maybe? It still works it's just a *shedload* of OK buttons to click! :)
Also, is it possible to specify a view within Eclipse so you can capture just that without the whole screen and toolbars?
Thanks for sharing this.
sorry for the late answer, but I fixed both issues see here: https://community.jboss.org/en/jbosstools/blog/2010/07/07/an-update-to-instant-mockup-for-swt
--max
Thank you! I used your work to create http://wiki.github.com/jdf/processing.py/eclipse-plugin-spec with a project of mine. Extremely handy, and I'm very grateful.
We explored the option to be able to build in a plugin to do this for using Balsamiq XML of the mockups. Unfortunately we could not take it forward since Balsamiq exports XML with absolute pixel positions unlike SWT layouts.
Since you were able to achieve SWT to BMML, I was wondering if you had also explored the reverse (BMML to SWT)? In any case, will it be possible to share your plugin code so that we can understand it and see if we are able to reverse engineer it to get BMML to SWT?
Thanks,
DJ
Dj - the link to source are in the last section of the blog.
About bmml to swt then it's theoretically possibly but not something I plan to explore at the moment since solving the problem Of proper layout without using hardcoded pixels is nontrivial. Balsamiq only support grouping with physical positions afaik.
Thanks Max. I will check up if someone in my group is interested in taking it up as a project.
DJ