杂聊——基于HTML+CSS的UI开发与实现
做了两年UI开发了。和不同的人配合。使用不同的后台编码..NET,J2EE,PHP,ASP.
随着人们对WEB应用的要求提高。我们的软件和网站在前端的用户体验和人机交互方面在做不断的尝试和提高。
但是在实际的开发中。很多公司还是陷入了一个困境。注意。这里只是说部分公司。大部分公司吧.因为没有专人去负责UI开发和交互设计与开发。而是由美工与程序共同完成。
困境一: 美工设计-->后台编码实现.
美工负责设计。并且做成静态页面模型<有些美工会实现部分JS>.发给后台开发小组/人员.
后台开发人员负责VIEW层的最终实现。<并且会实现部分JS.>
问题:
后台开发人员接收到的静态页面模型不标准.嵌套程序有困难.或者嵌套程序后会出现页面布局混乱等问题。
大部分美工很多情况下都只是设计人员.并且大多情况下只会用效果图去做第一次审核和最后一次审核。而这样又会出现新的问题。动态的效果无法用一张图片很详细的说明。很多效果或许自己不知道该如何实现或者有些困难会舍去.虽然网上有很多开源的代码。JS,FLEX,FLASH. 但多数情况下这些UI都是以代码为主.以前端为主.对于大部分美工来说。读代码是件痛苦的事.或者根本读不懂.
对大部分程序来说。很多高级的UI应用都是基于JAVASCRIPT+XML|JSON|XSLT|TXT|HTML+CSS+DOM/FLEX/FLASH.这样的应用或许很容易上手。但也很容易由于2次开发造成很多BUG.还有一种情况。对于数据传输来说。后台与前端的数据交互。采用什么格式.什么标准?
至此.已经早成了前后台开发人员协调脱节的现象。
困境二:美工设计-->UI开发人员实现-->后台编码人员与UI开发人员一起整合
这样的开发团队似乎理想一点。每个人分工清楚。但协调脱节的现象仍然存在。
在开发阶段。顺利的话可以正常发布.上线.
但是这样子做.假设数据传输格式为:JSON|XML|XSLT. 发送请求为AJAX.或者伪AJAX(IFRAME).如果出现了BUG.调试将是件痛苦的事.尤其是中型以上的项目。大量采用了JS开发前端的项目。分析BUG只能是两组人一起上。效率很底.
为了更好的开发.更好的应用。我们身边或许很多公司已经有人开始使用JQUERY,PROTOTYPE,EXT,DOJO,YUI,GWT.并且也做出了很多很出色的CASE.我也参与了好几个项目的UI开发。说真的。对我来说最痛苦的莫过于与后台人员沟通如何实现数据交互了。要不就是程序不知道JSON.你给了他们模板数据也会出错。要不就是输出XML后在用JS解析.或者动态捆绑XSLT解析.开发效率底.要不还有一种情况就是程序告诉我这个必须采用服务器端控件:比如.NET.真疯了。
最近一直在想一种新的开发模式。方便自己也方便程序员.简单的先说下了。过段时间有机会在提交详细的说明.
基于HTML+CSS的UI开发与实现.
一：分析
1.WEB应用里最常见的。增、删、改、查
增加：FORM<控件、数据校验>，数据提交<post,get|ajax、伪ajax>。布局<div|table>。
删除：数据提交 <post,get|ajax、伪ajax>
修改：数据回填、FORM、数据提交、布局
查询：查询的表单、查询的结果、分页、对单条数据的一些附加操作：比如删除、修改的接口调用。基于超级连接的或者AJAX
2.特殊的UI效果
拖动、MENU、TABS、TREE、等等。。。。
3.其他应用调用接口。
二：设计思路
上边我们提到了常用的一些操作和功能。
按照这些功能。我们对UI可以进行分组定义。定义出一组基于HTML的模板。
比如一个有一个查询功能。我们可以这样划分
1。查询表单。<form页面。就一个单页面存放查询的FORM>
2。显示结果的GRID。<列表页面，用TABLE就行。>
3。分页控件。<分页控件页面>
4。单选或者复选。<包含在GRID里。用CLASS标记>
5。其他操作的接口。比如单条数据的查看详细信息。删除。修改等。<特殊操作的接口页面，或者是包含在grid里针对某一条信息的操作接口>
用一个页面对这些操作进行include和布局.可以用动态页面中的include.也可以用JS提供一组AJAX方式的include方法<ajax请求某一个页面返回HTML代码加载>。
三：特殊处理
用一组CSS来定义组件的显示方式。比如现在我们定义了3个UI。
CLASS：menu grid tab
用一组JS来读取UI的CLASS。并且添加事件和特殊操作等。比如AJAX事件。
menu.js grid.js tab.js
用一组JS来配置这个应用的操作接口。上边的JS会用到。
这里我们是在做查询应用。比如这样定义
SearchConfig.js
SearchConfig = {
delete : 'xx/xxx/xxx.jsp',
add : 'xx/xxx/xxx.jsp',
update : 'xx/xxx/xxx.jsp',
get : 'xx/xxx/xxx.jsp',
search : 'xx/xxx/xxx.jsp'
}
四：后台开发
在这里。我只需要按照后台人员的需求在我已经做好的UI中挑选静态页面发给后台开发人员。他们只需要关心输出HTML或者接受请求处理。返回一个标记。
五：总结
在这个过程中，后台开发人员不需要关心什么是JSON。怎么用XML，怎么用XSLT。美工也不用去关心怎么去实现JS。怎么去实现AJAX。美工只需要按照程序的要求在UI的库中按照要求组装。最多做一个布局。修改部分UI的风格就可以。
呵呵。还没说我到底要做什么。
做一组用HTML+CSS定义好的静态UI。用JS动态的读取这些UI，并且根据CONFIG文件自动配置UI。最大限度的减轻美工和后台开发人员对JS开发的痛苦。
由于表达能力有限，说的不好。尽请朋友口下留情。
有兴趣的朋友可以看下：http://www.hooyi-semi.com/semi/index.html
其中的grid和tabs,menu.都是按照这样的思想去做的。
随着人们对WEB应用的要求提高。我们的软件和网站在前端的用户体验和人机交互方面在做不断的尝试和提高。
但是在实际的开发中。很多公司还是陷入了一个困境。注意。这里只是说部分公司。大部分公司吧.因为没有专人去负责UI开发和交互设计与开发。而是由美工与程序共同完成。
困境一: 美工设计-->后台编码实现.
美工负责设计。并且做成静态页面模型<有些美工会实现部分JS>.发给后台开发小组/人员.
后台开发人员负责VIEW层的最终实现。<并且会实现部分JS.>
问题:
后台开发人员接收到的静态页面模型不标准.嵌套程序有困难.或者嵌套程序后会出现页面布局混乱等问题。
大部分美工很多情况下都只是设计人员.并且大多情况下只会用效果图去做第一次审核和最后一次审核。而这样又会出现新的问题。动态的效果无法用一张图片很详细的说明。很多效果或许自己不知道该如何实现或者有些困难会舍去.虽然网上有很多开源的代码。JS,FLEX,FLASH. 但多数情况下这些UI都是以代码为主.以前端为主.对于大部分美工来说。读代码是件痛苦的事.或者根本读不懂.
对大部分程序来说。很多高级的UI应用都是基于JAVASCRIPT+XML|JSON|XSLT|TXT|HTML+CSS+DOM/FLEX/FLASH.这样的应用或许很容易上手。但也很容易由于2次开发造成很多BUG.还有一种情况。对于数据传输来说。后台与前端的数据交互。采用什么格式.什么标准?
至此.已经早成了前后台开发人员协调脱节的现象。
困境二:美工设计-->UI开发人员实现-->后台编码人员与UI开发人员一起整合
这样的开发团队似乎理想一点。每个人分工清楚。但协调脱节的现象仍然存在。
在开发阶段。顺利的话可以正常发布.上线.
但是这样子做.假设数据传输格式为:JSON|XML|XSLT. 发送请求为AJAX.或者伪AJAX(IFRAME).如果出现了BUG.调试将是件痛苦的事.尤其是中型以上的项目。大量采用了JS开发前端的项目。分析BUG只能是两组人一起上。效率很底.
为了更好的开发.更好的应用。我们身边或许很多公司已经有人开始使用JQUERY,PROTOTYPE,EXT,DOJO,YUI,GWT.并且也做出了很多很出色的CASE.我也参与了好几个项目的UI开发。说真的。对我来说最痛苦的莫过于与后台人员沟通如何实现数据交互了。要不就是程序不知道JSON.你给了他们模板数据也会出错。要不就是输出XML后在用JS解析.或者动态捆绑XSLT解析.开发效率底.要不还有一种情况就是程序告诉我这个必须采用服务器端控件:比如.NET.真疯了。
最近一直在想一种新的开发模式。方便自己也方便程序员.简单的先说下了。过段时间有机会在提交详细的说明.
基于HTML+CSS的UI开发与实现.
一：分析
1.WEB应用里最常见的。增、删、改、查
增加：FORM<控件、数据校验>，数据提交<post,get|ajax、伪ajax>。布局<div|table>。
删除：数据提交 <post,get|ajax、伪ajax>
修改：数据回填、FORM、数据提交、布局
查询：查询的表单、查询的结果、分页、对单条数据的一些附加操作：比如删除、修改的接口调用。基于超级连接的或者AJAX
2.特殊的UI效果
拖动、MENU、TABS、TREE、等等。。。。
3.其他应用调用接口。
二：设计思路
上边我们提到了常用的一些操作和功能。
按照这些功能。我们对UI可以进行分组定义。定义出一组基于HTML的模板。
比如一个有一个查询功能。我们可以这样划分
1。查询表单。<form页面。就一个单页面存放查询的FORM>
2。显示结果的GRID。<列表页面，用TABLE就行。>
3。分页控件。<分页控件页面>
4。单选或者复选。<包含在GRID里。用CLASS标记>
5。其他操作的接口。比如单条数据的查看详细信息。删除。修改等。<特殊操作的接口页面，或者是包含在grid里针对某一条信息的操作接口>
用一个页面对这些操作进行include和布局.可以用动态页面中的include.也可以用JS提供一组AJAX方式的include方法<ajax请求某一个页面返回HTML代码加载>。
三：特殊处理
用一组CSS来定义组件的显示方式。比如现在我们定义了3个UI。
CLASS：menu grid tab
用一组JS来读取UI的CLASS。并且添加事件和特殊操作等。比如AJAX事件。
menu.js grid.js tab.js
用一组JS来配置这个应用的操作接口。上边的JS会用到。
这里我们是在做查询应用。比如这样定义
SearchConfig.js
SearchConfig = {
delete : 'xx/xxx/xxx.jsp',
add : 'xx/xxx/xxx.jsp',
update : 'xx/xxx/xxx.jsp',
get : 'xx/xxx/xxx.jsp',
search : 'xx/xxx/xxx.jsp'
}
四：后台开发
在这里。我只需要按照后台人员的需求在我已经做好的UI中挑选静态页面发给后台开发人员。他们只需要关心输出HTML或者接受请求处理。返回一个标记。
五：总结
在这个过程中，后台开发人员不需要关心什么是JSON。怎么用XML，怎么用XSLT。美工也不用去关心怎么去实现JS。怎么去实现AJAX。美工只需要按照程序的要求在UI的库中按照要求组装。最多做一个布局。修改部分UI的风格就可以。
呵呵。还没说我到底要做什么。
做一组用HTML+CSS定义好的静态UI。用JS动态的读取这些UI，并且根据CONFIG文件自动配置UI。最大限度的减轻美工和后台开发人员对JS开发的痛苦。
由于表达能力有限，说的不好。尽请朋友口下留情。
有兴趣的朋友可以看下：http://www.hooyi-semi.com/semi/index.html
其中的grid和tabs,menu.都是按照这样的思想去做的。