Skip to main content
 首页 » 编程设计

如何使用spring mvc 主题

2022年07月19日130me-sa

如何使用spring mvc 主题

主题是一组静态资源的集合,一般包括影响应用程序界面样式的资源,如样式表和图像文件。本文详细说明使用 Spring MVC 的主题实现不同风格切换。

配置Spring MVC 主题

在spring web 应用中使用主题,需要配置一个实现org.springframework.ui.context.ThemeSource接口的类,这里我们使用org.springframework.ui.context.support.ResourceBundleThemeSource类实现从根类路径载入属性文件。

当使用ResourceBundleThemeSource,在一个简单属性文件中定义主题。属性文件列出所有组成该主题的资源。示例如下:

styleSheet=/themes/wood.css

所有属性的key在视图代码(如jsp)中作为主题元素的名称被引用。在jsp中,使用spring:theme标签,下面jsp片段使用主题定义样式和风格:

< %@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 
< html> 
    < head> 
        < link rel="stylesheet" href="< spring:theme code='styleSheet'/>" type="text/css"/> 
    < /head> 
    < body> 
        ... 
    < /body> 
< /html>

配置ResourceBundleThemeSource bean

在bean定义文件中配置ResourceBundleThemeSource bean。

< bean id="themeSource" class="org.springframework.ui.context.support.ResourceBundleThemeSource"> 
    < property name="basenamePrefix" value="theme-" /> 
< /bean>

注意,我们已经设置了前缀属性”theme-“,缺省ResourceBundleThemeSource使用空名称作为前缀。
所以属性文件应该被命名为theme-filename.properties,如:theme-wood.properties, theme-pentagon.properties etc.

主题解释器

定义了主题之后,ThemeResolver实现决定主题如何使用。spring提供不同的解释器,举例:FixedThemeResolver, SessionThemeResolver, CookieThemeResolver.

本例中我们使用CookieThemeResolver 类实现,选择的主题被存储在客户端cookie中。

配置主题解释器:

< bean id="themeResolver" class="org.springframework.web.servlet.theme.CookieThemeResolver"> 
    < property name="defaultThemeName" value="wood" /> 
< /bean>

注意:我们设置了缺省的主题:wood,所以当用户第一次访问web应用,wood主题有效。

主题拦截器

为了允许用户通过点击切换主题,spring提供ThemeChangeInterceptor,下面是ThemeChangeInterceptor的配置定义:

< bean id="themeChangeInterceptor" class="org.springframework.web.servlet.theme.ThemeChangeInterceptor"> 
    < property name="paramName" value="theme" /> 
< /bean>

我们已经指定paramName的值为theme,意味着当请求带参数theme用不同的值时,ThemeChangeInterceptor将被执行。同时也需要配置ThemeChangeInterceptor bean,上面我们定义的拦截器,通过使用mvc:interceptors标签实现:

< mvc:interceptors> 
   < ref bean="themeChangeInterceptor">< /ref> 
< /mvc:interceptors>

项目结构

这里是eclipse中项目结构快照:
这里写图片描述
src文件夹下theme-pentagon.properties文件内容如下:

styleSheet=themes/pentagon.css

只有一行,定义了获得相应css文件的url,其他属性文件类似,如:theme-symphony, theme-wood, theme-wall.
美特属性文件只有一行引用css文件的url。

所以,无论什么时候ThemeChangeInterceptor 拦截到主题改变时,都能找到相应的属性文件,并尝试访问属性文件中url指定的对应css文件。

因为所有的主题(css文件)都在resources/themes文件夹下,我们必须配置themes/css-filename给所有的resources/themes/css-filename,否则属性文件将不能定位至css文件。我们通过下面语句进行配置:

< mvc:resources mapping="/themes/**" location="/resources/themes/">< /mvc:resources>

wood.css

在wood.css文件中,我们仅改变body标签的背景图片,但实际你可以做更多的样式改变,如文字样式、字体、颜色等。

body {
background-image : url(“/Themes/images/wood_pattern.png”);
}

HomeController
我们有一个简单HomeController 服务home.jsp.

@Controller
public class HomeController {

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

}

启动主题应用

现在,我们全部启动主题应用,运行过程中,可以看到home.jsp页面使用缺省的wood风格。

我们通过点击主页右侧的主题链接浏览其他主题。
这里写图片描述
Wall Theme
这里写图片描述
Pentagon Theme
这里写图片描述
Symphony Theme
这里写图片描述

注意:点击不同主题链接观察url改变点击一个主题链接,举例wood,请求参数主题带wood值,发送至服务器端。ThemeChangeInterceptor 拦截主题改变,并展示相应主题。

关于主题的一些坑

有几点坑需要了解:

  • 确保属性文件子啊类路径下,应该把属性文件放在src文件夹下,如果属性文件不在类路径下,会报ServletException,没有相应的样式表本地化文件:
    这里写图片描述
  • 第二需要注意在属性文件中链接至CSS的url,我们之前提及的url,hemes/css-file-name是未来查找主题文件。必要忘了映射这个url到css文件的实际位置。使用mvc:resources,我们在示例中配置为.如果没有配置,不会有错误信息,但主题不能访问css文件。
  • 最后一个错误是,使用spring主题时,jsp文件中不使用spring:theme标签。注意我们在jsp文件中使用spring:theme,” type=”text/css”/>,正确使用这个标签让主题正常工作。

本文参考链接:https://blog.csdn.net/neweastsun/article/details/79213867