flash/flex 与 FluorineFx通讯之Hello World!

Bēniaǒk兄弟的Flex与.NET互操作(六)：Flex和.NET协同开发利器FluorineFx 是基于vs2008 + flex builder3的，不知道什么原因，我在vs2010 + flash builder4 上试了几次，总是不成功(也许晚上应该自我检讨下人品鸟)，于是有了这一篇东东，算是对 vs2010/flash builder4环境下的一个补充吧

.net的服务端依照参照silverlight获取外部数据的另一种选择:FluorineFx 里的做法，在TestLib.cs里定义一个方法:

public string HelloWorld(string p)
{
            return "hello , " + p + " , welcome to FluroineFx !";
        }

然后看下在flash中如何调用：

1、既然要先连接到网关，得先有连接对象RemotingConnection.as

package
{
	import flash.net.NetConnection;
	import flash.system.Security;
	import flash.net.*;

	public class RemotingConnection extends NetConnection
	{
		public function RemotingConnection(gatewayUrl:String)
		{
			Security.allowDomain(gatewayUrl);
			this.objectEncoding = ObjectEncoding.AMF3;
			this.connect(gatewayUrl);			
		}
	}
}

允许访问网关url -> 设置编码 -> 打开连接，一气呵成，没啥难理解的

2、as3的调用代码：

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.net.Responder;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;

	[SWF(height=80, width=400)]
	public class Main extends Sprite
	{
		private var gateWay:RemotingConnection;
		private var responder:Responder;
		private var txtInput:TextField;
		private var txtResult:TextField;
		private var lblInput:TextField;
		private var btn:CustomSimpleButton;
		private var btnLabel:TextField;

		public function Main()
		{
			init();
		}

		private function init():void
		{
			gateWay=new RemotingConnection(http://localhost:1718/Gateway.aspx); //创建连接对象
			lblInput=new TextField();
			lblInput.text="请输入参数：";
			lblInput.selectable=false;
			lblInput.autoSize=TextFieldAutoSize.RIGHT;
			addChild(lblInput);
			lblInput.height=20;
			lblInput.x=10;
			lblInput.y=10;
			addChild(lblInput);

			txtInput=new TextField();
			txtInput.border=true;
			txtInput.width=200;
			txtInput.height=20;
			txtInput.type=TextFieldType.INPUT;
			txtInput.text="菩提树下的杨过";
			txtInput.y=lblInput.y;
			txtInput.x=lblInput.x + lblInput.width + 5;
			addChild(txtInput);

			btn=new CustomSimpleButton(60, 20, " 调 用 ");
			addChild(btn);
			btn.y=txtInput.y;
			btn.x=txtInput.x + txtInput.width + 10;

			txtResult=new TextField();
			addChild(txtResult);
			txtResult.x=lblInput.x;
			txtResult.y=lblInput.y + lblInput.height + 10;
			txtResult.width=380;
			txtResult.autoSize=TextFieldAutoSize.CENTER;
			txtResult.textColor=0xff0000;
			btn.addEventListener(MouseEvent.CLICK, btnClick);
		}

		private function btnClick(e:MouseEvent):void
		{
			gateWay.call("ServiceLib.TestLib.HelloWorld", new Responder(onResult, onFault), txtInput.text);//调用方法
			btn.enabled=false;
			btn.mouseEnabled=false;
		}

		//成功的回调函数
		private function onResult(result:String):void
		{
			//trace("成功：",result);//成功： hello , 菩提树下的杨过 , welcome to FluroineFx !
			txtResult.text=result;
			btn.enabled=true;
			btn.mouseEnabled=true;
		}

		//失败的回调函数
		private function onFault(result:String):void
		{
			//trace("失败：",result);
			txtResult.text=result;
			btn.enabled=true;
			btn.mouseEnabled=true;
		}
	}
}

看上去很长，但不用看完，大部分代码是用于创建界面的，关键部分只有注释的几行！

这是运行结果，整个swf不到5k，短小精悍！

再来看下Flex中如何使用：

在flash builder中创建一个flex project，然后把RemotingConnection.as复制到src目录，mxml完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955"
			   minHeight="600"
			   width="299"
			   height="188">

	<fx:Script>
		<![CDATA[
			import flash.net.Responder;

			private var gateWay:RemotingConnection;
			private var responder:Responder;

			protected function btnCall_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub

				if (gateWay == null)
				{
					gateWay=new RemotingConnection("http://localhost:1718/Gateway.aspx");
				}
				gateWay.call("ServiceLib.TestLib.HelloWorld", new Responder(onResult, onFault), txtInput.text);
				this.btnCall.mouseEnabled = false;
				this.btnCall.enabled = false;
			}

			private function onResult(result:String):void
			{				
				txtResult.text=result;
				this.btnCall.mouseEnabled = true;
				this.btnCall.enabled = true;
			}

			private function onFault(result:String):void
			{				
				txtResult.text=result;
				this.btnCall.mouseEnabled = true;
				this.btnCall.enabled = true;
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Label x="10"
			 y="10"
			 text="请输入参数："
			 id="lblInput"/>
	<s:TextInput x="88"
				 y="6"
				 id="txtInput"
				 text="菩提树下的杨过"/>
	<s:Button x="224"
			  y="7"
			  label="提 交"
			  id="btnCall"
			  click="btnCall_clickHandler(event)"/>
	<s:TextArea x="6"
				y="36"
				width="287"
				height="145"
				id="txtResult"/>
</s:Application>

换了个写法而已，逻辑与刚才完全一样!

这是运行界面，看上去好象更专业一点了，但是最终生成的swf 尺寸可就大多了(有所得必有所失)

示例源代码下载： http://cid-2959920b8267aaca.office.live.com/self.aspx/Flash/FluorineFx.rar