FLEX与EOS集成开发培训手册

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.0encoding=UTF-8?serviceid=remoting-serviceclass=flex.messaging.services.RemotingServiceadaptersadapter-definitionid=java-objectclass=flex.messaging.services.remoting.adapters.JavaAdapterdefault=true//adaptersdefault-channelschannelref=my-amf//default-channels!--调用逻辑流--destinationid=flexObjectpropertiessourcecom.eos.access.client.FlexInvoker/sourcescopeapplication/scope/properties/destination/serviceFLEX集成开发-EOS环境配置3.修改web.xml，配置flex监听器及servlet，增加如下内容：注意：services.configuration.file对应在/WEB-INF/flex/services-config.xml路径，它为services-config.xml所在项目中WEB-INF中路径，不要写错。!--EOS6withflex--listenerlistener-classflex.messaging.HttpFlexSession/listener-class/listener!--thisisconfigureforEOS6withflex--!--MessageBrokerServlet--servletservlet-nameMessageBrokerServlet/servlet-namedisplay-nameMessageBrokerServlet/display-nameservlet-classflex.messaging.MessageBrokerServlet/servlet-classinit-paramparam-nameservices.configuration.file/param-nameparam-value/WEB-INF/flex/services-config.xml/param-value/init-paramload-on-startup1/load-on-startup/servletservlet-mappingservlet-nameMessageBrokerServlet/servlet-nameurl-pattern/messagebroker/*/url-pattern/servlet-mappingFLEX集成开发-配置FLEX项目FLEX集成开发-helloworld开发HelloWord程序-界面开发在Application标签中输入显示标签、文本输入框、提交按钮并保存，如下：mx:Applicationxmlns:mx==horizontalfontSize=12minWidth=955minHeight=600backgroundColor=#FFFFFFmx:Labeltext=请输入/mx:TextInputwidth=150/mx:Buttonlabel=提交//mx:Applicationtip：Application：是flex开发的入口标签，是所有flex控件显示入口；常用的layout属性，表示子标签的布局方式，值有absolute、vertical、horizontal，此处选择horizontal值，表示所有直接子标签以垂直的方式排列。Label：文本显示标签，通过text属性，设置需要显示的内容。TextInput：文本输入框。Button：按钮标签，添加click事件交互。HelloWord程序-界面开发1.到目前为止，flex程序界面基本开发完成，但要和后台EOS程序集成，还需要添加相应的事件，打开HelloWorld.mxml文件，增加mx:Script![CDATA[]]/mx:Script标签，用来添加as代码：?xmlversion=1.0encoding=utf-8?mx:Applicationxmlns:mx==horizontalfontSize=12minWidth=955minHeight=600backgroundColor=#FFFFFFmx:Script![CDATA[privatefunctionclickHandler(event:MouseEvent):void{}]]/mx:Scriptmx:Labeltext=请输入/mx:TextInputid=id_inputwidth=150/mx:Buttonlabel=提交click=clickHandler(event)/mx:Labelid=id_return//mx:ApplicationTip:1.给Button标签添加click事件，通过“alt+/”可以自动给出提示。2.标签的id属性，可以在as代码中直接使用，代表标签在当前页的一实例对象，比如获取TextInput的值，可以通过调用：id_input.text得到，同样赋值也可以通过id_input.text=“赋值”。2.修改clickHandler方法：mx:Script![CDATA[importmx.rpc.events.ResultEvent;importmx.rpc.remoting.mxml.RemoteObject;privatevarbizx:String=cn.chinaclear.sh.bpm.helloworld.helloworld.helloworld.biz“;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.length0){id_return.text=results[0];}});}]]/mx:Scripttip:1.remoteObject.destination值为flexObject，对应remoting-config.xml文件中destination的id属性值2.invoke为之前配置FlexInvoker.java类提供的方法，第一个参数为session对象，第二个为需要调用的逻辑流，第三个参数为逻辑流需要的参数3.Invoke在解析逻辑流时，参数是以数组形式组织的，因此在传入逻辑流参数时，需要用到Array4.变量名bizx对应的值为EOS中逻辑流的全称员工查询示例此示例，仍旧以之前EOS项目EOSTripping为原型，将jsp页面换为flex页面，来实现数据查询功能员工查询示例-Flex界面