跟大学同学从去年开始一起搞的softecase项目差不多完成了。在页面模版选择方面,我们选择了velocity来做公共界面设计。大家知道,当Velocity应用于web开发时,界面设计者可以和程序开发者同步开发一个遵循MVC架构的web站点,这就是说,页面设计者可以只关注页面的显示效果,程序开发者关注业务逻辑编码。
下面是表格编辑及预览的模版:
CLASSIC_EDITOR_TABLE.vm 代码
- <HTML>
- <HEAD>
- <TITLE>$logixBox.getCaption()</TITLE>
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=GBK"></META>
- #foreach( $scriptFile in $logixBox.getBoxController().getScriptFilesOfLoadAtStart())
- <script src="$scriptFile.getFileName()"></script>
- #end
- #foreach( $linkFile in $logixBox.getBoxController().getLinkFiles())
- <link type="text/css" rel="StyleSheet" href="$linkFile" />
- #end
- <link type="text/css" rel="StyleSheet" href="softecase/style/classic/logixGrid.css" />
- </HEAD>
- <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="bodyBorder">
- <table id="bodyTable" border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
- <tr><td height="30">
- #set ($flag=$logixBox.getBoxParam().getRequestParam("STANDARD_IDENTITY"))
- #if (!$flag)
- #set ($flag="表格新建")
- #else
- #set ($flag="表格编辑")
- #end
- <div class="mainCaption">$logixBox.getCaption()--$flag</div>
- </td></tr>
- <tr><td height="22">
- <div id="tabController" onselectstart="event.returnValue = false;">
- <div id="tabCaption_1" style="display:inline" class="tabCaptionSelected">基本信息</div>
- </div>
- </td></tr>
- <tr><td width="100%" valign="top" >
- <div id="divContent" style="OVERFLOW: auto; height: 100%; width: 100%" onresize="this.style.width = document.body.clientWidth;" class="clientBG">
- <div id="tab_1" style="display:block" class="tabContent">
- <div id = "controller" align="left" class="multiBar">
- <button id="_addRow" onclick="_addRow()" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>增加一行</button>
- <button id="_removeRow" onclick="_removeRow()" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>删除所选行</button>
- <button id="_post" onclick="_doPost()" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>保存</button>
- <button id="back" onclick="javascript:showChildNavWindow(window.parent)" class="buttonStyle" onmouseover='commonMouseOver()' onmouseout='commonMouseOut()'>返回</button>
- </div>
- #set($root=$logixBox.generateWebViewData())
- <form name="form0" method="post" action="persist.exec" colsDef="$root.getType()">
- #set ($headerSet=$root.getChildren().get(0))
- #set ($rowSet=$root.getChildren().get(2))
- <div id="logixGrid" style="behavior:url(softecase/style/classic/logixGrid.htc);width:100%;height:100%;padding-left:2px;">
- <div type="FIXEDPART" class="FIXED_PART_STYLE">
- <div type="HEADERS" class="FIXED_HEADERS_STYLE">
- #set ($tmpIndex = 0 )
- #foreach ($header in $headerSet.getChildren())
- #if ($tmpIndex < $root.getFixedColumnCount())
- #set ($isRequired = $header.getData().get(4))
- #set ($visibleValue=$header.getData().get(3))
- #set ($headerColor = "#FFFFFF")
- #if ($isRequired=="1")
- #set ($headerColor = "#FF0000")
- #end
- #set ($visibleWidth = $header.getData().get(5))
- #set ($realValue = $header.getData().get(6))
- #set ($dispValue = $header.getData().get(7))
- <div align="center" id="$header.getData().get(0)" style = "color:$headerColor;width:$visibleWidth ex;"
- realValue = "$realValue" dispValue = "$dispValue" title="$header.getData().get(8)" class="FIXED_HEADER_STYLE"
- isRequired = "$isRequired" propType="$header.getData().get(2)" visibleValue="$visibleValue">
- $header.getData().get(1)
- </div>
- #end
- #set ($tmpIndex = $tmpIndex + 1 )
- #end
- </div>
- <div type="ROWS" class="FIXED_ROWS_STYLE">
- #foreach ($row in $rowSet.getChildren())
- <div type="ROW" >
- #set ($tmpIndex = 0 )
- #foreach ($cell in $row.getChildren())
- #if ($tmpIndex < $root.getFixedColumnCount())
- #set ($visibleValue=$cell.getData().get(1))
- #set ($realValue = $cell.getData().get(2))
- #set ($dispValue = $cell.getData().get(3))
- <div id="$cell.getData().get(0)" realValue = "$realValue" visibleValue="$visibleValue" class="FIXED_CELL_STYLE">$dispValue</div>
- #end
- #set ($tmpIndex = $tmpIndex + 1 )
- #end
- </div>
- #end
- </div>
- </div>
- <div type="DYNAMICPART" class="DYNAMIC_PART_STYLE">
- <div type="HEADERS" class="DYNAMIC_HEADERS_STYLE">
- #set ($tmpIndex = 0 )
- #foreach ($header in $headerSet.getChildren())
- #if ($tmpIndex >= $root.getFixedColumnCount())
- #set ($isRequired = $header.getData().get(4))
- #set ($visibleValue=$header.getData().get(3))
- #set ($headerColor = "#FFFFFF")
- #if ($isRequired=="1")
- #set ($headerColor = "#FF0000")
- #end
- #set ($visibleWidth = $header.getData().get(5))
- #set ($realValue = $header.getData().get(6))
- #set ($dispValue = $header.getData().get(7))
- <div align="center" id="$header.getData().get(0)" style = "color:$headerColor;width:$visibleWidth ex;"
- realValue = "$realValue" dispValue = "$dispValue" title="$header.getData().get(8)" class="DYNAMIC_HEADER_STYLE"
- isRequired = "$isRequired" propType="$header.getData().get(2)" visibleValue="$visibleValue">
- $header.getData().get(1)
- </div>
- #end
- #set ($tmpIndex = $tmpIndex + 1 )
- #end
- </div>
- <div type="ROWS" class="DYNAMIC_ROWS_STYLE">
- #foreach ($row in $rowSet.getChildren())
- <div type="ROW" >
- #set ($tmpIndex = 0 )
- #foreach ($cell in $row.getChildren())
- #if ($tmpIndex >= $root.getFixedColumnCount())
- #set ($visibleValue=$cell.getData().get(1))
- #set ($realValue = $cell.getData().get(2))
- #set ($dispValue = $cell.getData().get(3))
- <div id="$cell.getData().get(0)" realValue = "$realValue" visibleValue="$visibleValue" class="DYNAMIC_CELL_STYLE">$dispValue</div>
- #end
- #set ($tmpIndex = $tmpIndex + 1 )
- #end
- </div>
- #end
- </div>
- </div>
- </div>
- <input id="_data" type="hidden" name="LOGIXBOX_NAME" value="$logixBox.getBoxName()"/>
- #set ($identity=$logixBox.getBoxParam().getRequestParam("STANDARD_IDENTITY"))
- #if (!$identity)
- #set ($identity="")
- #end
- <input id="_data" type="hidden" name="STANDARD_IDENTITY" value="$identity"/>
- #set ($identity=$logixBox.getBoxParam().getRequestParam("PARENT_IDENTITY"))
- #if (!$identity)
- #set ($identity="")
- #end
- #set ($isRoot=$logixBox.getBoxParam().getRequestParam("IS_ROOT"))
- #if (!$isRoot)
- #set ($isRoot="")
- #end
- <input id="_data" type="hidden" name="PARENT_IDENTITY" value="$identity"/>
- <input id="_data" type="hidden" name="IS_ROOT" value="$isRoot"/>
- <input id="_data" type="hidden" name="LOGIX_STATUS" value="$logixBox.getBoxParam().getStatus().toString()"/>
- <input id="_data" type="hidden" name="LOGIX_SCENE" value="$logixBox.getBoxParam().getScene().toString()"/>
- <input id="_data" type="hidden" name="LOGIX_PARTTYPE" value="$logixBox.getBoxParam().getPartType().toString()"/>
- <input id="_data" type="hidden" name="LOGIX_LAYOUT" value="$logixBox.getBoxParam().getLayout().toString()"/>
- <input id="_data" type="hidden" name="LOGIX_SELECTMODE" value="$logixBox.getBoxParam().getSelectMode().toString()"/>
- <input id="_data" type="hidden" name="LOGIX_OPERATE" value="$logixBox.getBoxParam().getOperateType().toString()"/>
- #set ($multiIndex=$logixBox.getBoxParam().getMultiIndex())
- #set ($selectCount=$logixBox.getBoxParam().getSelectCount())
- <input id="_data" type="hidden" name="MULTI_INDEX" value="$multiIndex" />
- <input id="_data" type="hidden" name="SELECT_COUNT" value="$selectCount" />
- </form>
- </div>
- </div>
- <div id ="editContentSet" style="display:none;">
- #set ($editContentSet=$root.getChildren().get(1))
- #foreach ($editContent in $editContentSet.getData())
- <div>$editContent</div>
- #end
- </div>
- </td></tr>
- </table>
- </body>
- <script >
- if (controller!=null&&form0.STANDARD_IDENTITY.value!=""){
- var tmp = controller.all.item("_addRow");
- if (tmp!=null){
- tmp.style.display = "none";
- }
- tmp = controller.all.item("_removeRow");
- if (tmp!=null){
- tmp.style.display = "none";
- }
- }
- </script>
- <script src="softecase/script/logixGrid.js"></script>
- #foreach( $scriptFile in $logixBox.getBoxController().getScriptFilesOfLoadAtEnd())
- <script src="$scriptFile.getFileName()"></script>
- #end
- </HTML>
CLASSIC_NAVIGATOR_TABLE.vm
- <HTML<spa>