国产jQuery UI框架 DWZ-RIA v1.3 Final版发布

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富客户端框架完全开源,可以免费获取全部源码。团队中的每个人都是开源的拥护者,都希望为中国软件开源事业尽自己的一份力量。 
国产jQuery UI框架 DWZ-RIA v1.3 Final版发布
项目地址: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”时必填


你可能感兴趣的:(dwz)