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 a 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>2.0.0.M3</version>
</dependency>
Please note that the latest dependency is available in Spring Milestones repository, so let’s add this in our pom.xml as well:
<repositories>
<repository>
<id>spring-milestones</id>
<name>Spring Milestones</name>
<url>https://repo.spring.io/libs-milestone</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
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
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
3.4. Add Freemarker Properties
For Spring Boot to be able to find and render our templates, we need to add the following to our application.properties:
spring.freemarker.template-loader-path: classpath:/templates
spring.freemarker.suffix: .ftl
3.5. 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";
String viewName = "index";
if (device.isNormal()) {
deviceType = "browser";
} else if (device.isMobile()) {
deviceType = "mobile";
viewName = "mobile/index";
} else if (device.isTablet()) {
deviceType = "tablet";
viewName = "tablet/index";
}
platform = device.getDevicePlatform().name();
if (platform.equalsIgnoreCase("UNKNOWN")) {
platform = "browser";
}
return viewName;
}
}
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 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.6. Java Config
To enable device detection in a Spring web application, we also need to add some configuration:
@Configuration
public class AppConfig implements WebMvcConfigurer {
@Bean
public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() {
return new DeviceResolverHandlerInterceptor();
}
@Bean
public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver() {
return new DeviceHandlerMethodArgumentResolver();
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(deviceResolverHandlerInterceptor());
}
@Override
public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
argumentResolvers.add(deviceHandlerMethodArgumentResolver());
}
}
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 the user wants to view the site in a 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, the user will be redirected to respective view based on device type.
5. Conclusion
We just created a web application and implemented 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 behavior, thus reducing development time.
Like always, updated source code are over on GitHub.