FLEX、EOS开发培训,目录,本次培训的目标 EOS体验开发 EOS的进阶开发 EOS、Flex集成开发,本次培训的目标,如何EOS用开发SOA应用 明确如何使用Flex开发web界面 了解EOS如何与Flex集成开发,目录,本次培训的目标 EOS体验开发 EOS的进阶开发 EOS、Flex集成开发,EOS体验开发-Hello World,EOS体验开发-项目创建,6,EOS体验开发-构件包设计,7,EOS体验开发-页面流开发,8,EOS体验开发-页面开发,9,EOS体验开发-逻辑流开发,10,EOS体验开发-完善页面流和页面,11,EOS体验开发-测试运行,12,EOS体验开发-测试运行,13,Flex体验开发-Hello World,目录,本次培训的目标 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.xml,FLEX集成开发-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方法，在后面会讲到。, 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所在项目中WEB-INF中路径，不要写错。, flex.messaging.HttpFlexSession MessageBrokerServlet MessageBrokerServlet flex.messaging.MessageBrokerServlet services.configuration.file /WEB-INF/flex/services-config.xml 1 MessageBrokerServlet /messagebroker/* ,FLEX集成开发-配置FLEX项目,FLEX集成开发- helloworld开发,HelloWord程序-界面开发,HelloWord程序-界面开发,2.修改clickHandler方法： 0) id_return.text=results0; ); tip: 1.remoteObject.destination 值为flexObject，对应remoting-config.xml文件中destination的id属性值 2.invoke 为之前配置FlexInvoker.java类提供的方法，第一个参数为session对象，第二个为需要调用的逻辑流，第三个参数为逻辑流需要的参数 3. Invoke在解析逻辑流时，参数是以数组形式组织的，因此在传入逻辑流参数时，需要用到Array 4.变量名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属性指定标题名称，如 ,panle的layout属性也经常 会用到，表示它的子标签的布局方式，值 有absolute 、vertical、horizontal，此处选择horizontal值，表示所有直接子标签以水平的方式排列。 3. DataGrid：表格控件，headerHeight表示表格头的高度 Columns：表格列控件，通过DataGridColumn来表示, dataField表示此列要显示的数据对象，对应DataGrid中的dataProvider属性的集合对象中的值，headerText表示显示的中文名称。,员工查询示例,Thanks!,