Say you have a [Spring] web application and you want to make it available on the iPhone with as little cost as possible. Naturally, you can just keep the application as is, after all, the iPhone is quite capable of displaying web pages. However, if you take a regular web page and show it on the iPhone, it does not always look its best. Another option is to create an iPhone native application (or use frameworks such as Appcelerator to turn HTML, CSS & JavaScript into a native iPhone application). The native application gives you access to the iPhone hardware, but can take far too long to create.
You can try out a third route. An iPhone web application that looks almost native, but is still a web application. We have taken an existing Spring Framework-based web application and “ported” it to the iPhone. Our objectives were simple: we do not want to change the structure of our controllers (or any other Java code, for that matter); all we were prepared to do is to prepare some iPhone-specific views. Now, because we said we did not want to touch our Java code, we implemented another ViewResolver, which we called UserAgentViewResolver. The UserAgentViewResolver is a view resolver that delegates to other view resolvers depending on the user agent of the request. This means that we can have different views with the same name for each user agent. In our case, we used plain old InternalResourceViewResolvers:
...
<bean class="uk...servlet.view.UserAgentViewResolver">
<property name="viewResolvers">
<map>
<entry key="*iPhone; U*">
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/views-iphone/en_GB/" p:suffix=".jsp" />
</entry>
</map>
</property>
<property name="defaultViewResolver">
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/views/en_GB/" p:suffix=".jsp" />
</property>
</bean>
...
We used jQTouch in our iPhone views. The view itself is very simple, all we needed to do is to configure the jQTouch library and use standard HTML elements.
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="d" uri="http://uk.co.protomed/tags/display" %>
<%@ taglib prefix="buttons" tagdir="/WEB-INF/tags/buttons/" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link type="text/css" rel="stylesheet"
media="screen" href="/styles/jqtouch.css">
<link type="text/css" rel="stylesheet"
media="screen" href="/styles/themes/apple/theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script src="/js/jqtouch.js" type="text/javascript"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
cacheGetRequests: false,
statusBar: 'black'
});
</script>
</head>
<body>
<div id="home" class="current">
<div class="toolbar">
<h1>${patient.title} ${patient.firstName} ${patient.lastName}</h1>
<a class="button back" href="#">Back</a>
</div>
<div class="info">
<h1>Address</h1>
<c:set var="address" value="${patient.address}"/>
${address.address1} ${address.address2}<br/>${address.address3} ${address.postCode}<br/>
<a href="callto:${patient.phone}" rel="external">${patient.phone}</a>
</div>
...
Using the UserAgentViewResolver and jQTouch, we got an iPhone web application with animations and other features that make it feel as if it were real web application, but the server-side of our Java EE application remained unchanged!.
The end result is here:
Tags: 'iPhone Spring', iPhone, Java EE, jQTouch