Flash Article

Building the Flash Application

Now I'm going to show you how to build a simple application that makes use of the ColdFusion component to load data from the database and save data back to it.

1. Open Flash MX Professional 2004 and create a new Flash document.
2. Drag a DataSet component to the Stage and name it ds. Drag a DataGrid component to the Stage, name it grid, set its x,y position to 0,0, set its width to 540, and set its height to 240. In the Component Inspector, set its editable property to true.

3. Databind ds.dataProvider to grid.dataProvider by following these steps:

   1. Select the DataSet component on the Stage and choose the bindings tab in the Component Inspector.
   2. Click the + button to add a new binding.
   3. In the Add Binding dialog box, select the dataProvider property and click the OK button.
   4. In the Component Inspector, select the bound to property of the new binding, and click the button next to it.
   5. In the Bound To dialog box, select the DataGrid, <grid> item in the Component Path list box. You'll see a list of the DataGrid properties in the Schema Location list box on the right.
   6. Select the dataProvider property, and click the OK button to complete your task (see Figure 1).
   
   

   

   Figure 1. Task completed: ds.dataProvider is bound to grid.dataProvider

4. Databind ds.selectedIndex to grid.selectedIndex following in outline the directions in step 3.

5. Add schema to the DataSet component to describe the expected fields. Click the DataSet component, and select the Schema tab in the Component Inspector.

   1. Click the leftmost + button to add a component property. Type id into the field name text box, and select Number from the data type drop-down list. This tells the DataSet to expect an id field in the data, and that its value is a number.
   2. Following the instructions above, add the following fields and data types: rate as Number; duration as Number; billable as Boolean; notes as String (see Figure 2).
   
   

   

   Figure 2. The finished schema of the DataSet component

6. Click the Stage to deselect all selected components and type the following code into the Actions panel (this code sets up a connection to the ColdFusion component and calls the getSQLData() function to get data):

   #include "NetServices.as"
   #include "NetDebug.as"
   
   //Set up the NetServices connection to the ColdFusion component.
   var con:NetConnection = NetServices.createGatewayConnection( "http://localhost:8300/flashservices/" );
   _global.srv = con.getService( "rdbmsProcessor", this );
   
   //Call the function with a query to get the data.
   _global.srv.getSQLData( "timetrax", "select notes, billable, duration, rate, duration, id from timeentry" );
   
   //Called with the result from the getSQLData function, this places the data into the dataset.
   function getSQLData_Result( result ) {
     ds.dataProvider = result;
   }
   

7. To add the ability to add new records, drag a Button control to the Stage, set its label property to Add and type the following code into the Actions panel:

   on(click){
       _parent.ds.addItem();
   }
   

8. To add the ability to delete records, drag another Button control to the Stage, set its label property to Delete and type the following code into the Actions panel:

   on(click){
       _parent.ds.removeItem();
   }
   

9. Test the movie. Verify that you are getting data in the grid and that you can add, edit, and delete records. At this point, there is no way to save your changes. If you can not modify records, review the steps above, and verify that you have ColdFusion MX set up correctly with the ColdFusion component and database by typing the following into your browser:

   http://localhost:8300/rdbmsProcessor.cfc?method=getSQLData&dataSource=timetrax&sqlStatement=select%20*%20from%20timeentry

10. To add the ability to save your changes, drag an RDBMSResolver component to the Stage, name it rs.

11. In the Component Inspector, and specify the following properties:

    1. Set the tableName property to TimeEntry.
    2. Click the button next to the fieldInfo property.
    3. In the Values dialog box, click the + button.
    4. In the area below, type id into the fieldName property, and click the OK button (see Figure 3).
    
    

    

    Figure 3. Filling in the Values dialog box

    This instructs the RDBMSResolver component that the id field is the key field for this table (see Figure 4).

    

    Figure 4. The RDBMSResolver component configured

12. With the RDBMSResolver component still selected, type the following into the Actions panel:

    on(beforeApplyUpdates) {
        //Add an attribute to the update packet to tell the CFC
        //that we want it to generate values for the id field
        var firstChild:XMLNode = eventObj.updatePacket.firstChild;
        firstChild.attributes.autoIncField = "id";
    
        trace(eventObj.updatePacket);
    
        //Now send the update packet to the parsing method in the CFC
        _global.srv.saveSQLData( "timetrax", eventObj.updatePacket.toString());
    }
    

13. Databind rs.deltaPacket to ds.deltaPacket using in outline the directions in step 3.

14. Drag a Button control to the Stage, set its label property to Save, and type the following into the Actions panel:

    on(click) {
        _parent.ds.applyUpdates();
    }
    

15. To catch the result packet coming back from the CFC, click the Stage to deselect any selected components, and type the following code into the Actions panel:

    //Catches the result packet returned by the CFC, and puts it into the resolver
    function saveSQLData_Result( result ) {
      trace(result);
      var resultDoc:XML = new XML();
      resultDoc.ignoreWhite = true;
      resultDoc.parseXML(result);
      rs.updateResults = resultDoc;
    }
    

16. To add in the ability to view errors returned in the result packet, select the DataSet and type the following in the Actions panel:

    on(resolveDelta) {
        var errs:Array = eventObj.data;
        for( var i:Number=0; i<errs.length; i++ ) {
            trace( errs[i].getMessage());
        }
    }
    

That's it. You can now play around with the application. Try adding, editing, and deleting records. Take a look at the contents of the update packet and result packets in the output panel. Notice how the value for the id field is automatically created within the server function and how the DataSet picks up and displays the updated value in the grid.

Of course, you could also enhance the functionality of this application by adding the ability to deal with errors returned from the server. You can see a working example of error resolution in Paul Gubbay's Time Entry sample application.

Page 7 of 8