One of the things I like the best in Sparx Enterprise Architect, and what I find a key selling point, is its continuous development. I first met it almost ten years ago, and I’ve seen a lot of improvements and new features—BPMN support, structured scenarios, specification manager and template fragments, just to mention a few. For this reason, the release of each major version is more than exciting for me. The next major release, Enterprise Architect 12, should be out in the near future, as RC2 has already been released. In addition to delivering a second phase of the UI revamping, a couple of new features have also been incorporated, one set primarily focused at database modeling and generation and XSD creation, and the other set being the wireframing feature. I’m gonna discuss this latter in this post.

Catching Up with the Trend

User interface prototyping, often called wireframing or sketching gained great popularity in the recent years, mainly due to the emerge of agile methodologies, which introduced more interaction to software development between clients and vendors. Creating early UI sketches is a great way to conduct bilateral communication with the clients, since most of the clients can imagine a software in terms of screens, and screens, be they sketches, appear as real deliverables and results, and therefore strengthens the trust against vendors, by demonstrating they deliver actual products, not only unintelligible designs.

The guys in Australia, in Sparx’s HQ, decided to catch up with this trend, and they made a good decision. However EA offered a feature to design screens, it was not a great one—primarily because the screens looked like Windows XP dialogs, and therefore they were not ready to present to users expecting modern applications.

Why I Missed It

During the years, EA became a very great and comprehensive tool. In addition to great modeling functionality, its project management features make it suitable to drive and manage non-overadministered projects, and its testing features enable teams to keep testing and modeling together. But I always had to use one external tool—something for GUI prototyping.

It was always a nightmare to copy-and-paste externally created screens into the EA repository, and place them as bitmap images to diagrams, with no semantics with respect to the contents on the screen. And when the models changed, I had to remember to update the screens, and when pasting the screens, I had to check if I added anything not defined in the model and so on.

Wondering how could I live in such a world? 🙂 I used other tools, namely Microsoft’s Expression Blend and BalsamIQ. Expression Blend has great features, but it was way too complex for a business analyst to quickly put a site or application prototype together. BalsamIQ, on the other hand, has a lot of controls, but it’s way too thin as a client: no real means of organizing your screens, and no real means of interchanging its data with any other tools. Also, the lack of templates or some structuring (I mean something like user controls in GUI frameworks) made change management challenging and error-prone.

Say Hello to Wireframes

As usual, everything is organized in and around the repository and a model in EA. Wireframes are views in models (the root packages) that is, they are first level subpackages. From this point on, you are free to organize your screens into lower-level packages to get a structure logical for you. Screens and controls are model elements (stereotyped classes), and as you place controls to container controls, they will appear below the container in the Package Browser, so you will have a control hierarchy, similarly to building activity diagrams.

I’ve put the following screen together in an hour or so with no prior knowledge of how it works.

Screenshot of a website sketch in EA

You can say, and you would be right, you can craft this screen in 20 minutes in BalsamIQ—but you could not do it at all in EA until now, so the 1 hours is a good result, I think.

The following screenshot shows the package browser with some UI controls organized into hierarchy:

Project Browser pane in Sparx EA with wireframe objects

This gives a nice representation of the screen structure, and allows for easy restructuring of hierarchies.

The details of the various controls can be customized on the well-known Properties dialog. The fields to edit, however, differ per control: for simple controls, like labels, you simply enter a name, and that will display on the screen. In case of table controls, for example, you can edit the table contents on a separate tab. For combo boxes, you can specify the list items in a memo type tagged value property.

Wireframes in Sparx EA – Properties of a Progress Bar

This screen shows the Properties dialog of the progress bar with the Customer > Items > Discounts > Verification > Confirmation sequence of wizard steps. The progress bar items can be set on the Wireframing subtab of the General tab of the Properties dialog. When you select the Steps field, you can click the button from which arrow 3 originates to edit the items of the progress bar (better to say, stages of a process). After completed, you can select the current item in the Steps field.

If you are accurate enough in designing the UI, you can even use that segment of the model to generate some code to base GUI development on it.

A Bright Future?

I hope so. With the introduction of wireframe models, covering the form factors and visual attributes of Windows, websites, Android phones/tablets and Apple phones/tablets, the sketching process will take place in EA, and no more will I need to copy-and-paste screenshots as images to diagrams. In the future, however, not today.

This current and first version of the wireframing feature suffers from some drawbacks:

• The selection of controls is quite narrow, as well as the customization options—for example I could not find a way to align text in table controls, all text is center-aligned.
• Coloring and other visual customization options are missing. You can not even use the standard line and fill colors, however it would be great to highlight or demote various portions of the UI time to time.
• When you create a screenshot using the CTRL+B shortcut, which invokes the Copy Diagram Image function, the borders of your controls behind other controls reveal, and makes results a bit messy:
  

  Wireframes in Sparx EA – Z order not respected

• Since each control is an element in your model, you cannot place one item to the diagram several times. This fundamental and, I think, bad concept of EA prevents you from copy-pasting a simple user control, such as a label or field, which cuts productivity.
• There are no complex but common controls, such as labels with text and hyperlink combined. While it is easy to create the footer shown on the screenshots in BalsamIQ or Expression Blend, it’s a nightmare in EA, since you need as many controls as many hyperlinks you want, plus one for each separator.

Summary

I’m very excited to see the production version of EA 12. I think I’ll be able to keep GUI prototyping and modeling in one package, with GUI semantics, at least for simpler UIs. The wireframing feature has a number of teething troubles, when compared to BalsamIQ, for example, but hack, BalsamIQ had years to be developed, and we can safely assume wireframing will improve a lot over time. It is a very good step in a good direction.