|
|
Adobe Flex makes implementing this solution an easy task. The solution explained in this tutorial uses PHP for the server-side programming and sends the data using JSON (JavaScript Object Notation) encoding. By the end of the tutorial you will be sending simple objects along with arrays of objects from your PHP code to your Flex client.
Requirements
Flex Builder 2 (or Flex 2 SDK)
Try
Buy
PHP (version 5.2 or higher, installed on a local web server)
Learn more
Adobe Flex corelib
Download
Sample files:
json_tutorial.zip (ZIP, 55K)
This sample file contains the following:
Flex Builder project with source
PHP source code
corelib.swc
Prerequisite knowledge
To benefit most from this tutorial, it is best if you have:
Built simple Flex applications before
A basic understanding of PHP
A basic knowledge of JSON
Setting up the development environment
This is actually a lot easier than it sounds because PHP and Flex both have functions to handle JSON data transmissions. For Flex, the one thing you need to make sure is that you have the corelib from Adobe in order to use the JSON functions—you can download it from Adobe Flex corelib. You can add this to a project in Flex Builder by going into the properties of a project then to "Flex Build Path" and adding the .swc to the library path. For PHP, if you have a version greater than 5.2, you are all set. If not, you can either upgrade, or install the php-json extension.
At this point you can also open up the provided ZIP file and you will find a couple of items. The first is the Flex source code that was used to create the application. You will also find the corelib library that is used in this project under the lib folder. You can proceed in multiple ways from here: create a new Flex Project in Flex Builder and then add the source and lib directory or use the SDK binaries to compile the application. Once it is built, it can be run and this will get data from a PHP file on the Paranoid Ferret server. I will go over the source code for both the PHP and Flex in depth later on in the tutorial.
Getting the PHP code ready
The first thing we are going to go over is the PHP code (json_tutorial.php), which you can find in the sample ZIP file. The PHP code creates a few classes for the objects that we will pass to our Flex application. We also have code to check if a GET variable has been set. We use this to tell the PHP code what we are requesting. If the variable getPerson is set, we create a person and echo it (after we encode it into JSON using json_encode) to send it to the Flex application. Ideally your data would be stored in a database, but for simplicity, we're just creating Person objects directly in the PHP code.
The following is all the PHP code we are going to use and should meet our needs:
class Person
{
public $first_name;
public $last_name;
public $email;
public $address;
}
class Manager extends Person
{
public $title;
public $employees;
}
if(isset($_GET['getPerson']))
{
$p = new Person();
$p->first_name = 'John';
$p->last_name = 'Doe';
$p->email = 'fake@email.com';
$p->address = '5555 Some Street City, State 52423';
echo json_encode($p);
}
if(isset($_GET['getManager']))
{
$p1 = new Person();
$p1->first_name = 'Joe';
$p1->last_name = 'Doe';
$p1->email = 'joe.doe@email.com';
$p1->address = '5424 Some Street City, State 12314';
$p2 = new Person();
$p2->first_name = 'Bob';
$p2->last_name = 'Doe';
$p2->email = 'bob.doe@email.com';
$p2->address = '1414 Some Street City, State 12412';
$p3 = new Person();
$p3->first_name = 'Kevin';
$p3->last_name = 'Doe';
$p3->email = 'kevin.doe@email.com';
$p3->address = '6123 Some Street City, State 41241';
$m = new Manager();
$m->first_name = 'Manager';
$m->last_name = 'Doe';
$m->email = 'manager.doe@email.com';
$m->address = '5534 Some Other Street City, State 91230';
$m->title = 'Office Manager';
$m->employees = array($p1, $p2, $p3);
echo json_encode($m);
}
?>
Creating the Flex user interface
The next thing to do is to set up the basic application for Flex. All the code from here on is found in the JSONTutorial.mxml file in the Flex Builder Project included in the sample ZIP file. The following code is the simplest Flex application. This sets up an application with specified height and width and also adds the view source option to the movie, with the source file specified by viewSourceURL. The URL can be any path that points to the correct file to display the source code:
