Master-Detail Flex Application

I’m an Adobe writer assigned primarily to Flex Builder and the Flex SDK. I joined Adobe in October of 2007 and have spent the first few months learning and using Flex and Flex Builder.

I’ve recently completed my first Flex application, and am using this blog to write about my learning experience, and also to describe some of the concepts behind the application that make it work. Actually, these are two applications that work together, vRadio and RadioLoginDB.

These applications illustrate how to use Flex to create a master-detail application that accesses data from a PHP server, and also incorporates PHP sessions.

At the end of this posting is a list of documentation sources I used to learn how to create the applications. I also have links to the source files.

vRadio and RadioLoginDB applications

I have always been a fan of Community Radio, and in the past I’ve Googled “Community Radio” to find new stations to listen to over the web. I created the vRadio application to provide a Flex alternative that lists Community and Talk radio stations, providing details about each station including station name and location, station graphic, and clickable links to open the station. RadioLoginDB is a CRUD application to update the database of radio stations used by vRadio.

vRadio is a Master-Detail application, and corresponds to many type of applications that present stored data in a variety of presentation formats, and also provide forms for updating the data.

What is interesting about the the vRadio application is the way Flex handles XML data using the E4X format. By providing an XML feed into the vRadio application, the application displays the XML data in a tree view. When the user clicks a node in the tree, details are displayed.


The vRadio application stores the radio stations in a MySQL database, accessible from PHP calls on the web server.vRadio2.gifNotice the link to Update Station List in vRadio. This link takes you to a log in page for the RadioLoginDB CRUD application. Upon successful login, you can update the MySQL database information inline in a Flex DataGrid, delete records from the DataGrid, or open a form to add new stations.vRadioDB2.gif

Using E4X to Access XML Data

The vRadio application implements an HTTPService that uses E4X to read XML generated by the php2xmlService.php on the server. php2XMLService reads a MySQL database containing details on radio stations. This allows the vRadio application to display the master-detail information about the radio stations.To implement this feature, I first used a static XML file, radio_stations.xml, as the data source for the HTTPService. radio_stations.xml contained the information for a few radio stations, and allowed me to understand the structure of the XML document that was needed. I then put the radio station data into a MySQL database, and wrote the php2xmlService.php to echo the XML stream.

Flex Builder: Generating a CRUD Application from Database Wizard

Most of the working parts of the RadioLoginDB application are generated by the Create Application from Database Wizard, available in Flex Builder. The Database Wizard generates the CRUD application from the MySQL database of radio stations. This wizard generates the CRUD application in just a few mouse clicks, and is the starting point for the RadioLoginDB application, described below.To run the wizard, first create a Flex project that access a PHP database. Then invoke the wizard in Flex Builder by selecting Data > Create Application from Database. The wizard guides you through creating the CRUD application. (Note: you can also use the Wizard for Flex projects that contain J2EE and ASP .NET database applications.)DBwizard.gifThe wizard generated the following files, which I subsequently modified:

  • radio_stations.mxml
  • radio_stationsScript.as
  • Radio_stations.php

The wizard also generates the following files, which do not need customization for this application. However, to further refine this application, you might want to modify some of these generated files as well.

  • Localhostconn.php
  • XmlSerializer.class.php
  • functions.inc.php

Customization of the Flex Application

The most significant part of customizing the application is providing a minimal level of security. I also customized the application to provide some ease of use features. Here are the customizations I made to the application:

  • Added a Log In screen
    Access to the database is only allowed for authorized users.

  • Implemented PHP sessions
    Prevent unauthorized access after a connection to the database has been made.

  • Customized the DataGrid to make it more readable

  • Customized the database update Form to enforce the correct entry of data into the database

Note: This example illustrates how to communicate between Flex and your PHP server. It does not illustrate a security model to use for your applications.

Implementing PHP Sessions

I want to take advantage of session support available with PHP to avoid unauthorized access to the database.Upon successful login with auth_login.php, a PHP session variable is set. I modified the generated Radio_stations.php to check for the session variable before allowing access to the database. If the session variable is not set, then the login screen from radio_stations.mxml appears.

Customizing the DataGrid

The generated DataGrid is a quite useful interface. It allows in place editing of database fields, allows you to delete entries, and opens a form for adding new entries. I made the following modifications to the DataGrid View:

  • For each of the columns in the DataGrid, I customized the width of each columns. This improved the readability of the DataGrid
  • I added a logout Button, to log out of the PHP session.

Customizing the Database Update Form

The database wizard generates a form to add new entries to the database. I modified this form to ensure that new entries are correctly formatted.Here are the modifications I made:

  • A dropdown list for the type of radio station (Community Radio, Talk Radio, etc.)
  • A dropdown list for selecting the state (CA, MD, etc.)

AddRecord2.gifI could also add validation to the URL fields and the fields for entering the height and width of the station graphic. I plan to implement this at a later date.

Documentation Links

Here are links to Flex documentation that I used to research creating this application:Using an E4X Expression in a Data Binding ExpressionDisplaying XML-based DataGrids Using Dynamic E4X ExpressionsPHP5 Quick Database E4X Queries(I didn’t use this technique, but I think this article is useful.)Creating Flex Projects(For creating a Flex project that accesses PHP.)Automatically Generating Database ApplicationsGetting Started Experience – ViewStackViewStack Navigator ContainerUsing HTTPService ComponentsFlex Quick Start Guide for PHP Developers

Source Files

  • vRadio Application (vRadio.mxml)
  • php2xmlService.php, server side application which accesses a MySQL database of radio stations, returning the contents encoded as XML. This service is used to populate Tree listing in the vRadio Radio Stations Pane
  • auth_login.php, which authenticates users and sets a PHP SESSION Authentication variable upon successful login.
  • RadioLoginDB Application, the CRUD application generated by the Flex Builder Create Application from DB wizard, and later modified to implement authenticated PHP sessions. Here are the files generated:
    • radio_stations.mxml
    • radio_stationsScript.as, which creates the gateway HTTPService that provides access to the MySQL database and contains various functions to perform the CRUD services. I modified this file to perform PHP SESSION authentication to the MySQL database
    • Radio_stations.php, generated by the Create Application from DB wizard to provide the PHP calls into the MySQL database.