A Guide to Spring Mobile

1. Overview

Spring Mobile is a modern extension to the popular Spring Web MVC  framework that helps to simplify the development of web applications, which needs to be fully or partially compatible with cross device platforms, with minimal effort and less boilerplate coding.

In this article, we’ll learn about the Spring Mobile project and we would build a sample project to highlight uses of Spring Mobile.

2. Features of Spring Mobile

• Automatic Device Detection: Spring Mobile has built-in server side device resolver abstraction layer. This analyzes all incoming requests and detects sender device information, for example, a device type, an operating system etc
• Site Preference Management: Using Site Preference Management, Spring Mobile allows users to choose mobile/tablet/normal view of the website. It’s comparatively deprecated technique since by using DeviceDelegatingViewresolver we can persist the view layer depending on the device type without demanding any input from the user side
• Site Switcher: Site Switcher is capable of automatically switch the users to the most appropriate view according to his/her device type (i.e. mobile, desktop etc)
• Device Aware View Manager: Usually, depending on device type we forward the user request to specific site meant to handle specific device. Spring Mobile’s View Manager lets developer the flexibility to put all of the views in pre-defined format and Spring Mobile would auto-mange the different views based on device type

3. Building an Application

Let’s now create a demo application using Spring Mobile with Spring Boot and Freemarker Template Engine and try to capture device details with a minimal amount of coding.

3.1. Maven Dependencies

Before we start we need to add following Spring Mobile dependency in the pom.xml:

<dependency>
    <groupId>org.springframework.mobile</groupId>
    <artifactId>spring-mobile-device</artifactId>
    <version>1.1.5.RELEASE</version>
</dependency>

We can check the latest version of Spring Mobile in Central Maven Repository.

3.2. Create Freemarker Templates

First, let’s create our index page using Freemarker. Don’t forget to put necessary dependency to enable autoconfiguration for Freemarker.

Since we are trying to detect the sender device and route the request accordingly, we need to create three separate Freemarker files to address this; one to handle a mobile request, another one to handle tablet and the last one (default) to handle normal browser request.

We need to create two folders named ‘mobile‘ and ‘tablet‘ under src/main/resources/templates and put the Freemarker files accordingly. The final structure should look like this:

└── src
    └── main
        └── resources
            └── templates
                └── index.ftl
                └── mobile
                    └── index.ftl
                └── tablet
                    └── index.ftl

Now, let’s put the following HTML inside index.ftl files:

<h1>You are into browser version</h1>

Depending on the device type, we’ll change the content inside the <h1> tag,

3.3. Enable DeviceDelegatingViewresolver

To enable Spring Mobile DeviceDelegatingViewresolver service, we need to put the following property inside application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true

spring.mobile.sitepreference.enabled: true

3.4. Create a Controller

Now we need to create a Controller class to handle the incoming request. We would use simple @GetMapping annotation to handle the request:

@Controller
public class IndexController {

    @GetMapping("/")
    public String greeting(Device device) {
		
        String deviceType = "browser";
        String platform = "browser";
		
        if (device.isNormal()) {
            deviceType = "browser";
        } else if (device.isMobile()) {
            deviceType = "mobile";
        } else if (device.isTablet()) {
            deviceType = "tablet";
        }
        
        platform = device.getDevicePlatform().name();
        
        if (platform.equalsIgnoreCase("UNKNOWN")) {
            platform = "browser";
        }
     	
        return "index";
    }
}

A couple of things to note here:

• In the handler mapping method, we are passing org.springframework.mobile.device.Device. This is the injected device information with each and every request. This is done by DeviceDelegatingViewresolver which we have enabled in the apllication.properties
• The org.springframework.mobile.device.Device has a couple of inbuilt methods like isMobile(), isTablet(), getDevicePlatform() etc. Using these we can capture all device information we need and use it

3.5. Java Config

We are almost done. One last thing to do is to build a Spring Boot config class to start the application:

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

4. Testing the Application

Once we start the application, it will run on http://localhost:8080.

We will use Google Chrome’s Developer Console to emulate different kinds of device. We can enable it by pressing ctrl + shift + i or by pressing F12.

By default, if we open the main page, we could see that Spring Web is detecting the device as a desktop browser. We should see the following result:

Now, on the console panel, we click the second icon on the top left. It would enable a mobile view of the browser.

We could see a drop-down coming in the top left corner of the browser. In the drop-down, we can choose different kinds of device type. To emulate a mobile device let’s choose Nexus 6P and refresh the page.

As soon as we refresh the page, we’ll notice that the content of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. Hence, it passed the index.ftl file inside the mobile folder in the templates.

Here’s the result:

In the same way, we are going to emulate a tablet version. Let’s choose iPad from the drop-down just like the last time and refresh the page. The content would be changed and it should be treated as a tablet view:

Now, we’ll see if Site Preference functionality is working as expected or not.

To simulate a real time scenario where user wants to view the site in mobile friendly way, just add following url parameter at the end of default url:

?site_preference=mobile

Once refreshed, the view should be automatically moved to mobile view i.e. following text would be displayed ‘You are into mobile version’.

In the same way to simulate tablet preference, just add following url parameter at the end of default url:

?site_preference=tablet

And just like the last time the view should be automatically refreshed to tablet view.

Please note that, the default url would remain as same and if the user again goes through default url, user will be redirect to respective view based on device type.

5. Conclusion

We just created a web application and implement the cross-platform functionality. From the productivity perspective, it’s a tremendous performance boost. Spring Mobile eliminates many front-end scripting to handle cross-browser behaviour, thus reducing development time.

Like always, updated source code are over on GitHub.