Руководство по Spring Mobile

29 мая 2022 г. · 6 мин. чтения

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>

В зависимости от типа устройства мы изменим содержимое внутри тега <h1> ,

3.3. Включить `DeviceDelegatingViewresolver`

Чтобы включить службу Spring Mobile DeviceDelegatingViewresolver , нам нужно поместить следующее свойство в application.properties:

spring.mobile.devicedelegatingviewresolver.enabled: true

Функциональность предпочтений сайта включена по умолчанию в Spring Boot, когда вы включаете стартер Spring Mobile. Однако его можно отключить, установив для следующего свойства значение 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. Создать контроллер

Теперь нам нужно создать класс Controller для обработки входящего запроса. Мы будем использовать простую аннотацию @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 , который мы включили в файле application.properties.
В org.springframework.mobile.device.Device есть несколько встроенных методов, таких как isMobile(), isTablet(), getDevicePlatform() и т. д . С их помощью мы можем собирать всю необходимую нам информацию об устройстве и использовать ее.

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

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

@SpringBootApplication
public class Application {

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

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

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

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

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

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

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

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

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

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

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

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

?site_preference=mobile

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

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

?site_preference=tablet

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

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

5. Вывод

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

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

1. Обзор​

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

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

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

3.2. Создание шаблонов Freemarker​

3.3. Включить DeviceDelegatingViewresolver​

3.4. Добавить свойства Freemarker​

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

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

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

5. Вывод​