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?
Archived Comments
Ray - You can do that, but I think it takes more than one step.
var thisChild = mainView.getCchildByName(childName);
mainView.selectedIndex(mainView.getChildIndex(thisChild))
I have not tested this, but am fairly certain it should work.
One thing you could do is create a custom component based on a <mx:viewstack> and add this functionality as a new method. I have done that for several projects where I know I will need certain functionality of a control or caontainer more than once.
Scott, think you can write that component up and blog it? I'd like to see it.
Absolutely.
Looking at the documentation, you should be able to set whcich child is visible by using selectedChild.
mainView.selectedChild=id of child;
I am still going to blog about custom components, though.
You know I saw that- and I SWEAR the doc I saw said it was readOnly. I must have not been awake yet. Thanks Scott. Updating my version now.
Worked perfectly. Also note I added your defaultButton suggestion to the form.
Ray,
Did you find out if you can call it by id? I think it would be much easier to call it as such.
mainView.selectedIndex=id_of_element;
instead of
mainView.selectedIndex=1;
You didn't read the comments. :) Scott said I could - I tested - and it worked fine. It is NOT in the online version, but will be in the next build.
Ray,
I apologize for that. I saw his comments and I was using mainView.selectedIndex instead of child. That works great though, it makes it much easier to identify. THANKS!!!
Ray,
I was getting a warning for checkForm() that no return type has been defined. Im a newbie to AS and Flex learning myself. You can add a returntype like this
function checkForm():void { }
So was I. Already fixed locally. I also made it private as well. That removed all the warnings for me.
I used states to create the transition from my login to the main chat, it worked pretty well.
http://www.flashcomguru.com...
I think states can get hard to manage though when a lot of components/properties are changed. I consider viewstack next time, too.