flex+java入门

Flex+java入门
　 Flex与java交互有三种方法，我较为习惯先建web项目再加入flex。我的开发环境是MyEclipse6.0.1(含Flex插件)+Tomcat+Blazeds+joto(这里只是用来测试，感觉这个有点过时了，可以使用LCDS)。Blazeds与joto以及相关截图在附件中,需要的可以下载。
[b]具体操作:[/b]
1.先将joto中lib目录下的jar文件拷到tomcat的common/lib目录下，再将blazeds.war放到tomcat的webapps目录中，运行服务器，会生成blazeds目录，里面有两个文件夹META-INF和WEB-INF。
2.在MyEclipse中新建一个web项目FlexDemo，直接用toncat中blazeds中的META-INF和WEB-INF文件夹覆盖WebRoot下的两个文件夹，此时项目的结构如下图：
[img]http://dl.iteye.com/upload/picture/pic/66938/0f153241-4846-383e-b763-66cda8a7a467.png[/img]

3.在src目录下新建一个java类用于测试
[img]http://dl.iteye.com/upload/picture/pic/66942/ea5d5153-a2a1-3620-8566-9a5e2391529b.png[/img]
[img]http://dl.iteye.com/upload/picture/pic/66940/39f4f0f5-cbfc-3967-9d88-a33c36e5ff6e.png[/img]

4.部署FlexDemo，启动Tomcat服务器
5.右击FlexDemo程序，选择Flex Project Nature-->Add Flex Project Nature出现如下界面：
[img]http://dl.iteye.com/upload/picture/pic/66948/87c22db2-e066-3d6a-b2f0-1d8afd8fc722.png[/img]
[b]注意：Application server type：选择J2EE[/b]
6.点击Next：
[img]http://dl.iteye.com/upload/picture/pic/66952/1d931873-f5fc-356a-9007-d1e60539b61f.png[/img]
[b]注意：Root folder ：选择FlexDemo程序在你的Tomcat服务器下的位置
Root URL ：FlexDemo的URL，我的Tomcat的端口号是9999
Context root ：一定要是“/web项目名称”，即/FlexDemo
Output folder ：flex文件的位置[/b]
7.点击Finish ：项目结构变为如下所示：
[img]http://dl.iteye.com/upload/picture/pic/66950/10a8b88d-ea3e-390a-aa28-17ace545a75f.png[/img]
会项目名称上会出现一个红色的“x”，是由于未能成功创建html-tamplates文件夹，该文件夹存放flex生成的html等文件，解决方法是：Window-->Show View-->Problems：
[img]http://dl.iteye.com/upload/picture/pic/66958/ebd710c3-37b5-3ca5-82ab-ae24fdb41c49.png[/img]
右击“Cannot create HTML wrapper”Recreate HTML Temapltes，会发现红色”x”消失。
[b]注意：如果此时仍然有红色“x”，如下图：[/b]
[img]http://dl.iteye.com/upload/picture/pic/66954/50ad98a1-9e6c-3de4-9eba-7ffdae3c7d53.png[/img]
解决方法是：右击FlexDemoPropertiesFlex Compiler，选择Flex SDK Version为第一个，如下图：
[img]http://dl.iteye.com/upload/picture/pic/66956/e88e215a-6ecf-36b3-9298-6046668dc9e6.png[/img]
选择第一个即可
8.打开WEB-INF/flex/remoting-config.xml文件，加入
[img]http://dl.iteye.com/upload/picture/pic/66962/0438febf-89a4-3837-ba4e-2dc66df98e42.png[/img]
[b] 注意source是上面创建的HelloWorld类的完整路径[/b]
9.编辑FlexDemo.mxml：

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">   
    <mx:Script>   
        <![CDATA[   
            import mx.controls.Alert;   
            import mx.rpc.events.ResultEvent;   
            import mx.rpc.remoting.mxml.RemoteObject;   

            private var remote:RemoteObject = new RemoteObject();   

            public function init():void{    
                remote.destination="test";    
                remote.sayHello.addEventListener(ResultEvent.RESULT,doHelloWorld);   
            }   

            public function doHelloWorld(event:ResultEvent):void{   
                resultTxt.text = event.result.toString();   
            }  

            public function testFlex():void{
            	remote.sayHello(txtSay.text);
            } 

        ]]>   
    </mx:Script>   
    <mx:Button x="10" y="10" label="测试" click="testFlex()" fontSize="16"/>   
    <mx:TextInput x="84" y="10" width="266" id="txtSay" fontSize="16"/>   
    <mx:Label id="resultTxt" x="412" y="12" fontSize="16"/>
</mx:Application>

[b]init 方法中的remote.destination="test";其中“test”是WEB-INF/flex/remoting-config.xml文件中加入的destination的id,
remote.sayHello.addEventListener(ResultEvent.RESULT,doHelloWorld);sayHello对应java类中中的sayHello方法。 同样testFlex方法中的remote.sayHello(txtSay.text);中的sayHello也对应java类中的sayHello方法。[/b]
10.重新部署，重启服务器，浏览器输入http://localhost:9999/FlexDemo/flexs/FlexDemo.html
测试成功
[img]http://dl.iteye.com/upload/picture/pic/66960/d57c6c2e-da88-3894-af42-37412ad3673e.png[/img]