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.


Posted on Aug 9th 2010