Lately I have been working on a Flex application and I have been enjoying the ease that the Flex framework allows a developer like me to add some nice looking effects very simply.

In my example I have a form, and this form has a Advanced mode which, when selected, will display extra fields for the user to fill in.

As you can see in the first application below, when you click the "Toggle Form" button the extra fields are shown or hidden.

The way I have done this is to create a private bindable variable called "advanced" which the extra fields bind too. When you click the "Toggle" button this value is changed from true to false or vice-a-versa as required.

The attributes of the form items that bind to that value are "visible", which controls if you can see the form field or not, and "includeInLayout" which lets Flex know if this field should be taken in to account when laying and rendering out the form.

By setting both of these to "false" the form field is hidden and the layout of the form changes.

Now, one thing about this is that the user gets know idea of the context of the fields.

EG: you start with "First Name", "Email" and "Password", and when you toggle to the advanced form, the "Last Name" field appears between the "First Name" and "Email" fields, and the 3 "Address" fields appear between the "Email" and "Password" Field.

So do give a feeling for the context I am going to add a "moveEffect" and a "showEffect" to each of the fields.

The Flex frame works ships with a library of these effects which are available to us. (See the docs for more info) We can build our own effects sequences, but that is another example entirely!

In to the "moveEffect" I am going to put the "Move" effect.

The "moveEffect" kicks in then the "x" or "y" positional properties are changed, and "Move" will move the UI component to that position, rather than just jump it there (as it does in my first example)

The "showEffect" happens when the "visible" property of a UI component goes from "false" to "true". I put "Fade" here so the UI component will fade in to view.

The application below is the finished result.

NB: You can right click on the applciations to View and download the source. Enjoy! :-)