Using Data Management Service Data in an MXML Application | Adobe Flex 2: Training from the Source

Finally, the preliminaries are done and you can write a Flex application that uses Flex Data Services' Data Management Service. In this case, you will create a DataGrid that is populated with data from FDS, and then make the DataGrid editable and see that the changes to the DataGrid are automatically sent back to the data storein this case, an Access database.

Return to the file DMS_1.mxml, add a creationComplete event to the <mx:Application> tag, and have the event handler call a function named initApp().

You will use the initApp() function to initialize key variables for the application.

Insert an <mx:Script> block just below the Application tag. In the block, import the following classes:

import mx.data.DataService; import mx.collections.ArrayCollection; import valueObjects.SmallProduct;

These three classes are going to do an amazing amount of work for you. The DataService class is how you will associate your DataService object to the destination you defined earlier. You've used the ArrayCollection class many times, but this time you will take advantage of the fact that changes to it can be tracked by Flex Data Services, and those changes can be automatically transmitted back to the data store. The SmallProduct class is the value object created by the wizard and will be used to represent the rows of the database.

Below the import statements, create the following three private variables of the data type indicated. Make the products variable bindable.

private var ds:DataService; private var temp:SmallProduct; [Bindable] private var products:ArrayCollection;

You will need the ds object and the products object later in the lesson. The temp variable is needed only so the SmallProduct class is compiled into the SWF.

Open the SmallProduct.as file and note the metadata that reads [RemoteClass(alias= "SmallProduct")]. Then close the SmallProduct.as value object class definition.

This metadata is what ties the ActionScript value object to the CFC value object created from the database table, as indicated by the [RemoteClass] metadata.

Caution

If you do not create a variable of the type SmallProduct, as done in step 3, you will get neither a compile nor a run-time error. The application will fail silently as it sends untyped objects back to the server, and the CFCs will not know what to do with them.

Below the variable declarations, create a private function named initApp() of the data type void. In the function, set the products variable equal to a new ArrayCollection. Set the ds variable equal to a new DataService object, passing the string flex2tfs as an argument. Finally, use the fill() method of the DataService object to populate the products ArrayCollection object.

The argument passed to the DataService constructor is the id given to the destination created in the first task of this lesson. The id was defined in the XML that you pasted into the data-management-config.xml configuration file, and then edited.

The fill() method uses the DataService object created to go to the database table associated with this particular destination, retrieve all the records, and place them into the products ArrayCollection object.

Tip

If you want to retrieve just one row from the database, use the getItem() method.

Check to be sure your application so far appears as follows:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    layout="absolute"    creationComplete="initApp()">   <mx:Script>     <![CDATA[        import mx.data.DataService;        import mx.collections.ArrayCollection;        import valueObjects.SmallProduct;        private var ds:DataService;        private var temp:SmallProduct;        [Bindable]        private var products:ArrayCollection;        private function initApp():void{          products=new ArrayCollection();          ds=new DataService("flex2tfs");          ds.fill(products);        }      ]]>    </mx:Script> </mx:Application>

In this lesson, you have completed the following tasks in preparation for displaying data retrieved by Flex Data Services' Data Management Service:

Configured the Data Management Servicein particular, you created a destination associated with CFCs that work with a particular database table.
Used a wizard to create three CFCs and a value object needed to work with the Data Management Service.
Wrote the code to retrieve data into an ArrayCollection.

Below the script block, insert an <mx:DataGrid> tag with an id of prodGrid and a dataProvider bound to the products ArrayCollection.

<mx:DataGrid  dataProvider="{products}"/>

The DataGrid displays the data retrieved by the DataService object.

Run the application. You should see the DataGrid display three columns of data for four products.

When this example runs correctly, you know you have configured Flex Data Services properly and used the Data Management Service CFC wizard correctly. If the application does not run correctly, you should check in the configuration files you edited in task 1, "Configuring Data Management Services," of this lesson. Very carefully walk through the configuration file edits again.

Change the <mx:DataGrid> tag into a tag set with opening and closing DataGrid tags. Nest an <mx:columns> tag set in the DataGrid tags. Nested in the columns tag set, insert an <mx:DataGridColumn> tag with the dataField set equal to prodName and the headerText set equal to Product Name. Insert another <mx:DataGridColumn> tag with the dataField set equal to cost and the headerText set equal to Cost.

<mx:DataGrid     dataProvider="{products}">    <mx:columns>       <mx:DataGridColumn dataField="prodName" headerText="Product Name"/>       <mx:DataGridColumn dataField="cost" headerText="Cost"/>    </mx:columns> </mx:DataGrid>

You will soon make the DataGrid editable. You do not want to be able to edit the prodID field, however, which is the primary key field of the database table you are working with. By specifying these two DataGridColumns, the prodID field will not be visible in the DataGrid.

10.

Open the SmallProduct.as value object class definition. Note the [Managed] metadata. Close the value object file.

Because this value object is marked as managed, any changes to objects of this value object class will automatically be sent back to the data store.

11.

In the DataGrid, set the editable property equal to TRue.

12.

Run the application and make a couple of changes to the data in the DataGrid. Refresh the page to be sure you are reading the data from the server side.

Tip

At this point every keystroke is being sent back to the server for updating. Of course you would not want this in a production environment. Read more about the commit() method to control this.