1. Обзор
При разработке веб-приложения его внешний вид или тема является ключевым компонентом. Это влияет на удобство использования и доступность нашего приложения и может еще больше укрепить бренд нашей компании.
В этом руководстве мы рассмотрим шаги, необходимые для настройки тем в приложении Spring MVC .
2. Примеры использования
Проще говоря, темы-это набор статических ресурсов, обычно таблиц стилей и изображений, которые влияют на визуальный стиль нашего веб-приложения.
Мы можем использовать темы для:
- Создайте общий внешний вид с помощью фиксированной темы
- Настройка для бренда с помощью темы брендинга – это часто встречается в приложении SAAS, где каждый клиент хочет иметь другой внешний вид
- Решите проблемы доступности с помощью темы юзабилити – например, нам может понадобиться темная или высококонтрастная тема
3. Зависимости Maven
Итак, во-первых, давайте добавим зависимости Maven, которые мы будем использовать в первой части этого урока.
Нам понадобятся зависимости Spring WebMVC и Spring Context :
org.springframework spring-webmvc 5.2.1.RELEASE org.springframework spring-context 5.2.1.RELEASE
И поскольку мы собираемся использовать JSP в нашем примере, нам понадобятся Java-сервлеты , JSP и JSTL :
javax.servlet javax.servlet-api 4.0.1 javax.servlet.jsp javax.servlet.jsp-api 2.3.3 javax.servlet jstl 1.2
4. Настройка Весенней темы
4.1. Свойства темы
Теперь давайте настроим светлые и темные темы для вашего приложения.
Для темной темы давайте создадим dark.properties :
styleSheet=themes/black.css background=black
А для светлой темы light.properties :
styleSheet=themes/white.css background=white
Из приведенных выше свойств мы замечаем, что одно относится к файлу CSS, а другое-к стилю CSS. Через мгновение мы увидим, как они проявляются в нашем представлении.
4.2. Обработчик ресурсов
Читая свойства выше, файлы black.css и white.css должны быть помещены в каталог с именем /темы .
И мы должны настроить ResourceHandler , чтобы позволить Spring MVC правильно находить файлы по запросу:
@Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/themes/**").addResourceLocations("classpath:/themes/"); }
4.3. Источник темы
Мы можем управлять этими конкретными темами . свойства файлы как Пакеты ресурсов через ResourceBundleThemeSource :
@Bean public ResourceBundleThemeSource resourceBundleThemeSource() { return new ResourceBundleThemeSource(); }
4.4. Решатель тем
Далее, нам нужен ThemeResolver , чтобы решить правильную тему для приложения. В зависимости от ваших потребностей в дизайне, мы можем выбрать между существующими реализациями или создать свои собственные.
Для нашего примера давайте настроим CookieThemeResolver. Как видно из названия, это позволяет удалить информацию о теме из файла cookie браузера или вернуться к значению по умолчанию, если эта информация недоступна:
@Bean public ThemeResolver themeResolver() { CookieThemeResolver themeResolver = new CookieThemeResolver(); themeResolver.setDefaultThemeName("light"); return themeResolver; }
Другими вариантами ThemeResolver , поставляемыми вместе с фреймворком, являются:
- FixedThemeResolver : Используется при наличии фиксированной темы для приложения
- SessionThemeResolver : Используется, чтобы позволить пользователю переключать темы для активного сеанса
4.5. Просмотр
Чтобы применить тему к нашему представлению, мы должны настроить механизм запроса пакетов ресурсов.
Мы сохраним область только для JSP, с помощью аналогичного механизма поиска можно было бы настроить и для альтернативных механизмов рендеринга представлений.
Для JSP мы можем импортировать библиотеку тегов, которая выполняет эту работу за нас:
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
И тогда мы можем обратиться к любому свойству, указав соответствующее имя свойства:
Или:
Итак, давайте теперь добавим одно представление с именем index.jsp в наше приложение и поместим его в каталог WEB-INF/ :
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>Themed Application Themed Application
Spring MVC Theme Demo
На самом деле, наше приложение будет работать в этот момент, всегда выбирая нашу светлую тему.
Давайте посмотрим, как мы можем позволить пользователю изменить свою тему.
4.6. ThemeChangeInterceptor
Задача ThemeChangeInterceptor состоит в том, чтобы понять запрос на изменение темы.
Теперь давайте добавим ThemeChangeInterceptor и настроим его для поиска параметра theme request:
@Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(themeChangeInterceptor()); } @Bean public ThemeChangeInterceptor themeChangeInterceptor() { ThemeChangeInterceptor interceptor = new ThemeChangeInterceptor(); interceptor.setParamName("theme"); return interceptor; }
5. Дальнейшие Зависимости
Далее, давайте реализуем наш собственный ThemeResolver , который хранит предпочтения пользователя в базе данных.
Для этого нам понадобится Spring Security для идентификации пользователя:
org.springframework.security spring-security-web 5.2.1.RELEASE org.springframework.security spring-security-config 5.2.1.RELEASE org.springframework.security spring-security-taglibs 5.2.1.RELEASE
И Spring Data , Hibernate, и HSQLDB для хранения предпочтений пользователя:
org.springframework.data spring-data-jpa 2.2.2.RELEASE org.hibernate hibernate-core 5.4.9.Final org.hsqldb hsqldb 2.5.0
6. Пользовательский решатель тем
Давайте теперь подробнее погрузимся в ThemeResolver и реализуем один из наших собственных. Этот пользовательский ThemeResolver сохранит предпочтения темы пользователя в базе данных.
Чтобы достичь этого, давайте сначала добавим Предпочтения пользователя сущность:
@Entity @Table(name = "preferences") public class UserPreference { @Id private String username; private String theme; }
Затем мы создадим User Preference ThemeResolver , который должен реализовать интерфейс ThemeResolver . Его основные обязанности заключаются в разрешении и сохранении информации о теме.
Давайте сначала обратимся к разрешению имени, реализовав Пользовательские предпочтения ThemeResolver#resolveThemeName :
@Override public String resolveThemeName(HttpServletRequest request) { String themeName = findThemeFromRequest(request) .orElse(findUserPreferredTheme().orElse(getDefaultThemeName())); request.setAttribute(THEME_REQUEST_ATTRIBUTE_NAME, themeName); return themeName; } private OptionalfindUserPreferredTheme() { Authentication authentication = SecurityContextHolder.getContext() .getAuthentication(); UserPreference userPreference = getUserPreference(authentication).orElse(new UserPreference()); return Optional.ofNullable(userPreference.getTheme()); } private Optional findThemeFromRequest(HttpServletRequest request) { return Optional.ofNullable((String) request.getAttribute(THEME_REQUEST_ATTRIBUTE_NAME)); } private Optional getUserPreference(Authentication authentication) { return isAuthenticated(authentication) ? userPreferenceRepository.findById(((User) authentication.getPrincipal()).getUsername()) : Optional.empty(); }
И теперь мы можем написать нашу реализацию для сохранения темы в User Preference ThemeResolver#setThemeName :
@Override public void setThemeName(HttpServletRequest request, HttpServletResponse response, String theme) { Authentication authentication = SecurityContextHolder.getContext() .getAuthentication(); if (isAuthenticated(authentication)) { request.setAttribute(THEME_REQUEST_ATTRIBUTE_NAME, theme); UserPreference userPreference = getUserPreference(authentication).orElse(new UserPreference()); userPreference.setUsername(((User) authentication.getPrincipal()).getUsername()); userPreference.setTheme(StringUtils.hasText(theme) ? theme : null); userPreferenceRepository.save(userPreference); } }
И, наконец, давайте теперь изменим ThemeResolver в нашем приложении:
@Bean public ThemeResolver themeResolver() { return new UserPreferenceThemeResolver(); }
Теперь предпочтения темы пользователя сохраняются в базе данных, а не в виде файла cookie.
Альтернативным способом сохранения предпочтений пользователя мог бы быть контроллер Spring MVC и отдельный API.
7. Заключение
В этой статье мы изучили шаги по настройке тем Spring MVC.
Мы также можем найти полный код на GitHub .