Learning Flex 2.0

This demo shows the ability of Flex to delve deeply into nested data with small amounts of intuitive code.

Here is an example I created.
View Example (Flash Player 8.5 required)
View Source MXML
View Source XML

When you first launch the demo it loads the "content.xml" file. This is caused by the "initialize="contentDataService.send()" tag in the mx:Application node and of course the contentDataService mx:HTTPService.

Once the data is loaded here is what happens:

The select location comboBox is populated with the result from the service call. The first item (index 0) is automatically selected.

The location description box pulls the "selectedItem" from the locationSelector combobox and snatches the description attribute from it.

The tour stop pulls its data from the selectedItem in the locationSelector combobox.

Tour stop description, image dataGrid and pan dataGrid pull data from the selectedItem of the tourStopSelector comboBox.

Image and pan descriptions are pulled from the corresponding dataGrids.

The URL List is populated from the selected Pan in the pan dataGrid.

And finally the URL path window pulls the path from the selected URL in the URLdatagrid.

This way of referencing data is really slick! Each item is using the selected bit of a "parent item" as its datasource instead of having to create an absolute reference to the data using the orginal mx:HTTPService call. It like each component has its only little "scope" to work within. Plus, Flex will automatically take care of all the databinding for you. Whenever you change the selection of something all dependent items are updated automatically. This is easy to as you play around with the demo.

So let’s compare the amount of code it takes to reference data with the relative method vs. an absolute path. Looking at the final URL path portion of a URL assigned to a Pan.

Compare:

text="{panURLs.selectedItem.urlPath}"
vs.
text="{contentDataService.result.tourContent. mLocation[locationSelector.selectedIndex]. tourStop[tourSelector.selectedIndex].pan[tourPans.selectedIndex]. url[panURLs.selectedIndex].urlPath}"

It is interesting to note that the automatic databinding does not work correctly when using the absolute path in this way. Strangely it does work when you are viewing the URL paths within My Home -> Living Room -> Living Room Pan 1, but not in any others. No sure why...

One other thing I wanted to mention is the use of the labelField and ColumnName tags. By default many components will look for a "label" attribute or node to use as the label for each item they contain. When you set the labelField (or ColumnName) to a different value it will look for that field to display instead.