基于動態領域模型的頁面設計模式

申新鵬，姚俊松，肖光雁

（金蝶軟件（中國）有限公司，廣東 深圳518057）

0 引 言

界面是應用軟件系統的重要組成部分，用戶通過界面與軟件系統進行交互，完成需要的功能。界面的好壞直接影響用戶的體驗。

企業資源計劃［1］（enterprise resource planning，ERP）系統集信息技術與先進的管理思想于一身，實現了對企業的采購，生產，銷售，分析，決策的全面管理，已經成為當前信息化企業管理的基礎。以ERP軟件系統為基礎，企業能夠及時準確地收集數據，分析經營狀況、財務狀況，提高管理的效率。ERP系統作為一種應用軟件系統，除了它本身的強大功能外，界面的好壞，產品的易用性也是用戶在購買產品時重點考慮的一個問題。

隨著企業管理理念的變化，當前ERP軟件系統不僅要實現對企業供應鏈資源的全面管理，還要完成上下游企業協同工作的管理，為了實現這些功能，現在的ERP軟件系統的規模一般比較龐大，例如金蝶K/3Wise 12.0標準版有8萬個以上的頁面組成。市場要求開發高質量的界面，但傳統的界面開發是根據需求對每個界面上的各個元素分別進行設計和實現的，開發效率很低，頁面質量的一致性也無法得到保證［2－3］。

ERP軟件系統的大量頁面需求與頁面開發的低效率產生了矛盾。傳統的開發模式已經不能滿足需求。為了解決這個問題，金蝶公司提出了動態頁面設計模式。

1 頁面設計現狀

在Unix和Dos環境下，字符界面占主導地位，沒有圖形化界面，使用字符菜單來完成系統與用戶間的交互，用戶體驗很差。

隨著Windows等操作系統的發展，出現了圖形化的客戶端，界面非常友好，但是客戶端的開發和部署非常繁瑣，經常出現版本問題［4－5］。隨著Internet等技術的逐漸成熟，網頁成為系統與用戶交互的主要媒介［6］。開發好的網頁存放在Web服務器上，當用戶需要時，從服務器下載使用，解決了系統的部署和運行環境的版本控制問題。

但是網頁的開發效率并沒有很大的提升。當前普遍采用的頁面開發方法是針對每個頁面編寫HTML文檔，然后編碼實現業務邏輯。當頁面數量很少時，這種方法很有效。但如果系統中頁面很多，使用這種方法對每個頁面分別進行設計，必然增加開發和維護的成本［7］。

2 動態頁面設計模式

ERP系統規模龐大，如果對每個頁面分別進行設計、實現，必然造成開發效率低下，開發成本高的問題。

為了大幅提高頁面開發的效率，在分析ERP系統特點的基礎上，基于動態領域模型［8－9］提出了一種新的動態頁面設計模式，較好的解決了ERP軟件中頁面開發的一系列問題。

2.1 動態頁面的繼承體系

傳統的頁面開發流程是根據需求對每個頁面上的各個元素分別進行設計，然后對頁面的功能進行編碼實現。對每個頁面，及頁面上的每個元素都需要單獨進行設計和編碼。不同界面間沒有任何繼承關系。這種方法的開發效率很低，發布成本很高。

為了提高開發效率，根據不同頁面的特點，將相似的頁面歸類，建立母板，將相似的功能在母板實現。具體的頁面從母板繼承，得到通用的功能，每個頁面特定的功能在子類中具體實現。這種方法的界面設計是以頁面組為單位，如圖1所示，相似的多個頁面可以共用一個模型作為母板，比第一種方法有較大的改進。但是如果界面上的元素或操作發生變化，就必須重新設計界面模型，修改代碼。不能實現界面在部署環境的按需動態構建。

圖1 頁面繼承

本文提出的動態頁面設計模式是采用動態領域模型對頁面進一步抽象，將頁面上元素的行為進行封裝，作為繼承對象，從而大大提高了系統的靈活性和質量的一致性。

2.2 動態頁面的領域模型

頁面是ERP軟件系統的基本模塊單位。但每個頁面要實現的功能不同，頁面的設計和實現也千差萬別，雖然可以使用母板來提高開發效率，但難以發生本質性的變化。

一個典型的頁面由文本輸入框、時間輸入框、列表、顯示信息等多個顯示控件和菜單、按鈕等多個操作控件組成。

頁面作為整體雖然實現的功能有很大的差異，但每個控件實現的功能確是基本固定的。例如文本輸入框的功能是輸入內容；按鈕的功能是執行一個事件。

因此，控件是組成頁面的基本單位，如果把頁面看作是一種領域模型，控件就是該模型的基本元素，如圖2所示。

圖2 頁面包含的元素

同時，一個頁面上相同種類的控件可能會有很多個，它們顯示的內容和格式各不相同。例如，一個應收單上有兩個文本輸入框，一個要輸入應收金額，一個要輸入收款單位。應收金額只能輸入數字，長度20個像素。收款單位可以輸入中文和英文，長度100個像素。同一類控件的這種差異性必須在領域模型抽象中得到體現。

控件的這種差異性在領域建模中使用元素的屬性來表示。每個元素都有多個可以動態修改的屬性。例如文本框有類型、長度、高度、綁定的數據庫字段等多個屬性。

加入屬性后，ERP動態領域模型成為由模型－元素－屬性組成的3層體系結構，如圖3所示。

圖3 三層領域模型結構

文本輸入框、列表等顯示控件在各種頁面上的功能是相似的，采用上面的方法進行領域建模基本可以滿足要求。

但菜單、按鈕等操作控件在不同的頁面上都要執行事件，但相同的事件具體的操作是不同的。在領域建模時，將相同點提取出來，將按鈕（菜單）作為基本元素，將事件作為元素的屬性，將具體的動作（函數）作為屬性的值進行建模。為了提高靈活性，一個事件可以綁定一個或多個動作函數。

例如一個按鈕有單擊事件要實現刪除并保存的功能。在系統中，按鈕是一個基本元素，它有一個屬性表示單擊事件。系統同時定義了新增，保存，檢索，刪除等多個函數。只要將按鈕的單擊事件與刪除，保存兩個函數綁定，就可以實現要求的功能。

2.3 動態頁面的MVC模式

將設計好的動態領域模型應用到頁面設計中采用繼承和MVC來實現。

動態領域建模得到的基本元素是頁面繼承的對象，因此，這些基本元素的封裝性決定了整個產品的質量。為了提高質量的穩定性和易維護性，使用MVC模式［10－11］來設計頁面元素，從M（模式），V（視圖），C（控制）3個維度分別設計。

M（模式）主要描述頁面元素的數據特性，例如頁面元素中的數據對應的數據庫字段，數據的校驗規則等。V（視圖）主要描述頁面元素的顯示特性，例如控件在頁面的位置，日期型控件的日歷選擇顯示方法等。C（控制）主要描述頁面元素的控制信息，例如光標離開控件執行的代碼等。

同一個頁面元素的M，V，C分別使用不同的類進行封裝，從而有效的實現三者的分離，保證了各自的獨立性，提高整個系統的質量。

在設計頁面時，先簡單地將封裝好的頁面元素拖放到頁面上，然后設定頁面元素的屬性，例如頁面元素的值來源于哪個數據表的字段，如何顯示等。頁面上的工具欄，菜單項，按鈕等的行為特性也都使用屬性設定的方法進行確定。頁面元素繼承如圖4所示。

圖4 頁面元素繼承

使用這種方法可以很簡單地實現頁面的設計。設計好的頁面以XML文件形式保存頁面元素的各種屬性。使用XML的形式可以很好的提供跨平臺的功能，不論是PC機，手機還是其他智能終端都能夠提供完美的支持。

2.4 動態頁面的繼承

前面提到了兩種頁面設計的繼承方法：母板繼承和頁面元素繼承。

頁面元素繼承法具有更好的靈活性，但不可否認，ERP系統中有很多類似的界面，所有這些界面都從頁面元素開始進行設計，將大大降低開發效率。在動態頁面設計模式中，我們將這兩種繼承方法結合了起來。

先分析相似界面的共同特點，確定母板的特征。使用抽象了的頁面元素完成母板的設計。其他頁面繼承該母板，并在特定的控件中設定頁面特有的屬性，從而進一步提高頁面開發的效率。

圖5 動態頁面的繼承關系

采用圖5所示的繼承關系后，多個頁面共同的信息由母板XML文件保存，頁面XML文件只保存它相對于母板變化的部分（包括增加，刪除，修改3種可能）.

采用這種差量保存的方法可以充分利用繼承帶來的好處，提高系統的兼容性。母板發生變化可以立即反映到具體的頁面。

2.5 動態頁面的組合

頁面繼承發生的條件是兩個頁面的整體有較大的相似之處。在頁面設計時，還有另外一種情況，一個頁面或多個頁面的部分內容非常相似，但不相同的地方又很多。如果采用母板繼承方法，繼承后要修改的內容很多。這種情況可以使用動態頁面組合的技術來解決。具體包括如下幾個步驟：

（1）使用動態頁面設計方法將頁面上的部分內容設計成一個獨立的頁面。

（2）使用動態頁面設計方法設計整體頁面，在需要特殊設計的部分放置一個名為Panel的基本元素。

（3）將Panel的屬性設定為第一步設計好的獨立頁面的名字。

經過以上3個步驟就可以實現動態頁面的組合功能。如圖6所示。

圖6 動態頁面的組合

采用動態頁面組合技術產生的頁面，在保存時也使用差量保存的方法。作為整體的頁面只保存它的元素及元素的屬性（獨立頁面的名字作為Panel元素的屬性保存）。獨立頁面的內容保存在獨立頁面自己的XML文件中。

采用這種方法，如果有多個頁面使用了同一個獨立頁面，獨立頁面的修改可以立即反映到所有這些整體頁面上。

2.6 插件的開發和實現

以上的方法解決了大部分ERP系統中頁面的設計問題，但是有一些頁面具有部分和其他頁面不同的行為，使用母板和抽象的頁面元素不能完成這些頁面的設計。但如果將它們排除在動態頁面設計模式之外，這些頁面的修改將需要修改代碼，重新編譯，造成很多問題，是不可行的。必須在頁面動態設計模式中解決。

針對這種情況，在動態頁面設計模式中，增加了插件功能來解決了這一問題。插件就是在系統中定義接口類和一系列接口函數。當需要實現特定的功能時，先繼承該類，然后實現插件類的幾個特定的接口函數。并將實現的接口注冊到頁面的特定元素上。在發布時，插件的功能以單獨的動態鏈接庫的形式提供。

在頁面設計時，使用MVC模式對頁面的模式，顯示和控制分別進行設計。同樣，插件也分為界面插件和操作插件兩種。界面插件通過實現頁面生成插件接口，對頁面上元素屬性、樣式進行修改，實現特殊、個性界面。操作插件通過實現頁面邏輯服務接口，實現動態頁面控制邏輯如界面元素控制、基礎資料屬性攜帶、公式計算、數據匯總、操作調用等。

2.7 動態頁面的解析

通過前面介紹的方法使用抽象的頁面元素以XML文件實現了動態頁面的設計。當要加載頁面時，需要將XML文件轉換為具體的頁面，這部分工作由動態解釋引擎負責。圖7是動態解釋引擎的示意圖。

圖7 頁面動態解釋引擎

動態解釋引擎由展示層，服務層，內核層組成。當XML文檔輸入解釋引擎后，內核層讀取元模型數據解析XML文檔，并將結果交給服務層。服務層將解析結果封裝層可以在網絡中傳輸的JSON數據包，并發送到展示層。展示層收到JSON數據包后，使用不同的頁面展示方式，把頁面顯示給最終用戶。

對于使用母板的頁面，頁面信息分別存放在兩個XML文件中，因此頁面的解析也分為兩個步驟。首先解析母板的XML，得到一個動態頁面A，然后解析具體頁面的差量XML文件，將差量內容反映到剛剛生成的頁面A，使得頁面不同于母板的特性可以得到體現。

使用這種差量保存的方法，多個頁面共用一個母板，可以使用頁面緩存的方法減少母板頁面解析的次數，從而大幅度提高頁面加載效率。

2.8 基于領域模型的頁面設計的動態性

采用本文介紹的基于領域模型的頁面設計方法，可以簡化頁面設計的過程，提高開發效率。另一方面，采用動態領域模型設計后，頁面設計的最小單位是頁面上的基本元素，具體的操作等都是作為元素的屬性存在的，因此設計的頁面具有很好的動態性。

例如菜單項的事件（單擊）是確定的，但是菜單項具體執行的操作（函數）是作為屬性值設定的。只需要簡單的操作就可以改變菜單項的功能（從新增改為保存）。

再例如采用動態頁面組合技術生成的頁面。頁面上嵌套的小頁面是獨立設計的，并且是作為整體頁面的Panel元素的屬性與整體頁面聯系在一起的。如果想使用另外一個小頁面代替原來的頁面，只需要改變Panel元素的屬性值即可。

插件作為頁面基本功能的補充，是通過實現插件接口，注冊到系統中的。當開發出新的更好的插件時，只需要將老的插件移除，將新的插件注冊到系統，就可以實現新的功能。

系統中類似的動態改變頁面外觀及功能的例子還有很多，這些功能都是通過動態領域模型來實現的。

3 實 現

設計了一個 BOS（business operating system）系 統，作為動態頁面設計模式實現的載體。使用這種方法基于BOS平臺進行頁面設計和開發，幾乎不需要修改任何代碼，而且可以很好地保持界面質量的一致性。

將動態頁面設計模式應用到ERP應用系統開發后，開發效率大幅上升，系統的可遷移性得到了顯著提高。采用這種技術前，90%的精力花費在頁面的設計上，無法專注與ERP業務流程的設計。采用最新的頁面設計方法后，頁面開發的時間降低為10%，開發人員90%的精力關注業務邏輯設計和系統建模。從而可以開發出更加適合企業需求的產品。另一方面，采用新技術后，系統開發的難度大幅下降，新員工經過簡單培訓可以開始工作。同時，由于減少了代碼修改的數量，系統的質量也得到了大幅提高.

4 結束語

提出了一種新的頁面設計方法，這種設計模式大幅提高了ERP系統的設計和開發效率，并有效提升了軟件產品的質量。而且這種方法設計出來的頁面具有良好的動態性，可以在運行時調整外觀和功能，很好地滿足了用戶的個性需求。基于動態領域模型的頁面設計方法可以推廣到其他有大量頁面開發需求的系統中，具有較高的理論和應用價值。

［1］TANG Xiaobo.Enterprise resource planning system ［M］.Wuhan：Wuhan University Press，2009（in Chinese）. ［唐曉波.企業資源計劃 ［M］.武漢：武漢大學出版社，2009.］

［2］CAI Kui，LU Lei，WANG Shuaiqiang，et al.Complicated behaviors modeling and code generation based on Web UI design pattern ［J］.Journal of Computer Applications，2009，29（4）：1139－1142（in Chinese）.［蔡奎，盧雷，王帥強等，基于 Web界面設計模式的復雜行為建模及其代碼生成方法 ［J］.計算機應用，2009，29（4）：1139－1142.］

［3］LI Hui，SHI Bing，MA Jun，et al.User interface design model to support access control ［J］.Application Research of Computers，2009，26（11）：4136－4139（in Chinese）.［李慧，石冰，馬軍，等.一種支持訪問控制的用戶界面設計模型 ［J］.計算機應用研究，2009，26（11）：4136－4139.］

［4］LI Fan，LI Meng，LI Jing.A model based WEB page automatic generating system：PAGS ［J］，Computer Engineering and Applications，2006，42（27）：84－87（in Chinese）. ［李凡，李夢，李京.基于模型的 WEB頁面自動生成系統PAGES［J］.計算機工程與應用，2006，42（27）：84－87.］

［5］MA Yongjie，YANG Zhimin.Reusable use－oriented access control method［J］.Application Research of Computers，2008，25（4）：1108－1110（in Chinese）.［馬永杰，楊志民.面向用戶的可復用系統菜單權限的設置 ［J］.計算機應用研究，2008，25（4）：1108－1110.］

［6］Martín G，Jorge M，Agueda V，et al.Improving accessibility with user－tailored interfaces ［J］.Applied Intelligence，2009，30（1）：65－71.

［7］WU Lei，LI Fan，LI Jing.EXPAGS：An expansible development tools for web pages ［J］.Computer Applications and Software，2008，25（8）：117－120（in Chinese）.［武磊，李凡，李京.ExPAGS：一種可擴展的Web頁面開發工具 ［J］.計算機應用與軟件，2008，25（8）：117－120.］

［8］JIAO Feng.Domain modeling and mapping technique based on goal－tree ［J］.Computer science，2011，38（5）：107－112（in Chinese）.［焦鋒，基于目標樹的領域建模及映射技術 ［J］.計算機科學，2011，38（5）：107－112.］

［9］ZHOU Huiqun，ZUO Chun，CAI Yubao.Research on domainspecific reference data model ［J］.Computer Engineering and Design，2009，30（3）：605－609（in Chinese）. ［周惠群，左春，蔡玉寶.特定領域的數據參考模型建模方法研究 ［J］.計算機工程與設計，2009，30（3）：605－609.］

［10］HU Tengbo，YE Jiankao.Simulation system of WebGIS based on MVC pattern ［J］.Application Research of Computers，2009，26（1）：247－249（in Chinese）. ［胡騰波，葉建栲，基于MVC模式的 WebGIS仿真系統 ［J］.計算機應用研究，2009，26（1）：247－249.］

［11］WU Weiping，WANG Lifang，JIANG Zejun.Research of controler in web application based on MVC ［J］.Microelectronics＆Computer，2008，25（5）：182－184（in Chinese）. ［吳衛平，王麗芳，蔣澤軍.基于MVC模式實現Web應用程序的控制器 研 究 ［J］.微電 子 學 與 計 算 機，2008，25（5）：182－184.］