Wednesday, 30 June 2010

Exchange data between ASP.NET and Adobe Flex

As i'm an ASP.NET developer and knowing that this technology is powerfull, I needed to find a way to exchange data between Adobe Flex application used as front end and my ASP.NET application used as a backend. After spending some time googling, i found an open source library "The FluorineFx open source library provides an implementation of Flex/Flash Remoting, Flex Data Services and real-time messaging functionality for the .NET framework."

To start using this open source library go to http://www.fluorinefx.com/download.html and click on "Download FluorineFx v1.0.0.13".

Once the installation process is completed, A folder on your desktop will be created "DotNet", Navigate to "FlexToNet.AMFService\Bin" to get the dlls

required. Paste these 2 dlls into the bin folder of your ASP.NET application.

Configuration

Once you have placed the two dlls inside the bin folder of your application, in Visual Studio 2005 right click on References and click Add Reference.
Browse to the application bin folder and select the two dlls.
For the communication between ASP.NET and Adobe flex to work, you need to create a dummy page called "Gateway.aspx" and add the below code to the web.config file inside System.Web tags






As you may have noticed, the dll being added to the application bin folder serves as http module which will serialize the objects and allow the communication between these two technologies


Adobe Flex
In Adobe Flex builder, create a new project of type mxml application and add the below code




import mx.controls.Alert;
import flash.net.NetConnection;
private function CallDotNetMethod(event:Event):void
{
// Create a new instance of NetConnection class
var net:NetConnection = new NetConnection();
// Connect to your ASP.NET application
net.connect("http://localhost/webApplication5/Gateway.aspx");
// Call a function in your application called RetrieveMsg inside a class called "Test"
net.call("WebApplication2.Test.RetrieveMsg", new Responder(Result,null));
// Close the connection
net.close();
}
public function Result(data:Object):void
{
// this method will be called once the result from the .NET class is received which will just display the message returned
Alert.show(data.toString());
}
public function HandleClick():void
{
// This method will be called on creation complete event of the mxml application
btnTest.addEventListener(MouseEvent.CLICK,CallDotNetMethod);
}
]]>




ASP.NET Application
Create a new web application, create a new class called "Test" inside it add the below code

public string RetrieveMsg()
{
return "Hello World";
}

Finally you need to create a dummy page called "Gateway,aspx"

For demonstration only, this method will only return Hello world to adobe flex application.


Run the application
Once you run the application inside Adobe flex, or you added the swf file being compiled in Adobe flex builder to an aspx page, you can test the application by clicking on the button to see the alert message returning the data from the .net class

Of course you can use web services to enable this communication, but keep in mind that using webservices is slower than directly calling a .NET class. I have added the project as an attachment so you can download it and take a deeper look into it.

Hope this helps,

No comments:

Post a Comment