Learning Flex 2.0

The last example showed one EASY way to drill down and access your data with Flex.

If you noticed, all of the "data" in my XML file was stored in the attributes of a node, rather than in the child nodes. All of the examples I have seen from Macromedia show the XML formatted with the data contained in child nodes.

What is interesting and somewhat disconcerting is that your XML data can be formatted either way and you do not need to make any changes to your code.

So what happens if you have an attribute name with some data and a child node of the same name? In this case the attribute wins and takes precedence over the child node.

I took the "Drilling Down into Data" example and modified it to load one of three different XML files on button click. You can view it below and see how each XML file is used.

View Example
View Source MXML
View Attribute XML
View Node XML
View Node XML with an Attribute

I find it confusing that you can use either type of XML without any changes to your code. I think it would make more sense if you used a "@" when you wanted to access an attribute rather than a node. This is how you access attributes with E4X in actionscript 3.

So:

mx:ComboBox x="25" y="60" width="190" id="locationSelector" labelField="title" dataProvider="{contentData.tourContent.mLocation}"

could be

mx:ComboBox x="25" y="60" width="190" id="locationSelector" labelField="@title" dataProvider="{contentData.tourContent.mLocation}"

Posted by Adam Schroeder at 04:38 PM | Permalink | Comments (2) | TrackBacks (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.

Posted by Adam Schroeder at 06:40 PM | Permalink | Comments (4) | TrackBacks (0)

This probably belongs under the "to embarrassed to mention" category, but I will post it anyway.

One of the first things I did after installing Flex was to try to get the trace method working. I love trace and have found it invaluable when I learning a language. I can do some quick runs to test my syntax or understanding of a piece of code. And of course you can keep an eye on your program to make sure everything is working as you expect.

The FAQ on the labs wiki has a nice little note informing you that you must import the trace package before the method can be used..

Ok, no problem. I create a new ActionScript project that looks like this:

package {
import flash.display.MovieClip;
import flash.util.trace;

public class traceTest extends MovieClip {
public function traceTest() {
trace("Its nice to see you!");
}
}
}


I then hit the green run button at the top of Flex interface. A few seconds later my browser pops up with an empty Flex background. No trace on the browser so I flip back to Flex, and nothing is there either. I see a nice little console window tab that would be an ideal place to show me my trace statements, but it says "A console is not available."

So I head to google and start searching for Action 3.0 trace. I find tons of information all telling me that I need to import the trace package before I can use the command. I know this. Finally, I found a note on a blog that let me know you need to view your program in debug mode to see your trace statements. You can do this by right clicking in the CODE (in case you are tracing from a Flex app) view and selecting "Debug As -> Flex Application".

With that tasty bit of knowledge I was able to see my trusty trace statements!

I imagine this would be obvious to many people (particularly Eclipse users) but it took a good bit of my time to figure it out. It does make sense that it works this way... now that I know about it.

Does anyone know of a MoveableType plugin that will let markup ActionScript and/or MXML with "code" tag or something similar?

Posted by Adam Schroeder at 04:37 PM | Permalink | TrackBacks (0)

Like many people in the community I have been following the development of Zorn and was excited about the pricing level and the release of an Alpha version to play around with.

I need to create a tool to edit an XML file and save it back again. Luckily I don't have a hard deadline to complete the tool within, so it’s an ideal project to begin learning Flex with. I find it easier to learn something new with a specific goal in mind.

So between my other work (mostly Flash and Director) I've decided to start tackling Flex. It was easy enough to go through the quick start tutorials and the sample browser (great tool). Amazing how much functionality you get with so little code.

However, once I exhausted these resources and tried to do something that wasn't a derivative implementation of the samples I quickly began to hit walls. I haven't used earlier versions of Flex and it is lot to wrap your head around. Because it’s an alpha most of the documentation and tutorials are still being developed and some of the source code in the help documents won't even compile... perfectly understandable, but still frustrating. The language reference is extremely useful and does a good job of listings the "massive" amounts of properties and methods available, but doesn't explain when and how to use them.

So, I’ll post little things I discover and questions I have here. Hopefully other people that are also trying to learn Flex will find them helpful.

Posted by Adam Schroeder at 11:34 AM | Permalink | TrackBacks (0)