Quick poll on debugging and tooling for Flex and PHP projects

As you know, one of my focuses as a Platform evangelist is Flex and PHP integration. Thus you can imagine I spend quite a lot of time doing Flex and PHP projects or research around these technologies. Lately I’ve been working on workflows for PHP and Flex (tooling, debugging, libraries) in light of the new tools (or new versions) we have been developing at Adobe. While some of these findings will see the light as articles, others are more intended as suggestions or feature request for upcoming versions of Flash Builder.

I’m really curious to find out:

What tools are you using?
What do you use for debugging?
What frameworks (AMFPHP, Zend Framework, Doctrine etc) do you use when working on Flex and PHP projects?
And the most important question: What features do you think Flash Builder needs in order to make you a happier/richer developer?

Please take some time and drop a comment with your thoughts around these questions.

And because I understand it takes some time to answer these questions, I want to give away three Flash Builder 4 licenses. I will choose randomly three lucky people from those who take the survey. The winners will be announced at the end of March, however you’ll get the licenses once we release Flash Builder 4 (now it is in Beta 2). Make sure you fill in your real name and a valid email address.

February 25, 2010 | Filed Under Flash Builder, Flex, PHP | 52 Comments

Webinar: using PHP and Flash for developing Rich Internet Applications

On December 2nd, together with Roy Ganor from Zend, I will host an e-seminar about PHP and the Flash Platform. We will show you how you can create a Rich Internet Application using the Flex framework, Illustrator, Flash Catalyst, and Flash Builder 4. Then we will show you how to connect the Flex application to a PHP backend and how easy is to debug the PHP and Flex code using Zend Studio 7.1 and Flash Builder 4.

You can register for free here. The webinar will start at 6:00 PM Central European Time (9:00AM Pacific Standard Time) on December 2nd.

LATER UPDATE:

You can download the slides from here, and next week the recording will be available you can watch the recording over here (you need to have a Zend account).

December 1, 2009 | Filed Under Conferences, Flash Builder, Flash Catalyst, Flex, PHP | 8 Comments

PHP and Flex Webinars

Last week I visited Zend headquarters, and I had an interesting talk over there. One effect of this meeting is this: we will start to do webinars together with Zend.

If you want to find more about Zend Studio and other products related to PHP from Zend, or learn more about the integration between the Flash Platform and PHP (Flash Catalyst, Flash Builder, Flex framework) you shouldn’t miss this opportunity. I know that webinars don’t offer the same experience as in-person events. On the other hand, you can attend them from the comfort of your own home, there is no traveling involved and no need to convince your boss to let you attend the event.

We haven’t set the first event date yet, but it should be in the first week of December, and probably it will be in the evening (Central European Time).

Keep an eye on my blog for the exact date and time.

November 9, 2009 | Filed Under AIR, Conferences, Flash Builder, Flash Catalyst, Flex, PHP | 1 Comment

Flex for PHP developers article

Finally, I managed to finish an article that introduces Flex to PHP developers comparing features from both worlds (when it makes sense). I’ve been working on this subject from the beginning of this year. Thus I am so happy that I feel I should go out and smoke a fine Cuban cigar

While working on this article I realized two things:

Writing books it is not easy. My work doesn’t compare with a book at all, but still the amount of work was huge. Now, I have an idea about what it means to work on a book.
Learning a client-side technology coming from the server-side world will never be an easy and straightforward task. You have to adapt to a new world and adopt a different mindset. But then again, with big efforts usually come big rewards! And from my experience, when I learn something new I can always apply some of this knowledge to the concepts I’ve already known.

Enjoy the article and let me know what do you think!

August 14, 2009 | Filed Under AIR, Flex, PHP, Tutorials | 1 Comment

Working in Flash Builder 4 with Flex and PHP

On June 1st we launched the public beta for Flash Builder 4, the newest iteration of our Eclipse-based IDE for RIAs, formerly known as Flex Builder 3. While you can find both evolutionary and revolutionary features in it, in this article I will touch on the data features and Flex – PHP integration features of Flash Builder 4.

In this article, I will show you how can you use a PHP class that manages a MySQL table (offering CRUD operations) in a Flex project. I will build the Flex project and I rely on Flash Builder 4 to set up the Zend Framework for me(because I want to use remoting as a way to talk with the PHP server). After this I will use the new wizard from Flash Builder 4 that introspects a PHP class and creates the ActionScript code to consume that PHP class.

In the end I should be able to have a simple Flex app that lets me see the data records, edit them, and add a new item. For some of the features I’ll have to write code, for others Flash Builder will generate the code. All in all, I think the application can be created in less than 30 minutes.

PHP code

I have two PHP classes that I want to reuse with my Flex application. One class is a data object that acts asa wrapper for one row from my database (MySQL). Here is the structure of the table:

authors
——————————
id_aut – primary key
fname_aut string
lname_aut string

The PHP data object, called VOAuthor, looks like this:

class VOAuthor {
      
   
      
    public $id_aut;
      
    public $fname_aut;
      
    public $lname_aut;
      
}

The second class, called Authors, is the class that manages the table, offering CRUD operations. The code is very straight forward, I don’t use any database abstraction layer. I have three methods one each for reading, deleting, and updating/inserting a record. I use the data object, VOAuthor, within these methods. This is the code:

require_once 'VOAuthor.php';
      
  
      
  
      
//connection info
      
define("DATABASE_SERVER", "localhost");
      
define("DATABASE_USERNAME", "mihai");
      
define("DATABASE_PASSWORD", "mihai");
      
define("DATABASE_NAME", "flex360");
      
  
      
//$o = new MyService();
      
//print_r($o->getData());
      
  
      
class Authors {
      
    
      
    /**
      
     * Retrieve all the records from the table
      
     * @return an array of VOAuthor
      
     */
      
    public function getData() {
      
        //connect to the database.
      
        //we could have used an abstracting layer for connecting to the database.
      
        //for the sake of simplicity, I choose not to.
      
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
      
        mysql_select_db(DATABASE_NAME);
      
        //retrieve all rows
      
        $query = "SELECT id_aut, fname_aut, lname_aut FROM authors_aut ORDER BY fname_aut";
      
        $result = mysql_query($query);
      
        //throw (new Zend_Amf_Exception('error', 11));
      
        $ret = array();
      
        while ($row = mysql_fetch_object($result, "VOAuthor")) {
      
            $ret[] = $row;
      
        }
      
        mysql_free_result($result); 
      
        return $ret;
      
    }
      
        /**
      
     * Update one item in the table
      
     * @param VOAuthor to be updated 
      
     * @return NULL
      
     */
      
    public function saveData($author) {
      
        if ($author == NULL)
      
            return NULL;
      
        //logMe($author);
      
        //connect to the database.
      
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
      
        mysql_select_db(DATABASE_NAME);
      
        if ($author->id_aut > 0) {
      
            //save changes
      
            $query = "UPDATE authors_aut SET fname_aut='".$author->fname_aut."', lname_aut='".$author->lname_aut."' WHERE id_aut=".  $author->id_aut;
      
        } else {
      
            //add new record
      
            $query = "INSERT INTO authors_aut (fname_aut, lname_aut) VALUES ('".$author->fname_aut."', '".$author->lname_aut."')";
      
        }
      
        $result = mysql_query($query);
      
        return NULL;
      
    }
      
    
      
    public function deleteData($author) {
      
        if ($author == NULL)
      
            return NULL;
      
        
      
        //connect to the database.
      
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
      
        mysql_select_db(DATABASE_NAME);
      
        //add new record
      
        $query = "DELETE FROM authors_aut WHERE id_aut = ".$author->id_aut;
      
        $result = mysql_query($query);
      
        return NULL;
      
    }
      
    
      
}

These two scripts sit inside of a folder called “remoting” in the root of the Apache web server document root folder.

Creating the Flex project and the UI of the app

I have the PHP files in place; now it’s time to create the Flex application. First, I need to create a new Flex project. Having opened the Flash Builder 4, I use the “New Flex Project” wizard to create a new Flex project called FlexPHPAMF. Make sure that in the wizard you choose PHP as the server technology, and you give the correct information for the document root of the web server (absolute path and URL).

Now let’s create the UI of the application. To do this, I chose to go in design mode where I added two buttons and a data grid to the stage. One button is labeled “Get Data” and the other one “Save Data”.

Using the data service panel

Finally, I am ready to use the new data wizards.At the bottom of Flash Builder, there is a view called “Data/Services”. Click on “Connect to Data/Service” link. A wizard starts, and you can select the type of the data service.

Because I want to use the PHP classes I have, I choose PHP and I click “Next”.

On this page, you can select to either reuse an existing service from the server, or to let the wizard create a stub for you. Because I have the service, I want to use the Import PHP class option. Flash Builder introspects the service in order to detect the supported operations (in this case, because I am using remoting, it detects the public methods and the return type). But to do so, it needs to install the Zend Framework to your web server.

What is very cool is that you don’t have to worry about the steps needed to install Zend Framework. Flash Builder will do it for you automatically.

After the Zend Framework is installed, on the last page of the wizard you’ll see the available methods. Click Finish.

Now, in the Data/Services view you should have a tree, with the root node named Authors. This is the name of the PHP class that you want to use in Flex. Under this node you have Data Types, and the three methods: deleteData(), getData(), saveData().

At the same time if you take a look at the project structure in the Package explorer, you’ll notice that new packages and files were created.

There is a new package called services.authors, and here you’ll find the service class that you’ll use to connect to the PHP class (Authors.as). This class actually extends a base class that implements all the logic using RemoteObject. The reason for this approach is that when you need to do your customization, you’ll do it in the Authors class. If you decide to use Flash Builder to regenerate the code for the same service (maybe as a result of a change on the server side), this operation will not over write your custom code.

The same goes for the data object (or value object). Flash Builder generated the ActionScript value object to match the PHP class VOAuthor. But again, you might want to do some customizations, and you can do it by touching VOAuthor that extends _Super_VOAuthor. All the generated code stays in the _Super_VOAuthor.

And finally, you’ll find a folder called services that gives you quick access to the Authors.php class.

It is time to fill the data grid with the data from the server. To do so, first you need to make sure that the return type for the getData() operation is an array of VOAuthor objects. If you right click on the name of the operation in the Data/Services view and choose Configure Return Type, you have a way to specify the array of VOAuthor:

To bind the data grid to the result of the getData() operation you have to go into design mode, and then drag and drop the getData() (from the Data/Services view) to the data grid.

If you switch to code view, you’ll see that some ActionScript code was added to the flexPHPAMF.mxml. What you want to do is to grab the line from the function and create a new function that will be called when you click the “Get Data” button and paste the code inside of it. My code looks like this:

protected function getData():void
      
{
      
   getDataResult.token = authors.getData();
      
}
      
[...]
      
  
      
<s:Button x="43" y="220" label="Get Data" click="getData()"/>

The wizard altered the data grid itself, you have the name of the table fields as labels, and the data provider of the data grid is set to the lastResult of the getDataResult object (this object was added to your code by the wizard, in order to help you manage the results of the authors service).

If you run the application and press the “Get Data” button, you should see the data.

Adding editing capabilities

The final part of this tutorial is adding the editing capabilities. I want to be able to edit an existing record using the data grid itself, and I want to have a form and a new button. First go back into design mode, drag and drop an new button on the stage, and change the label to “New”. Then, you’ll use another wizard to generate the form for editing. To do so, you select from the Data/Services view the Data Types node, expand it, and select the VOAuthor node. Right click it and select Generate Form. In the wizard choose “Make form editable” and click Next.

In the second page of the wizard deselect the “id_aut” property. This value will be auto-inserted by the database itself. Click Finish.

After the form is generated, you want to grab the form and position it maybe below the buttons. Also, you may want to change the labels. Finally add a new button in the form and label it “Add”.

Switch back to code view. Now, you need to make some changes. First of all (I think it is a bug), the text fields are not editable (they are Text instead of TextInput). So change the type to TextInput to make them editable. Next, give an ID to the Form itself. I want to have the form invisible when the application is loaded, and only make it visible when the users clicks “New”. For that you set the visible property on the form to false, and you add some code to the New button. Here is my code:

<s:Button x="224" y="220" label="New" click="myForm.visible = true"/>
      
<mx:Form x="46" y="277" id="myForm" visible="false">
      
        <mx:FormItem label="First Name:">
      
            <mx:TextInput id="fname" text=""/>
      
        </mx:FormItem>
      
        <mx:FormItem label="Last Name:">
      
            <mx:TextInput id="lname" text=""/>
      
        </mx:FormItem>
      
        <mx:FormItem>
      
            <s:Button label="Add"/>
      
        </mx:FormItem>
      
</mx:Form>

And if you look in the code, you’ll notice a new object was created:

   1: <authors:VOAuthor id="vOAuthor"/>

You’ll use this instance of the value object VOAuthor to send the new item to the server (remember, the PHP saveData() method expects a single argument of type VOAuthor).

To do so, you need to create a binding between the two text fields from the form and the properties fname_aut and lname_aut of the VOAuthor.

<fx:Binding destination="vOAuthor.fname_aut" source="fname.text"/>
      
<fx:Binding destination="vOAuthor.lname_aut" source="lname.text"/>

The last missing piece is the actual call to the saveData() method. This is very simple;on the click event of the “Save” button you add the call to the authors object getData() method, passing the local instance of VOAuthor (vOAuthor) as the argument:

   1: <s:Button label="Add" click="authors.saveData(vOAuthor)"/>

You can add a new record now. What about editing an existing one? For this we will need a little bit more code. First, you want to register a listener on the data grid in order to know when something was edited (if you set the property editable to true on the data grid, then you can edit information inline). The event you are looking for is itemEditEnd:

<mx:DataGrid x="44" y="37" id="dataGrid" dataProvider="{getDataResult.lastResult}" 
      
        itemEditEnd="dataEdited(event)" editable="true">

Now,let’s define the listener, dataEdited(). Add the following code in the script section of the page:

private function dataEdited(event: DataGridEvent):void 
      
{
      
     vOAuthor = event.itemRenderer.data as VOAuthor;
      
}

This code uses the instance of the value object VOAuthor to store the data used by the edited row.

The last two things you have to do is to create a function called saveData() that is called when the user clicks the “Save Data” button, and to add initialization code for the vOAuthor object when the users clicks the “New” button (this way you avoid updating an item instead of adding a new one if you first edit a row and then add one):

private function saveData():void {
      
   if (vOAuthor != null)
      
      authors.saveData(vOAuthor);
      
}

<s:Button x="224" y="220" label="New" 
      
    click="myForm.visible = true; vOAuthor = new VOAuthor()"/>

The final code of the MXML file should look like this:

<?xml version="1.0" encoding="utf-8"?>
      
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:authors="services.authors.*">
      
    <fx:Script>
      
        <![CDATA[
      
            import mx.events.DataGridEvent;
      
            import services.authors.VOAuthor;
      
            import mx.events.FlexEvent;
      
            import mx.controls.Alert;
      
            
      
            protected function getData():void
      
            {
      
                getDataResult.token = authors.getData();
      
            }
      
            
      
            private function dataEdited(event: DataGridEvent):void 
      
            {
      
                vOAuthor = event.itemRenderer.data as VOAuthor;
      
            }
      
            
      
            private function saveData():void {
      
                if (vOAuthor != null)
      
                    authors.saveData(vOAuthor);
      
            }
      
  
      
        ]]>
      
    </fx:Script>
      
    <fx:Binding destination="vOAuthor.fname_aut" source="fname.text"/>
      
    <fx:Binding destination="vOAuthor.lname_aut" source="lname.text"/>
      
    <fx:Declarations>
      
        <s:CallResponder id="getDataResult"/>
      
        <authors:Authors id="authors" destination="Authors" endpoint="http://localhost/flexPHPAMF-debug/gateway.php" 
      
            fault="Alert.show(event.fault.faultString)" 
      
            showBusyCursor="true" source="Authors"/>
      
        <authors:VOAuthor id="vOAuthor"/>
      
    </fx:Declarations>
      
    <mx:DataGrid x="44" y="37" id="dataGrid" dataProvider="{getDataResult.lastResult}" 
      
        itemEditEnd="dataEdited(event)" editable="true">
      
        <mx:columns>
      
            <mx:DataGridColumn headerText="id_aut" dataField="id_aut"/>
      
            <mx:DataGridColumn headerText="fname_aut" dataField="fname_aut"/>
      
            <mx:DataGridColumn headerText="lname_aut" dataField="lname_aut"/>
      
        </mx:columns>
      
    </mx:DataGrid>
      
    <s:Button x="43" y="220" label="Get Data" click="getData()"/>
      
    <s:Button x="129" y="220" label="Save Data" click="saveData()"/>
      
    <s:Button x="224" y="220" label="New" click="myForm.visible = true; vOAuthor = new VOAuthor()"/>
      
    
      
    <mx:Form x="46" y="277" id="myForm" visible="false">
      
        <mx:FormItem label="First Name:">
      
            <mx:TextInput id="fname" text=""/>
      
        </mx:FormItem>
      
        <mx:FormItem label="Last Name:">
      
            <mx:TextInput id="lname" text=""/>
      
        </mx:FormItem>
      
        <mx:FormItem>
      
            <s:Button label="Add" click="authors.saveData(vOAuthor)"/>
      
        </mx:FormItem>
      
    </mx:Form>
      
    
      
</s:Application>

The delete operation is left as homework for you! Basically you want to get the selected row, grab the object data used by that row and save it into vOAuthor, and then call the authors.deleteData(vOAuthor).

Conclusions

If you are not sure what remoting and the Zend Framework are, you can read my post that explains these matters: Flex and PHP: remoting with Zend AMF. This article uses Flex Builder 3 (the previous version of Flash Builder 4).

You might be wondering about many-to-many or one-to-many associations. Well, at least for now there is no support for PHP (at least there is no wizard that handles any association and generates all the code). Still, I think I could do it much easier using these wizards than without them. Having the glue code generated for me and the Value Object created automatically, being able to have a form generated for a particular data model are all great help. You save time, you save money. Remember with any line of code you write, you might introduce a bug or more. Having more lines generated for you means less bugs .

If you want to take a look at my project, you can download it from here (you’ll find the PHP files and the dump of the database in the service folder from this archive). If you want to install Flash Builder 4, you can grab the beta version from here and use it.

Finally I encourage you to try this for yourself, and let me know what you think. If you find bugs or you want more features in Flash Builder 4, be sure you go to http://bugs.adobe.com and ask your friends to vote for the bug. In the end, this is a beta product. If we can improve it, why not?

June 12, 2009 | Filed Under Flash Builder, Flex, PHP, Tutorials | 25 Comments

Flex and PHP session in Lisbon, Portugal

This week, on April 29th, I will do a Flex and PHP session in Lisbon, Portugal. You can find more details here (time, location, talks).

After the sessions, we could have some beer or wine, and talk a little bit about Flex/Catalyst… See you there

April 27, 2009 | Filed Under AIR, Conferences, Flex, PHP | 2 Comments

How to debug Flex/AIR and PHP applications

Another question I get quite often is “How do I debug my Flex (or AIR) and PHP application?”. Usually I take some time to show a few debug methods when I am presenting Flex/AIR and PHP workflows.

There are several methods that you can use to debug Flex/AIR and PHP applications, each with its own advantages and disadvantages:

Use Flex Builder and Zend debuggers.
1. Pros: it is arguably the most elegant and efficient way; it is not intrusive
2. Cons: you need to have Flex Builder and Zend Studio installed together; it does not work for AIR applications
Use a server side logging function for PHP, and Flex Builder debugger for Flex
1. Pros: it works great for both Flex and AIR apps; you need only Flex Builder
2. Cons: it isn’t so straight-forward; you need to walk through the code and call the logging function until you pin-point the problem. It is very much like doing JavaScript debugging with Alert or PHP debugging with Refresh and die(var_dump($myVar)). It is intrusive because you have to add code to the PHP that is not needed in production.
Use a proxy sniffer, such as Charles
1. Pros: it understands AMF format; it is not intrusive
2. Cons: it is shareware, and it can’t be used for AIR apps
FirePHP. This is actually similar to method two above. The only difference is that you need to install a Firefox extension, and then using this extension and some PHP code you can see the output of the FirePHP logging functions directly inside of your Firebug console.
1. Pros: it is easy to read the four different types of messages (log, info, warn, error) in the console, and it may be familiar for those who already use Firebug (such as AJAX developers)
2. Cons: it works only in Firefox because of the dependency on Firebug; it doesn’t work for AIR, and it is intrusive (you have to add code for it)

Using Flex Builder and Zend debuggers

This is my favorite, and I believe it is the fastest way to debug your code. Although you can’t use this approach for debugging AIR projects, I think it is worth it to create a twin Flex project just to be able to use this approach.

You can read more about this method here, or you can watch my video tutorial here.

Using a server side logging function

Actually, this was my first approach for debugging AIR and PHP applications back in 2007 when I created my first AIR application. At that time, I was using XML-RPC to communicate between the client and server, and as I started to hit bugs I needed something to debug (at that time the PHP debugger wasn’t so reliable, and it was hard to make it work in the Eclipse IDE).

I still use this approach today, when I want to log some variables on the PHP side. I use this function:

function logMe($var) {
    $filename = dirname(__FILE__) . PATH_SEPARATOR .'__log.txt';

    if (!$handle = fopen($filename, 'a')) {
        echo "Cannot open file ($filename)";
        return;
    }

    $toSave = var_export($var, true);
    fwrite($handle, "[" . date("y-m-d H:i:s") . "]");
    fwrite($handle, "\n");
    fwrite($handle, $toSave);
    fwrite($handle, "\n");
    fclose($handle);
}

This function uses a text file (__log.txt) to dump its single argument, together with a time stamp. I can use this function to log primitives as well as complex types. Here is an example of how the file looks after I dump some variables:

[09-03-11 21:56:01]
NULL
[09-03-11 21:56:10]
VOAuthor::__set_state(array(
   'id_aut' => 2,
   'fname_aut' => 'William11',
   'lname_aut' => 'Shakespeare',
))
[09-03-28 15:18:37]
array (
  0 =>
  VOAuthor::__set_state(array(
     'id_aut' => '1',
     'fname_aut' => 'Dante',
     'lname_aut' => 'Alighierie',
  )),
  1 =>
  VOAuthor::__set_state(array(
     'id_aut' => '4',
     'fname_aut' => 'Niccolo',
     'lname_aut' => 'Machiavelli',
  )),
  2 =>
  VOAuthor::__set_state(array(
     'id_aut' => '3',
     'fname_aut' => 'Umberto',
     'lname_aut' => 'Eco',
  )),
  3 =>
  VOAuthor::__set_state(array(
     'id_aut' => '2',
     'fname_aut' => 'William',
     'lname_aut' => 'Shakespear',
  )),
)

This method is very simple, however it is intrusive since you will have calls to the function in your code, and you don’t want these calls to end up in your production code/server. Second, debugging in this way is not so fast, especially if you don’t have a good idea about where in your code base the problem could be.

Using Charles to debug

You can use Charles (which is a Proxy Sniffer) to see what messages are exchanged between the Flex client and the server. This method doesn’t work for AIR applications. Charles knows how to decode AMF messages, thus if you are using Remoting, then you can still see the communication.

After you start Charles, be sure you configure your browser to use Charles as a proxy:

Next, start your Flex application and make a call to the server. In Charles, you can see the request, what method was called from Flex, and the response sent back by the server. In the screen capture below, you can see the information for a remote call on a PHP class using Zend AMF.

This method is great for quickly pin-pointing what Flex sends to a PHP script. If your problem is not solved here, then you have to switch back to method 1 or 2. Or you can alter your code to output the variables from your script, and in Charles you can see the dump (for the example below I just added to my script something like die(var_dump($result));:

Using FirePHP to debug

You can find information about how to use FirePHP here and here.

If you are using Zend Framework, then it is even easier beacause you don’t have to download and install the FirePHPCore library. You need only Firefox, Firebug, and FirePHP extensions installed. Again, you cannot use this with AIR projects. Zend Framework lets you enable and disable the logging very easily:

   1: $writer->setEnabled(false);
   2: $profiler->setEnabled(false);

This means that you don’t have to remove the debug calls when you go to production.

Conclusion

There are many ways to debug Flex/AIR and PHP applications. Depending on the nature of your project, and the nature of your problem, you can use more than one. I hope this post will help you, especially when you take the first steps in Flex and remoting.

April 9, 2009 | Filed Under Flex, PHP, Tutorials | 15 Comments

Flex and remoting with PHP, which library is the best: Zend AMF, AMFPHP, WebORB for PHP, or SabreAMF?

You’ve decided to go for remoting as the way to communicate with your PHP server, and you’re wondering which of these four libraries is the best: Zend AMF, AMFPHP, WebORB for PHP, and SabreAMF?

Well, it will probably surprise you, but I don’t think one is necessarily better than another. There are some small differences, but for me none is so big that I can declare one as the winner. It depends on your specific needs, and the context of your current workflow with PHP apps. And I will explain in a minute why that is.

Performance

For me performance is one of the top criteria that I would use to choose one over another. All these libraries are written in PHP, and although I didn’t conduct an extensive test, I don’t think consider one faster than another. If you wrote a PHP module in C, to add some new API to PHP for remoting, then you could have something much faster. For example, AmFast (a remoting library for Python written in C) is up to 18x faster than PyAMF written in Python.

As the situation stands today, I don’t think we have a winner here. If someone performs a test and finds that I am wrong, please let me know!

Documentation and ease of use

Here, the alternatives are not so level. While implementing examples with each one of them, I must say AMFPHP was the easiest to use. The documentation is OK, since it has been around for some time you can find articles explaining how to use it; and it has a Services Browser, a Flex application that lets you test your PHP services. This can be very handy when you are debugging a project. There is a folder where you can drop your service and it will be automatically picked up, and a folder for your VOs. These two folders can be configured.

WebORB has good documentation too, and it comes with examples. There is also a Flex application that provides easy access to some quick start articles, a browser service, a code generator, and a way to configure the destinations. I didn’t find this code generator particularly helpful. For example, I expected to generate an ActionScript class out of the PHP model class, instead it generated a wrapper class for the remote object, and it tried to generate the ActionScript model. I say it tried to generate, because it generates a strange data model, which basically has a property for each method on your PHP remote class of Object type. It has a special folder where you have to add your services and VOs.

The next one is Zend AMF. It has decent documentation and is the newest on the market. The guy who developed it, actually is the same guy who created AMFPHP, so it must be good. However it doesn’t have a service browser, so it is harder to debug the PHP code compared to the previous two. But it has a big advantage: it is part of Zend Framework. So if you are already using Zend Framework, or you plan to use features from it, then this is the choice for you. You need to create a bootstrap file to start the AMF server, to add the services (either one by one, or by folder), and to set the correspondence between the ActionScript and PHP data model classes.

The last one is SabreAMF. The documentation is not so good and there are not so many articles, but if you know what remoting is, then you can find your way. It is little bit strange to use, as it doesn’t impose any particular structure. You have to create a boot strap file, where you configure the corresponding data model classes. And you need to create a callback function that will do the lookup for your service classes. Actually, if you change the callback function a little bit, you can even call your defined functions, not only object’s methods.

Footprint

The smallest ones are SabreAMF and AMFPHP. These two just do remoting. Zend AMF is part of Zend Framework, an application framework for PHP (so you have a lot of functionality, and a lot of code). WebORB for PHP does remoting, plus messaging and data management. So again, there is more code in it.

Future

It seems all four libraries are maintained, although two of them have companies behind them: Zend AMF with Zend Technologies, and WebORB for PHP with Midnight Coders. The other two have one smart developer behind them. The thing is that it doesn’t really matter who is behind it, because it is really easy to switch from one framework to another one. Thus, if in the future you find that your PHP library for remoting is no longer maintained, it is not the end of the world; you can switch to another one.

Mirror, mirror on the wall, who is the most beautiful of them all?

Instead of spending too much time deciding which one to choose, just play with it or look at an example and see for yourself which one you are in tune with. If you have some special needs, for example, if you are already using Zend Framework, or using another framework, then it is even easier to choose.

As I already said, even if you eventually find that you made the wrong choice, it is not the end of the world, you can switch to another one very easily.

Happy remoting, people!

PS. If you have a favorite, do you mind posting a comment to briefly explain why you chose it? Thanks!

March 31, 2009 | Filed Under AIR, Flex, PHP | 23 Comments

Flex and PHP: remoting with SabreAMF

In the past months I have written a lot about Flex and PHP remoting using AMFPHP, ZendAMF, and WebORB. However, there is another library, SabreAMF, that can be used to do remoting. This article explains how to use it.

If you don’t know what remoting is (or AMF), then it might be a good idea to read my earlier post first (look for the “What is AMF and remoting and why should you use it” section).

Installing SabreAMF

You can download the library from here, and here you can find some documentation. I will say upfront, that indeed, compared to the other three PHP libraries for remoting, SabreAMF offers less documentation.

Unzip the archive somewhere on your hard-disk. You have two alternatives for using it with your PHP code:

You can add the library to your PHP include_path in your php.ini file. To do this you need to create a folder, called for example “mysabre”, and in this folder create a folder called “SabreAMF”. In this last folder copy all the files from the archive (AMF0, AMF3, examples, and so on). Next, open the php.ini file and search for the line include_path and add the absolute path to the folder mysabre. On my machine, this looks like this:
include_path = “/frameworks/mysabre”
Alternatively, you can create a folder called “SabreAMF” inside of your PHP working directory, and copy to this folder all the files and folders from the archive.

You are now ready to move to the PHP code you need for this example.

Create the Flex project

Usually, when I work with Flex and PHP projects, I prefer to use Flex Builder and Zend Studio installed together. It is possible, however, to work with Flex Builder and a PHP plugin to help you with the PHP code. Either way, you should create a Flex project that uses PHP on the server side (if you plan to use Zend Studio and Flex Builder, first create a Zend PHP Project, then use the Add Flex Nature wizard to add Flex PHP nature on the project). This way you streamline the deployment of the SWF file (the compiled result of the Flex project) to the PHP server. I chose to create a new project called “flex_sabre”.

Next, create a folder inside the PHP server root named “sabreamf_remoting”, and add this folder to the project. Choose New > Folder, and then click on the Advanced button.

Create the PHP code

The example will use a PHP class to manage one table from a MySQL server.

In the “sabreamf_remoting” folder, create three PHP files: MyService.php, VOAuthor.php, and index.php. Open the MyService.php page and paste the following code (you need to update the connection information for your specific database setup; to do this, look for the four constants at the top of the class):

<?php
require_once 'VOAuthor.php';

//conection info
define("DATABASE_SERVER", "localhost");
define("DATABASE_USERNAME", "mihai");
define("DATABASE_PASSWORD", "mihai");
define("DATABASE_NAME", "flex360");

//$o = new MyService();
//print_r($o->getData());

class MyService {

    /**
     * Retrieve all the records from the table
     * @return an array of VOAuthor
     */
    public function getData() {
        //connect to the database.
        //we could have used an abstracting layer for connecting to the database.
        //for the sake of simplicity, I choose not to.
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
        mysql_select_db(DATABASE_NAME);
        //retrieve all rows
        $query = "SELECT id_aut, fname_aut, lname_aut FROM authors_aut ORDER BY fname_aut";
        $result = mysql_query($query);
        //throw (new Zend_Amf_Exception('eroare ca asa vreau eu', 11));
        $ret = array();
        while ($row = mysql_fetch_object($result, "VOAuthor")) {
            $ret[] = $row;
        }
        mysql_free_result($result);
        return $ret;
    }
        /**
     * Update one item in the table
     * @param VOAuthor to be updated 
     * @return NULL
     */
    public function saveData($author) {
        if ($author == NULL)
            return NULL;
        //connect to the database.
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
        mysql_select_db(DATABASE_NAME);
        if ($author->id_aut > 0) {
            //save changes
            $query = "UPDATE authors_aut SET fname_aut='".$author->fname_aut."', lname_aut='".$author->lname_aut."' WHERE id_aut=".  $author->id_aut;
        } else {
            //add new record
            $query = "INSERT INTO authors_aut (fname_aut, lname_aut) VALUES ('".$author->fname_aut."', '".$author->lname_aut."')";
        }
        $result = mysql_query($query);
        return NULL;
    }

    public function deleteData($author) {
        if ($author == NULL)
            return NULL;

        //connect to the database.
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
        mysql_select_db(DATABASE_NAME);
        //delete a record
        $query = "DELETE FROM authors_aut WHERE id_aut = ".$author->id_aut;
        $result = mysql_query($query);
        return NULL;
    }

    public function setCredentials($user, $password, $charset) {
        return true;
    }
}

?>

This is the class you will call from Flex. It has three methods: one to get all the records from the table, another to update the values for one record, and the third to delete a record.

Let’s create the code for the Value Object, the data model. This is used by the MyService class to wrap one row from the table. Thus, the method getData() returns an array of VOAuthor, and the method saveData() receives one argument: the VOAuthor of the row that was changed. Open the file VOAuthor.php and add this code:

<?php
class VOAuthor {
    public var $id_aut;
    public var $fname_aut;
    public var $lname_aut;
}
?>

As you can see, this class is very simple; it just provides the same members as the fields from the table. Finally let’s create the code for index.php file. This is the plumbing code that exposes the MyService class to Flex clients with the help of SabreAMF. Add the following code:

<?php
require_once 'SabreAMF/CallbackServer.php';
require_once 'MyService.php';
require_once 'VOAuthor.php';

function myCallback($serviceName, $methodName, $arguments) {
    // You can use the servicename to lookup and instantiate a service class
    $serviceObject = new $serviceName;
    if (!is_array( $arguments)) {
        $arguments = array($arguments);
    }
    // check the php manual if you don't know what this function does
    return call_user_func_array(array($serviceObject, $methodName), $arguments);
}

//map the AS VO to PHP VO
SabreAMF_ClassMapper::registerClass('org.corlan.VOAuthor','VOAuthor');


// First we'll create the server object
$server = new SabreAMF_CallbackServer();
// setup the callback
$server->onInvokeService = 'myCallback';
// parse the request and spit out the response
$server->exec();
?>

And this is the part where you have to pay attention. Chances are that if you encounter problems later, the root of the problems is in this file. First of all, you use an instance of SabreAMF_CallbackServer to set up the server that knows how to handle the remoting calls from Flex. Next, you add a PHP function as the callback for the onInvokeService property of the SabreAMF_CallbackServer. This function will be called each time the PHP server receives a remote call. Next, you define the callback function. In my code, the function is called myCallback.

You might wonder why you need to do this, and why it is not done automatically for you by SabreAMF. Indeed, it would have been very easy to have a default function registered for you, so you don’t have to do this copy & paste step. However, there is a reason: you can write your own function and you can handle different calls in different ways. In other words, it is easy to customize how a specific remote call should be handled by your code. If you are not satisfied with this answer, please let me hear your opinion

And finally, you use the static method registerClass(‘package.remoteclass,’localclass’) on SabreAMF_ClassMapper object to tell PHP which ActionScript VO corresponds to the PHP VO.

And now, you are ready to move to the client code.

Creating the Flex application

This is very simple code. You have the MXML file with a RemoteObject to do the calls to the PHP class. Then you have a data grid to display and edit the existing records, and two buttons: one for save and one to get the data. Next there are a bunch of functions, some are listeners for various events (result event or fault event on the remote object, change item on the data grid). Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" >
<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.rpc.events.FaultEvent;
        import org.corlan.VOAuthor;
        import mx.events.DataGridEvent;
        import mx.rpc.events.ResultEvent;

        private var item:VOAuthor;

        private function init():void {
            myRPC.getData();
        }
        private function getDataListener(event:ResultEvent):void {
            dg.dataProvider = event.result;
        }
        private function editListener(event  ataGridEvent):void {
            item = event.itemRenderer.data as VOAuthor;
        }
        private function saveDataListener(event:ResultEvent):void {
            item = null;
            init();
        }
        private function saveData():void {
            if (item == null)
                return;
            myRPC.saveData(item);
        }
        private function faultListener(event:FaultEvent):void {
            Alert.show(event.fault.faultString);
        }

    ]]>
</mx:Script>

<mx:RemoteObject id="myRPC" destination="MyService" endpoint="http://localhost/sabreamf_remoting/index.php" source="MyService" fault="faultListener(event)">
    <mx:method name="getData" result="getDataListener(event)"/>
    <mx:method name="saveData" result="saveDataListener(event)"/>
</mx:RemoteObject>
<mx:VBox>
    <mx:DataGrid id="dg" editable="true" itemEditEnd="editListener(event)" />
    <mx:Button label="Save" click="saveData()" />
    <mx:Button label="Get Data" click="init()" />
</mx:VBox>

</mx:Application>

And finally, you have to create the ActionScript Value Object, org.corlan.VOAuthor:

package org.corlan
{
    [Bindable]
    [RemoteClass(alias="org.corlan.VOAuthor")]
    public class VOAuthor
    {
        public var id_aut:int;
        public var fname_aut:String;
        public var lname_aut:String;
    }
}

With this object, you must pay a little bit of attention. Normally, the value for the alias attribute should be VOAuthor (as the PHP class doesn’t have a package name). However, if you want receive typed objects in Flex and not anonymous objects, you have to put the same value as the fully qualified class name itself (and this is the value you set up in the index.php file too).

Conclusion

That’s it. You can download the project from here. I will write an article soon that compares the four available libraries for PHP and Flex remoting.

March 26, 2009 | Filed Under AIR, Flex, PHP, Tutorials | 4 Comments

Do you want to join the Flex Builder Pre-Release Program?

As you know, we are working hard on the next version of Flex Builder (code name Gumbo). There will be many additions that should appeal to PHP developers, and we want to hear your thoughts on these features. So, if you want to have the chance to be part of the Flex Builder pre-release program, just visit this link and fill in the survey: http://www.surveymonkey.com/s.aspx?sm=p1w3z8obcRi28iht1_2fFzbQ_3d_3d

February 23, 2009 | Filed Under Flex Builder, PHP | 2 Comments

RSS for Articles
RSS for Comments
My Twitter
About me
I am a Platform Evangelist for Adobe. The views expressed on this site do not necessarily reflect the views of Adobe Systems Incorporated. More about me.
Fx Gallery
A Drupal Module created with Flex. Module's Page Test Drive
Upcoming Events
- 24 March:
  - Debugging Flex and PHP Projects (12:00 pm)
- 13 May:
  - Italian Trip (5:00 pm)
Event Calendar

« Feb Apr »

March 2010
M T W T F S S

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 EC
Recently Written
Categories
- AIR
- BlazeDS
- Books
- Conferences
- Events
- Flash Builder
- Flash Catalyst
- Flash Player
- Flex
- Flex Builder
- Java
- LCDS
- LiveCycle
- LiveCycle Data Services
- Mobile
- OSP
- Others
- PHP
- Presentations
- Tutorials
- Video
Archives
Blogroll

PHP code

Creating the Flex project and the UI of the app

Using the data service panel

Adding editing capabilities

Conclusions

Using Flex Builder and Zend debuggers

Using a server side logging function

Using Charles to debug

Using FirePHP to debug

Conclusion

Performance

Documentation and ease of use

Footprint

Future

Mirror, mirror on the wall, who is the most beautiful of them all?

Installing SabreAMF

Create the Flex project

Create the PHP code

Creating the Flex application

Conclusion

About me

Fx Gallery

Upcoming Events

Event Calendar

Recently Written

Categories

Archives

Blogroll