Volecity模板引擎学习笔记一

最近项目中用到了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 三层的逻辑结构发生混淆。

Volecity中引用外部文件的问题：#set($ctx="/baseUrl")<script type="text/javascript" src="${ctx}/scripts/charge/test.js"></script>#foreach($list in ${result.plist}) <div class="line-info">#if(${list.type} == "3")<img src="${ctx}/images/water-icon.png" class="line-icon">#end#if(${list.type} == "4")<img src="${ctx}/images/power-icon.png" class="line-icon">#end#if(${list.type} == "5")<img src="${ctx}/images/gas-icon.png" class="line-icon">#end#if(${list.type} == "6")<img src="${ctx}/images/TV-icon.png" class="line-icon">#end#if(${list.type} == "7")<img src="${ctx}/images/phone-icon.png" class="line-icon">#end<div class="account-info-area"><div class="account-title">#if(${list.type} == "3")水费#end#if(${list.type} == "4")电费#end#if(${list.type} == "5")燃气费#end#if(${list.type} == "6")手机充值费#end#if(${list.type} == "7")固话宽带费#end</div><div class="account-number">${list.bill}</div></div><i class="account-menu"></i></div>
#end

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

$.ajax({type:'POST',url:ajaxUrl,data:ajaxData,error:function(){alert('ajax请求出现错误...');},success:function(data){$('#div_output_id').html(data + ''); }
});

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等等。只有这样才能确保系统核心不受界面的的影响，才能更好的扩展及维护。

Volecity模板引擎学习笔记一相关推荐

Jinjia2模板引擎学习笔记
Jinjia2 模板引擎形式最简单的Jinjia2模板引擎就是一个包含响应文本的文件. 1渲染模板默认情况下,flask在应用中的templates子目录里面寻找模板. flask提供的rende ...
velocity（vm）模板引擎学习介绍及语法
velocity模板引擎学习 velocity与freemaker.jstl并称为java web开发三大标签技术,而且velocity在codeplex上还有.net的移植版本NVelocity,( ...
【vn.py学习笔记（三）】vn.py事件引擎学习笔记
[vn.py学习笔记(三)]vn.py事件引擎学习笔记 1 时间驱动 2 事件驱动 3 事件引擎工作流程 4 事件引擎结构 4.1 事件队列 4.2 事件处理线程 4.3 事件处理函数字典/通用事件 ...
C++编程语言关于模板的学习笔记
C++编程语言关于模板的学习笔记 1.模板函数 1.1基本概念 1.2模板函数推演示例: 1.3区分完全泛化.部分特化以及完全特化 1.4注意点: 2.模板类 2.1模板类编译时的推演规则 2.2可以 ...
thymeleaf 获取yml中的值_Thymeleaf模板引擎学习
开发传统Java WEB项目时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用JSP页面进行页面渲染了.从而Thymeleaf提供了一个用于整合Spring MVC的可选模 ...
Freemarker模板---引擎学习
一.简要概述 Freemarker是一款模板引擎,是一种基于模版生成静态文件的通用工具,它是使用纯java编写的,一般用来生成HTML页面. 这段时间学习的主要是嵌套freemarker中的取值表达式 ...
Freemarker模板引擎学习，生成html里的动态表格，可合并单元格
需求:现有html模板,需动态填充数据,并且包含表格,表格大小不固定,根据数据多少确定表格大小. 解析:两种方案: 1.java代码实现:将模板文件读出为StringBuffer,找到特定位置,循环生 ...
vue2.x---mustache模板引擎学习记录
mustache模板引擎 1.什么是模板引擎数据变为视图的方法 1.纯Dom法(非常笨拙,没有实战价值) 2.数组join法(曾经非常流行) 3.es6模板字符串法(ES6中新增的`${a}`语法糖 ...
Nd2d引擎学习笔记
写在前面: 最近很长一段时间都在致力于移动互联网游戏的开发,安卓,IOS,也包括服务器,最近把服务器搞完以后,接到上级指示,需要服务器兼容手游和页游.所以我就着手准备制作一个页游客户端的DEMO. 一 ...

Volecity模板引擎学习笔记一

Volecity模板引擎学习笔记一相关推荐

最新文章

热门文章