Jan
20

Flashbuilder 4 Data Services ( ZendAMF / PHP )

Welcome to the brave new world of Flashbuilder 4 (previously known as Flexbuilder). Flashbuilder 4 has some very cool new features; this tutorial is going to cover the PHP portion of the new Data Services tab. Under the hood this feature is using the RemoteObject tag. Remoting is implemented using Action Message Format (AMF). This is a a binary format to move data between Flash and the back end. Flashbuilder uses ZendAMF to get this job done. There are several advantages to using ZendAMF; it works over port 80, its PHP based and best of all it’s FREE. Due to these facts, this framework will run on almost any web server without the need for Java or special port exceptions. This tutorial is going to cover how to set up a Flex project that is integrated with a PHP server, then it will cover how to configure AMF services and finally how to use them.


 
Setup:

  1. If you haven’t done so already download Flashbuilder 4 from Adobe Labs
  2. You will need a local web server that runs PHP ( sorry I am not going cover this )
  3. Download the server files from above
  4. Move the _service directory to the root of your web server (trust me just move it)
  5. Optional, you can use a database, my example code is for MySQL available from here

At this point you should have at least, a local web server running PHP, the _service directory is in the server root and Flashbuilder 4 installed. Lets get started by making a new project.

  1. choose File -> New -> Other…
  2. Choose Flex Project
  3. Click ‘Next’


  1. Name your project ( I chose ZendAMF )
  2. You can choose Web (Flex) or Desktop (AIR) it doesn’t matter
  3. Select PHP for server type
  4. Click ‘Next’




Now its time to let Flashbuilder know about your server installation.

  1. Enter the location of your web root
  2. Enter the root URL to your web server that maps to the path from above
  3. Enter the location you want to be the output for this project
  4. Click ‘Validate Configuration’



If everything went well you will see "The web root folder and root URL are valid".

  1. Click ‘Finish’



Now you should be looking at your new application in the Flash Perspective. It should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
    xmlns
:fx="http://ns.adobe.com/mxml/2009" 
    
xmlns:s="library://ns.adobe.com/flex/spark" 
    
xmlns:mx="library://ns.adobe.com/flex/halo">
    
    <
fx:Declarations>
      <!-- 
Place non-visual elements (e.g., servicesvalue objectshere -->
    </
fx:Declarations>

</
s:WindowedApplication



If you look to your right you will see the new Data Services tab. Now that we have a project lets start the cool part of this tutorial. This is when Flashbuilder 4 will show you the real magic. Click ‘Connect to Data/Service’ to begin.



As I said before we are going to be exploring the PHP portion of this feature so choose PHP and click ‘Next’. I am hoping to cover the HTTP and WSDL portions in future tutorials.


  1. Enter the location of your _service/ZendAMFService.php
  2. You may choose any name for the service, but I like to keep the default.
  3. Service package, this is where the classes that Flashbuilder creates will wind up. That’s right, Flashbuilder is going to be writing your code for you. I like to keep all the generated code under my codingAngry (ca) package.
  4. Data type package, as with the Service package, this is where your value objects will wind up. Again, I like this in my ca package.
  5. Click ‘Finish’



If you do not have the Zend Framework installed you will see the following dialogue. Choose ‘OK’ and the Zend Framework will be installed at your web root in a folder called ZendFramework. I would suggest you let this step complete then download the latest Zend Framework from here ( http://framework.zend.com/download/current ) and replace it with what Flashbuilder installed.



Whoa, is that what I think it is? Flashbuilder just went out to the service and found out what commands are available. This is a simple CRUD script to act upon Track objects. The only functions we are going to use in this tutorial will be getTrack and getTrackList. These services have been hard coded to return data without a database. There are stubs in all the services for database interaction, but you will have had to run the sql script and get your database set up in order to use those.

  1. Choose ‘Finish’



The Data Service tab now shows the services available from your server. Now we need to configure the input and return typed for this services.


  1. Right click on getTrack and select ‘Configure Input Types…’
  2. Select ‘Number’
  3. Click ‘OK’
  1. Right click on getTrack and select ‘Configure Return Types…’
  2. Select ‘Auto-detect the return type from sample data’
  3. Click ‘Next’
  4. Enter an arbitrary number for the trackId try 15
  5. Click ‘Next’

Flashbuilder just called the service and determined the return type to be a Track with the following parameters.

You can optionally rename the fields, but I tend to leave them alone.


  1. Click ‘Finish’

You can open up the Data Types and see Track with all its properties.

You can open up the getTrack service and see its input and return values.



You can continue to right click and fill in the values for the rest of the services so they match the configuration below. Be forewarned that only getTrack and getTrackList will work at this point, so they are the only two that you can use Auto-detect for.



With all that behind us it is finally time to write some code and use our new service.

Note:

All your configuration data is stored in a folder called .model in a file called ZendAMF.fml ( YOUR_PROJECT_NAME.fml ). It is good to know where this is in case you want to share the same services across multiple projects or between users and dont want to have to set up the input and return value mappings again.

In your main application declare the following buttons from the Spark components and inside an HGroup. As you see my buttons have labels and click handlers. This tutorial isn’t meant to cover all the new stuff that Flashbuilder does, but as you enter the portion of the button setting up the click handler, you will see ‘Generate Click Handler’ as you type. Press enter when you see that message and Flashbuilder will write you a stub click handler, its pretty cool and quite the time saver.

<s:HGroup top="20" left="20">
    <
s:Button 
        label
="GetTrack" 
        
click="button1_clickHandler(event)" />
    
    <
s:Button 
        label
="GetTrackList" 
        
click="button2_clickHandler(event)" />
    
    <
s:Button 
        label
="Clear" 
        
click="resultList.dataProvider = null" />    
</
s:HGroup



Lets think of those buttons as our control bar. IN order to see what happened, we are going to need to be able to display the data when it is returned from the service. For this we are going to use the Spark List. Add the following code below your HGroup

<s:List 
    
id="resultList"
    
labelField="trackName"
    
width="400" 
    
top="50"
    
left="20"/> 



We are almost done, now all that is left is to write the content for the click handlers and write some responders for when the service returns data. Below is all the code you need to finish this tutorial.

protected function button1_clickHandlerevent MouseEvent ) : void
    {
        
// Get an instance of the service
        
var service ZendAMFService = new ZendAMFService(); 
        
        
// Add some handlers for result and fault
        
service.addEventListenerResultEvent.RESULTresultHandler );
        
service.addEventListenerFaultEvent.FAULTfaultHandler );
        
        
// Call the function on the server
        
service.getTrack10 ); // The trackId doesnt matter for this tutorial
    
}
    
    
    
protected function button2_clickHandlerevent MouseEvent ) : void
    {
        
// Get an instance of the service
        
var service ZendAMFService = new ZendAMFService();
        
        
// Add some handlers for result and fault
        
service.addEventListenerResultEvent.RESULTresultHandler );
        
service.addEventListenerFaultEvent.FAULTfaultHandler );
        
        
// Call the function on the server
        
service.getTrackList10 ); // The albumId doesnt matter for this tutorial
    
}
    
    
    
protected function resultHandlerevent ResultEvent ) : void
    {
        
// Is this return from getTrackList
        
if( event.result is ArrayCollection )
        
{
            resultList
.dataProvider event.result as ArrayCollection;    
        
}
        
        
// Is this return from getTrack
        
if( event.result is Track )
        
{
            resultList
.dataProvider = new ArrayCollection([event.result]); // Convert the single track to an array    
        
}
    }
    
    
    
protected function faultHandlerevent FaultEvent ) : void
    {
        Alert
.showevent.message.toString() );
    


Conclusion ...
That was a long one, but we are done. You just set up a project with configurations to a local PHP server. You then were able to point the Flashbuilder IDE to a service located on your server. Lastly you were able (I hope) to execute service calls all from within Flashbuilder.

Happy Coding

Comments

There are no comments for this entry yet.

Enter a comment - moderated

Commenting is not available in this weblog entry.