一种简约可行的后台界面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()"> <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>

可以很方便地看出，这样的DataGrid控件可以可视化地为表格增加列，修改列名、列宽度等等操作，可维护性大大增加。这种Tag的特征是Tag包含有Body，Tag执行时解析Body中的HTML，达到定义文字、样式、数据的目的。因为Body中含有HTML，所以整个标签在Dreamweaver是可见的。

在Dreamweaver中的DataGrid：


实际运行后的DataGrid:


在Dreamweaver中的表单:


实际运行后的表单:


----------ZvingSoft--------
ZCMS(泽元内容管理系统)，泽元软件出品，免费下载，不限用途。
欢迎大家通过http://demo.zving.com/试用。

评论

42 楼 wyuch 2009-06-06  

fabian0123 写道

在Google的浏览器下面显示有问题，希望楼主有所改进

是的，现在只在Firefox下做过严格测试。没想到用Chorme的还真不少

41 楼 fabian0123 2009-06-06  

在Google的浏览器下面显示有问题，希望楼主有所改进

40 楼 wyuch 2009-06-05  

iaimstar 写道

用的时候，打开网页 好像是分块加载的（九宫格？）
莫非就是以前说的grid网页？

不是九宫格，分块加载其实是体现了HTML加载的顺序。

本身这套UI框架不提供与SWING等GUI中布局相关的概念，只提供一种机制和一些组件。这样有个好处，就是零侵入性，可以在使用这种UI方案的同时使用Struts等其他方案。

39 楼 iaimstar 2009-06-05  

用的时候，打开网页 好像是分块加载的（九宫格？）
莫非就是以前说的grid网页？

38 楼 wyuch 2009-06-05  

iaimstar 写道

ui速度很快

是专门优化过还是网络好呢

专门优化过，主要是这种机制本身就很快，因为HTML一载入页面就能够完全渲染，不需要页面加载完后再执行JS来展现数据。

37 楼 iaimstar 2009-06-05  

ui速度很快

是专门优化过还是网络好呢

36 楼 wyuch 2009-06-05  

chrome 1.0上简单做过测试，2.0还没测.....

35 楼 iaimstar 2009-06-05  

这个得改改

34 楼 albert_qhd 2009-06-05  

提的标签设计的建议确实很好，给了我一些思路

33 楼 leon1509 2009-06-05  

明显是广告！

32 楼 xyaoyuan 2009-06-04  

看着挺好，不知道用起来如何

31 楼 luolonghao 2009-06-04  

用yui也是一种方法。。

30 楼 RoyMax 2009-06-04  

文件编码能不能改成UTF-8

29 楼 RoyMax 2009-06-04  

wyuch 写道

RoyMax 写道

我的疑问是为什么不提供war包下载而提供一个exe？

马上会提供的，这还是Beta呀，exe便于安装测试。

期待war版。。。

28 楼 smilerain 2009-06-04  

ui部分,做得不错

27 楼 wyuch 2009-06-04  

RoyMax 写道

不知道支持SSI不。。。如果是velocity做模板的话，估计就不支持了

不用Velocity，完全自己开发的，支持SSI。

我希望UI方案基本上要做到零入侵，虽然后台界面用自己的UI框架完全够了，但实际上完全可以在里面再用Struts或者其他技术，不冲突。

但UI框架是JS库和控件的有机联合体，JS库中目前使用了$，和其他JS框架冲突，不过如果使用jQuery的话可以让jQuery让度$的使用权。

26 楼 wyuch 2009-06-04  

RoyMax 写道

我的疑问是为什么不提供war包下载而提供一个exe？

马上会提供的，这还是Beta呀，exe便于安装测试。

25 楼 RoyMax 2009-06-04  

不知道支持SSI不。。。如果是velocity做模板的话，估计就不支持了

24 楼 RoyMax 2009-06-04  

我的疑问是为什么不提供war包下载而提供一个exe？

23 楼 wyuch 2009-06-03  

Dreamer 写道

才看出来，貌似是高级广告贴。。源代码是不可能的了。。。

有源代码开放计划，大约会在10月以前将另一个单点登陆的产品ZAS的源代码一起开放。
其实JSP页面和后台的class都是无混淆的，可以直接查看。

这个帖子是看了http://www.iteye.com/topic/399989有感而发的。