Volecity模板引擎学习笔记

转自：https://blog.csdn.net/reggergdsg/article/details/50937433

最近项目中用到了volecity模板，这里做一下笔记，学习中...相比较 FreeMarker 而言，Velocity 更加简单、轻量级，但它的功能却没有 FreeMarker强大。

1，首先结合开发中遇到的一个问题：关于.vm文件引用外部JS的问题。vm文件引用外部js无效的问题。要搞清楚这个问题，我们需要先搞清楚到底什么是volecity模板？volecity模板是如何工作的？

volecity与jstl一样，都是一种标签技术。Velocity 解决了如何在 Servlet 和网页之间传递数据的问题，当然这种传输数据的机制是在 MVC 模式上进行的，也就是View 和 Modle , Controller 之间相互独立工作，一方的修改不影响其他方变动，他们之间是通过环境变量（Context）来实现的，当然双方网页制作一方和后台程序一方要相互约定好对 所传递变量的命名约定，比如上个程序例子中的 site, name 变量，它们在网页上就是 $name ,$site 。这样只要双方约定好了变量名字，那么双方就可以独立工作了。无论页面如何变化，只要变量名不变，那么后台程序就无需改动，前台网页也可以任意由网页制作 人员修改。这就是 Velocity 的工作原理。

　　你会发现简单变量名通常无法满足网页制作显示数据的需要，比如我们经常会循环显示一些数据集，或者是根据一些数据的值来决定如何显示下一步的数据，
Velocity 同样提供了循环，判断的简单语法以满足网页制作的需要。Velocity
提供了一个简单的模板语言以供前端网页制作人员使用，这个模板语言足够简单（大部分懂得 javascript 的人就可以很快掌握，其实它比
javascript 要简单的多），当然这种简单是刻意的，因为它不需要它什么都能做， View 层其实不应该包含更多的逻辑，Velocity
的简单模板语法可以满足你所有对页面显示逻辑的需要，这通常已经足够了，这里不会发生象
jsp 那样因为一个无限循环语句而毁掉系统的情况，jsp 能做很多事情，Sun 在制定 Jsp 1.0 标准的时候，没有及时的限定程序员在
jsp 插入代码逻辑，使得早期的jsp 代码更象是 php 代码，它虽然强大，但是对显示层逻辑来说，并不必要，而且会使 MVC
三层的逻辑结构发生混淆。

1.  
   Volecity中引用外部文件的问题：
2.  
    
3.  
   #set($ctx="/baseUrl")
4.  
    
5.  
   <script type="text/javascript" src="${ctx}/scripts/charge/test.js"></script>
6.  
    
7.  
   #foreach($list in ${result.plist})
8.  
   <div class="line-info">
9.  
   #if(${list.type} == "3")
10.  
    <img src="${ctx}/images/water-icon.png" class="line-icon">
11.  
    #end
12.  
    #if(${list.type} == "4")
13.  
    <img src="${ctx}/images/power-icon.png" class="line-icon">
14.  
    #end
15.  
    #if(${list.type} == "5")
16.  
    <img src="${ctx}/images/gas-icon.png" class="line-icon">
17.  
    #end
18.  
    #if(${list.type} == "6")
19.  
    <img src="${ctx}/images/TV-icon.png" class="line-icon">
20.  
    #end
21.  
    #if(${list.type} == "7")
22.  
    <img src="${ctx}/images/phone-icon.png" class="line-icon">
23.  
    #end
24.  
    <div class="account-info-area">
25.  
    <div class="account-title">
26.  
    #if(${list.type} == "3")水费#end
27.  
    #if(${list.type} == "4")电费#end
28.  
    #if(${list.type} == "5")燃气费#end
29.  
    #if(${list.type} == "6")手机充值费#end
30.  
    #if(${list.type} == "7")固话宽带费#end
31.  
    </div>
32.  
    <div class="account-number">
33.  
    ${list.bill}
34.  
    </div>
35.  
    </div>
36.  
    <i class="account-menu"></i>
37.  
    </div>
38.  
    #end

2，关于SpringMVC返回vm模板的问题：

1.  
   $.ajax({
2.  
   type:'POST',
3.  
   url:ajaxUrl,
4.  
   data:ajaxData,
5.  
   error:function(){
6.  
   alert('ajax请求出现错误...');
7.  
   },
8.  
   success:function(data){
9.  
   $('#div_output_id').html(data + '');
10.  
    }
11.  
    });

Volecity模板教程

一，基本语法

1，#
"#"用来标识Velocity的脚本语句，包括#set、#if 、#else、#end、#foreach、#end、#iinclude、#parse、#macro等；
如:
#if($info.imgs)
<img src="$info.imgs" border=0>
#else
<img src="noPhoto.jpg">
#end

2、"$"用来标识一个对象(或理解为变量)；如
如：$i、$msg、$TagUtil.options(...)等。

3、"{}"用来明确标识Velocity变量；
比如在页面中，页面中有一个$someonename，此时，Velocity将把someonename作为变量名，若我们程序是想在someone这个变量的后面紧接着显示name字符，则上面的标签应该改成${someone}name。

4、"!"用来强制把不存在的变量显示为空白。
如当页面中包含$msg，如果msg对象有值，将显示msg的值，如果不存在msg对象同，则在页面中将显示$msg字符。这是我们不希望的，为了把不存在的变量或变量值为null的对象显示为空白，则只需要在变量名前加一个“!”号即可。
如：$!msg

二、在EasyJWeb中的最佳实践

　理论上你可以在EasyjWeb模板使用所有Velocity的脚本及功能，但我们不推荐你在界面模板中使用过多过复杂的脚本表达方式，在万不得已的情况下，不要在界面模板中加入任何复杂的逻辑，更不要在界面模板中加入变量声明、逻辑运算符等等。
　　在EasyJWeb中，我们提供了五条基本的模板脚本语句，基本上就能满足所有应用模板的要求。这四条模板语句很简单，可以直接由界面设计人员来添加。在当前很多EasyJWeb的应用实践中，我们看到，所有界面模板中归纳起来只有下面四种简单模板脚本语句即可实现：
1、$!obj 　直接返回对象结果。
如：在html标签中显示java对象msg的值。<p>$!msg</p>
在html标签中显示经过HtmlUtil对象处理过后的msg对象的值　　<p>$!HtmlUtil.doSomething($!msg)</p>

2、#if($!obj) #else #end 判断语句
如：在EasyJWeb各种开源应用中，我们经常看到的用于弹出提示信息msg的例子。
#if($msg)
<script>
alert('$!msg');
</script>
#end
上面的脚本表示当对象msg对象存在时，输出<script>等后面的内容。

3、#foreach( $info in $list) $info.someList #end　　循环读取集合list中的对象，并作相应的处理。
如：
#foreach( $info in $hotList1) 
<a href="/bbsdoc.ejf?easyJWebCommand=show&&cid=$!info.cid" target="_blank">$!info.title</a><br>
#end 
上面的脚本表示循环遍历hotList1集合中的对象，并输出对象的相关内容。注意，这里使用别名info +
字段名，中间不用加对象名，假如我们想遍历一个实体类，直接$info.businessId就可以了，而不用这样
写$info.businessCharge.businessId

4、#macro(macroName)#end 脚本函数(宏)调用，不推荐在界面模板中大量使用。
如：在使用EasyJWeb Tools快速生成的添删改查示例中，可以点击列表的标题栏进行升降排序显示，这是我们在EasyJWeb应用中经常看到的一个排序状态显示的模板内容。
函数(宏)定义，一般放在最前面
#macro(orderPic $type)
#if ($orderField.equals($type)) 
<img src="http://images.cnblogs.com/ico/${orderType}.gif"> 
#end
#end
具体的调用如：<font color="#FFFFFF">头衔#orderPic("title")</font>
经过测试，宏不支持方法重载

5、包含文件#inclue("模板文件名")或#parse("模板文件名")
主要用于处理具有相同内容的页面，比如每个网站的顶部或尾部内容。
使用方法，可以参考EasyJF开源Blog及EasyJF开源论坛中的应用！
如：#parse("/blog/top.html")或#include("/blog/top.html")
parse与include的区别在于，若包含的文件中有Velocity脚本标签，将会进一步解析，而include将原样显示。

三、关于#set的使用

不到万不得已的时候，不要在页面视图自己声明Velocity脚本变量，也就是尽量少使用#set。有时候我们需要在页面中显示序号，而程序对象中

又没有包含这个序号属性时，可以自己定义。如在一个循环体系中，如下所示：
#set ($i=0)
#foreach($info in $list)
序号:$i
#set($i=$i+1)
#end

四、Velocity脚本语法摘要

1、声明:#set ($var=XXX)
左边可以是以下的内容
Variable reference 
String literal 
Property reference 
Method reference 
Number literal #set ($i=1) 
ArrayList #set ($arr=["yt1","t2"])
算术运算符

2、注释:
单行## XXX
多行#* xxx
xxxx
xxxxxxxxxxxx*#

References 引用的类型

3、变量 Variables 
以 "$" 开头，第一个字符必须为字母。character followed by a VTL Identifier. (a .. z or A .. Z).
变量可以包含的字符有以下内容：
alphabetic (a .. z, A .. Z) 
numeric (0 .. 9) 
hyphen ("-") 
underscore ("_")

4、Properties 
$Identifier.Identifier
$user.name
hashtable user中的的name值.类似：user.get("name")

5、Methods 
object user.getName() = $user.getName()

6、Formal Reference Notation 
用{}把变量名跟字符串分开

如
#set ($user="csy"}
${user}name 
返回csyname

$username
$!username
$与$!的区别
当找不到username的时候，$username返回字符串"$username"，而$!username返回空字符串""

7、双引号 与 引号 
#set ($var="helo")
test"$var" 返回testhello
test'$var' 返回test'$var'
可以通过设置 stringliterals.interpolate=false改变默认处理方式

8、条件语句
#if( $foo ) 
<strong>Velocity!</strong>
#end
#if($foo)
#elseif()
#else
#end
当$foo为null或为Boolean对象的false值执行.

9、逻辑运算符:== && || !

10、循环语句#foreach($var in $arrays ) // 集合包含下面三种：Vector, a Hashtable or an Array
#end
#foreach( $product in $allProducts )
<li>$product</li>
#end

#foreach( $key in $allProducts.keySet() )
<li>Key: $key -> Value: $allProducts.get($key)</li>
#end

#foreach( $customer in $customerList )
<tr><td>$velocityCount</td><td>$customer.Name</td></tr>
#end

11、velocityCount变量在配置文件中定义
# Default name of the loop counter
# variable reference.
directive.foreach.counter.name = velocityCount
# Default starting value of the loop
# counter variable reference.
directive.foreach.counter.initial.value = 1

12、包含文件 
#include( "one.gif","two.txt","three.htm" )

13、Parse导入脚本
#parse("me.vm" )

14、#stop 停止执行并返回

15、定义宏Velocimacros ,相当于函数 支持包含功能
#macro( d )
<tr><td></td></tr>
#end
调用 
#d()

16、带参数的宏
#macro( tablerows $color $somelist )
#foreach( $something in $somelist )
<tr><td bgcolor=$color>$something</td></tr>
#end
#end

17、Range Operator 
#foreach( $foo in [1..5] )

附：《浅析MVC框架中View层的优雅设计及实例》

在基于B/S的应用程序开发中，从基本的技术分工上来说就是两大块，一是软件显示界面，另一个是程序逻辑。在N年前的脚本语言时代，无论是asp、
php还是jsp，我们基本是都是把这两者柔和在一起的。尽管我们想方设法做好很多函数或者包含文件来努力达到软件的复用，但仍然无法满足多变的用户需
求,这主要是因为以前的纯脚本编码方式无法很好支持及应用面向对象(OO)领域中的强大功能。

在常见的B/S软件项目中，界面的设计包括html界面、Wap界面及其它由文本字符协议为基本表示的界面等。以我们接触最多的html页面为例子，在做
这些界面的时候往往需要美工先使用photoshop或fireworks等图形界面设计工具进行全局设计，然后再使用进行Dreamweaver等
html页面制作工具进行加工制作。而强大的程序逻辑及后台处理都是由服务器端程序完成，这些程序具有较高的稳定性，其开发工具如
JBuilder、 Eclipse等对View层的界面无法很好的支持(当然那些用记事本写界面的应用除外)，这就使得很多MVC框架的设计都无法两全
齐美。

作为一个比较友好的MVC的框架，在简化服务器应用开发的同时，还需要在View这一层设计上不要过多的影响到界面人员的工作，最基本的要求就是不要过多的加入一些设计软件不支持的标签等元素(如Struts的很多标签在Dreamweaver中都不支持)。

　　当然，要使界面能跟后台程序逻辑融合，前台页面和后台逻辑之间需要会话协议的支持。Velocity是一个基于java的模板引擎
（template engine），它允许任何人仅仅简单的使用模板语言（template
language）来引用由java代码定义的对象。作为一个比较完善的模板引擎，

Velocity的功能是比较强大的，但强大的同时也增加了应用复杂性。

　　理论上你可以在EasyjWeb模板使用所有Velocity的脚本及功能，但我们不推荐你在界面模板中使用过多过复杂的脚本表达方式，在万不得已的情况下，不要在界面模板中加入任何复杂的逻辑，更不要在界面模板中加入变量声明、逻辑运算符等等。

总结：　
   
当然，在实际应用中，为了实现界面的友好、人性化，会出现很多易变的需求。如根据对象的不同状态，显示不同的提示颜色、提示语音等功能。在这时候，仍然要
慎用太多的模板脚本功能，大多数需求都可以通过变通的方式解决，有些信息可以直接在对象中增加逻辑转化信息，有些界面要求可以通过在界面中使用与特定界面
有关的表达方式来实现，如html页面中使用javascript、css，Wap页面中使用WMLScript等等。只有这样才能确保系统核心不受界面
的的影响，才能更好的扩展及维护。