DWZ简介及其使用

谁践踏了优雅 2022-09-17 08:29 219阅读 0赞

**DWZ简介:**

DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。　  
　　DWZ框架支持用HTML扩展的方式来代替JavaScript代码，只要懂HTML语法， 再参考DWZ使用手册就可以做Ajax开发。  
　　开发人员不写JavaScript的情况下，也能用Ajax做项目和使用各种UI组件。 基本可以保证程序员不懂JavaScript， 也能使用各种页面组件和Ajax技术。 如果有特定需求也可以扩展DWZ做定制化开化。  
　　做Ajax项目时需要写大量的JavaScript才能达到满意的效果， 国内很多程序员javascript不熟， 大大影响了开发速度。使用DWZ框架自动邦定JavaScript效果， 不需要开发人员去关心JavaScript怎么写，只要写标准HTML就可以了。DWZ简单扩展了HTML标准，给HTML定义了一些特别的class和attribute。 DWZ框架会找到当前请求结果中的那些特别的class和attribute, 并自动关联上相应的js处理事件和效果。  
　　DWZ基于jQuery，可以非常方便的定制特定需求的UI组件， 并以jQuery插件的形式发布出来，如有需要也可做定制化开发。

**DWZ下载地址:http://code.google.com/p/dwz/downloads/list**

**DWZ的使用:**

1、下载完DWZ可以看到:

![Center][]

解压后可以看到DWZ的各个文件:

![Center 1][]

3、对于DWZ如何应用于项目中，官方文档已经做了相关的说明：

第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量.

支持HTML扩展方式来调用DWZ组件.

标准化Ajax开发, 降低Ajax开发成本.

也就是说，只需要在一个页面（通常是起始页，如index.aspx/index.php）包含框架，这里的框架是指demo中index.html页面的所有元素（<div class=”page”可自定义），完整的html结构。其它的页面只需要页面碎片，就是<body></body>中的部分。

4、根据上述提示，具体的将DWZ使用在项目中首先得将DWZ解压后的文件夹复制进工程中，后台要使用的主页面则参照demo中的index.html进行构造即可，以下为具体使用过程：

1）在myeclipse中新建一个web工程，在WebRoot下，建立一个文件夹dwz，将下载解压后的dwz文件夹中的内容复制进去：

![Center 2][]

2）本项目中，index页面位于WebRoot文件夹中，所以将dwz-ria中的index.html文件中的css和js引入部分添加到index.jsp中：

3、根据自己项目的情况，对index.html中引入的相关js或者css文件等进行路径设置，

例子：原来的一个引入文件为：<script src="js/speedup.js" type="text/javascript"></script>

因为本系统文件夹的index.jsp在WebRoot下，所以此时需要将其改为<script src="dwz-ria/js/speedup.js" type="text/javascript"></script>  
  
<title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>  
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">  
  
<link href="dwz-ria/themes/default/style.css" rel="stylesheet"  
type="text/css" media="screen" />  
<link href="dwz-ria/themes/css/core.css" rel="stylesheet"  
type="text/css" media="screen" />  
<link href="dwz-ria/themes/css/print.css" rel="stylesheet"  
type="text/css" media="print" />  
<link href="dwz-ria/uploadify/css/uploadify.css" rel="stylesheet"  
type="text/css" media="screen" />  
  
  
  
  
<script src="dwz-ria/js/jquery-1.7.2.js" type="text/javascript"></script>  
<script src="dwz-ria/js/jquery.cookie.js" type="text/javascript"></script>  
<script src="dwz-ria/js/jquery.validate.js" type="text/javascript"></script>  
<script src="dwz-ria/js/jquery.bgiframe.js" type="text/javascript"></script>  
<script src="dwz-ria/xheditor/xheditor-1.2.1.min.js"  
type="text/javascript"></script>  
<script src="dwz-ria/xheditor/xheditor\_lang/zh-cn.js"  
type="text/javascript"></script>  
<script src="dwz-ria/uploadify/scripts/jquery.uploadify.js"  
type="text/javascript"></script>  
  
  
<script type="text/javascript" src="dwz-ria/chart/raphael.js"></script>  
<script type="text/javascript" src="dwz-ria/chart/g.raphael.js"></script>  
<script type="text/javascript" src="dwz-ria/chart/g.bar.js"></script>  
<script type="text/javascript" src="dwz-ria/chart/g.line.js"></script>  
<script type="text/javascript" src="dwz-ria/chart/g.pie.js"></script>  
<script type="text/javascript" src="dwz-ria/chart/g.dot.js"></script>  
  
<script src="dwz-ria/js/dwz.core.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.util.date.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.validate.method.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.regional.zh.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.barDrag.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.drag.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.tree.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.accordion.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.ui.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.theme.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.switchEnv.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.alertMsg.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.contextmenu.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.navTab.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.tab.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.resize.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.dialog.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.dialogDrag.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.sortDrag.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.cssTable.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.stable.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.taskBar.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.ajax.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.pagination.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.database.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.datepicker.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.effects.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.panel.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.checkbox.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.history.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.combox.js" type="text/javascript"></script>  
<script src="dwz-ria/js/dwz.print.js" type="text/javascript"></script>  
  
<script src="dwz-ria/js/dwz.regional.zh.js" type="text/javascript"></script>  
  
<script type="text/javascript">  
$(function() \{  
DWZ.init("dwz-ria/dwz.frag.xml", \{  
loginUrl : "login\_dialog.html",  
loginTitle : "登录", // 弹出登录对话框  
// loginUrl:"login.html", // 跳到登录页面  
statusCode : \{  
ok : 200,  
error : 300,  
timeout : 301  
\}, //【可选】  
pageInfo : \{  
pageNum : "pageNum",  
numPerPage : "numPerPage",  
orderField : "orderField",  
orderDirection : "orderDirection"  
\}, //【可选】  
debug : false, // 调试模式 【true|false】  
callback : function() \{  
initEnv();  
$("\#themeList").theme( \{  
themeBase : "themes"  
\}); // themeBase 相对于index页面的主题base路径  
\}  
\});  
\});  
</script>  
</head>

需要注意的是初始化的配置及路径是不可或缺的：

以上文件配置好后就可以，启动服务器，运行admin文件夹下的index.jsp文件：

[Center]: /images/20220828/00d59b8bf5954239a7204e7e5eacf2f7.png
[Center 1]: /images/20220828/0fc50cebd5ed4d1aad38a42a6cbc7b53.png
[Center 2]: /images/20220828/df1fdd8e07854942bce788fe869d0f6d.png