DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级
DWZ支持用html扩展的方式来代替javascript代码, 基本可以保证程序员不董javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开化.
国内很多程序员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/
DWZ论坛 http://bbs.dwzjs.com
DWZ官方微博 http://weibo.com/dwzui
DWZ官方微群 http://q.weibo.com/587328/invitation=11TGXSt-148c2
在线演示地址 http://demo.dwzjs.com
视频教程 http://v.it-edu.cn/viewCourseDetail.do?courseId=50362
学习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开发后台
http://code.google.com/p/dwz/downloads/detail?name=dwz-ria-1.3Final.zip
Changelist:
1. 修复 combox 联动菜单重复发送 ajax 请求问题
2. 调整 layoutH=“xx”的高度根据含有 class=”layoutBox”的父容器 div 动态更新
3. 修复 navTab 打开外部页面和 iframe 方式打开时,浏览器前进后退问题
<a target="navTab" href="http://www.baidu.com">外部页面</a>
<a target="navTab" href="url" external=”true”>iframe 方式打开</a>
4. 调整 lookup、suggest,添加联动效果。自定义查找带回主键 lookupPk, 可选项默认为 id。
5. 添加多选查找带回 multLookup
6. 整理 lookup、suggest、主从结构文档,请参考1.3Final 版 dwz-ria/doc/dwz-user-guide.chm
升级注意:
index 页面中<div >添加 class“layoutBox”改成<div >
然后更新 js、css、dwz.frag.xml
-----------------------------------------------------------------------------------------------------------------
suggest+lookup+ 主从结构文档
dwz.database.js 主要功能是数据库操作相关的界面组件。主要分为2部分,分别是查找带回和主从结构。
查找带回:lookup、suggest、lookup 附件(文件上传带回)、多选查找带回 multLookup 几个 jQuery 插件,以及$.bringBack、$.bringBackSuggest 两个配套查找带回工具方法
主从结构:itemDetail
suggest+lookup+ 主从结构请参照 demo:界面组件 à 常用组件 à suggest+lookup+ 主从结构
查找带回
lookup、suggest 都支持联动效果,比如类似选省份、城市联动效果。支持自定义查找带回主键 lookupPk, 可选项默认为 id。
lookup 通过复选框选择多个值查找回带示例:
请参照 dwz-ria 中 demo/database/ db_widge.html 和 demo/database/dwzOrgLookup2.html 页面
<button type="button" multLookup="orgId" warn="请选择部门">选择带回</button> <input type="checkbox" name="orgId" value="{id:'1', orgName:'技术部', orgNum:'1001'}"/> <input type="checkbox" name="orgId" value="{id:'2', orgName:'人事部', orgNum:'1002'}"/> <input type="checkbox" name="orgId" value="{id:'3', orgName:'销售部', orgNum:'1003'}"/>
主从结构
针对主表和从表的数据库结构设计,实现主从结构复合表单,动态添加、删除从表字段。
请参照 dwz-ria 中 demo/database/ db_widge.html
<table addButton="新建从表1条目" width="100%"> <thead> <tr> <th type="text" name="items.itemString" size="12" field>从字符串</th> <th type="text" name="items.itemInt" size="12" field>从整数</th> <th type="text" name="items.itemFloat" size="12" field>从浮点</th> <th type="date" name="items.itemDate" size="12">从日期</th> <th type="date" format="yyyy-MM-dd HH:mm:ss" name="items.itemDataTime" size="16">从日期时间</th> <th type="lookup" name="dwz.items.org.orgName" lookupGroup="items.org" lookupUrl="xxxUrl" suggestUrl="xxxUrl" suggestFields="orgName" size="12">部门名称</th> <th type="enum" name="items.itemEnum" enumUrl="xxxUrl" size="12">从枚举</th> <th type="attach" name="dwz.items.attachment.fileName" lookupGroup="items.attachment" lookupUrl="xxxUrl" size="12">从附件</th> <th type="del" width="60">操作</th> </tr> </thead> <tbody></tbody> </table>
<table>标签中 class=”itemDetail” 必须用于关联主从结构 js 效果。addButton=”xxx”可选默认为”Add New”用来定义添加从表按钮的文字
<th>标签中:type 必填项,type 类型有 text、date、lookup、enum、attach、del
name 必填项,定义子表字段名称
size 可选项,默认 size=”12”,定义从表 input 字段的长度
fieldClass 可选项,用来定义表 input 字段的 class
lookupGroup 当 type=”lookup” 或 type=”attach”时必填
lookupUrl 当 type=”lookup”时 lookupUrl 和 suggesUrl 至少填一项,当 type=”attach”时必填
suggestUrl 当 type=”lookup”时 lookupUrl 和 suggesUrl 至少填一项
suggestFields 当 type=”lookup”并且有 suggestUrl 时必填
enumUrl 当 type=”enum”时必填