界面对象化

 
概述
界面对象化是指以对象的思想去描述页面元素以完成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成一种具备动态特性的元素的过程。
界面对象化后界面组件化自然也就可以形成了，也就是如今流行的UIComponent，在这样的一种实现方法下我们甚至可以想象在UI进行大变动的情况下根据无需开发人员做任何改动系统就仍然可以运转，这必然会大大的减少UI集成和维护的工作量；但UIComponent在目前也是会带来一些问题的，就是在如今很容易将UI设计图转为html的情况下，反而因为使用了UIComponent造成了很难达到UI设计的效果，就像是CS结构一样，CS结构中的元素为了做到和UI设计一样的效果无疑是要付出很大的努力的，不过在web上的UIComponent还是比CS占有更多的优势，因为它可以通过css来控制显示，仍然看好Web的开发方式，虽然Web的交互方式现在离cs的交互方式还有一定的差距，但就显示效果来讲Web是更容易做的比cs结构好的。