Spring Mobile, jQuery Mobile and SiteMesh

I just realized that I haven't published a blog entry in a while. Time just flies by. Anyway, I am in the midst with several other volunteers to prepare for the Atlanta-based DevNexus developer conference which will take place March 21-22.

For this year's conference I reworked the conference website application using Spring (MVC) 3.0, JPA 2.0 etc. In addition to standard clients, I started looking into supporting mobile clients as well.

My requirement was to provide a decent looking mobile interface in a reasonable amount of time (heck, it is all done during my spare-time afterall). Plus, I wanted to support multiple mobile devices at once. Out of that reason I ruled out a native client implementation (at least for now).

Another option, would have been to look at other development frameworks such as PhoneGap and Appcelerator, something I may still have to do down the road.

As I have been using jQuery quite a bit, I started exploring it using either jQTouch or jQuery Mobile. I opted into looking at jQuery Mobile as it is the official jQuery sanctioned project.

As it turns out, you can easily create create some nice looking UIs using jQuery Mobile. As an example, just point, your mobile browser, e.g. Android to http://www.devnexus.com/. This is pretty impressive considering that I have been using an Alpha 2 version with just standard theming and functionality.

I still have to work on the detail pages, but the main landing page looks fairly nice out of the box using minimal amounts of code.

On the server-side, I am using Spring Mobile, which currently is available as a M2 release. What Spring Mobile allows you to do is to detect from within your Spring MVC controllers, whether the incoming request originates from a mobile device or not.

If you need to detect specific device capabilities, you can even use a WurflDeviceResolver, but for my use case I simply need to know whether a mobile device request is coming in or not. If so, forward to a mobile version of the respective controller's jsp page.

One, question I had to solve was how to make everything work with SiteMesh, which I use for templating purposes. As I use the same Urls for mobile and standard clients (No site-switching), I ended up needing to create a custom SiteMesh DecoratorMapper extending AbstractDecoratorMapper.

public class SpringMobileParameterDecoratorMapper extends AbstractDecoratorMapper {
    private String decoratorName = null;

    public void init(Config config, Properties properties, DecoratorMapper parent) throws InstantiationException {
        super.init(config, properties, parent);
        decoratorName = properties.getProperty("decorator.name", "mobile");
    }

    public Decorator getDecorator(final HttpServletRequest request, final Page page) {

        final Device device = DeviceResolverHandlerInterceptor.getCurrentDevice(request);

        if (device != null && device.isMobile()) {
         return getNamedDecorator(request, decoratorName);
        } else {
         return super.getDecorator(request, page);
        }

    }
} 

It may not be the bestapproach to have a hard dependency onto Spring Mobile in my SiteMesh DecoratorMapper...but it works nicely so far.