基于DOM的可視化布局解析器的設計與實現(xiàn)

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

摘 要： 基于DOM設計了一種實現(xiàn)交互界面可視化的方法，并以應用開發(fā)為例，闡述了工作機制及實現(xiàn)過程，為非技術人員進行可視化改版提供了一種快速可行的實現(xiàn)方法。經(jīng)過實踐測試，通過可視化布局解析器對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 引言

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

1 設計思路

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

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

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

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

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

2 實現(xiàn)

2.1 DOM文件

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

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

欄目名稱

MOD_ 001

TEXT

DIV

128px

34px

……

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

2.2 編輯器

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

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

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

//節(jié)點增加

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

//節(jié)點更新：

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

//節(jié)點刪除

tableEl.getParentNode（）.removeChild（tableEl）；

2.3 解析器

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

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

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

開發(fā)工具以J2EE為例，在實現(xiàn)上，采用JAXP[10]（java API for XML Processing）組件實現(xiàn)，JAXP是使用javaAPI對XML進行處理的一種規(guī)范[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的節(jié)點信息[13]，進行分析，同時根據(jù)與數(shù)據(jù)庫相關節(jié)點（ID）[12]獲取后臺數(shù)據(jù)，最后生成HTML代碼，輸出到瀏覽器展示，完成與用戶的交互。獲得XML文件中某個欄目的根節(jié)點內(nèi)容代碼[14]如下：

NodeList mylist=document.getNodeListByTagName

（"MODULE"）；

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

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

3 結束語

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

參考文獻（References）：

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

[2] 李軍懷，周明全等.XML在異構數(shù)據(jù)集成中的應用研究[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的網(wǎng)頁可視化布局設計與實現(xiàn)[J].成都大學學報（自然科學版），2015.34（4）：371-373

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

[8] 姚芳，萬建成，馮仕紅.基于模型的參數(shù)化界面設計模式[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數(shù)據(jù)庫安全中間件研究與設計[J].計算機應用與軟件，2015.32（8）：38-42，179

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

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

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

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

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

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