Yesterday I stole a an hour or two away from the usual stuff to spend some time working on the Domino/Flex Accounts database. What I'm trying to do is get it to the point where I'm happy to release the code to you all. It's just a bit too messy at the moment. It was a case of learn-as-you-go, which really shows and I want to retrofit some better practices I've learnt since.

The reason it's been so long since I talked about Flex is that I got the feeling you weren't interested. Then I decided to stop caring so much what I think it is you're interested in and just write about what I want to.

Then I happened to notice while searching the web that Google Suggestions brought up "codestore flex" when I typed in codestore (see image above).

Now, I don't know how many Googles for the same query have to happen before it to becomes a suggested query, but I'll assume it's quite a few and hence that a few of you are interested in Domino and Flex. Seems a safe assumption to me.

So Flex will be something I'll be talking about more and more from now on. Like it or lump it.

An Example of Why I Love Flex

My intention is to squeeze in as many different tips/tricks to the accounts demo as I can - making it somewhere you can turn to in a kind of "How did Jake do that ...?" kind of moment.

At the same time I wanted to "sex it up" a little. To that end I added some effects to make the "update form" slide in and out of view when you double click an entry in the view.

To do this is so, so simple. Here's the simplified MXML code in use (bits missed out for obvious reasons):

<mx:Resize id="slideFormUp" heightTo="210" duration="900" />
<mx:Resize id="slideFormDown" heightTo="0" duration="700" />
    
<mx:Panel>
        <mx:AdvancedDataGrid dataProvider="{documents}">
                <mx:doubleClick>
                        <![CDATA[
                                frmUpdate.visible = true;
                        ]]>
                </mx:doubleClick>
        </mx:AdvancedDataGrid>
                                
        <mx:Form id="frmUpdate" 
                hideEffect="slideFormDown" showEffect="slideFormUp"
                width="100%" visible="false" height="0">
                        <!-- Form items here -->
        </mx:Form>
</mx:Panel>

What's going on here then?

Well, the AdvancedDataGrid ("view") and the Form both live inside a Panel and share it's vertical space. At first the form is hidden (height=0px and visible=false). The view takes up the full height of the parent panel container.

The view has a doubleClick event handler defined. When you double click a row the form's visible property is set to true. This won't show the form by itself though, as it has a height of 0px. This is where the form's showEffect property kicks in. This points to the <mx:Resize> object with the ID specified.

The resize object tells the form to increase its height to 210px over a duration of 900ms. The resize effect kicks in automagically when the object it's tied to has it's visible property changed to true. The opposite is true of the hideEffect and the other resize object you can see.

So, all you need to is say visible = true/false and the effects run on their own! How cool/simple is that?

What I love is how elegant and predictable the code is. Things just work how you'd expect them to. Hence Flex is a very productive environment to work in. I rarely find myself spending any amount of time trying to figure out what's going

You can see the effect in use by clicking the screenshot below:

Ease Off On the Effects

You could be forgiven for thinking the slide in out/effect is merely pointless eye candy. I'd beg to differ though. Used sparingly and in the right places, visual cues like this can help the user see when something has changed on screen. Simply turning the form on/off could mean its existence is over-looked by the user. Just make sure you don't make it take that long to scroll up that you end up annoying the user so much they become less productive.

While it's simple to add effects like this, the hard part is knowing when to ease off ('scuse the pun!) on them. Don't go throwing them in all over the place for the sake of it! Sometimes, less is most definitely more.