I recently got into Flex, and wanted to find a good example of how to make Flex “talk” to php. After spending quite a bit of time bouncing around the web, I found an awesome test suite at Adobe’s Flex Development area. Go ahead and download that file, and let’s get started!
After downloading the file, extract it to a directory in your webroot. In order to run this example you will need apache, php5.2, and a mysql database. There are lots of good examples in that archive, from the very simple to the very complex, but let’s start with the weborb one. First, head on over to weborbs home page and download the framework on it’s own, and check out the index page of that install–it will really open your eyes to how powerful the package is, as well as what you can do in Flex. Also, for a great graphical reference of how to create new Flex projects using the weborb framework, check out the tutorial located on weborbs site, I used it myself, it’s great!
First things first, Run the Flextest.sql file on your new or existing databse, located in the samples folder. Modify libraries/weborb/Services/MySQL.php with your database access information. If you want to take a look at the other examples or need help with this, follow the instructions on the index page of the new web folder you’ve created for the sdk.
If you’ve set up the db and configuration file correctly, you should be able to run the weborb example. From the index page of the ria_sdk, look for the samples link, and on the next page, under advanced samples, click the weborb link. Or, just run from your webroot/ria sdk folder/samples/flex/weborb. If this works ok you should see a nice datagrid and a set of data loaded into it. If you click on an item, it will pull it up into the update area. Try an update, and watch how the record you selected in the datagrid updates right away. Now try a delete and an add. Pretty straightforward right? But what’s going on behind the scenes? Let’s take a look! Here’s what we’re going to do now:
- We will turn the example from adobe’s sample apps into a Flex project.
- We will then add a new class file to the weborb services package and query another database table with the methods, and update the relevant mxml calls inside the Flex project.
I will be using Flex 2 for this article, which is also available as a demo from Adobe. Go ahead and grab that if you don’t have it, or you can also use the open source compiler, also available from Adobe, but I have not used it, so I will not be commenting on how to build Flex apps that way. First, you need to create a new project. Select Flex Data service from the type of projects, and check the box that says compile locally. Hit next.
For the root folder, select your test suite folder on the webroot. In the next field, give Flex the url root of where the app will reside through the browser. For contextroot, give it just the folder of your test suite with a forward slash (if you have the test suite in a subfolder, make sure and include that as well). Click Next. On the next screen, name your project weborb (this is important!), and click ‘use default location’. Click next. Now pick a different folder for your output, a folder you have set up in your webroot. Also specify the url of that folder accesable via the browser. Click finish.
Now you will want to copy the entire directory contents of samples/weborb into your new project folder. Open up the weborb.mxml file in the editor. Hit Run and it should work as the example did earlier.
Once you get the new project set up correctly in Flex, let’s take a look at how it’s communicating with the weborb framework. Take a look at the mxml document and look on line 33. Looks incredibly simple, doesn’t it? That’s because it is! What you’re seeing here is Flex running a method of the class located in the weborb/services/adobe_php_sdk/dbio_example.php class file! Let’s take a further look at how Flex handles the request and updates the various elements on the page when the getUsers() method is run.
First of all, look up in the file at line 23. You’ll see that the getUsers() method is running inside a function called initApplication. This function will run every time the app loads, thus it will always retrieve all the users from the table, so you can populate the datagrid with the resulting values. Let’s investigate how the datagrid is told to read the resulting values that come back from the getUser method.
Look at line 24 of the mxml file. You’ll see:
remoteObject.getUsers.addEventListener("result", getUsersResult);
What this does is tie the getUsers Method to another function, which transforms the resulting object to a data array accessable to the Flex instance, and assigns the array to a variable called dataProvider:
private function getUsersResult(event:ResultEvent):void {
dataProvider = ArrayUtil.toArray(event.result);
}
Now we have something the datagrid can use. Take a look inside line 103, where the datagrid is initialized. Note this parameter:
dataProvider="{dataProvider}"
Now look how simple it is to read back values from your return array into the datagrid:
<mx:DataGridColumn headerText="User ID" dataField="userid" width="60"/>
<mx:DataGridColumn headerText="User Name" dataField="username"/>
<mx:DataGridColumn headerText="Email Address" dataField="emailaddress"/>
