Spring Mobile Hello World Example that includes DeviceResolver, SitePreference, urlPath SiteSwitcher and LiteDeviceDelegatingViewResolver
Spring Mobile is an extension to Spring MVC for development of mobile web applications. The Spring Mobile Device module provides a feature (DeviceResolver / LiteDeviceResolver) to detect devices like mobile and tablet in the server side.
Device aware view management is very useful specially when it is required to serve different optimized versions of same website based on request generating device type or specific devices.
Another feature called site preference management allows user to set his / her preference (SitePreference) to view a particular site in either "normal", "mobile" or "tablet" mode from a particular device.
Spring mobile also provides different types of site switchers (like mDot, dotMobi and urlPath SiteSwitcher) which automatically redirect users to the device specific site based on the device generating the request and site preference set by the user.
Tools and Technologies used in this article :
- Spring 3 MVC Framework Based Hello World Web Application Example Using Maven, Eclipse IDE And Tomcat Server
- Spring 3 Hello World Example / Tutorial using Maven Tool and Eclipse IDE
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.
Type 'webapp' in the 'Filter' field and select archetype 'maven-archetype-webapp' to generate a simple java web application using Maven. Click 'Next' button.
Specify archetype parameters (Group Id, Artifact, Version and Package) and click 'Finish' button.
2. Add Project Dependencies in pom.xml
Add Spring MVC and Spring Mobile dependencies in Maven pom.xml.File : pom.xml
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.
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
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
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/
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
Download Source Code