基于ExtJS的可视化Web页面设计系统

摘要：传统Web页面是根据具体需求由专业程序员开发设计和实现，非专业人员无法着手建立个性化网站。提出了一种可视化Web页面设计系统，通过利用ExtJS技术构建基本工具模块和高级工具模块，结合模块化和对象化设计理念，实现简单易懂的网页设计系统。该系统具有类似于桌面应用软件的交互界面，操作简单。利用该系统开发网站不仅可以减少开发成本，提高Web页面的开发效率，而且能够让用户方便快捷地打造属于自己的网站，进而实现Web的个性化服务机制。

关键词：ExtJS技术；Web页面；可视化；模块化设计

中图分类号：TP393.09文献标识码：A文章编号：16727800（2011）012011003

基金项目：江西省自然科学基金资助项目(2010GQS0127)

作者简介：杨丽彬(1982-)，女，内蒙古赤峰人，硕士，龙岩学院数学与计算机科学学院助教，研究方向为制造企业信息化；李海林(1982-), 男, 福建龙岩人，大连理工大学系统工程研究所博士研究生，研究方向为人工智能和数据挖掘；邱望仁(1978-)，男，江西都昌人,博士，景德镇陶瓷学院信息与工程学院副教授，研究方向为数据挖掘。

0引言

可视化的Web页面设计系统利用ExtJS技术的优点，实现了把浏览器中的一个具体页面作为网站设计的开发环境，它是基于B/S结构的可视化、软件化的Web页面设计系统，具有友好的人机交互界面。只要用户按着要求使用该系统并上传网站内容，就可以建立自己的个性化网站。根据对象模块化设计原理，将Web页面设计元素整合为各类通用工具模块，并实现工具模块的综合管理。每个工具模块都是一个独立的对象，它们都具有配制参数设置窗口、属性设置窗口和内容填充窗口，通过设置窗口参数可以产生丰富多彩的、形式多样的模块。该系统开发的网站具有个性化特色，同时具备动态管理功能；改变了传统的页面人机交互方式，优化了界面设计，提高了各项操作效率，带来全新的用户体验。

1系统特征

可视化Web页面设计系统是一种基于Web的开发系统，它独立于传统网页的开发模式，能够在浏览器中实现整个网站的开发。该系统具有基于Web的页面设计、Web页面模块化设计、Web页面设计工具开发过程的对象化、数据缓存机制等特征。

1.1基于Web的页面设计

“基于Web”是指该系统是一个独立于Internet浏览器的软件，无需编写程序即可实现页面设计。用户直接在Web浏览器中进行页面设计，且整个过程是所见即所得的。用户只需操作工具模块集，就可为Web页面中添加所需的模块；多次操作和选用不同的模块便可实现整个页面的整体设计；通过鼠标拖动模块即可对页面进行布局和设计。

1.2Web页面的模块化设计

Web页面的模块设计根据软件工程原理，按照软件设计的步骤进行模块设计，具备模块间“弱耦合”，模块内“高内聚”的特点，这是传统Web页面不具有的设计模式。

在开发工具模块时，由于各基本工具模块之间具有高度的模块化，即模块之间有较强的弱耦合和高内聚性质，因此对于不同模块之间的数据传递只能通过其上一级工具模块来实现。同时需要对一些常用的工具模块进行高层次的模块化。具体模块化设计过程如图1所示。

图1中，粗实箭头表示在开发工具模块时，基本工具模块和较低级工具模块用来开发更高一级的工具模块。模块集内包括基本工具模块和一些高级模块。利用可视化的Web页面设计系统可以方便、简单的进行Web网页构建，其用户操作的对象为开发模块化阶段所提供的各种模块，不需要顾忌后台数据如何传输接收和网页代码如何生成等问题。

图1工具模块Web应用过程

1.3Web页面设计工具开发过程的对象化

模块化设计应用面向对象方法来设计整个工具模块。由于设计和开发过程中使用的是JavaScript语言，它是基于对象的语言，虽然实现了以原型对象为基础的继承机制，有类和对象的定义，但是它并是不完全的对象化过程，因此JavaScript的对象化编程是开发该系统的一个难点。但JavaScript有了一些基本的对象化属性，本文利用它来扩展JavaScript，并定制一套完整的对象化设计方法。通过类封装，可以对工具模块的参数属性值进行修改；通过相应的方法或事件，可以设置模块的功能，能够动态创建、修改模块，即实现了同一模块的多功能应用。同时将参数窗口和内容填充窗口的构建添加到模块对象类中，使得每个模块对象具有此类窗口，就不会因使用方式的不同而丢失窗口。

服务器端也进行了对象化设计。由于客户端的数据都是基于对象的数据成员值或相关参数，服务器端同样也要用对象化设计方法来接收和发送数据，以便存取数据。

1.4数据缓存机制

常用的缓存技术有多种，如数据访问技术的DataSet对象，Application对象技术等。他们可以对某个对象进行数据缓存，但该对象在整个Web页面中处于相对静止，不可移植。而模块化设计工具开发出来的Web页面要具有数据缓存功能，是不会因应用范围的变化而改变。

本文提出一种基于多线程数据缓存的工具模块，其具体思想是利用ExtJS中的异步技术，同时或定时地向服务端发送请求，请求可能同时向若干个数据处理文件同时发送信息，此时在客户端设置多个线程，其中一个为主线程，它负责数据的显示，其它线程负责数据加载，即数据加载线程将数据转交给主线程来显示，主线程只要从客户端的其它线程的数据池中读取数据即可，如同从服务器端获取的数据一样，显示于Web用户面前。这些线程都在客户端利用ExtJS技术来编写，把其当作工具模块的属性，集成到工具模块中。

2系统实现

2.1开发环境

该系统的开发环境是基于Web页面的，即把浏览器中的一个具体页面作为网站设计的开发环境。根据需要，将这个开发环境划分成四个区域，分别是签名区、导航区、编辑区和版权区。签名区是设计网站主题，可以添加或修改网站主题、设计其样式。导航区设计网站菜单。用户可以添加、修改新的菜单或菜单项。建立新菜单项时，相应的建立一个新的Web页面。该页面与主页面有相同的网站名称、样式风格、布局和导航菜单等。编辑区编辑网站的内容。该系统提供一个工具模块集，用户按需选择模块，将其添加到编辑区内，并按要求设置其配制参数，这样就可以建立一个新模块。每个模块都是一个独立的对象 ，有它自己的标题，并把相关的内容组织在一起。多个这样的模块构成一个页面，它们按着一定的方式排列在一起，就形成页面的布局。版权区声明网站的所有权、开发者的联系地址等信息。

2.2数据库设计

使用该系统设计开发网站的过程是动态的，即少数的信息是固定不变且存放在文件或数据库里，其它的信息都是变化的，这些变化的信息都保存在数据库中。将数据库分为基础公共数据库表和模块内容数据库表两个部分进行设计。

基础公共数据库表主要存储一些基础的、公共的内容和数据，是每个网站都需要使用到的数据库表，例如用户信息表、工具模块信息表、工具模块配制参数表、用户模块表等。

模块内容数据库表主要存放模块内容的数据表。由于每种模块的功能和内容不同，所以每种模块至少需要一张内容表。由于内容表数量多且其结构不能确定，该系统采取动态创建表的方法创建这些内容表。

2.3工具模块的实现

该系统提供多种的网站设计工具模块，如图2（a）所示，它包括基本工具模块和高级工具模块。基本工具模块是最小单元，它不能再包含其它的模块，而高级工具模块是一种容器，它可以包含多个基本工具模块。通过以表格工具模块的使用方法为例，演示可视化Web页面设计系统开发个性化网页的优越性。

表格工具模块是一个表格，该表格有两种内容显示功能，分别是表格中内容具有超链接功能和用户自己填写的内容，并在子页面中显示其内容。设置表格属性时，首先设置配制参数窗口，如图2（b）所示，用ExtJS的Ext.grid.GridPanel对象提供基本参数，并创建一个表格工具模块。在图2（c）中设置属性窗口，选择内容显示方式，并设置其它属性。最后，通过拖动鼠标设置模块的大小、位置、表格列宽或隐藏某列等，如图2（d）所示，这样可以设置表格的显示样式和位置等属性。添加表格内容时，首先要在表格属性窗口设置内容的显示方式，然后打开内容填充窗口，如图2（e）所示，该窗口不仅可以添加新内容，而且还是模块的后台数据管理器，用户可以查看、修改、删除内容。该窗口的上边是添加新内容的表单，这个表单是动态生成地，它与表格的设置相对应，即表格有几列，表单就相应的有几个文本框，文本框标签与列的字段值相同，它会根据属性设置窗口的不同设置而变化，如果在属性设置窗口的连接方式中选择“外接连接”，这时它将是一个文本框，用于输入URL地址。该窗口的下边是内容管理表格，显示内容表的所有数据。现在已经创建一个表格工具模块实

图2表格工具模块

例并添加了内容，结果如图2（f）所示。如果该模块的内容显示长度大于模块宽度时，会在模块的下边出现滚动条，方便用户查看内容。

对于同一模块，局部参数设置不同，会产生丰富多样的模块，进而达到了同一资源多功能的效果，即单模块多功能是该系统的特点。通过上述方法，非专业网页设计用户便可以根据自己需要，选择不同的基本工具模块，设定不同的参数，通过灵活组合搭配，便可以设计出具有个性色彩的Web页面。

3结束语

该系统具有类似桌面应用软件一样的操作界面，操作方法简单方便，用户只需使用鼠标就可以完成网站的建设。与传Web设计方法相比，该系统不需要专业的Web程序设计知识便可以完成满足用户自己需要的个性化页面。同时，通过简单的鼠标操作和可视化交互界面参数的设定，便可建立具有不同特点的Web页面，进而实现快捷有效的建站模式。

参考文献：

[1]卫军,夏慧军.ExtJS Web应用程序开发指南[M].北京:机械工业出版社,2009.

[2]黄灯桥,徐会生. Ext JS高级程序设计[M].北京:机械工业出版社,2009.

[3]BRIAN MOESKAU.Tutorial: Introduction to Ext 2.0[EB/OL].2007111.

[4]张海藩.软件工程导论（第四版）[M].北京:清华大学出版社,2004.

[5]MEILIR PAGE JOHES.面向对象设计――程序员必读[M].北京:电子工业出版社,2004.

[6]尹绯,陈文博.数据绑定与远程数据服务在动态Web中的应用[J].计算机应用,1999(11).

Design System of Visualized Web Pages Based on ExtJS

Abstract:The traditional web pages are designed and developed by professional programmer according to specific requirements. In this paper, a design system of visualized web pages is propsed, which is used ExtJS technique to construct the basic advanced tool modules and combines with the design concept of modularity and objectification to realize. This system is the same to the interactive interface of desktopbased application software which is easy to operate. Using the system to develop web pages can reduce the development cost and improve the efficiency of web development, also make the users build their own website which has individual service.

Key Words: ExtJS Technique; Web Page; Visualization; Modular Design