Viewstack inside viewstack?

hello!
I'm just creating a simple website. A canvas in the left has
inside an Accordion and inside of each segment of it I have a
ToggledButtontBar. So now when I click in a segment of the
Accordion I access to this Bar on which I have a not visible Button
toggled (belox Accordion's segment label) and the other buttons.
This way when I start in a section I have to choose a subsection
(any of the buttons).
The Accordion controls a StackView and each of the Bars
another Stackview within. The problem is there is no way of having
a viewstack inside another working propertly. Any ideas?
Thank you!

You can certainly have a ViewStack inside another ViewStack.
The following is perfectly legal:
<mx:ViewStack id="outer">
....<mx:Canvas label="First" width="200" height="200"
backgroundColor="0xFF0000">
..........<mx:Button label="Go"
click="outer.selectedIndex=1;inner.selectedIndex=0" />
....</mx:Canvas>
....<mx:ViewStack id="inner">
..........<mx:Canvas label="Second" width="200"
height="200" backgroundColor="0x00FF00">
...................<mx:Button label="First"
click="outer.selectedIndex=0" />
..........</mx:Canvas>
....</mx:ViewStack>
</mx:ViewStack>

Similar Messages

Using a custom Viewstack inside another gives an error

Hi, can anybody tell me why using two custom ViewStacks components inside one another I get this (workspace log) error?
"Custom component model has recursive definition: components.ViewStack"
My component ViewStack.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
</mx:ViewStack>
MyApplication.mxml
    <c:ViewStack id="views" >
        <c:ViewStack id="mainViews2" >
        </c:ViewStack>
    </c:ViewStack>
Any combination involving the real mx:ViewStack works fine.
Using FlashBuilder 4.5
Thanks

Thank you. This did the trick
package components {
    import mx.containers.ViewStack;
    public class ViewStack extends mx.containers.ViewStack {
        public function ViewStack() {
            super();
            percentWidth = 100;
            percentHeight = 100;

ViewStack's TabBar: vertical position icon and description

Hello everyone,
I created a ViewStack with two tabs and I quote, in addition to the description, even an icon. The code is as follows:
<mx:ViewStack id="viewstack" creationPolicy="all" left="0" right="0>
<mx:Canvas label="Tab 1" icon="@Embed('icon1.png')" id="tab_1">
                            <! - Any elements ->
               </ Mx: Canvas>
<mx:Canvas label="Tab 2" icon="@Embed('icon2.png')" id="tab_2">
                            <! - Any elements ->
                </ Mx: Canvas>
</ Mx: ViewStack>
In this way, the icon is placed next to the description of the tab, precisely on the left. I would rather that the icon is located above description, but I do not know how. I tried to set the vertical layaout the Application tag, but obviously I will change the entire layout.
You can determine the position of the icon, or do I create a custom component for use in ViewStack Canvas?
Thank you so much aid.

This was for mx:ButtonBar (because I apparently didn't read your question very closely), but it should also work for MX TabBar with a bit of tweaking (like extending Tab instead of ButtonBarButton):
http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-co ntrol-in-flex-redux/
Peter

Detect initialization on viewStack change

Hi There,
I'm looking for a solution to detect if a viewStack element got selected, programatically?
Situation:
1. click on a button to change the index of the viewStack
2. viewStack changes to the given component by the index
3. detect within the component that it has been selected (not initialized, that happens only once )
4. execute appropriate code for this changes
I couldn't find any solution, yet, tried with firing event but it fires before initialization happens with registry pattern but detection of selection unresolved, yet.
thanks
Sandor

If the views are instanciated on selection, the change event will probably be fired before the creationComplete event of the child view.
One solution, if the views under the viewstack are not that heavy, would be to set the ViewStack creationPolicy to all, to avoid any instanciation problem.
Another solution would be to listen for the creationComplete event of the ViewStack children. You can prevent using the change event until the creationComplete event has been fired on the concerned child, and use the creationComplete event instead for the first time the view is showed.

Reload viewstack child

I am developing a flex application which has a master detail pages. The master page has a list of items in a datagrid and when the user clicks on an item the viewstack child is switched to display the details. I am also using a link bar to navigate back to the master view. However when the user clicks on a different item the child page does not get refreshed.
What is the best way to reload the child view when the user clicks on a datagrid item?

The easiest way is to have a bindable property in your detail View like:
[Bindable]
var user:UserType;
and to bind all of your components to that user object, fe:
<mx:Label id="userName" text="{user.name}" />
And in your ViewStack:
<mx:ViewStack>
     <SomeContainer>
          <mx:DataGrid id="yourDataGrid" ... />
     </SomeContainer>
      <UserDetailView user="{yourDataGrid.selectedItem}"
</mx:ViewStack>
After changing the selection in your dataGrid, a new user object will be automatically binded to the view component.
Of course you may consider a more complex solution with building a model layer containg selectedUser property, but the solution above should work ok.

Copy of a viewstack

I want to create a viewstack and copy the contents of another
viewstack into it. i.e.
viewStack:ViewStack = new ViewStack();
vs:ViewStack = new ViewStack();
/*add some display objects to vs*/
vs.addChild(displayObject1);
vs.addChild(displayObject2);
/*copy vs into viewStack*/
viewStack = vs;
so why doesn't this method work?

"dnbwise" <[email protected]> wrote in
message
news:gb0sga$5qb$[email protected]..
>I want to create a viewstack and copy the contents of
another viewstack
>into
> it. i.e.
>
> viewStack:ViewStack = new ViewStack();
> vs:ViewStack = new ViewStack();
>
> /*add some display objects to vs*/
> vs.addChild(displayObject1);
> vs.addChild(displayObject2);
> .
> .
> /*copy vs into viewStack*/
> viewStack = vs;
>
>
> so why doesn't this method work?
Because you only have one ViewStack with two variables
pointing at it.
HTH;
Amy

HTTPService request for each View inside a ViewStack

Can someone point me in the right direction to have a
httpservice request for each view inside my viewstack?
<mx:ViewStack id="views">
<mx:Canvas id="view0">
</mx:Canvas>
<mx:Canvas id="view1">
</mx:Canvas>
</mx:ViewStack>
Can someone whip together a quick example or just point me in
the right direction?
Thanks

Ahh, don't do that.
Use a central HTTPService instance, and use AsyncToken to
keep track of which result goes where. Some code snippets below.
Tracy
Sample code using HTTPService, e4x, handler function to
populate a list item.
Also shows usage of AsyncToken.
The DataGrid tag:
<mx:DataGrid id="dg" dataProvider="{_xlcMyListData}"
.../>
The HTTPService tag:
<mx:HTTPService id="service" resultFormat="e4x"
result="onResult(event)" fault="..../>
Script block declaration:
import mx.rpc.Events.ResultEvent;
[Bindable]private var _xlcMyListData:XMLListCollection;
Invoke send:
var oRequest:Object = new Object();
oRequest.Arg1 = "value1";
var callToken:AsyncToken = service.send(oRequest);
token.callId = "myQuery1";
Result Handler function:
private function onResult(oEvent:ResultEvent):void {
var xmlResult:XML = XML(event.result); //converts result
Object to XML. can also use "as" operator
var xlMyListData:XMLList = xmlResult.myListData; //depends
on xml format, is row data
_xlcMyListData = new XMLListCollection(xlMyListData); //wrap
the XMLList in a collection
trace(_xlcMyListData.toXMLString()); //so you can see
exactly how to specify dataField or build labelFunction
var callToken:AsyncToken = oEvent.token;
var sCallId = callToken.callId; //"myQuery1"
switch(sCallId) {
case "myQuery1":
doQuery2();
break;
}//onResult

Error accessing object inside a viewstack

I'm trying to call this when the application initializes:
quote:
public function init():void {
rtByQueues.addEventListener(ChartItemEvent.ITEM_CLICK,
queuesUpdate);
and getting this error:
quote:
TypeError: Error #1009: Cannot access a property or method of
a null object reference.
at template/init()
at template/___template_Application1_initialize()
at
flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.core::UIComponent/set processedDescriptors()
at mx.core::Container/createComponentsFromDescriptors()
at mx.core::Container/mx.core:Container::createChildren()
at mx.core::UIComponent/initialize()
at mx.core::Container/initialize()
at mx.core::Application/initialize()
at template/initialize()
at mx.managers::SystemManager/
http://www.adobe.com/2006/flex/mx/internal::childAdded()
at
mx.managers::SystemManager/private::initializeTopLevelWindow()
at mx.managers::SystemManager/private::docFrameHandler()
at [execute-queued]
I figured it out that its because I'm using a ViewStack and
rtByQueues columnchart is inside one of those views. How can I do
the above when using a viewstack like so:
quote:
<viewstack id="views">
<canvas id="view1">
<grid><gridrow><griditem>
<columnchart
id="rtByQueues">...........</columnchart>
and so on....
I'm using flex 3. Thanks!

One approach is to set the creationPolicy="all" for your
ViewStack. However, this can slow down start up times and is often
not the best choice.
<viewstack id="views" creationPolicy="all">
Another approach would be to set the itemClick event listener
directly in your mxml:
<columnchart id="rtByQueues"
itemClick="queuesUpdate()">
This approach seems to be the most efficient since it is only
activated if the particular view is actually needed.
Vygo

TittleWindows does not resize

I have extremly amature question but I am still not clear
after reading SDk all day long anfd finding all those invalidateXX
methods that do not seem to help , anyways here is my problem :
I have tittleWindow that has ViewStack which has two mx:Box
containers inside.
first Box container width = 100px
second Box width = 410 px.
inside tittleWindow I have listener for viewstack change
(wheneve viewstack changes its selected child ):
this.myviewsStack.addEventListener(IndexChangedEvent.CHANGE,initSelectedStackProps);
private function initSelectedStackProps(e:*) : void {
... some code ....
Alert.show("width =
"+this.myviewsStack.selectedChild.width);
when App loads TittleWindow pups up and I have Alert :
Alert.show("width "+this.selectedChild.width);
at Very First Load and very first time when Tittle Window
pops-up
Alert box says correct : width=100 .
but if I close the tittleWindow and open it again and set
selected child of viewStack to be second mx:Box then Alert says
width=0?
and visa versa
(if very first time Tittle Window pops-up and selected item
of viewStack is second Box , Alert says :width=410 but afterwards
every time tittleWindow pups-up and viewStack selected item is
first Box then it says width=0 for that box .)
I have exhausted all my resources to get that working
basically I want tittle window to resize whenever it shows up to
reflect size of whatever its viewStac's selecteditem is. since I
have different sized Boxes inside viewStack
I appreciate all your advices.
Kind Regards.

The Array to Cluster function doesn't know how many elements to give you. You have to tell it by right-clicking on it and selecting "Cluster Size...". You will see a dialog where you can specify how many elements you want.
Dan Press
Certified LabVIEW Architect
PrimeTest Corporation

How to make a private chat look in another window

hi
   iam new to flex
and now what my question is when i double click on the particular user present in the chat room
i should get chat open in new window
is this possible please help out in this issue

hi
   thanks for urs replys its helping a lot
and now i wnt some information from u abt private chat
see wt my doubt is iam getting user name and uid when i click on the user in the userlist with that iam creating an instance to the class "ChatMessageDescriptor" and with that iam sending msgs to the user clicked by the property recipient
and iam initiating that private chat in seperate label privatechat space and now wt the problem is when i click on the username
for example iam the user A and i clicked on user B the window gets open for userA and user A can send msgs to user B directly
but where as in place of User B the window doesnot get open, only when he clicks on User A he is able to send msgs to User A and he can chat w User A directly from there on words
so wt i want is how to intiate him that chat is open with User A so click him in the userlist or directly open him a window as soon as User A clicks
User B is this possible plz refer my code u will get clearly understood the problem
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()"
    xmlns:rtc="AfcsNameSpace">
    <mx:Script>
        <![CDATA[
            import com.adobe.rtc.pods.simpleChatClasses.ChatMessageDescriptor;
            import com.adobe.coreUI.controls.WhiteBoard;
            import com.adobe.rtc.sharedModel.SharedCollection;
            import com.adobe.rtc.sharedManagers.UserManager;
            import com.adobe.rtc.sharedManagers.descriptors.UserDescriptor;
            import mx.controls.listClasses.IListItemRenderer;
            import mx.controls.listClasses.ListBaseSelectionData;
            import mx.collections.IList;
            import mx.events.ItemClickEvent;
            import mx.controls.Alert;
            import com.adobe.rtc.events.AuthenticationEvent;
            import com.adobe.rtc.events.ConnectSessionEvent;
            import com.adobe.rtc.events.SessionEvent;
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;
            import flash.net.*;
            import mx.collections.ArrayCollection;
            import com.adobe.rtc.pods.simpleChatClasses.SimpleChatModel;
            import com.adobe.rtc.events.ChatEvent;
            private const applicationTitle:String = "AFCS Sample Application";
              [Bindable]
       public var chatModel:SimpleChatModel;
       public var clickeduser:UserDescriptor = new UserDescriptor;
         public var userwnt:String=new String;
          public var clickusername:String=new String;
           public var selindex:int;
           public var count:int;
            private function init():void
                sess.addEventListener(SessionEvent.ERROR, onEventNotification);
                sess.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE, onEventNotification);
                auth.addEventListener(AuthenticationEvent.AUTHENTICATION_FAILURE, onEventNotification);
                auth.addEventListener(AuthenticationEvent.AUTHENTICATION_SUCCESS, onEventNotification);
                popup(loginWindow);
            private function popup(window:IFlexDisplayObject):void
                PopUpManager.addPopUp(window, this, true);
                PopUpManager.centerPopUp(window);
                window.visible = true;
             * Process AFCS Events
            private function onEventNotification(p_event:Event):void
                if (p_event.type == SessionEvent.SYNCHRONIZATION_CHANGE) {
                    if (sess.isSynchronized) {
                        // isSyncronized==true : we are connected to the room
                        panel.title = "Connected to room " + sess.roomURL;
                        PopUpManager.removePopUp(loginWindow);
                    } else {
                        // isSyncronized==false : we are disconnected from the room
                        panel.title = applicationTitle;
                        sess.roomURL = null;
                        notificationMessage.text = "";
                        popup(loginWindow);
                else if (p_event.type == AuthenticationEvent.AUTHENTICATION_SUCCESS) {
                    // Authentication succeeded
                    notificationMessage.text = "Authentication Succeeded";
                else if (p_event.type == AuthenticationEvent.AUTHENTICATION_FAILURE) {
                    // Authentication failed : bad password or invalid username
                    notificationMessage.text = "Authentication Failed";
                else if (p_event.type == SessionEvent.ERROR) {
                    // Generic session error, but this can happen if you mispell the account/room names
                    // (sError.error.name == "INVALID_INSTANCE" and sError.error.message == "Invalid Instance")
                    var sError:SessionEvent = p_event as SessionEvent;
                    notificationMessage.text = sError.error.message;
                else
                    notificationMessage.text = "Got event " + p_event;
            private function login():void
                notificationMessage.text = "";
                auth.userName = username.text;
                auth.password = passwordBox.visible ? password.text : null; // password==null : the user is a guest
                 userwnt=username.text;
                sess.roomURL = roomURL.text;
                sess.login();
            protected function buildModel():void
                // Create the model: just calling the constructor won't create the collection node or pass the messages.
                // Call subscribe and give it a shared ID while creating the model.
                // The shared ID becomes the name of the collection node.
                  if(clickusername==userwnt)
                     Alert.show(clickusername);
                     viewStack.selectedChild=white;
                chatModel = new SimpleChatModel();
                chatModel.sharedID = "myChat_SimpleChatModel";
                chatModel.subscribe();
                chatModel.addEventListener(ChatEvent.HISTORY_CHANGE, onChatMsg);
                this.addEventListener(KeyboardEvent.KEY_UP, onKeyStroke);
             public var cmd:ChatMessageDescriptor = new ChatMessageDescriptor();
            public function userclick(bharath):void
                count=0;
                selindex=bharath;
                clickeduser= sess.userManager.userCollection[bharath] as UserDescriptor;
                var orignaluser:UserDescriptor = sess.userManager.userCollection[0] as UserDescriptor;
                var username=orignaluser.displayName;
                clickusername=clickeduser.displayName;
                cmd= new ChatMessageDescriptor();
                cmd.recipient=clickeduser.userID;
                cmd.recipientDisplayName=clickusername;
                cmd.msg="hi";
                viewStack.selectedChild=white;
                  buildModel();
                chatModel.sendMessage(cmd);
                protected function clearChat():void
                chat_mesg_area.text = "";
                chatModel.clear();
            protected function submitChat(str:String):void
             if(count==0)
             clearChat();
             count=1;
            var clickeduser:UserDescriptor = sess.userManager.userCollection[selindex] as UserDescriptor;
            var clickusername=clickeduser.displayName;
             cmd= new ChatMessageDescriptor();
                cmd.recipient=clickeduser.userID;
                cmd.recipientDisplayName=clickusername;
                cmd.msg=chat_mesg_input.text;
                chatModel.sendMessage(cmd);
                chat_mesg_input.text = "";
            protected function onChatMsg(p_evt:ChatEvent):void
                if(p_evt.message != null && p_evt.message.msg != null && p_evt.message.displayName != null)
                    chat_mesg_area.text += "\r\n" + p_evt.message.displayName + ": " + p_evt.message.msg;
                else
                    chat_mesg_area.text = "";
            protected function onKeyStroke(p_evt:KeyboardEvent):void
                if(p_evt.keyCode == Keyboard.ENTER) {
                    submitChat(chat_mesg_input.text);
        ]]>
    </mx:Script>
    <rtc:AdobeHSAuthenticator id="auth"/>
    <rtc:RoomSettings id="settings" autoPromote="true"/>
    <mx:Panel id="panel" title="{applicationTitle}" width="100%" height="100%" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5">
        
        <mx:TitleWindow id="loginWindow" title="Connect to Room" visible="false">
            <mx:VBox>
                <mx:HBox>
                    <mx:Label text="Room URL:" width="70"/>
                    <mx:TextInput id="roomURL" width="295" tabIndex="1">
                        <mx:text>http://connect.acrobat.com/exampleURL/exampleroom</mx:text>
                    </mx:TextInput>
                </mx:HBox>
                <mx:HBox>
                    <mx:Label text="Username:" width="70"/>
                    <mx:TextInput id="username" tabIndex="2">
                        <mx:text>guest</mx:text>
                    </mx:TextInput>
                    <mx:Button label="Login" click="login()" width="126" tabIndex="4"/>
                </mx:HBox>
                <mx:HBox>
                    <mx:HBox id="passwordBox">
                    <mx:Label text="Password:" width="70"/>
                    <mx:TextInput id="password" displayAsPassword="true" tabIndex="3"/>
                    </mx:HBox>
                    <mx:RadioButton label="User" selected="true" click="passwordBox.visible = true"/>
                    <mx:RadioButton label="Guest" click="passwordBox.visible = false"/>
                </mx:HBox>
                <mx:Text id="notificationMessage" text=""/>
            </mx:VBox>
        </mx:TitleWindow>
        
        <rtc:ConnectSessionContainer
            id="sess"
            authenticator="{auth}"
            initialRoomSettings="{settings}"
            autoLogin="false" width="100%" height="100%" >
            <mx:HBox width="100%" height="100%" horizontalGap="0">
                <mx:VBox>
                    <mx:TabBar dataProvider="viewStack" direction="vertical" width="100" verticalGap="0"/>
                    
                </mx:VBox>
                <mx:ViewStack id="viewStack" width="100%" height="100%" borderSides="left top right bottom" borderStyle="solid" borderThickness="2">
                    
                    <mx:HBox label="Chat" width="100%" height="100%">
                        <rtc:SimpleChat width="40%" height="100%"/>
                        <rtc:WebCamera left="0" right="0" top="0" bottom="0" width="40%" height="100%"/>
                        <mx:List alternatingItemColors="[#DFDFDF,#EEEEEE]" dataProvider="{sess.userManager.userCollection}" width="10%" height="100%" labelField="displayName" id="abc" click="userclick(abc.selectedIndex)"/>
                    </mx:HBox>
                    <mx:Canvas id="white" label="privatechat" width="100%" height="100%" creationComplete="buildModel()">
                     <mx:VBox id="chatBox">
                <rtc:WebCamera id="webcam" width="400" height="223"/>
                <mx:TextArea width="398" height="140" id="chat_mesg_area"/>
                <mx:HBox>
                </mx:HBox>
            </mx:VBox>
            <mx:TextInput width="400" id="chat_mesg_input" y="370"/>
            <mx:Button label="Submit Chat" click="submitChat(chat_mesg_input.text)" y="398"/>
            </mx:Canvas>
                    
                    <mx:Canvas label="FileShare" width="100%" height="100%">
                        <rtc:FileShare left="0" right="0" top="0" bottom="0"/>
                    </mx:Canvas>
                </mx:ViewStack>
            </mx:HBox>
        </rtc:ConnectSessionContainer>
    </mx:Panel>
</mx:Application>

Mx:TabBar is better than s:TabBar

s:TabBar is a downgrade because it doesn't support disabled tabs.
Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="tab1Enabled"
                    label="Tab1.enabled"
                    selected="true"/>
        <s:CheckBox id="tab2Enabled"
                    label="Tab2.enabled"
                    selected="false"/>
    </s:controlBarContent>
    <mx:VBox verticalGap="0"
             verticalCenter="0"
             horizontalCenter="0">
        <mx:TabBar dataProvider="{viewStack}"/>
        <s:TabBar dataProvider="{viewStack}"/>
        <mx:ViewStack id="viewStack"
                      width="200"
                      height="100">
            <s:NavigatorContent id="tab1"
                                label="Tab1"
                                enabled="{tab1Enabled.selected}"
                                backgroundColor="red">
                <s:Label text="Label 1" />
            </s:NavigatorContent>
            <s:NavigatorContent id="tab2"
                                label="Tab2"
                                enabled="{tab2Enabled.selected}"
                                backgroundColor="blue">
                <s:Label text="Label 2" />
            </s:NavigatorContent>
        </mx:ViewStack>
    </mx:VBox>
</s:Application>

Thanks for the simple, complete code sample. I have filed a bug for this here: http://bugs.adobe.com/jira/browse/SDK-31873

Handling Visual Changes in a Cairngorm Application

I was wondering if there are any suggestions/best practices for how to handle visual changes in a Cairngorm Application.
I am currently working on a Cairngorm Application with many moving parts - Trees, Lists, ViewStacks with ViewStacks as children. I want the application to be able to change visually based on some user actions - no real business logic involved. For instance, I have a menu that has options for displaying PopUps, or making hidden Panels visible. Right now, I am using Events all over the place to bubble up to the appropriate parent component.
Does it make sense to have properties in the Model that control the visual aspects of the Application?
Any thoughts are greatly appreciated.
Thank you.

Absolutly, I think.
We bind, for instance, the enabled property of many controls to {model.loginOK} for instance, or control visible/includeInLayout with {model.userRole=='admin'}.

How to disable a tab in a spark tab bar?

I have a spark tab bar linked to a ViewStack. In olden days, IIRC, setting the enabled property of a viewstack member would set the corresponding tab inactive. However, if I try that now, the tab control is still active, but the contents of the viewstack for that tab is indeed disabled.
To reiterate: I want certain tabs in a spark tab bar to be disabled (i.e. unable to be chosen and displaying their disabled skin state).
<s:TabBar id="tabBar" dataProvider="{tabStack}" x="70" y="91" skinClass="CalculatorTabsSkin"/>
<mx:ViewStack id="tabStack" width="100%" height="100%" creationPolicy="all" change="tabStack_changeHandler(event)">
     <s:NavigatorContent id="nc1" label="PIERS">
     <comp:Tab1 id="tab1" width="100%" height="100%" continue="tab1_continueHandler(event)" />
     </s:NavigatorContent>
     <s:NavigatorContent id="nc2" label="FOOTINGS">
     <comp:Tab2 id="tab2" width="100%" height="100%" continue="tab2_continueHandler(event)" numberOfPiers="{totalNumberPiers}" />
     </s:NavigatorContent>
     <s:NavigatorContent id="nc3" label="BAGS OR TRUCK?">
     <comp:Tab3 id="tab3" width="100%" height="100%" totalCubicYards="{totalCubicYards}" totalNumberBags="{totalNumberBags}" />
     </s:NavigatorContent>
</mx:ViewStack>

Addendum:
Literally two minutes after I got back to actually working, I found a more "elegant" solution. I posted it elsewhere, but I guess I forgot to share it here. =/ So I thought I'd update this real quick. =)
If you apply a custom skinClass to your tab bar you can bind the tab.enabled property just like you'd expect/want.

    <fx:Script>
         <![CDATA[
    [Bindable] private var tab2IsReady:Boolean = false;
    private function checkCriteria():void{
         tab2IReady = someOtherThing.isFinished;//Boolean
    ]]>
    </fx:Script>
<s:TabBar id="theTabBar"
   dataProvider="{viewStack}"
   skinClass="skins.CustomTabBarSkin"/>
<mx:ViewStack id="viewStack">
      <s:NavigatorContent label="Tab index 0">
           
      </s:NavigatorContent>
      <s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}">
           
      </s:NavigatorContent>
</mx:ViewStack>

When you type "skinClass" use the auto complete to generate the custom skin (named whatever you want).
The generated code will appear like below (I left out the Script tag).
<?xml version="1.0" encoding="utf-8"?>

<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    alpha.disabled="0.5">
    <fx:Metadata>
        <![CDATA[
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.TabBar")]
        ]]>
    </fx:Metadata>
      
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>
</s:Skin>

Then add the enabled property to the ButtonBarButton & bind it to data.enabled in your skin class.
Change:
           <fx:Component>
           <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
       </fx:Component>
To:
           <fx:Component>
           <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin"
                enabled="{data.enabled}" />
     </fx:Component>
Then any <s:NavigatorContent/> used with a TabBar using that skin will respect the enabled property and do exactly what you expect & want (be enabled when true, & disabled when false).
Hope this helps some people. WIsh I'd remembered to re-post it here when I first figured it out.
Happy Coding! =D
Todd
Message was edited by: Chaos7703 - Just made one statement a bit more explicit.

Using Linkbar objects and EventListeners

The code:
Note, I left out most object specific details, like width and
height etc...
var pl:Panel = new Panel();
var lb:LinkBar = new LinkBar();
lb.addEventListener(MouseEvent.CLICK, httprequestObject);
var vs:ViewStack = new ViewStack();
var cv:Canvas = new Canvas();
cv.label = "navigation button";
vs.addChild(cv);
lb.dataProvider = vs;
pl.addChild(lb);
this.addChild(pl);
public function httprequestObject(e:MouseEvent):void{
Alert.show("success!");
For whatever reason this doesn't work. Suggestions,
thoughts.

Actually here is the complete code incase anyone is
interested in trying it...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.containers.ViewStack;
import mx.controls.LinkBar;
import mx.containers.Panel;
import mx.controls.Alert;
public function init():void{
var pl:Panel = new Panel();
pl.width = 200;
pl.height = 200;
var lb:LinkBar = new LinkBar();
lb.percentWidth = 100;
lb.addEventListener(MouseEvent.CLICK, httprequestObject);
var vs:ViewStack = new ViewStack();
vs.percentWidth = 100;
var cv:Canvas = new Canvas();
cv.percentWidth = 100;
cv.label = "navigation button";
pl.addChild(lb);
lb.dataProvider = vs;
vs.addChild(cv);
addChild(pl);
public function httprequestObject(e:MouseEvent):void{
Alert.show("success!");
]]>
</mx:Script>
</mx:Application>

How to pass a value to a component

In the following file I want to click on a button and send a value to a component. I want that value to change for different buttons but I cannot use the instance name to send that information and I also cannot use a method of tIe class. I tried
instructorView.myVar= e.currentTarget.data
and
instructorView.test()
but both fail. How do I access the properties and methods for this component from the function named click()?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="vertical" applicationComplete="init()">
    <mx:Script>
        <![CDATA[
    private var myData:Array=["first","second", "third"];
    private function init():void{
        for(var i:int=0;i<3;i++){
            var button:Button=new Button;
            button.data=myData[i];
            mainMenu.addChild(button);
            button.addEventListener(MouseEvent.CLICK, click);
    public function click(e:Event):void {
        trace("selected data="+e.currentTarget.data)
        viewStack.selectedChild=instructor
        //instructorView.myVar= e.currentTarget.data
        //instructorView.test()
        ]]>
    </mx:Script>
       <mx:Panel layout="vertical" width="300" height="300" >
       <mx:ViewStack   id="viewStack" >
            <mx:VBox id="mainMenu" label="Login" >
            </mx:VBox>
            <mx:VBox id="instructor" label="Instructor" >
                <local:InstructorView id="instructorView" />
            </mx:VBox>
        </mx:ViewStack >
         <mx:HBox>
             <mx:Button label="Main Menu" click="viewStack.selectedChild=mainMenu;"/>
         </mx:HBox>
    </mx:Panel>
</mx:Application>
InstructorView.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" width="100%" height="100%">
<mx:Script>
    <![CDATA[
[Bindable] public var myVar:String=""
public function init():void{
    trace("init"+myVar)
public function test():void{
    trace("test="+myVar)
    ]]>
</mx:Script>
</mx:Canvas>

I guess you are getting a null object reference error. This has nothing to do with our instructor view code. It is the creationpolicy of the view stack. The component is not created when you assign values.
This is a link to livedocs page on creation policy.
http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html
To solve your problem, either you can set creationPolicy="all" for viewstack or wait for the component to be instantiated completely

Viewstack inside viewstack?

Similar Messages

Maybe you are looking for