Dwz(J-UI)框架--入门

http://www.cnblogs.com/chenyongsai/p/4933982.html

Dwz(J-UI)框架--入门

一、了解

  概述:是中国人自己开发的基于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文件里

六、数据交互

  1.表单提交

    提交格式:

      默认提交:<Form onsubmit="return validateCallback(this);" action=‘...‘ method=‘...‘>

      navTab类型页面提交:<Form onsubmit="return validateCallback(this,navTabAjaxDone);" action=‘...‘ method=‘...‘>

      dialog类型页面提交:<Form onsubmit="return validateCallback(this,dialogAjaxDone);" action=‘...‘ method=‘...‘>

    服务器返回数据:

      json:{

      "statusCode":"200",

      "message":"操作成功",

      "navTabId":"",

       "rel":"",

       "callbackType":"closeCurrent",

           "forwardUrl":""

      }

      提示:

        callbackType如果是closeCurrent就会关闭当前tab,只有callbackType="forward"时需要forwardUrl值

        navTabAjaxDone这个回调函数基本可以通用了,如果还有特殊需要也可以自定义回调函数,如果表单提交只提示操作是否成功, 就可以不指定回调函数. 框架会默认调用DWZ.ajaxDone()

  ...

  详细情况,请查看在线帮助文档http://j-ui.com//doc/dwz-user-guide.pdf

  

时间: 2024-08-07 21:18:09

Dwz(J-UI)框架--入门的相关文章

[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed

谷歌移动UI框架Flutter入门

引言 作为Android开发人员,很有必要学习一下Flutter,那么Flutter是什么呢?它到底有什么作用呢?我们一一来揭晓. Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的.它也是构建未来的Google Fuchsia应用的主要方式.Fuchsia是谷歌继Android和Chrome OS之后开发的第三个系

专刊文章 - Web UI框架引领J2EE新开发模式 代码生成器+手工merge半智能开发

前言:随着WEB UI框架(EasyUI/Jquery UI/ExtJS/DWZ)等的逐渐成熟,系统界面逐渐实现统一化,代码生成器也可以生成统一规范的界面!代码生成+手工MERGE半智能开发将是新的趋势,单表数据模型和一对多数据模型的增删改查功能直接生成使用,可节省50%工作量,快速提高开发效率!!! jeecg微云快速开发平台 - 云桌面展示  [J2EE  Code Generation]一款基于代码生成器的J2EE智能开发框架. JAVA编程有很多重复机械代码,生成器可以帮助解决50%的重

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

10 个打造 React.js App 的最佳 UI 框架

在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒.Have Fun ! 1. Material-UI 基于谷歌 Material Design 设计规范的 React 组件 此外,它还是 React 的第一个 UI 套件.Material-UI具备你所需要的所有组件(甚至更多),以及可配置性极高的预定义调色板和<MuiThemeProvider>,帮助你为应用程序定制相应的

【设计和开发一套简单自己主动化UI框架】

!有兴趣的朋友请直接移步Github,本帖子已经不做更新,框架的详细的实现已经做了优化和代码整理,本文仅仅介绍了详细的设计思路! 目标:编写一个简单通用UI框架用于管理页面和完毕导航跳转 终于的实现效果请拉到最下方查看 框架详细实现的功能和需求 载入.显示,隐藏,关闭页面,依据标示获得对应界面实例 提供界面显示隐藏动画接口 单独界面层级.Collider.背景管理 依据存储的导航信息完毕界面导航 界面通用对话框管理(多类型Message Box) 便于进行需求和功能扩展(比方,在跳出页面之前加入

【1】认识 “DWZ富客户端框架“

1.DWZ官方介绍 DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用.扩展方便.快速开发.RIA思路.轻量级. 2.概述 DWZ框架支持用HTML扩展的方式来代替JavaScript代码,只要懂HTML语法, 再参考DWZ使用手册就可以做Ajax开发. 开发人员不写JavaScript的情况下,也能用Ajax做项目和使用各种UI组件. 基本可以保证程序员不懂JavaScript

比较不错的UI框架

在网上找到的一个不错应用开发的ui框架,有自定义android项目底部任务栏和实用的Fragment切换四个页面基本可以包括一个简单项目的整体架构,例子只是纯布局,没有任何的功能实现,有需要的朋友可以研究一下. 下载地址:http://www.dwz.cn/BHUF4 运行截图:    

【原创】NIO框架入门(四):Android与MINA2、Netty4的跨平台UDP双向通信实战

概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty4(Netty5已经被取消开发了:详见此文). 本文中,服务端将分别用MINA2和Netty4进行实现,但在你实际的项目中服务端实现只需选其一就行了.本文中的Demo同时