DWZ简介及其使用

最新推荐文章于 2018-11-10 19:37:52 发布

muyilee

最新推荐文章于 2018-11-10 19:37:52 发布

阅读量3.3k

点赞数 1

文章标签： javascript ui xhtml ViewUI

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可以看到:

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

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文件夹中的内容复制进去：

2）本项目中，后台的系统主界面位于admin文件夹中，所以将dwz中的index.html复制进入admin文件夹中，并做相应修改：

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

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

因为本系统文件夹的index.html在admin下，所以此时需要将其改为<script src="../dwz/js/speedup.js" type="text/javascript"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>

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

<script type="text/javascript">
$(function(){
DWZ.init("../dwz/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>

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

运行成功后，之后和服务器的交互只是数据交互, 其它的页面使用也只需要页面碎片，就是<body></body>中的部分。

muyilee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DWZ简介及其使用

DWZ简介: DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。　　　DWZ框架支持用HTML扩展的方式来代替JavaScript代码，只要懂HTML语法，再参考DWZ使用手册就可以做Ajax开发。　　开发人员不写Jav...
复制链接

扫一扫