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

1. обзор

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

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

2. Особенности Spring Mobile

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

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

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

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

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


    org.springframework.mobile
    spring-mobile-device
    1.1.5.RELEASE

Мы можем проверить последнюю версию Spring Mobile вCentral Maven Repository.

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:

You are into browser version

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

3.3. ВключитьDeviceDelegatingViewresolver

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

spring.mobile.devicedelegatingviewresolver.enabled: true

Функция настройки сайта включена по умолчанию в Spring Boot, когда вы включаете Spring Mobile Starter. Однако его можно отключить, установив для следующего свойства значение false:

spring.mobile.sitepreference.enabled: true

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

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

@Controller
public class IndexController {

    @GetMapping("/")
    public String greeting(Device device) {

        String deviceType = "browser";
        String platform = "browser";

        if (device.isNormal()) {
            deviceType = "browser";
        } else if (device.isMobile()) {
            deviceType = "mobile";
        } else if (device.isTablet()) {
            deviceType = "tablet";
        }

        platform = device.getDevicePlatform().name();

        if (platform.equalsIgnoreCase("UNKNOWN")) {
            platform = "browser";
        }

        return "index";
    }
}

Несколько вещей, чтобы отметить здесь:

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

3.5. Java Config

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

@SpringBootApplication
public class Application {

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

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

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

We will use Google Chrome’s Developer Console to emulate different kinds of device. Мы можем включить его, нажавctrl + shift + i или нажавF12.

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

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

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

Как только мы обновим страницу, мы заметим, чтоcontent of the page changes because DeviceDelegatingViewresolver has already detected that the last request came from a mobile device. Следовательно, он передал файлindex.ftl внутри мобильной папки в шаблонах.

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

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

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

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

?site_preference=mobile

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

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

?site_preference=tablet

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

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

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

Мы только что создали веб-приложение и реализовали кроссплатформенную функциональность. С точки зрения производительности, это колоссальный прирост производительности. Spring Mobile eliminates many front-end scripting to handle cross-browser behavior, thus reducing development time.с

Как всегда, обновленный исходный код -over on GitHub.

TOC

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