當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

DWZ简介及其使用

發(fā)布時(shí)間：2023/12/3 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 DWZ简介及其使用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?DWZ簡(jiǎn)介:????

????? ?DWZ富客戶(hù)端框架(jQuery RIA framework)，是中國(guó)人自己開(kāi)發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開(kāi)源框架。 DWZ富客戶(hù)端框架設(shè)計(jì)目標(biāo)是簡(jiǎn)單實(shí)用、擴(kuò)展方便、快速開(kāi)發(fā)、RIA思路、輕量級(jí)。　
　　DWZ框架支持用HTML擴(kuò)展的方式來(lái)代替JavaScript代碼，只要懂HTML語(yǔ)法，再參考DWZ使用手冊(cè)就可以做Ajax開(kāi)發(fā)。
　　開(kāi)發(fā)人員不寫(xiě)JavaScript的情況下，也能用Ajax做項(xiàng)目和使用各種UI組件。基本可以保證程序員不懂JavaScript，也能使用各種頁(yè)面組件和Ajax技術(shù)。如果有特定需求也可以擴(kuò)展DWZ做定制化開(kāi)化。
　　做Ajax項(xiàng)目時(shí)需要寫(xiě)大量的JavaScript才能達(dá)到滿(mǎn)意的效果，國(guó)內(nèi)很多程序員javascript不熟，大大影響了開(kāi)發(fā)速度。使用DWZ框架自動(dòng)邦定JavaScript效果，不需要開(kāi)發(fā)人員去關(guān)心JavaScript怎么寫(xiě)，只要寫(xiě)標(biāo)準(zhǔn)HTML就可以了。DWZ簡(jiǎn)單擴(kuò)展了HTML標(biāo)準(zhǔn)，給HTML定義了一些特別的class和attribute。 DWZ框架會(huì)找到當(dāng)前請(qǐng)求結(jié)果中的那些特別的class和attribute, 并自動(dòng)關(guān)聯(lián)上相應(yīng)的js處理事件和效果。
　　DWZ基于jQuery，可以非常方便的定制特定需求的UI組件，并以jQuery插件的形式發(fā)布出來(lái)，如有需要也可做定制化開(kāi)發(fā)。

? DWZ下載地址:http://code.google.com/p/dwz/downloads/list

? DWZ的使用:

?1、下載完DWZ可以看到:

2、解壓后可以看到DWZ的各個(gè)文件: ?3、對(duì)于DWZ如何應(yīng)用于項(xiàng)目中，官方文檔已經(jīng)做了相關(guān)的說(shuō)明：

第一次打開(kāi)頁(yè)面時(shí)載入界面到客戶(hù)端, 之后和服務(wù)器的交互只是數(shù)據(jù)交互, 不占用界面相關(guān)的網(wǎng)絡(luò)流量.

支持HTML擴(kuò)展方式來(lái)調(diào)用DWZ組件.

標(biāo)準(zhǔn)化Ajax開(kāi)發(fā), 降低Ajax開(kāi)發(fā)成本.

也就是說(shuō)，只需要在一個(gè)頁(yè)面（通常是起始頁(yè)，如index.aspx/index.php）包含框架，這里的框架是指demo中index.html頁(yè)面的所有元素（<div class=”page”可自定義），完整的html結(jié)構(gòu)。其它的頁(yè)面只需要頁(yè)面碎片，就是<body></body>中的部分。

4、根據(jù)上述提示，具體的將DWZ使用在項(xiàng)目中首先得將DWZ解壓后的文件夾復(fù)制進(jìn)工程中，后臺(tái)要使用的主頁(yè)面則參照demo中的index.html進(jìn)行構(gòu)造即可，以下為具體使用過(guò)程：

1）在myeclipse中新建一個(gè)web工程，在WebRoot下，建立一個(gè)文件夾dwz，將下載解壓后的dwz文件夾中的內(nèi)容復(fù)制進(jìn)去：

2）本項(xiàng)目中，后臺(tái)的系統(tǒng)主界面位于admin文件夾中，所以將dwz中的index.html復(fù)制進(jìn)入admin文件夾中，并做相應(yīng)修改： 3、根據(jù)自己項(xiàng)目的情況，對(duì)index.html中引入的相關(guān)js或者css文件等進(jìn)行路徑設(shè)置，例子：原來(lái)的一個(gè)引入文件為：<script src="js/speedup.js" type="text/javascript"></script> 因?yàn)楸鞠到y(tǒng)文件夾的index.html在admin下，所以此時(shí)需要將其改為<script src="../dwz/js/speedup.js" type="text/javascript"></script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>簡(jiǎn)單實(shí)用國(guó)產(chǎn)jQuery UI框架 - DWZ富客戶(hù)端框架(J-UI.com)</title><link href="../dwz/themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/> <link href="../dwz/themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/> <link href="../dwz/themes/css/print.css" rel="stylesheet" type="text/css" media="print"/> <link href="../dwz/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/> <script src="../dwz/js/speedup.js" type="text/javascript"></script> <script src="../dwz/js/jquery-1.7.1.js" type="text/javascript"></script> <script src="../dwz/js/jquery.cookie.js" type="text/javascript"></script> <script src="../dwz/js/jquery.validate.js" type="text/javascript"></script> <script src="../dwz/js/jquery.bgiframe.js" type="text/javascript"></script> <script src="../dwz/xheditor/xheditor-1.1.12-zh-cn.min.js" type="text/javascript"></script> <script src="../dwz/uploadify/scripts/swfobject.js" type="text/javascript"></script> <script src="../dwz/uploadify/scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script><script src="../dwz/js/dwz.core.js" type="text/javascript"></script> <script src="../dwz/js/dwz.util.date.js" type="text/javascript"></script> <script src="../dwz/js/dwz.validate.method.js" type="text/javascript"></script> <script src="../dwz/js/dwz.regional.zh.js" type="text/javascript"></script> <script src="../dwz/js/dwz.barDrag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.drag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.tree.js" type="text/javascript"></script> <script src="../dwz/js/dwz.accordion.js" type="text/javascript"></script> <script src="../dwz/js/dwz.ui.js" type="text/javascript"></script> <script src="../dwz/js/dwz.theme.js" type="text/javascript"></script> <script src="../dwz/js/dwz.switchEnv.js" type="text/javascript"></script> <script src="../dwz/js/dwz.alertMsg.js" type="text/javascript"></script> <script src="../dwz/js/dwz.contextmenu.js" type="text/javascript"></script> <script src="../dwz/js/dwz.navTab.js" type="text/javascript"></script> <script src="../dwz/js/dwz.tab.js" type="text/javascript"></script> <script src="../dwz/js/dwz.resize.js" type="text/javascript"></script> <script src="../dwz/js/dwz.dialog.js" type="text/javascript"></script> <script src="../dwz/js/dwz.dialogDrag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.sortDrag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.cssTable.js" type="text/javascript"></script> <script src="../dwz/js/dwz.stable.js" type="text/javascript"></script> <script src="../dwz/js/dwz.taskBar.js" type="text/javascript"></script> <script src="../dwz/js/dwz.ajax.js" type="text/javascript"></script> <script src="../dwz/js/dwz.pagination.js" type="text/javascript"></script> <script src="../dwz/js/dwz.database.js" type="text/javascript"></script> <script src="../dwz/js/dwz.datepicker.js" type="text/javascript"></script> <script src="../dwz/js/dwz.effects.js" type="text/javascript"></script> <script src="../dwz/js/dwz.panel.js" type="text/javascript"></script> <script src="../dwz/js/dwz.checkbox.js" type="text/javascript"></script> <script src="../dwz/js/dwz.history.js" type="text/javascript"></script> <script src="../dwz/js/dwz.combox.js" type="text/javascript"></script> <script src="../dwz/js/dwz.print.js" type="text/javascript"></script>  <script src="../dwz/js/dwz.regional.zh.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ ?DWZ.init("../dwz/dwz.frag.xml", { ??loginUrl:"login_dialog.html", loginTitle:"登錄",?// 彈出登錄對(duì)話框 //??loginUrl:"login.html",?// 跳到登錄頁(yè)面 ??statusCode:{ok:200, error:300, timeout:301}, //【可選】 ??pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可選】 ??debug:false,?// 調(diào)試模式【true|false】 ??callback:function(){ ???initEnv(); ???$("#themeList").theme({themeBase:"themes"}); // themeBase 相對(duì)于index頁(yè)面的主題base路徑 ??} ?}); }); </script> </head> 需要注意的是初始化的配置及路徑是不可或缺的： <script type="text/javascript"> $(function(){DWZ.init("../dwz/dwz.frag.xml", {loginUrl:"login_dialog.html", loginTitle:"登錄",?// 彈出登錄對(duì)話框 //??loginUrl:"login.html",?// 跳到登錄頁(yè)面statusCode:{ok:200, error:300, timeout:301}, //【可選】pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可選】debug:false,?// 調(diào)試模式【true|false】callback:function(){initEnv();$("#themeList").theme({themeBase:"themes"}); // themeBase 相對(duì)于index頁(yè)面的主題base路徑}}); }); </script> 以上文件配置好后就可以，啟動(dòng)服務(wù)器，運(yùn)行admin文件夾下的index.html文件： ? 運(yùn)行成功后，之后和服務(wù)器的交互只是數(shù)據(jù)交互, 其它的頁(yè)面使用也只需要頁(yè)面碎片，就是<body></body>中的部分。

總結(jié)

以上是生活随笔為你收集整理的DWZ简介及其使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

简介
DWZ