Server Side Interaction
Let’s change the headerText(s) , and dataField(s) to coincide with the Structure dDataFromInputs : Category, Description and Input, see (Listing 2).
After changing the code click to return to the Design view to see the changes. Even though we have presented the data in the 3 columns, see (Figure 5) but we need
//www.adobe.com/2006/mxml" layout="absolute">
This code defines the page as an application and all of the MXML components added to the page will be written within the opening and closing markers. Click on the Design button, see (Figure 4) at the top of the page to view the page in the WYSWYG view. You will notice that the page is automatically the default coloring in the background. This coloring can be changed by changing the Fill color. Now let’s add the AdvancedDataGrid to the page. In the lower left-hand side of the IDE you can see the available components available for MXML Applications. Drag and drop the AdvancedDataGrid to the page. You will notice that the ID default name is adg1 and the type of data to preview is tree . Click OK to complete. Now that it has been added to the page change the view to the source to see the MXML code for the AdvancedDataGrid, see (Listing 1). Both AdvancedDataGrid and Datagrid components are created with three columns. It is very easy to modify the column headers by changing the headerText and to assign/bind a field from the database table to the column by changing the dataField.
Listing 1. Default code for Advanced DataGrid (ADG)
Listing 2. Revise code to define our columns and database fields
Listing 3. Define Grouping of the Category field
Figure 4. Switching between code and form
Figure 5. Design view of Advanced DataGrid (ADG)
Listing 4. Define the Array Collection to Bind with the ADG
//add the definition for the Array Collection
import mx.collections.ArrayCollection; private var MyStructuredDataFromInputs:ArrayCollection = new ArrayCollection(); ]]>
Figure 6. ADG Design view after Category Grouping
03/2009 (5)
74
Made with FlippingBook HTML5