界面對象化

          概述
          界面對象化是指以對象的思想去描述頁面元素以完成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 閱讀(2096) 評論(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年2月>
          2930311234
          567891011
          12131415161718
          19202122232425
          2627281234
          567891011

          統計

          隨筆分類

          隨筆檔案

          文章檔案

          Blogger's

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 宣恩县| 安平县| 资源县| 灵璧县| 山丹县| 深圳市| 同心县| 秀山| 扎兰屯市| 建湖县| 浮梁县| 成都市| 福清市| 临清市| 宁海县| 通许县| 徐水县| 盐池县| 阳谷县| 宁强县| 恩平市| 锡林郭勒盟| 东阳市| 江北区| 丽水市| 儋州市| 乌鲁木齐县| 株洲市| 维西| 二连浩特市| 庐江县| 蒲江县| 阿克苏市| 清水河县| 安庆市| 溧水县| 连平县| 綦江县| 昆山市| 肃北| 六盘水市|