基于DOM的可視化布局解析器的設計與實現

陳天偉　彭凌西+羅茂元+張翔

摘 要： 基于DOM設計了一種實現交互界面可視化的方法，并以應用開發為例，闡述了工作機制及實現過程，為非技術人員進行可視化改版提供了一種快速可行的實現方法。經過實踐測試，通過可視化布局解析器對500個用戶的門戶改版，可減少95%的工作量，不需修改代碼，提高了代碼復用率。

關鍵詞： 可視化； 用戶體驗； DOM； 解析器

中圖分類號：TP319 文獻標志碼：A 文章編號：1006-8228（2017）03-58-03

Abstract： A method for realizing interactive interface visualization is designed based on DOM， and with an application development example， the working mechanism and the realization process are described， to provide non technical personnel with a quick and feasible method of realizing visual revision. The practice test proved that， using Visual layout parser for 500 users' portal revision， the workload can be reduced by 95%， no need to modify the code， and improve the code reuse rate.

Key words： visualization； user experience； DOM； parser

0 引言

互聯網技術的快速發展，使得建立良好用戶體驗的要求越來越高，應用頁面布局的可視化是一種趨勢。互聯網應用布局中，業務功能、用戶管理、個性化設置、數據處理等方面工作量較大，且技術含量較高，一般改版，往往需要專業人員參與，涉及代碼修改，工作量較大且影響系統穩定性。如何實現互聯網應用可視化快速改版，為互聯網應用系統的管理和維護提出了新的技術要求。本文以DOM為例，闡述基于DOM的可視化布局功能設計方法，通過在J2EE平臺上開發實現，并在電子政務項目中應用實踐，提升了應用系統的擴展性和靈活性。

1 設計思路

主流的互聯網應用的頁面布局一般是通過HTML方式展示。用戶交互信息通常直接以HTML代碼方式保存在頁面文件中，頁面文件通過與程序語言結合成動態頁面編程語言，如JSP，ASP，PHP，再通過數據庫連接，在數據庫與Web服務器之間完成數據連接，實現用戶數據的信息展示。

在應用系統的業務功能發生改變時，一般頁面的需求也需要變更，這樣頁面布局也要求改變，由于頁面文件是由程序語言合成的動態頁面編程語言，故開發人員才可以完成，工作量較大，本文提出了基于DOM的可視化布局的設計方法，經過應用實踐，可以實現非開發人員也能靈活進行布局設計和頁面可視化工作。

DOM[2]文件是由標記及其所標記的內容構成的文本文件。DOM與HTML不同之處是標記可自由定義。在實踐應用中， DOM文件能夠很好地體現用戶數據的特征和內容，通過DOM就可存儲多種信息文件，包括Web服務器與數據庫的交互信息、用戶頁面布局信息、用戶屬性信息、業務過程數據等。在實際工作中，采用DOM方式進行頁面相關信息的存儲是一種可行的方式。

用戶頁面布局文件主要由模板[3]和欄目兩部分組成。模板定義了網頁的整體風格，包括導航（top）、正文部分（content）和底部（footer）三個區域。欄目則是填充在模板中的具體內容，包括文字、圖片、圖片鏈接、圖片樣式、圖片播放、視頻切換、用戶專欄等多種形式。首先，把在模板中的具體內容和Web服務器與數據庫的交互信息保存在DOM文件中；其次，通過編輯器進行可視化界面進行操作和修改；最后，用解析器將DOM解析為HTML代碼，輸出到前臺，通過瀏覽器展示，可將可視化布局功能的實現分為DOM文件、編輯器、解析器三部分。功能結構圖如圖2所示。

如圖2，DOM文件中包含Web服務器與數據庫的交互信息、用戶頁面布局信息、用戶屬性信息、業務過程數據等；編輯器采用可視化界面操作，進行用戶頁面、Web與數據庫的交互信息的維護；解析器的主要實現兩個功能：一是對DOM文件進行解析，通過DOM文件中的標記，解析其中的用戶數據，組裝成所需的信息，二是根據布局的要求，將組裝成所需的信息生成頁面代碼，通過瀏覽器的方式與用戶進行交互。

2 實現

2.1 DOM文件

DOM文件是實現頁面可視化布局的關鍵部分，在文件中包含網頁模板和所有欄目模塊的信息，文件使用統一格式存儲信息。

DOM文件的節點對應網頁的每個分塊，因此，頁面可視化布局是通過設置DOM文件中節點來實現，這與HTML原理類似，不同的是，HTML只能設置網頁的布局[4]，而DOM不僅設置了布局，還定義了內容，實現頁面展示內容從數據庫中實時獲取，從而達到可視化頁面布局，靈活設置應用的目的。以下是DOM文件中表示頁面上一個欄目的節點代碼：

欄目名稱

MOD_ 001

TEXT

DIV

128px

34px

……

其中，ID表示與數據庫相關的節點（數據庫欄目表中欄目編號為“MOD_001”的所有記錄）；TYPE表示模塊類型（文字、圖片、圖片鏈接、圖片樣式、圖片播放、視頻切換、用戶專欄）以及表示位置、大小的屬性等。

2.2 編輯器

編輯器[5]主要功能：使用人員可以通過圖形化的可視界面，進行操作，完成用戶交互頁面的的更新和設置。

編輯器的實現中，首先，我們需要解析DOM文件，同步生成與DOM文件匹配的結構樹；其實，結構樹中每個節點對應DOM文件中一個模塊，我們修改模塊屬性，實際就是對頁面布局及內容調整；最后，我們通過對結構樹的設置和更新，就完成了對整個頁面布局的設置和更新。編輯流程如圖3所示。

通過對DOM節點新增、修改、刪除操作實現頁面布局的可視化。具體應用中，在新增節點和修改節點時，我們需要申明與后臺數據庫的鏈接信息；設置頁面布局信息；操作數據庫；將節點保存生成新的XML文件。具體實現方法如下：

//節點增加

Element tableEl=document.createElement（"MODULE"）；

//節點更新：

Element tableEl.setAttribute（"ID "， “MOD_002”）；

//節點刪除

tableEl.getParentNode（）.removeChild（tableEl）；

2.3 解析器

解析器[6]的主要功能：通過DOM開源框架，第一步先解析文件，第二步再獲取數據庫數據，組裝數據信息，按照標記，合成頁面代碼，并輸出輸出到瀏覽器，完成用戶交互。解析流程如圖4所示。

J2EE開源的解析方式主要有兩種，一種是DOM（Docunment Object Model）文檔樹結構的解析；另一種是SAX（Simple API for XML）基于事件驅動的XML技術，DOM[7]是W3C制定的一種獨立語言和平臺標準，可提供通用于各種程序語言、操作系統和應用程序的接口。DOM的原理是把XML文檔視為一種樹結構，這種樹結構稱為節點樹[8]，通過節點樹訪問所有的節點[9]。

以2.1的XML文件為例，DOM將一個欄目模塊解析為節點樹[8]，如圖5所示。

開發工具以J2EE為例，在實現上，采用JAXP[10]（java API for XML Processing）組件實現，JAXP是使用javaAPI對XML進行處理的一種規范[11]，它提供接口來操作DOM。JAXP的API包含在JDK中，它包括三個包：org.w3c.dom、ogr.xml.sax、javax.xml.parsers[4]，我們使用第一個包org.w3c.dom。

DOM使用DocumentBuilder類來讀取XML文件[12]，它提供parse方法[10]，將XML文件解析成一棵DOM樹，并返回Document實例，部分代碼如下：

DocumentBuilderFactoryImpl dbf=

new DocumentBuilderFactoryImpl（）；

DocumentBuilder db=dbf.newDocumentBuilder（）；

File xmlFile=new File（"C001.XML"）；

Document document=db.parse（xmlFile）；

遍歷獲取XML的節點信息[13]，進行分析，同時根據與數據庫相關節點（ID）[12]獲取后臺數據，最后生成HTML代碼，輸出到瀏覽器展示，完成與用戶的交互。獲得XML文件中某個欄目的根節點內容代碼[14]如下：

NodeList mylist=document.getNodeListByTagName

（"MODULE"）；

Element rootE=（Element） mylist.item（0）；

根據獲得節點[15]內容構建頁面布局，組裝成字符串并返回，并輸出到頁面，生成可視化界面，完成用戶可視化交付。

3 結束語

經過具體應用及第三方測評，可視化布局解析器能夠解決電子政務[19]應用中門戶網站的可視化設計和動態布局等問題，實現各信息點之間的安全互通共享，促進應用的發展。以移動APP應用為例，通過可視化布局解析器可減少95%的工作量。下一步工作，需對已有系統的集成、跨平臺測試等問題進行細化，以及對易用性方面存在的一些問題的進行完善，特別是在易用性和擴展性上需要做一個平衡，以保證應用的健康發展。

參考文獻（References）：

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

[2] 李軍懷，周明全等.XML在異構數據集成中的應用研究[J].計算機應用，2002.22（9）：10-12

[3] http：//www.ibm.com/developerworks/cn/opensource/os-cn-eclipse-gmf2/part2/.

[4] CRNKOVIC I. Component-based software engineeringnew challenges in software development[J]. Software Focus，2001.2（4）：127-133

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

[6] 蒲策，基于XML的網頁可視化布局設計與實現[J].成都大學學報（自然科學版），2015.34（4）：371-373

[7] 劉強波.一種面向界面模式的用戶界面生成技術研究[D].西北大學碩士學位論文，2014.

[8] 姚芳，萬建成，馮仕紅.基于模型的參數化界面設計模式[J].北

京工商大學學報：自然科學版，2008.26（2）：70-74

[9] 劉雪琴，桂盛霖，羅蕾等.AADL模型代碼自動生成技術研究[J].計算機應用研究，2008.25（12）：3631-3635

[10] 陶勇，桂盛霖，馬亮等.AADL模型的代碼自動生成及集成技術[J].計算機工程，2009.35（8）：59-61

[11] 夏剛，劉林靜，樓文高.基于Schema的XML混合編碼索引查詢技術[J].計算機應用與軟件，2016.33（2）：33-37

[12] 黃玉龍，蘇本躍，奚建清.一種基于GPU的快速XPath查詢算法[J].計算機應用與軟件，2016.33（1）：263-267，315

[13] 王振輝，王振鐸，謝膺白，支侃買.基于XML的Web數據庫安全中間件研究與設計[J].計算機應用與軟件，2015.32（8）：38-42，179

[14] 鄧澤，劉汪洋，陳丹.一種面向動態連續查詢的查詢索引[J].計算機應用與軟件，2015.32（12）：8-11，15

[15] 趙艷妮，郭華磊.基于XML的數據遷移技術在信息系統升級中的研究與實現[J].計算機應用與軟件，2014.31（12）：52-54

[16] 覃焌翔.業務獨立的桌面應用開發框架的設計和實現[D].北京郵電大學碩士學位論文，2015.

[17] 李騰.基于Open XML的Web可視化報表的研究與應用[D].南昌大學碩士學位論文，2015.

[18] 張力生，洪小云，雷大江.基于路徑特征的XML文檔結構相似性度量[J].計算機應用與軟件，2015.32（7）：39-42，85

[19] 陳天偉.基于J2EE的電子政務應用安全設計與實現[D].電子科技大學碩士學位論文，2007.