Help

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!

11 comments:
 
13. May 2009, 14:25 CET | Link

Amazingly handy and smart !

Thanx a lot for sharing this.

Regards,

Cédric Vidal

ReplyQuote
 
13. May 2009, 15:59 CET | Link
Looks like a genius idea! I am wondering if you've heard about WireframeSketcher Eclipse plugin. It looks to me that your project and WireframeSketcher could make a perfect fit.
 
13. May 2009, 16:10 CET | Link
I still prefer to use an UI designer. The SWTBuilder does the amazing job for that. It can also start from the existing code or even allow to copy/paste UI elements between dialogs/panels.
 
13. May 2009, 18:29 CET | Link

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

 
13. May 2009, 18:34 CET | Link

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

 
13. May 2009, 18:38 CET | Link

Awesome!

Thanks for sharing this, Elias.

 
13. May 2009, 21:25 CET | Link
I've done all of m2eclipse UI and some Mylyn dialogs in the SWTBuilder, so the thing works if you invest little bit of time into cleaning up your code. It worth it.
 
13. May 2009, 21:45 CET | Link

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

 
13. May 2009, 22:23 CET | Link
Stefan Hansel | stefan.hansel(AT)tolina.com
Great !
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
 
04. Jun 2009, 02:14 CET | Link

Max, I've just added the Spy functionality to the WireframeSketcher plugin. For more details see my blog post.

 
05. Jan 2010, 23:55 CET | Link
We currently use Balsamiq for Mockups in our Software design, but embedded in Confluence as a plugin.
This works amazingly well and is spreading across our company very quickly.

Nice post.
Post Comment