AEAI DP创建弹窗

1 背景概述

      在平时我们浏览页面时,经常会看见这样的应用情景,点击某个按钮或点击某个页面区域时,会弹出一个浮动窗口,像这类的功能,在一些开发的项目中很常见,笔者发现使用AEAI DP应用开发平台可以很容易的实现这样的功能。下面我为大家展示一些常见的弹窗场景,以及演示一些在DP中创建简单弹窗的方法。

注意:学习该文档前需要对AEAI DP产品有一定基础。

2 场景介绍

2.1 弹出小窗

可以在窗口中进行多选,点击确定将选择的值,回填到父页面

2.2 展示详细信息

对列表数据,进行详细的显示。

AEAI DP创建弹窗

2.3 弹窗里面嵌套弹窗

AEAI DP创建弹窗

2.4 弹窗展示图片

对缩略图进行放大显示。

AEAI DP创建弹窗

3 举例实现 

3.1 总体介绍

在dp中一般都是一个jsp对应一个handler,就是说一个页面有一个控制器,在配置文件HandlerModule.xml中可以看见,如下图:

AEAI DP创建弹窗

对于弹窗来说它也是一个jsp页面,不管页面大小它始终是一个jsp页面,所有弹窗也需要有对应的控制器(handler),我们需要做的就是把弹窗的jsp页面创建好,同时将创建一个对应的handler文件,在配置好HandlerModule.xml文件后,在需要弹窗的页面(下面称此页面为父页面)调用一个弹窗的方法,将这个窗口弹出即可,具体步骤如下:

3.2 详细步骤

1 创建数据库pop_deom并执行sql基础脚本,打开dp设计器导入工程(基础代码)基础代码,并在设计器中配置好,具体步骤如下图:

AEAI DP创建弹窗

AEAI DP创建弹窗

AEAI DP创建弹窗

AEAI DP创建弹窗

 2 创建弹窗页面相关文件

将下面的弹窗jsp文件考入父页面所在目录。

AEAI DP创建弹窗

AEAI DP创建弹窗

创建相应的handler文件,将下面的handler文件拷贝父页面控制器所在目录。

AEAI DP创建弹窗

AEAI DP创建弹窗

3 打开对这两个文件进行配置,配置一个bean标签,对弹窗页的handlerId命名为PopPage。

4 打开父页面对添加一个弹窗方法,用来触发弹窗。

AEAI DP创建弹窗

5 为了弹窗后页面显示美观,在弹窗页面中添加一个图片用来显示,同时为该页面添加一个关闭弹窗(关闭自己)的js方法。

AEAI DP创建弹窗

6 将刚才添加过和修改过的文件部署(基础操作就不用图说明了)。

7 浏览器中运行查看效果。

AEAI DP创建弹窗

AEAI DP创建弹窗

4 个人总结

       在AEAI DP中弹窗页面不管是大是小,仍然对应一个控制器,jsp页面与handler一般都是一一对应的,上文只是针对这一部分一个简单的弹窗演示,在真实场景中,弹窗中的信息都是从后台数据库中取出来的,有兴趣的朋友可以尝试在弹窗的控制器中构造数据来显示本地图片,想要了解更多可以访问数通畅联官网www.agileai.com进行关注。

5 附件说明

AEAI DP创建弹窗

将附件解压到工程路径下,启动hotserver服务器,用dp设计器导入工程并部署,工程上右键-miscdp应用工具-浏览运行,预览样例代码,如下图:

AEAI DP创建弹窗

附件及文档下载地址:http://pan.baidu.com/s/1o8JgN7G

h1

相关推荐