Friday, May 18, 2007

Using JSON to connect Flash with Asp.Net

Life of a programmer are becoming more and more simple when it comes to finding professional help online. Almost any question i have regarding my work, like how to do this, why that doesn't work, etc' I can always find the answer one google search away. Few clicks later i have an explenation, code sample or other solutions. This week i tried to do something that had no good samples or documentation. That made me feel like i have reached the limits of existing technology, and know i'm trying things that other never did before. It is quite exciting for me.


This week Alexey and I wrote a simple "Invite a friend" feature. There is nothing exciting about that in itself. The feature was written inside a Flash control and the business object that actually sends emails is part of our site's engine written in Asp.Net.
Http communication between Flash and web pages is common, and can be done by using the LoadVars object in ActionScript code. You can see a good example here. There are practicaly 3 ways to transfer data over Http to Flash objects. One is sending the data "as is", which is good when you pass one parameter or two. Two is using XML to pack the data on one side and unpack it on the other side. Three is using JSON as the data structure standard. I chose JSON because the code required to Serialize and Deserialize JSON objects and strings is much simpler, shorter, more intuitive and more object oriented. You will see in the samples that one line of code is required in every side of the interaction to persist objects over http between Asp.Net and Flash ActionScript, or any other two sides for that matter.

The c# code for creating Json object on the server is available here and uses Newtonsoft Json.Net objects.
The Actionscript code however, is not available on the internet yet, only here. this code recieves the Json object inside Flash and reads it's values like this: ( I got this code from Trannie who wrote the Json ActionScript 2 object.)

In my projects I used LoadVars to grab the JSON string, so my JSON file
had a NAME=VALUE format with VALUE being the JSON string:

client= {
"name" : "Client",
"crop" : { "x1" : 3, "y1" : 3, "x2" : 623, "y2" : 472 },
"link" : {
"type" : "site",
"url" : " http://www.clientsite.com"
},
"title" : "Job Name",
"text" : "This is a string describing the project",
"details" : [
{
"full" : "Browse.jpg",
"thumb" : "THB_Browse.jpg"
},
{
"full" : "HSWebShot2.jpg",
"thumb" : "THB_HSWebShot2.jpg"
}
]
}

Hopefully that is still valid JSON. It's an excerpt from a JSON file,
so I may have introduced some typos..


In AS, I'd do something like:

var client:Object;
var json = new JSON();

var lv:LoadVars = new LoadVars();
lv.onLoad = function(success) {
if(success) {
client = json.parse(this.client);

trace(client.name );
trace(client.details[1]);
getURL(client.link.url);
}
}



We had some trouble on the ActionScript side because we confused the LoadVars Http object with the internal Json object, so let me elaborate on this. the LoadVars object is the one that use Load method to send Http request to the server, and the onLoad callback function that recieves the response from the server. In order to send Json string in such a request you should use ActionScript syntax to wrap your Json string. The response stream should include the "client =" part, which is NOT generated by the Json server-side class. This part is actually not part of Json, but is used by the Flash LoadVars object in order to read this Json string in ActionScript.

Finally, i want to hear from you what kind of uses can you see for such technology that connects Flash applications with Asp.Net objects so smoothly and easily.

Until next time,

Benny.Serialize(this)

blog comments powered by Disqus