基于DWZ的Web用户界面框架设计与实现
时间：2021-04-07 07:55:50 来源：达达文档网 本文已影响 人 
摘要：在用户界面开发过程中，传统的Web应用程序往往需要编写大量复杂脚本代码来实现特定互动效果。DWZ是一个开源、可扩展、轻量级的Ajax富客户端框架，基于DWZ框架，程序员可以快速开发出高互动效果的用户界面而不需要编写大量脚本代码。分析了DWZ框架的技术要点，并将其运用到某个设备管理系统中。以设备管理系统的用户权限管理功能为例，介绍了DWZ框架的具体开发实现过程。实际应用表明：DWZ框架在Web开发中具有简单、实用、高效的特点。
关键词关键词：DWZ；用户界面框架设计；Ajax
DOIDOI：10.11907/rjdk.143716
中图分类号：TP311
文献标识码：A文章编号文章编号：16727800（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：//j-ui.com/＼[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文件的头部引入以下代码：
<script type=”text/javascript”>
$（function）（）{
DWZ.init（“dwz.frag.xml”，
/////json对象
{loginUrl：”login_dialog.html”，LoginTitle：”，
//弹出登录对话框
Debug：false，//调试模式
Callback：function（）{
initEnv（）；
……
</script>
在上述代码中，一个很重要的操作是调用init函数进行页面初始化，这也是DWZ的入口函数，init函数的主要定义代码如下：
Init：function（pageFrag，options）{
var op=$.extend（options）；
This._set.loginUrl=op.loginUrl；//登录地址
This._set.loginTitle=op.loginTitle；//login title
This._set.debug=op.debug；//是否调试
$.extend（DWZ.pageInfo，op.pageInfo）；
//集成信息加入pageinfo
jQuery.ajax（{ //调用jQuery的ajax提交异步xml和js
type’GET’，
url：pageFrag，
datatype：’xml’，
cache：false，
error：function（） …… //出错处理函数
success：function（xml） …… //成功后的处理函数
……
在实现DWZ的基本设置和调用后，可以根据DWZ提供的各类方法实现丰富多彩的用户界面。用户界面完成后，开发人员可以根据需求编写相应的业务逻辑和数据操作代码，实现系统全部功能。
4结语
本文介绍了一个开源的用户界面框架DWZ，分析了DWZ开发的基本思路和过程。在设备管理系统中应用DWZ框架技术，能够以简单快速的方式实现Web用户界面的定制开发，极大提高了工作效率。开发人员即使不懂得jQuery，也能很轻松地运用DWZ提供的页面组件实现Web界面开发。未来还需要开发复杂多样的DWZ Web组件，使之满足绝大部分Web界面定制，扩大DWZ的使用广度和深度。
参考文献参考文献：
＼[1＼]DWZ官网.DWZ富客户端框架[EB/OL].http：//.
[2]查弗. jQuery基础教程[M].李松峰，卢玉平，译.北京：人民邮电出版社，2009.
[3]翟瑞生，李丽.基于Ajax的DWZ富客户端技术的应用研究[J].中小企业管理与科技，2011 （10）：231232.
[4]陈必峰.基于Ajax的富客户端技术及应用[J].计算机科学，2011 （10）：420431.
责任编辑（责任编辑：杜能钢）
