Flex 入门培训

1,592 views
1,469 views

Published on

A document for flex study

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,592
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flex 入门培训

  1. 1. Flex 入门培训
  2. 2. 课程纲要 参考资料及安装文件 培训目的 对 flex 有一个基本认识 flex 工程的建立及在 web 工程中建立 flex 应用 能够通过 HTTPService 方法和 RemoteObject 方法实现 flex 和 java 的交互 培训内容 Flex 工程的建立 在 web 工程中建立 flex 应用 通过 HTTPService 方法实现和 java 的交互 通过 RemoteObject 方法实现和 java 的交互 HTTPService 方法和 RemoteObject 的异同
  3. 3. 参考资料及安装文件 1 、 Flex Bulider3 的 Eclipse 插件在 cvs 上 toolsflex2FB3_WWEJ_Plugin_partN.rar 2 、 cvstoolsflex 入门培训目录下有: blazeds.rar -- 使用 blazeds 所需文件 flashplayer_10_ax_debug.exe --flash 插件 Flex 3 Language.chm --flex 帮助手册 myJava.rar -- 示例项目 flex 入门培训 .ppt -- 入门培训 ppt
  4. 4. 什么是 flex ( 1 )、 Flex 是一个针对企业级富互联网应用的表示层解决方案。 ( 2 )、 Flex 是一种应用程序框架。 ( 3 )、 Flex 系列产品包括编译工具和 IDE ,通过编写 MXML 和 ActionScript 代码, 用编译器来生 swf 文件,使用浏览器的 Flash player 插件就可以进行观看。 。
  5. 5. Flex 工程的建立 1 、安装完 flex builder 的 eclipse 的插件后,打开 eclipse,file  new  project 打开新建工程向导,如下图,选择 Flex Project:
  6. 6. Flex 工程的建立 2 、点击 next 进入下面的页面:
  7. 7. Flex 工程的建立 3 、点击 next 进入如下页面,选择输出目录:
  8. 8. Flex 工程的建立 4 、点击 next 进入如下页面,如下图 :
  9. 9. Flex 工程的建立 5 、点击 finally 后,则 flex 工程建立完成,如下图
  10. 10. Flex 工程的建立—修改输出目录 1 、工程建立好之后修改输出目录,在工程目录上点击右键选择 Properties ,如下图:
  11. 11. Flex 工程的建立—修改输出目录 2 、选择 flex build path 设置输出目录
  12. 12. 在 web 工程中建立 Flex 应用 1 、在已经建立好的 web 应用上,点击右键,选择 Add Flex Project Nature, 如下图:
  13. 13. 在 web 工程中建立 Flex 应用 2 、选择之后弹出如下对话框:
  14. 14. 在 web 工程中建立 Flex 应用 3 、点击 next ,选择文件输出目录,此处设置为当前工程的 WebRootFlex 下,如下图:
  15. 15. 在 web 工程中建立 Flex 应用 4 、点击 finish 之后, web 工程结构如下图:
  16. 16. Flex 应用说明 1 、 使用 : mxml 是 flex builder 可视化工具生成的。但实际使用的不是 .mxml 文件,而是 flex builder 编译器对 .mxml 进行编译生成的 .swf 文件;相当于 java 的类,编写的是 .java 文件,实际使用的是 .class 。 2 、 生成 .swf 时间 : Flex 应用 ( 即 mxml 文件 ) 在编译的时候就会由 flex builder 编译器对应用进行编译生成和应用同名的 .swf 文件。 4 、 生成文件目录 :生成的文件所在目录是我们设置的” Output folder:” 的值。
  17. 17. 通过 HTTPService 和 java 交互 需求: Flex 通过发送 HTTPService 请求读取 xml 文件,将文件信息展示在 flex 控件上,这些信息是可以修改的,通过点击按钮将修改后的信息通过 HTTPService 方法发送给后台的 jsp 进行处理 。
  18. 18. 客户端 .swf 服务器端 .mxml .swf 编译时生成 jsp 访问 jsp 在本例中,当 swf 加载完成后我们让它通过 HTTPService 方法发送 http 请求,读取 xml 文件 请求成功后会触发 HTTPService 的 result 事件,该事件调用我们定义的方法,得到数据 修改数据 点击提交按钮 点击按钮通过 HTTPService 方法向 jsp 页面发送 HTTP 请求将数据传给 jsp 页面 数据展现,当服务器传过来的值发生变化时,控件上绑定的值会自动刷新 Xml 文件 Jsp 文件 Jsp 对提交过来的数据处理 从 xml 文件读取的数据,在客户端被修改
  19. 19. 通过 HTTPService 和 java 交互 实现: 1 、 HttpTest.mxml 是 flex 应用实现 HTTPService 的请求和发送,数据的展示。 2 、 httpTest.jsp 是对 HttpTest.mxml 生成的 swf 文件在页面上的展示。 3 、 getHttpData.jsp 是接收 Flex 文件发送的请求,并对传过来的数据进行处理。 4 、 test.xml 是 Flex 文件要读取的 xml 。
  20. 20. 通过 RemoteObject 方法实现和 java 的交互 需求: flex 有一个输入框、按钮和 lable ,在输入框中输入信息后点击按钮,可以通过 RemoteObject 方法调用 java 类中的方法。通过该类中的方法对数据进行处理并返回,将处理后的数据显示在 lable 上。
  21. 21. 客户端 jsp 服务器端 文本框数据被改变 swf 通过 RemoteObject 方法调用类中的方法,并将输入的值作为方法的参数,需要 remoting-config.xml 文件中找到类的映射; Java 类 数据加工 输入数据 点击提交按钮 BlazeDs flex/remoting-config.xml 为了 RemoteObject 方法能够调用类,此处需要配置 如果调用成功会触发 RemoteObject 方法的 result 事件,该事件会调用我们定义的方法得到处理后数据 数据展现,当服务器传过来的值发生变化时,控件上绑定的值会自动刷新 .mxml .swf 编译时生成
  22. 22. 通过 RemoteObject 方法实现和 java 的交互 使用 RemoteObject 所需环境: 1 、 jdk 需要 1.5 及以上 2 、通过使用 BlazeDs 作为中间层来实现 Flex 和 java 类的通信。 BlazeDs 的使用: 1 、如果是一个新的应用,可以直接将 blazeds.rar 解压后 blazeds 文件夹下的内容全部放到 webRoot 下。 2 、如果和已有的应用集成,则需要将 web.xml 集成在一起。
  23. 23. 通过 RemoteObject 方法实现和 java 的交互 实现步骤: 1 、首先根据需求实现类的编写 2 、在 blazeds 中实现类的映射 3 、完成 flex 应用 4 、通过 jsp 页面引用 flex 生成的 swf 文件,查看效果
  24. 24. 通过 RemoteObject 方法实现和 java 的交互 BlazeDs 实现类的映射: 在 WebRootWEB-INFflexremoting-config.xml 里面加上下面这段设置 ( 本示例 ) : <destination id="Hello" > <properties> <source> runqian.HelloWorld </source> </properties> </destination> 其中 id=“hello” 是自己对类起的映射名称 <source/> 节点是类路径
  25. 25. 通过 RemoteObject 方法实现和 java 的交互 Flex 通过 RemoteObject 调用 java: <mx:RemoteObject id="ro" destination="Hello" result="resultHandler(event)" /> 其中 id=“ro” 这个 id 的值是自己定义,相当于要调用的类的一个对象名称 其中 destination=“Hello” 这儿 destination 的值必须是在 remoting-config.xml 中定义的 id 值 其中 result=“resultHandler(event)” 是结果响应事件,调用类中的方法后会自动调用这个方法。
  26. 26. 通过 RemoteObject 方法实现和 java 的交互 实现: 1 、 runqianHelloWorld.java 是 Flex 应用要调用的类,实现对 Flex 传进来的数据在后端处理并返回处理后的数据。 2 、在 WebRootWEB-INFflexremoting-config.xml 中添加类的映射,该映射起到了 Flex 的 RemoteObject 方法和 java 类通讯的桥梁作用。 3 、 myJava.mxml 是 Flex 应用,实现前端页面的展示。通过 RemoteObject 方法对类中方法的调用,并且能得到方法的返回数据。 4 、 DsTest.jsp 是对 Flex 应用生成的 swf 文件的展示
  27. 27. HTTPService 方法和 RemoteObject 得异同 相同点: 都可以跟服务器端交互 。 区别: 访问方式: 张亚兵: 15811555545 HTTPService 通过发送 http 请求访问 jsp 和 servlet RemoteObject 通过客户端可以调用部署服务器上的 某个 Java 类的方法 易用性: HTTPService 方法直接访问服务器上对象, RemoteObject 需要中间层的才能够访问 java 类 访问数据类型: HTTPService 方法大多数情况下访问 xml 文件或页面输出为 xml. RemoteObject 方法可访问的数据和传递的数据类型,见 as3-java.jpg 和 java-as3.jpg ,两张图片说明了 AS3 和 java 类型之间的对应类型转换表。

×