Touchpad client for Alfresco based on jQuery Mobile

2011-01-27

As many others did this christmas I got myself an iPad. And what better use could have of your Touchpad than browse your document repository with it?


Alfresco Share isn’t really Touchpad friendly, and the beta Mobile client Alfresco did hasn’t been updated for the latest versions. My guess is Alfresco will release something more touchpad/mobile friendly, but why wait?

I wanted to create something web based, and found the jQuery Mobile framework:

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

It is still Alpha, but with this framework I could really quickly create a simple browser based client. And since jQuere Mobile tries to support as many plattforms as possible, it should work not only with iPad, but Android and Blackberry devices as well.

I did this within the existing Share client instead of creating a standalone, This so I could reuse what is already there, such as login and connectivity to repo. Current Share login dialog is not optimal with touch screens as it insist on recenter itself, but that could be fixed. I’ve reused some javascript code from Alfresco dashlets, and the old mobile client, and created some new code. I didn’t have to create any client side javascript code for now, as the client just support browsing Share Sites. That would probably change once you start adding more advanced stuff, but I’m really amazed what you get out of the box of jQuery Mobile.

There are some design decisions that could probably be changed. jQuery Mobile uses ajax based page loading with # in the url,/basefolder/basepage.html#subfolder/subpagetoload.html. In this case it loads /basefolder/subfolder/subpagetoload.html. I first wasn’t sure if this supported absolute paths and that it would work with Share pages, so I created on start page, /share/page/lxmobile that is subpaged, /share/page/lxmobile/{mpage}, with components instead to support relative paths. I ended up using absolute paths in links anyway to have it working safely, and would use stand alone pages if starting over again.

You can download and test this yourself. Source code is attached (download here) tested with Community 3.4.c, and to test this you can drop the lxmobile.jar in webapps/share/WEB-INF/lib and restart. The are many features of jQuery Mobile that could be useful, such as dialogs, buttons and forms, if it is to be taken to the next level of actual usability.