HTML模型增強

    html最早的設計目標只是作爲某種多媒體文檔展現技術,其設計者顯然無法預料到今天Web應用的蓬勃發展,一些設計缺陷也就難以避免。特別是html規範中缺乏對於複雜交互式組件模型的支持,直接導致企業應用的前臺開發困難重重。AJAX技術可以看作是對這種困境的一種改良性響應,它試圖通過javascript語言在應用層創建並維護一系列複雜的交互機制。很多完善的ajax框架走得相當遙遠,最終基本將html作爲一種底層“彙編”語言來使用。例如,一個很整齊美觀的類Excel表格可能是由一個個div拼接而成,與html原生的table元素已經沒有任何關係。


    Witrix平臺中對於前臺html模型也作了一定的增強,但基本的設計思想是儘量利用原生控件,並儘量保持原生控件內在的數據關係,而不是重新構建一個完整的底層支撐環境。採用這種設計的原因大致有如下幾點:
1. 前臺技術目前競爭非常激烈,我們優先選擇的方式是集成第三方組件,儘量保持原生環境有利於降低集成成本。
2. 通過javascript構造的控件可能存在性能瓶頸和其他瀏覽器內在的限制。例如一般Ajax框架提供的Grid控件都無法支撐大量單元格的顯示。
3. Witrix平臺的tpl模板技術可以非常方便的生成html文本,並提供強大的控件抽象能力,因此在前臺動態創建並組織界面元素在Witrix平臺中是一種不經濟的做法。
4. Witrix平臺提供的分解機制非常細緻,存儲於不同地方的不同來源的代碼會在不同的時刻織入到最終的頁面中,基於原生環境有利於降低平臺快速演進過程中的設計風險。

   Witrix平臺中對於html模型的增強主要關注於以最少的代碼實現界面控件與業務邏輯的自然結合。基本結構包括:
1. 通過ControlManager對象在前臺建立一種container結構,統一管理控件的註冊和獲取。js.makeControl(elmOrId)返回特殊註冊的控件對象或者根據原生html元素生成一個包裝對象。
2. 通過js.getWxValue(elm)和js.setWxValue(elm,value)這兩個函數統一對控件的值的存取過程。
3. 通過js.regListener(elm,listenerFunc)統一管理控件之間的相關觸發,實現控件之間的相互監聽。當js.setWxValue(elm,value)被調用時,註冊在ControlManager中的listenerFunc將被調用。
4. stdPage.setFieldValue(fieldName,value)和stdPage.getFieldValue(fieldName,value)統一針對業務字段的值的存取過程,這裏fieldName對應於實體上的業務字段名。
5. 通過ajax.addForm(frmId)等函數統一前臺提交參數的提取過程,通過stdPage.buildAjax()等函數統一後臺服務的調用方式。
6. 通過stdPage對象統一封裝業務場景中的"常識"。
基於以上一些基礎機制,Witrix平臺即可提供一些複雜的業務組件封裝。例如<input name="productCode" onkeypress="stdPage.keyPressToLoadRefByCode({objectName:'SomeProduct',queryField:'productCode'})" .../>通過簡單的調用一個js函數即可實現如下功能:
a. 在文本框中輸入回車的時候自動提交到後臺查找對應產品代碼的產品,並更新前臺多個相關字段的值
b. 如果沒有查找到相應產品,則彈出對話框根據界面上已有的部分字段信息提示客戶添加新的產品信息。
c. 如果找到多個對應產品,則彈出列表允許客戶選擇其一。
d. 具體的處理過程可以通過函數參數進行精細的控制。
在meta文件中,結合上下文環境中的元數據信息,我們在缺省情況下可以直接使用 <ds:LoadRefByCodeInputor objectName="SomeProduct" />標籤,不需要任何其他附加參數。

   Witrix平臺中一般利用原生控件來保存數據值,而不是將數據保存在分離的js對象中。例如對於一個選擇控件,經常要求選擇得到的是實體的id,而顯示在界面上的是某個其他字段的值。Witrix平臺中一般的實現結構是
   <input type="hidden" name="${fieldName}" value="${entity[dsMeta.idField]}" id="${id}" textId="text_${id}" />
   <input type="text" value="${entity[dsMeta.nameField]}" id="text_${id}" />
通過textId等擴展屬性即可明確定義控件多個部分之間的關聯關係,同時保證控件的實現完全與html規範相兼容。
   Witrix平臺中目前使用的"標準化"的擴展屬性有textId(對應文本顯示控件的id), showName(某些無文字顯示的選擇控件需要保留顯示字段值), op(字段作爲查詢條件提交時的比較算符),validator(字段值對應的檢驗函數),setWxValue/getWxValue(重定義控件值的存取行爲),serializer(特殊處理前臺控件的提交參數)等。擴展屬性不僅可以引入說明信息,還可以引入豐富的控件行爲。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章