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

Updating your Angular app to Angular 4 Hopefully at this point you are no longer lost in Angular migration -- you’ve either installed the lastest version of Angular or have upgraded to it.  But what if you still have an app that you’d been working on with Angular 2, for instance?  No worries!  It’s a breeze getting it up to speed!An Angular 2 project can be updated to Angular 4 with jus...
Software Delivery Evolving for You! Getting all the right software packages to the right teams is not your regular pizza delivery! Our Secure Delivery Center (SDC) has been making administrators’ lives easy by allowing them to provide end users with software, manage licenses, software updates, rollouts, and standardization -- all from one spot. Located behind your firewall, it has ho...
CI5, CI5, Open Up! The new software updates are h... Continuous improvement is Genuitec’s priority -- CI5, the 9th release this year, has opened up for you already! We have worked our magic on TypeScript (TS), Angular and Darkest Dark. Take a look at what we’ve come up with!Many secret ingredients have come together to make your TS experience a charm. If you’re already using TSLint 5 for your project...
Angular — Ms. Popular of Frontend Developmen... Even though she’s been around for awhile, Angular hasn’t lost her popularity.  More and more companies are giving preference to Angular when it comes to their webpage development.  Why might that be?  In reality, there is a whole gamma of good reasons, and some of the key participants in the digital world have been quick to pick up on them.  Angula...

Posted on Aug 9th 2010