struts2----template和theme

曹旭东
2023-12-01
--- template和theme
Struts2为每个标签都指定了template,template是由freemarker语言编写的,
它可以翻译成特定的html标签。每个struts2 标签表现出来的效果都是由它的template来指定的。
下面是关于template的四个basics:
1.template加载(template loading).
Tempalates首先从application中查找并加载,要是没找到,再从classpath查找加载。(从template
加载顺序可以看出,要是要想修改或者覆盖一个template,最好将修改后的template放在application中)。


template加载的目录(或者某个模板存放的位置)通常是template目录下的特定的theme主题目录下:
即:/template/特定theme(如xhtml)/template.ftl(下面是一个例子:使用xhtml主题的例子)
In the application : /template/xhtml/template.ftl
In the classpath : /template/xhtml/template.ftl


这里模板目录(template)是默认指定的,开发者可以通过修改struts.properties属性配置中的
struts.ui.templateDir属性来修改默认模板位置。如:修改struts.ui.templateDir=tempDir,上面加载
tempalte.ftl的路径变为:
In the application : /tempDir/xhtml/template.ftl
In the classpath : /tempDir/xhtml/template.ftl


修改一个tempalte
当需要修改一个tempalte时,官方推荐的方法是,从某个主题下,默认模板存放路径中
(template/xhtml/tempalte.ftl)取出这个template.ftl, 修改需要改的地方,然后保存到对应的目录中去。


修改template加载引擎
struts2支持三种模板引擎(ftl,vm,jsp),默认是freeMarker-based tempalte engine(ftl).默认引擎可以
通过struts.ui.templateSuffix 来指定。通常都是使用ftl,其它两种很少用。要使用其它引擎的话,需要
为其实现相关标签的template和theme.


2. 选择模板目录
可以通过下面几种方法来选择模板目录
a.通过具体标签(speical tag)的templateDir属性来指定
b.通过指定page-cope的templateDir属性来指定
c.通过指定request的templateDir属性来指定
d.通过指定session的templateDir属性来指定
e.通过application的templateDir属性来指定
f.通过struts.ui.templateDir来指定(它是指定默认的template目录)


前面5种改变template 目录都具有局限性,要是想对整个web 应用都有效,使用对6中方法(即:f)


3.选择theme(主题)
下面有7中方法能够选择主题:
1.The theme attribute on the specific tag
2.The theme attribute on a tag's surrounding form tag
3.The page-scoped attribute named "theme"
4.The request-scoped attribute named "theme"
5.The session-scoped attribute named "theme"
6.The application-scoped attribute named "theme"
7.The struts.ui.theme property in struts.properties (defaults to xhtml)


下面是一个为单个page页面指定一个theme。page页面默认的theme是通过page的theme变量来指定的
因此要改变一个page的theme,可以使用struts2 的set标签来改变page的theme变量。可以写死,
也可以使用一个变量来指定。如下:
使用static value(直接写死)
<s:set name="theme" value="'simple'" scope="page" />
使用property方法指定(通过一个变量来指定)
<s:set name="theme" value="%{myTheme}" scope="page" />


关于指定theme的几个细节:
1.若要修改整个表单的theme主题,可以指定指定表单form标签的theme属性。在其子标签中没有指定
theme属性的情况下,它也将应用到其子标签上。
2. 对已那种支持用户选择theme主题的网页样式,可以将用户选择的theme存入到session容器中,
通过修改session容器的theme属性来实现。
3. 若要使这个theme对整个applicate都生效,可以通过指定struts.ui.theme来实现。


4.扩展主题(extanding theme)
开发项目时,有时候为了特定的样式需要覆写某个模板,或者需要为某个主题定义一个新的模板。或者
需要开发一个新的主题。这些都是extanding themes.
通常有三种方法可以创建一个新的主题(themes)
1.从头开始创建一个新的主题(非常难)
2.包装一个已存在的主题(wrap an exitiing theme)
3.扩展一个已存在的主题(extend an exiting theme)


第一种方法不可取。


第二种方法:包装一个已存在的主题(wrap an exiting theme)
xhml theme就提供了很多很好的wrap an exiting theme的例子。simple theme render the basci
control. xhtml theme 很多simple theme中的controls. 这种修饰(包装),仅仅是通过为它增加一些
header和footer.如下面的例子:
Wrapping a control
<#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/xxx.ftl" />
<#include "/${parameters.templateDir}/${parameters.expandTheme}/controlfooter.ftl" />


wrap extending an exitsing theme是最常用的方法。


第三种方法:Extending an Existing Theme
和面向对象编程中继承一样,可以是某个theme继承另外一个theme, 这样只需要对需要修改的地方进行code即可。
其它没有修改的地方,还是使用其父theme的样式。在这个theme相关的目录下,可以维护一个theme.properties属性文件,
通过指定这个属性文件的parent,来指定改theme是继承那个theme的。
如:xhtml theme的theme.properties
parent = simple
xhtml-css theme的theme.properties
parent = xhtml
也就是xhtml-css theme继承了xhtml theme, xhtml theme继承了simple theme.


使用theme继承的方法的好处就是,不需要实现每个strust tag的template,只需要修改需要需该的那个tag的template即可。


5. special parameters
Special parameters
UIBean provides few special parameters which can be used to build a new template (they are already used in xhtml
and css_xhtml theme):




templateDir - current value of templateDir parameter, see Selecting Template Directory
theme - used theme, see Selecting Themes
template - name of the template file to use (i.e. text)
themeExpansionToken - special token used to indicate to search for a template also in parent theme
(when used with <#include /> directive)
expandTheme - tells internal template loader mechanism to try load template from current theme and
then from parent theme (and parent theme, and so on)
Using expandTheme parameter allows to override only some parts of the theme's templates, e.g. css.ftl.
You can define a new theme (set theme.properties) and override just single file.




${parameters.expandTheme} is a recurrence which tells ThemeManager to load template from current theme
and then from parent theme (defined in theme.properties) and so on.




Please also notice that the ThemeManager builds list of possible templates based on current theme and
inherited themes (/template/custom/textarea.ftl, /template/xhtml/textarea.ftl, /template/simple/textarea.ftl).
This is also true for templates which are loaded via ${parameters.expandTheme}.




主题theme:
主题theme是实现了所有struts tag的template的组合,这些实现了所有struts tags的templates,就是一个组成了一个主题。struts2 支持
三种中主题:
simple theme:
simple theme仅仅是将template转换成html标签,没有做过多修饰,simple theme是很多其它theme的基础。很多其它theme都是基于
simple主题开发的(xhtml和xhtml-css theme就是继承simple theme开发的)。simple theme翻译的tag没有label,validation, 错误消息回显等内
容。
xhtml theme:
xhtml是struts2 标签默认的主题(theme),它具备了所有simple提供的特定,并增加了一些新的功能:
1.为html struts tag(form, textfield, select 等)提供了标准的二维列表样式
2.为每个struts tag增加了Labels标签,默认位于标签的左侧(有label的labelposition属性决定)
3.提供了表单检验(validation)及错误回显信息(error reporting),这样开发者便无须再去编写代码做校验了
4.pure javascript client side validation using 100% javascript on the browser
xhtml-css theme:
1.Standard two-column CSS-based layout, using <div> for the HTML Struts Tags (form, textfield, select, etc)
2.Labels for each of the HTML Struts Tags, placed according to the CSS stylesheet
3.Validation and error reporting
4.Pure JavaScript Client Side Validation using 100% JavaScript on the browser

 类似资料: