Creating user interfaces another way

The paragraph about the user interface generator in my last post, or my other recent attempt to explain what it does, don’t really tell you very much. I hope this quick festive example provides a better idea about how user modeling and code generation can speed up user interface development.

First I needed to think of something Christmassy that might need a simple user interface. I apologise in advance, but I chose Christmas cracker jokes!! On the plus side, they’re really simple, and a basic create, read, update and delete interface makes perfect sense. So, I got started by creating a CRUD Joke UML diagram… and about five minutes later I stopped laughing to myself! Well, it’s funnier than most cracker jokes!

Anyway, the UML tools we provide for user modeling enable you to create a new user object with the default CRUD tasks in one go. Here’s what it looks like:

User model

Next, because the user modeling is focused on the roles and goals of users, I added a few other bits just for the demo:

Roles and goals

Perhaps a better role would have been, “Joke quality monitor”, with a goal of, “Maximise Christmas laughter”… or should that be minimise… well, you get the idea!

That’s pretty much it, I can then click the “Generate User Interface…” menu option, deploy the EAR it creates to an application server and fire up my web browser. It took longer to get this far through the blog post than it did to get a working user interface (admittedly I’m a very slow writer, but still, I think that’s pretty good).

Generated user interface

(Thanks to a very old BBC article for that joke!)

The activity diagram behind the modify task above looks like this:

Activity diagram

At some point you need to put real code in for the commands to interact with the back end system, whatever that might be, but to start with the tool will generate a default implementation so you can quickly prototype and test the UI.

So that’s all there is to creating cracking user interfaces.


8 thoughts on “Creating user interfaces another way

  1. Interesting. Have you looked at the way Ruby on Rails addresses this? I’m no expert, but I think it has similar ways of creating UIs for CRUD-type data. Would be an interesting comparison.

    Anyway, this looks cool, and I could certainly see it creating more consistent interfaces (which often seems to be >= 50% of the problem). Are there nasty corner-cases that won’t work?

  2. @Andrew

    I’m not familiar with how Ruby on Rails handles CRUD UIs but user modeling has a strong user role focus, so my guess is that the two are quite different. The option on the UML palette to add an object with a set of default tasks is just a nice little productivity boost, rather than a key feature of the user interface generator.

    I would certainly agree that creating a consistent interface is one of the biggest advantages of using this technique. Building up an interface by hand over time is bad enough, but it gets worse when you start modifying things- with the user interface generator, you should always have something that consistently works the way the user expects it to.

    What kind of thing were you thinking of in terms of nasty corner-cases? There is certainly more work to do–we’re already working on new feature requests–but I believe it has real value in its current form.


    I know what you mean- maybe I should update the UI with a ‘Packer scale’ instead of the chuckle rating :)

  3. I’m not 100% sure myself to be honest. I guess I was hinting at data that isn’t appropriate to expose through CRUD, or which there already exists a (different) interface convention for, etc… I should ask you to show me this stuff sometime – it sounds interesting and I’d like to learn more.

  4. Jon

    A great post. To see things like this being developed is great, as it reduces coding required as we move towards a smarter planet.

    I have a question, if I may. I note that this was developed for MDM, but I wonder if this UI generator can be used with a different API, e.g. Twitter API instead of MDM?

    A 2nd question… are you aware of other UI generators that we can compare with this?

    Cool stuff.

  5. Hi Ben,

    In answer to your questions:

    There’s no technical reason that you can’t use the user interface generator with any API you like. You just write whatever code you need for the API you’re using for each of the commands in the activity diagram. On the other hand, the generator is currently only available with MDM Server. If you’re an IBMer and want to have a look, the best way is to find the MDM Exchange community source project.

    As for other user interface generators, I would also be interested to see how it compares. Any comments on what else is out there would be most welcome.

    Cheers, James

  6. Pingback: MDM Workbench developerWorks forum « Notes from a small field

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s