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.

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.
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.

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

The 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#!/

The 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.

GWT

As I mentioned previously, OnlineGlom uses GWT for the UI with the GWT-RPC / servlet combo to interface with the Java bindings for libglom on the server. The honeymoon stage of my “relationship” with GWT is definitely over but I’m still pretty happy with it. As most people know, GWT lets you write code in Java which is compiled into optimized JavaScript that properly deals with issues between browsers. Besides the major advantage of not having to customize JavaScript for each browser, there are a couple of other nice features that I like.

One of these features is the GWT-RPC mechanism. This feature allows you to easily send Java objects back and forth between the client code and the servlet without too much hassle. There are a few restrictions on how the classes are defined but it’s easy enough to create conforming classes. A typical use for the GWT-RPC is to send model objects between the client and the server. I guess this is old news for J2EE developers but I still think it’s a neat trick and that it’s super convenient.

Another thing that I like about GWT that it’s written in Java. And I’m not just saying this because Java is one of the languages that I know well. I really think that the Java world has some great tools to make development easier and faster. The Eclipse JDT is the IDE that I use but Netbeans, IntelliJ IDEA and Emacs all offer excellent Java development environments. One of the things that I really like about the Java IDE experience is the ease at which you can debug your code. With the GWT Eclipse and Firefox plugins, you can set a break point in your code, refresh your browser and be debugging within a few seconds. It’s pretty nice.

Of course GWT development is not without problems. One of the issues that I’ve run into is the gap between developing the code and deploying the code. I’ve been deploying the OnlineGlom code on a server about once a week and I always seem to spend a few hours trying to figure out why things aren’t working. To be fair, some of the problems I’ve encountered have been caused by the fact that java-libglom uses JNI which is harder to deploy as a servlet dependency than a pure Java dependency.

Other problems, however, have been caused by the fact that the GWT team doesn’t produce the GWT Maven plugin so issues crop up as new GWT versions are released. At times it feels like the GWT Eclipse plugin and the GWT Maven plugin are trying to stomp on each others configurations. I think I have most of the kinks worked out now but it has been frustrating at times. I would use the GWT Maven plugin again in my next GWT project but I would use it from the beginning of the project rather than converting the project to a GWT Maven project mid-development cycle like I did with OnlineGlom.

One other minor issue I have with GWT is that the documentation isn’t that great. At first glance there seems to be a lot of information on the website but the example code tends to be very simplistic and it’s not always clear how to flesh out the examples into more fully functional code. Thankfully GWT is open source so not only can I use the Eclipse auto completion feature to read the javadocs as I’m writing code, but the source navigation also helps … although I think my F3 key is going to wear out soon.

Lake Bunyonyi, Kabale, Uganda

OnlineGlom

Now that I’ve spent some time with Glom, I’m really impressed with it. It wasn’t immediately obvious to me how powerful an application it is but I’m now convinced. The examples included are a good showcase of the type of database application that can be created. And OnlineGlom has the potential to make things even more useful. I was getting my VAT filing in order last weekend, shuffling through folders, emails, invoices and receipts and thought that it might be a good idea to start using a glom database application to manage my freelance company. The only thing I would want to add is support for storing PDFs in the database so that I could save PDF receipts and digitally signed invoices. I think I’m going to file a feature request for this.

If you’re still with me, you probably want to see what I’ve been up to. Here are the example glom files displayed with OnlineGlom:

http://bagu.org:8080/OnlineGlomSmallBusinessExample/
http://bagu.org:8080/OnlineGlomLessonPlanner/
http://bagu.org:8080/OnlineGlomMusicCollection/
http://bagu.org:8080/OnlineGlomProjectManagerExample/
http://bagu.org:8080/OnlineGlomOpenismusFilmManager/

So far I have the glom list view mostly working in read-only mode. I haven’t worked on the aesthetics too much so there’s no styling and the layout is pretty simple. As a proof-of-concept, OnlineGlom has been successful and the task now is to turn what I’ve done into something more generally useful. In the short term, there are a few areas that need some attention:

• Make a release of java-libglom. We need to get java-libglom bindings packaged and included in distros. This will really ease the current pain of deploying the servlet. Murray has already been working on solving the nasty Python problem we hit with the bindings. Once this problem is solved, we need to decide how we want to distribute the bindings: as a separate release?, included with libglom?, should we include the generated Java source code in the release or let distros generate the source at build time? etc.
• Finish some of the TODOs for the list view. I don’t think the list view needs to be prefect just yet, but there are few TODOs that need some work.
• Create an example selection UI. Having separate instances of OnlineGlom to show the examples and demos is not so desirable. I need to create a way for users to be able to select which example they would like to try out.
• Implement the details view.
• Implement session management. This is needed so that users can login.

As you can see, there’s still a ways to go and I haven’t even mentioned inline editing. I’ll be working on this for a least the next month so keep your eyes peeled for more updates.

On an unrelated note, I’ve decided to rent a desk in a shared office in central Amsterdam, on Leidseplein to be exact. I’m hoping to get more exposure to Dutch and improve my productivity a bit by getting out of the house. If there are any Amsterdammers that want to meet up for lunch or a drink, drop me a line. Mijn Nederlands is niet zo goed maar ik begrijp en spreek een beetje. We kunnen in Engels praten als je mijn slechts Nederlands niet wil horen.

I ended spending more time than I had planned working on the Java bindings to libglom but things are in good shape now. A few more classes and methods will need to be wrapped as development Online Glom progresses but I think most of the hard work is done.

bikes with snow, Amsterdam, December 2010

It was interesting experience using some of the more obscure features of Swig. A couple of times, when I was stuck trying to decipher the Swig documentation, I had some dark thoughts about writing the bindings by hand. But I’m glad I managed to pull myself out of those pits and stay on track with Swig. There’s no way I would have been able to come up with same amount of code coverage in the same time without using Swig.

Here’s one of the features of Swig that makes it very powerful. Libglom, along with many C++ libraries and programs, uses a custom reference counting smart pointer. Swig has support for the Boost::shared_ptr smart pointer but since libglom uses a custom smart pointer, I wasn’t able to use this feature directly. I initially wrapped the libglom smart pointer with these lines in the java-libglom interface file:

%include <libglom/sharedptr.h>
%include <libglom/data_structure/field.h>
%template(ShardPtrField) Glom::sharedptr<Field>;

This produced a Field class and a SharedPtrField class. The Field class maintained the C++ object heirarchy on the Java side of things but I couldn’t use it because libglom uses the Field class exclusively through the shared pointer. Even worse, using a wrapped cast_dynamic class in Java would go something like this code snippet from ExampleDocumentLoad:

SharedPtrLayoutGroup group = SharedPtrLayoutGroup.cast_dynamic(layout_item);
if (LayoutGroup.getCPtr(group.__deref__()) != 0) {
    printLayoutGroup(group, indent + " ");
}

Obviously not what we want. Thankfully it was pretty easy to modify the support for the boost::shard_ptr to make it work with the Glom::sharedptr. A quick post to the swig mailing list confirmed the correct way to solve the problem and I was up and running in a couple of hours. That same code snippet from above now looks like this:

LayoutGroup group = LayoutGroup.cast_dynamic(layoutItem);
if (group != null) {
    printLayoutGroup(group, indent + " ");
}

It’s not perfect yet because we’re still using a method for casting when we should be using the built in Java casting mechanism but it’s a big improvement.

I’m going make a separate blog post about the GWT side of Online Glom so stay tuned. I have been checking the GWT code into this repository if anybody wants to check it out:

http://gitorious.org/online-glom/gwt-glom

I’m going to be at FOSDEM this year and I would happy to chat about this work with whoever is interested. I’m looking forward to seeing the keynotes and checking out some of the Free Java talks. And, of course, picking up my GNOME tee .