First stab at my Flex homework

This post is more than 2 years old.

The first version of my Flex homework is done. You can view it here:

Ignore the "SimpleRemotingTest" name - it was an empty project I modified for this task. So what does this version support and how did I do it?

First off - I learned how to use States in Flex 2. I have to be honest. States really confuse me. I kind of looked at States like pages. I had assumed states would work a bit like so: (And again, this is NOT real Flex code - just what I expected.)

<mx:State name="alpha"> controls in here that are visible when alpha is turned on </mx:State> <mx:State name="beta"> controls in here that are visible when bet is turned on </mx:State>

In other words - I assumed that an inactive state would simply set all the fields inside it to invisible. That is not the case. Switching to a state runs a set of actions. You can add controls, remove controls, and change the properties of controls. This just feels weird to me - but I think I've gotten the hang of a it a bit.

If you view my example, you will notice that you can enter anything for the username and password, and when you hit the button - the logon panel goes away and some text shows up on screen. Here is the code I used:

<mx:states> <mx:State name="login">
&lt;mx:State name="default"&gt;
	&lt;mx:RemoveChild target="{loginStage}" /&gt;
	&lt;mx:SetProperty target="{mainStage}" name="visible" value="true"/&gt;


The login state represents my default state. This worked out of the box but made me nervous. I added this to my Application tag: currentState="login". This ensured that my login state is always the default. Now take a look at the default state. I guess that name is kind of bad - but for me it meant the default version of the application after you have logged in. Kind of like the home page of a protected web site. Inside this tag I do two things. I first remove the loginStage element using the RemoveChild tag. I had wrapped my login panel with an hbox I named loginStage, where stage seemed like a good way to refer to a "block" of items. I then use the SetProperty tag to change my hidden stage to visible.

I had some help from Ben Forta on this. He yelled at me (ok, he didn't yell, he just repeated a few times) to actually use design mode. I really need to get it through my head: Design mode in Flex Builder 2 does NOT suck!. Not only does it not suck - it is really useful. How did I figure out how to show mainStage? I switched to design mode. Selected the default state. Found my hidden mainStage HBox in the Outline, and changed the visible property. When I returned to code view my SetProperty was done for me.

If you want to see the full source to what I built, just right click and select View Source on the demo.

As a preview for the next entry - I've already figured out that I could have done this better without states (thanks to people smarter than me). In the next entry I'll be removing them completely - but I am happy I finally "get it!"

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Josen Ruiseco posted on 11/22/2006 at 7:25 AM

I've noticed that on most Flex apps I've seen, the "submit" button at the end of the form does not respond to the return key. A point and click of the mouse is required. Could you show how to make the submit button response to the return key?

Comment 2 by Bruce posted on 11/22/2006 at 7:42 AM

Ray - Thanks for sharing your code. The Flex documentation Adobe has provided is good, but there are WAY too few examples of how to get stuff done. Your blog and others are providing the key code examples and tutorials that help all of us learn how to use Flex. I'm trying to do the same on my blog.

I look forward to following your example as it develops further.


Comment 3 by todd sharp posted on 11/22/2006 at 7:44 AM

Thank you - states are starting to make more sense to me now. Anxious to see your next post.

Josen - try a space bar on the button that has focus, that will work. You could likely also create a key listener for the return key, but that seems like overkill to me.

Ray - I don't think your posts have been hitting MXNA today.

Comment 4 by Raymond Camden posted on 11/22/2006 at 7:51 AM

Odd. I ping MXNA when I post - so I can't see why it would fail to pick it up. I'll have to look.

Comment 5 by Scott Stroz posted on 11/22/2006 at 8:25 AM

Josen - To get the 'Enter' key to submit the form, you merely need to add the 'defaultButton' attribute to the <mx:Form> tag. Then, when an element in the form has the focus, hitting the enter key will havce the same effect as clicking the button.

An example of this would be, if you had an <mx:button> with an id of submitBtn, you would use <mx:form ... defaultButton="{submitBtn}" ... >

Comment 6 by Scott Stroz posted on 11/22/2006 at 8:26 AM

Ray - Design view for Flex is the bomb. It will become your friend...quickly.

Comment 7 by todd sharp posted on 11/22/2006 at 8:29 AM

Nice Scott - thanks for that tip!

Comment 8 by Raymond Camden posted on 11/22/2006 at 9:21 AM

Scott, I added defaultButton to my form. Thanks for the tip.

Comment 9 by Brian Swartzfager posted on 10/6/2007 at 7:19 PM

Just one caveat...I discovered this morning that if your last/only form field is a TextArea control, which is designed to listen for the Enter key to create line breaks, the defaultButton property will not do the job.

In that case, you'll need to create a function that takes the KeyboardEvent and program it to do your submission when the string value of the charCode equals 13. There's a LiveDocs article about it: