Data-driven Development with Flash Builder, Part I
In the first instalment in this series we learned how to import mockup artwork into Adobe Flash Catalyst, and start converting the various elements into working components. By the end of that exercise, we had a living, breathing prototype of a simple contact application that we could run in Adobe Flash Catalyst and interact with.
This article will show you how to take the next step: moving from Adobe Flash Catalyst to Adobe Flash Builder. We’ll use the Data Driven Development features of Adobe Flash Builder to integrate our Flash Builder application with PHP, and rapidly create CRUD services to support our fledgling application.
I’ll assume you have basic familiarity with the Eclipse platform: as long as you understand perspectives, editors, and views you should be fine. Some initial familiarity with Flex and MXML is also assumed. You should have PHP and MySQL running on a local web server, and be comfortable creating databases and tables and adding data to them.
To follow along, you should have the Flex project we created in the last tutorial. That project, as well as a completed version that includes all the code we’ll be adding, are contained in the sample code archive for this article. Should you want to look at the finished project, you’ll still need to set up a PHP/MySQL data source as outlined in the section called “Set Up PHP Connections”. I’d recommend just using the start.fxp file and working through the tutorial step by step, as you’ll gain a better understanding of how to connect to a data source from a Flex project.
After reading the article, be sure to test yourself in our Article quiz, sponsored by Adobe!
In the first article, we began building a very simple contact list application that provides a contact list, search box, and contact view pane, as shown in Figure 1, “Contact application mockup”.
If we load up our Flash Catalyst project, we can take a look at the code that’s been generated for us. Click on the pop-up menu shown in Figure 2, “Design workspace”. This menu allows you to switch between design and code workspaces. It will say DESIGN.
Click on it and switch to the CODE workspace. If you expand the PROJECT NAVIGATOR panel on the right-hand side, you’ll see the various packages, skins, and classes that Flash Catalyst has generated for us. Take a moment to poke through them and get used to the package layout.
Flash Catalyst and Flash Builder share a common project file format, which allows us to easily switch between the two. Follow these steps to get your project up and running in Flash Builder.
-
Open Flash Builder.
-
Click on the menu and choose .
-
Make sure the File: option is selected, then click the corresponding button.
-
Navigate to the location where you saved the catalyst project file (the file is named
start.fxpif you downloaded it from the link at the beginning of this article), select it, and click .
To make our contact application useful, we need an actual database in which to store our contact data. All we need for now is a single table to hold contact records, so simply create a new database named contacts in MySQL, and use this script to create the contact table:
CREATE TABLE contact ( contact_id int(11) NOT NULL AUTO_INCREMENT, first_name varchar(20) NOT NULL, last_name varchar(20) NOT NULL, phone varchar(20) DEFAULT NULL, email varchar(150) DEFAULT NULL, address1 varchar(30) DEFAULT NULL, address2 varchar(30) DEFAULT NULL, state varchar(10) DEFAULT NULL, city varchar(20) DEFAULT NULL, country varchar(20) DEFAULT NULL, postcode varchar(10) DEFAULT NULL, PRIMARY KEY (contact_id)) ENGINE=MyISAM DEFAULT CHARSET=latin1;
We’re going to be using Flash Builder’s functionality to connect to this database, so add a user for this database by executing the following command in MySQL:
grant all on contacts.* to fb@'127.0.0.1' identified by 'catalyst2';
The next step is to get Flash Builder configured to connect to PHP.
In the Package Explorer panel of Flash Builder, right-click on your new project. From the context menu, choose . When the Properties dialog appears, choose Flex Server from the items on the left hand side, and configure the options to match those shown in Figure 3, “Flex Server settings”.
You will need to change the web root and root URL to match your PHP setup—use the button to make sure Flash Builder can connect to the location you give it. When it’s all working, click to save your settings.
