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.

I have a button that I want to enable only if one of two conditions is met. Let's say I have 2 checkboxes. Checkbox1 and checkbox2 (DISCLAIMER: yeah, i'm not advocating this naming convention, k?). I want a particular button to be enabled only if at least one of those checkboxes is checked. The code would be:

<mx:Button label="Click Me" enabled="{checkbox1.selected || checkbox2.selected}" />

Note the use of the curly braces. That effectively binds the checkbox1 and checkbox2 controls to the button. The equation uses the "or" comparison operator (||) and will evaluate to "true" if either condition is true.

Let's say now that I want the button to be enabled only if both checkboxes are checked. The "and" operator would be "&&". So our code changes to:

<mx:Button label="Click Me" enabled="{checkbox1.selected && checkbox2.selected}" />

That's where FlexBuilder gets upset and throws the message "The entity name must immediately follow the '&' in the entity reference". At first, it seems odd. The || comparison operator worked fine. Why wouldn't &&?

Because it's inside of an MXML component. And yes, MXML is XML. That means entities like the ampersand have to be escaped accordingly. So the valid/correct code would be:

<mx:Button label="Click Me" enabled="{checkbox1.selected && checkbox2.selected}" />

While this makes sense, what with MXML being XML, it's not really intuitive at first. Just a small "gotcha" that i thought would be worth pointing out.

To clarify a point, this wouldn't have been necessary inside of an <mx:Script> block surrounded by a <![CDATA[ ]]>. Since this particular piece of code was inside of my layout, it tripped me up a bit.