Behind The Scenes: The WireframeSketcher Plug-in

The Eclipse eco-system has proven itself to be a breeding ground for innovation. We're starting to see some top quality plugins being provided for the IDE, allowing us to do more in the comfort of Eclipse. When Petru submitted his announcement about WireframeSketcher I had to give it a test drive straight away. Creating screen mockups this easily is key to rapid development.

I caught up with Petru to find out more about his experiences developing the plugin. It is an interesting story of iterative development and making use of the frameworks within Eclipse.

James Sugrue: Could you introduce yourself, and you experience with Eclipse?

Petru Severin: My name is Petru Severin and I am the author of WireframeSketcher plugin. I have 9 years of professional experience behind me, mostly developing Java software. My first contact with Eclipse must have been around 2002. I wrote my first plugin in 2003.

Sugrue: WireframeSketcher looks like a very complete plugin - what motivated you to create it?

Severin: I had the idea for this product for some time now and it looked to me simple enough to get done in my free time. I wanted a software tool that would replace my paper and pen UI sketches with a digital version. I couldn't find an existing tool that was simple enough for this task. In my head it had to be a mix between a graphical editor and a GUI designer without all the complexity.

WireframeSketcher allows to draw screens using a palette of common UI elements or widgets. Almost every widget can be populated with data by directly editing its text using a wiki-like syntax. Widgets interpret the text and give it an appropriate graphical representation.

For example the Popup widget takes a multi-line text where each line represents a menu item and a dedicated character sequence represents menu separators. Another example is the Table widget which accepts text in CSV format for its data.

This approach makes the tool both simple and flexible at the same time. I plan to evolve the accepted text syntax to represent other UI aspects. Think links in paragraphs, checkboxes in table cells or sorting indicators in table headers.

Sugrue: What technologies are behind the project? Is there extensive use of GEF or GMF?

Severin: I am using GEF and EMF plugins extensively; GEF is used for UI part and EMF for the model. The two plugins are a perfect marriage. I've used GEF before with a custom model and had to pay the price of manually maintaining all my model classes and writing the notification code. With EMF this is all history. I use its graphical tool to describe the model and all the rest is automatically generated for me. Additionally the XML persistence of the model is built-in.

Sugrue: Could you take us through the process of creating the plugin. What were the main challenges?

Severin: I think the main challenge was to get familiar with all the APIs and extension points provided by Eclipse. Eclipse is an excellent platform but sometimes its complexity can be intimidating.

While developing WireframeSketcher I used an incremental approach. My very first version had only 4 widgets, used plain Java beans for it's model and used Java serialization for persistence. This version was for my eyes only, but it worked and I could continue improving on that.

Later I've migrated to an EMF-based model with XML serialization, included support for Outline, Properties and added more widgets.

Another challenge was to try and keep things simple. I constantly had to force myself to remove features from my todo list so that version 1.0 could see the light.

Sugrue: What are your plans for the future of the product? Have you any other ideas that you are working on?

Severin: I have a big list of improvements for WireframeSketcher. However I am trying to gather as much feedback as possible from my first version. I think the product is far from being complete but I would like the users to have more say in its future direction.

One big feature I plan to add is storyboarding. The main idea is to allow screen mockups to be grouped into a story that describes a use case. A story can then be exported to PDF/HTML formats or presented in full-screen using an internal slideshow tool.

For those interested I wrote a blog post with ideas for next versions: http://wireframesketcher.com/blog/2008-12-06-the-road-ahead.html

Sugrue: From all the frameworks available in the Eclipse eco-system, which do you find most useful?

Severin: I would have to give my vote to GEF. It's an exceptional piece of software. Graphical editors can be very complex to get right and the team behind GEF just managed to make this domain accessible to anyone willing to learn the framework!

Otherwise the whole Eclipse platform is just excellent! I am constantly impressed with the quality of APIs that are in there. The platform provides a solid base for application writers and should be seriously considered for any GUI software of non trivial complexity.