opencodez

Spring Mobile To Detect Device In Java Web Application – Source Code on GitHub

Pavan

Spring Mobile is an extension to Spring MVC framework. It primarily aims to simplify the development of mobile web applications.

Spring Mobile To Detect Device:

In this article, we will briefly look into the key usage of Spring Mobile and understand how to use Spring Mobile To Detect Device In Java Web Application.

Softwares used

Spring Mobile Features

The Spring Mobile provides capabilities to detect the type of device making a request to your web application. Below are a few key features that we can list:

1. Automatic Device Detection:

Spring Mobile provides a server-side device resolver abstraction layer. It analyzes all incoming requests and detects sender device information. The details are stored as part of the Device interface.

2. Site Preference Management:

With the inbuilt Site Preference Management, Spring Mobile allows users to choose between a xnormalx, xmobilex, or xtabletx view of the website. This feature is less likely to be used as it depends on input from a user. There are other ways to achieve this using DeviceDelegatingViewresolver.

3. Site Switcher:

Site Switcher is capable of automatically switching the users to the most appropriate view according to his/her device type (i.e. mobile, desktop, etc.)

4. Device Aware View Manager:

Spring Mobile’s View Manager lets developer the flexibility to put all of the views in the pre-defined format and it organizes and manages different views for specific devices

Maven Dependencies

xdependencyx
	xgroupIdxorg.springframework.bootx/groupIdx
	xartifactIdxspring-boot-starter-webx/artifactIdx
x/dependencyx
xdependencyx
	xgroupIdxorg.springframework.mobilex/groupIdx
	xartifactIdxspring-mobile-devicex/artifactIdx
x/dependencyx
xdependencyx
	xgroupIdxorg.springframework.bootx/groupIdx
	xartifactIdxspring-boot-starter-thymeleafx/artifactIdx
x/dependencyx

Detect Manually using Device Interface

There are two ways to serve device-specific contents. You can get hold of Device information and return the appropriate view depending on device type. Below is our such controller:

@Controller
public class DetectController {

	@RequestMapping("/detect")
	public String detect(Device device, Model model) {
		
		String deviceType = null;
		if (device.isMobile()) {
			deviceType = "Mobile";
		} else if (device.isTablet()) {
			deviceType = "Tablet";
		} else {
			deviceType = "Desktop";
		}
		
		System.out.println("Hello User, you are viewing this applicaiton on " + deviceType);
		
		model.addAttribute("deviceType", deviceType);
		return "detect";
	}
}

In this controller, we are setting one model attribute and using that in our thymeleaf view

x!DOCTYPE HTMLx
xhtml xmlns:th="http://www.thymeleaf.org"x
xheadx
    xtitlexGetting Started: Detectionx/titlex
    xmeta http-equiv="Content-Type" content="text/html; charset=UTF-8" /x
x/headx
xbodyx
	Hello User, You are looking at a xb th:text="${deviceType}" /x view.
x/bodyx
x/htmlx

Detect using Device Delegating View Resolver

In this approach, you simply define property in your application.properties file

spring.mobile.devicedelegatingviewresolver.enabled=true

Once you define this, the Spring will automatically configure a Device Delegating View Resolver. The resolver will detect the device and it will serve the view from the respective folder under templates.

E.g. If you are viewing the application from your mobile then an appropriate view from templates/mobile will be served. You can see the project structure:

Testing the Application

After we run our main application, it starts at URL http://localhost:8080

@SpringBootApplication
public class MainApp {

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

To simulate the different devices we will use Chrome: Simulate Mobile Devices with Device Mode. Using this you can select the device from the drop-down and refresh the URL.

Manual Detection and Serving

Testing with DeviceDelegatingViewresolver Enabled

If you enable this property then you need to have appropriate views defined for each of your URL or mapping.

Conclusion

In this article, we’ve built a production-grade application that works perfectly on all platforms. Spring Mobile has reduced the development time of front-end centric application.

The complete source code is available to download from our GitHub repo.

Download Code