一種簡約可行的後臺界面UI開發方案+感想

閱讀後發現<z: 的標籤確實比較好用，可以解決模板不能再編輯是DW不可見的問題。

模板的描述方法 需要在通用和自定義結構中找到平衡。

原文如下：

一種簡約可行的後臺界面UI開發方案

我認爲對於後臺UI的開發方案或者說開發框架，應該要做到如下幾點要求

1、美工只負責整個後臺界面的風格設計，負責維護全局CSS、控件相關的圖片和CSS
2、具體到某個功能的界面只與程序員有關，並且程序員不需要去寫CSS，也能做出美觀且風格統一的界面。
3、應該能在Dreamweaver中直接編輯即相應控件在Dreamweaver可視化編輯中有體現，並且不會破壞整個頁面佈局。
4、UI框架最好不具有侵略性，不能讓我使用了這一UI框架之後喪失了直接使用HTML的權利，即我可以只在頁面的局部使用這一框架。
5、性能要足夠好，要基本上能夠和只使用純HTML的性能接近。
6、最好能夠兼容IE和Firefox，能兼容Opera、Safari和Chorme就更好了


這幾點應該說是很自然的要求，但已經否決了一大把的方案了。

其實如果公司自己已經有一些積累的話，實現如上幾點要求並不特別困難。有資深的美工和架構師，並且兩種人員都非常穩定、配合良好，美工精通CSS，但也需要熟悉JavaScript，架構師得非常精通JavaScript。在付出相當的努力後整理JS封裝控件，並進一步封裝成JSP Tag即可達到目的。如果需要實現一定程度的可視化的話，可以爲Dreamweaver開發擴展，即可高效率地實現UI的開發


其中的關鍵之處在於JSP中的自定義標籤的封裝方式，例如一個按鈕，一般喜歡封裝成

<z:tbutton onClick="edit()" icon="../Icons/icon020a4.gif" text="修改"/>

<z:tbutton onClick="edit()" icon="../Icons/icon020a4.gif" text="修改"/>

但實際使用中遠不如以下封裝便利

<z:tbutton onClick="edit()"> <img src="../Icons/icon020a4.gif" width="20" height="20" />修改</z:tbutton>

<z:tbutton onClick="edit()"> <img src="../Icons/icon020a4.gif" width="20" height="20" />修改</z:tbutton>

因爲這樣可以在Dreamweaver中直接改按鈕文字和圖標。

再比如一個數據表格，一般都喜歡構建一個複雜的JS類，通過爲JS類指定屬性的方式來展現，遠不如以下方式：

<z:datagrid id="dg1" method="com.zving.platform.Schedule.dg1DataBind" size="15">
    <table width="100%" cellpadding="2" cellspacing="0" class="dataTable">
      <tr ztype="head" class="dataTableHead">
        <td  width="3%" align="center" ztype="RowNo">&nbsp;</td>
        <td width="3%" align="center" ztype="selector" field="id">&nbsp;</td>
        <td width="12%"><b>類別</b></td>
        <td width="20%"><b>任務名稱</b></td>
        <td width="8%">是否啓用</td>
        <td width="16%"><b>下次運行時間</b></td>
        <td width="32%"><b>任務描述</b></td>
      </tr>
      <tr onDblClick="edit();">
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td>${TypeCodeName}</td>
        <td>${SourceIDName}</td>
        <td>${IsUsingName}</td>
        <td>${NextRunTime}</td>
        <td>${Description}</td>
      </tr>
      <tr ztype="pagebar">
        <td colspan="7">${PageBar}</td>
      </tr>
    </table>
</z:datagrid>

<z:datagrid id="dg1" method="com.zving.platform.Schedule.dg1DataBind" size="15">
	<table width="100%" cellpadding="2" cellspacing="0" class="dataTable">
	  <tr ztype="head" class="dataTableHead">
		<td  width="3%" align="center" ztype="RowNo">&nbsp;</td>
		<td width="3%" align="center" ztype="selector" field="id">&nbsp;</td>
		<td width="12%"><b>類別</b></td>
		<td width="20%"><b>任務名稱</b></td>
		<td width="8%">是否啓用</td>
		<td width="16%"><b>下次運行時間</b></td>
		<td width="32%"><b>任務描述</b></td>
	  </tr>
	  <tr onDblClick="edit();">
		<td align="center">&nbsp;</td>
		<td align="center">&nbsp;</td>
		<td>${TypeCodeName}</td>
		<td>${SourceIDName}</td>
		<td>${IsUsingName}</td>
		<td>${NextRunTime}</td>
		<td>${Description}</td>
	  </tr>
	  <tr ztype="pagebar">
		<td colspan="7">${PageBar}</td>
	  </tr>
	</table>
</z:datagrid>

可以很方便地看出，這樣的DataGrid控件可以可視化地爲表格增加列，修改列名、列寬度等等操作，可維護性大大增加。這種Tag的特徵是Tag包含有Body，Tag執行時解析Body中的HTML，達到定義文字、樣式、數據的目的。因爲Body中含有HTML，所以整個標籤在Dreamweaver是可見的。

在Dreamweaver中的DataGrid：


實際運行後的DataGrid:


在Dreamweaver中的表單:


實際運行後的表單: