Clever Flex Binding With Ternary Operators

| 7 Comments

While I have known of the ternary operator for years, in the past, I have found it uselessly obtuse and preferred to use the classic "if" statement. In my mind, the two were equivalent. I have just recently discovered that this is in fact untrue, as far as Flex is concerned. So very untrue indeed. Read on and I will explain why I have discovered a new-found appreciation for the long lost operator.

The ternary isn't an if, no "ands or buts"

To me, the main reason not to use the ternary operator was if the two were equivalent, the clarity of the "if" trumped its brevity. Besides, it looked a little too much like PERL (the "Language of a thousand operators").

The following two statements are indeed equivalent:

Statement 1.

if (value1 == value2) {
value3 = true;
} else {
value3 = false;
}

Statement 2.

value3 = (valueA == valueB ? true : false);

OR statements using the ternary operator

Just for fun, it is also possible to write a one-line "or" statement using a ternary operator.

e.g. (if a is true or b is true, c is true, otherwise c is false)

c = (a ? true : b ? true : false);
is equivalent to:

if (a || b) {
    c = true;
} else {
    c = false;
}


Where Bindings Come In

So far, I haven't covered anything particularly earth-shattering, however, if you're a Flex developer, you'll appreciate how much you depend on the maintainability and brevity of using binding statements in your Components (i.e. the MXML statements inside curly brackets e.g. "{bindMe}"). Sometimes, you'd love to, but Flex won't allow you to conditionally bind a value.

Despair not. Although if/else statements aren't allowed inside a binding statement, a ternary expression is allowed. That means that you can now write conditional binding expressions, rather than having to take the more complex statements that you'd like bound and putting them into a function, add on a bunch of event-handling code, wasting precious moments out of the prime of your life.

e.g.

<mx:text text="{data as String}"
toolTip="{(data as String).length > 20 ? data as String : null}"/>

This statement allows me to display a bound toolTip value if the string inside the Text Component is longer than 20 characters. Otherwise, it shows no toolTip.

...now let that sink in.

What it means is that you can create dynamic bindings with conditional "smarts" in them. If you're anything like me, that's pretty freaking sweet. Not too shabby for an operator that I personally had condemned to the slag heap of obscurity.


7 Comments

I've been using these for awhile. I hate &&, though.

value = (valueA == valueB);

and

c = (a || b);

Are preferable to ternaries which set true or false, IMHO.

There are some who would say this is the wrong way to do things. Depending on which, if any, development pattern you're using, it may or may not be. Most MVC-like patterns want all logic moved out of the view. Personally, I try to do this in my projects. However, if you don't follow any pattern, or do but just don't care about bending the rules, you can use ternaries in bindings to your heart's content. They really are handy. I've even used them to change button icons at run time.

Brian,

I agree with segmenting your code in an MVC-ish way, but I wouldn't consider my use of these expressions as program logic (i.e. "Controller" code). They are strictly used for display purposes (i.e. as part of the View). In a case where your other option is to write a function in the script block and add event handling to push changes to the Components, then I'd rather use a bindable expression.

It's a good tool to have, that's for sure. So far, I've used them for conditional toolTips and such. Sweetness.

Hi Steven,

Yeah, the example ternary expressions and if statements are really just that: examples. I wouldn't do Boolean assignments using them (there's really no point, as you've shown). Also, I don't personally use them in my Actionscript (or Java) code, but for conditionally binding a value in your MXML, ternaries can be quite handy.

e.g. You have some test you want to use to determine what to display...

e.g. You have an alternate value for a bindable String that might be null...

(P.S. As far as using "&&" goes, as you probably know, you can always replace an AND clause with a negated OR clause... i.e. !(a || b) is equivalent to (a && b).. Though I can't say I've had too many problems with my "&&"s acting up. Heh heh).

Thank you. Very handy.

Hey, no problem! I think it's a pretty useful little trick. I've used it in all kinds of clever ways to implement conditional labels and such for various Components. Saves a lot of pointless code.

Just one example: When a String is too long to fit on a Component, I truncate it and append an ellipsis (i.e. "...") and then provide the full text as a toolTip. That way, for instance, if I have a Button with the label "Supercalifragilisticexpialidocious", I can truncate it to "Supercali..." and display the full value in a toolTip. You can then constrain the width of your buttons even when the contents of their labels (and therefore the length of their labels) are unknown. It's great for allowing your Components to dynamically handle text that the user or some external source might provide at run-time.

On that note: I think I feel a song coming on.

This was very helpful for me as well. Thank you for posting!

Leave a comment



About this Entry

This page contains a blog entry by Taylor Bastien published on January 28, 2009 3:00 PM AD.

Citrix + Remote Desktop Keyboard Shortcuts was the previous entry in this blog.

ExternalInterface: Flex + Javascript Get Downright Cozy is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.