Introduction to Flex Using PHP

Getting Started with PHP and Flex

With all the hype (and money) surrounding buzzword terms like Web 2.0 and Rich Internet Applications (RIA), it's easy to wonder, "How can I integrate that into my PHP application?" Certainly, Asynchronous JavaScript and XML (Ajax) technologies that use JavaScript code are a good option. But you should also have a look at the Adobe Flex framework. With Flex, you can quickly build functional, attractive user interfaces in Adobe Flash that communicate to your PHP web application through XML.

Let's step back and look at what Flex is and how it compares to standard HTML development with a language like PHP. Both the traditional Web 1.0 HTML architecture and the Flex-based architecture are shown in Figure 1.

On the left, you can see the standard PHP workflow you've come to know. The browser makes a request of the PHP web page, which talks to the database and sends back HTML to satisfy the customer's request.

On the right is the Flex approach. The customer navigates to the page, where a Flex application (a SWF file) is loaded that contains the user interface for the form. This Flex application then uses XML to read or write data to the PHP pages on the server. Those new PHP pages talk to the database and return XML to the Flex application for display. The dashed lines on the list.html and list.swf files indicate that they were generated by Adobe Flex Builder 2.

The advantage of Flex is that the framework provides an amazing set of interface tools that make it easy to build highly interactive user interfaces. In addition, there are many advantages to having the PHP pages return XML instead of (or in addition to) HTML. Here are just a few:

Desktop applications, such as Microsoft Office Excel, are starting to consume XML, making it easier for your customers to access their data.

Your customers can write or modify their own applications to use your XML instead of screen scraping your HTML pages.

If you choose a standard XML data format, such as RSS, specialized readers support the format.

You can use XSL to query or format the data from the server however you choose.

In Flex Builder, you edit the list.mxml file. When you click Run to test the page, Flex Builder compiles the list.mxml file into an SWF file and builds a page that references that file. You can test the file locally on your machine and, when it's ready, push the HTML and SWF files up to your web pages to get them into production. Flex Builder even has a fully integrated debugger that you can use to step through the ActionScript code that runs in the Flex application.

The rest of this article walks you through installing Flex Builder 2, creating a Flex project, and attaching it to a simple PHP web application.

Installing Flex Builder 2

Flex Builder 2 is available as a free trial download from Adobe. It runs on both Microsoft Windows and Mac OS X and has a simple installer on both platforms that gets you up and running quickly. You have two download options: the standalone version and an Eclipse plug-in. When in doubt, choose the standalone version.

Flex Builder 2 is based on the Eclipse integrated development environment (IDE) framework. If you are familiar with Eclipse or you are using it already, you might want to download Flex Builder as a plug-in and simply add it to your existing Eclipse installation. I mention this because there are a couple of good IDEs for PHP that are also based on Eclipse. One is PHPEclipse, another is Eclipse's own PHP Development Tools project. So, having both the PHP IDE and the Flex Builder 2 plug-ins installed gives you a single IDE to work on your user interface and your backend PHP code. (In addition to the Flex Builder 2 download, have a look at Adobe's PHP/Flex page.)

After you've installed Flex Builder 2, launch it and create a new project. To do this, select File > New > Flex Project. A dialog box similar to Figure 3 appears.

Figure 3. The first page of the New Flex Project Wizard

Select the first option, Basic, because you're going to use PHP pages on the server to get to the data. Click Next, which takes you to the final New Project Wizard page (see Figure 4).

Figure 4. The second page of the New Flex Project Wizard

I've named the project flex_php, but you can use any name you like. By default, the wizard puts the files in your My Documents directory on Windows (your Documents directory on Mac OS X). You can change that location, as well.