基于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.