一种简约可行的后台界面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/试用。

评论

62 楼 winie 2013-08-23  

路过打酱油  我一直都想找个这样的框架 科学一直都没有

61 楼 当当猫 2010-04-22  

很高兴看到你这篇文章，我有个疑问希望能解答就是zDialog在jsp中使用为什么会报
topWin.Dialog没有定义？

60 楼 crabboy 2009-09-02  

图片看不了

59 楼 不是流氓 2009-08-18  

wyuch 写道

不是流氓 写道

LZ能不能分享下前端都代码，要不发我封邮件也行，对界面不感冒是瞎话，
说白了，我做出来都页面，我自己看着也想吐！

主要是前后端是一体，没法完全区分，得跟JSP的标签配合着用。可以去下载一个ZCMS，然后我把JS的源代码给你，你配合着看看有没有参考价值

谢谢，我都Email:[e-mail]

58 楼 wyuch 2009-08-18  

不是流氓 写道

LZ能不能分享下前端都代码，要不发我封邮件也行，对界面不感冒是瞎话，
说白了，我做出来都页面，我自己看着也想吐！

主要是前后端是一体，没法完全区分，得跟JSP的标签配合着用。可以去下载一个ZCMS，然后我把JS的源代码给你，你配合着看看有没有参考价值

57 楼 不是流氓 2009-08-18  

whaosoft 写道

有积累的公司就是好 不像我们这是的 吗也没有 写死我啦

跑个题，大哥，你是不是liao？

56 楼 不是流氓 2009-08-18  

LZ能不能分享下前端都代码，要不发我封邮件也行，对界面不感冒是瞎话，
说白了，我做出来都页面，我自己看着也想吐！

55 楼 wyuch 2009-08-18  

Tab按键的问题已经修复，还有一个问题就是拖拽到最右边会出现滚动条的问题也修复了，不过得等本周发布的新版本了

54 楼 happysoul 2009-08-18  

tab按键 什么时候能修复啊！
弹出窗口后tab还能选择后面的东西啊~~~~~

53 楼 iaimstar 2009-07-13  

okwxj 写道

wyuch 写道

lw223 写道

标签里面千万不要加自定义样式。

严重同意，我们的标签都只提供数据展现方面的服务，样式由标签的BODY部分决定。

标签里连onclick都不应该出现

为啥?

52 楼 okwxj 2009-07-13  

wyuch 写道

lw223 写道

标签里面千万不要加自定义样式。

严重同意，我们的标签都只提供数据展现方面的服务，样式由标签的BODY部分决定。

标签里连onclick都不应该出现

51 楼 jaychaoqun 2009-07-08  

怎么下载源代码啊 ，，

50 楼 wyuch 2009-06-10  

丑鑫鑫 写道

浏览器回退按钮能够使用吗？

在IE下完全可以，在Firefox下暂时还不行，将在2.0里改进。

49 楼 丑鑫鑫 2009-06-10  

浏览器回退按钮能够使用吗？

48 楼 sznmail 2009-06-10  

这个界面很强大啊

47 楼 wyuch 2009-06-07  

kingkit 写道

兄弟，看完了你发的几篇帖子，感慨很多！
谢谢你发表了这么好的文章，同时也谢谢你提供程序的下载。我也是一创业者，大学准备毕业的时候就开始走上了创业的道路了。
看了你的帖子我首先佩服的是，楼子的无私奉献，推动了大家的技术交流！
我也下载了程序运行了，也稍微看了一下楼主写的代码，写的很赞！
希望楼主继续保持这份热忱。
加油，你们很快就会成功的了！

呵呵，在很多人看来我都是重复发明轮子。

46 楼 mikeandmore 2009-06-07  

后台最简单的就是Django的admin了。。。

45 楼 YiSingQ 2009-06-07  

很好的作品,功能设计强大,JS效果很好,对学习很有帮助！谢谢

44 楼 key232323 2009-06-07  

kingkit 写道

兄弟，看完了你发的几篇帖子，感慨很多！
谢谢你发表了这么好的文章，同时也谢谢你提供程序的下载。我也是一创业者，大学准备毕业的时候就开始走上了创业的道路了。
看了你的帖子我首先佩服的是，楼子的无私奉献，推动了大家的技术交流！
我也下载了程序运行了，也稍微看了一下楼主写的代码，写的很赞！
希望楼主继续保持这份热忱。
加油，你们很快就会成功的了！

支持创业者，我曾经算是，以后一定会是！

43 楼 kingkit 2009-06-06  

兄弟，看完了你发的几篇帖子，感慨很多！
谢谢你发表了这么好的文章，同时也谢谢你提供程序的下载。我也是一创业者，大学准备毕业的时候就开始走上了创业的道路了。
看了你的帖子我首先佩服的是，楼子的无私奉献，推动了大家的技术交流！
我也下载了程序运行了，也稍微看了一下楼主写的代码，写的很赞！
希望楼主继续保持这份热忱。
加油，你们很快就会成功的了！