界面对象化

概述
界面对象化是指以对象的思想去描述页面元素以完成UI的集成和开发,以使UI原型能够映射或转化为可运行的系统原型,提升系统开发的效率,避免大量的花费时间在UI的集成、维护上。
产生的原因
在传统的开发过程中,特别是Web开发过程中,从UI原型转化为系统原型的过程总是要耗费特别长的时间,在系统的整个开发过程中通常在UI集成和维护上往往是耗费最长的时间,而很多时候更是由于UI集成了动态性质而导致了UI修改、代码调试的困难。
为什么会出现这样的现象呢?这样的现象产生的原因无非是UI原型和系统原型之间存在的差异造成的,UI原型是一种静态原型,系统原型是一种动态原型,在UI原型这种静态的原型中只描述了系统的静态结构、显示和行为(html、css、js),而对于系统原型来说它需要的是一种动态结构,这个时候要做的无疑就是怎么样让UI原型中的静态结构、显示和行为变为动态的,造成这个的原因主要是因为html的结构元素是无法表达出其动态性质的,当然,这不能去怪Html,它本来就只负责静态的。
但对于开发人员来说,这个时候其实要做的是就是让页面的元素能够动态化,界面对象化就是解决它的一种不错的办法,对象化使得界面中的所有元素都可以作为对象来看,从OO角度去看,可以得出界面中的任何元素在动态方面拥有两个特性,就是动态的结构和动态的行为,动态的结构是指这个元素将会改变或增加原有Html界面的结构,如一个用户列表的表格,这就是一个典型的动态结构,表格中的结构会随着用户列表信息的不同而不断的增加tr/td这样的结构元素;动态的行为是指界面元素的一种动态交互行为,简单的比如在下拉选择用户所在部门的时候就是一种下拉的动态交互行为(这个也可以视为静态的),另外一个更典型的例子是表单提交后与后台交互的此种交互行为。
实现的方法
如今Web开发框架都在重视这方面,都在想办法让html静态过程转化为动态过程变得更为简单的方法,应该说象jsf、tapestry这些的东西都在这方面做出了努力,jsf来说视图更为强调开发视角,但在UI集成方面仍然是非常麻烦;tapestry来说则表现的更为好一些,它更为注重避免对于html静态结构的侵入。
为了让html静态结构能表现出动态结构的展现和交互的特性,这个时候设计模式中的decorator模式就显得很适合了,要做的无非就是把一种静态的结构重新装修一把,想想decorator模式,它不会对原有的对象产生什么影响,而同时又可表达出更为丰富的行为。
既然是decorator,那么实现界面对象化的方法也就浮现出来了,在采用界面对象化的思想上,界面所有元素都可以视为对象,只是这些对象又有可能是由其他的对象组合而成,如table是一个对象,其中的tr、td也是对象,这个在js中深有体现。
界面的结构、显示以及行为分离的方式无疑是非常值得学习的,在描述一个界面对象的动态特性的时候这点也是同样需要保持的,界面对象的动态特性主要就是动态结构和动态行为,对于动态结构可以采用类加模板的方式来实现,而对于动态行为在现在我们则可以采用js来完全达成(前台交互js本来就可做到,后台交互则可通过ajax的方式来实现)。
说的可能不是很清楚,举例如下:
如一个用户的列表的html可能是这样:
<table id="userstable">
</table>
在真实的系统中这个部分必然是动态的展现,需要改变原有的结构,这个时候采用界面对象化的方法我们可以这么去做:
在一个独立的xml文件中进行这样的描述:
<element id="userstable"
               bindhql="from User u where u.id desc"
               showstyle="userstablestyle"/>
<component id="userstablestyle"
                    ref-component="table"
                    showcolumns="user.id=序号;user.name=用户名"/>
这是动态结构的实现方法的一个示例,可以看到在这样的情况下对原有的html是没有任何的侵入的。
再举一个动态行为的例子:
如一个新增用户表单中有一个保存的按钮,需要提交到后台执行动作,并根据动作执行的结果来控制页面的流转,html中可能是这样:
<button id="saveBtn" name="saveBtn" value="保存">
同样的,在一个独立的xml中进行这样的描述:
<element id="saveBtn"
               actionType="pageflow"
               action="saveUser"/>
<action id="saveUser"
            ref-action="DataSave">
      <result name="success">userstable</result>
      <result name="error">saveusererror</result>
</action>
这样就完成了将html中静态元素decorator成一种具备动态特性的元素的过程。
界面对象化后界面组件化自然也就可以形成了,也就是如今流行的UI Component,在这样的一种实现方法下我们甚至可以想象在UI进行大变动的情况下根据无需开发人员做任何改动系统就仍然可以运转,这必然会大大的减少UI集成和维护的工作量;但UI Component在目前也是会带来一些问题的,就是在如今很容易将UI设计图转为html的情况下,反而因为使用了UI Component造成了很难达到UI设计的效果,就像是CS结构一样,CS结构中的元素为了做到和UI设计一样的效果无疑是要付出很大的努力的,不过在web上的UI Component还是比CS占有更多的优势,因为它可以通过css来控制显示,仍然看好Web的开发方式,虽然Web的交互方式现在离cs的交互方式还有一定的差距,但就显示效果来讲Web是更容易做的比cs结构好的。

posted on 2006-01-26 11:59 BlueDavy 阅读(2065) 评论(9)  编辑  收藏 所属分类: 系统设计

评论

# re: 界面对象化 2006-02-06 14:31 Vincent Thinking

在家还不忘工作。呵呵。

你说这些正是我们产品中正在做的部分,UI部分都是用xml描述,widget绑定action  回复  更多评论   

# re: 界面对象化 2006-02-06 20:10 BlueDavy

晕,这篇是26号写的..
哦?已经实现了吗?  回复  更多评论   

# re: 界面对象化 2006-02-07 09:30 Vincent Thinking

基本上实现了,不过还不完善。^_^UI 基本上都是配置的。
一个table的描述类似这样:
<display>
<headings>
<heading seq="1" content="id" width="20" display="false"/>
<heading seq="2" content="订单编号" width="20" link="form://pchsOrder/edit?identity=:1"/>
<heading seq="3" content="订单日期" width="20"/>
<heading seq="4" content="供应商" width="40" link="form://pchsOrder?identity=:1"/>
<heading seq="5" content="单据状态" width="10"/>
</headings>
<columns>
<column seq="1" format="String" dataindex="1"/>
<column seq="2" format="String" dataindex="2"/>
<column seq="3" format="Date" dataindex="3"/>
<column seq="4" format="String" dataindex="4"/>
<column seq="5" format="String" dataindex="5"/>
</columns>
<actions>
<action name="edit" form="pchsOrder" text="Edit">
<parameter name="identity" index="1"/>
</action>
<action name="delete" form="pchsOrder" service="removePchsOrder" text="Delete">
<parameter name="identity" index="1"/>
</action>
</actions>
</display>  回复  更多评论   

# re: 界面对象化 2006-02-07 09:39 BlueDavy

恩,不错,不过我觉得还是没有做到我期望中的..
我觉得其实界面本来就是对象化,我们之所以要改变它只是因为它无法满足动态的实现,典型的decorator,也就是说我们只需要对界面元素进行一个再次描述就完成,可以在描述中很容易看出对界面元素的一个修饰,也就是在描述中可以清晰的看到module---object这样的模式..
^_^,以上纯属OO理论描述而已,其实只要能实现就行,不一定要这么做

其实界面对象化只是部分完成快速开发的目的,最重要的仍然是是界面与后台进行交互时的自动处理(如数据的自动绑定、数据的自动维护等),在这块无需编码是很重要的,提供一种类似脚本来控制业务逻辑和持久逻辑的方式。  回复  更多评论   

# re: 界面对象化 2006-02-14 13:04 fxb248

请问你这里的html代码和xml描述是怎么结合起来的,能不能提供一个小例子?否则看的不是很明白.  回复  更多评论   

# re: 界面对象化 2006-02-14 22:15 BlueDavy

比如用户管理的界面的htm界面url为usermanage.htm,其中有用户管理表格(table id="usertable")和新增用户的按钮(button id="addnewuser"),那么描述的xml就类似这样:
<page id="usermanage" url="usermanage.htm">
<element id="usertable">
<bind type="datasetcomponent">
<value>UserTableComponent</value>
</bind>
</element>
<element id="addnewuser">
<bind type="linkaction">
<value>AddDataset</value>
</bind>
</element>
</page>
其中的UserTableComponent是由用户自定义的一个用户表格的组件,是通过框架的管理端来配置,其实主要就是配置这个组件绑定的数据集、组件的显示方式以及组件的操作方式(如支持新增、分页)等;linkaction则是指该按钮对应的动作...
之后就可以通过page?id=usermanage来访问,这样就完成了将一个静态的htm渲染成为动态页面的过程,对htm没有任何的侵入。  回复  更多评论   

# re: 界面对象化 2006-02-15 14:21 Vincent Thinking

ui component bind dataset, button bind action,这些不管是配置还是实现都不是特别复杂,困难的是一些特殊的布局,比如多层嵌套,组件之间的action关联,这些是比较难处理的  回复  更多评论   

# re: 界面对象化 2006-02-15 20:11 BlueDavy

^_^,多层嵌套的动态形式的布局是比较难实现的,不过由于界面中所有的部分都可以视为元素,而元素本身也是可以绑定元素的,所以这点在实现上还是可以的,也就是说通过对动态的元素的一个同样的描述..
组件之间的action关联这个处理倒不是非常麻烦,一方面可以用link target=元素的方式,另一方面则是pageflow的方式等  回复  更多评论   

# re: 界面对象化 2006-03-14 09:59 li

关注中,给个例例吧!!!!!!!!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

公告

 









feedsky
抓虾
google reader
鲜果

导航

<2006年1月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

统计

随笔分类

随笔档案

文章档案

Blogger's

搜索

最新评论

阅读排行榜

评论排行榜