So you wanna build a Flex application – Part 3 – The Datasets

To date, in our series on Surfing Stats, we have covered the intent, directory structure and the main application file.
(download the code using the download link at the bottom of the the Intro to Surfing Stats post). Now we will look at the datasets.

Surfing Stats consumes XML data representing popular stats categories from BlogCFC. If you look at The nodans.com Stats page, you see many sections of stats. I wrote a quick mod that returns the data in XML form. I also normalized the data member names. You can see the raw data by clicking any of the categories below.

Here is a sample of the data. This is the commented categories dataset.





203
ColdFusion
BACC89CE-F619-D127-03E75B6165D3CE1B


160
Rapid Development
2FC233D3-D690-0768-E4312419862F07AF


98
Server Configuration
E262C102-90C9-389A-6E3D0FD8688AB368


92
Tutorials
40B3092C-EF27-6D1D-1E3C1734114504E9


91
Random
BACDDF86-CB9C-2C46-423F985C8BFE1B4E


87
Flex
FDEB2819-9F27-DDC8-3C7C7A4B29BC8149


86
Model-Glue
40B2E264-09A3-6658-8DEC7ABEC55E8D2E


83
Stupidity
BACCB9D1-BCBB-8438-976CE3F4E6289E3C


39
Personal
BACD91D3-BCF8-D040-CDB8A750DC42321E


21
Javascript
364B5ACE-BAF7-F138-150B19DDB458F80E




We use this data to drive the table and charts in our application.

Requesting XML Data

Requesting XML data in Flex is easy.


private function xmlDataHandler(event:ResultEvent):void
{
//the XML is Converted to an Array Collection by the result event
selectedDatasetAC = event.result.query.row;
//Define, configure amd run a numeric sort
var sort:Sort = new Sort();
sort.fields = [new SortField("amount", false, false, true)];
selectedDatasetAC.sort = sort;
selectedDatasetAC.refresh();
}

The bulk of the code above is for creating a numeric sort and sorting the data. The true magic happens transparently. If you have ever parsed XML, you know that it isn’t hard to walk down an XML tree and populate an object, it is just tedious. If you are a poor typer, like I am, it is also error prone.

Parsing the XML and Populating the ArrayCollection

In the Flex framework, the HTTPService makes the request to the server and then fires a result. The result automatically transforms the XML data into an ArrayCollection. Yay for Us! No boilerplate parsing or external libraries needed! The code above references event.result.query.row, row is the name of the repeatable node in our XML data.

Now that you have a good feel for the data that drives Surfing Stats, we can examine the application mode in depth. In the next series, we will dig into the main application file and look at the layout containers.