一种简约可行的后台界面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中的自定义标签的封装方式,例如一个按钮,一般喜欢封装成
Html代码 复制代码
  1. <z:tbutton onClick="edit()" icon="../Icons/icon020a4.gif" text="修改"/>  
<z:tbutton onClick="edit()" icon="../Icons/icon020a4.gif" text="修改"/>

但实际使用中远不如以下封装便利
Html代码 复制代码
  1. <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类指定属性的方式来展现,远不如以下方式:
Html代码 复制代码
  1. <z:datagrid id="dg1" method="com.zving.platform.Schedule.dg1DataBind" size="15">  
  2.     <table width="100%" cellpadding="2" cellspacing="0" class="dataTable">  
  3.       <tr ztype="head" class="dataTableHead">  
  4.         <td  width="3%" align="center" ztype="RowNo">&nbsp;</td>  
  5.         <td width="3%" align="center" ztype="selector" field="id">&nbsp;</td>  
  6.         <td width="12%"><b>类别</b></td>  
  7.         <td width="20%"><b>任务名称</b></td>  
  8.         <td width="8%">是否启用</td>  
  9.         <td width="16%"><b>下次运行时间</b></td>  
  10.         <td width="32%"><b>任务描述</b></td>  
  11.       </tr>  
  12.       <tr onDblClick="edit();">  
  13.         <td align="center">&nbsp;</td>  
  14.         <td align="center">&nbsp;</td>  
  15.         <td>${TypeCodeName}</td>  
  16.         <td>${SourceIDName}</td>  
  17.         <td>${IsUsingName}</td>  
  18.         <td>${NextRunTime}</td>  
  19.         <td>${Description}</td>  
  20.       </tr>  
  21.       <tr ztype="pagebar">  
  22.         <td colspan="7">${PageBar}</td>  
  23.       </tr>  
  24.     </table>  
  25. </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中的表单:


实际运行后的表单:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值