`
sunbin
  • 浏览: 349833 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

《DWZ笔记一》DWZ简介及其使用

    博客分类：
  • dwz
 
阅读更多
 

《DWZ笔记一》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可以看到:

《DWZ笔记一》DWZ简介及其使用 - heavengate - Heavengate的博客
2、解压后可以看到DWZ的各个文件:
《DWZ笔记一》DWZ简介及其使用 - heavengate - Heavengate的博客
 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文件夹中的内容复制进去：

《DWZ笔记一》DWZ简介及其使用 - heavengate - Heavengate的博客
2）本项目中，后台的系统主界面位于admin文件夹中，所以将dwz中的index.html复制进入admin文件夹中，并做相应修改：
《DWZ笔记一》DWZ简介及其使用 - heavengate - Heavengate的博客
 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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=7"/>
<title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>

<linkhref="../dwz/themes/default/style.css"rel="stylesheet"type="text/css"media="screen"/>
<linkhref="../dwz/themes/css/core.css"rel="stylesheet"type="text/css"media="screen"/>
<linkhref="../dwz/themes/css/print.css"rel="stylesheet"type="text/css"media="print"/>
<linkhref="../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]-->

<scriptsrc="../dwz/js/speedup.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/jquery-1.7.1.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/jquery.cookie.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/jquery.validate.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/jquery.bgiframe.js"type="text/javascript"></script>
<scriptsrc="../dwz/xheditor/xheditor-1.1.12-zh-cn.min.js"type="text/javascript"></script>
<scriptsrc="../dwz/uploadify/scripts/swfobject.js"type="text/javascript"></script>
<scriptsrc="../dwz/uploadify/scripts/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>

<scriptsrc="../dwz/js/dwz.core.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.util.date.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.validate.method.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.regional.zh.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.barDrag.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.drag.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.tree.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.accordion.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.ui.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.theme.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.switchEnv.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.alertMsg.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.contextmenu.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.navTab.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.tab.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.resize.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.dialog.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.dialogDrag.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.sortDrag.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.cssTable.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.stable.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.taskBar.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.ajax.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.pagination.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.database.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.datepicker.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.effects.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.panel.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.checkbox.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.history.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.combox.js"type="text/javascript"></script>
<scriptsrc="../dwz/js/dwz.print.js"type="text/javascript"></script>
<!--
<script src="../dwz/bin/dwz.min.js" type="text/javascript"></script>
-->
<scriptsrc="../dwz/js/dwz.regional.zh.js"type="text/javascript"></script>

<scripttype="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文件：
《DWZ笔记一》DWZ简介及其使用 - heavengate - Heavengate的博客
 
运行成功后，之后和服务器的交互只是数据交互, 其它的页面使用也只需要页面碎片，就是<body></body>中的部分。
分享到：
| 《DWZ笔记五》联动菜单
评论
发表评论

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

相关推荐

    DWZ框架及使用教程

    本教程将深入讲解DWZ框架及其使用方法。 首先，DWZ框架的核心特性在于它提供了一套完整的前端解决方案，包括页面布局、表单处理、数据展示、导航菜单、对话框等常见的Web应用需求。这些组件均遵循一致的设计模式，...

    dwz-demo-1.1.6RC1.zip_DEMO_dwz php_dwz-demo_dwz-ria_php dwz

    这个压缩包包含了一个名为“dwz-demo”的项目，是用于展示和学习dwz框架功能的实例。 【描述】提到，这个框架是一个JavaScript框架系统，特别适合用于开发后台管理系统。描述中强调了其易学性，鼓励用户尝试单击...

    dwz的Demo和chm使用手册

    《DWZ的Demo和CHM使用手册》是一个针对DWZ框架的综合学习资源包，它包含了一个演示示例（Demo）以及一个以CHM（Compiled Help Manual）格式编译的API文档。这篇详解将深入剖析这两个核心部分，帮助读者更好地理解和...

    dwz框架 asp.net mvc3

    DWZ框架，全称为“Dynamic Web Zone”，是一款基于JavaScript的前端UI框架，主要用于构建富互联网应用程序（RIA）。它提供了丰富的组件库，包括表格、对话框、菜单、按钮、表单验证等，大大简化了前端开发工作，使得...

    DWZ使用说明

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

    dwz框架官网实例

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

    DWZ使用手册及视频下载

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

    DWZ富客户端框架使用手册

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

    DWZ中文开发手册

    3. **阅读官方文档**：DWZ提供了详尽的使用手册和API文档，是学习框架功能和最佳实践的第一手资料。 4. **实践与实验**：通过创建小项目或实验不同的功能，加深对DWZ框架特性的理解和掌握。 #### DWZ框架的核心组件...

    dwz 使用手册和详细介绍

    **DWZ 使用手册和详细介绍** DWZ，全称为“Dynamic Web Zone”，是一个高效、易用且功能丰富的前端开发框架，特别适用于快速构建企业级Web应用。这个框架集合了HTML、CSS、jQuery和Ajax等技术，使得即使对于...

    DWZ框架在ASP.Net中的运用

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

    dwz使用文档

    本使用文档将带你深入理解DWZ的各个方面，帮助你更好地掌握这一强大的工具。 1. **DWZ框架概述** DWZ的核心理念是简化前端开发，通过预定义的CSS样式和JavaScript组件，开发者可以快速构建响应式的页面布局。其...

    thinkphp3_dwz

    标题“thinkphp3_dwz”指的是一个基于ThinkPHP 3.0框架与DWZ UI集成的项目，主要用于实现角色管理功能。在Web开发中，ThinkPHP是一个流行的PHP框架，而DWZ（Dynamic Web Zone）是一个前端jQuery UI框架，提供了一...

    DWZ资源合集

    【DWZ资源合集】是针对DWZ框架的一份综合性的资源集合，包含了用户指南以及相关的项目源码。DWZ，全称为“Dynamic Web Zone”，是一个基于jQuery的前端UI库，专为中国的Web开发者设计，旨在提供一套高效、简洁、易用...

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

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

    DWZ文件+文档

    DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替...

    dwz - 简单实用国产jQuery UI框架 - DWZ富客户端框架(jUI)

    DWZ（Design What You Want）是一款基于jQuery的国产富客户端框架，主要针对Web应用的界面设计和交互体验，被称作“jUI”。这个框架旨在简化网页开发过程，提供了一系列组件和工具，使得开发者能够快速构建功能丰富...

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