iPhone Web Development using Spring Web MVC

This post builds on last week’s post about how to polish your mobile optimized website to work best with the iPhone. This week I’ll talk about mobile web development using the Spring Web Framework. I’ve been using the Spring Framework to integrate most of my code base and I was interested in how Spring Web Framework would work with a mobile optimized site. As the Spring Web Framework is mostly back-end I didn’t really expect any front-end integration issues….

Spring Web

Spring Web MVC provides a Web framework around the Model-View-Controller paradigm. As we see with the workflow picture below this paradigm neatly integrates your presentation level (the View) with your business logic (the Controller) written in Java and XML.

Incoming Request workflow in Spring Web MVC (courtesy of http://static.springsource.org)

If this diagram looks intimidating you might want to check out the Spring Web Framework documentation.

Spring Web for Mobile

Most major websites need some form of mobile optimization. Here we talk about the specific changes to Spring Web to develop our iPhone app’s website: StripeyLines. These changes are split into three main sections:

1. Structuring our mobile optimized site – We wanted our website for StripeyLines to show one set of HTML pages for our mobile users and another set for our non-mobile (err PC?) users.
2. Detecting mobile browsers – We wanted to neatly structure how the browsers user-agent was detected.
3. Using mobile optimized forms – We wanted to have mobile optimized forms in the style of my previous post.

Structuring our mobile optimized site

Ideally, to make a website for multiple devices we would have the same HTML for both browser types and swapped HTML – but the defacto mobile web standards set by Apply forbid this. Instead we have mirrored content across both mobile optimized and our PC website. This was organised using a strict naming convention:  all our PC pages ended in .jsp all the corresponding mobile pages ended in -m.jsp - which is manageable for our size project. If anyone has a different preferred style you can add to the discussion below.

Detecting mobile browsers

Having neatly structured out the HTML content into PC and mobile files all we needed was to direct the user to their corresponding page. We followed the Spring Web standard and made all our public URL’s end in .htm which then resolved to a JSP page ending in .jsp or -m.jsp.

Implementing this involved extending the standard Spring Web workflow to intercept incoming requests, notably the SimpleUrlHandlerMapping, which can be found in your Spring <servlet-name>-servlet.xml file. Here is ours below:

<!--
This bean maps URL requests to controllers.
-->
<bean id="handlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<!--
  This interceptor catches all requests and redirects them to portal or mobile html content.
-->
<property name="interceptors">
   <list>
     <ref bean="MultiViewController"/>
   </list>
</property>

<!--
   Catch all .htm requests and use a simple controller to present them
-->
<property name="mappings">
  <props>
    <prop key="/*.htm">ForwardViewController</prop>
  </props>
</property>

</bean>

There are two beans we reference in the exert above: the MultiViewController, which intercepts each incoming request, and the ForwardViewController which handles incoming requests ending in .htm. Whilst the ForwardViewController does nothing, the MultiViewController integrates with Spring by extending the Interceptor interface as shown below.

/**
 * This Interceptor decides whether to present mobile or PC html content.
 */
public class MultiViewController extends HandlerInterceptorAdapter {

This class overrides the postHandle method to additionally:

1. Detect the user-agent
2. Alter the incoming request to either -m.jsp or .jsp
3. Handle requests of unknown pages

Spring Web Forms

Spring Forms are a nice feature of the Spring Web Framework. Spring Forms simplifies Web Development for Java Developers by abstracting HTML forms to Java Objects. For example, the follow snippet in my JSP:

<form:form>
     First Name:<form:input path="firstName" />

would automatically populate the attribute ‘firstName’ of a Java Object when submitted.For those fearful of frameworks, the JSP is compiled to this familiar HTML:

<input type="text" value="" name="userEmail" id="userEmail">

Note the type of “text” is assumed by the Spring Integration.

Spring Web Forms for iPhone

Last week, we optimized HTML forms for the iPhone. This optimization required un-standard HTML but surprise surprise Spring Forms only generate standard HTML. Spring Form’s inputs have the standard HTML types: input, select – they do not have an ‘email’ type. Any tinkering is blocked at compile time by Spring’s Form Tag library definition.
I’ve thought of recommending this extension to future Spring Web implementations but I wouldn’t want to encourage un-standard approaches to web development – have readers any views on the matter?

In the end, I opted for a Javascript solution to change the HTML dynamically when the page is loaded.

So, I defined a Javascript function to convert the input element

/**
 * This javascript is a workaround for presenting mobile safari tags using spring MVC.
 */

/**
 * This function takes an element id and converts it to an email input, removing
 * apple's auto correct / capitalise.
 *
 * @param elementId
 *            the HTML text input into an email input for iPhone optimization
 */
function convertToEmailInput(elementId) {
	document.getElementById(elementId).type = 'email';
	document.getElementById(elementId).setAttribute('autocapitalize', 'off');
	document.getElementById(elementId).setAttribute('autocorrect', 'off');
}

On page load I call the Javascript function with its reference to convert any HTML input fields. The following HTML snippet converts the userEmail input introduced above:

<body onload="convertToEmailInput('userEmail');">

I swallow a bit of pride in posting this, but if anyone has anything to contribute to this page please comment. When I was developing this solution I couldn’t find any Web resources to my aid! In the following weeks I’ll contact the Spring Web team and ask for some mobile extensions – if you have any thoughts on the matter leave a comment.