2007-07-24

web开发中Velocity的应用

跟大学同学从去年开始一起搞的softecase项目差不多完成了。在页面模版选择方面，我们选择了velocity来做公共界面设计。大家知道，当Velocity应用于web开发时，界面设计者可以和程序开发者同步开发一个遵循MVC架构的web站点，这就是说，页面设计者可以只关注页面的显示效果，程序开发者关注业务逻辑编码。

下面是表格编辑及预览的模版：

CLASSIC_EDITOR_TABLE.vm 代码
  1. <HTML>  
  2. <HEAD>  
  3. <TITLE>$logixBox.getCaption()</TITLE>  
  4. <META HTTP-EQUIV="Content-Type"   CONTENT="text/html; CHARSET=GBK"></META>  
  5.   
  6. #foreach( $scriptFile in $logixBox.getBoxController().getScriptFilesOfLoadAtStart())   
  7.     <script src="$scriptFile.getFileName()"></script>  
  8. #end   
  9. #foreach( $linkFile in $logixBox.getBoxController().getLinkFiles())   
  10.     <link type="text/css" rel="StyleSheet" href="$linkFile" />  
  11. #end   
  12.   
  13.     <link type="text/css" rel="StyleSheet" href="softecase/style/classic/logixGrid.css" />  
  14. </HEAD>  
  15.   
  16.   
  17. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="bodyBorder">  
  18.   
  19.   
  20. <table id="bodyTable" border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">  
  21. <tr><td height="30">  
  22.   
  23. #set ($flag=$logixBox.getBoxParam().getRequestParam("STANDARD_IDENTITY"))   
  24.   
  25. #if (!$flag)   
  26.     #set ($flag="表格新建")   
  27. #else   
  28.     #set ($flag="表格编辑")   
  29. #end   
  30. <div class="mainCaption">$logixBox.getCaption()--$flag</div>  
  31.   
  32. </td></tr>  
  33. <tr><td height="22">  
  34.   
  35. <div id="tabController" onselectstart="event.returnValue = false;">  
  36.     <div id="tabCaption_1" style="display:inline" class="tabCaptionSelected">基本信息</div>  
  37. </div>  
  38.   
  39.   
  40. </td></tr>  
  41.   
  42.   
  43.   
  44. <tr><td width="100%" valign="top" >  
  45. <div id="divContent" style="OVERFLOW: auto; height: 100%; width: 100%" onresize="this.style.width = document.body.clientWidth;" class="clientBG">  
  46.   
  47.     <div id="tab_1" style="display:block" class="tabContent">  
  48.   
  49.     <div id = "controller" align="left" class="multiBar">  
  50.         <button id="_addRow" onclick="_addRow()" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>增加一行</button>  
  51.         <button id="_removeRow" onclick="_removeRow()" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>删除所选行</button>  
  52.         <button id="_post" onclick="_doPost()" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>保存</button>  
  53.         <button id="back" onclick="javascript:showChildNavWindow(window.parent)" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>返回</button>  
  54.     </div>  
  55.   
  56.   
  57.     #set($root=$logixBox.generateWebViewData())   
  58.   
  59.     <form name="form0" method="post" action="persist.exec" colsDef="$root.getType()">  
  60.   
  61.     #set ($headerSet=$root.getChildren().get(0))   
  62.     #set ($rowSet=$root.getChildren().get(2))   
  63.   
  64.     <div id="logixGrid" style="behavior:url(softecase/style/classic/logixGrid.htc);width:100%;height:100%;padding-left:2px;">  
  65.         <div type="FIXEDPART" class="FIXED_PART_STYLE">  
  66.             <div type="HEADERS" class="FIXED_HEADERS_STYLE">  
  67.                 #set ($tmpIndex = 0 )   
  68.                 #foreach ($header in $headerSet.getChildren())   
  69.                     #if ($tmpIndex < $root.getFixedColumnCount())   
  70.                         #set ($isRequired = $header.getData().get(4))   
  71.                         #set ($visibleValue=$header.getData().get(3))   
  72.   
  73.                         #set ($headerColor = "#FFFFFF")   
  74.                         #if ($isRequired=="1")   
  75.                             #set ($headerColor = "#FF0000")   
  76.                         #end   
  77.   
  78.                         #set ($visibleWidth = $header.getData().get(5))   
  79.   
  80.                         #set ($realValue = $header.getData().get(6))   
  81.                         #set ($dispValue = $header.getData().get(7))   
  82.   
  83.                         <div align="center" id="$header.getData().get(0)" style = "color:$headerColor;width:$visibleWidth ex;"  
  84.                             realValue = "$realValue" dispValue = "$dispValue" title="$header.getData().get(8)" class="FIXED_HEADER_STYLE"  
  85.                             isRequired = "$isRequired" propType="$header.getData().get(2)" visibleValue="$visibleValue">  
  86.                             $header.getData().get(1)   
  87.                         </div>  
  88.                     #end   
  89.                     #set ($tmpIndex = $tmpIndex + 1 )   
  90.                 #end   
  91.             </div>  
  92.   
  93.             <div type="ROWS" class="FIXED_ROWS_STYLE">  
  94.                 #foreach ($row in $rowSet.getChildren())   
  95.                     <div type="ROW" >  
  96.                         #set ($tmpIndex = 0 )   
  97.                         #foreach ($cell in $row.getChildren())   
  98.                             #if ($tmpIndex < $root.getFixedColumnCount())   
  99.                                 #set ($visibleValue=$cell.getData().get(1))   
  100.   
  101.                                 #set ($realValue = $cell.getData().get(2))   
  102.                                 #set ($dispValue = $cell.getData().get(3))   
  103.                                 <div id="$cell.getData().get(0)" realValue = "$realValue" visibleValue="$visibleValue" class="FIXED_CELL_STYLE">$dispValue</div>  
  104.                             #end   
  105.                             #set ($tmpIndex = $tmpIndex + 1 )   
  106.                         #end   
  107.                     </div>  
  108.                 #end   
  109.             </div>  
  110.         </div>  
  111.         <div type="DYNAMICPART" class="DYNAMIC_PART_STYLE">  
  112.             <div type="HEADERS" class="DYNAMIC_HEADERS_STYLE">  
  113.                 #set ($tmpIndex = 0 )   
  114.                 #foreach ($header in $headerSet.getChildren())   
  115.                     #if ($tmpIndex >= $root.getFixedColumnCount())   
  116.                         #set ($isRequired = $header.getData().get(4))   
  117.   
  118.                         #set ($visibleValue=$header.getData().get(3))   
  119.   
  120.                         #set ($headerColor = "#FFFFFF")   
  121.                         #if ($isRequired=="1")   
  122.                             #set ($headerColor = "#FF0000")   
  123.                         #end   
  124.   
  125.                         #set ($visibleWidth = $header.getData().get(5))   
  126.   
  127.                         #set ($realValue = $header.getData().get(6))   
  128.                         #set ($dispValue = $header.getData().get(7))   
  129.   
  130.                         <div align="center" id="$header.getData().get(0)" style = "color:$headerColor;width:$visibleWidth ex;"  
  131.                             realValue = "$realValue" dispValue = "$dispValue" title="$header.getData().get(8)" class="DYNAMIC_HEADER_STYLE"  
  132.                             isRequired = "$isRequired" propType="$header.getData().get(2)" visibleValue="$visibleValue">  
  133.                             $header.getData().get(1)   
  134.                         </div>  
  135.                     #end   
  136.                     #set ($tmpIndex = $tmpIndex + 1 )   
  137.                 #end   
  138.             </div>  
  139.             <div type="ROWS" class="DYNAMIC_ROWS_STYLE">  
  140.                 #foreach ($row in $rowSet.getChildren())   
  141.                     <div type="ROW" >  
  142.                         #set ($tmpIndex = 0 )   
  143.                         #foreach ($cell in $row.getChildren())   
  144.                             #if ($tmpIndex >= $root.getFixedColumnCount())   
  145.                                 #set ($visibleValue=$cell.getData().get(1))   
  146.                                 #set ($realValue = $cell.getData().get(2))   
  147.                                 #set ($dispValue = $cell.getData().get(3))   
  148.                                 <div id="$cell.getData().get(0)" realValue = "$realValue" visibleValue="$visibleValue" class="DYNAMIC_CELL_STYLE">$dispValue</div>  
  149.                             #end   
  150.                             #set ($tmpIndex = $tmpIndex + 1 )   
  151.                         #end   
  152.                     </div>  
  153.                 #end   
  154.             </div>  
  155.         </div>  
  156.     </div>  
  157.   
  158.   
  159.   
  160.             <input id="_data" type="hidden" name="LOGIXBOX_NAME" value="$logixBox.getBoxName()"/>  
  161.             #set ($identity=$logixBox.getBoxParam().getRequestParam("STANDARD_IDENTITY"))   
  162.             #if (!$identity)   
  163.                 #set ($identity="")   
  164.             #end   
  165.             <input id="_data" type="hidden" name="STANDARD_IDENTITY" value="$identity"/>  
  166.   
  167.             #set ($identity=$logixBox.getBoxParam().getRequestParam("PARENT_IDENTITY"))   
  168.             #if (!$identity)   
  169.                 #set ($identity="")   
  170.             #end   
  171.   
  172.             #set ($isRoot=$logixBox.getBoxParam().getRequestParam("IS_ROOT"))   
  173.             #if (!$isRoot)   
  174.                 #set ($isRoot="")   
  175.             #end   
  176.   
  177.             <input id="_data" type="hidden" name="PARENT_IDENTITY" value="$identity"/>  
  178.             <input id="_data" type="hidden" name="IS_ROOT" value="$isRoot"/>  
  179.             <input id="_data" type="hidden" name="LOGIX_STATUS" value="$logixBox.getBoxParam().getStatus().toString()"/>  
  180.             <input id="_data" type="hidden" name="LOGIX_SCENE" value="$logixBox.getBoxParam().getScene().toString()"/>  
  181.             <input id="_data" type="hidden" name="LOGIX_PARTTYPE" value="$logixBox.getBoxParam().getPartType().toString()"/>  
  182.             <input id="_data" type="hidden" name="LOGIX_LAYOUT" value="$logixBox.getBoxParam().getLayout().toString()"/>  
  183.             <input id="_data" type="hidden" name="LOGIX_SELECTMODE" value="$logixBox.getBoxParam().getSelectMode().toString()"/>  
  184.             <input id="_data" type="hidden" name="LOGIX_OPERATE" value="$logixBox.getBoxParam().getOperateType().toString()"/>  
  185.   
  186.             #set ($multiIndex=$logixBox.getBoxParam().getMultiIndex())   
  187.             #set ($selectCount=$logixBox.getBoxParam().getSelectCount())   
  188.   
  189.             <input id="_data" type="hidden" name="MULTI_INDEX" value="$multiIndex" />  
  190.             <input id="_data" type="hidden" name="SELECT_COUNT" value="$selectCount" />  
  191.     </form>  
  192.     </div>  
  193. </div>  
  194.   
  195.     <div id ="editContentSet" style="display:none;">  
  196.             #set ($editContentSet=$root.getChildren().get(1))   
  197.             #foreach ($editContent in $editContentSet.getData())   
  198.                 <div>$editContent</div>  
  199.             #end   
  200.     </div>  
  201. </td></tr>  
  202.   
  203. </table>  
  204.   
  205.   
  206. </body>  
  207.   
  208.   
  209.     <script >  
  210.         if (controller!=null&&form0.STANDARD_IDENTITY.value!=""){   
  211.             var tmp = controller.all.item("_addRow");   
  212.             if (tmp!=null){   
  213.                 tmp.style.display = "none";   
  214.             }   
  215.             tmp = controller.all.item("_removeRow");   
  216.             if (tmp!=null){   
  217.                 tmp.style.display = "none";   
  218.             }   
  219.         }   
  220.     </script>  
  221.     <script src="softecase/script/logixGrid.js"></script>  
  222. #foreach( $scriptFile in $logixBox.getBoxController().getScriptFilesOfLoadAtEnd())   
  223.     <script src="$scriptFile.getFileName()"></script>  
  224. #end   
  225. </HTML>  

 

CLASSIC_NAVIGATOR_TABLE.vm
  1. <HTML
评论
futurep_p 2008-06-05
老是看到有人评论velocity好，jsp好。我觉得这有什么意义呢，人家用的顺手了，都一样，该用什么自己体会了去用。
pan19849529 2007-08-04
我觉得关键在里面不能写javascript,只能写一些事件触发，在里面做一些逻辑的就不行了
姜太公 2007-08-03
用JSP+JSTL+OGNL，遇到困难就来一个<%%>
melet 2007-07-28

看了大家的留言。非常感谢大家提出个人在工作或是学习中的切身体会！下面是velocity的一个demo。我想通过这个demo能与大家来分享一下关于velocity的一些基本的常用的知识。

代码

  1. Microsoft Windows XP [版本 5.1.2600]   
  2. (C) 版权所有 1985-2001 Microsoft Corp.   
  3.   
  4. C:\Documents and Settings\Administrator>cd d:\hibernate\vmproject   
  5.   
  6. C:\Documents and Settings\Administrator>d:   
  7.   
  8. D:\Hibernate\VMProject>ant   
  9. Buildfile: build.xml   
  10.   
  11. copy-resources:   
  12.      [copy] Copying 1 file to D:\Hibernate\VMProject\build   
  13.   
  14. compile:   
  15.   
  16. BUILD SUCCESSFUL   
  17. Total time: 1 second   
  18. D:\Hibernate\VMProject>ant run   
  19. Buildfile: build.xml   
  20.   
  21. clean:   
  22.    [delete] Deleting directory D:\Hibernate\VMProject\build   
  23.     [mkdir] Created dir: D:\Hibernate\VMProject\build   
  24.   
  25. copy-resources:   
  26.      [copy] Copying 2 files to D:\Hibernate\VMProject\build   
  27.      [copy] Copied 1 empty directory to 1 empty directory under D:\Hibernate\VMP   
  28. roject\build   
  29.   
  30. compile:   
  31.     [javac] Compiling 2 source files to D:\Hibernate\VMProject\build   
  32.     [javac] 注意：某些输入文件使用了未经检查或不安全的操作。   
  33.     [javac] 注意：要了解详细信息，请使用 -Xlint:unchecked 重新编译。   
  34.   
  35. run:   
  36.      [java] <html>  
  37.      [java]     <head>  
  38.      [java]             <title>test velocity</title>  
  39.      [java]     </head>  
  40.      [java]     <body>  
  41.      [java]             hello Melet !   
  42.      [java]             yours CONSTANT: a final member   
  43.   
  44.      [java]             your firstName: yang   
  45.      [java]             your lastName:zhao   
  46.      [java]   
  47.      [java]             Status:false  true true   
  48.      [java]                             true   
  49.      [java]              health   
  50.      [java]   
  51.      [java]             <table>  
  52.      [java]   
  53.                                 <tr>  
  54.      [java]                             <td bgcolor="#CCCCCC">1</td>  
  55.   
  56.      [java]                     </tr>  
  57.      [java]   
  58.                                         <tr>  
  59.      [java]                             <td bgcolor="#FFFFFF">2</td>  
  60.   
  61.      [java]                     </tr>  
  62.      [java]   
  63.                                         <tr>  
  64.      [java]                             <td bgcolor="#CCCCCC">3</td>  
  65.   
  66.      [java]                     </tr>  
  67.      [java]   
  68.                                         <tr>  
  69.      [java]                             <td bgcolor="#FFFFFF">4</td>  
  70.   
  71.      [java]                     </tr>  
  72.      [java]   
  73.                                         <tr>  
  74.      [java]                             <td bgcolor="#CCCCCC">5</td>  
  75.   
  76.      [java]                     </tr>  
  77.      [java]   
  78.      [java]             2   
  79.      [java]             </table>  
  80.      [java]     </body>  
  81.      [java] </html>  
  82.   
  83. BUILD SUCCESSFUL   
  84. Total time: 2 seconds   
  85. D:\Hibernate\VMProject>  
julyboxer 2007-07-27
个人感觉Velocity 作为数据显示模板是挺不错的...语法简单易用..而且引用Java对象只需要前面对象名后面加点还有属性名..确实挺方便的..
galaxystar 2007-07-27
jsp太灵活, 导致不能从架构上约束程序员.
有些开发者习惯将业务逻辑扩散到页面上, 怎么办?

另, "( $linkFile" 为什么很多人喜欢在"("与"$linkFile"之间加个空格, 看到过很多这样的代码了, 按照checkstyle代码规则,这里是不能加空格的.
ddandyy 2007-07-26
我说的就是你写的这种 直接从request中拿出来就这么写 也不行
#set ($num = $num + 1)
直接这么写 后面算完就已经错了 不管放不放到前面都没意义的
无聊神灯 2007-07-26
$num是int,输出是1+1,并不是想要的2,所以想得到2,就必须#set ($num = $num + 1) 然后 $num
ddandyy 2007-07-26
如果前面有 #set($num = 1) 还好
如果是直接从request中拿出来就 ($num + 1) ......... 唉.......

还好这种东西我们业务中遇到的比较少
无聊神灯 2007-07-26
想输出 ($num + 1)的值必须借助中间变量,这个很郁闷.
还有对float类型好像不支持.
ddandyy 2007-07-26
如果前面是int当然不行 int有equals方法么 难道你就不会转一下么

#set($sss = "$person.getStatus()")
#if ($sss.equals())

没怎么多用过 从接触到现在也就只有两年而已

........ 看来上面都帮我说过了 我也不多说了 不知道你到底好好看过文档没有..... 唉....



@_@ 先看后面再看前面的习惯不好 看来得改改了.........

我前面说的对数字支持不好不是指单纯的符号应用

你是否试过 if ($num + 1 > 3)
sg552 2007-07-26
楼上的方法不错，试过了，效果很好。
无聊神灯 2007-07-26
sg552 写道
不是差了些，而是差很多。

对于数字， == 和equals 的实际效果是一样的。

JSP的灵活，在其中写JAVA代码是表现之一。你不能一棒子打死。如你不愿意写代码，写个tag出来也可以啊。或者用JSTL。

对于velocity，如果context中没有那个变量，就用不了。还不能判断null， 只能建立基本变量类型和Array, 1.4和以下的连Map, Set都建立不了。可能你认为这些都不是大问题，但是开发的时候就够让人头疼的了。



#if ($obj) ##true或者不为null
sg552 2007-07-26
补充一下，ddandyy，

1. 你确定上面回复的“用equals”,可以使用在int型上？

2. 你确定你用过Velocity? 算了，给你见识个东东吧。
ERROR 2007-07-26 11:43:54,656 CommonsLoggingLogSystem:logVelocityMessage - Right side ($user.ACCEPT_EMAIL) of '==' operation has null value. If a reference, it may not be in the context. Operation not possible. /WEB-INF/view/test/testVar.vm [line 4, column 13]

没有实践就没有发言权，velocity到底怎么样，只有亲身用过的才知道。
sg552 2007-07-26
不是差了些，而是差很多。

对于数字， == 和equals 的实际效果是一样的。

JSP的灵活，在其中写JAVA代码是表现之一。你不能一棒子打死。如你不愿意写代码，写个tag出来也可以啊。或者用JSTL。

对于velocity，如果context中没有那个变量，就用不了。还不能判断null， 只能建立基本变量类型和Array, 1.4和以下的连Map, Set都建立不了。可能你认为这些都不是大问题，但是开发的时候就够让人头疼的了。
ddandyy 2007-07-25
用equals

p.s: 你居然认为在jsp上写java是灵活的表现.......

无语ing..... 以前讨论过太多次了


p.s2: 找毛病你都找不到啊....... 对str和obj的使用velocity的表现还是相当不错的 如果说毛病 也就是对数字的处理差了些
sg552 2007-07-25
说几个错误答案：

错误答案1:
--------------------------------------------------------
#if($person.status==$person.STATUS_HEALTHY) 健康人
#else 病人
#end


错误答案2:
--------------------------------------------------------
#if($person.status==$some.pack.age.Person.STATUS_HEALTHY) 健康人
#else 病人
#end
sg552 2007-07-25
velocity 作为严格的MVC是很好用。但是功能稍微复杂些就不行了。比如，要根据一个用户的状态显示文字，如：

如果用户不舒服 ， 显示 病了。
否则 显示： 健康。

对应的类是：（写简单点）
some.pack.age.Person{

//用户的状态 ，1 健康的， 0 生病的。
private int status;

//状态常量， 健康的。
public static final STATUS_HEALTHY=1;

//状态常量， 生病的。
public static final STATUS_ILL=0;

//其他方法
}

然后，在前台某个vm页面显示这个人的状态。velocity context中已经存在了Person这个类的某个实例，可以通过$person调用。请问你怎么办？
----------------------------------------------------
也就是说，将如下JSP代码转换成VTL：
<%
if(person.getStatus()==person.STATUS_HEATHY){
out.print("健康人");
}else{
out.print("病人");
}
%>
melet 2007-07-25
velocity是很好用。但是在做为模版时，对于没有的变量，你可以根据指令符号中的set或是conditions来判断一下。正如 ddandyy 所说的那样。
sg552 2007-07-25
楼上的用一下velocity再来发言吧。

试着把一个 类的实例放到velocity上下文，然后在vm中引用这个类的常量，你看看行不行。
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

melet
  • 浏览: 16997 次
  • 性别: Icon_minigender_1
  • 来自: 海南-临高
  • 详细资料
搜索本博客
我的相册
B500b133-53ee-4b81-a574-718c2db1d014-thumb
10
共 29 张
最近加入圈子
存档
最新评论