Under the sitemesh-common folder duplicate all files with “iphone” in the name but replace the “iphone” with “mobile”.  Then open each new file and replace any paths that reference the “iphone” directory with the same paths under our new “mobile” directory.

Under the sitemesh-decorators folder also duplicate all files with “iphone” in the name but replace the “iphone” with “mobile”.  Then open your newly created main-mobile.jsp file.  This main sitemesh file will be used as the shell for all of our mobile pages.  The HTML header contains several iPhone-specific tags that we don’t need so let’s remove them. Just remove everything with "Apple" in the tag.

iPhone Image Links and Meta Tags

iPhone Image Links and Meta Tags

Also in the HTML header are two link tags that link to external stylesheets.  The first is to the iWebKit stylesheet that is used to get that fancy iPhone look and feel.  The second is to a MyEclipse for Spring provided sheet that overrides some of the rules in the iWebKit stylesheet.  Remove one of them and change the second one to link to our style-mobile.css stylesheet.

iPhone CSS Links

iPhone CSS Links

Scroll down to the body of the main-mobile.jsp file and change the references to dashboard-iphone and footer-iphone to use our mobile versions instead.  We’re going to leave those dashboard and footer files alone but you could change them to contain something special for your non-iPhone mobile apps.  Save the main-mobile.jsp file.

Now let’s configure sitemesh to use these new mobile files.  Open the sitemesh.xml file located directly in the WEB-INF folder.  The sitemesh.xml file contains two decorator-mappers, one for the spring mvc decorators and one for the iphone decorators.

Generated Decorator Mappers

Generated Decorator Mappers

We need to create a mapper for our new mobile files that will direct some other mobile browsers to our new sitemesh files.  The mappers work by matching any string in the user-agent string of the HTTPRequest header.  You can find the two new mappers for Android and Palm Pre here. Just paste them into your sitemesh.xml after the iPhone matcher.

I created the new mappers by copying the iphone mapper and changing the name to match on Android or webOS and the value attribute to “mobile”.  That "mobile" value attribute corresponds to the suffix we put on all of our sitemesh files.  There are many web resources that can help you understand what the user-agent strings are for the various browsers and handsets.  I want to match on Android and Palm Pre so my decorator-mappers will look like this when I’m done:

Android and Palm Pre Decorators

Android and Palm Pre Decorators

Note that I created two mappers pointing to my single mobile site. I also used very simple match strings. You can be more specific, I just wanted to pick up all Android phones and all Palm devices that specify webOS.

Disclaimer: There are other technologies that can be used to re-direct browsers based on user agents and browser capabilities.  The mechanism I’m using is the simplest for the MyEclipse for Spring generated applications because it adds to the existing scaffolded configuration.

Related Posts

TypeScript 2.4 — Even More Reasons to Love i... Perhaps you are already enjoying all the amazing features TypeScript (TS) adds to JavaScript: you might already be in love with its interfaces, abstract classes, and algebraic data types, among many others. TS 2.4 brings more good news. This version of TS comes loaded with improvements, ranging from dynamic import expressions to weak type detection...
2017 CI 8 Keeps Adding to the Treasure Chest Good news - our new release is out the door! For Angular IDE and Webclipse, we give you access to a brand new Eclipse experience with our DevStyle Preview. MyEclipse includes some key bug fixes in the Spring / Maven project area, and a new version of the Eclipse Buildship toolset, for improved Gradle support. Across these products, we’ve now added ...
Equifax Data Breach Advisory Many of you may have heard of the Equifax data breach, possibly affecting millions of consumers. Information accessed by hackers during the incident included Social Security numbers, personal details, driver’s license numbers, and even credit card numbers.Equifax has confirmed that the breach was made possible by a vulnerability in the Apache Strut...
Creating a Bus Fare Comparison App with Angular 4 ... In this Angular tutorial, you will learn how to create an app to compare bus fares. We will be using Angular IDE to create our application, which will fetch bus fare data using goibibo's web services.Creating a New Angular ProjectIn the new Angular project wizard, enter BusFareCompare as the project name. We used Angular CLI version 1.1.0, Node.js ...

Posted on Aug 9th 2010