`
T123012009065
  • 浏览: 52629 次
文章分类
社区版块
存档分类
最新评论

DWZ简介及其使用

 
阅读更多

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>
<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"/>
<!--[if IE]>
<link href="../dwz/themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
<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/bin/dwz.min.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:"登录",// 弹出登录对话框
//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>
需要注意的是初始化的配置及路径是不可或缺的：
<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>中的部分。
分享到：
| Firebug不能使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DWZ框架及使用教程

    压缩文件包含： DWZ框架 DWZ富客户端框架使用手册 DWZ框架使用的实例简单介绍

    DWZ富客户端框架使用手册

    资源名称：DWZ富客户端框架使用手册资源目录：概述. 4 学习DWZ 的建议...... 4 DWZ 区别于其它 JS 框架，最大的优点 4 设计思路 .... 4 版权声明 .... 5 DWZ 研发组介绍 ....... 5 HTML 扩展...... 6 Ajax 链接扩展...

    DWZ框架使用的实例简单介绍

    DWZ框架使用的实例简单介绍

    DWZ框架使用手册

    DWZ框架使用手册，适合开发人员快速搭建web应用之用，内有非常好的交互性的界面，无刷新自动增加，删除功能，界面友好；

    DWZ使用说明

    DWZ使用说明DWZ使用说明DWZ使用说明DWZ使用说明DWZ使用说明

    DWZ框架1.4.4以及使用手册，入门指导

    DWZ框架dwz4j-springmvc dwz-ria-1.4.4 dwz-user-guide.swf DWZ框架使用的实例简单介绍.doc DWZ框架使用手册.pdf

    DWZ使用手册及视频下载

    包括dwz使用手册及视频教程 DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。 DWZ框架...

    ASP.NET DWZ+MVC使用实例

    源码中包含DWZ与MVC框架搭建，以及DWZ提示框使用，自定义函数，表单提交，数据分页，框架页面等实例。

    DWZ使用帮助文档

    DWZ使用帮助文档,可以适用于各种语言的前端富客户端框架

    DWZ文件+文档

    DWZ框架支持用html扩展的方式来代替javascript代码, 只要懂html语法, 再参考DWZ使用手册就可以做ajax开发. 开发人员不写javascript的情况下, 也能用ajax做项目和使用各种UI组件. 基本可以保证程序员不懂javascript...

    DWZ使用不可缺少

    本文档整理了DWZ框架的50个不可缺少 方法，详细的介绍了使用DWZ机JQuery。是业务开发人员不可或缺的页面编程的利器。

    dwz使用手册

    dwz使用手册，非常好的使用手册，方便新手学习，老手参考使用。是一套简单好用的富客户框架

    dwz 使用手册和详细介绍

    dwz是前端开发的框架集，熟练之后，很大程度上提高前端开发的效率。开发人员不需要很厉害的JS和CSS技术也能开发出效果非常炫。语言：html+CSS+jQuery+Ajax

    DWZ框架在ASP.Net中的运用

    DWZ框架在ASP.Net中的一些运用，DWZ框架在ASP.Net中的一些运用

    dwz用户使用手册.pdf

    DWZ使用jQuery可以非常方便的定制特定需求的UI组件, 并以jQuery插件的形式发布出来. 如有需要也可做定制化开发. 欢迎大家提出建议, 我们将在下一版本中进一步调整和完善功能． DWZ富客户端框架是开源项目, 可以免费...

    dwz使用文档

    dwz使用文档，能让你dwz掌握非常好，不容错过啊

    DWZ中文开发手册

    DWZ中文开发手册

    dwz框架 asp.net mvc3

    dwz框架 asp.net mvc3；dwz框架 asp.net mvc3；dwz框架 asp.net mvc3

    dwz开源web界面框架

    学习DWZ的建议 •通读DWZ文档，很多新手提的问题文档中都写了 •看demo每个组件演示效果和代码（留意组件html结构） •建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍 •对于...

Magicbox
Global site tag (gtag.js) - Google Analytics