Figure 10-8. Our empty DataGrid
200
CHAPTER 10
2. Set the ID property of the DataGrid to studentsGrid, so that we can call on it later. In order to place
the data from our XML files into this component, set the XMLList that we named {student} as
the Data provider (Figure 10-9). Make your DataGrid editable by setting the Editable property to
true.
Figure 10-9. DataGrid properties
3. At first the DataGrid comes with generic column names and it does not know which data from
the XML file goes where. We need to enter the Source view to change these and guide the
data. If you keep the DataGrid component selected when you switch views, the DataGrid code
will be automatically highlighted in the Source view (Figure 10-10).
Figure 10-10. DataGrid MXML
4. Each DataGridColumn needs to be changed so that the headerText states what you want each
column to be called and that the dataField points to what part of the XML file to put into it.
The XML file has the structure shown in Figure 10-11.
Figure 10-11. XML structure
201
EXPLORING FLEX CHARTING
5. Fill in each of the dataField properties to match the tags in the XML file. Change the
headerText property to a description of what the column will contain. You can also control the
width for each column here so that each column is given enough space by adding a width
property to each column. Simply type the property at the end of each line before the closing
tag. You will notice that the default DataGrid component only contains three columns, but we
need six to contain all of the XML information.
Pages:
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148