Expand Authors Top

If you have a few years of experience in the Java ecosystem and you’d like to share that with the community, have a look at our Contribution Guidelines.

November Discount Launch 2022 – Top
We’re finally running a Black Friday launch. All Courses are 30% off until next Friday:


Expanded Audience – Frontegg – Security (partner)
announcement - icon User management is very complex, when implemented properly. No surprise here.

Not having to roll all of that out manually, but instead integrating a mature, fully-fledged solution - yeah, that makes a lot of sense.
That's basically what Frontegg is - User Management for your application. It's focused on making your app scalable, secure and enjoyable for your users.
From signup to authentication, it supports simple scenarios all the way to complex and custom application logic.

Have a look:

>> Elegant User Management, Tailor-made for B2B SaaS

NPI – Lightrun – Spring (partner)

We rely on other people’s code in our own work. Every day. It might be the language you’re writing in, the framework you’re building on, or some esoteric piece of software that does one thing so well you never found the need to implement it yourself.

The problem is, of course, when things fall apart in production - debugging the implementation of a 3rd party library you have no intimate knowledge of is, to say the least, tricky. It’s difficult to understand what talks to what and, specifically, which part of the underlying library is at fault.

Lightrun is a new kind of debugger.

It's one geared specifically towards real-life production environments. Using Lightrun, you can drill down into running applications, including 3rd party dependencies, with real-time logs, snapshots, and metrics. No hotfixes, redeployments, or restarts required.

Learn more in this quick, 5-minute Lightrun tutorial:

>> The Essential List of Spring Boot Annotations and Their Use Cases

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:


Please note that the latest dependency is available in Spring Milestones repository, so let's add this in our pom.xml as well:

        <name>Spring Milestones</name>

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

Site preference functionality is enabled by default in Spring Boot when you include the Spring Mobile starter. However, it can be disabled by setting the following property to false:

spring.mobile.sitepreference.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:

public class IndexController {

    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:

public class AppConfig implements WebMvcConfigurer {

    public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() { 
        return new DeviceResolverHandlerInterceptor(); 

    public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver() { 
        return new DeviceHandlerMethodArgumentResolver(); 

    public void addInterceptors(InterceptorRegistry registry) { 

    public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {

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

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:


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:


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.

November Discount Launch 2022 – Bottom
We’re finally running a Black Friday launch. All Courses are 30% off until next Friday:


Generic footer banner
Comments are closed on this article!