Second revision of my Flex homework

This post is more than 2 years old.

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%">
&lt;mx:HBox horizontalAlign="center" verticalAlign="middle" id="loginStage" width="100%" height="100%"&gt;
		
	&lt;mx:Panel id="loginScreen" title="The Logon Screen" width="500"&gt;
		
		&lt;mx:Form id="login" defaultButton="{loginButton}"&gt;
			&lt;mx:FormItem label="Username:" required="true"&gt;
					&lt;mx:TextInput id="username" /&gt;
			&lt;/mx:FormItem&gt;
			&lt;mx:FormItem label="Password:" required="true"&gt;
					&lt;mx:TextInput id="password" displayAsPassword="true" /&gt;
			&lt;/mx:FormItem&gt;
	
		&lt;/mx:Form&gt;
			
		&lt;mx:ControlBar horizontalAlign="right"&gt;
			&lt;mx:Button id="loginButton" label="Login" click="checkForm()" /&gt;
		&lt;/mx:ControlBar&gt;
	            
	&lt;/mx:Panel&gt;

&lt;/mx:HBox&gt;
	
&lt;mx:HBox id="mainStage" width="100%" height="100%"&gt;
	&lt;mx:Text text="Main Stage" /&gt;	
&lt;/mx:HBox&gt;

</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?

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 https://www.raymondcamden.com

Archived Comments

Comment 1 by Scott Stroz posted on 11/22/2006 at 7:34 PM

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.

Comment 2 by Raymond Camden posted on 11/22/2006 at 7:46 PM

Scott, think you can write that component up and blog it? I'd like to see it.

Comment 3 by Scott Stroz posted on 11/22/2006 at 7:49 PM

Absolutely.

Comment 4 by Scott Stroz posted on 11/22/2006 at 8:36 PM

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.

Comment 5 by Raymond Camden posted on 11/22/2006 at 8:44 PM

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.

Comment 6 by Raymond Camden posted on 11/22/2006 at 8:46 PM

Worked perfectly. Also note I added your defaultButton suggestion to the form.

Comment 7 by Dan posted on 11/22/2006 at 9:59 PM

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;

Comment 8 by Raymond Camden posted on 11/22/2006 at 10:00 PM

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.

Comment 9 by dan posted on 11/22/2006 at 10:23 PM

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!!!

Comment 10 by dan posted on 11/23/2006 at 12:53 AM

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 { }

Comment 11 by Raymond Camden posted on 11/23/2006 at 12:56 AM

So was I. Already fixed locally. I also made it private as well. That removed all the warnings for me.

Comment 12 by Stefan Richter posted on 11/23/2006 at 2:28 AM

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.