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

FLEX、EOS开发培训目录本次培训的目标EOS体验开发EOS的进阶开发EOS、Flex集成开发本次培训的目标如何EOS用开发SOA应用明确如何使用Flex开发web界面了解EOS如何与Flex集成开发目录本次培训的目标EOS体验开发EOS的进阶开发EOS、Flex集成开发EOS体验开发-HelloWorldEOS体验开发-项目创建6EOS体验开发-构件包设计7EOS体验开发-页面流开发8EOS体验开发-页面开发9EOS体验开发-逻辑流开发10EOS体验开发-完善页面流和页面11EOS体验开发-测试运行12EOS体验开发-测试运行13Flex体验开发-HelloWorld目录本次培训的目标EOS体验开发EOS的进阶开发EOS、Flex集成开发EOS的进阶开发-表单查询开发表单查询开发-数据准备脚本参见备注表单查询开发-构件包设计表单查询开发-数据建模表单查询开发-页面流开发表单查询开发-页面开发表单查询开发-逻辑流开发表单查询开发-完善页面流开发表单查询开发-完善页面开发表单查询开发-测试运行目录本次培训的目标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文件夹下，如下图：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-config.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’，推送模式时一般配置为my-polling-amf。destination节点配置了flex与java通讯时调用的具体java实现类，FlexInvoker.java提供了一个invoke方法，在后面会讲到。<?xmlversion="1.0"encoding="UTF-8"?><serviceid="remoting-service"class="flex.messaging.services.RemotingService"><adapters><adapter-definitionid="java-object"class="flex.messaging.services.remoting.adapters.JavaAdapter"default="true"/></adapters><default-channels><channelref="my-amf"/></default-channels>

<!--调用逻辑流--><destinationid="flexObject"><properties><source>com.eos.access.client.FlexInvoker</source><scope>application</scope></properties></destination></service>FLEX集成开发-EOS环境配置3.修改web.xml，配置flex监听器及servlet，增加如下内容：注意：services.configuration.file对应在/WEB-INF/flex/services-config.xml路径，它为services-config.xml所在项目中WEB-INF中路径，不要写错。<!--EOS6withflex--><listener> <listener-class>flex.messaging.HttpFlexSession</listener-class></listener><!--thisisconfigureforEOS6withflex--><!--MessageBrokerServlet--><servlet> <servlet-name>MessageBrokerServlet</servlet-name> <display-name>MessageBrokerServlet</display-name> <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> <init-param> <param-name>services.configuration.file</param-name> <param-value>/WEB-INF/flex/services-config.xml</param-value> </init-param> <load-on-startup>1</load-on-startup></servlet> <servlet-mapping> <servlet-name>MessageBrokerServlet</servlet-name> <url-pattern>/messagebroker/*</url-pattern></servlet-mapping>FLEX集成开发-配置FLEX项目FLEX集成开发-helloworld开发HelloWord程序-界面开发HelloWord程序-界面开发2.修改clickHandler方法：<mx:Script><![CDATA[importmx.rpc.events.ResultEvent;importmx.rpc.remoting.mxml.RemoteObject;privatevarbizx:String="“;privatefunctionclickHandler(event:MouseEvent):void{varremoteObject:RemoteObject=newRemoteObject();remoteObject.destination="flexObject“;//invoke方法的参数varuser:Object={userId:"",userName:""};varsession:Object=newObject();session.userObject=user;//bizx逻辑流的参数argsvarargs:Array=newArray();var_text:String=id_input.text==“”?"null":id_input.text;//如果为空，赋为默认值args.push(_text);//调用后台逻辑remoteObject.invoke(session,bizx,args);//成功后调用逻辑remoteObject.addEventListener(ResultEvent.RESULT,function(event:ResultEvent):void{varresults:Array=ArrayUtil.toArray(event.result.data);if(results.length>0){id_return.text=results[0];}});}]]></mx:Script>tip:1.remoteObject.destination值为flexObject，对应remoting-config.xml文件中destination的id属性值2.invoke为之前配置FlexInvoker.java类提供的方法，第一个参数为session对象，第二个为需要调用的逻辑流，第三个参数为逻辑流需要的参数3.Invoke在解析逻辑流时，参数是以数组形式组织的，因此在传入逻辑流参数时，需要用到Array4.变量名bizx对应的值为EOS中逻辑流的全称员工查询示例此示例，仍旧以之前EOS项目EOSTripping为原型，将jsp页面换为flex页面，来实现数据查询功能员工查询示例-Flex界面开发1.Style引用了一个外部样式文件，assets/skin/css/style.css，此样式文件通过右键点击项目src目录，“新建-CSS文件”，所有标签的样式都可写入此文件，引入样式文件后通过标签的styleName属性来指定，sytel.css内容如下：.panel{vertical-gap:0;background-color:#FFFFFF;cornerRadius:0;header-height: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属性指定标题名称，如<mx:Paneltitle=“查询条件”layout=“horizontal“width=“90%”height=“300”styleName=“panel”>,panle的layout属性也经常会用到，表示它的