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

摘 要： 基于DOM設(shè)計(jì)了一種實(shí)現(xiàn)交互界面可視化的方法，并以應(yīng)用開發(fā)為例，闡述了工作機(jī)制及實(shí)現(xiàn)過程，為非技術(shù)人員進(jìn)行可視化改版提供了一種快速可行的實(shí)現(xiàn)方法。經(jīng)過實(shí)踐測(cè)試，通過可視化布局解析器對(duì)500個(gè)用戶的門戶改版，可減少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)的要求越來越高，應(yīng)用頁面布局的可視化是一種趨勢(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ì)方法，通過在J2EE平臺(tá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)用的頁面布局一般是通過HTML方式展示。用戶交互信息通常直接以HTML代碼方式保存在頁面文件中，頁面文件通過與程序語言結(jié)合成動(dòng)態(tài)頁面編程語言，如JSP，ASP，PHP，再通過數(shù)據(jù)庫連接，在數(shù)據(jù)庫與Web服務(wù)器之間完成數(shù)據(jù)連接，實(shí)現(xiàn)用戶數(shù)據(jù)的信息展示。

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

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

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

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

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

2.1 DOM文件

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

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

欄目名稱

MOD_ 001

TEXT

DIV

128px

34px

……

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

2.2 編輯器

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

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

通過對(duì)DOM節(jié)點(diǎn)新增、修改、刪除操作實(shí)現(xiàn)頁面布局的可視化。具體應(yīng)用中，在新增節(jié)點(diǎn)和修改節(jié)點(diǎn)時(shí)，我們需要申明與后臺(tái)數(shù)據(jù)庫的鏈接信息；設(shè)置頁面布局信息；操作數(shù)據(jù)庫；將節(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]的主要功能：通過DOM開源框架，第一步先解析文件，第二步再獲取數(shù)據(jù)庫數(shù)據(jù)，組裝數(shù)據(jù)信息，按照標(biāo)記，合成頁面代碼，并輸出輸出到瀏覽器，完成用戶交互。解析流程如圖4所示。

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

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

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

DOM使用DocumentBuilder類來讀取XML文件[12]，它提供parse方法[10]，將XML文件解析成一棵DOM樹，并返回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ù)庫相關(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)建頁面布局，組裝成字符串并返回，并輸出到頁面，生成可視化界面，完成用戶可視化交付。

3 結(jié)束語

經(jīng)過具體應(yīng)用及第三方測(cè)評(píng)，可視化布局解析器能夠解決電子政務(wù)[19]應(yīng)用中門戶網(wǎng)站的可視化設(shè)計(jì)和動(dòng)態(tài)布局等問題，實(shí)現(xiàn)各信息點(diǎn)之間的安全互通共享，促進(jìn)應(yīng)用的發(fā)展。以移動(dòng)APP應(yīng)用為例，通過可視化布局解析器可減少95%的工作量。下一步工作，需對(duì)已有系統(tǒng)的集成、跨平臺(tái)測(cè)試等問題進(jìn)行細(xì)化，以及對(duì)易用性方面存在的一些問題的進(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)頁可視化布局設(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] 姚芳，萬建成，馮仕紅.基于模型的參數(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] 王振輝，王振鐸，謝膺白，支侃買.基于XML的Web數(shù)據(jù)庫安全中間件研究與設(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)用開發(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.