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

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框架的核心特性在于它提供了一套完整的前端解决方案，包括页面布局、表单处理、数据展示、导航菜单、对话框等常见的Web应用需求。这些组件均遵循一致的设计模式，...

    DWZ使用帮助文档

    - **补充说明和常见问题**: 官方文档中还提供了许多关于使用框架时可能遇到的问题及其解决方案的详细介绍，这些资料对于初学者来说非常宝贵。 总结而言，DWZ框架以其独特的设计理念和丰富的功能集，在众多前端框架...

    dwz框架官网实例

    在“dwz框架官网实例”中，我们可以深入学习和理解DWZ框架的核心特性及其实际应用。这个实例是在Eclipse这样的集成开发环境中经过验证的，确保了其在真实开发环境中的可行性和稳定性。 1. **框架结构** DWZ框架的...

    DWZ中文开发手册

    DWZ框架文档中详细列举了开发者可能遇到的常见问题及其解决策略，涵盖了从XML加载错误到浏览器兼容性问题的多个方面。这些问题的解决不仅有助于排除开发过程中的障碍，也是对框架深度理解的体现。 #### 版本控制与...

    DWZ+富客户端框架使用手册_IT168文库.pdf

    ### DWZ富客户端框架使用手册知识点解析 #### 概述 DWZ富客户端框架是一款由中国人自主开发的、基于jQuery的Ajax RIA（Rich Internet Applications）开源框架。该框架的设计初衷在于提供一种简单且易于扩展的方式...

    dwz框架及api文档

    DWZ框架是一款基于JavaScript...总的来说，DWZ框架及其API文档为开发者提供了构建高效、互动的Web应用的强大工具。通过深入理解和熟练运用这些资源，开发者可以极大地提高开发效率，创造出符合现代用户需求的应用程序。

    DWZ框架在ASP.Net中的运用

    本篇文章将深入探讨DWZ框架在ASP.NET中的应用及其优势。 首先，DWZ框架的核心特性在于其强大的UI组件库，包括表格、对话框、表单、按钮、下拉菜单等，这些组件具有良好的交互性和响应性，能够帮助开发者快速创建出...

    DWZ框架C#應用模板

    下面我们将深入探讨这些技术及其在DWZ框架中的应用。 首先，**DWZ框架**（Design Without ZIndex）是一个基于AJAX的开源富互联网应用程序（Rich Internet Application，RIA）框架，主要应用于网页设计和开发。它...

    dwz 学习文档

    对于初学者而言，建议从基础的HTML和jQuery学起，之后逐步深入理解DWZ框架的使用方法及其内部机制。 #### DWZ框架的独特之处 相较于其他JavaScript框架，DWZ的最大优点在于其对HTML的扩展能力——通过简单的HTML...

    dwz-ria.rar_dwz

    下面将对DWZ框架及其相关特性进行详细解析。 1. **DWZ框架概述** DWZ框架主要基于AJAX技术，旨在提供一套完整的前端解决方案，包括页面布局、表单处理、数据交互、UI组件等，以提升Web应用的用户体验和交互性。它...

    DWZ富客户端框架使用手册

    4. **常见问题及解决**：列举了一些常见的使用问题及其解决方案，帮助用户排除故障。 5. **DWZ版本升级**：列出了各个版本的主要更新内容和改进点，便于用户了解最新进展。 #### 版权声明 - DWZ框架遵循Apache ...

    DWZ富客户端框架，使用教程

    - **DWZ框架简介**：DWZ是一款由国人自主研发的富客户端框架，它基于jQuery实现了Ajax RIA（Rich Internet Applications）功能，旨在为Web应用提供更丰富的用户体验。 - **设计目标**： - **简单实用**：DWZ框架的...

    DWZ 富客户端框架使用手册.pdf

    - **通读文档**：对于初学者而言，全面了解DWZ提供的官方文档是非常必要的，文档中包含了大量实际操作中可能遇到的问题及其解决方案。 - **观察Demo**：通过研究内置的各种组件演示实例，可以更直观地理解各个组件的...

    spring+ibatis+dwz小项目

    3. **视图资源**：如`jsp`或`html`页面，其中使用DWZ的标签和脚本来渲染用户界面。 4. **资源文件**：如CSS样式表、JavaScript文件、图片等，用于美化和增强网页功能。 5. **数据库脚本**：创建数据库和表的SQL脚本...

    DWZ——国内一款开源框架（JUI）

    DWZ文档中还详细记录了一些常见的问题及其解决办法，例如如何在DWZ中集成第三方jQuery插件、解决兼容性问题等，这些都是开发者在实际应用过程中可能会遇到的问题，通过查阅文档可以获得相应的解决方案。 综上所述，...

    dwzteam-dwz_group-master

    在DWZ框架中，可以集成第三方验证码库或使用其内置的验证码生成器，确保每次请求的验证码都是随机且难以自动识别的。 5. 文件结构与目录：dwz_group文件夹包含了项目的源代码，包括控制器、模型、视图、公共函数、...

    dwz+struts 框架

    DWZ与Struts是两个在Web开发中广泛应用的框架，它们结合使用能够构建高效且可维护的Web应用程序。DWZ全称为“Design for Web Zone”，是一个基于jQuery的前端UI框架，而Struts是Apache软件基金会下的一个开源MVC...

    spring mvc+dwz

    1. **依赖注入（Dependency Injection, DI）**：Spring MVC 使用DI来管理对象及其依赖关系，使得代码更易于测试和维护。 2. **模型-视图-控制器（Model-View-Controller, MVC）**：通过分离业务逻辑、数据和用户界面...

    Shiro + dwz + spring mvc + mybatis 实现的通用后台系统

    下面将详细介绍这些技术及其在系统中的作用。 **Spring MVC** Spring MVC是Spring框架的一个模块，主要用于构建Web应用程序的模型-视图-控制器（MVC）架构。它提供了一个灵活的请求映射机制，便于处理HTTP请求，并...

    dwz的deomo

    【DWZ框架详解及其Demo应用】 DWZ，全称“Design for Web Zen”，是一个基于Ajax技术的开源JavaScript框架，主要用于简化Web开发中的前端交互和页面动态更新。该框架旨在提高开发效率，提供丰富的UI组件，使得...

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