Подготовка мобильного web-контента Spring MVC

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

Что вы создадите

Вы создадите сервис, который будет принимать HTTP GET запросы на:

http://localhost:8080/greeting

в ответ возвращает web страницу, отображающую приветствие для обычного настольного браузера:

"Hello standard view!"

для мобильного браузера:

"Hello mobile view!"

для планшетного браузера:

"Hello tablet view!"

Что вам потребуется

• Примерно 15 минут свободного времени
• Любимый текстовый редактор или IDE
• JDK 6 и выше
• Gradle 1.11+ или Maven 3.0+
• Вы также можете импортировать код этого урока, а также просматривать web-страницы прямо из Spring Tool Suite (STS), собственно как и работать дальше из него.

Как проходить этот урок

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

Чтобы начать с нуля, перейдите в Настройка проекта.

Чтобы пропустить базовые шаги, выполните следующее:

• Загрузите и распакуйте архив с кодом этого урока, либо кнонируйте из репозитория с помощью Git: git clone https://github.com/spring-guides/gs-serving-mobile-web-content.git
• Перейдите в каталог gs-serving-mobile-web-content/initial
• Забегая вперед, создайте файл настроек

Когда вы закончите, можете сравнить получившийся результат с образцом в gs-serving-mobile-web-content/complete.

Настройка проекта

Для начала вам необходимо настроить базовый скрипт сборки. Вы можете использовать любую систему сборки, которая вам нравится для сборки проетов Spring, но в этом уроке рассмотрим код для работы с Gradle и Maven. Если вы не знакомы ни с одним из них, ознакомьтесь с соответсвующими уроками Сборка Java-проекта с использованием Gradle или Сборка Java-проекта с использованием Maven.

Создание структуры каталогов

В выбранном вами каталоге проекта создайте следующую структуру каталогов; к примеру, командой mkdir -p src/main/java/hello для *nix систем:

└── src
    └── main
        └── java
            └── hello

Создание файла сборки Gradle

Ниже представлен начальный файл сборки Gradle. Файл pom.xml находится здесь. Если вы используете Spring Tool Suite (STS), то можете импортировать урок прямо из него.

build.gradle

buildscript {
    repositories {
        maven { url "http://repo.spring.io/libs-release" }
        mavenLocal()
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:1.1.9.RELEASE")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'idea'
apply plugin: 'spring-boot'

jar {
    baseName = 'gs-serving-mobile-web-content'
    version = '0.1.0'
}

repositories {
    mavenLocal()
    mavenCentral()
    maven { url "http://repo.spring.io/libs-release" }
}

dependencies {
    compile("org.springframework.boot:spring-boot-starter-thymeleaf")
    compile("org.springframework.boot:spring-boot-starter-mobile")
}

task wrapper(type: Wrapper) {
    gradleVersion = '1.11'
}

Spring Boot gradle plugin предоставляет множество удобных возможностей:

• Он собирает все jar'ы в classpath и собирает единое, исполняемое "über-jar", что делает более удобным выполнение и доставку вашего сервиса
• Он ищет public static void main() метод, как признак исполняемого класса
• Он предоставляет встроенное разрешение зависимостей, с определенными номерами версий для соответсвующих Spring Boot зависимостей. Вы можете переопределить на любые версии, какие захотите, но он будет по умолчанию для Boot выбранным набором версий

Создание файла настроек

Используйте ниже приведенную настройку для включения Spring Boot автоконфигурацию альтернативных мобильных и планшетных представлений:

src/main/resources/application.properties

spring.mobile.devicedelegatingviewresolver.enabled: true

В своей работе LiteDeviceDelegatingViewResolver использует уже определенный Device классом DeviceResolverHandlerInterceptor для определения, когда возвращать обычное, мобильное или планшетное представления для запроса. В данном случае, LiteDeviceDelegatingViewResolver настроен на перенаправление запросов к ThymeleafViewResolver. Он реализует ViewResolver, который используется spring для рендеринга HTML на стороне сервера. Spring Boot по умолчанию добавляет префиксы mobile/ и tablet/ для соответствующих представлений, но может быть установлено и другое расположение через дополнительные настройки.

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

В подходе Spring к созданию web сайтов, HTTP запросы обрабатываются контроллером. Компоненты просто маркируются @Controller аннотацией, а GreetingController обрабатывает GET запросы для /greeting, возвращая название View, в данном случае это "greeting". View отвечает за рендеринг HTML содержимого:

src/main/java/hello/GreetingController.java

package hello;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class GreetingController {

    @RequestMapping("/greeting")
    public String greeting() {
        return "greeting";
    }

}

@RequestMapping аннотация гарантирует, что HTTP запросы к /greeting будут обработаны greeting() методом.

Реализация тела метода основывается на view technology, в данном случае Thymeleaf, выполняющего рендеринг на стороне сервера в HTML. Thymeleaf парсит шаблон greeting.html и рендерит HTML.

src/main/resources/templates/greeting.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Hello standard view!'" />
</body>
</html>

Обратите внимание на расположение мобильной и планшетной версий представления. Это расположение использовано по умолчанию автоконфигурацией. Дополнительные настройки доступны для указания альтернативных расположений.

└── src
    └── main
        └── resources
            └── templates
                └── greeting.html
                └── mobile
                    └── greeting.html
                └── tablet
                    └── greeting.html

HTML код немного отличается для каждого из приветствий. Планшетная версия включает следующее:

<p th:text="'Hello tablet view!'" />

Аналогично и для мобильной версии:

<p th:text="'Hello mobile view!'" />

Создание приложения исполняемым

Несмотря на то, что пакет этого сервиса может быть в составе web-приложения и WAR файлов, более простой подход, продемонстрированный ниже создает отдельное самостоятельное приложение. Вы упаковываете все в единый, исполняемый JAR-файл, который запускается через хорошо знакомый старый main() Java-метод. Попутно, вы используете поддержку Spring для встроенного Tomcat контейнера сервлетов как HTTP среду выполнения вместо развертывания на сторонний экземпляр.

src/main/java/hello/Application.java

package hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;

@ComponentScan
@EnableAutoConfiguration
public class Application {

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

}

Метод main() передает управление вспомогательному классу SpringApplication, предоставляя Application.class как аргумент его run() методу. Это говорит Spring о том, чтобы прочитать аннотацию метаданных из Application и управлять им как компонентом в Spring Application Context.

Аннотация @ComponentScan сообщает Spring о запуске рекурсивного поиска в пакете hello и потомках классов, отмеченных прямо или косвенно Spring аннотацией @Component. При этом гарантируется, что Spring найдет и зарегистрирует GreetingController, потому что он отмечен @Controller, что в свою очередь является своего рода @Component аннотацией.

@EnableAutoConfiguration аннотация переключает на доступные по умолчанию настройки, основанные на содержимом вашего classpath. К примеру, т.к. приложение зависит от встраиваемой версии Tomcat(tomcat-embed-core.jar), то Tomcat сервер установлен и настроен по умолчанию от вашего имени. И также, т.к. приложение зависит от Spring MVC (spring-webmvc.jar), Spring MVC DispatcherServlet настроен и зарегистрирован за вас - web.xml не нужен! Поэтому здесь MultipartConfigElement, он настроен DispatcherServlet с функциональностью загрузки файлов. Автонастройка является мощным и гибким механизмом. Более подробно вы можете ознакомиться в API документации.

Сборка исполняемого JAR

Вы можете собрать единый исполняемый JAR-файл, который содержит все необходимые зависимости, классы и ресурсы. Это делает его легким в загрузке, версионировании и развертывании сервиса как приложения на протяжении всего периода разработки, на различных средах и так далее.

./gradlew build

Затем вы можете запустить JAR-файл:

java -jar build/libs/gs-serving-mobile-web-content-0.1.0.jar

Если вы используете Maven, вы можете запустить приложение, используя mvn spring-boot:run, либо вы можете собрать приложение с mvn clean package и запустить JAR примерно так:

java -jar target/gs-serving-mobile-web-content-0.1.0.jar

Если вы используете Gradle, вы можете запустить ваш сервис из командной строки:

./gradlew clean build && java -jar build/libs/gs-serving-mobile-web-content-0.1.0.jar

Как вариант, вы можете запустить ваш сервис напрямую из Gradle примерно так:

./gradlew bootRun

Данные по логгированию отображаются. Сервис должен быть поднят и запущен через несколько секунд.

Тестирование сервиса

Теперь, когда сервис поднят, зайдите по адресу http://localhost:8080/greeting, где вы увидите:

"Hello standard view!"

При использовании iOS или Android эмулятора вы увидите:

"Hello mobile view!"

или:

"Hello tablet view!"

Итог

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

С оригинальным текстом урока вы можете ознакомиться на spring.io.