`
agileai
  • 浏览: 59907 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    AEAI HR人力资源管理系统是数通畅联软件基于AEAI DP开发的开源Java Web系统

    AEAI HR人力资源管理系统是数通畅联软件基于AEAI DP开发的开源Java Web系统,用来协助管理公司人力、薪酬等事务, AEAI HR人力资源系统包括一些核心的人力资源管理业务功能,如:薪酬管理、考勤管理、绩效管理等模块...

    aeai crm 源码

    【aeai CRM源码】是一个基于Java开发的客户关系管理(CRM)系统,它提供了全面的业务流程管理和客户交互管理功能。此系统的核心目标是帮助企业更有效地管理客户数据,优化销售和服务流程,提升客户满意度,从而提高...

    agileai-aeaicrm-master.zip

    开源代码 agileai-aeaicrm-master.zip

    23 徐华博AeaiCRM思路分析.xmind

    23 徐华博AeaiCRM思路分析.xmind

    基于JavaScript的AEAI CRM客户关系管理系统源码

    该项目是一款基于JavaScript开发的AEAI CRM客户关系管理系统源码,包含1478个文件,涵盖477个GIF图片、230个Java文件、208个JavaScript文件、143个JSP文件、121个HTML文件、97个XML文件、68个CSS文件、65个PNG文件、...

    MAX197AEAI+T ADI芯片 电子元器件中文版规格手册.pdf

    MAX197AEAI+T ADI芯片电子元器件中文版规格手册 本资源为MAX197AEAI+T ADI芯片电子元器件中文版规格手册,旨在提供MAX197评估系统(EV系统)的详细信息。MAX197评估系统是一款完整、低成本的8通道数据采集系统,由...

    java自定义弹窗Demo

    java自定义弹窗Demo,主要代码: thisDialog = this; this.setTitle("提示"); this.setSize(300, 150); this.setModal(true); this.setLocationRelativeTo(c); actionL = new ActionListener...

    MAX197AEAI+ ADI芯片 电子元器件中文版规格手册.pdf

    **MAX197AEAI+ ADI芯片简介** MAX197AEAI+是一款由Analog Devices公司设计的12位数据采集系统(DAS),适用于各种电子元器件应用。这款芯片的独特之处在于它能够在单一的+5V电源下工作,并且能够处理跨越电源轨...

    AE创建Voronoi图.rar

    标题中的“AE创建Voronoi图”指的是在Adobe After Effects(简称AE)这款流行的视觉特效和动态图形软件中创建Voronoi图的过程。Voronoi图,也被称为Dirichlet域或Thiessen多边形,是一种几何构造,其中每个点都有一...

    arcengine鼠标点击地图弹窗显示属性,以及要素类型

    通过以上分析,我们可以了解到ArcEngine中实现鼠标点击地图弹窗显示属性的功能涉及到的原理与技术细节,以及如何进一步优化和完善这一功能。这对于从事GIS应用开发的人员来说是非常有用的参考资料。

    AE创建各种类型的featureclass代码.pdf

    AE 创建各种类型的 featureclass 代码 本文档主要介绍了如何使用 ArcGIS Engine(AE)创建各种类型的 featureclass,包括点、线、面等几何类型,以及带有自定义字段的 shapefile 的创建。 首先,需要了解 AE 中的 ...

    企业HR办公系统.zip

    一、开发此系统的目的: ...CREATE DATABASE IF NOT EXISTS aeaihr DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 2, 将aeaihr_mysql.sql导入到数据库中 3, 将hr.war放到tomcat目录/webapps/ 下, 重启tomcat

    西门子S7-300/400的Profibus-DP通信

    12. **导轨** (6ES7390-1AE80-0AA0 和 6ES7390-1AF30-0AA0) - 用于安装S7-300/400组件。 13. **电源供应** (6ES7307-1EA00-0AA0) - PS 307电源模块,提供24V DC输出。 14. **CPU模块** (6ES7315-2AG10-0AB0 和 6ES...

    ae脚本 创建摄像机+目标

    这个脚本不仅同时创建摄像机和目标物体,同时可以选择创建焦距参考点,旋转中心点和摄像机父物体,你不仅可以更方便直观地获得景深效果,而且可以自由控制摄像机的位置,极大地提高工作效率。 使用说明:首先确保...

    AE创建各种类型的featureclass代码

    ### AE 创建各种类型的 FeatureClass 代码详解 #### 标题:AE 创建各种类型的 FeatureClass 代码 #### 描述:介绍了 AE 创建各种类型的 FeatureClass 代码,值得一看。 #### 标签:AE C# featureclass ArcGIS ##...

    ae创建有背景的文本element

    "ae创建有背景的文本element"这个标题指的是在AE中制作一个具有背景的文本对象的过程,这通常用于增强文本在视频或动画中的视觉呈现。 首先,让我们深入了解一下如何在AE中创建一个带背景的文本元素。在AE中,你...

    适马 DP 系列数码相机DP1X 说明书.pdf

    适马DP系列数码相机,尤其是DP1X,是一款独特的便携式相机,它拥有与单反相机相媲美的图像描绘能力。DP1X是DP1的升级版,继承了DP1开创的摄影新标准,专注于真实光影和色彩的捕捉,为用户提供了丰富的细节表现。相机...

    AE创建遮罩和蒙版.docx

    本教程将详细介绍如何在AE中创建遮罩,以及利用遮罩进行动画制作。 首先,创建一个新的合成(Ctrl+N)是开始工作的基础。无论你是处理图片还是视频素材,遮罩都可以应用到这些层上。在时间线窗口中拖放你的素材,如...

Global site tag (gtag.js) - Google Analytics