JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

In a nutshell, JSON is a way to serialize data using JavaScript syntax. It is fairly compact, and easy to use. Furthermore, it has become increasingly popular due to the growth of AJAX applications, and the browser’s native support of de-serializing JSON (via eval()).

If you look on the main page of my weblog, the Reading / Doing section on the left is actually a small AJAX widget I created that shows my latests diggs, delicious bookmarks, and items added to my ta-da lists. It gets its data from a JSON feed on the server, which is periodically generated by a PHP file.

So, to show how to use JSON within a Flex / Flash application, we will load the JSON feed from my site into Flash and display it in a datagrid. Nothing earth shattering, but it will show how easy it is to use JSON. I am not assuming that you know anything about Flex / ActionScript or JSON. Because of this, the tutorial will be pretty long, as I want to make sure I cover every step of the process.

You can view the completed example here. (Requires Flash Player 8.5 beta 2).

First, you need to make sure you have the following installed:

• Flex Builder or MXMLC command line compiler
• Flash Player 8.5
• corelib ActionScript 3 library

You can grab Flex Builder and MXMLC from labs (the MXMLC compiler is included with the Flex Builder install, and also in the SDK download (in case you are on MAC or Linux).

Once you download the zip file for the corelib library, unzip it and you should see three subfolders: src, bins, docs.

• src : contains the source code for the library
• bin : contains a compiled SWC of the library (you can think of this as a DLL)
• docs : contains the API docs for the library

You can link the project against either the source, or the SWC. For this example, we will use the SWC since we don’t need to edit the source code any.

Once Flex Builder is install, open it and make sure that you are in the Flex Development perspective.

Window > Open Perspective > Flex Development

Next, make sure the navigator view is open (it is usually on the left). This view shows all of your projects and files. If the view is not open, you can open it via:

Window > Show View > Navigator

Right click in the navigator and select:

New > Flex Project

Name the Project “JSONExample” and make sure “Use default location” is checked.

Then, click the “Next” button (not finish), this takes us to a screen that will allow us to add items to our class path, or to link against libraries. (you can access this at anytime, by selecting the project, and then selecting Project > Properties).

Select the Libraries tab, and click Add SWC. Browser to the corelib.swc file which was including in the bin directory of the corelib zip file. Click the Finish button.

The first thing we need to do is to add a datagrid to display the data. Our grid will contain two columns. One for the title, and one for the type of service (delicious, digg, tada).

Make sure that the JSONExample.mxml file is open in the editor (double click it in the Navigator), and then switch to design view (click the Design button in the top left of the editor). This brings us to design view which allows us to visually layout and manipulate our components.

Once you are in design view, you should see a Components view. If not, you can open it via Window > Show View > Components. This view contains all of the built in (and any custom components) that are available to the project. Select a DataGrid component from the Controls folder and drag it onto the stage. Once on the stage, resize it so that it takes up most of the space. The grid should snap to the edges when it gets close.

Make sure the grid is selected then go to the Flex Properties view. It should be open on the right, but if it isn’t you can open it via Window > Show Views > Flex Properties. We need to do two things here:

1. Give the control an ID
2. Set the layout constrains

Select the Id field at the top of the Flex Properties panel, and enter “grid”. This basically gives the grid a variable name so that other controls and ActionScript can reference it.

Next, scroll all the way to the bottom of the Flex Properties view to the Layout section. This will show your component with anchor points. Make sure that the following check boxes are checked:

• Top Right
• Top Left
• Left Top
• Left Bottom

This basically tells the controls to keeps its sides the same distance from the application’s sides, even if the app / windows resizes.

At this point, we are ready to switch back to source view, and load the JSON data. So, switch back to source view (click the Source button in the top left of the editor).

You code should now look something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
	<mx:DataGrid id="grid" right="10" left="10" top="10" bottom="10">
		<mx:columns>
			<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
			<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
			<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Lets add an HTTPService tag to actually load the data. Add the following tag right under the Application tag.

	<mx:HTTPService id="service" resultFormat="text"
					url="http://weblogs.macromedia.com/mesh/mashedpotato.json"
					result="onJSONLoad(event)" />

If you save this, you should get an error in the problems view (Window > Show Views > Problems):

Call to a possibly undefined method 'onJSONLoad'

This is ok. We just need to define the onJSONLoad event handler. But first, lets look at the code we just wrote:

• id – Give the control a variable name so we can reference it later.
• url – the url that points to the JSON data we are loading
• resultFormat – the format that we want the data returned to us in. (In this case, just the raw text).
• result – event handler that is called when the data loads.

At this point, your code should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">

	<mx:HTTPService id="service" resultFormat="text"
					url="http://weblogs.macromedia.com/mesh/mashedpotato.json"
					result="onJSONLoad(event)" />

	<mx:DataGrid id="grid" right="10" left="10" top="10" bottom="10">
		<mx:columns>
			<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
			<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
			<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Next, we need to create a script block to define our event handler function. Add a Script tag block just below the Application tag:

	<mx:Script>
		<![CDATA[

		]]>
	</mx:Script>

and then inside the Script block, lets define our event handler. You script block should now look like this:

	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;

			private function onJSONLoad(event:ResultEvent):void
			{
			}
		]]>
	</mx:Script>

If you look at the API docs, ResultEvent is the type of event broadcast when the data has loaded from the service.

Next, all we need to do is:

• Get the raw JSON data from the URL
• De-serialize it from JSON to ActionScript
• Set the data as the dataProvider for the grid

Here is the completed function, with comments: