Yesterday I posted the first version of the Flex assignment I created for myself. (For more information about what I'm doing, read this entry.)

I mentioned that I had a bit of trouble with states but that I felt I was slowly getting it. However - after speaking a bit with Mike Kollen, I think I realized that I was using states incorrectly. He said that he only uses states when he is modifying controls on screen. An example of this would be a search form that has an "Advanced" mode with more buttons. He said for full "change the whole page" type operations, ViewStacks may be more appropriate.

So I switched my code from using States to ViewStacks. The nice thing about ViewStacks is that they work exactly like I imagined States would. You basically wrap a set of components in the ViewStack, and only one child is visible at a time. Here is the new ViewStack-ified version of my code:

<mx:ViewStack id="mainView" width="100%" height="100%">

<mx:HBox horizontalAlign="center" verticalAlign="middle" id="loginStage" width="100%" height="100%">

<mx:Panel id="loginScreen" title="The Logon Screen" width="500">

<mx:Form id="login" defaultButton="{loginButton}"> <mx:FormItem label="Username:" required="true"> <mx:TextInput id="username" /> </mx:FormItem> <mx:FormItem label="Password:" required="true"> <mx:TextInput id="password" displayAsPassword="true" /> </mx:FormItem>

</mx:Form>

<mx:ControlBar horizontalAlign="right"> <mx:Button id="loginButton" label="Login" click="checkForm()" /> </mx:ControlBar>

</mx:Panel>

</mx:HBox>

<mx:HBox id="mainStage" width="100%" height="100%"> <mx:Text text="Main Stage" /> </mx:HBox>

</mx:ViewStack>

Notice that my two HBoxs act like pages of the application. How do I switch my current page? My checkForm function now does this:

mainView.selectedIndex=1;

mainView was the name of the ViewStack container itself. If you want to see the complete code, go here:

http://ray.camdenfamily.com/demos/flexsec2/SimpleRemotingTest.html

You can also right click/view source on this demo to see the complete code.

Next up is the actual authentication. I'm going to do the simple Flash Remoting call at first and then look at how I can use this to call secured CFC methods.

Open Question: Look at the code I used to select the ViewStack. That feels fragile to me. What if, for some reason, I swap the children of my ViewStack? It seems like it would be nicer to do something like:

mainView.selectedChild("id of the child");

As far as I know, ViewStacks don't support that - but a utility function could be created to do that I suppose. Thoughts?