Tools and Technologies used in this article :

  1. Spring Mobile 1.1.0.M2 Released

  2. Spring Tool Suite 3.1

  3. JDK 1.6

  4. Tomcat 7

Note : Spring 3 requires at least JDK 5. So, make sure you have JDK 5 or above.

Recommended Posts

1. Create a Java Web Project using m2e

Select from the menu File --> New --> Other --> Maven --> Maven Project. Browse to the workspace location and click 'Next' button.

Select project name and location

Type 'webapp' in the 'Filter' field and select archetype 'maven-archetype-webapp' to generate a simple java web application using Maven. Click 'Next' button.

Select an Archetype

Specify archetype parameters (Group Id, Artifact, Version and Package) and click 'Finish' button.

Specify Archetype parameters

 

2. Add Project Dependencies in pom.xml

Add Spring MVC and Spring Mobile dependencies in Maven pom.xml.

File : pom.xml
Note : Spring MVC depends on spring-core, spring-beans, spring-context, spring-web. If we add 'spring-webmvc' dependency in pom.xml then all the required dependencies / libraries will be automatically downloaded and added to the project's classpath by Maven. We also need to add 'SpringSource Milestone Repository' as we have used milestone version (1.1.0.M2) of spring-mobile-device module.

 

3. Controller Class and Request Mapping

Create a spring controller class called SpringMobileHelloController in package 'com.srccodes.spring.controller' and copy following code into it.

File : SpringMobileHelloController.java

@Controller annotation indicates that this class serves the role of a controller. The Servlet dispatcher scans @Controller annotated Controller classes for mapped handler methods and detects @RequestMapping annotations.
@RequestMapping annotation specifies that this handler method will process all requests beginning with '/' in the URL and return the logical view name.
'org.springframework.ui.Model' object is a map which is passed by the Spring container while invoking the handler method 'printHelloWorld'. The message string 'Hello World!' has been added to 'Model' object against the key 'message'. This model object is available in the view. We can use the key 'message' to get the value and display the same in the UI.

Note : To pass current SitePreference and Device as arguments to @Controller method 'sayHello', it is required to configure (Step #5) SitePreferenceWebArgumentResolver and DeviceWebArgumentResolver in spring configuration file.

 

4. Create a JSP page as View

Now we need to create three helloWorld.jsp pages one under each of 'WEB-INF/pages', 'WEB-INF/pages/m' and 'WEB-INF/pages/t' directories for normal, mobile and tablet device view.

File : WEB-INF/pages/helloWorld.jsp
File : WEB-INF/pages/m/helloWorld.jsp
File : WEB-INF/pages/t/helloWorld.jsp
Note : currentSitePreference is the name of the request attribute that holds the current user's site preference. currentDevice is the name of the request attribute that holds the device that originated the web request. Site preference can be changed by passing different value (e.g. normal, mobile and tablet) in site_preference request parameter.

 

5. Add Spring Configuration File

Create an xml file called dispatcher-servlet.xml under 'WEB-INF' directory and copy the following content.

File : dispatcher-servlet.xml

The above configuration file provides context information to the Spring container. '<context:component-scan>' enables the auto-detection of annotated components (like Controller, Service etc). So spring container will scan and load all the annotated component (e.g. SpringMobileHelloController) from the package 'com.srccodes.spring.controller' and it's subpackages.

'<mvc:annotation-driven>' specifies that we are using annotation based configuration.

'SitePreferenceWebArgumentResolver' and 'DeviceWebArgumentResolver' are configured, so that 'SitePreference' and 'Device' can be used as arguments to @Controller method 'sayHello'.

'DeviceResolverHandlerInterceptor' is used to resolve the device that originated the web request and 'SitePreferenceHandlerInterceptor' to enable site preference management. 'CookieSitePreferenceRepository' (default implementation of SitePreferenceRepository) stores the user's preference in client side cookie so that it can be used for the future requests made by that user. SiteSwitcherHandlerInterceptor redirect users to device specific site. There are different types of site switchers available like mDot, dotMobi and urlPath SiteSwitcher. Bute here we have used urlPath SiteSwitcher which redirects users to different paths within the application based on the device and site preference.

ViewResolver provides a mapping between logical view name and actual view. Here we have used device aware view resolver ('LiteDeviceDelegatingViewResolver') that delegates to InternalResourceViewResolver allowing for resolution of device specific view names by adjusting view name by adding prefix (say 'm/' and 't/' for mobile and tablet) or suffix without the need for defining separate mapping for each device specific view. In our case, 'sayHello' handler method returns view name 'helloWorld' which gets adjusted to 'm/helloWorld' by adding 'm/' prefix for mobile. Then it gets resolved to the path 'WEB-INF/pages/m/helloWorld.jsp' by the 'InternalResourceViewResolver' by adding prefix '/WEB-INF/pages/' and suffix '.jsp' to the adjusted view name 'm/helloWorld'.

There may be cases where device specific views for a particular page may not be available. There Fallback resolution ('enableFallback') comes into picture. If adjusted view name can not be resolved then original view is used by the ViewResolver.

 

6. Integrate Spring with Web Application

Copy the following content in your web.xml file.

File: web.xml

We need to add <url-pattern> '/', '/m/*' and '/t/*' in the web.xml for the normal, mobile and tablet site paths as SiteSwitcher redirects user to those path based on user's site preference and the device that originates the web request.

 

7. Overall Project Structure

Overall Project Structure

 

8. Deploy and Run the Application

Right click on the project 'SpringMobileHelloWorld' and select from context menu 'Run As' --> 'Run on Server'. Select the existing tomcat server. If not available then manually define a new web server. Click "Finish" button. The web application will be deployed in the tomcat web server and a device specific view will be opened with 'Hello World!' message, site preference and device type information along with a option to switch to different mode (like mobile, tablet). You can trying switching between different view.

http://localhost:8080/SpringMobileHelloWorld/
Browser Output

Developer Tools (Ctrl+Shift+J) of Google's Chrome browser can be used to test device (mobile / tablet) specific view.

Developer Tools of Chrome Browser
Developer Tools of Chrome Browser

Mobile View
Mobile View

Tablet View
Tablet View
Note : For live demo of Spring mobile, browse srccodes.com which is implemented using this technology only. You can switch between desktop or mobile site using the link "View: Desktop | Mobile" available in the bottom of this site.

 

Download Source Code

 

References