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

摘 要： 基于DOM設(shè)計(jì)了一種實(shí)現(xiàn)交互界面可視化的方法，并以應(yīng)用開(kāi)發(fā)為例，闡述了工作機(jī)制及實(shí)現(xiàn)過(guò)程，為非技術(shù)人員進(jìn)行可視化改版提供了一種快速可行的實(shí)現(xiàn)方法。經(jīng)過(guò)實(shí)踐測(cè)試，通過(guò)可視化布局解析器對(duì)500個(gè)用戶的門(mén)戶改版，可減少95%的工作量，不需修改代碼，提高了代碼復(fù)用率。

關(guān)鍵詞： 可視化； 用戶體驗(yàn)； DOM； 解析器

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

1 設(shè)計(jì)思路

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

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

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

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

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

2 實(shí)現(xiàn)

2.1 DOM文件

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

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

欄目名稱

MOD_ 001

TEXT

DIV

128px

34px

……

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

2.2 編輯器

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

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

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

//節(jié)點(diǎn)增加

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

//節(jié)點(diǎn)更新：

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

//節(jié)點(diǎn)刪除

tableEl.getParentNode（）.removeChild（tableEl）；

2.3 解析器

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

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

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

開(kāi)發(fā)工具以J2EE為例，在實(shí)現(xiàn)上，采用JAXP[10]（java API for XML Processing）組件實(shí)現(xiàn)，JAXP是使用javaAPI對(duì)XML進(jìn)行處理的一種規(guī)范[11]，它提供接口來(lái)操作DOM。JAXP的API包含在JDK中，它包括三個(gè)包：org.w3c.dom、ogr.xml.sax、javax.xml.parsers[4]，我們使用第一個(gè)包org.w3c.dom。

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

DocumentBuilderFactoryImpl dbf=

new DocumentBuilderFactoryImpl（）；

DocumentBuilder db=dbf.newDocumentBuilder（）；

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

Document document=db.parse（xmlFile）；

遍歷獲取XML的節(jié)點(diǎn)信息[13]，進(jìn)行分析，同時(shí)根據(jù)與數(shù)據(jù)庫(kù)相關(guān)節(jié)點(diǎn)（ID）[12]獲取后臺(tái)數(shù)據(jù)，最后生成HTML代碼，輸出到瀏覽器展示，完成與用戶的交互。獲得XML文件中某個(gè)欄目的根節(jié)點(diǎn)內(nèi)容代碼[14]如下：

NodeList mylist=document.getNodeListByTagName

（"MODULE"）；

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

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

3 結(jié)束語(yǔ)

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

參考文獻(xiàn)（References）：

[1] 李濤濤，劉連忠，陳夢(mèng)東.基于XML技術(shù)實(shí)現(xiàn)表格的靈活構(gòu)建[J].計(jì)算機(jī)應(yīng)用研究，2004.21（1）：54-56

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

[7] 劉強(qiáng)波.一種面向界面模式的用戶界面生成技術(shù)研究[D].西北大學(xué)碩士學(xué)位論文，2014.

[8] 姚芳，萬(wàn)建成，馮仕紅.基于模型的參數(shù)化界面設(shè)計(jì)模式[J].北

京工商大學(xué)學(xué)報(bào)：自然科學(xué)版，2008.26（2）：70-74

[9] 劉雪琴，桂盛霖，羅蕾等.AADL模型代碼自動(dòng)生成技術(shù)研究[J].計(jì)算機(jī)應(yīng)用研究，2008.25（12）：3631-3635

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

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

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

[13] 王振輝，王振鐸，謝膺白，支侃買(mǎi).基于XML的Web數(shù)據(jù)庫(kù)安全中間件研究與設(shè)計(jì)[J].計(jì)算機(jī)應(yīng)用與軟件，2015.32（8）：38-42，179

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

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

[16] 覃焌翔.業(yè)務(wù)獨(dú)立的桌面應(yīng)用開(kāi)發(fā)框架的設(shè)計(jì)和實(shí)現(xiàn)[D].北京郵電大學(xué)碩士學(xué)位論文，2015.

[17] 李騰.基于Open XML的Web可視化報(bào)表的研究與應(yīng)用[D].南昌大學(xué)碩士學(xué)位論文，2015.

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

[19] 陳天偉.基于J2EE的電子政務(wù)應(yīng)用安全設(shè)計(jì)與實(shí)現(xiàn)[D].電子科技大學(xué)碩士學(xué)位論文，2007.