Online Glom update

I’ve finished up my freelance gig with Openismus and I thought it would be a good time to post an update about Online Glom. I’ve been posting weekly status reports to the Glom mailing list but, in retrospect, I probably should have posted here a little more often. But, I’m posting here now so if you haven’t checked out Online Glom yet, now’s your chance:

http://onlineglom.openismus.com/OnlineGlom/

I’ve made so much progress since my last post that I can’t list everything. Probably the two most important improvements are that the style from the mockups has been fully integrated and the details view is now working.
The Online Glom Details view page.

I’ve spent a lot of time over the last few weeks ironing out visual and interaction kinks in both the list and details views. I’m pretty happy with how things are working now. I’ve also reworked the main Glom document selection page which looks much better than the previous version.
The Online Glom Document selection page.I’ll leave list view for people to checkout on their own.

I sort of wish I had posted a few screenshots from earlier versions so that it would be easy to compare. But you can just take my word for it – the current version is a huge improvement. :-)

The Online Glom project isn’t going to end because my engagement with Openismus has finished. Murray Cumming is planning take over as lead developer and I expect he’ll post updates as things progress.

I should note that Murray has deployed an instance of Online Glom to work through the Openismus infrastructure. I’ve added a redirect so that links pointing to http://bagu.org:8080/OnlineGlom will be transparently passed on to http://onlineglom.openismus.com/OnlineGlom/.

As for what’s next for me, my plan is to work on a couple of personal projects while I look for a new opportunity. I’m not sure exactly where my search will lead, but I’m looking forward to whatever new challenges my next projects present.

Online Glom architecture

I realize that I’ve been a little quiet about things but I’m still working on OnlineGlom for Openismus. I just finished moving Online Glom to the Model-View-Presenter (MVP) design pattern that the GWT developers recommend and thought it would be useful to document how things work to make it easier for other people to jump in.

This is going to be a pretty long post, so if you just want to try the latest Online Glom, it’s here:

http://bagu.org:8080/OnlineGlom/

And if you want to build it, you can find the instructions here:

http://www.glom.org/wiki/index.php?title=Development/OnlineGlom

If you have any questions, I’m on IRC most days – server: irc.gimp.org, channel: #openismus, nick: bkonrath.

Introduction to MVP

diagram of the MVP patternThe Model objects in Online Glom are simple Data Transfer Objects (DTO) designed to optimize retrieving data from the server with the least number of requests. By GWT convention, these DTOs are in the org.glom.web.shared package.

The Presenter is where most of the work happens. Presenters are called Activities in the GWT 2.1 MVP framework and are started when a user navigates to a given Place (a bookmarkable URL in GWT terms). The start() method of an Activity is where we can request data from the server or listen for events on the event bus. We’ll use the results from the server or information from the event bus to display information in the Views. We can also use this information to change to new Places (bookmarkable URLs) and add fancy view transitions.

Views in the MVP pattern are simple and reusable. The idea is to create as much of the UI as possible when the View is created and only change small parts of the View on successive loads. This minimizes expensive DOM operations which helps keep the UI “snappy”. The main parts of the View are created in the constructor and the Activity can get data from the View (e.g. ‘String getSelectedTable()’ ) or set data in the View (e.g. ‘void setName(String name)’ ). I put a dashed arrow from the View to the Presenter in the MVP diagram because there are some situations where it makes sense for the View to change to a new Place by calling the Presenter’s goTo() method.

That covers the basics of the MVP design pattern. Unfortunately the official documentation about the MVP framework in GWT is not that great. Besides glossing over some major issues when developing even semi-complex applications, it also lacks simple diagrams which would really help explain things. For a better take on all of this GWT architecture stuff, I recommend a bunch of excellent blog posts by Thomas Broyer:

http://tbroyer.posterous.com/gwt-21-places
http://tbroyer.posterous.com/gwt-21-places-part-ii
http://tbroyer.posterous.com/gwt-21-activities
http://tbroyer.posterous.com/gwt-21-activities-nesting-yagni#!/

diagram of Online Glom layoutsThe Online Glom Layout

Ok, now’s the time to clone the code and open some classes in your favourite editor.

In keeping with the documentation style that Thomas Broyer uses in his second blog post about GWT 2.1 Activities, I made a few diagrams to illustrate how the layout in Online Glom is currently setup. A LayoutPanel is used to hold all of the Display areas which are swapped in or out depending on which Place the user is at.

Each Display area has an Activity Mapper that creates a new Activity or returns a reference to an existing Activity depending which Place it has received from the Activity Manager. The DocumentSelectionActivityMapper and the DataActivityMapper return new Activities whereas the TableSelectionActivityMapper returns a reference to a TableSelectionActivity that has already been created. This allows the ListBox to keep the table name when the user navigates to the DetailsPlace. The same logic applies when the user returns to the ListPlace. The ListActivity might be changed to work more like the TableSelectionActivity but for now a new ListActivity is created whenever the user loads the ListPlace.

Further Reading

If you’re really interested in learning more about GWT architecture, I highly recommend Ray Ryan’s Best Practices for Architecting GWT App from Google I/O 2009:

The video is a bit dated because it was filmed before the GWT 2.1 MVP framework, but it’s still worth a watch (or listen).

I also found this deck of slides by David Chandler useful:

http://www.slideshare.net/turbomanage/whats-new-in-gwt-22

Checkout pages 45, 47 and 48. Sorry, I can’t link directly to those pages or find the accompanying talk.