1. Обзор
Spring Mobile-это современное расширение популярной платформы Spring Web MVC , которое помогает упростить разработку веб-приложений, которые должны быть полностью или частично совместимы с платформами разных устройств, с минимальными усилиями и меньшим количеством шаблонного кодирования.
В этой статье мы узнаем о проекте Spring Mobile, и мы построим пример проекта, чтобы выделить использование Spring Mobile.
2. Особенности пружинного мобильного телефона
- Автоматическое обнаружение устройств: Spring Mobile имеет встроенный уровень абстракции распознавателя устройств на стороне сервера. Это анализирует все входящие запросы и обнаруживает информацию об устройстве отправителя, например, тип устройства, операционную систему и т. Д
- Управление предпочтениями сайта: Используя управление предпочтениями сайта, Spring Mobile позволяет пользователям выбирать мобильный/планшетный/обычный вид веб-сайта. Это сравнительно устаревший метод, так как с помощью DeviceDelegatingViewresolver мы можем сохранять слой представления в зависимости от типа устройства, не требуя ввода со стороны пользователя
- Site Switcher : Site Switcher способен автоматически переключать пользователей на наиболее подходящий вид в зависимости от типа их устройства (например, мобильного, настольного и т. Д.)
- Диспетчер представлений с учетом устройств : Обычно, в зависимости от типа устройства, мы пересылаем запрос пользователя на определенный сайт, предназначенный для обработки конкретного устройства. Spring Mobile View Manager позволяет разработчику гибко размещать все представления в предопределенном формате, а Spring Mobile автоматически изменит различные представления в зависимости от типа устройства
3. Создание приложения
Давайте теперь создадим демонстрационное приложение с помощью Spring Mobile с Spring Boot и Freemarker Template Engine и попробуем захватить сведения об устройстве с минимальным количеством кодирования.
3.1. Зависимости Maven
Прежде чем мы начнем, нам нужно добавить следующую весеннюю мобильную зависимость в pom.xml :
org.springframework.mobile spring-mobile-device 2.0.0.M3
Обратите внимание, что последняя зависимость доступна в репозитории Spring Milestones, поэтому давайте добавим ее в ваш pom.xml также:
spring-milestones Spring Milestones https://repo.spring.io/libs-milestone false
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
В зависимости от типа устройства мы изменим содержимое внутри тега ,
3.3. Включить DeviceDelegatingViewresolver
Чтобы включить Spring Mobile DeviceDelegatingViewresolver service, нам нужно поместить следующее свойство в application.properties:
spring.mobile.devicedelegatingviewresolver.enabled: true
Функциональность предпочтений сайта включена по умолчанию в Spring Boot при включении Spring Mobile starter. Однако его можно отключить, установив для следующего свойства значение 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.Устройство . Это вводимая информация об устройстве с каждым запросом. Это делается с помощью DeviceDelegatingViewresolver , который мы включили в application.properties
- Устройство org.springframework.mobile.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 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 из раскрывающегося списка, как и в прошлый раз, и обновим страницу. Содержимое будет изменено, и оно должно рассматриваться как представление планшета:
Теперь мы посмотрим, работает ли функциональность предпочтений сайта так, как ожидалось, или нет.
Чтобы смоделировать сценарий в реальном времени, когда пользователь хочет просмотреть сайт удобным для мобильных устройств способом, просто добавьте следующий параметр URL в конце URL-адреса по умолчанию:
?site_preference=mobile
После обновления представление должно быть автоматически перемещено в мобильное представление, т. Е. будет отображаться следующий текст: “Вы находитесь в мобильной версии”.
Таким же образом, чтобы имитировать предпочтения планшета, просто добавьте следующий параметр URL в конце URL-адреса по умолчанию:
?site_preference=tablet
И, как и в прошлый раз, представление должно быть автоматически обновлено до представления планшета.
Обратите внимание, что URL-адрес по умолчанию останется прежним, и если пользователь снова перейдет по URL-адресу по умолчанию, он будет перенаправлен на соответствующее представление в зависимости от типа устройства.
5. Заключение
Мы только что создали веб-приложение и реализовали кросс-платформенную функциональность. С точки зрения производительности это огромный прирост производительности. Spring Mobile устраняет множество интерфейсных сценариев для обработки кроссбраузерного поведения, тем самым сокращая время разработки.
Как всегда, обновленный исходный код находится на GitHub .