New PHP Features in Flash Builder 4 - Part 1: Data-Centric Feature Overview

PHP and the Flash Platform are  no strangers. when Flash Player 4 added dynamic data features via query strings, PHP was there. When Flash Player 5 added XML support, PHP was there. When Flash Player 6 added support for Flash Remoting and AMF, new PHP projects such as AMFPHP emerged. With Flash Player 7 came the Flex application framework. Flex 3 took PHP support to heart with a built-in data wizard in Flex Builder 3, and an update and overhaul of AMFPHP in partnership with Zend, producing Zend AMF.

Now we are on the cusp of the latest and greatest chapter in that relationship with beta builds of Flex 4 and related tooling available on Adobe Labs. In this three part article series we will take a look at what the PHP developer can expect from some of the more data-centric features provided these latest releases. The first part will take a look at a branding change, and move onto an overview of data-centric development. Parts two and three will talk about the role of Zend AMF, and and look at how Flash Builder 4's PHP support is pushing new boundaries with features such as implicit paging and data management.

Editor's Note: This article is designed as an informational overview of the PHP-related features of Flex 4 and Flash Builder 4, which are currently in a beta state available on Adobe Labs.  These products are not yet feature complete, and their implementation is subject to change.  This overview is not intended as a step-by-step tutorial.

Branding Changes

Flex Builder originally came about with Flex 1.5 and was originally based on Dreamweaver.  Flex Builder 2 saw the move to an Eclipse-based tool, really embracing the movement of many vendors (including Zend) to a common IDE foundation.  Flex Builder 3 extended the tooling by adding support for pure ActionScript projects - projects that didn't use the Flex Framework.  Flash developers could use Flash Professional to create their assets and content, and then use Flex Builder 3 to code up the document class and other supporting classes, but never touch the Flex Framework.

Further yet, entire applications could be written using only ActionScript projects, that never touched Flash Professional or the Flex Framework.

To be more inline with this usage of the IDE to create all types of Flash-based content, both those using the Flex Framework and those not using it, Flex Builder is now called Flash Builder 4.  Flash Builder it still built on Eclipse, it is still available as standalone or plug-in options, and it still works with Zend Studio. The open source Flex SDK, including the Flex Framework is still called Flex, and Flash Builder still has pure ActionScript project support. Flash Builder also still has great PHP support - in fact it is more robust now than ever before.

Getting Started with Flash Builder

Once you have Flash Builder downloaded, installed and started up, the first thing you'll want to do is create a new project. As you walk through the New Project wizard, you will notice that the PHP project type is still there. As a reference, here is an example of my project settings pointing to a local MAMP (http://www.mamp.info) installation.


Once your project is created, you will probably want to connect to some data. With Flex 3 you had the option of XML, or any character format really, over HTTP. You could also tap into binary over HTTP in the form of AMF using Zend AMF. While you can still do that, there are some new MXML sections designed to resolve markup ambiguities.

As an example, you might have declared an HTTPService tag right before a DataGrid tag - but one is for data access, while the other is a user interface component. To resolve this type of ambiguity, there is now a new Declarations section defined in MXML. Using HTTPService elements, as well as other service elements and non-visible properties, now look something like the following code example.

<?php include "database.php" ?>


<?php
  $sql = "SELECT * FROM contacts";
  $result = mysql_query( $sql );
?>


<rolodex>


<?php while( ( $row = mysql_fetch_array( $result ) ) != false ) { ?>


  <contact id="<?php echo $row["id"] ?>">
    <firstname><?php echo $row["firstname"] ?></firstname>    
    <lastname><?php echo $row["lastname"] ?></lastname>
    <email><?php echo $row["email"] ?></email>
    <mobile><?php echo $row["mobile"] ?></mobile>
  </contact>


<?php } ?>


</rolodex>

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  pageTitle="Getting Started"
  creationComplete="svc.send()"
  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>
  <mx:HTTPService
    id="svc"
    url="/contacts/inline/getcontacts.php"/>
</fx:Declarations>


<mx:DataGrid
  left="10"
  right="10"
  top="10"
  dataProvider="{svc.lastResult.rolodex.contact}"/>


</s:Application>

Architecturally, the problem with this code sample is that the XML results are bound directly to the user interface.  This creates a brittle dependency.  If your model (XML) changes, then every part of the user interface (UI) that touches it will also need to be updated.  A cleaner way to do this is to put the resulting data, XML or otherwise, into its own data model.  This most commonly takes the form of an array of value objects inside a collection, where the collection is then bound to the UI.

This separation of data access from data model, from user interface, insulates you from any changes with the underlying data structure.  If the XML changes, the only code you need to touch is the mapping to the collection, while the UI stays intact without modification.  That is a wonderful separation to have, but it is also a lot more work up front. To address this gap Flash Builder 4 adds a new set of data-centric development (DCD) features.

Introducing Data-Centric Development

With your new Flash Builder project created, you will find a new panel at the bottom of the IDE called "Data/Services."  By default, with no services yet configured, you will find a link inside that panel to "Connect to Data/Service."  When you click on this link, if you have configured your project for PHP, then you will see three different options.


HTTPService is just like you might think - use HTTP requests to get XML data.  This is exactly what the previous code does, but without that model/view separation.  The WebService option is an extension of the HTTPService approach, but tailored for use with web services and related standards such as SOAP.  We will talk more about the PHP option later, but for now just know that this is shorthand for Zend AMF.  For now let us move ahead with the HTTPService option using the previous PHP code. The next dialog will expect you to name the service, and specify the various operations you would like this service to perform.  In the previous PHP code, we got all the records in the database and returned them as XML data. We can add that endpoint as an operation, give it whatever name we would like, and pass any required arguments (none in this case). You can repeat this process for the various endpoints pertaining to the same data (e.g. a "createItem" operation to create a new record).

When you fill out the fields and click the "Finish" button, you will be prompted with a reminder to set your return data types.  This is the collection part I mentioned earlier. To have Flash Builder create the data type(s) for the records we are dealing with for this service, right-click on the method you want to use and select "Configure Return Type."  Since we have not created any service data types yet, we will want to create a new type for our XML data.


Once we have configured the data type for this service endpoint, it is likely that the other endpoints for this service use the same data type.  If you select a different endpoint and run the wizard again, you will see the data type from the last time available to you in the existing data type list.  Moving along, Flash Builder will next need some sample data on which it can base your return data type.

If there are any parameters needed to get the sample, you can provide those arguments by entering parameter values.  Or perhaps you have a chunk of the XML return already handy and you just want to cut and paste into Flash Builder.  In this case I'm going to tell Flash Builder where to get the sample data by providing a full URL to the endpoint.

Once the results have been processed it is time to tell Flash Builder what node of the XML represents the data type.  The default for the above code is the root XML node of "rolodex" which is not the node that actually represents the data type.  You can select the node you are interested in using from the drop down box and check the node values - in this case the contact node.  Finishing the wizard will update the "Data/Services" panel to show our endpoint configured with the appropriate return data type.

From here we can simply drag the method name from the Data/Services panel onto a DataGrid or similar data control.  The data binding will be created for you, as well as the columns themselves based on the data type we just created.  There is a nice new dialog for managing DataGrid columns as well that I suggest you check out at some point.  All we need to do now is run the application and see the data-centric development features in action.

(Click on the Above Graphic for Full-Sized Image)

If you were watching closely, what has happened is that Flash Builder has created the appropriate data model for your application.  Did the endpoint of your service change?  Did the formatting of the results change?  Just run the wizard again to have the relationships updated.  Your user interface now binds to the service model and is safely insulated from service changes.  This is just the core of the new data-centric development features in Flash Builder 4, but it foes a lot further.  In parts two and three of this series, we will take a closer look at Zend AMF and features such as implicit paging and data management