第09章Web网页模板技术

1、第第9章章 Web网页模板技术网页模板技术 9.1 Web模板简介 9.2 Velocity模板 9.3 FreeMarker模板 9.1 Web模板简介模板简介 模板技术提供了一种简洁的方式来生成动态的页面，并将程序逻辑和视图之间分离开来，从而使程序开发人员只专注于编写底层代码，页面设计人员只专注于视图方面的设计，这种方式不仅提高了开发效率，还使得应用程序在长时间运行后依然具有很好的维护性。 模板语言在现代的软件开发中占据着重要的地位，它的功能强大，而且学习起来又是非常简单，即使不熟悉编程的人也能很快的掌握它。 模板语言可以生成动态的页面，简化Web开发，但是它不仅仅局限于此，还有许多地方都

2、可以应用它，比如生成SQL、Email、XML或者程序源代码，甚至作为其它系统的一个集成组件。Velocity和FreeMarker是目前流行的两种模板语言，其中Velocity是Apache Jakarta的一个开源产品，同时它也是一个基于Java的模板引擎，可方便的对模板进行解析和处理。FreeMarker是另一个优秀的模板语言，它的功能也是非常强大，而且适合于MVC模式的Web应用中。 返回9.2 Velocity模板模板 Velocity模板语言简称VTL，是一个基于Java的模板引擎。在一个应用程序中，可以预先使用Velocity模板语言设计好模板，开发人员将页面显示的数据放入上下文

3、中，Velocity引擎将模板和上下文结合起来，然后就可生成动态的网页。使用Velocity具有以下几个优点： vVelocity是Apache软件组织提供的一项开源项目，可以免费下载。vVelocity简单，掌握Velocity是一件容易的事情。vVelocity模版中不包含任何Java代码，它将HTML技术和复杂的业务逻辑划分出来，能简化Web开发。vVelocity不仅可以生成Web页面，还可以从模板中生成SQL、PostScript和XML，功能强大。vVelocity支持模版的国际化编码转换。 返回9.2 Velocity模板模板 9.2.1 Velocity下载与安装 9.2.3

4、Velocity的注释 9.2.5 Velocity的指令 9.2.2 初识Velocity 9.2.4 Velocity的引用 9.2.6 Velocity的其它特性 9.2.7 在Web应用程序中使用Velocity Velocity下载与安装下载与安装 Velocity的下载网站是“/”，在此网站上下载完Velocity以后将其解压缩，会得到两个jar文件：velocity-1.5.jar和velocity-dep-1.5.jar，其中velocity-1.5.jar包含了Velocity的核心类，但是它没有Velocity必需的库文件，

5、velocity-dep-1.5.jar不仅包含了构建完整的Velocity库文件，还有Velocity所有依赖的库文件。将这两个jar文件放入应用程序的classpath下，就完成了Velocity的安装。 返回初识初识Velocity（1） 下面通过一个简单实例来初步认识Velocity。（1）在ecplise中新建一个Java工程，在工程的根目录下建立Velocity模板文件，Velocity的模板文件以.vm结尾，在这里建立的模板文件的名称为hello.vm，具体代码如下： hello,$name 其中，$name被称为Velocity的变量引用，它的值由Java程序来提供。 （2）建

6、立给Velocity变量引用提供值的Java类，类名为“HelloVelocity.java”主要代码如下： 初识初识Velocity（2） public class HelloVelocity public static void main(String args) try Velocity.init();/初始化Velocity引擎 catch (Exception e) e.printStackTrace();VelocityContext context = new VelocityContext(); /初始化Velocity上下文context.put(name, Velocity

7、);/把数据填入上下文StringWriter writer = new StringWriter();try /把模板和上下文结合起来Velocity.mergeTemplate(hello.vm, ISO-8859-1, context, writer); catch (Exception e) e.printStackTrace();System.out.println(writer.toString(); /控制台上输出 运行类HelloVelocity，程序的运行结果如图所示： 返回Velocity的注释的注释 在Velocity模板中包括以下两种注释： v单行注释：以#开头。v多行

8、注释：以#*开始，以*#结束。 例如：#这是单行注释#* 这是多行注释 这是多行注释*# 返回Velocity的引用（的引用（1） Velocity引用的作用是为了在模板中显示动态的内容。在Velocity中，引用分为变量引用、属性引用和方法引用。 1变量引用 变量引用由$和VTL标识符组成，VTL标识符必须以字母开头，其余字符可以是字母（az 、AZ）、数字（09）、连字符（-）或下划线（_）。例如：$username$user-name$user_name$number1 变量引用有两种赋值方式：一种是在Java程序中赋值：context.put(name, Velocity);另一种是使

9、用set指令赋值：#set($username=sunyang)hello,$username Velocity的引用（的引用（2） 2属性引用 属性引用是由$、点号（.）和VTL标识符组成的，例如：$country.china$user.age 属性引用也有两种赋值方式：一种是使用Hashtable对象赋值；另一种是使用方法赋值。有如下模板文件： bookname: $book.booknamebookauthor: $book.bookauthor 使用Hashtable对象在程序中赋值： 使用方法赋值 ，创建Book类，有对应属性的get、set方法：Hashtable book=new

10、 Hashtable();book.put(bookname,JSP教材);book.put(bookauthor, sunyang);context.put(book, book); Book book=new Book();book.setBookname(JSP教程);book.setBookauthor(sunyang);context.put(book, book); Velocity的引用（的引用（3） 3方法引用 方法引用由$、VTL标识符和方法体组成，下面是使用方法引用的例子： $book.getBookid()$book.setBookname(JSP教程) $book.ge

11、tBookid()这种形式和属性引用中的方法赋值是一样的，而“$book.setBookname(JSP教程)”这种形式则是给属性bookname赋值。 返回Velocity的指令（的指令（1） 在Velocity中，引用用来输出动态内容，指令则是用来控制页面的外观和内容。1给引用赋值的set指令 set指令用于给变量引用或属性引用赋值，语法格式如下： #set(name=value) vname参数：该参数必须是变量引用或属性引用vvalue参数：该参数可以是变量可以是变量引用、属性引用、 方法引用、字符串、数字、ArrayList或算术表达式。 参数说明：例如：#set( $monkey

12、= $bill) #变量引用 #set( $monkey.Blame = $whitehouse.Leak ) #属性引用#set($monkey.Plan = $spindoctor.weave($web) #方法引用#set( $monkey.Friend = monica ) #字符串 #set( $monkey.Say = Not, $my, fault ) #ArrayList#set( $number = $foo + 1 ) #算术表达式加法 Velocity的指令（的指令（2） 当value值为字符串时，须用单引号或双引号包围起来。用单引号和双引号之间有所不同，用双引号的引用会

13、替换成相应的值，而用单引号的引用则输出原代码。例如： #set( $directoryRoot = www )#set( $domain= )#set( $mydomain1 = $directoryRoot.$domain )#set( $mydomain2 = $directoryRoot.$domain)$mydomain1$mydomain2 程序的输出结果如图所示： Velocity的指令（的指令（3） 2进行条件控制的if/elseif/else指令 if/elseif/else指令类似于Java语言中的ifelseifelse指令，可进行条件控制，格式如下： #if(condit

14、ion) .#elseif(condition2) .#else .#end 例如：#set($type=sunyang)#if($type=sunyang) 金牌会员#elseif($type=common) 普通会员#else 游客#end Velocity的指令（的指令（4） 3进行遍历循环的foreach指令 foreach指令可用于进行遍历循环，格式如下： #foreach(Loop).#end foreach指令可进行循环的对象有Vector、Hashtale或Array，例如：#foreach($book in $booklist) $book#end Velocity的指令（的

15、指令（5） 4可包含文件的include指令 使用include指令可将一个本地文件导入到模板中指定的位置，可一次导入一个本地文件，也可一次导入多个本地文件，导入多个时文件之间用逗号分开，文件名可用引用变量代替。include指令的语法格式如下： #include(file) #包含一个文件#include(file1，file2，fileN)#包含多个文件 例如：#include(main.html)#include(top.html，$main，$footer) Velocity的指令（的指令（6） 5可包含文件的parse指令 使用parse指令可导入一个包含VTL的本地文件，和使用in

16、clude不同，使用parse指令导入的文件会被Velocity解析，而且它只能一次导入一个文件，该指令的语法格式如下： #parse (file) 例如：#parse (index.vm)#parse ($main) 说明：使用parse指令包含的文件必须放在TEMPLATE_ROOT目录下。 Velocity的指令（的指令（7） 6停止执行的stop指令 stop指令经常被使用在调试过程中，它可停止模板引擎的执行并返回，语法格式如下： #stop 7定义宏的macro指令 宏是一段可重复使用的VTL片段，它使用macro指令定义，语法格式如下： #macro (macroname para

17、m1 param2 . paramN) #end macroname是定义的宏的名字，param1到paramN是宏的参数。使用macroname宏的语法格式如下： # macroname（param1，param1 param2 . paramN） Velocity的指令（的指令（8） 例如，定义宏：#macro( tablerows $color $somelist )#foreach( $something in $somelist )$something#end#end #set($greatlakes=Superior,Michigan,Huron,Erie,Ontario#set(

18、 $color = blue ) #tablerows( $color $greatlakes ) 使用宏 返回Velocity的其它特性（的其它特性（1） 1数学运算 Velocity的数学运算功能是通过set指令来实现的。例如：#set( $number = $sum + 6.8 )#set( $number = $sum - 10 )#set( $number = $sum * 9 )#set( $number = $sum/13)#set( $number = $sum%2) 2范围操作 n.m n与和m必须是整数。范围操作通常与et指令和foreach指令一起使用，否则会被解析成普通

19、的字符串，例如： #set($sum=0.2)#foreach($number in $sum)$number#end$sum0.2 Velocity的其它特性（的其它特性（2） 3字符串连接 Velocity的字符串连接非常简单，只需将需要连接的字符串放在一起就可以，例如： #set($firstname=George)#set($lastname=Bush)#set($name=$firstname$lastname )#连接后赋给一个引用变量he name is $firstname$lastnamehe name is $name 要将字符串与引用连接需要使用一种引用符：$。该引用符在

20、Velocity中称为正式引用符，例如： #set($firstname=George)he name is $firstnameBush 返回在在Web应用程序中使用应用程序中使用Velocity（1） 在本示例中，将数据放入工具箱tools.xml中，然后由Velocity负责将工具箱中的数据“读出”，在模板文件中进行处理后将结果返回给用户。（1）创建一个Web工程，并将Velocity模板中所涉及到的类包导入到该工程下，其中本工程所需的jar文件如图所示： （2）创建名为“welcome.vm”的模板文件，该模板文件显示网页的登录次数，代码如下： 在在Web应用程序中使用应用程序中使用V

21、elocity（2） 欢迎页$hello.message$user，这是您第$times次登录该网站。 （3）创建名称为“Hello.java”类文件，该类用来给模板文件中的引用提供值，代码如下： public class Hello private String message=你好，欢迎访问三扬科技的公司网站;public String getMessage() return message; public void setMessage(String message) this.message = message; 在在Web应用程序中使用应用程序中使用Velocity（3） （4）在W

22、EB-INF下新建一个XML文件，名称为tools.xml，代码如下： Jone （5）在web.xml中配置Servlet的实现类为VelocityViewServlet，VelocityViewServlet是Velocity工具集中的一个Servlet类，它提供了对请求对象和属性、会话对象和属性以及Servlet上下文和属性的直接模板访问。web.xml的关键代码如下： 在在Web应用程序中使用应用程序中使用Velocity（4） velocityorg.apache.velocity.tools.view.VelocityViewServletvelocity*.vmwelcome.v

23、m 程序运行结果如图所示： 返回9.3 FreeMarker模板模板 FreeMarker是一个基于Java的模板引擎，它被用来设计生成Web静态页面，对采用MVC模式设计的应用程序尤为适用。FreeMarker简化了Web应用的开发，使Java代码从Web页面中分离出来，增强了系统的可维护性。FreeMarker同时是一个轻量级的组件，与容器无关，它能够生成各种文本如HTML、XML、RTF甚至于Java源代码。此外，FreeMarker还具有以下的几个优点： v强大的模板语言：囊括所有常有的指令，使用复杂的表达式以及宏等。v通用的数据模型：使用抽象（接口）方式表示对象。v智能的国际化和本地

24、化：多种不同语言的相同模板。v强大的XML 处理能力：可访问XML对象模型。v友好的报错信息：报错信息准确、详细。返回9.3 FreeMarker模板模板 9.3.1 FreeMarker下载与安装 9.3.3 FreeMarker的注释 9.3.5 FreeMarker的Interpolation 9.3.2 初识FreeMarker 9.3.4 FreeMarker的指令 9.3.6 FreeMarker的表达式 9.3.7 在Web应用程序中使用FreeMarker FreeMarker下载与安装下载与安装 FreeMarker的下载网站是“http:/www.FreeMarker.or

25、g/index.html”。可选择下载FreeMarker的完整开发包，它里面包含了FreeMarker的示例应用、帮助文档、源代码和所有类库。开发一个基于FreeMarker的应用程序所依赖的jar文件为freemarker.jar，因此，只需将freemarker.jar放入应用程序的classpath下，就完成了FreeMarker的安装。 返回初识初识FreeMarker （1） FreeMarker本身是使用纯Java语言编写的一个模板引擎，它采用MVC模式设计，允许Java Servlet保持图形设计同应用程序逻辑的分离。FreeMarker的工作原理是模板+数据模型=输出，以此将

26、数据模型中的数据合并到模板并将其输出。下面通过一个简单实例来初步认识FreeMarker。 （1）在ecplise中新建一个Java工程，在工程的根目录下新建一个文件夹freemarker，freemarker文件夹中创建FreeMarker的模板文件，FreeMarker的模板文件以.ftl结尾，名称为hello.ftl，代码如下： hello,$user （2）建立完模板文件后，创建给模板提供值的数据模型，创建数据模型的Java程序主要代码如下： 初识初识FreeMarker （2）public class HelloFreeMarker public static void main(S

27、tring args) Configuration configuration = new Configuration();/初始化ConfigurationMap data = new HashMap();data.put(“user”, “FreeMarker”);/将数据放入Map中Template template = null;try template = configuration.getTemplate(“freemarker/hello.ftl”);/加载模板 catch (IOException e) e.printStackTrace();try c

28、ess(data, new OutputStreamWriter(System.out);/输出数据 catch (TemplateException e) e.printStackTrace() catch (IOException e) e.printStackTrace(); 运行类HelloFreeMarker，程序的输出结果如图所示： 返回FreeMarker的注释的注释 FreeMarker的注释以结束。例如： FreeMarker的注释还可用在FreeMarker的指令和Interpolation内部，例如： 欢迎你： $username !#list sequence as i

29、tem 返回FreeMarker的指令（的指令（1） 1进行条件判断的if/elseif/else指令 FreeMarker的if/elseif/else指令用来进行对数据的分支控制，if指令可单独使用。if/elseif/else指令的语法格式如下： . . . . 例如： 60) 老年40) 中年20) 青年 少年或儿童 FreeMarker的指令（的指令（2） 2进行迭代的list、break指令 list指令用于迭代输出集合元素中的值，break指令则用于终止循环。list、break指令的语法格式如下： . hash_or_seq可以是集合对象或者hash表，甚至还可以是一个返回值为

30、集合对象的表达式，item是被迭代输出的集合元素。在list指令中有两个隐含的特殊变量：vitem_index：该变量将返回元素在hash_or_seq里的索引值。vitem_has_next：该变量类型为boolean型，当值为false时表明该元素是hash_or_seq里的最后一个元素。 FreeMarker的指令（的指令（3） 3进行分支控制的switch、case、default、break指令. . . . switch、case、default、break指令类似于Java中的switch结构，可用来进行分支控制，它的语法格式如下： switch指令中至少需要包含一个case指令

31、，例如： 春天 夏天 秋天冬天 FreeMarker的指令（的指令（4） 4可包含文件的include指令 include指令用于包含指定的文件，语法格式如下： filename指被包含的文件名，options可省略或者是下面两个值： vencoding：包含页面时所用的编码格式。vparse：指定包含文件是否用FTL语法解析，默认值是true。 例如： FreeMarker的指令（的指令（5） 5导入文件的import指令 import指令用于导入指定的模板文件，类似于Java中的import，它的语法格式如下： 例如： 6不处理内容的noparse指令 noparse指令可指定FreeMa

32、rker不处理被指令包含的内容，语法： 例如：60) $number FreeMarker的指令（的指令（6） 7可压缩空白空间和空白的行compress指令 compress指令用于压缩空白空间和空白的行。语法格式如下： 8添加与去除表达式的escape、noescape指令 escape指令用于使被escape指令包围的Interpolatioin自动加上escape表达式，而noescape指令则用于取消这些表达式。语法格式如下： . . . 书名:$bookname作者:$bookautor价格:$bookprice 书名:$bookname?html 作者:$bookautor价格:

33、$bookprice?html 等价FreeMarker的指令（的指令（7） 9定义或隐藏变量的assign指令 assign指令的作用是定义或隐藏变量，所谓隐藏变量是指assign定义的变量之前已经存在，使用assign定义后之前变量的值会被当前变量隐藏。assign指令的语法格式如下： assign指令还可一次定义多个变量，定义多个变量的语法格式如下： FreeMarker允许assign指令用in子句将定义的变量放入namespace(命名空间)中，语法如下： assign指令允许将一段输出的文本赋值给定义的变量，语法格式如下： 循环部分输出部分 assign指令还允许将变量的名称定义为

34、中文。 FreeMarker的指令（的指令（8） 10定义全局变量的global指令 使用global指令定义的变量为全局变量，global指令的语法格式如下： 11设置运行环境的setting指令 setting指令可用来设置系统的运行环境，它的语法格式如下： 若global指令和assign指令一起使用，global指令定义的变量会被assign指令所隐藏。 name可以是以下几个值： vlocale：设置模板所用的国家/语言选项。vnumber_format：设置格式化输出数字的格式。 FreeMarker的指令（的指令（9） vboolean_format：设置两个boolean值的语

35、法格式，默认值是“true，false”。vdate_format, time_format, datetime_format：设置格式化输出日期的格式。vurl_escaping_charset：设置URL传递参数的字符集编码格式。vtime_zone：设置格式化输出日期所使用的时区。 例如，使用setting指令格式数字： $number $number FreeMarker的指令（的指令（10） 宏是一个用户自定义指令，定义完宏后就可以在模板中用来使用宏。在FreeMarker中，宏是使用macro指令来定义的，定义宏的语法格式如下： . . . 12可自定义指令的宏指令 name是定义

36、的宏的名字，paramN是宏的参数，该参数可包含多个。nested指令用于输出宏的开始和结束标签之间的部分，loopvarN是nested指令中的循环变量，这些变量由macro定义部分指定后传给使用的模板。return指令用于结束宏。 返回FreeMarker的的Interpolation（1） 在FreeMarker中，Interpolation包括两种：通用Interpolation和数字专用Interpolation 1通用Interpolation的语法如下： $expre 当expre的值是字符串时，会直接在模板中输出表达式结果。 当expre的值是数字时，其输出格式由setting

37、指令指定或通过内建的字符串函数指定 。 当expre的值是日期时，其输出格式由setting指令指定或通过内建的字符串函数指定 。 当expre值为boolean时，不能直接输出，可以使用内建的字符串函数格式化后再输出 。FreeMarker的的Interpolation（2） 2数字专用Interpolation 的语法如下： #expre 或 #expre；format 第2种语法格式可用来格式数字，其中的format使用mN或MN表示，mN代表小数部分最小N位，MN代表小数部分最大N位 。例如：#x;m2#x;M2#y;m1#y;M1#x;m1M3#y;m1M2 返回FreeMarker

38、的表达式的表达式 （1）1直接指定值 v字符串：字符串用单引号或双引号限定，包含特殊字符的字符串 需要转义。转义序列如表所示。 转义序列含义双引号(u0022)单引号(u0027)反斜杠(u005C)n换行(u000A)rReturn (u000D)tTab (u0009)bBackspace (u0008)fForm feed (u000C)la&xCode4位16进制Unicode代码FreeMarker的表达式的表达式 （2）1直接指定值 v数字：数字可直接输入，不需要引号。精度数字使用“. .”分割。 v集合：集合包括由逗号分割的子变量列表（如“男”，“女”）和 数字序列（如0.3，相

39、当于0,1,2,3） v布尔值：布尔值包括true和false，不需要引号。 v散列（hash）：散列是由逗号分隔的键/值列表，由大括号限定， 键和值之间用冒号分隔，如： username: sunyang , age:30。 FreeMarker的表达式的表达式 （3）2获取变量 获取变量的途径如下： v从顶层变量中获取：顶层变量其实就是存放在数据模型中的值，在模板中使用$var直接输出，变量名由字母、数字、下划线、$、和#的组合而成，且不能以数字开头。v从散列（hash）中获取：从散列（hash）中获取的变量，使用点号（“. .”）或方括号（“”）来输出。v从集合中获取：获取方式和散列中用

40、方括号获取相同，但是要求方括号中的表达式值必须是数字。v特殊变量的获取：对于一些特殊的变量，比如FreeMarker的 提供的内建变量等，使用. .variableName访问。 FreeMarker的表达式的表达式 （4）3字符串操作 v连接字符串：使用$var（或#num）在文本部分插入表达式的值或者直接用加号来连接。v截取子串：截取子串是根据字符串的索引来完成的，如：$username3表示将索引值位置为3的字串截取掉。 4集合操作 集合的连接使用加号（+）连接。 5散列（hash）操作 散列（hash）的连接和集合一样，也是使用加号（+）来连接的。 6算术运算操作 算术运算操作有+、-

41、、%。当进行加加法运算时，如果一边是数字，另一边是字符串，FreeMarker会自动将数字转换为字符串。 FreeMarker的表达式的表达式 （5）7比较运算操作 ，规则如下： v使用=（或=）测试两个值是否相等，使用!= 测试两个值是否不相等，=和!=两边要求相同类型的值。vFreeMarker是精确比较，所以x、x 和X是不相等的。v对数字和日期比较可以使用、和=，但字符串不能。v由于FreeMarker会将解释成FTL标签的结束字符，所以对于和=可以使用括号来避免这种情况，例如 y)。v可以使用lt、lte、gt和gte来替代、和=。 8逻辑运算操作 逻辑运算操作的运算符有逻辑与（&）

42、、逻辑或（|）和逻辑非（!）,逻辑运算符只能作用于布尔值。 FreeMarker的表达式的表达式 （6）9内建函数 内建函数的用法类似访问散列的子变量，只是使用“?”替代“.”，FreeMarker提供的内建函数如下： v字符串函数：字符串函数的名称及其描述如表所示。函数名称描述html对字符串进行HTML编码cap_first使字符串第一个字母大写lower_case将字符串转换成小写upper_case将字符串转换成大写trim去掉字符串前后的空白字符v集合函数：集合函数只有一个：size，用于获取集合中元素中的数目。v数字函数：数字函数也只有一个：int，用于获取数字的整数部分。FreeMarker的表达式的表达式 （7）10空值处理 在FreeMarker 模板中，若变量未被赋值或者未定义，程序将会抛出异常，为了避免这种情况，FreeMarker提供了两个运算符： v！：指定变量的默认值，如：var!或var!defaultValue，当使用 var!这种形式时表明默认值是空字符串、size为零的集合 或size为零的散列（hash），当使用var!defaultValue这种 形式时，不要求defaultValue（默认值）和变量类型相同。v？：使用？时返回值