Employee Updater: Building a Client-Server Application with Macromedia Flash Data Connection Wizard and ColdFusion

Building the Flash Departments Grid

The Flash application you'll create will have two data grids, one on top of the other. The upper grid will display the departments, and each time a user clicks a department, the lower grid will display the department employees.

Creating a data-driven grid requires using three Flash components: the grid itself; the WebServiceConnector component, which communicates with the ColdFusion component; and a DataSet, which binds the two providing other Flash components and code with access to retrieved data. You could manually drag these three components from the Flash Components panel to the Stage, provide the required properties, and then bind them together. Or you can use the Data Connection Wizard to do much of the work for you. Here are the steps to follow:

1. Select Commands > Data Connection Wizard. This launches the wizard (Figure 5).

   

   Figure 5.The Data Connection Wizard simplifies connecting to web services and XML data

2. The dialog box will ask you to specify a data source, select Web Service from the pop-up menu, and the wizard will display a list of registered web services (including the one you just registered).
3. Expand the service employeesService to display its methods.
4. Expand the ListDepts method to display its attributes and results.
5. Click Results. (You will use the results of ListDepts to populate the grid.)
6. Click Next.
7. At this point, you might expect to see a list of data fields available in the results, but you won't if you're using ColdFusion. Since ColdFusion queries are dynamic and are not evaluated until runtime, there is no way that the wizard can display the list of fields; you must specify them manually. Click Next.
8. In this wizard step, you can add, update, and remove fields. Click the Add Field button and add a field named DEPARTMENTID with a data type of String (ColdFusion query columns must be uppercase).

9. Add a second text field and name it DEPARTMENTNAME with a data type of String (Figure 6).

   

   Figure 6. If using a ColdFusion Component, field names must be specified manually

10. Click Next to go to the final wizard screen.

11. You must name component instances in Flash. Specify dept as the Label for Generated Components. Leave the two checkboxes selected (the first instructs the wizard to create a data grid, and the second embeds a button that a user may click to execute the web service call) as in Figure 7.

    

    Figure 7. The wizard can create optional DataSets and trigger buttons.

12. Click Finish to complete the wizard.

You should now have four components on the Stage: a WebServiceConnector, a DataSet, a DataGrid, and a Button. Click any of the first three and look at the tabs in the Component Inspector panel. These are the values that you would have had to specify manually were it not for the Data Connection Wizard. (You will have to use the Component Inspector panel later).

Now test the application:

1. Save your changes with File > Save.
2. Select Control > Test Movie to launch the application.

3. An empty grid will display. To populate the grid, click the Get Data button; Flash will connect to ColdFusion through the WebServiceConnector, retrieve the data from the ColdFusion component ListDepts method, and use the results to populate the DataSet, which populates the DataGrid (Figure 8).

   

   Figure 8. A working DataGrid, no code used

4. To stop testing the application, close the file by clicking the Close (X) button at the top right of the Flash application window. (Don't click the Close button on the Flash title bar, that will exit Flash).

Not bad at all—for no lines of code that is.

Finishing the Departments Grid

The default grid is too big—it leaves no room for or next grid—so set the size and position:

1. Moving the grid may cover up the icons for the WebServiceConnector and DataSet components, so drag all of those to the edge of the Stage. (They have no visual interface, so in truth it makes no difference where you locate them.)
2. Select deptDataGrid. Make sure you select the data form in the forms tree.

3. If the Properties panel is not open, open it (Figure 9).

   

   Figure 9. Control size and position is defined in the Property inspector.

4. Set the position and size in the Property inspector as follows: W=510, H=150, X=20, Y=20.
5. Close the Property inspector if you need the screen space.

Before moving on to the next data grid, make two changes in the department grid; right now, the interface displays both the department name and id, when you only need to display the department name. Moreover, your grid should populate dynamically without requiring the user to press a button.

You'll tackle the displayed columns first. By default, data grids display all columns in their related data sets; to change this behavior, use ActionScript code. Fortunately, a wizard can generate this code for you. Follow these steps:

1. Select deptDataGrid. (Make sure you select the data form in the forms tree.)
2. If the Component Inspector panel is not open, open it.

3. Click the wizard button (the yellow star icon) on the top right of the panel, and select DataGrid Column Editor to launch a wizard (Figure 10).

   

   Figure 10. The DataGrid Column Editor wizard generates grid layout code.

4. Use the wizard to define the columns you want to display in a grid and the properties for each column. You can manually enter columns by clicking the Plus (+) button, or you can import them from the associated DataSet. Click the Import Columns button to import the DataSet columns; you'll see both DEPARTMENTID and DEPARTMENTNAME listed.
5. To prevent DEPARTMENTID from displaying, select it, and click the Minus (–) button.
6. DEPARTMENTNAME (all in capitals) does not make an ideal grid column header, so, in the Column Label field, type Department. Make sure to deselect the Editable checkbox and setWidth to 500. (This fills the entire width of the grid.)
7. Click OK. The Wizard will generate about 20 lines of ActionScript code that define the grid columns (just the one column in this example). Click OK again.

8. Save your changes and select Control > Test Movie to launch the application. Your revised grid appears in its correct location and with just one column (Figure 11).

   

   Figure 11. To include, exclude, or format grid columns, use ActionScript code.

The final change is to delete the Get Data button and to write some code to force the grid to populate automatically upon starting. Here are the steps:

1. Select the Get Data button. (Make sure that you select the data form in the forms tree.)
2. Delete the Get Data button by pressing Delete on your keyboard.
3. You must place the code for automatically populating the grid with the data form selected, taking care that you haven't selected any of the controls within it. Click any empty space on the Stage and make sure that the tab at the bottom of the Actions panel reads data.

4. Type the following code in the Actions panel:

   // Populate grid on startup
   on (reveal) {
      deptReceiveWebServiceConnector.trigger();
   }
   

5. Save your changes and select Control > Test Movie to launch the application. The application will load as before, but this time the grid will populate without the user needing to press a button.

The code you type warrants some explanation. Flash supports events, and code associated with those events executes when certain events occur. In this case, the on(reveal) event instructs Flash to execute the following code when the current form (the data form) reveals or displays itself. The deptReceiveWebServiceConnector.trigger() event simply triggers or executes the deptReceiveWebServiceConnector service. This is exactly what the Get Data button performed.

Building the Employees Grid

Next, you'll create the employees grid; this will display the employees in the department selected in the first grid. Once again, start with the wizards:

1. Select the data form.
2. Select Commands > Data Connection Wizard to launch the wizard.
3. Select Web Service as the Type of Data Source.
4. Select employeesService, and expand the ListByDept method to display its attributes and results.
5. Click Results (as you will use the results of ListByDept to populate the grid).
6. Click the Next button.
7. A warning box appears to let you know that this method requires a parameter that you have not yet defined. (You must pass the department to the method for the method to retrieve the correct employee list.) Click OK for now; you'll provide this data later.
8. Once again, no data fields will display, so click Next.
9. Add the following fields:
   1. FIRSTNAME with a data type of string
   2. LASTNAME with a data type of string
   3. TITLE with a data type of string
   4. EMAIL with a data type of string
   5. STARTDATE with a data type of date, a source data format of YYYY MM DD (the format data is returned from ColdFusion), and a display format of MM-DD-YYYY (unless you prefer another of the available formats, as this has no impact on the data itself and just affects the formatting in the grid)
   6. EMPLOYEEID with a data type of string
   7. DEPTIDFK with a data type of string
10. Click Next to go to the final wizard screen.
11. Specify emp (as in employee) as the name in the Label for Generated Components. Leave the first checkbox selected, but deselect the second checkbox. (You don't want to create a button.)
12. Click Finish to complete the wizard.

You must reposition the grid::

1. Drag the new WebServiceConnector and DataSet icons out of the way (the lower right of the Stage will work well).

2. Select the new data grid (named empDataGrid) and set the position and size in the Property inspector as follows: W=510, H=175, X=20, Y=180 (Figure 12).

   

   Figure 12. Use the Property inspector to precisely position controls.

3. Save your changes, and then select Control > Test Movie to launch the application.

The application will run and display the new grid, but that grid will not be populated because the app never executes the second web service. To execute the web service, you must first pass the appropriate department id to the method:

1. Select the empReceiveWebServiceConnector icon.
2. Open the Component Inspector panel (if it is not already open).
3. Select the Bindings tab, you'll see one binding defined (connecting the results returned by the web service call to the DataSet).
4. Click the Plus (+) button to add a binding; this will display the Add Binding dialog box.
5. Available bindings are grouped into params, data sent to a web service call; and results, data that a web service call returns. You need to pass the department id to the method; select the DepartmentID param and click OK.
6. The new binding will now appear in the Bindings tab in the Component Inspector panel, but it is not bound to anything yet. To bind it, select it, and click the bound to row below.
7. Click the magnifying glass button to display a list of available binding selections.

8. Options in the Bound To dialog box display hierarchically. Bind to the currently selected department id in the department DataSet by locating the deptDataSet and selecting it; then select DEPARTMENTID from the list on the right (Figure 13).

   

   Figure 13. The Bound To dialog is used to interactively select data bindings

9. Click OK and the new binding will appear in the Component Inspector panel. Now, whenever your SWF executes the method, it also passes the selected department id to the method.

You must execute the ListByDept each time the selection in deptDataSet changes. Do so with the following steps:

1. Select deptDataSet on the Stage. You can verify which control you have selected by looking at the Property inspector or at the tab at the bottom of the Actions panel.

2. Type the following code in the Actions panel:

   // Get employees when department is selected
   on (iteratorScrolled) {
      _parent.empReceiveWebServiceConnector.trigger();
   }
   

3. Save your changes and then select Control > Test Movie to launch the application. The application will load as before, but this time selecting any department displays the department employees in the lower grid.

The iteratorScrolled event executes each time the selection in a DataSet changes. The code here executes the empReceiveWebServiceConnector web service. The _parent is necessary because references are all relative. The DataSet and the WebServiceConnector are both children of the data form, so _parent refers to the form, and empReceiveWebServiceConnector then refers to the connector within it. It is worth noting that the following code would have worked too:

// Get employees when department is selected
on (iteratorScrolled) {
   _root.application.data.empReceiveWebServiceConnector.trigger();}

The _root refers to the top of the application tree; application is the top level form; data is a child of application, and empReceiveWebServiceConnector is a child of data. The result is identical, the only difference is that this code uses absolute addresses whereas the previous example uses relative addresses. To keep the steps simple, I did not use the DataGrid Column Editor wizard, causing all the columns to display using the column names as headers. You may use the wizard if you desire to modify the format; for instance, the finished app probably should not display the EMPLOYEEID and DEPTIDFK columns (as a user should never see or edit these).

Page 4 of 10

Previous Page

Next Page