概述
界面對象化是指以對象的思想去描述頁面元素以完成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結構好的。