«1. Обзор

Spring Mobile — это современное расширение популярной среды Spring Web MVC, помогающее упростить разработку веб-приложений, которые должны быть полностью или частично совместимы с кроссплатформенными платформами, с минимальными усилиями и меньшим количеством шаблонного кода.

В этой статье мы узнаем о проекте Spring Mobile и создадим пример проекта, чтобы показать использование Spring Mobile.

2. Возможности Spring Mobile

    Автоматическое обнаружение устройств: Spring Mobile имеет встроенный уровень абстракции преобразователя устройств на стороне сервера. При этом анализируются все входящие запросы и обнаруживается информация об устройстве отправителя, например, тип устройства, операционная система и т. д. Управление настройками сайта: с помощью управления настройками сайта Spring Mobile позволяет пользователям выбирать мобильный/планшет/обычный вид веб-сайта. Это относительно устаревший метод, поскольку с помощью DeviceDelegatingViewresolver мы можем сохранять уровень представления в зависимости от типа устройства, не требуя каких-либо данных со стороны пользователя. Site Switcher: Site Switcher может автоматически переключать пользователей на наиболее подходящее представление в соответствии с его/ее устройством. тип (т.е. мобильный, рабочий стол и т. д.) Device Aware View Manager: обычно, в зависимости от типа устройства, мы перенаправляем запрос пользователя на определенный сайт, предназначенный для обработки определенного устройства. Диспетчер представлений Spring Mobile позволяет разработчику гибко помещать все представления в предопределенный формат, а Spring Mobile будет автоматически управлять различными представлениями в зависимости от типа устройства

3. Создание приложения

Теперь давайте создадим демонстрационное приложение. используя Spring Mobile с Spring Boot и Freemarker Template Engine, и попытайтесь получить сведения об устройстве с минимальным объемом кода.

3.1. Зависимости Maven

Прежде чем мы начнем, нам нужно добавить следующую зависимость Spring Mobile в pom.xml: 

<dependency>
    <groupId>org.springframework.mobile</groupId>
    <artifactId>spring-mobile-device</artifactId>
    <version>2.0.0.M3</version>
</dependency>

Обратите внимание, что последняя зависимость доступна в репозитории Spring Milestones, поэтому давайте добавим ее в наш pom.xml. а также: 

<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. Создание шаблонов Freemarker

Во-первых, давайте создадим нашу индексную страницу с помощью Freemarker. Не забудьте поставить необходимую зависимость, чтобы включить автоконфигурацию для Freemarker.

Так как мы пытаемся обнаружить отправляющее устройство и соответствующим образом направить запрос, нам нужно создать три отдельных файла Freemarker для решения этой проблемы; один для обработки мобильного запроса, другой для обработки планшета и последний (по умолчанию) для обработки обычного запроса браузера.

Нам нужно создать две папки с именами «mobile» и «tablet» в папке src/main/resources/templates и соответствующим образом поместить файлы Freemarker. Окончательная структура должна выглядеть так: 

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

Теперь давайте поместим следующий HTML-код в файлы index.ftl: 

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

В зависимости от типа устройства мы изменим содержимое внутри \u003ch1\u003e тег,

3.3. Включить DeviceDelegatingViewresolver

Чтобы включить службу Spring Mobile DeviceDelegatingViewresolver, нам нужно поместить следующее свойство в 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. Добавить свойства Freemarker

Чтобы Spring Boot мог находить и отображать наши шаблоны, нам нужно добавить следующее в наш application.properties: 

spring.freemarker.template-loader-path: classpath:/templates
spring.freemarker.suffix: .ftl

3.5. Создание контроллера

Теперь нам нужно создать класс контроллера для обработки входящего запроса. Мы будем использовать простую аннотацию @GetMapping для обработки запроса: 

@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;
    }
}

Здесь следует отметить пару вещей:

    В методе отображения обработчика мы передаем org.springframework.mobile.device.Device. Это введенная информация об устройстве с каждым запросом. Это делается с помощью DeviceDelegatingViewresolver, который мы включили в apllication.properties. необходимая нам информация об устройстве и ее использование

3.6. Конфигурация Java

Чтобы включить обнаружение устройства в веб-приложении Spring, нам также нужно добавить некоторую конфигурацию: 

@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()); 
    }
}

«

@SpringBootApplication
public class Application {

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

«Мы почти закончили. И последнее, что нужно сделать, это создать класс конфигурации Spring Boot для запуска приложения:

4. Тестирование приложения

Как только мы запустим приложение, оно будет работать на http://localhost:8080.

Мы будем использовать консоль разработчика Google Chrome для эмуляции различных типов устройств. Мы можем включить его, нажав ctrl + shift + i или нажав F12.

По умолчанию, если мы откроем главную страницу, мы увидим, что Spring Web определяет устройство как настольный браузер. Мы должны увидеть следующий результат:

Теперь, на панели консоли, мы нажимаем второй значок слева вверху. Это позволило бы мобильное представление браузера.

Мы могли видеть выпадающее меню в верхнем левом углу браузера. В раскрывающемся списке мы можем выбрать различные типы устройств. Чтобы эмулировать мобильное устройство, давайте выберем Nexus 6P и обновим страницу.

Как только мы обновим страницу, мы заметим, что содержимое страницы изменилось, потому что DeviceDelegatingViewresolver уже обнаружил, что последний запрос пришел с мобильного устройства. Следовательно, он передал файл index.ftl внутри мобильной папки в шаблонах.

Вот результат:

Таким же образом мы собираемся эмулировать планшетную версию. Давайте выберем iPad из выпадающего списка, как и в прошлый раз, и обновим страницу. Содержимое будет изменено, и его следует рассматривать как представление планшета:

Теперь мы посмотрим, работает ли функциональность настроек сайта должным образом или нет.

Чтобы имитировать сценарий в реальном времени, когда пользователь хочет просматривать сайт в удобном для мобильных устройств виде, просто добавьте следующий параметр URL в конце URL по умолчанию: 

?site_preference=mobile

После обновления представление должно автоматически перемещаться. для мобильного просмотра, т.е. будет отображаться следующий текст «Вы используете мобильную версию».

Таким же образом, чтобы имитировать предпочтения планшета, просто добавьте следующий параметр URL в конце URL-адреса по умолчанию: 

?site_preference=tablet

И, как и в прошлый раз, вид должен автоматически обновляться до вида планшета.

Обратите внимание, что URL-адрес по умолчанию останется прежним, и если пользователь снова перейдет по URL-адресу по умолчанию, он будет перенаправлен на соответствующий вид в зависимости от типа устройства.

5. Заключение

Мы только что создали веб-приложение и реализовали кроссплатформенный функционал. С точки зрения производительности это огромный прирост производительности. Spring Mobile устраняет множество интерфейсных сценариев для обработки кросс-браузерного поведения, тем самым сокращая время разработки.

Как всегда, на GitHub закончились обновленные исходники.