The first version of my Flex homework is done. You can view it here:
http://ray.camdenfamily.com/demos/flexsec/SimpleRemotingTest.html
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">
</mx:State>
<mx:State name="default">
<mx:RemoveChild target="{loginStage}" />
<mx:SetProperty target="{mainStage}" name="visible" value="true"/>
</mx:State>
</mx:states>
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!"