FLEX与EOS集成开发培训手册(共39张).pptx

1、FLEX、EOS开发培训目录 本次培训的目标 EOS体验开发 EOS的进阶开发 EOS、Flex集成开发本次培训的目标v 如何EOS用开发SOA应用v 明确如何使用Flex开发web界面v 了解EOS如何与Flex集成开发目录 本次培训的目标 EOS体验开发 EOS的进阶开发 EOS、Flex集成开发EOS体验开发-Hello WorldEOS体验开发-项目创建6EOS体验开发-构件包设计7EOS体验开发-页面流开发8EOS体验开发-页面开发9EOS体验开发-逻辑流开发10EOS体验开发-完善页面流和页面11EOS体验开发-测试运行测试运行12EOS体验开发-测试运行测试运行13Flex体验开

2、发-Hello World目录 本次培训的目标 EOS体验开发 EOS的进阶开发 EOS、Flex集成开发EOS的进阶开发的进阶开发-表单查询开发表单查询开发表单查询开发表单查询开发-数据准备数据准备脚本 参见备注表单查询开发表单查询开发-构件包设计构件包设计表单查询开发表单查询开发-数据建模数据建模表单查询开发表单查询开发-页面流开发页面流开发表单查询开发表单查询开发-页面开发页面开发表单查询开发表单查询开发-逻辑流开发逻辑流开发表单查询开发表单查询开发-完善页面流开发完善页面流开发表单查询开发表单查询开发-完善页面开发完善页面开发表单查询开发表单查询开发-测试运行测试运行目录 本次培训的目

3、标 EOS体验开发 EOS的进阶开发 EOS、Flex集成开发FLEX集成开发集成开发案例描述案例描述本例以之前做的EOSTripping项目为基础，将之前jsp页面换为flex的开发界面，通过flex来调用逻辑流实现数据交互查询功能详细的开发步骤如下详细的开发步骤如下1.配置EOS环境2.新建Flex项目3.配置Flex环节4.HelloWorld 开发5.员工查询开发6.练习FLEX集成开发集成开发-EOS环境配置环境配置1.打开 EOSTripping项目，部署BlazeDs在相关配置，将BlazeDs的jar包复制到项目的lib文件夹下，配置文件放到WEB-INF下的lfex文件夹下，

4、如下图：BlazeDS：它是基于服务器的java远程调用（Remote）和web消息（Message）的通讯技术，使得运行在后台的java应用程序和运行在前端的flex应用程序间能够相互互相通讯。BlazeDS包含的.jar包为及配置为件：flex-messaging-common.jar、flex-messaging-core.jar、flex-messaging-opt.jar、flex-messaging-proxy.jar、flex-messaging-remoting.jar配置文件为：messaging-config.xml、proxy-config.xml、remoting-co

5、nfig.xml、services-config.xmlFLEX集成开发集成开发-EOS环境配置环境配置2.修改remoting-config.xml，配置远程调用逻辑：注意：注意：default-channels节点配置了flex调用后台的时的协议通道，其中my-amf 对应services-config.xml配置文件中节点channel-definition的id属性值（channel-definition对应的amf通道一般有my-amf、my-secure-amf、my-polling-amf），当以https的方式访问时，一般会将ref的值配置位my-secure-amf，推送模式

6、时一般配置为my-polling-amf。destination节点配置了flex与java通讯时调用的具体java实现类，FlexInvoker.java提供了一个invoke方法，在后面会讲到。com.eos.access.client.FlexInvoker application FLEX集成开发集成开发-EOS环境配置环境配置3.修改web.xml，配置flex监听器及servlet，增加如下内容：注意：注意：services.configuration.file对应在/WEB-INF/flex/services-config.xml路径，它为services-config.xml所

7、在项目中WEB-INF中路径，不要写错。flex.messaging.HttpFlexSession MessageBrokerServletMessageBrokerServletflex.messaging.MessageBrokerServletservices.configuration.file/WEB-INF/flex/services-config.xml1MessageBrokerServlet/messagebroker/*FLEX集成开发集成开发-配置配置FLEX项目项目FLEX集成开发集成开发-helloworld开发开发HelloWord程序程序-界面开发界面开发Hel

8、loWord程序程序-界面开发界面开发2.修改clickHandler方法：0)id_return.text=results0;);tip:1.remoteObject.destination 值为flexObject，对应remoting-config.xml文件中destination的id属性值2.invoke 为之前配置FlexInvoker.java类提供的方法，第一个参数为session对象，第二个为需要调用的逻辑流，第三个参数为逻辑流需要的参数3.Invoke在解析逻辑流时，参数是以数组形式组织的，因此在传入逻辑流参数时，需要用到Array4.变量名bizx对应的值为EOS中逻辑

9、流的全称员工查询示例员工查询示例此示例，仍旧以之前EOS项目EOSTripping为原型，将jsp页面换为flex页面，来实现数据查询功能员工查询示例员工查询示例-Flex界面开发界面开发1.Style引用了一个外部样式文件，assets/skin/css/style.css，此样式文件通过右键点击项目src目录，“新建-CSS 文件”，所有标签的样式都可写入此文件，引入样式文件后通过标签的styleName属性来指定，sytel.css内容如下：.panelvertical-gap:0;background-color:#FFFFFF;cornerRadius:0;header-height

10、:30;highlightAlphas:0.15,0;headerColors:#C2D8DF,#C2D8DF;borderAlpha:1;borderColor:#d8d8d8;borderThicknessLeft:1;borderThicknessTop:0;borderThicknessBottom:1;borderThicknessRight:1;dropShadowEnabled:false;2.Panel是一个带有标题的容器，通过title属性指定标题名称，如,panle的layout属性也经常 会用到，表示它的子标签的布局方式，值 有absolute、vertical、horizontal，此处选择horizontal值，表示所有直接子标签以水平的方式排列。3.DataGrid：表格控件，headerHeight表示表格头的高度Columns：表格列控件，通过DataGridColumn来表示,dataField表示此列要显示的数据对象，对应DataGrid中的dataProvider属性的集合对象中的值，headerText表示显示的中文名称。员工查询示例员工查询示例Thanks!演讲完毕，谢谢观看！