{"id":4648,"date":"2012-05-03T09:15:08","date_gmt":"2012-05-03T07:15:08","guid":{"rendered":"http:\/\/blog.orange11.nl\/?p=4648"},"modified":"2012-05-03T09:15:08","modified_gmt":"2012-05-03T07:15:08","slug":"creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/","title":{"rendered":"Creating a mobile version of your website with Spring Mobile and Sitemesh"},"content":{"rendered":"

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.<\/p>\n

<\/p>\n

Spring mobile<\/h3>\n

Spring mobile<\/a> provides you some nice features to either detect mobile devices or to give the user a choose between the \u201cmobile\u201d or \u201cnormal\u201d 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 (http:\/\/m.yourcoolsite.com).<\/p>\n

If you happen to use maven (like me) you need to add the Spring Milestone Repository and the dependency:<\/p>\n

\n    <repository>\n        <id>org.springframework.maven.milestone<\/id>\n        <name>Spring Maven Milestone Repository<\/name>\n        <url>http:\/\/maven.springframework.org\/milestone<\/url>\n    <\/repository>\n\n    <dependency>\n        <groupId>org.springframework.mobile<\/groupId>\n        <artifactId>spring-mobile-device<\/artifactId>\n        <version>1.0.0.RC1<\/version>\n    <\/dependency>\n<\/pre>\n
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 \u201cmDot<\/a>\u201d factory method to redirect your users to the mobile url.<\/p>\n
\n<mvc:interceptors>\n    <!-- On pre-handle, resolve the device that originated the web request -->\n    <beans:bean class="org.springframework.mobile.device.DeviceResolverHandlerInterceptor" \/>\n    <!-- On pre-handle, redirects mobile users to "m.yourcoolsite.com" (declare after DeviceResolverHandlerInterceptor) -->\n    <beans:bean class="org.springframework.mobile.device.switcher.SiteSwitcherHandlerInterceptor" factory-method="mDot">\n        <beans:constructor-arg value="yourcoolsite.com" \/>\n    <\/beans:bean>\n<\/mvc:interceptors>\n<\/pre>\n
That is all there is for the Spring configuration, so next up is the Sitemesh configuration.<\/p>\n
Sitemesh<\/h3>\n
In my normal website I use Sitemesh (version 2.3) as my layout templating framework.\u00a0 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.\u00a0 The first page of my website is a login screen.\u00a0 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.\u00a0 Here is a screenshot of my mobile login page:<\/p>\n
\"login\"<\/a><\/p>\n
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:<\/p>\n
\n    <decorator name="main" page="main.jsp">\n        <pattern>**<\/pattern>\n    <\/decorator>\n\n    <decorator name="mobile" page="mobile-main.jsp"\/>\n<\/pre>\n
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:<\/p>\n
\n<property name="decorators-file" value="\/WEB-INF\/decorators.xml"\/>\n\n<decorator-mappers>\n    <mapper class="nl.orange11.web.SpringMobileParameterDecoratorMapper">\n        <param name="config" value="${decorators-file}"\/>\n    <\/mapper>\n<\/decorator-mappers>\n<\/pre>\n
SpringMobileParameterDecoratorMapper.java:<\/p>\n
\npublic class SpringMobileParameterDecoratorMapper extends ConfigDecoratorMapper {\n    private String decoratorName = null;\n\n    public void init(Config config, Properties properties, DecoratorMapper parent) throws InstantiationException {\n        super.init(config, properties, parent);\n        decoratorName = properties.getProperty("decorator.name", "mobile");\n    }\n\n    public Decorator getDecorator(final HttpServletRequest request, final Page page) {\n        SitePreference sitePreference = SitePreferenceUtils.getCurrentSitePreference(request);\n\n        if(sitePreference != null && sitePreference.isMobile()){\n            return getNamedDecorator(request, decoratorName);\n        }\n\n        return super.getDecorator(request, page);\n    }\n}\n<\/pre>\n
In the mapper I check if the user has specified a site preference. The util method that I use checks if the URL parameter<\/a> 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.<\/p>\n
Controller<\/h3>\n
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.<\/p>\n
\nSitePreference sitePreference = SitePreferenceUtils.getCurrentSitePreference(request);\n    if (sitePreference == SitePreference.MOBILE) {\n        view = "mobile\/" + view;\n    }\n<\/pre>\n
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<\/a>, 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\u2019t need to create different views for smartphone, tablet or desktop platforms.<\/p>\n
Well that’s it! I hope that my post helped some of you in your journey of creating great mobile websites \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":102,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[87,55,10,94],"tags":[292,11,67,44,70],"class_list":["post-4648","post","type-post","status-publish","format-standard","hentry","category-html5-mobile","category-mobile","category-development","category-spring","tag-html5","tag-java","tag-mobile","tag-mobile-development","tag-spring"],"acf":[],"yoast_head":"\nCreating a mobile version of your website with Spring Mobile and Sitemesh - Trifork Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a mobile version of your website with Spring Mobile and Sitemesh - Trifork Blog\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/\" \/>\n<meta property=\"og:site_name\" content=\"Trifork Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-03T07:15:08+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png\" \/>\n<meta name=\"author\" content=\"Roberto van der Linden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto van der Linden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/\",\"url\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/\",\"name\":\"Creating a mobile version of your website with Spring Mobile and Sitemesh - Trifork Blog\",\"isPartOf\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png\",\"datePublished\":\"2012-05-03T07:15:08+00:00\",\"author\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35\"},\"breadcrumb\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#primaryimage\",\"url\":\"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png\",\"contentUrl\":\"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/trifork.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a mobile version of your website with Spring Mobile and Sitemesh\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trifork.nl\/blog\/#website\",\"url\":\"https:\/\/trifork.nl\/blog\/\",\"name\":\"Trifork Blog\",\"description\":\"Keep updated on the technical solutions Trifork is working on!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trifork.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35\",\"name\":\"Roberto van der Linden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g\",\"caption\":\"Roberto van der Linden\"},\"url\":\"https:\/\/trifork.nl\/blog\/author\/roberto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a mobile version of your website with Spring Mobile and Sitemesh - Trifork Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/","og_locale":"en_US","og_type":"article","og_title":"Creating a mobile version of your website with Spring Mobile and Sitemesh - Trifork Blog","og_description":"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 […]","og_url":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/","og_site_name":"Trifork Blog","article_published_time":"2012-05-03T07:15:08+00:00","og_image":[{"url":"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png","type":"","width":"","height":""}],"author":"Roberto van der Linden","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Roberto van der Linden","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/","url":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/","name":"Creating a mobile version of your website with Spring Mobile and Sitemesh - Trifork Blog","isPartOf":{"@id":"https:\/\/trifork.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#primaryimage"},"image":{"@id":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png","datePublished":"2012-05-03T07:15:08+00:00","author":{"@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35"},"breadcrumb":{"@id":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#primaryimage","url":"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png","contentUrl":"http:\/\/blog.orange11.nl\/wp-content\/uploads\/2012\/04\/login_thumb.png"},{"@type":"BreadcrumbList","@id":"https:\/\/trifork.nl\/blog\/creating-a-mobile-version-of-your-website-with-spring-mobile-and-sitemesh\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/trifork.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a mobile version of your website with Spring Mobile and Sitemesh"}]},{"@type":"WebSite","@id":"https:\/\/trifork.nl\/blog\/#website","url":"https:\/\/trifork.nl\/blog\/","name":"Trifork Blog","description":"Keep updated on the technical solutions Trifork is working on!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trifork.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35","name":"Roberto van der Linden","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g","caption":"Roberto van der Linden"},"url":"https:\/\/trifork.nl\/blog\/author\/roberto\/"}]}},"_links":{"self":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/4648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/users\/102"}],"replies":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/comments?post=4648"}],"version-history":[{"count":0,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/4648\/revisions"}],"wp:attachment":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/media?parent=4648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/categories?post=4648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/tags?post=4648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}