曹敏　趙圓圓

摘要：在用戶界面開發(fā)過程中，傳統(tǒng)的Web應(yīng)用程序往往需要編寫大量復(fù)雜腳本代碼來實(shí)現(xiàn)特定互動(dòng)效果。DWZ是一個(gè)開源、可擴(kuò)展、輕量級(jí)的Ajax富客戶端框架，基于DWZ框架，程序員可以快速開發(fā)出高互動(dòng)效果的用戶界面而不需要編寫大量腳本代碼。分析了DWZ框架的技術(shù)要點(diǎn)，并將其運(yùn)用到某個(gè)設(shè)備管理系統(tǒng)中。以設(shè)備管理系統(tǒng)的用戶權(quán)限管理功能為例，介紹了DWZ框架的具體開發(fā)實(shí)現(xiàn)過程。實(shí)際應(yīng)用表明：DWZ框架在Web開發(fā)中具有簡單、實(shí)用、高效的特點(diǎn)。

關(guān)鍵詞關(guān)鍵詞：DWZ；用戶界面框架設(shè)計(jì)；Ajax

DOIDOI：10.11907/rjdk.143716

中圖分類號(hào)：TP311

文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)文章編號(hào)：16727800（2015）002011702

作者簡介作者簡介：曹敏（1977-），女，廣東湛江人，碩士，廣東海洋大學(xué)寸金學(xué)院信息系講師，研究方向?yàn)閃eb開發(fā)、電子信息；趙圓圓（1980-），女，河北張家口人，碩士，廣東海洋大學(xué)寸金學(xué)院信息系講師，研究方向?yàn)橛?jì)算機(jī)應(yīng)用。

0引言

Web用戶界面作為用戶接觸應(yīng)用程序的第一個(gè)窗口，其界面設(shè)計(jì)是否方便、功能是否完善、操作是否簡潔往往直接影響到用戶體驗(yàn)。傳統(tǒng)的用戶界面設(shè)計(jì)單純依靠HTML等靜態(tài)代碼，很難實(shí)現(xiàn)豐富多彩的界面互動(dòng)效果。要實(shí)現(xiàn)一些復(fù)雜的動(dòng)態(tài)效果，往往要編寫大量的腳本代碼（如 Javascript）。腳本代碼復(fù)雜，在客戶端解釋執(zhí)行，對(duì)程序員的技術(shù)要求較高。近年來比較流行的Ajax技術(shù)廣泛應(yīng)用于Web開發(fā)中，但為了實(shí)現(xiàn)Ajax的功能，同樣需要編寫大量腳本代碼，影響了程序的開發(fā)效率。DWZ框架是一個(gè)實(shí)現(xiàn)了Ajax富客戶端的框架，能夠方便程序員快速開發(fā)出各類Web應(yīng)用。應(yīng)用DWZ可以通過HTML擴(kuò)展的方式取代腳本代碼，在傳統(tǒng)HTML開發(fā)基礎(chǔ)上實(shí)現(xiàn)Ajax開發(fā)。

本文將DWZ框架運(yùn)用到某設(shè)備管理系統(tǒng)的開發(fā)中，基于DWZ框架實(shí)現(xiàn)了功能強(qiáng)大的設(shè)備管理用戶界面。同時(shí)，以系統(tǒng)用戶權(quán)限管理功能為例，介紹了使用DWZ框架實(shí)現(xiàn)快速開發(fā)的技術(shù)。

1DWZ框架

DWZ富客戶端框架完全開源，可在Web上實(shí)現(xiàn)如桌面操作一樣的用戶界面，其官網(wǎng)地址是：http：//j-ui.com/＼[1＼]。DWZ框架封裝了JQuery，為開發(fā)人員定義好了框架的布局樣式＼[2＼]，此外，DWZ簡單擴(kuò)展了HTML標(biāo)準(zhǔn)，給HTML定義了一些特別的class和attribute。使用DWZ框架能夠自動(dòng)綁定JavaScript效果，可以HTML的方式進(jìn)行引用，DWZ框架會(huì)找到當(dāng)前請(qǐng)求結(jié)果中的class和attribute， 并自動(dòng)關(guān)聯(lián)相應(yīng)的js處理事件和效果。

2用戶權(quán)限設(shè)計(jì)

本文將DWZ應(yīng)用到設(shè)備管理系統(tǒng)中，目標(biāo)是基于DWZ框架實(shí)現(xiàn)用戶菜單配置、角色定義、基于角色的權(quán)限分配、可復(fù)用的登錄模塊等。設(shè)備管理系統(tǒng)包括普通用戶和系統(tǒng)管理員。系統(tǒng)管理員權(quán)限最高，可以訪問系統(tǒng)所有頁面，創(chuàng)建不同的用戶類型、編輯和刪除用戶信息，以及對(duì)每個(gè)用戶角色分配權(quán)限。

基于用戶及權(quán)限需求，該功能模塊共有用戶、角色、權(quán)限、菜單4個(gè)實(shí)體類，實(shí)體類圖見圖1。每個(gè)實(shí)體類的基本屬性也可參考圖1。

用戶權(quán)限管理基本流程如下：管理員登錄系統(tǒng)進(jìn)入系統(tǒng)主界面，選擇用戶管理功能，對(duì)用戶管理進(jìn)行相關(guān)操作，系統(tǒng)返回操作結(jié)果，在這一過程中，如果出錯(cuò)則進(jìn)入出錯(cuò)界面，其流程如圖2所示。

3DWZ用戶界面實(shí)現(xiàn)

3.1開發(fā)環(huán)境

該系統(tǒng)軟件開發(fā)環(huán)境主要有Eclipse3.6，DWZ1.4.5版本，hibernate+spring，數(shù)據(jù)庫SQL Server 2010。

圖1實(shí)體類圖

圖2用戶管理程序

3.2基本界面

（1）登錄界面。本設(shè)備管理系統(tǒng)基于DWZ框架，采用B/S模式，用戶只需要通過瀏覽器登錄即可。目前支持的瀏覽器包括：IE、NS、360瀏覽器、騰訊瀏覽器等。

（2）用戶管理。用戶權(quán)限管理主要包括用戶添加、用戶列表、會(huì)員列表、角色權(quán)限分配、部門管理、職位管理等。

3.3DWZ實(shí)現(xiàn)

在DWZ框架的官方網(wǎng)站下載DWZ最新版本，并部署到系統(tǒng)開發(fā)環(huán)境中＼[34＼]。在使用DWZ之前需要仔細(xì)研讀DWZ文檔和相關(guān)源代碼，以便更深入理解DWZ的開發(fā)方法。DWZ框架的核心在dwz.core.js文件下，包含了整個(gè)DWZ框架的核心方法，比如頁面的初始化init、表單提交Ajax、頁面加載方法、頁面配置信息等。通常在開發(fā)的Web首頁面index.htm文件中會(huì)包含DWZ.init函數(shù)的調(diào)用，需要在index.htm文件的頭部引入以下代碼：

在上述代碼中，一個(gè)很重要的操作是調(diào)用init函數(shù)進(jìn)行頁面初始化，這也是DWZ的入口函數(shù)，init函數(shù)的主要定義代碼如下：

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；//是否調(diào)試

$.extend（DWZ.pageInfo，op.pageInfo）；

//集成信息加入pageinfo

jQuery.ajax（{ //調(diào)用jQuery的ajax提交異步xml和js

typeGET，

url：pageFrag，

datatype：xml，

cache：false，

error：function（） …… //出錯(cuò)處理函數(shù)

success：function（xml） …… //成功后的處理函數(shù)

……

在實(shí)現(xiàn)DWZ的基本設(shè)置和調(diào)用后，可以根據(jù)DWZ提供的各類方法實(shí)現(xiàn)豐富多彩的用戶界面。用戶界面完成后，開發(fā)人員可以根據(jù)需求編寫相應(yīng)的業(yè)務(wù)邏輯和數(shù)據(jù)操作代碼，實(shí)現(xiàn)系統(tǒng)全部功能。

4結(jié)語

本文介紹了一個(gè)開源的用戶界面框架DWZ，分析了DWZ開發(fā)的基本思路和過程。在設(shè)備管理系統(tǒng)中應(yīng)用DWZ框架技術(shù)，能夠以簡單快速的方式實(shí)現(xiàn)Web用戶界面的定制開發(fā)，極大提高了工作效率。開發(fā)人員即使不懂得jQuery，也能很輕松地運(yùn)用DWZ提供的頁面組件實(shí)現(xiàn)Web界面開發(fā)。未來還需要開發(fā)復(fù)雜多樣的DWZ Web組件，使之滿足絕大部分Web界面定制，擴(kuò)大DWZ的使用廣度和深度。

參考文獻(xiàn)參考文獻(xiàn)：

＼[1＼]DWZ官網(wǎng).DWZ富客戶端框架[EB/OL].http：//www.jui.com.

[2]查弗. jQuery基礎(chǔ)教程[M].李松峰，盧玉平，譯.北京：人民郵電出版社，2009.

[3]翟瑞生，李麗.基于Ajax的DWZ富客戶端技術(shù)的應(yīng)用研究[J].中小企業(yè)管理與科技，2011 （10）：231232.

[4]陳必峰.基于Ajax的富客戶端技術(shù)及應(yīng)用[J].計(jì)算機(jī)科學(xué)，2011 （10）：420431.

責(zé)任編輯（責(zé)任編輯：杜能鋼）