Charlie Griefer

Just a quickie today, something that I came across while playing around with Flex. It could very well be a "duh, Charlie" observation, but i think it bears mentioning.

Flex makes it very easy to bind elements to other elements or objects. What this means is that a DataGrid, for example, can be populated by the contents of an ArrayCollection (for CF'ers, think of an ArrayCollection as an array of structures). The first step is to declare the variable as bindable in your <mx:Script> block:

[Bindable]
	private var myArray:ArrayCollection;

Your DataGrid would then be declared as follows:

<mx:DataGrid dataProvider="{myArray}" id="myDataGrid">

The curly braces around the value of the dataProvider attribute indicates that it's a bindable variable. All pretty straightforward. But there are other ways to use bind variables to influence the behavior of an element.

Last night I started documenting my journey of learning Flex, focusing on my use of the built-in Object datatype and some issues that I faced in that respect.

There was one other aspect of this that I meant to touch on. To recap, I was passing a single Object to a ColdFusion CFC method. In my little ColdFusion brain, I thought of this as being not unlike a structure. So, I expected the method to receive a single argument much like a struct with multiple keys.

Let's say my ActionScript function looked like this:

var args:Object = new Object();
args.stateCode = "CA";
args.zipCode = "94583";
args.territory = 3;

// call the remote object method
ro_Customers.getFilteredCustomers(args);

I created an Object, populated it with 3 variables (keys), and passed it as an argument to the getFilteredCustomers() method in my remote object (CFC). Originally, my CFC looked like this:

<cffunction name="getFilteredCustomers" returntype="query" access="remote">
	<cfargument name="filterCriteria" type="struct" required="true" />
	...

I assumed that my args Object would be able to be referenced as a structure in the CFC. It's a single variable with key/value pairs just like a struct. But when i tried to reference #arguments.filterCriteria.stateCode#, I found that the variable didn't exist.

What actually happens is that the CFC treats each value in the Object as its own argument. Think argumentCollection instead of struct.

The correct code for the CFC's arguments is:

<cffunction name="getFilteredCustomers" returntype="query" access="remote">
	<cfargument name="stateCode" type="string" required="false" />
	<cfargument name="zipCode" type="string" required="false" />
	<cfargument name="territory" type="number" required="false" />
	...

Aside from explicitly declaring each value in the Object, I set the "required" attribute to false because in this case, not all of the values may be present in the Object. A user might choose to search only on stateCode, or only on zipCode, etc.

Over the past few months I've been lucky enough to have the opportunity to start playing around with Flex at work. Overall it's been a pretty good experience. I think Flex itself is a very cool technology, and FlexBuilder absolutely ROCKS as an IDE. Of course, there have been hurdles. Some I was able to overcome pretty easily, and some left scars. I figured I'd post some of them here and hopefully save some other Flex n00bs the hassle of figuring things out the hard way.

The application that I'm currently working on is fairly straightforward. Let's call it a user manager. I present a couple of comboboxes that let the user filter by certain criteria (state, zipcode, etc) and populate a DataGrid with the list of users that were returned.

I chose to pass these values in a single object. In ColdFusion, this single object would be a structure. Flex, or more appropriately, ActionScript, has a comparable datatype, simply called Object. an Object would be created as follows:

var args:Object = new Object();
args.stateCode = "CA";
args.zipCode = "94583";
args.territory = 3;

Fairly straightforward when compared to a ColdFusion structure:

<cfset args = structNew() />
<cfset args.stateCode = "CA" />
<cfset args.zipCode = "94583" />
<cfset args.territory = 3 />