Creating a mobile version of your website with Spring Mobile and Sitemesh

by Roberto van der LindenMay 3, 2012

About a year ago I developed an Android app for my website, but as not everybody has an Android device I wanted to create a mobile version of my website. In the mobile version I want to present slightly different data to make it look more like the app. In this post I will show you how I have used Spring mobile to determine which version of the site the user wants to visit and how I used Sitemesh to select the correct decorator.

Spring mobile

Spring mobile provides you some nice features to either detect mobile devices or to give the user a choose between the “mobile” or “normal” site. In my case I want redirect the user to the mobile website based on the device and make the site available on a different URL (

If you happen to use maven (like me) you need to add the Spring Milestone Repository and the dependency:

        <name>Spring Maven Milestone Repository</name>


The configuration for resolving the device and switching the site is pretty simple. I configured two interceptors and the SiteSwitcherHandlerInterceptor allows you to configure the “mDot” factory method to redirect your users to the mobile url.

    <!-- On pre-handle, resolve the device that originated the web request -->
    <beans:bean class="" />
    <!-- On pre-handle, redirects mobile users to "" (declare after DeviceResolverHandlerInterceptor) -->
    <beans:bean class="" factory-method="mDot">
        <beans:constructor-arg value="" />

That is all there is for the Spring configuration, so next up is the Sitemesh configuration.


In my normal website I use Sitemesh (version 2.3) as my layout templating framework.  Now with the mobile version I want a complete different layout (no header or navigation). Of course you can have this all done by great CSS, but I also want sometimes to display different information. So I want to use a different decorator for the mobile website.  The first page of my website is a login screen.  On this page I want to have a link to the normal website, so that the user can decide which site he wants to use, even after I redirected the user to a mobile site.  Here is a screenshot of my mobile login page:


The first thing we need to do is to configure an extra decorator for the mobile website. So in my decorators.xml I have added the following decorator with the name mobile:

    <decorator name="main" page="main.jsp">

    <decorator name="mobile" page="mobile-main.jsp"/>

Here you can see that I have created a separate .jsp file for the mobile website. The next thing we need to do is to let Sitemesh decide which decorator it needs to use when a mobile user is visiting the site. In sitemesh.xml I configured the decorator-mapper with my custom created mapper:

<property name="decorators-file" value="/WEB-INF/decorators.xml"/>

    <mapper class="nl.orange11.web.SpringMobileParameterDecoratorMapper">
        <param name="config" value="${decorators-file}"/>

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

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

    public Decorator getDecorator(final HttpServletRequest request, final Page page) {
        SitePreference sitePreference = SitePreferenceUtils.getCurrentSitePreference(request);

        if(sitePreference != null && sitePreference.isMobile()){
            return getNamedDecorator(request, decoratorName);

        return super.getDecorator(request, page);

In the mapper I check if the user has specified a site preference. The util method that I use checks if the URL parameter that specifies a site preference is present. If this is not the case, then the util method will use your device type as a preference. Based on the outcome I decide which decorator I want to use.


Because I have different jsp files for the mobile site, but still using the same controller I need to change the view that is passed into the ModelAndView object based on the site preferences.

SitePreference sitePreference = SitePreferenceUtils.getCurrentSitePreference(request);
    if (sitePreference == SitePreference.MOBILE) {
        view = "mobile/" + view;

As you can see it does not require a lot of code to configure your mobile website. You will spend most of the time designing a good mobile layout. I have used JQueryMobile, as I think it is a great framework that allows you to quickly create a good looking interface for your mobile website. It is also cross-platform, so you don’t need to create different views for smartphone, tablet or desktop platforms.

Well that’s it! I hope that my post helped some of you in your journey of creating great mobile websites 🙂