First stab at my Flex homework

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;

</mx:states> </code>

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 developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA