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富客户端框架是开源项目,可以免费获取源码.希望有多的开发人员使用,共同推进国内整体ajax开发水平.

在线演示地址 http://j-ui.com/

在线文档http://j-ui.com//doc/dwz-user-guide.pdf

Google Code下载: http://code.google.com/p/dwz/

设计思路

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

支持HTML扩展方式来调用DWZ组件.

标准化Ajax开发,降低Ajax开发成本.

学习DWZ的建议

刚接触DWZ的人可能感觉DWZ文档太少、入门困难，原因都是没有掌握正确的学方法。建议按下面的步骤来学习DWZ框架：

·        通读DWZ文档，很多新手提的问题文档中都写了。

·        看demo每个组件演示效果和代码（留意组件html结构）。

·        建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一firebug介绍。

·        对于初学者不建议看DWZ全部源码，但还是非常有必要看看dwz.ui.js和dwz.ajax.js

·        可以从google code下载dwz_thinkphp版本，结合php后台去理解DWZ和服务器端的交互方式

DWZ区别于其它JS框架，最大的优点

·        完全开源，源码没有做任何混淆处理，方便扩展

·        CSS和js代码彻底分离，修改样式方便

·简单实用，扩展方便，轻量级框架，快速开发

·仍然保留了html的页面布局方式

·支持HTML扩展方式调用UI组件，开发人员不需写js

·只要懂html语法不需精通js，就可以使用ajax开发后台

·基于jQuery，UI组件以jQuery插件的形式发布，扩展方便

 

版权声明

·DWZ框架的源代码完全开放，在Apache License 2.0许可下,可免费应用于个人或商业目的。

·欢迎各大网站转载下载版本。

·禁止把DWZ框架包装成类外一个UI框架出售。

DWZ团队介绍

DWZ研发组开发人员目前是3人（兼职）

杜权从事UI设计工作，有10年以上UI设计经验。做过至少1500个网站的UI设计。

吴平主要做Java web开发，兼ajax开发。一直从事电子商务、企业建站平台开发工作。目前就职于支付宝应用架构师职位。

张慧华主要做Java web开发，兼ajax开发。以前也是电子商务、企业建站平台开发工作。从2009年4月开始从事建筑能效评估IT解决方案。目前从Java开发转型做HTML5手机APP。

以前我们做的大部份java项目都用了Ajax，项目开发过程中经常自己做一些UI组件和界面效果。我们对RIA非常感兴趣，业余时间就做了DWZ富客户端框架。DWZ框架中的UI组件都是从我们做过的大量web项目中总结出来的，都是一些非常实用的UI组件。

联系方式

杜权(UI设计) d@j-ui.com

吴平(Ajax开发) w@j-ui.com

张慧华(Ajax开发) z@j-ui.com

 

官方微博(欢迎加入) http://weibo.com/dwzui

jQuery.DWZ-jUI-1群(满员) 107983317

jQuery.DWZ-jUI-2群(满员) 69611933

jQuery.DWZ-jUI-3群(满员) 20866231

jQuery.DWZ-jUI-4群(满员) 369203

jQuery.DWZ-jUI-5群(满员) 85031937

jQuery.DWZ-jUI-6群(欢迎加入) 172602882

jQuery.DWZ-jUI-7群(满员) 210322217

jQuery.DWZ-jUI-8群(欢迎加入) 139067378

合作电话：010-52897073

 

HTML扩展

支持HTML扩展方式来调用DWZ组件

Ajax链接扩展

<a href=”xxx”target=“ajax” [rel=“boxId”]>

示例: <a href="w_alert.html" target="ajax" rel="container">提示窗口</a>

当前navTab中链接ajax post扩展

<a href="user.do?method=remove" target="ajaxTodo">删除</a>

或

<a href="user.do?method=remove" target="ajaxTodo" title="确定要删除吗?">删除</a>

Title为可选项，如果设置，点击后将调用alertMsg.confirm与用户交互确认或取消，Title值为提示信息.Target值为ajaxTodo时会自动关联如下JS。

$("a[target=ajaxTodo]",$p).each(function(){
$(this).click(function(event){
var$this=$(this);
vartitle=$this.attr("title");
if(title){
alertMsg.confirm(title,{
okCall:function(){
ajaxTodo($this.attr("href"));
}
});
}else{
ajaxTodo($this.attr("href"));
}
event.preventDefault();
});
});

dialog链接扩展

<a href=”xxx”target=“dialog” [rel=“dialogId”]>

A所指向页面将会在dialog弹出层中打开，rel标识此弹出层的ID，rel为可选项。

Html标签扩展方式示例:

<a href="w_dialog.html" target="dialog" rel="page2">弹出窗口</a>

或

<ahref="demo_page1.html"target="dialog"[max=true, mask=true, maxable=true, minable=true, resizable=true,drawable=true]rel="dlg_page1"title="[自定义标题]"width="800"height="480">打开窗口一</a>

 

Max 属性表示此dialog打开时默认最大化, mask表示打开层后将背景遮盖.maxable: dialog 是否可最大化，

minable: dialog 是否可最小化，

mixable: dialog是否可最大化

resizable: dialog 是否可变大小

drawable: dialog 是否可拖动

width:   dialog 打开时的默认宽度

height: dialog 打开时默认的高度

width,height分别打开dialog时的宽度与高度．

fresh:重复打开dialog时是否重新载入数据，默认值true,

close: 关闭dialog时的监听函数，需要有boolean类型的返回值，

param: close监听函数的参数列表，以json格式表示，例{msg:’message’}

 

 

关闭窗口：

在弹出窗口页面内放置<buttonclass="close"value="关闭"></button>即可。

 

JS调用方式示例:

$.pdialog.open(url,dlgId,title);
或
$.pdialog.open(url,dlgId,title,options);
 
options:{width:100px,height:100px,max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true,close:”function”, param:”{msg:’message’}”},所有参数都是可选项。

 

关闭dialog层：

$.pdialog.close(dialog); 参数dialog可以是弹出层jQuery对象或者是打开dialog层时的dlgId.
或者
$.pdialog.closeCurrent(); 关闭当前活动层。
 
$.pdialog.reload(url, {data:{}, dialogId:"", callback:null})
刷新dialogId指定的dialog，url：刷新时可重新指定加载数据的url, data：为加载数据时所需的参数。

navTab链接扩展

<a href=”xxx”target=“navTab” [rel=“tabId”]>

示例:

<ahref="url"target="navTab">默认页面</a>

<ahref="url"target="navTab"rel="page1"title="自定义标签名" fresh="false">自定义页面</a>

<ahref="url"target="navTab"external="true">iframe方式打开</a>

 

target=navTab:自动关联调用navTab组件

rel: 为navtab的ID值，后续可以用来重载该页面时使用，如当前页新增或删除数据可以通过该ID进行通知JS重载。注意rel的值区分大小写.

fresh: 表示重复打开navTab时是否重新加载数据

external: 为external="true"或者href是外网连接时，以iframe方式打开navTab页面

Js调用

navTab.openTab(tabid,url, { title:”New Tab”,fresh:false, data:{}});

其中data:{} json格式的数据

Tab组件扩展

开发人员不需写任何javacsript,只要使用下面的html结构就可以.

<divclass="tabs">
<divclass="tabsHeader">
<divclass="tabsHeaderContent">
<ul>
<liclass="selected"><ahref="#"><span>标题1</span></a></li>
<li><ahref="#"><span>标题2</span></a></li>
</ul>
</div>
</div>
<divclass="tabsContent"style="height:150px;">
<div>内容1</div>
<div>内容2</div>
</div>
<divclass="tabsFooter">
<divclass="tabsFooterContent"></div>
</div>
</div>

Accordion组件

<divclass="accordion" [fillSpace=”xxxKey”]>
<divclass="accordionHeader">
<h2><span>icon</span>面板1</h2>
</div>
<divclass="accordionContent"style="height:200px">
内容1
</div>
<divclass="accordionHeader">
<h2><span>icon</span>面板2</h2>
</div>
<divclass="accordionContent">
内容2
</div>
<divclass="accordionHeader">
<h2><span>icon</span>面板3</h2>
</div>
<divclass="accordionContent">
内容3
</div>
</div>

容器高度自适应

容器高度自适应, 只要增加扩展属性layoutH=”xx”,单位是像素.

LayoutH表示容器内工具栏高度. 浏览器窗口大小改变时容器高度自适应,但容器内工具栏高度是固定的,需要告诉js工具栏高度来计算出内容的高度.

示例:

<div class=”layoutBox”>

<div layoutH=“150”>内容</div>

</div>

注意： layoutH=“150”的高度是根据含有class=”layoutBox”的父容器div动态更新的

CSS  Table

原生html + CSS实现，无js处理效果、最简单、最基本、性能最高的table。

在table标签上增加class="list",table外面包一个<divlayoutH="xx">实现table固定高度

<divlayoutH="120">
<tableclass="list"width="98%">
<thead>
<tr>
<thcolspan="2">客户信息</th>
<thcolspan="2">基本信息</th>
<thcolspan="3">资料信息</th>
</tr>
<tr>
<thwidth="80">客户号</th>
<thwidth="100">客户名称</th>
<thwidth="100">客户划分</th>
<th>证件号码</th>
<thalign="right"width="100">信用等级</th>
<thwidth="100">企业性质</th>
<thwidth="100">建档日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府咿呀哟</td>
<td>政府单位</td>
<td>0-0001027766351528</td>
<td>四等级</td>
<td>政府单位</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
</div>

Table扩展

在table标签上增加class="table"

<tablelayoutH="170"class="table">
<thead>
<tr>
<thwidth="80">客户号</th>
<thwidth="100">客户名称</th>
<thalign="right">证件号码</th>
<thwidth="100">建档日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府</td>
<td>0-0001027766351528</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>

在线编辑器

在textarea标签上增加class="editor"

示例:

<textareaclass="editor"name="description"rows="15"cols="80">内容</textarea>

分页组件

分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的,不是存js做的分页。

因为如果数据量很大，比如有好几百页，存js分页就是悲剧了，存js分页是必须一次载入所有数据，性能很慢。

分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage

框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的

<formid="pagerForm"action="xxx"method="post">
<inputtype="hidden"name="pageNum"value="1"/>/><!--【必须】value=1可以写死-->
<inputtype="hidden"name="numPerPage"value="20"/><!--【可选】每页显示多少条-->
<inputtype="hidden"name="orderField"value="xxx"/><!--【可选】查询排序-->
<inputtype="hidden"name="orderDirection"value="asc"/><!--【可选】升序降序-->
 
<!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。
也可以在searchForm上设置属性rel=”pagerForm”，js框架会自动把searchForm搜索条件复制到pagerForm中-->
<inputtype="hidden"name="name"value="xxx"/>
<inputtype="hidden"name="status"value="active"/>
……
</form>

分页组件处理分页流程：

1)pagerForm中缓存了当前的查询条件，加上一个pageNum字段

2)点击分页时动态修改pageNum,重新提交pagerForm

分页组件使用方法：

<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>

测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：

<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="2"></div>

参数说明:

targetType:navTab或dialog，用来标记是navTab上的分页还是dialog上的分页

totalCount:总条数

numPerPage:每页显示多少条

pageNumShown:页标数字多少个

currentPage:当前是第几页

注意：

服务器端返回一个页面碎片，其中包括pagerForm, table,和分页的div。只要把这个页面碎片组装好就行。

 

ajaxTodo扩展

navTab页面上a链接添加target="ajaxTodo"后框架会自动绑定相应的ajax处理。【参考dwz.ajax.js】

可选a链接扩展属性[title="xxx"] 提示确认信息

示例：

<ahref="/news.do?method=remove&id=${item.id}"target="ajaxTodo"title="确定要删除吗?">>删除</a>
<ahref="/news.do?method=publish&id=${item.id}"target="ajaxTodo">发表</a>

框架自动绑定js

$("a[target=ajaxTodo]",$p).each(function(){
$(this).click(function(event){
ajaxTodo($(this).attr("href"));
event.preventDefault();
});
});

dwzExport列表数据导出

链接添加target="dwzExport"后框架会自动绑定相应的ajax处理。

targetType="navTab"根据当期navTab页面中的pagerForm参数导出,默认

targetType="dialog"根据当期dialog页面中的pagerForm参数导出

title="实要导出这些记录吗?"确认提示信息，可选项
示例：

<ahref="doc/dwz-team.xls"target="dwzExport"targetType="dialog"title="实要导出这些记录吗?">导出EXCEL</a>

Input alt扩展

示例：

<inputname="xxx"alt="请输入客户名称"/>

Tree扩展

<ulclass="tree [treeFolder treeCheck [expand|collapse]]"oncheck="kkk">
<li><ahref="#"target="navTab"rel="main"tname="name"tvalue="value"checked="true">第一级菜单项 A</a>
<ul>
<li><ahref="#"target="dialog"rel="dialog1"tname="name"tvalue="value"checked="true">第二级菜单项 A </a></li>
<li><ahref="#">第二级菜单项 B </a></li>
<li><ahref="#">第二级菜单项 C </a>
<ul>
<li><ahref="#">第三级菜单项 A </a></li>
<li><ahref="#">第三级菜单项 B </a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">第一级菜单项 B</a></li>
</ul>

树结构是按<ul>,<li>的嵌套格式构成，将最顶级的<ul>以class=”tree”标识即可。treeFolder, treeCheck, expand|collapse则为可选的。

treeFolder:在所有树节点前加上Icon图标

treeCheck:在所有树节点前加上checkbox，此时需要在<a>加上三个扩展属性tname=””, tvalue=””, checked,其中tname与tvalue对应该checkbox的name与value属性

checked表示checkbox的默认状态是否checked.

expand与collapse：expand表示树的所有第一级节点默认是展开状态，collapse则表示所有第一级节点默认为折叠状态，当expand与collapse都没有时默认则会展开第一个节点。

 扩展属性oncheck是自定义函数,用来接收点击checkbox时返回值,当点击非子树节点checkbox时返回数据格式为:{checked:true|false,items:{name:name, value:value}},当点击了树节点checkbox时,此子树节点下所有的checkbox都将选中,同时返回此子树节点下所有的checkbox的值,格式为{checked:true|false, items:{ {name:name, value:value}, {name:name, value:value}……}}