David Harris's Technology Blog

ColdFusion, Flex, and other stuff...   (and 354,854 hours, 39 mins in to my plan for global domination)

Search:

Calendar:

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

Subscribe:

Enter your email address to subscribe to this blog.

Archives By Subject:

Tags:

action script adobe air ajax cfug coldfusion flash flex frameworks free software fxug general jpgmetadatareader mac off topic opensource papervision spry

Recent Entries:

No recent entries.

Top Posts:

Recent Comments:

Top Commenters:

My Links:

RSS:


Simple Effects on a Form - Flex Example

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.

My Flex Playing requires Adobe Flash Player 9. Get Adobe Flash..

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.

My Flex Playing requires Adobe Flash Player 9. Get Adobe Flash..

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

Related Blog Entries

Comments
Nice work.

fyi -- the 'view source' option returns:
"Sorry. There are no blog entries available that match your criteria."
# Posted By hsTed | 3/11/08 12:47 AM
You dont need to have the Panel all the way down, the Panel could expand as well when you hit the button to show the other fields
# Posted By Raul Riera | 3/11/08 2:41 AM
if you double click the button quickly you'll see a bug :(
# Posted By riabook | 3/11/08 7:24 AM
@hsTed: Thanks for the heads up, I'll fix that tonight when I get home!

@riabook: looks like I'll need to do a follow up post! watch this space!
# Posted By David | 3/11/08 8:55 AM
@hsTed: the right click - view source should be fixed now. Let me know if it isn't!
# Posted By Davidh | 3/11/08 8:20 PM
Wow! This page is by far the best page I've seen all month.
It's so cool!!! It really made my day. I've been searching the web all day long just to do what you showed.
Thanks so much for sharing. Keep up the awesome work!
# Posted By Flex Newbie | 3/23/11 7:25 AM