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

基于ExtJS可视化Web页面设计系统摘要：传统Web页面是根据具体需求由专业程序员开发设计和实现，非专业人员无法着手建立个性化网站。提出了一种可视化Web页面设计系统，通过利用ExtJS技术构建基本工具模块和高级工具模块，结合模块化和对象化设计理念，实现简单易懂的网页设计系统。该系统具有类似于桌面应用软件的交互界面，操作简单。利用该系统开发网站不仅可以减少开发成本，提高Web页面的开发效率，而且能够让用户方便快捷地打造属于自己的网站，进而实现Web的个性化服务机制 关键词：ExtJS技术；Web页面；可视化；模块化设计 中图分类号：TP393.09文献标识码：A文章编号：1672?7800（2011）012?0110?03 基金项目：江西省自然科学基金资助项目(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数据缓存机制 常用的缓存技术有多种，如ADO.NET数据访问技术的Dat