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示例和官方文档,基本没有多大问题。

 

 

 

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

你可能感兴趣的:(webform)