11 Replies Latest reply on Jul 27, 2009 7:55 AM by Gregory Lafrance

    Targeting a specific view State within the second component

    James Bower
      For example, I can target a component using click="parentDocument.mainView.selectedIndex=2"; but I need to target a specific view State within the second component. How do I do this?

      So I have a button on component "A" (click="parentDocument.mainView.selectedIndex=2") which takes me to component "B". Component "B" has additional States and I want to be able to target one of them.

      I tried ( click="parentDocument.mainView.selectedIndex=2;currentState='secondState'") but I get an error.
        • 1. Re: How do I target a view State in a second compenent
          Flex_Coder111
          Instead you can crest one more state and keep the additional state of B there
          • 2. Re: How do I target a view State in a second compenent
            James Bower Level 1
            Thanks for your reply. I realize my question is total newbonics. However your solution would be equal to building another duplicate room somewhere else because I'm not able to enter the one I have at home.

            So does Flex only let you drive to your house (read "component B") or to the start/base state of a component (which has other states)? Seems like I can get to the house but I can't access the kitchen (second or third state).

            Component A (with button to component B)

            Component B (with 3 view states)

            I want to be able to target the second or third state.

            Sorry for all the redundancy but I need an answer that's something like:

            <mx:Button label="Second State" click="parentDocument.mainView.selectedIndex=2;currentState='secondState' "/>


            • 3. Re: Peter please help me out here.
              peterent Level 2
              I'm not really sure what you are trying to do, but did:

              click="parentDocument.mainView.selectedIndex=2; parentDocument.mainView.currentState='secondState'" ??

              If you have a component and want to change its state, you just set its currentState.
              • 4. Peter please help me out here.
                James Bower Level 1
                Hi Peter,
                Thank you for your reply. Admittedly I'm new to Flex and so my thinking is still not quite up to speed with the "how' of things. It may be that my question, based on my understanding of Flex environment, is not very good.

                I have two link buttons on my main.mxml page. One link button opens home.mxml component whose currentState = 'New Books'. The second link button on my main.mxml page also opens home.mxml but I'd like it to open another <mx:State name="Library">

                :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::
                Main.mxml
                <mx:LinkButton label="New Books" click="parentDocument.mainView.selectedIndex=2"/>

                <mx:LinkButton label="Library" click="??? I don't know how to construct this link to open the Library State???"/>
                ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::

                home.mxml
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                currentState="New Books">

                <mx:states>

                <mx:State name="New Books">
                <mx:AddChild position="lastChild">
                <mx:Text text="New books are here!"/>
                </mx:AddChild>
                </mx:State>

                <mx:State name="Library">
                <mx:AddChild position="lastChild">
                <mx:Text text="Welcome to the Library"/>
                </mx:AddChild>
                </mx:State>

                </mx:states>

                :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::

                I hope I explained things a bit more clearly.

                Thanks,
                James
                • 5. Re: Peter please help me out here.
                  peterent Level 2
                  Yes, that's much clearer. I think you are saying that in Main.mxml you have a ViewStack with 2 children, both home.mxml. The first one is fine because its default state is "New Books", but switching to the second child, also home.mxml, you want the state to be "Library".

                  <mx:ViewStack id="stack" creationPolicy="all" ...>
                  <local:home id="first" ... />
                  <local:home id="second" ... />
                  </mx:ViewStack>

                  <mx:LinkButton label="Library"
                  click="stack.selectedChild=second; second.currentState='Library'" />

                  It is important that the ViewStack have creationPolicy="all" so that both instances of home.mxml get created. If you fail to do that, setting the currentState in second may not work. I say "may not" because I haven't tried it. It might set the currentState property and then display it when the contents are created. It would be worth a try.

                  Ideally I would make 2 separate components, homeNewBooks.mxml and homeLibrary.mxml. If there is a lot of overlap and just a few things different, then you might look into using something other than a ViewStack.
                  • 6. Re: Peter please help me out here.
                    James Bower Level 1
                    Thanks for your reply Peter.

                    I'm not sure that this is the answer I'm looking for but it has inspired me to rethink my approach to navigation.

                    I have one more quick question:

                    I have a component that plays a video. On that component I can pause the video when I click the next or back button. But when I use that video component in a new page with linked State views (ie, with other components) I have to use different next and back buttons to call the other States (this.currentState='etc'). Now the pause() function if I add it to the new next or back buttons throws an error. Is there a way to import the functions of one component into the new component?

                    Thanks again...
                    • 7. Re: Targeting a specific view State within the second component
                      peterent Level 2
                      You'll have to post a bit of the code. There are dozen ways you could be implementing this. It could be a scoping problem or it could be that the states have removed components, and so forth.
                      • 8. Re: Targeting a specific view State within the second component
                        ajdove

                        I have a similar issue of targeting a viewState, however, my issue is targeting second (or third or fourth) viewState of parentDocument from a different viewState of that same parent. So I have an application document which loads 5 different viewStates. Each viewState loads a module using <mx:moduleLoader>. If I am currently viewing viewState 1 (thereby using a loaded module) and want to call a separate viewState of the parent. How do I do this?

                         

                        I will show my example by loading code for the main application erp.mxml, and 2 separate modules called modAccountPayable.mxml and modWelcome.mxml.  If I load the application and click the HOME button which launches the modWelcome.mxml module I want to be able to click a button (or any other control for that matter) and target a new viewState "acctPay" from the parentDocument, which happens to load a new module modAccountPayable.mxml.

                         

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationPolicy="all" layout="absolute" width="100%" height="100%" xmlns:p="com.erp.*">

                        <mx:Script>

                        <![CDATA[

                        import mx.events.ItemClickEvent;

                         

                                    private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {

                                        currentState = evt.item.data;

                         

                                    }

                        ]]>

                        </mx:Script>

                         

                         

                            <mx:Array id="dp">

                                <mx:Object data="Welcome" label="Home" />

                                <mx:Object data="CustomerManager" label="Customer Management" />

                                <mx:Object data="VendorManager" label="Vendor Management" />

                                <mx:Object data="OrderEntry" label="Order Entry" />

                                <mx:Object data="AccountPayable" label="Acct Payables" />

                                <mx:Object data="AccountReceivable" label="Acct Receivables" />

                                <mx:Object data="Employees" label="Employees" />

                            </mx:Array>

                         

                        <mx:states>

                        <mx:State name="Help"/>

                        <mx:State name="CustomerManager">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="custMgr" url="com/erp/modules/modCustomerMgr.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        <mx:State name="AccountPayable">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="acctPay" url="com/erp/modules/modAccountPayable.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        <mx:State name="AccountReceivable">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="acctRec" url="com/erp/modules/modAccountReceivable.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        <mx:State name="OrderEntry">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="orderEntry" url="com/erp/modules/modOrderEntry.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        <mx:State name="VendorManager">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="vendMgr" url="com/erp/modules/modVendorMgr.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        <mx:State name="Employees">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="employee" url="com/erp/modules/modEmployees.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        <mx:State name="Welcome">

                        <mx:AddChild relativeTo="{bodyBox}" position="lastChild">

                        <mx:ModuleLoader id="welcome" url="com/erp/modules/modWelcome.swf" width="100%" height="100%"/>

                        </mx:AddChild>

                        </mx:State>

                        </mx:states>

                        <mx:Canvas x="0" y="108" width="100%" height="492" id="bodyBox">

                        </mx:Canvas>

                         

                        <mx:ApplicationControlBar x="0" y="0" width="100%" height="100" dock="true">

                        <mx:Canvas width="100%" height="100%" id="appCntrlBarCanvas">

                         

                         

                        <mx:ToggleButtonBar id="toggleButtonBar"

                                        dataProvider="{dp}"

                                        itemClick="toggleButtonBar_itemClick(event);" />

                         

                        </mx:Canvas>

                        </mx:ApplicationControlBar>

                        </mx:Application>

                         

                         

                         

                        modWelcome.mxml

                        <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">

                        <mx:Button x="166" y="179" label="Button" click="='acctPay'"/>

                         

                        </mx:Module>

                         

                         

                        modAccountPayable.mxml

                         

                        <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">

                        <mx:Button x="167" y="139" label="Click me "/>

                         

                        </mx:Module>

                         

                        In the image below, you will see the main application  with the HOME button already clicked which loaded the modWelcome.mxml module. I want to be able to click the button from this viewState and/or this module and traverse back to the parentDocument and then to a different viewState "acctPay". I currently am getting an error as an undefined State 'acctPay'.

                        ScreenHunter_0698.jpg

                         

                        Please help!!

                        Much thanks

                        Alex Dove

                        • 9. Re: Targeting a specific view State within the second component
                          Gregory Lafrance Level 6

                          States should be used for simple components. You should use a ViewStatck.

                           

                          If this post answers your question or helps, please mark it as such.

                          • 10. Re: Targeting a specific view State within the second component
                            ajdove Level 1

                            Ok. I will investigate this suggestion and reply back.