國產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富客戶端框架完全開源，可以免費獲取全部源碼。團隊中的每個人都是開源的擁護者，都希望為中國軟件開源事業盡自己的一份力量。
項目地址：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”時必填