基于ＸＭＬ的表單設計器構件的設計與實現

摘要：針對Web應用系統中用戶對表單的需求不斷變化的普遍現象，設計了基于XML的表單設計器構件，實現了Web應用系統中用戶對表單的動態管理。

關鍵詞：可擴展標記語言；表單；構件；文檔對象模型

中圖分類號：TP311文獻標志碼：A

文章編號：1001－3695(2007)07－0183－03

0引言

在開發Web應用系統的過程中，經常遇到這樣的問題：由于業務上的需要，用戶要求輸出某些具有固定格式且內容基于后臺數據庫的表單[1]。在以往的開發中，把用戶需求的表單固定在系統中，雖然當時可以很好地滿足用戶需求，但是，隨著用戶業務對表單需求的不斷發展變化，固定在系統中的表單就會帶來一系列問題，諸如修改困難、程序復用性差、可擴展性差等。這樣導致的直接后果就是不能滿足用戶對今后業務發展的需要。隨著構件技術的日益成熟，構件化開發已成為勢不可擋的趨勢[2，3]，表單管理作為Web應用系統的重要組成部分，更需要進行領域工程的研究與復用。而XML（eXtensible Markup Language）作為一種可擴展標記語言，具備良好的自描述性和擴展性，遵循嚴格的語法規則，以及對多語言的支持等特點，具有廣闊的應用前景及解決問題的好方案。設計開發基于XML的表單設計器構件，以XML為表單樣式存儲介質，由用戶根據自身需求來設置管理基于后臺數據表的表單，能很好地滿足用戶變化的需求，而且能夠大大減輕維護人員的工作量，減少開發和維護成本，增強系統的復用性和生命力。

1XML技術簡介

1．1XML技術的特點

XML是由W3C于1998年2月發布的一種標準。它以一種開放的自我描述方式定義數據結構，在描述數據內容的同時能突出對結構的描述，從而體現出數據之間的關系。這樣所組織的數據對于應用程序和用戶都是友好的、可操作的。目前正在迅速成為網絡資料交換的標準。以XML為基礎的新一代WWW環境是直接面對Web數據的，不僅可以很好地兼容原有的Web應用，而且可以更好地實現Web中的信息共享與交換[4]。

總地來講，XML的主要特點如下：

(1)可擴展性。允許各個組織、個人建立適合自己需要的置標集合，可以根據需求參數化和語義化相應的數據。這一特征使得XML可以在電子政務、電子商務、司法、出版、保險機構和中介組織信息交換等領域中一展身手，針對不同的系統、廠商提供各具特色的獨立解決方案。

（2）結構性。數據存儲格式不受顯示格式的制約。一般包括三個要素，即數據、結構以及顯示方式。XML把文檔的三要素獨立開來，分別處理。

（3）平臺獨立性。XML文檔是純文本，獨立于平臺和應用。

XML還有其他許多優點，比如它有利于不同系統之間的信息交流；完全可以充當網際語言，并有希望成為數據和文檔交換的標準機制。

1．2DOM技術

DOM（Document Object Model，文檔對象模型）接口提供了一種通過分層對象模型來訪問XML文檔信息的方式。這些分層對象模型依據XML的文檔結構形成了一棵節點樹。無論XML文檔中所描述的是什么類型的信息，即使是制表數據、項目列表或一個文檔，利用DOM所生成的模型均是節點樹的形式。在應用程序中，基于DOM的XML分析器將一個XML文檔轉換成一個對象模型的集合（通常稱DOM樹），應用程序正是通過對這個對象模型的操作，來實現對XML文檔數據的操作。通過DOM接口，應用程序可以在任何時候訪問XML文檔中的任何一部分數據。這種利用DOM接口的機制也被稱做隨機訪問機制。DOM樹所提供的隨機訪問方式給應用程序的開發帶來了很大的靈活性，它可以任意地控制整個XML文檔中的內容。

2表單設計器構件的設計

表單設計器構件主要用于系統運行期間，對基于后臺數據庫的表單的設計管理，它以可視化界面將表單呈現給用戶，使用簡易的點擊、拖拽操作來完成對表單布局的設置。這樣當表單樣式發生改變時，只需通過表單設計器對其進行修改，而不必修改程序。這種表單與系統業務設計相對分離的方法，既減輕了開發人員的維護壓力，又使得用戶可以根據自身的需求隨意地增減、修改表單，從而實現零成本維護。

2．1構件模型設計

從用戶操作便易性出發，通過對表單設計器的分析，筆者設計了表單設計器構件模型（MF），可以用元組作如下表示：

MF={MTR，MDR，MBR，MIR}

其構成部分定義如下：

(1)MTR（工具欄域）。表單設計的工具，用于設置表單界面元素、元素屬性以及調整表單布局。表單設計時，工具欄懸浮在設計界面的上方，以便于用戶操作使用。工具欄操作包括對表格的初始、插入；行列的插入、追加、刪除；表格、行列的屬性設置；對控件的操作，控件來源于應用系統數據庫中的數據，包括輸入框、文本框、選擇框、日期型、編號型等。其面板布局如表1所示。其中斜體字部分為輸入項。

(2)MDR（表單設計域）。承載表單設計，是工具欄作用的區域，它以可視化界面將表單設計布局呈現給用戶便于用戶設置、調整表單。

(3)MBR（操作按鈕域）。對表單布局進行操作，功能包括新建布局、修改布局、提交布局、預覽布局。新建布局為將表單設計域初始為空白界面以建立全新的布局；當用戶對某個表單樣式需求發生變動時，可以對該表單布局進行修改；當新建或修改布局完成后通過提交布局功能將表單布局保存下來；已提交過的布局可以通過預覽布局功能進行預覽。

(4)MIR（接口域）。構件通過接口與應用系統進行交互。接口是每個構件不可或缺的部分。表單設計器的接口包括兩個部分，即應用系統數據庫和XML文件。表單設計針對應用系統數據庫中某個數據表進行，需要從應用系統數據庫中獲取數據表、數據字段以及字段類型等數據信息；設計好的表單以XML的格式存儲，應用系統通過XML文檔來使用設計的表單。

2．2表單設計器引擎

表單設計器引擎是表單設計器的關鍵。其結構如圖1所示。

引擎結構圖中，表單定制工具需要與數據庫交互獲取數據表數據信息；XML解析器實現雙向解析操作，一方面XML解析器將圖形界面的表單（HTML格式）解析并存儲在XML文檔中；另一方面XML解析器可將表單的XML文檔內容反向解析為HTML格式的圖形界面并顯示給使用人員調整表單或終端用戶瀏覽編輯使用。

對表單設計器引擎作如下詳細設計：

（1）與數據庫的交互。表單設計針對應用系統數據庫中數據表進行。表單中的項目標題與數據表字段相對應，而應用系統數據庫設計多以英文標志字段名稱，需要用數據字典來建立數據表字段中英文名稱的對照。此外表單設計在設置字段項目標題時還需同時設置字段的輸入類型。這就需要應用系統數據庫中有數據表存儲數據類型，以供表單設計控件輸入類型選擇所用。

（2）HTML與XML轉換對照。兩種格式的文檔相互轉換時需要有對應關系。HTML與XML之間的對應由表示對象類型、表示屬性、表示關系的詞匯表實現，如HTML標簽table、tr、td分別由對象類型table、row、line表示，XML中width、hight等表示HTML中的屬性，ID用于標志HTML中table間的嵌套關系等。

（3）圖形界面的表單到XML的解析。當表單布局設計完成提交布局時，需要實現表單的XML格式存儲，此時XML解析器的作用主要實現將圖形界面的表單（HTML格式）解析為XML格式以存儲于XML文檔中。XML文件的命名以數據表名加順序號表示。這一解析由客戶端JavaScript腳本trans.js實現，由函數getContent順序解析獲取HTML對象以及屬性值，依據轉換對照詞匯表轉換為XML的對象類型及屬性、關系，以字符串形式存儲下來，函數saveXMLFile完成XML文檔的寫入。

（4）XML到圖形界面表單的解析。表單修改、預覽以及在系統中使用時均需要對XML文檔進行讀取解析。XML的讀取使用DOM技術實現[5]，通過對DOM樹的順序訪問獲取各個節點。在服務器端Servlet中引入包org.w3c.dom.Document、org.w3c.dom.Element、org.w3c.dom.Node、org.w3c.dom.NodeList、ojavax.xml.parsers.*。首先加載XML文檔，定義節點列表對象nodelist，使用XMLDocument對象方法getDocumentElement獲取element對象，element對象的getChildNodes方法返回該對象的所有子節點列表對象賦予nodelist，通過getNodeName、getNodeValue獲得節點屬性名、屬性值，再根據需要生成設計HTML、預覽HTML字符串返回到瀏覽器界面顯示。其他操作方法在此不再贅述。

2．3表單布局設置流程

表單布局設置是表單設計器的核心部分。這里重點介紹表單布局設置的內部實現流程，如圖2所示。

從圖2中可以看到，表單布局設置的整個處理流程為：首先選擇數據表進入表單布局設置界面，系統自動檢測存儲數據表對應表單布局的XML文檔是否已經存在。如果不存在，則顯示空白設計界面以便新建布局；如果已存在，則顯示在瀏覽器界面上。在設置表單布局時使用控制面板上方的工具欄可以實現各式各樣的表格，以滿足用戶的多樣需求。各項功能采用js腳本實現，對應的insertTable、insertRow、appendRow等方法存儲在Js.js文件中，Jsp頁面直接調用腳本方法實現。在表單布局設置完成后點擊工具欄的提交布局按鈕，實現表單布局的存儲，還可以預覽表單布局。這兩個操作均需要通過XML解析器實現。

3表單設計器構件的實現

基于上述設計，筆者采用Jsp、Java開發實現了表單設計器構件。應用表單設計器設計入庫單表單布局界面如圖3所示。通過鼠標點擊上方懸浮的工具欄來添加、刪除表單布局域的表格、控件，以及調整表格、控件的位置、屬性等。當鼠標焦點處于某個單元格時，插入表格則能實現嵌套表格的設計，使用起來方便簡潔。

設計好的表單提交布局后將以XML文檔形式存儲。下面為提交入庫單表單布局生成的XML文件片段：

?xml version=\"1.0\" encoding=\"GB2312\"?

style

table align=\"center\" width=\"80%\" class=\"show_content\"id=\"table1\" cellspacing=\"1\"

tbody id=\"tbody1\"

row

line height=\"30\" align=\"center\" bgcolor=\"#ffffff\"

font size=\"6\"

STRONG

font size=\"3\"

string入庫單 /string

/font

/STRONG

/font

/line

/row

row

line bgcolor=\"#ffffff\"

table align=\"center\" width=\"98%\" class=\"gwcs_bg\" id=\"table2\" cellpading=\"0\" cellspacing=\"1\"

tbody id=\"tbody2\"

row

line id=\"system1\" width=\"15%\" height=\"30\" align=\"center\" bgcolor=\"#f4f4f4\"

string名稱、規格型號 /string

/line

…

/tbody

/table

/line

/row

…

/tbody

/table

/style

表單進行修改、預覽時，解析器讀取XML并解析為圖形界面顯示給用戶。圖4為設計的入庫單表單預覽界面。設計好的表單加入應用系統流程就可以使用了。該方法由應用系統開發人員自行實現。

4結束語

本文從實際需求出發，設計開發了基于XML的表單設計器構件，通過表單設計器用戶可以自行設計修改基于應用系統數據庫的表單，能夠實現用戶對表單的動態設置管理，很好地滿足了用戶的需求。在表單設計中引入XML技術，能夠提高表單設置的靈活性，增強構件的復用性，進一步說明了半結構化、具備自描述性的XML在解決固定表格所具有的程序復雜性、改動困難等問題上的優勢。

參考文獻：

［1］李濤濤，劉連忠，陳夢東.基于XML技術實現表格的靈活構建[J].計算機應用研究，2004，21（1）:54－56.

[2]RINE D C，NADE N.An empirical study of a software reuse reference model[J].Information and Software Technology，2000，42:45－47.

[3]CRNKOVIC I. Component－based software engineering new challenges in software development[J]. Software Focus，2001，2(4):127－133.

[4]李軍懷，周明全，等.XML在異構數據集成中的應用研究[J].計算機應用，2002，22(9):10－12.

[5]NAKHIMOVSKY A，MYERS T. Professional Java XML programming with servlets and JSP[M].Birmingham: Peer Information Inc.，1999：201－284.

注：“本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文”