velocity

Velocity Template Engine 模板引擎

1. 简介

    对于jsp的JSTL表达式大家都不陌生，velocity就是一款类似于其功能的工具。为什么要使用velocity?首先它比jsp快。其次velocity简单没有jsp那么多杂七杂八的标签。最重要的是它实现了model和view层的分离解耦。试想一下一个前端开发 人员在完全没有学习过jsp的情况下要去使用jsp的标签和表达式多少有点费劲了。有了velocity这样简单的脚本语法，只需要稍加学习就可以熟练运 用了。与velocity类似的还有一个FreeMarker，感兴趣的同事可以去了解。

2. 配置

 在maven项目中添加依赖：

       

 1 <!– velocity –>
 2 
 3         <dependency>
 4 
 5             <groupId>org.apache.velocity</groupId>
 6 
 7             <artifactId>velocity</artifactId>
 8 
 9             <version>1.7</version>
10 
11         </dependency>
12 
13         <dependency>
14 
15             <groupId>org.apache.velocity</groupId>
16 
17             <artifactId>velocity-tools</artifactId>
18 
19             <version>2.0</version>
20 
21         </dependency>
22 
23         <!– velocity –>

 

 

 

在springMVC配置中添加

  

 1  <!– 配置velocity引擎处理请求 –>
 2 
 3     <bean id="velocityConfigurer"
 4 
 5         class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
 6 
 7         <property name="resourceLoaderPath">
 8 
 9             <value>/WEB-INF/views/</value>
10 
11         </property>
12 
13         <property name="velocityProperties">
14 
15             <props>
16 
17                 <prop key="input.encoding">utf-8</prop>
18 
19                 <prop key="output.encoding">utf-8</prop>
20 
21             </props>
22 
23         </property>
24 
25     </bean>
26 
27     
28 
29     <!– 配置velocity视图解析器 –>
30 
31     <bean id="viewResolver"
32 
33         class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
34 
35         <property name="suffix">
36 
37             <value>.vm</value>
38 
39         </property>
40 
41     </bean>

 

 

 

    第一个bean配置了velocity模板文件的路径和编码，第二个bean配置了springMVC视图解析器的实现类 VelocityViewResolver。后缀名称是.vm。假如视图名称是index，则自动去解析页面文件/WEB-INF/views /index.vm。

3. 插件

如果你使用Eclipse4.3 Kepler该插件可以顺利安装。

Eclipse4.4 LUNA不可以成功安装该插件，原因未知。而且目前笔者也没有找到LUNA中能用的velocity插件。

如果你有方法请一定留言回复我，谢谢。

velocity eclipse插件推荐使用Veloeclipse googlecode,velocity插件支持代码高亮（只对于vm后缀名的文件有效）。

官方网站：http://code.google.com/p/veloeclipse/

插件更新地址：http://veloeclipse.googlecode.com/svn/trunk/update/

如何安装不再敖述。

4. 语法

"#"用来标识Velocity的脚本语句，包括#set、#if 、#else、#end、#foreach、#end、#include、#parse、#macro等； "$"用来标识一个对象(或理解为变量)； "{}"用来明确标识Velocity变量； "!"用来强制把不存在的变量显示为空白

"##"注释

""转义

1 #set {} !  符号使用 ：
2 
3 #set ( $add = 1 + 1 )
4 
5 #set ( $foo = "Velocity" )
6 
7 Hello ${foo} $add World! Hello $!messgae World! ${foo}

 

输 出 Hello Velocity 2 World! Hello World! ${foo},注意一点：在作为输出语句的时候 ${foo}和$foo是一样的效果，但是在#set ( $foo = "Velocity" )如果使用#set ( ${foo} = "Velocity" )则是错误的语法。在set赋值语句中是可以进行运算的。

 

#if #elseif  #else #end 使用

 1 #set ( $flag=1 * 8)
 2 
 3 #if (${flag}==0)
 4 
 5 aaaaa
 6 
 7 #elseif ($flag==8)
 8 
 9 bbbbb
10 
11 #else
12 
13 ccccc
14 
15 #end

 

输出 bbbbb 8

#foreach（$element in $list）#end

后台程序

   

 1 public ModelAndView login(HttpServletRequest request,
 2 
 3             HttpServletResponse response) {
 4 
 5         List<StudentEntity> list = new ArrayList<StudentEntity>();
 6 
 7         StudentEntity student = new StudentEntity(null,"3","van","male");
 8 
 9         list.add(student);
10 
11         student = new StudentEntity(null, "4", "thomas", "male");
12 
13         list.add(student);
14 
15         ModelAndView modelAndView = new ModelAndView();
16 
17         modelAndView.setViewName("velocity"); // 这是模板文件
18 
19         modelAndView.addObject("students", list);
20 
21         return modelAndView;
22 
23     }

 

 

 

前台

 

1   #foreach (${element} in ${students})<br>
2 
3     $velocityCount This is ${element.studentName}<br>
4 
5     #end<br>

 

 

 

    输出

　　　　 1 This is van      

            2 This is thomas

element.studentName去调用了StudentEntity.getStudentName()方法获取数据

#macro(不建议多使用)

#macro(getnames $name $name2)

      $name $name2

#end

#getnames(2,2)

输出 2 2，类似于定义一个方法getnames 该方法有2个参数。函数体的类容直接显示到document中

#include、#parse

#include("top.vm","left.vm")可以引入多个文件但是不解析VTL脚本

#parse("index.vm")只可以引入单个文件并且解析脚本。

 

5. 解决jquery冲突

    因为velocity翻译在页面解析之前。因此如果使用$.ajax()这样的语法在被velocuty插件解析的时候页面会有错。可以使用 jQuery.ajax()解决，或者#set($jquery="$.")  ${jquery}ajax();页面被velocity解析时被翻译成$.ajax()再被js执行。

7. velocity tools

 

7.1.    toolbox配置

   velocity tools是Apache velocity项目下的子项目。如它本身的名字一样，velocity tools可以方便页面调用一些通用的“组件”，这些组件由一些java程序实现。velocity本身自带一些工具类。比如 org.apache.velocity.tools.generic.DateTool这个工具类，提供了在vm模板里面简洁的输出日期。但是必须配置 tools工具。还记得在本文开篇就提到的配置velocity视图解析器的地方么？ velocity tools就需要从这里去配置。我们下载velocity的源码看 org.springframework.web.servlet.view.velocity.VelocityViewResolver。

1 public class VelocityViewResolver extends AbstractTemplateViewResolver {
2 
3     private String dateToolAttribute;
4 
5     private String numberToolAttribute;
6 
7     private String toolboxConfigLocation;

 

    看到了toolboxConfigLocation么？tools的配置文件路径有了它我们添加配置到velocity视图解析器里面：

  

 1  <!– 配置velocity视图解析器 –>
 2 
 3     <bean id="viewResolver"
 4 
 5         class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
 6 
 7         <property name="suffix">
 8 
 9             <value>.vm</value>
10 
11         </property>
12 
13         <property name="contentType" value="text/html;charset=UTF-8"></property>
14 
15         <property name="toolboxConfigLocation">
16 
17             <value>/WEB-INF/toolbox.xml</value>
18 
19         </property>
20 
21     </bean>

 

 

 

toolbox.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 
 3 <toolbox>
 4 
 5     <data type="number">
 6 
 7         <key>version</key>
 8 
 9         <value>1.1</value>
10 
11     </data>
12 
13     
14 
15     <tool>
16 
17         <key>date</key>
18 
19         <scope>application</scope>
20 
21         <class>org.apache.velocity.tools.generic.DateTool</class>
22 
23     </tool>
24 
25     <tool>
26 
27         <key>escape</key>
28 
29         <scope>application</scope>
30 
31         <class>org.apache.velocity.tools.generic.EscapeTool</class>
32 
33     </tool>
34 
35     <tool>
36 
37         <key>math</key>
38 
39         <scope>application</scope>
40 
41         <class>org.apache.velocity.tools.generic.MathTool</class>
42 
43     </tool>
44 
45 </toolbox>

 

简单说一下这个配置文件，从结构上看，最外面是toolbox，里面可以有标签data和tool。

data即是数据。type指定数据类型，key在VTL中使用的变量名称，value对应的值

tool工具类，key在VTL中使用的变量名称，class指定java类，scope域（这个概念相信大家不陌生），这个需要根据实际工具的用途去设定。

7.2. 自己实现一个velocity tool。

MyTestTool.java

 

  1 import java.util.List;
  2 
  3 import java.util.Random;
  4 
  5 import org.apache.velocity.tools.config.DefaultKey;
  6  8 
  9 @DefaultKey("mytestool")
 10 
 11 public class MyTestTool{
 12 
 13     private long sessionCode;
 14 
 15     public MyTestTool() {
 16 
 17         Random r = new Random();
 18 
 19         sessionCode = r.nextLong();
 20 
 21         
 22 
 23     }
 24 
 25     public String getSessionCode(){
 26 
 27         String html="";
 28 
 29         html += "<div style='background:red'>";
 30 
 31         html += sessionCode;
 32 
 33         html += "</div>";
 34 
 35         return html;
 36 
 37     }
 38 
 39     public String getHtml(List<Root> list){
 40 
 41         String html="";
 42 
 43         html += "<div style='background:red'>";
 44 
 45         html += "<table>";
 46 
 47         for (int i = 0; i < list.size(); i++) {
 48 
 49             html += "<tr style='background:yellow'>";
 50 
 51             html += "<td>";
 52 
 53             html += i;
 54 
 55             html += "</td>";
 56 
 57             html += "<td style='background:blue'>";
 58 
 59             html += list.get(i).toString();
 60 
 61             html += "</td>";
 62 
 63             html += "</tr>";
 64 
 65         }
 66 
 67         html += "</table>";
 68 
 69         html += "</div>";
 70 
 71         return html;
 72 
 73     }
 74 
 75 }
 76 
 77      toolbox.xml中添加
 78 
 79     <tool>
 80 
 81         <key>mytestool</key>
 82 
 83         <scope>session</scope>
 84 
 85         <class>com.cisdi.cdf.demo.vcitytool.MyTestTool</class>
 86 
 87     </tool>
 88 
 89 controller
 90 
 91     @RequestMapping(value = "/index")
 93     public ModelAndView index(HttpServletRequest request,
 95             HttpServletResponse response) {
 97         List<Root> list = baseServiceImpl.getAll("dsdemo", Student.class);
 99         view.addObject("students", list);
101         view.addObject("list",list);
105         return view;

 

 

vm模板

<div>   

　${request.getSession().getAttribute("namex")}<br><br>

    tool date TIME:${date}  

   ${mytestool.sessionCode}  

   ${mytestool.getHtml($list)}   

   version:$version<br><br>

</div>

 

posted @ 2014-08-04 14:15  _泥人张  阅读(1195)  评论(1)    收藏  举报