Article
About the Author
Lennart Steinke
Lennart Steinke has a black belt in jujutsu, is a book author and a general all-round geek. He has a C++ and Java background, and spends his time building large scale Flex applications.
Pimp Your PHP App with Flex!
If you’re looking to add some pizzazz to your PHP application, look no further—Adobe’s Flex is here to give your interface some polish. In this article Lennart Steinke shows us how to make a Flex widget with a PHP back end. Read carefully, because there’s a quiz at the end: for a limited time, every entrant scores a free Flex reference just for doing the quiz, plus three lucky winners will each receive a free copy of Adobe’s Flex Builder 3!
Flex is Adobe’s open source web application framework designed for speedy development of web or desktop applications. It allows you to build software that’s then compiled into a Flash (SWF) file, and can be run in any browser with the Flash plugin installed. Best of all, it’s fun to use. You can create great looking applications easily: eye candy and pleasing effects are built in, and can be added to your app with just a few lines of additional code. This allows you to create a cool application in a short amount of time. Oh, and did I mention that it’s fun to use?
If you’re brand new to Flex, take a look at our earlier Flex tutorial. It’ll walk you through the process of installing the Flex Builder development environment, and introduce you to some of the key concepts of Flex development.
In this article, we’ll go a step further and learn how to use Flex alongside PHP, by creating a product information widget in Flex that uses PHP to retrieve the product information. Before you start, grab a copy of the Flex Builder 3 demo from Adobe—we’ll be using it to create our widget.
The Example Widget
The small widget we’re going to build shows a product image with a description and a link to a product information page. It will consist of these basic components:
- a Flex application to display the widget
- an HTML page that contains the Flash
- and later, a PHP script to present product data as XML or JSON
To start out, we’ll embed the product information in the Flex application while we build our widget. Once we’ve sorted out the Flex part, we’ll change the code to learn how to retrieve our data from an XML file.
Let’s start by creating a new Flex project using Flex Builder. Enter ProductWidget as the project name, make sure that the Application Type is set to Web application, and then hit the Finish button.
This will create a basic project, including a template HTML file to load and display the application, as well as a bare-bones application—ProductWidget.mxml. Unless you changed your Flex Builder layout, the main application file will be visible in the text editor on the right side of the screen. Make sure that the ProductWidget.mxml file is displayed in the editor. If you’re unsure, look for a file named ProductWidget.mxml in the file tree on the left and double-click it. This will ensure that the correct file is loaded.
Inside the file, you’ll see the beginnings of a Flex application, contained in mx:Application tags. We’re going to add a box to contain our widget, a placeholder for an image, and a button which will contain a link. Between the mx:Application tags, add the following code:
<mx:VBox top="0" left="0" right="0" bottom="0">
<mx:Image id="image" width="150"/>
<mx:LinkButton label="LinkButton" id="link" width="150"/>
</mx:VBox>
The mx:VBox is a layout component and it will make sure that the image and the link button are displayed below each other. Both items are also 150 pixels wide.
Hit the Run button in the toolbar (the green button with the white arrow in it) to make sure everything works. Your browser should open and display a rather empty looking page, with the LinkButton we created earlier sitting in the corner.
In the next step, we’ll tell our Flex app about our product image, button text, and button link.