Весенние темы MVC

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
            
                
                    
                        Change Theme

На самом деле, наше приложение будет работать в этот момент, всегда выбирая нашу светлую тему.

Давайте посмотрим, как мы можем позволить пользователю изменить свою тему.

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 Optional findUserPreferredTheme() {
    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 .