论坛首页 Java企业应用论坛

web开发中Velocity的应用

浏览 16244 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-07-24  

跟大学同学从去年开始一起搞的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<spa>
   发表时间:2007-07-24  
长度有限制。只好重新跟帖。
CLASSIC_NAVIGATOR_TABLE.vm
0 请登录后投票
   发表时间:2007-07-25  
Velocity不太好用的。 远不如JSP灵活。

比如说,使用一个常量。在JSP中可以这样:
<%= SomeClass.CONSTANT %>
但是在Velocity中,使用 $someClass.CONSTANT却不行,它是NULL。 

很不优雅的解决办法,是在toolbox中建立一个常量类,把系统所有用到的常量都放进去。

0 请登录后投票
   发表时间:2007-07-25  
那是因为你没有设置someClass这个变量名吧
就好像你即使在JSP里那么写  上面不是也要引包的么
每个页面的包都要自己引  可能也算得上是灵活.......
不过所有页面都引一个包.........
0 请登录后投票
   发表时间:2007-07-25  
楼上的用一下velocity再来发言吧。

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

0 请登录后投票
   发表时间:2007-07-25  
velocity是很好用。但是在做为模版时,对于没有的变量,你可以根据指令符号中的set或是conditions来判断一下。正如 ddandyy  所说的那样。
0 请登录后投票
   发表时间: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("病人");
      }
%>

0 请登录后投票
   发表时间:2007-07-25  
说几个错误答案:

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


错误答案2:
--------------------------------------------------------
#if($person.status==$some.pack.age.Person.STATUS_HEALTHY)  健康人
#else  病人 
#end



0 请登录后投票
   发表时间:2007-07-25  
用equals

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

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


p.s2:  找毛病你都找不到啊....... 对str和obj的使用velocity的表现还是相当不错的   如果说毛病  也就是对数字的处理差了些
0 请登录后投票
   发表时间:2007-07-26  
不是差了些,而是差很多。

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

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

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

0 请登录后投票
论坛首页 Java企业应用版

跳转论坛:
Global site tag (gtag.js) - Google Analytics