zoukankan      html  css  js  c++  java
  • DWZ在APS.NET WebForm中的使用(一)

    1.前言

    在最近的项目开发中,使用到了前端框架DWZ。DWZ是一款较为优秀的后台管理界面框架,但官方发布的文档确实令人汗颜,简单几页了事,有点对自己的产品不负责任了。同时感谢网友石头的热心帮助,在我这种菜鸟遇到困难时给予极大的帮助。

    2.介绍

    引用官方描述:DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。

    其好处在于可以减少项目开发中Jquery的编写时间,将重心放在业务开发上。

    3.使用

    由于篇幅太长不利于阅读,计划将讲述内容一分为二。本贴主要介绍DWZ搭建和使用,下一帖阐述个人开发所遇到的问题。

    1.将DWZ签入到自己的项目中

    做到这点很容易,首先去官网下载最新的DWZ包:https://code.csdn.net/dwzteam/dwz_jui,然后重命名文件夹后,拷贝到VS中,如图3.1.1

    image

    (图3.1.1)

    为了避免冲突并保持dwz文件的完整性,建议再另外构建如imags、js等文件夹。

    2.构建首页

    找到首页示例,将对应代码拷入Index.aspx中,修改相应的路径,便成功搭建,如图3.2.1。

    也许你会有如下疑问:1.是否有必要引用这么多js文件? 2.js初始化代码是什么意思? 3.标签中的target和rel是什么意思?

    下面我将逐个解答:

    1.是否有必要引用这么多js文件?

    答案是否定的。

    示例中的js是为了展示所有功能,实际开发中,如果项目不涉及的就没必要引用,比如富文本编辑。

    此框架有个特点:主页面引用,其他子页面均可享受引用。原因在于子页面均以div的形式内嵌在主页面,故能达此效果。

    回归话题,细心查看你会发现,引用分为4个方面(css,外部js,框架js,语言定义)。如果确定项目中没有富文本和文件上传功能,大可以将如图3.2.2红色区域剔除。图3.2.3所示为DWZ框架所需js,第一次见到时惊呼 My God。其实,这是DWZ开发小组为了开源,将每种功能分别封装成一个js,方便大家调试。你会在dwz的bin文件夹下发现dwz.mini.js,dwz.mini.js是将上述js集中并压缩成一个js。在项目开发中,我们可以将dwz.mini.js直接替换图3.2.3所示js,因为我们基本不需要修改js。如果必须修改某些js,我们也可以通过bin文件下的gzjs.bat重新打包dwz.mini.js。

    友情提示:如果直接从bin文件将dwz.mini.js引入是没有任何效果的,您可以将其拷贝到js文件夹中。

    image

    (图3.2.1)

    image

    (图3.2.2)

    image

    (图3.2.3)

    2.js初始化代码是什么意思?

    如果用一句话概括:初始化并定义框架所需资源。如图3.2.4所示,①:加载XML,此XML保存了DWZ框架初始所需的所有配置,也可以理解为配置文件。②:定义登录页面URL,当验证身份失效时,用于重新登录。③:定义状态码,表示请求的结果④:定义分页参数⑤:可以理解成键值对,statusCode即为③,message表示对状态的描述,以json的形式返回。⑥:hideMode:navTab组件切换的隐藏方式,支持的值有’display’,’offsets’负数偏移位置的值,默认值为’display’⑦:调试模式⑧:回调函数⑨:调用初始化函数⑩:加载界面主题

    image

    (图3.2.4)

    3.标签中的target和rel是什么意思?

    target:页面展示模式,navTab以选项卡的方式展示页面,dialog以弹出层的形式展示。

    rel:可以理解成页面的ID,当通过js代码去指定刷新某页面时,这个就尤为重要了。在实际开发中建议为每个界面起个不同的ID,也显的规范些。

    3.标签控件的使用

    标签的使用可以结合demo示例和官方文档,基本没有多大问题。

    下面一章,将介绍一下开发过程中需注意的问题。

  • 相关阅读:
    年末反思
    Flink运行时架构
    Phoenix 启动报错:Error: ERROR 726 (43M10): Inconsistent namespace mapping properties. Cannot initiate connection as SYSTEM:CATALOG is found but client does not have phoenix.schema.
    Clickhouse学习
    Flink简单认识
    IDEA无法pull代码到本地,Can't Update No tracked branch configured for branch master or the branch doesn't exist.
    第1章 计算机系统漫游
    简单的 Shell 脚本入门教程
    开源≠免费 常见开源协议介绍
    MySQL 视图
  • 原文地址:https://www.cnblogs.com/zhnagqi/p/3933387.html
Copyright © 2011-2022 走看看