基于DWZWeb用户界面框架设计与实现.docVIP

基于DWZWeb用户界面框架设计与实现 　　摘要：在用户界面开发过程中，传统的Web应用程序往往需要编写大量复杂脚本代码来实现特定互动效果。DWZ是一个开源、可扩展、轻量级的Ajax富客户端框架，基于DWZ框架，程序员可以快速开发出高互动效果的用户界面而不需要编写大量脚本代码。分析了DWZ框架的技术要点，并将其运用到某个设备管理系统中。以设备管理系统的用户权限管理功能为例，介绍了DWZ框架的具体开发实现过程。实际应用表明：DWZ框架在Web开发中具有简单、实用、高效的特点。 　　关键词关键词：DWZ；用户界面框架设计；Ajax 　　DOIDOI：10.11907/rjdk.143716 　　中图分类号：TP311 　　文献标识码：A文章编号文章编号2015）002011702 　　作者简介作者简介：曹敏（1977-），女，广东湛江人，硕士，广东海洋大学寸金学院信息系讲师，研究方向为Web开发、电子信息；赵圆圆（1980-），女，河北张家口人，硕士，广东海洋大学寸金学院信息系讲师，研究方向为计算机应用。 　　0引言 　　Web用户界面作为用户接触应用程序的第一个窗口，其界面设计是否方便、功能是否完善、操作是否简洁往往直接影响到用户体验。传统的用户界面设计单纯依靠HTML等静态代码，很难实现丰富多彩的界面互动效果。要实现一些复杂的动态效果，往往要编写大量的脚本代码（如 Javascript）。脚本代码复杂，在客户端解释执行，对程序员的技术要求较高。近年来比较流行的Ajax技术广泛应用于Web开发中，但为了实现Ajax的功能，同样需要编写大量脚本代码，影响了程序的开发效率。DWZ框架是一个实现了Ajax富客户端的框架，能够方便程序员快速开发出各类Web应用。应用DWZ可以通过HTML扩展的方式取代脚本代码，在传统HTML开发基础上实现Ajax开发。 　　本文将DWZ框架运用到某设备管理系统的开发中，基于DWZ框架实现了功能强大的设备管理用户界面。同时，以系统用户权限管理功能为例，介绍了使用DWZ框架实现快速开发的技术。 　　1DWZ框架 　　DWZ富客户端框架完全开源，可在Web上实现如桌面操作一样的用户界面，其官网地址是：http：///＼[1＼]。DWZ框架封装了JQuery，为开发人员定义好了框架的布局样式＼[2＼]，此外，DWZ简单扩展了HTML标准，给HTML定义了一些特别的class和attribute。使用DWZ框架能够自动绑定JavaScript效果，可以HTML的方式进行引用，DWZ框架会找到当前请求结果中的class和attribute， 并自动关联相应的js处理事件和效果。 　　2用户权限设计 　　本文将DWZ应用到设备管理系统中，目标是基于DWZ框架实现用户菜单配置、角色定义、基于角色的权限分配、可复用的登录模块等。设备管理系统包括普通用户和系统管理员。系统管理员权限最高，可以访问系统所有页面，创建不同的用户类型、编辑和删除用户信息，以及对每个用户角色分配权限。 　　基于用户及权限需求，该功能模块共有用户、角色、权限、菜单4个实体类，实体类图见图1。每个实体类的基本属性也可参考图1。 　　用户权限管理基本流程如下：管理员登录系统进入系统主界面，选择用户管理功能，对用户管理进行相关操作，系统返回操作结果，在这一过程中，如果出错则进入出错界面，其流程如图2所示。 　　3DWZ用户界面实现 　　3.1开发环境 　　该系统软件开发环境主要有Eclipse3.6，DWZ1.4.5版本，hibernate+spring，数据库SQL Server 2010。 　　图1实体类图 　　图2用户管理程序 　　3.2基本界面 　　（1）登录界面。本设备管理系统基于DWZ框架，采用B/S模式，用户只需要通过浏览器登录即可。目前支持的浏览器包括：IE、NS、360浏览器、腾讯浏览器等。 　　（2）用户管理。用户权限管理主要包括用户添加、用户列表、会员列表、角色权限分配、部门管理、职位管理等。 　　3.3DWZ实现 　　在DWZ框架的官方网站下载DWZ最新版本，并部署到系统开发环境中＼[34＼]。在使用DWZ之前需要仔细研读DWZ文档和相关源代码，以便更深入理解DWZ的开发方法。DWZ框架的核心在dwz.core.js文件下，包含了整个DWZ框架的核心方法，比如页面的初始化init、表单提交Ajax、页面加载方法、页面配置信息等。通常在开发的Web首页面index.htm文件中会包含DWZ.init函数的调用，需要在index.htm文件的头部引入以下代码： 　　 　　$（function）（）{ 　　DWZ.init（“dwz.frag.xml”，