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

评论

22 楼 Dreamer 2009-06-03  

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

21 楼 Dreamer 2009-06-03  

不喜欢Dreamweaver等HTML编辑器，喜欢直接文本编辑HTML代码
但对楼主说的后台UI（应该是CMS吧）比较感兴趣，可以共享下吗？

20 楼 Mayer 2009-06-03  

wyuch 写道

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

真的不限用途吗？

19 楼 binlaniua 2009-06-03  

很像 Velocity模板哦

只要一套美工做好的CSS
足以

18 楼 axhack 2009-06-03  

这个系统写的太NB了，界面我超喜欢，至于java版的cms一直想做没也没做成。
还是楼主厉害啊

17 楼 airport 2009-06-03  

你这个系统式免费的吗

16 楼 kaki 2009-06-03  

楼主的产品政府肯定不会用的，因为很多地方你就不懂。

TRS、航天四创都是这样做的。

15 楼 whaosoft 2009-06-03  

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

14 楼 yangxq 2009-06-03  

思路很不错呀，能把你们的UI tag lib开源出来么？

13 楼 wyuch 2009-06-03  

lw223 写道

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

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

12 楼 coffeesweet 2009-06-03  

和jeeCMS比较一下，上次下了他们的代码看了看，也运行过，后台表现没有你们的用户体验好，其他的再慢慢对比下.

11 楼 RoyMax 2009-06-03  

商业软件吧？
另外。。。竟然提供下载的是exe.....

10 楼 lw223 2009-06-03  

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

9 楼 wyuch 2009-06-03  

jvincent 写道

最近不同人发了好多关于泽元的消息....是不是一个人啊?

我们公司人比较多......

8 楼 wyuch 2009-06-03  

gafking 写道

看见Tag就感到头疼，你可以尝试一下这个思路。
界面除了必须要从Server端传来的多语言用Tag处理，其他不用。
将业务数据从UI设计中分离，进行UI设计时可以用预置的业务数据，使得UI实现的更充分，至于业务数据的加载，利用JS处理，可以写在独立的文件中用引用js文件或ajax的方式加载。

目前已经分离出来的，UI只决定怎么展现，展现几列，展现什么数据的问题，数据由后台提供。

以前采用过Ajax方式装载数据，但觉得使用Tag有一个好处，就是页面一加载就已经有数据了，不会有一个先是空白然后数据再填充进来的过程。当然这个并不是那么重要，主要是我们对Tag比较熟悉。

我们的方案肯定不会是最好的方案，我认为也没有最好的方案，只有最合适的方案。

7 楼 jvincent 2009-06-03  

最近不同人发了好多关于泽元的消息....是不是一个人啊?

6 楼 gafking 2009-06-03  

看见Tag就感到头疼，你可以尝试一下这个思路。
界面除了必须要从Server端传来的多语言用Tag处理，其他不用。
将业务数据从UI设计中分离，进行UI设计时可以用预置的业务数据，使得UI实现的更充分，至于业务数据的加载，利用JS处理，可以写在独立的文件中用引用js文件或ajax的方式加载。

5 楼 wangyi878750 2009-06-03  

不错啊
学习一下

4 楼 wyuch 2009-06-02  

turionboy 写道

后台管理界面看起来很不错呀，用JQUERY了吗

没用jQuery，JS框架是历史积累形成的，和Prototype类似。

3 楼 turionboy 2009-06-02  

后台管理界面看起来很不错呀，用JQUERY了吗