Volecity模板引擎學習筆記 標籤: 模板引擎volecity 2016-03-20 17:29 1229人閱讀 評論(0) 收藏 舉報 分類: Java開發(36) web前端(13

Volecity模板引擎學習筆記<一> 

標籤: 模板引擎volecity
 1229人閱讀 評論(0) 收藏 舉報
 分類:
 


最近項目中用到了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 三層的邏輯結構發生混淆。

[html] view plain copy
  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模板的問題:

[html] view plain copy
  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等等。只有這樣才能確保系統核心不受界面的的影響,才能更好的擴展及維護。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章