ONLamp.com
oreilly.comSafari Books Online.Conferences.

advertisement


Introduction to Flex Using PHP
Pages: 1, 2, 3

Listing 3. addform.php

<?php
header('Content-Type: text/xml');

require_once("DB.php");

$dsn = 'mysql://root@localhost/flex_php';
$db =& DB::Connect( $dsn, array() );
if (PEAR::isError($db)) { die($db->getMessage()); }

$sth = $db->prepare(
  "INSERT INTO emails ( first, last, email ) VALUES ( ?, ?, ? )"
);

$db->execute( $sth,
  array( $_POST['first'], $_POST['last'], $_POST['email'] )
);
?>
<ok />

This simple script first tells the web server that the return type is XML. It then connects to the database, prepares the INSERT statement, and runs it with the variables provided by the POST arguments that will come from the Flex application. Flex applications use POST data just like any other web client, which makes it easy to connect with existing web applications.

That's all you need on the PHP scripts side. Now, you must build the Flex applications for viewing the subscriber list and adding new subscribers. I separate the frontend of the application into two components: a backend Flex application for administrators that views the list of subscribers, and a frontend Flex application that offers a subscription form to the customer.

Building the Subscriber Viewer

To build the backend subscriber viewer, you need to wrap a Flex user interface around the XML list.php page. Creating an attractive data viewer for XML data that comes from PHP couldn't be easier with Flex. Listing 4 shows the list.mxml file.

Listing 4. list.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:XML id="mydata" source="http://localhost/flex_php/list.php"></mx:XML>

  <mx:DataGrid id="emaillist" x="10" y="10" dataProvider="{mydata..subscriber}">
    <mx:columns> 
      <mx:DataGridColumn dataField="first" /> 
      <mx:DataGridColumn dataField="last" /> 
      <mx:DataGridColumn dataField="email" /> 
    </mx:columns> 
  </mx:DataGrid>
</mx:Application>

The <mx:XML> tag defines the location of XML data source. (That's the list.php file you put together earlier.) The <mx:DataGrid> tag is a Flex control that displays data in a tabular format. To tell the DataGrid control which fields to display, create an <mx:columns> tag that contains <mx:DataGridColumn> tags for each field.

Now, when you click Run, a browser pops up, and you see the subscriber list (See Figure 7).

The Flex list application, which shows the subscribers
Figure 7. The Flex list application, which shows the subscribers

Not only is the data grid attractive, it's also functional. For example, clicking the headings allows you to change the sort ordering without having to add that code to your PHP script or go back to the server for the data. And you can change the order of the columns as you like—again, without going back to the server.

I've done a lot of Ajax and Dynamic HTML (DHTML) work, and I certainly haven't seen a way to display data as quickly or as cleanly as this approach.

Building the Subscriber Add Form

The next step is to build the frontend subscription application that will allow users to register. This form uses the addform.php script on the server to add new entries to the database. The MXML script for the form is shown in Listing 5.

Listing 5. addform.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:HTTPService id="srv" url="http://localhost/flex_php/addform.php" method="POST">
    <mx:request>
      <first>{first.text}</first>
      <last>{last.text}</last>
      <email>{email.text}</email>
    </mx:request>
  </mx:HTTPService>

  <mx:Form>
    <mx:FormItem label="First Name">
      <mx:TextInput id="first"/>
    </mx:FormItem>
    <mx:FormItem label="Last Name">
      <mx:TextInput id="last"/>
    </mx:FormItem>
    <mx:FormItem label="Email">
      <mx:TextInput id="email"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button label="Subscribe" click="srv.send()"/>
    </mx:FormItem>
  </mx:Form>
</mx:Application>

At the top of the file is the definition of the HTTP service that the PHP addform.php script provides. At the bottom is the form, with all the labels and text input areas as well as the Subscribe button.

When you click Run, the Flex application shown in Figure 8 appears in the web browser.

The subscriber add form
Figure 8. The subscriber add form

Type a first name, last name, and email address, then click Subscribe. From there, you can go back to the Flex list application and see the new entry (Figure 9).

The list with the new data
Figure 9. The list with the new data

This example doesn't even begin to cover the surface of what you can do with Flex and its user interface toolkit, but it does give you a simple path to connecting your PHP web application to a Flex application in a real way. The final step is to push the HTML and SWF files in your project's bin directory to your web server, which puts your Flex application into production.

Conclusion

Flex isn't the only way to create RIAs; JavaScript and Ajax can also provide your applications with a lot of interactivity. But Flex has many advantages. First, it has a rich cross-platform user interface toolkit that's easier to work with, in some cases, than the DHTML model. Second, it encourages you to architect your PHP application to support HTML and XML interfaces, which is good for everyone.

Flex Builder 2's biggest advantage is its ability to create self-contained SWF files from MXML applications that talk to your web server. This means that you can create small widgets or Flash-based interface enhancements for your site quickly. That's a nice way of getting into Flex without having to move your entire interface over to it. Give it a try; I think you'll be blown away.

Jack Herrington is an engineer, author and presenter who lives and works in the Bay Area. His mission is to expose his fellow engineers to new technologies. That covers a broad spectrum, from demonstrating programs that write other programs in the book Code Generation in Action. Providing techniques for building customer centered web sites in PHP Hacks. All the way writing a how-to on audio blogging called Podcasting Hacks.


Return to ONLamp.com.



Sponsored by: