申新鵬，姚俊松，肖光雁

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

0 引 言

界面是應(yīng)用軟件系統(tǒng)的重要組成部分，用戶通過界面與軟件系統(tǒng)進(jìn)行交互，完成需要的功能。界面的好壞直接影響用戶的體驗。

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

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

ERP軟件系統(tǒng)的大量頁面需求與頁面開發(fā)的低效率產(chǎn)生了矛盾。傳統(tǒng)的開發(fā)模式已經(jīng)不能滿足需求。為了解決這個問題，金蝶公司提出了動態(tài)頁面設(shè)計模式。

1 頁面設(shè)計現(xiàn)狀

在Unix和Dos環(huán)境下，字符界面占主導(dǎo)地位，沒有圖形化界面，使用字符菜單來完成系統(tǒng)與用戶間的交互，用戶體驗很差。

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

但是網(wǎng)頁的開發(fā)效率并沒有很大的提升。當(dāng)前普遍采用的頁面開發(fā)方法是針對每個頁面編寫HTML文檔，然后編碼實現(xiàn)業(yè)務(wù)邏輯。當(dāng)頁面數(shù)量很少時，這種方法很有效。但如果系統(tǒng)中頁面很多，使用這種方法對每個頁面分別進(jìn)行設(shè)計，必然增加開發(fā)和維護(hù)的成本［7］。

2 動態(tài)頁面設(shè)計模式

ERP系統(tǒng)規(guī)模龐大，如果對每個頁面分別進(jìn)行設(shè)計、實現(xiàn)，必然造成開發(fā)效率低下，開發(fā)成本高的問題。

為了大幅提高頁面開發(fā)的效率，在分析ERP系統(tǒng)特點(diǎn)的基礎(chǔ)上，基于動態(tài)領(lǐng)域模型［8－9］提出了一種新的動態(tài)頁面設(shè)計模式，較好的解決了ERP軟件中頁面開發(fā)的一系列問題。

2.1 動態(tài)頁面的繼承體系

傳統(tǒng)的頁面開發(fā)流程是根據(jù)需求對每個頁面上的各個元素分別進(jìn)行設(shè)計，然后對頁面的功能進(jìn)行編碼實現(xiàn)。對每個頁面，及頁面上的每個元素都需要單獨(dú)進(jìn)行設(shè)計和編碼。不同界面間沒有任何繼承關(guān)系。這種方法的開發(fā)效率很低，發(fā)布成本很高。

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

圖1 頁面繼承

本文提出的動態(tài)頁面設(shè)計模式是采用動態(tài)領(lǐng)域模型對頁面進(jìn)一步抽象，將頁面上元素的行為進(jìn)行封裝，作為繼承對象，從而大大提高了系統(tǒng)的靈活性和質(zhì)量的一致性。

2.2 動態(tài)頁面的領(lǐng)域模型

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

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

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

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

圖2 頁面包含的元素

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

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

加入屬性后，ERP動態(tài)領(lǐng)域模型成為由模型－元素－屬性組成的3層體系結(jié)構(gòu)，如圖3所示。

圖3 三層領(lǐng)域模型結(jié)構(gòu)

文本輸入框、列表等顯示控件在各種頁面上的功能是相似的，采用上面的方法進(jìn)行領(lǐng)域建?；究梢詽M足要求。

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

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

2.3 動態(tài)頁面的MVC模式

將設(shè)計好的動態(tài)領(lǐng)域模型應(yīng)用到頁面設(shè)計中采用繼承和MVC來實現(xiàn)。

動態(tài)領(lǐng)域建模得到的基本元素是頁面繼承的對象，因此，這些基本元素的封裝性決定了整個產(chǎn)品的質(zhì)量。為了提高質(zhì)量的穩(wěn)定性和易維護(hù)性，使用MVC模式［10－11］來設(shè)計頁面元素，從M（模式），V（視圖），C（控制）3個維度分別設(shè)計。

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

同一個頁面元素的M，V，C分別使用不同的類進(jìn)行封裝，從而有效的實現(xiàn)三者的分離，保證了各自的獨(dú)立性，提高整個系統(tǒng)的質(zhì)量。

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

圖4 頁面元素繼承

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

2.4 動態(tài)頁面的繼承

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

頁面元素繼承法具有更好的靈活性，但不可否認(rèn)，ERP系統(tǒng)中有很多類似的界面，所有這些界面都從頁面元素開始進(jìn)行設(shè)計，將大大降低開發(fā)效率。在動態(tài)頁面設(shè)計模式中，我們將這兩種繼承方法結(jié)合了起來。

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

圖5 動態(tài)頁面的繼承關(guān)系

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

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

2.5 動態(tài)頁面的組合

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

（1）使用動態(tài)頁面設(shè)計方法將頁面上的部分內(nèi)容設(shè)計成一個獨(dú)立的頁面。

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

（3）將Panel的屬性設(shè)定為第一步設(shè)計好的獨(dú)立頁面的名字。

經(jīng)過以上3個步驟就可以實現(xiàn)動態(tài)頁面的組合功能。如圖6所示。

圖6 動態(tài)頁面的組合

采用動態(tài)頁面組合技術(shù)產(chǎn)生的頁面，在保存時也使用差量保存的方法。作為整體的頁面只保存它的元素及元素的屬性（獨(dú)立頁面的名字作為Panel元素的屬性保存）。獨(dú)立頁面的內(nèi)容保存在獨(dú)立頁面自己的XML文件中。

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

2.6 插件的開發(fā)和實現(xiàn)

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

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

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

2.7 動態(tài)頁面的解析

通過前面介紹的方法使用抽象的頁面元素以XML文件實現(xiàn)了動態(tài)頁面的設(shè)計。當(dāng)要加載頁面時，需要將XML文件轉(zhuǎn)換為具體的頁面，這部分工作由動態(tài)解釋引擎負(fù)責(zé)。圖7是動態(tài)解釋引擎的示意圖。

圖7 頁面動態(tài)解釋引擎

動態(tài)解釋引擎由展示層，服務(wù)層，內(nèi)核層組成。當(dāng)XML文檔輸入解釋引擎后，內(nèi)核層讀取元模型數(shù)據(jù)解析XML文檔，并將結(jié)果交給服務(wù)層。服務(wù)層將解析結(jié)果封裝層可以在網(wǎng)絡(luò)中傳輸?shù)腏SON數(shù)據(jù)包，并發(fā)送到展示層。展示層收到JSON數(shù)據(jù)包后，使用不同的頁面展示方式，把頁面顯示給最終用戶。

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

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

2.8 基于領(lǐng)域模型的頁面設(shè)計的動態(tài)性

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

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

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

插件作為頁面基本功能的補(bǔ)充，是通過實現(xiàn)插件接口，注冊到系統(tǒng)中的。當(dāng)開發(fā)出新的更好的插件時，只需要將老的插件移除，將新的插件注冊到系統(tǒng)，就可以實現(xiàn)新的功能。

系統(tǒng)中類似的動態(tài)改變頁面外觀及功能的例子還有很多，這些功能都是通過動態(tài)領(lǐng)域模型來實現(xiàn)的。

3 實 現(xiàn)

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

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

4 結(jié)束語

提出了一種新的頁面設(shè)計方法，這種設(shè)計模式大幅提高了ERP系統(tǒng)的設(shè)計和開發(fā)效率，并有效提升了軟件產(chǎn)品的質(zhì)量。而且這種方法設(shè)計出來的頁面具有良好的動態(tài)性，可以在運(yùn)行時調(diào)整外觀和功能，很好地滿足了用戶的個性需求。基于動態(tài)領(lǐng)域模型的頁面設(shè)計方法可以推廣到其他有大量頁面開發(fā)需求的系統(tǒng)中，具有較高的理論和應(yīng)用價值。

［1］TANG Xiaobo.Enterprise resource planning system ［M］.Wuhan：Wuhan University Press，2009（in Chinese）. ［唐曉波.企業(yè)資源計劃 ［M］.武漢：武漢大學(xué)出版社，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）.［蔡奎，盧雷，王帥強(qiáng)等，基于 Web界面設(shè)計模式的復(fù)雜行為建模及其代碼生成方法 ［J］.計算機(jī)應(yīng)用，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）.［李慧，石冰，馬軍，等.一種支持訪問控制的用戶界面設(shè)計模型 ［J］.計算機(jī)應(yīng)用研究，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頁面自動生成系統(tǒng)PAGES［J］.計算機(jī)工程與應(yīng)用，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）.［馬永杰，楊志民.面向用戶的可復(fù)用系統(tǒng)菜單權(quán)限的設(shè)置 ［J］.計算機(jī)應(yīng)用研究，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：一種可擴(kuò)展的Web頁面開發(fā)工具 ［J］.計算機(jī)應(yīng)用與軟件，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）.［焦鋒，基于目標(biāo)樹的領(lǐng)域建模及映射技術(shù) ［J］.計算機(jī)科學(xué)，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）. ［周惠群，左春，蔡玉寶.特定領(lǐng)域的數(shù)據(jù)參考模型建模方法研究 ［J］.計算機(jī)工程與設(shè)計，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仿真系統(tǒng) ［J］.計算機(jī)應(yīng)用研究，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）. ［吳衛(wèi)平，王麗芳，蔣澤軍.基于MVC模式實現(xiàn)Web應(yīng)用程序的控制器 研 究 ［J］.微電 子 學(xué) 與 計 算 機(jī)，2008，25（5）：182－184.］