AEAI DP创建弹窗

1 背景概述

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

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

2 场景介绍

2.1 弹出小窗

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

2.2 展示详细信息

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

2.3 弹窗里面嵌套弹窗

2.4 弹窗展示图片

对缩略图进行放大显示。

3 举例实现 

3.1 总体介绍

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

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

3.2 详细步骤

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

 2 创建弹窗页面相关文件

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

 

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

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

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

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

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

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

4 个人总结

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

5 附件说明

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

 

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