Your SlideShare is downloading. ×
0
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Flex 入门培训
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flex 入门培训

1,398

Published on

A document for flex study

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,398
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×