Struts 2, JQuery Mobile, and Mobile Web Application Development
Introduction
Developing a web application for browsers on hand-held devices requires significant changes to how the view pages are rendered. JQuery Mobile provides very good support for creating web pages and widgets that work well across a number of hand-held platforms. Struts 2, a Java web application framework, works well as the back end system for handling a user's interaction with the view page and for rendering dynamically generated view pages in conjunction with JQuery Mobile.
Example Application
You can download an example web application that uses Struts 2 and JQuery Mobile. The example demonstrates a simple data drill-drown for information about cars. You can view the web application at http://www.bpjava.net/Struts_JQM (visit the web page in your hand-held device's web browser).
The example application uses Maven to manage the build and dependencies. You should be able to unzip the download and then import the example project into any Java IDE that is Maven aware. See the README.txt in the project's root folder for how to build and deploy the web application.
Using Struts 2 With JQuery Mobile
A basic web application that uses JQuery Mobile typically consists of a series of div elements with specific attributes. When the user clicks on a link, JQuery will make a call to that URL using Ajax. The result of the Ajax call is added to the DOM and the new view is loaded in the browser. (Note this explanation is simplified - be sure to consult the JQuery Mobile linking pages documentation.)
A Struts 2 action works well as the URL for a link in a JQuery Mobile enabled page. JQuery Mobile will use Ajax to call the action. After successfully processing the action, Struts 2 renders the view page fragment that JQuery Mobile will add to the DOM and load in the user's browser.
In the example application is this JSP (carCompanies.jsp). This view page is the view rendered by the carCompanies.action.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<title>Car Companies</title>
<InvalidTag name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<InvalidTag type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<InvalidTag type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="carscompanies">
<div data-role="header">
<h1>Car Companies</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<s:iterator value="carCompanies">
<s:url action="carModels" var="carModelsLink">
<s:param name="carCompany"><s:property /></s:param>
</s:url>
<li><a href="${carModelsLink}"><s:property /></a></li>
</s:iterator>
</ul>
</div>
<!-- /content -->
<div data-role="footer">
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
The JSP includes the basic page format JQuery Mobile expects. In the content div I use the ul tag with the JQuery Mobile data-role="listview" attribute and Struts 2 tags to create a list of car companies. Each item in the list is a link to the carModels.action with the URL query parameter carCompany having a value from the carCompanies list.
The Struts 2 framework renders this part of the view page as:
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="/Struts_JQM/carModels.action?carCompany=Acura">Acura</a></li>
<li><a href="/Struts_JQM/carModels.action?carCompany=Audi">Audi</a></li>
<li><a href="/Struts_JQM/carModels.action?carCompany=BMW">BMW</a></li>
</ul>
</div>
When the user "clicks" on a link, JQuery Mobile will make another Ajax call to the carModels.action. That Action class will use the value of carCompany to create a list of Car objects for the provided carCompany. The view page rendered by Struts is below:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<div data-role="page" id="<s:property value='carCompany'/>" data-add-back-btn="true">
<div data-role="header" >
<h1><s:property value="carCompany"/> Cars</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<s:iterator value="carModels">
<s:url action="carInfo" var="carLink">
<s:param name="carModel"><s:property value="model" /></s:param>
</s:url>
<li><a href="${carLink}"><s:property value="model" /></a></li>
</s:iterator>
</ul>
</div>
<!-- /content -->
<div data-role="footer">
</div>
<!-- /footer -->
</div>
Since this view page will be added to the DOM of the carCompanies.jsp that is displayed in the user's web browser, I just need to include the div elements that JQuery Mobile needs to display. I again use the JQuery Mobile listview widget and Struts tags to display a list of cars. Each car model displayed is a link to another Struts 2 Action (carInfo.action).
Summary
JQuery Mobile provides extensive support for creating user interfaces for web applications designed for browsers on hand-held devices. Struts 2 works well with JQuery Mobile to render web pages with dynamic data and for interaction with back end services. There is a Struts 2 JQuery Mobile plugin that may make using Struts 2 and JQuery Mobile together even simpler.
