Flex Test Drive: Build an application in an hour

Video | Code | Tutorial | Links

Note: Flex Test Drive requires Flex 4.5 SDK and Flash Builder 4.5; download a 60-day trial version of Flash Builder 4.5 before continuing if you haven't already.

Build the user interface

• Download Flash Builder 4.5 Trial
• Download the Test Drive solution files (ZIP, 14 MB)

Code

Tutorial

In this Test Drive, you are going to create a Flex application that retrieves, displays, and modifies database records (see Figure 1). A Flex application does not connect directly to a remote database. Instead, you connect it to a data service written in your favorite web language (PHP, ColdFusion, Java, or any other server-side web technology).  You will build the front-end Flex application; the database and the server-side code to read, add, edit, and delete database records is provided for you as a PHP class, a ColdFusion component, or Java classes.

In this module, you are going to build a Flex project and a Flex application that retrieves data from the database and displays it. Employee data will be displayed on one "page" in the application and Department data on another.

The first task is to create a new Flex project for your application server and create the user interface. You'll retrieve data from the server and display it in the next tutorial.

Step 1: Install the server files on a local application server.

Follow the instructions in one of the sections below.

• Setup for PHP
• Setup for ColdFusion
• Setup for Java

The setup files include a database and server-side files to manipulate data in the database. Your Flex application will call methods of one of these server-side files, EmployeeService.

Note: If you installed the server files for the Flex 4.5 Test Drive for Mobile (add link) or  the Flex 4.5 trial email sample applications, you can skip this step. The same server-side files are used for all three.

Setup for PHP

1. Download the Test Drive setup archive (ZIP; 15.7 MB) archive and unzip  testdrive_setup_PHP file. It contains a Database and a Test Drive folder.
2. Create a testdrive_db database on your MySQL installation using the testdrive_db.sql file located in the Database folder. If you do not have permissions to create a database, use the testdrive_table.sql file instead to create two tables in an existing database. After the database is created, set user privileges for it.
3. Move the TestDrive folder, which contains the PHP service file, to your PHP server.
4. Open /TestDrive/test/test.php in an editor and change the username, password, server, and database name properties to the correct values for your server setup. Test the setup by browsing to http://{your server:your port}/TestDrive/test/test.html. For example, browse to http://localhost/TestDrive/test/test.html. You should see a list of the names of the employees in the database successfully displayed.
5. Open /TestDrive/services/EmployeeService.php in an editor and change the username, password, server, port, and databasename properties to the correct values for your server setup. This class file contains the methods you will call from your Flex application.

Setup for ColdFusion

1. Download the Test Drive setup archive (ZIP; 15.7 MB) archive and unzip the testdrive_setup_CF file. It contains two CAR files (testdrive_mac.car and testdrive_win.car) and a ZIP file (testdrive.zip).
2. If you have ColdFusion Enterprise or ColdFusion Developer, deploy one of the CAR files.
   o    In the ColdFusion Administrator (http://localhost:8500/CFIDE/administrator/ for the default standalone installation), navigate to Packaging & Deployment > ColdFusion Archives and browse to and deploy one of the CAR files.
   o    In the Deploy Wizard, change the deploy locations to reflect the locations of the db and wwwroot folders on your server. For example, on a Mac: /Applications/ColdFusion9/wwwroot/TestDrive and  /Applications/ColdFusion9/db/testdrive or on Windows: C:\ColdFusion9\wwwroot\TestDrive and C:\ColdFusion 9\db\testdrive.
   o    After deploying, check that you have a new data source called testdrive_db and a new folder in wwwroot called TestDrive. If your datasource verification fails, delete the datasource and recreate it: testdrive_db, Apache Derby Embedded, and point to the /ColdFusion/db/testdrive database just installed. 
3. If you have ColdFusion Standard, you need to manually place the server files and create a datasource.
   o    Unzip testdrive.zip. It contains TestDrive and db folders.
   o    Place the TestDrive folder in the ColdFusion webroot, /ColdFusion/wwwroot/.
   o    Open the db folder. It contains a folder called testdrive.
   o    Place this testdrive folder in the ColdFusion db folder, /ColdFusion/db/.
   o    In the ColdFusion Administrator (http://localhost:8500/CFIDE/administrator/ for the default standalone installation), navigate to Data & Services > Data Sources and create a new data source called testdrive_db with an Apache Derby Embedded driver and the database folder set to the testdrive folder you just placed in the /ColdFusion/db/ folder.
   
4. Open /ColdFusion/wwwroot/TestDrive/services/EmployeeService.cfc in an editor and examine the code. This class file contains the methods you will call from your Flex application. Note that the methods have the access argument set to remote so that they can be called from a Flex application.
5. Open /ColdFusion9/wwwroot/WEB-INF/flex/services-config.xml in an editor. This file is used when calls are made to the server from your application. Locate the <property-case> tag and change all three values to true as shown below:

Note: If you are using an earlier version of ColdFusion, your configuration file may not have these tags and you will need to add them. For details, refer to the documentation on using Flash Remoting with your particular server.

6. Restart the ColdFusion server.
7. Test the setup by browsing to:

   http://{your server:your port}/TestDrive/test/test.html

   For a default standalone ColdFusion installation, browse to:

   http://localhost:8500/TestDrive/test/test.html

   You should see employee data from the database successfully displayed in a datagrid.

Setup for Java

1. Download the Test Drive setup archive (ZIP; 15.7 MB) archive and unzip the testdrive_setup_JAVA file. It contains a WAR file for a web application called testdrive.
2. Deploy the WAR file to your web server. It contains the Java classes, an Apache Derby embedded database, and BlazeDS 4 files.
3. Open /{your server wepapps folder}/testdrive/WEB-INF/src/services/EmployeeService.java in an editor. This class file contains the methods you will call from your Flex application. It must have a no argument constructor.

   Note: For Windows, the ConnectionHelper.java file assumes the testdrive web app is deployed on the C drive. If it is not deployed on the C drive, you need to modify this file appropriately and recompile it, replacing /{your server webapps folder}/testdrive/WEB-INF/classes/services/ConnectionHelper.class.

4. Open /WEB-INF/flex/remoting-config.xml in an editor and examine the code. This file is used when calls are made to the server from your application. Note the definition for the destination called employeeService which points to the services.EmployeeService class.
5. Test the setup by browsing to:

   http://{your server:your port}/testdrive/test/test.html

   For example, for the BlazeDS turnkey server, browse to:

   http://localhost:8400/testdrive/test/test.html

   You should see employee data from the database successfully displayed in a datagrid.

Step 2: Create a new Flex project.

Follow the instructions in one of the sections below.

• Project settings for PHP with Flash Builder 4.5 for PHP
  
• Project settings for Java, ColdFusion, or PHP with Flash Builder 4.5
  

Project settings for PHP with Flash Builder 4.5 for PHP

1. In Flash Builder 4.5 for PHP, select File > New > Flex and PHP Project and create a PHP project called TestDrive at an existing location (see Figure 2). Be sure to set the location to where you saved the TestDrive folder on your PHP server in step 1.
2. Set the appropriate server location settings (see Figure 2) and validate the configuration. Example settings for a Zend server on a Mac are shown in the figure; be sure to use the correct values for your specific PHP server (it doesn't have to be Zend), including the correct web root and url for it!
   

3. Click the Next button and create a Flex project called FlexWebTestDrive and store the project files locally (see Figure 3). You can usually use the default value for the output folder, which is where the compiled application and associated files will be stored on your application server.

Project settings for Java, ColdFusion, or PHP with Flash Builder 4.5

1. In Flash Builder 4.5, select File > New > Flex Project and create a Flex project called FlexWebTestDrive and store the project files locally (see Figure 4).

2. Click the Next button and select your application server,  set the appropriate server location settings (see Figures 5 and 6), and validate the configuration. Example settings for Java with BlazeDS and ColdFusion servers are shown in the figures; be sure to use the correct values for your server setup! You can usually use the default value for the output folder, which is where the compiled application and associated files will be stored on your application server.

Step 3: Examine the generated project(s) and files.

Use the Package Explorer to explore the generated project(s) and files.

When you create a new Flex project, Flash Builder creates an MXML file with the same name as the project (see Figure 7). This is the main application file where you add your code. You create Flex applications using two languages: ActionScript and MXML. Typically, you use MXML and Flex components to create application interfaces and ActionScript and events to program application logic. MXML tags and ActionScript code can reference each other, similar to HTML tags and JavaScript code.

In FlexWebTestDrive.mxml, the first line of code is the XML declaration for the parser. The next line is the <s:Application> tag, which defines the Application container that must be the root tag for a Flex application. When the application is compiled, a SWF file, an HTML wrapper page that references the SWF file, and other files are created and placed in the bin-debug folder on your application server so you can browse to the application. When you browse to the HTML file that references the application SWF, the SWF file is downloaded and rendered by Flash Player (available as a browser plugin or ActiveX control).

If you created a Flex and PHP project with Flash Builder 4.5 for PHP, you will also have a PHP project (see Figure 8) for viewing and modifying your PHP code.

Step 4: Use Design mode to add components and set properties.

Switch to Design mode and drag out Label, DataGrid, and Button components from the Components view to create the interface shown in Figure 9. Use the Properties view to assign component ids of empBtn, deptBtn, and empDg and set other properties.

HTML applications are built from document elements such as headings, paragraphs, and tables. Flex applications are built from components such as Buttons, CheckBoxes, and DataGrids. The Flex 4.5 framework includes over 100 components, including user interface controls to display content and provide user interaction and containers to manage the layout.

Switch to Source mode and take a look at the generated code. You will see a new tag for each of the components you added. The order of the tags does not matter because the Application container uses absolute positioning by default so component positions are set by their x and y properties.

The <s:Label> tag represents a Label control, a very simple user interface component that displays text. Its text property is set to "XYZ Corporation Directory" and its x and y properties are set to where it will appear in the interface. The color, fontSize, and , and fontWeight attributes change the style of the font used. In Flex, you can set color styles to a string for any of the 16 colors in the VGA color set (for example, red or blue) or an RGB triplet in hexadecimal format (for example, #FF0000 or #0000FF).

For each component, you can specify properties and styles. Properties apply only to that particular component instance. Styles can be set inline as done here or using CSS to create style rules to apply to your components.

Step 5: Change component attributes in MXML.

Use the Flash Builder Content Assist to select and set values for various properties and styles.

When you place your cursor inside a tag and press the spacebar or Ctrl+spacebar, you get code hinting with the Flash Builder Content Assist (see Figure 10). It shows a list of all the attributes you can set for that tag, including properties, styles, events, and more. Different symbols are used for each different type of attribute. This is the same list you see in the Alphabetical view of the Design mode Properties view.

You can get more complete descriptions for each of the attributes in the component's API, its application programming interface. To navigate to a component's API, select Help > Dynamic Help and then click a component tag in your code. You will see a link to that component's API in the Help view, which you click to open the API (see Figure 11).

Step 6: Browse the application.

Use the Run button or the Run menu to compile the application and view it in an HTML page in a browser window.

Your application appears in the browser inside a generated HTML wrapper page (see Figure 12).

PHP developers using Flash Builder for PHP: The first time you run an application, you get a Run As dialog box. If you select Web Application, an HTML wrapper file is run. If you select Web (PHP) Application, a PHP wrapper file is run. The code for both files is the same so you can choose either option. If you want to debug your PHP service code when running this application (debugging is covered in Debug client-side code), you need to launch a PHP wrapper page, so choose Web (PHP) application. You can change which file is run at any time by selecting Run > Run As > Web (PHP) Application or Web Application or creating run configurations.

You will retrieve and display data in the DataGrid in the next tutorial and add application "pages" and wire up the buttons later.

Learn more

Refer to the following resources to learn more about this topic:

Documentation: Using Flash Builder 4.5

• Working with projects
• Building a user interface with Flash Builder

Documentation: Using Flex 4.5

• Developing applications in MXML
• Building the user interface

ActionScript 3 Reference

• Label
• Button

Flex Developer Center

• Flex Quick Starts