FLEX经典入门教程.ppt

课程纲要,参考资料及安装文件 培训目的 对flex有一个基本认识 flex工程的建立及在web工程中建立flex应用 能够通过HTTPService方法和RemoteObject方法实现flex和java的交互 培训内容 Flex工程的建立 在web工程中建立flex应用 通过HTTPService方法实现和java的交互 通过RemoteObject方法实现和java的交互 HTTPService方法和RemoteObject的异同,参考资料及安装文件,1、Flex Bulider3的Eclipse插件在cvs上 tools\flex2\FB3_WWEJ_Plugin_partN.rar 2、cvs\tools\flex入门培训目录下有：blazeds.rar --使用blazeds所需文件flashplayer_10_ax_debug.exe --flash插件Flex 3 Language.chm --flex帮助手册myJava.rar --示例项目flex入门培训.ppt --入门培训ppt,什么是flex,（1）、Flex是一个针对企业级富互联网应用的表示层解决方案。

（2）、Flex是一种应用程序框架 （3）、Flex系列产品包括编译工具和IDE，通过编写MXML和ActionScript代码， 用编译器来生swf文件，使用浏览器的Flash player插件就可以进行观看Flex工程的建立,1、安装完flex builder的eclipse的插件后，打开eclipse,filenewproject打开新建工程向导，如下图，选择Flex Project:,Flex工程的建立,2、点击next进入下面的页面：,Flex工程的建立,3、点击next进入如下页面，选择输出目录：,Flex工程的建立,4、点击next进入如下页面，如下图:,Flex工程的建立,5、点击finally后，则flex工程建立完成，如下图,Flex工程的建立—修改输出目录,1、工程建立好之后修改输出目录，在工程目录上点击右键选择Properties，如下图：,Flex工程的建立—修改输出目录,2、选择flex build path设置输出目录,在web工程中建立Flex应用,1、在已经建立好的web应用上，点击右键，选择Add Flex Project Nature,如下图：,在web工程中建立Flex应用,2、选择之后弹出如下对话框：,在web工程中建立Flex应用,3、点击next，选择文件输出目录，此处设置为当前工程的WebRoot\Flex下，如下图：,在web工程中建立Flex应用,4、点击finish之后，web工程结构如下图：,Flex应用说明,1、使用： mxml是flex builder可视化工具生成的。

但实际使用的不是.mxml文件，而是flex builder编译器对.mxml进行编译生成的.swf文件；相当于java的类，编写的是.java文件，实际使用的是.class 2、生成.swf时间：Flex应用(即mxml文件)在编译的时候就会由flex builder编译器对应用进行编译生成和应用同名的.swf文件 4、生成文件目录：生成的文件所在目录是我们设置的”Output folder:”的值通过HTTPService和java交互,需求：Flex通过发送HTTPService请求读取xml文件，将文件信息展示在flex控件上，这些信息是可以修改的，通过点击按钮将修改后的信息通过 HTTPService方法发送给后台的jsp进行处理 客户端,,.swf,,服务器端,,,.mxml,,.swf,,编译时生成,jsp,,,,访问jsp,在本例中，当swf加载完成后我们让它通过HTTPService方法发送http请求，读取xml文件,,请求成功后会触发HTTPService的result事件，该事件调用我们定义的方法，得到数据,,修改数据,,,点击提交按钮,点击按钮通过HTTPService方法向jsp页面发送HTTP请求将数据传给jsp页面,,数据展现，当服务器传过来的值发生变化时，控件上绑定的值会自动刷新,,通过HTTPService和java交互,实现：1、HttpTest.mxml是flex应用实现HTTPService的请求和发送，数据的展示。

2、httpTest.jsp是对HttpTest.mxml生成的swf文件在页面上的展示3、getHttpData.jsp是接收Flex文件发送的请求，并对传过来的数据进行处理4、test.xml是Flex文件要读取的xml通过RemoteObject方法实现和java的交互,需求：flex有一个输入框、按钮和lable，在输入框中输入信息后点击按钮，可以通过RemoteObject方法调用java类中的方法通过该类中的方法对数据进行处理并返回，将处理后的数据显示在lable上客户端jsp,,服务器端,,文本框数据被改变,,swf,通过RemoteObject方法调用类中的方法，并将输入的值作为方法的参数，需要remoting-config.xml文件中找到类的映射；,,Java类,,,,数据加工,,,输入数据,,,,点击提交按钮,BlazeDs,flex/\remoting-config.xml,,为了RemoteObject方法能够调用类，此处需要配置,,,如果调用成功会触发RemoteObject方法的result事件，该事件会调用我们定义的方法得到处理后数据,,,数据展现，当服务器传过来的值发生变化时，控件上绑定的值会自动刷新,通过RemoteObject方法实现和java的交互,使用RemoteObject所需环境：1、jdk需要1.5及以上2、通过使用BlazeDs作为中间层来实现Flex和java类的通信。

BlazeDs的使用：1、如果是一个新的应用，可以直接将blazeds.rar解压后blazeds文件夹下的内容全部放到webRoot下2、如果和已有的应用集成，则需要将web.xml集成在一起通过RemoteObject方法实现和java的交互,实现步骤： 1、首先根据需求实现类的编写 2、在blazeds中实现类的映射 3、完成flex应用 4、通过jsp页面引用flex生成的swf文件，查看效果,通过RemoteObject方法实现和java的交互,BlazeDs实现类的映射： 在WebRoot\WEB-INF\flex\remoting-config.xml里面加上下面这段设置(本示例)：runqian.HelloWorld其中id=“hello”是自己对类起的映射名称节点是类路径,通过RemoteObject方法实现和java的交互,Flex通过RemoteObject调用java:其中id=“ro”这个id的值是自己定义，相当于要调用的类的一个对象名称其中destination=“Hello” 这儿destination的值必须是在remoting-config.xml中定义的id值其中result=“resultHandler(event)” 是结果响应事件，调用类中的方法后会自动调用这个方法。

通过RemoteObject方法实现和java的交互,实现：1、runqian\HelloWorld.java是Flex应用要调用的类，实现对Flex传进来的数据在后端处理并返回处理后的数据2、在WebRoot\WEB-INF\flex\remoting-config.xml中添加类的映射，该映射起到了Flex的RemoteObject方法和java类通讯的桥梁作用3、myJava.mxml是Flex应用，实现前端页面的展示通过RemoteObject方法对类中方法的调用，并且能得到方法的返回数据4、DsTest.jsp是对Flex应用生成的swf文件的展示,HTTPService方法和RemoteObject得异同,相同点：都可以跟服务器端交互 区别：访问方式：张亚兵：15811555545HTTPService通过发送http请求访问jsp和servletRemoteObject通过客户端可以调用部署服务器上的 某个Java类的方法 易用性： HTTPService方法直接访问服务器上对象， RemoteObject需要中间层的才能够访问java类访问数据类型：HTTPService方法大多数情况下访问xml文件或页面输出为xml.RemoteObject方法可访问的数据和传递的数据类型，见as3-java.jpg和java-as3.jpg，两张图片说明了AS3和java类型之间的对应类型转换表。