dwz框架解读

2019独角兽企业重金招聘Python工程师标准>>>

一、了解

　　概述：是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

　　目的：简单实用、扩展方便(在原有架构基础上扩展方便)、快速开发、RIA思路、轻量级

　　使用：用html扩展的方式来代替javascript代码

　　思路：根据官网页面样例，查看官方代码包，查阅相关子页面，参阅帮助文档，添加固定的标签属性语法

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

　　劣势：文档少，开发者少，共享资源少，帮助文档不易阅读

 

二、资料

　　官方地址(在线演示地址)：http://j-ui.com/ 或 http://www.duqn.com/

　　源码包下载地址：https://codeload.github.com/dwzteam/dwz_jui/zip/master

　　帮助文档：解压源码包--》dwz_jui-master\doc

　　视频讲解：http://pan.baidu.com/s/1bnngfqJ

　　

三、源码目录结构

　　

　　1.文件夹：

　　　　idea：构建代码发布生成的配置文件(不用理会)

　　　　bin：压缩了js文件夹里的dwz框架js文件代码与压缩工具

　　　　chart：图像化模块的js代码

　　　　demo：存储临时演示数据文件

　　　　doc：帮助文档

　　　　js：Dwz框架核心js代码库

　　　　themes：样式表CSS代码

　　　　uploadify：上传控件

　　　　xheditor：官网默认小图标样式

　　2.html文件：

　　　　index.html：主页面

　　　　...

　　　　xxxx.html：内容代码片段

　　　　...

　　3.配置文件：

　　　　dwz.frag.xml：初始化配置文件

 

四、Hellow World

　　1.导入以下依赖文件到工程(具体依赖关系，可以查看index.html所引用的依赖文件)

　　　　

　　2.启动服务，访问index.html

　　　　页面效果：

　　　　

 

五、模块化复用

　　在官方访问地址里找到你需要的页面效果：

　　　　

　　如上所示：页面内容区域所展示的样式效果代码片段就在demo_page1.html文件里

 

 

对象结构图如下：

DWZ最大的特点是使用html扩展的方式来代替javascript代码，而不是使用传统的面向对象来开发javascript库；
html扩展方式的特点，简单、容易扩展、基于jQuery；
javascript库特点，思维方式更接近应用程序，以组件的方式调用；但是实现复杂，扩展不方便；

 

核心JS介绍：
dwz.core.js
提供了程序入口；
对jQuery做了针对DWZ的扩展，基础数据类型做了扩展；

 

dwz.ui.js
提供了全局回调方法；
在DWZ初始化时候回调了全局方法initEnv()，做了界面初始化；其中，自定义插件可以在initUI()方法中扩展；

 

dwz.ajax.js
提供了对ajax操作的全局工具方法；

 

dwz.regional.zh.js
提供了英文转中文的语言汉化实现；

 

常用组件列表：
1 链接（a）、对话框（dialog）、选项卡布局（navTab）组件
格式如下：

属性说明：
target：

   ajax：发送ajax请求并返回到容器；

   ajaxTodo：在ajax基础上增加一个选择对话框（需要title属性）；

   navTab：返回到类似选项卡组件上；

   dialog：返回到对话框组件上；

   dwzExport：导出文件用；targetType（dialog，navTab）默认是navTab；当前的容器的pagerForm表单会一并提交；title指定提示信息；
rel：执行调用者的指针（navTab与dialog默认是_blank）；重新刷新页面可以使用rel属性，也可以使用服务端返回json中的navTabId值来动态传递；
navTab相关属性：
 fresh：表示重复打开navTab时是否重新加载数据；默认true；
 external：为external="true"或者href是外网连接时，以iframe方式打开navTab页面；
dialog相关属性：
 Max：属性表示此dialog打开时默认最大化；
 mask：表示打开层后将背景遮盖；
 maxable: 是否可最大化；
 minable: 是否可最小化；
 mixable: 是否可最大化 ；
 resizable: 是否可变大小；
 drawable: 是否可拖动 ；
 width: 打开时的默认宽度 ；
 height: 打开时默认的高度；
 width,height: 分别打开dialog时的宽度与高度；
 fresh: 重复打开dialog时是否重新载入数据，默认值true；
 close: 关闭dialog时的监听函数，需要有boolean类型的返回值；
 param:close监听函数的参数列表，以json格式表示，例{msg:’message’}；
callback：回调函数；

 

2 面板（panel）组件
格式如下：

属性说明：
close：关闭状态，默认；
collapse：可以折叠；
defH：高度（单位：px），默认是实际高度；
minH：最小高度（单位：px）；

 

3 选项卡面板（tabs）组件
格式如下：

属性说明：
eventType，click：鼠标单击，hover：鼠标移动；
currentIndex，默认是0（0～n）；

 

4 提示窗口
确认提示框
alertMsg.confirm("您修改的资料未保存，请选择保存或取消！", {
 okCall: function(){
  $.post(url, {accountId:accountId}, DWZ.ajaxDone, "json");
 },
 cancelCall : function() {}
});
成功提示框，alertMsg.correct('您的数据提交成功！')
错误提示框，alertMsg.error('您提交的数据有误，请检查后重新提交！', [options])
警告提示框，alertMsg.warn('您提交的数据有误，请检查后重新提交！', [options])
信息提示框，alertMsg.info('您提交的数据有误，请检查后重新提交！', [options])
options对象属性：
okName：确定按钮名称；
okCal：确认按钮回调；
cancelName：取消按钮名称；
cancelCall：取消按钮回调；
keyCode：键盘按键定义，参考DWZ.keyCode；

 

5 表格（table）
格式如下：

属性说明：
layoutH：父div高度 - 当前layoutH = 实际的高度，最小是50px；

6 表单提交
格式如下：

class：定义是否验证表单；
onsubmit：提交时指定回调函数，默认调用DWZ.ajaxDone(json)；若指定了提示信息，则会显示提示信息；
内置回调函数：
navTabAjaxDone：选项卡方式时候的默认回调；都会先调用DWZ.ajaxDone(json)，来显示提示信息；
 callbackType="closeCurrent"，关闭当前窗口；
 callbackType="forward"，重定向当前窗口到forwardUrl；
 callbackType="forwardConfirm"，提示confirmMsg，确定的话重定向到forwardUrl，否则关闭；

dialogAjaxDone：对话框方式时候的默认回调；都会先调用DWZ.ajaxDone(json)，来显示提示信息；
 callbackType="closeCurrent"，关闭当前窗口；

转载于:https://my.oschina.net/meng527/blog/1827026