Flex Builder Data Wizard and PHP
One of the questions we hear frequently as evangelists, out there talking to developers new to Adobe technologies is “How easy is it to get started with X?” It probably one of the core questions that drives a large amount of innovation in the products. To that end, in Flex Builder 3, a new feature that was introduced was the Data Wizard. With the Data Wizard, you set up a Flex project, point at a database, select a table, and you’re done. Interested? Let’s take a closer look!
When you first start Flex Builder, you’ll can choose File -> New -> Flex Project and you’ll be presented with a dialog that will walk you through the process. The first fields are pretty self-explanatory. You want to give your project a name and specify where it lives on the system. There’s a default location specified, but I prefer to put my project in a folder off the root of my web server. We’ll leave this as a “Web application”. Then you can select a server technology, which for the purposes of this example will be PHP.
Clicking on “Next” will present a screen that allows you to specify where your server lives. You see, it’s not necessary to keep your Flex project off the web root, just convenient. If you want to put the project someplace else, and then create the output folder off the web root, then that’s certainly another option. Here you can specify to the Flex project where that web root is, and what the URL is in order to get to that directory. You’ll want to validate that this is working by clicking the “Validate Configuration” button as well.
When you’re working with your Flex project, building it, testing it, you’ll be compiling a debug version by default. The default location for this is the “bin-debug” directory. When you’re all done, and ready to deliver your application to the real world, you’ll be able to export a release build into a separate folder. This is beyond the scope of this article, but can have a significant impact on the overall size of your application.
You can click “Next” to go on and add additional configuration information, but the content contained in those screens is more than we need to simply get started. Just click the “Finish” button and you’ll get a project ready to go. If you want to test this out, you can click on the “Run” menu item and then select the option to run your application. Given the information in the screens above, that’s “Run Started” for me and is the first menu item in the “Run” menu. Congratulations, you’ve created your first Flex application.
I’ll be the first to admit that this doesn’t look like much. It lacks, well, everything and anything. You might be inclined to start putting components on your application at this point. Then maybe trying to dig into some of the MXML or ActionScript code to populate the user interface with some data. Instead, I propose that you let Flex handle that for you. Before we do that though, let’s take a look at a simple table in a MySQL database.
Using tooling provided by MySQL, I’ve create a simple table of contacts to use for this example. If you want to follow along, the table specifics follow. So long as you have a MySQL database and a table with some data to use, you’ll be just fine. The Flex Builder Data Wizard will take care of all the details for us.
Back in Flex Builder, select Data -> Create Application from Database, and you’ll be presented with the Data Wizard dialog. If you have multiple projects, you may have to first select one from the provided combo box listing. In this case, using the information from the above screens, I’ve selected “Started” at which point some additional fields become visible. The first notable step here is to create a new connection to the MySQL database previously mentioned.
When you click the button labeled “New…” you will get another dialog which allows you to create a new connection profile. The first screen wants a name to use for the connection, and any additional descriptive information you may want to provide. As a word of caution, if you have multiple MySQL databases you may be using over time, providing the “Name” of “MySQL” isn’t particularly helpful. These connections will be stored and referenced in the future, so be sure to use a name that’s clear. Don’t worry about the “Auto-connect” check box for now.
Clicking the “Next” button will prompt you with the connection details for your database. In this case, the “Host URL” for my MySQL server is “localhost” but any other IP or domain you chose to use will work. The “Database Name” field refers to the specific MySQL database at that endpoint to which you will be connecting. Then you’ll need to specify the user name and password for the database. Here again, you’ll want to click on the “Test Connection” button to confirm that you’ve got everything setup correctly.
Once you’ve clicked “Next” again, you’ll get a summary screen. If you’ve tested the connection on the previous screen, then you’ll be all ready to go at this point. Just click “Finish” here and you’ll be taken back to the Data Wizard dialog. As soon as you return to that dialog a list of tables will be fetched from the database. They’ll be ordered alphanumerically, and then the primary key options for the first table will will be displayed. Select the “Table” you want to work with for this application, and the appropriate “Primary key” field.
The “Next” screen will ask you where you want to put the PHP source that the Data Wizard will create. If you’ve just been following along to this point, and haven’t changed your project configuration, then the default values will work best. As you become more experienced with Flex projects, you may choose to alter the output location. The name main PHP file doing the work for us will be “Contacts.php” in this example, where “Contacts” should be the name of the table you selected in the previous step.
You’ll notice that the “Finish” option is now available for you, and if you want to, you can certainly just head to being done. You can also click “Next” one more time, and add some additional configuration. For example, you might choose not to include all the columns from the database table in the application user interface. You may also want to provide filtering by a certain column. In this case, since this is a list of contacts, I’m going to actually allow the user to filter based on last name.
Clicking “Finish” whether you chose to specify any additional configuration options or not, will send Flex Builder off to work for you. What will be generated is a variety of source files. For the purposes of getting started, you don’t need to concern yourself with the bulk of those files. You will want to notice however that there’s a new main application file that has been created in addition to the one created when you started the Flex project. You’ll want to use the one created by the Data Wizard for now, which should be named according to the database table you selected earlier.
Heading off to the “Run” menu once again, and selecting the appropriate application is the last step in this little tutorial. If you’ve been sticking with the data I’ve provided, then you’ll be looking for the “Run contacts” menu item, where “contacts” is the name of the table I selected from my MySQL database. When your application runs, you’ll be presented with a DataGrid that will be loaded with the data from the database table you specified.
Note that this is essentially a complete application allowing you to view the data, create a new record, search by last name (in my case), edit the data inline by clicking on a cell in the DataGrid, and even delete a record - full CRUD. You may also glance over some of the other functionality such as resizing and rearranging DataGrid columns. You can also click on a DataGrid column header to sort alphanumerically. The application will also size to the fit the available screen realty. Since this is delivered on Flash Player, it will also look and behave the exact same across browser and operating systems with no additional testing.
There are a few details I’d like to call out about this application created by the Data Wizard.
The first is that the data format used here is XML. If you search out and find the PHP source that the Data Wizard created, you’ll get a better idea for how this is done. If you already have PHP that reads data and formats the result as XML, then you should feel right at home with Flex applications. XML can be created in many ways including separate XML views for your Zend Framework applications, or even using the Zend Framework REST Server.
If ever you should find that XML as a data exchange format isn’t working out for you, then you may want to look into an AMF option, of which there are several available, including Zend AMF. AMF is a binary serialization of the data structures, which offers substantially greater performance at all points in the transaction. An AMF gateway, such as Zend AMF, will even proxy directly to your business objects, which means less work for you.
The other thing I’d like to call out about the application created by the Data Wizard is the complexity of the generated code. The code itself is very well segmented and exceptionally documented, which should make understanding all the parts and pieces very approachable. That being said, there are many, much easier ways to connect a Flex application to XML (or AMF) data. Take for example the following code snippet which loads XML from the same source, but with only four lines of code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
pageTitle="Contacts"
layout="absolute"
creationComplete="svcContacts.send()"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HTTPService
id="svcContacts"
url="Contacts.php?method=FindAll" />
<mx:DataGrid
bottom="10"
left="10"
right="10"
top="10"
dataProvider="{svcContacts.lastResult.response.data.row}" />
</mx:Application>
The Data Wizard feature of Flex Builder 3 is designed as a tool to make getting started with Flex as easy as possible. The output hasn’t been tested for scalability, but is simply designed as a learning aid. The Data Wizard feature makes Flex development far more approachable, but you’ll likely quickly outgrow the generated output. Note also that the Data Wizard is not exclusive to PHP, but that is simply the technology I’ve chosen for this example.
Note: If ever you want to manage the data sources you have configured in the Data Wizard, you’ll want to find the “View” called “Data Source Explorer.” You can expose this view by going to Window -> Other Views… -> Connectivity -> Data Source Explorer. This will likely then be revealed as a tab along the bottom area of the Flex Builder user interface (the area with the “Problems” tabs). From within this view, you can see all your registered databases and manage their connection information (or remove them altogether).