4 Replies Latest reply on Oct 21, 2009 11:51 PM by Andrew Rosewarn

    How a child navigatorContent can access his parent?

    petousas Level 1

      I have 1 mx:ViewStack with 3 s:NavigatorContent children inside.

      Ho can i access from the child element(NavigatorContent) the SelectedIndex property of the parent(ViewStack) ?

       

      I have tried event.target.parent.parent.myViewStackid.selectedIndex=1 but never succed.

       

      [using Flash Builder 4beta2]

      thanks very much

        • 1. Re: How a child navigatorContent can access his parent?
          Andrew Rosewarn Level 3

          Hi There

           

          Theres a few ways you could do this have a look below.

           

          <?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/halo" minWidth="1024" minHeight="768">

           

           

          <fx:Script>

          <![CDATA[

          import mx.events.IndexChangedEvent;

           

          [Bindable]

          private var selectedIndex:int

           

          protected function viewstack1_changeHandler(event:IndexChangedEvent):void

          {

          selectedIndex = event.newIndex;

          }

           

          ]]>

          </fx:Script>

           

           

          <mx:ViewStack x="199" y="225" id="viewstack1" width="200" height="200" change="viewstack1_changeHandler(event)">

          <s:NavigatorContent label="View 1" width="100%" height="100%">

          <s:Label text="{viewstack1.selectedIndex}"/>

          </s:NavigatorContent>

          <s:NavigatorContent label="View 2" width="100%" height="100%">

          <s:Label text="{selectedIndex.toString()}"/>

          </s:NavigatorContent>

           

          </mx:ViewStack>

          <mx:ToggleButtonBar x="199" y="442" dataProvider="{viewstack1}">

          </mx:ToggleButtonBar>

          </s:Application>

           

          You can see in the first sNavigator I've simple referenced the id of the viewstack and the selected index property

           

          viewStack1.selectedIndex

           

          However this isn;t good practice as the minute you change the id of your viewstack it will break.  The second s navigayor is better.  The label in here is bound to a variable I have called selectedIndex.  The viewstack listens for a change event and then updates this variable with the selectedIndex, and in turn as the label is bound it displays the new value.  This way you can change Id's in your code and it won't break.

           

          Hope that helps

           

          Andrew

          1 person found this helpful
          • 2. Re: How a child navigatorContent can access his parent?
            petousas Level 1

            thanks very much for the tip on the second s:Navigator. It's really helpful but my button that i want to trigger the ViewStack to change is in another file.

             

            <mx:ViewStack x="7" y="10.4" id="hotelViewStack" width="889" height="392" selectedIndex="0">
                      <s:NavigatorContent label="View" width="100%" height="100%" visible="false">
                           <s:Button x="744.2" y="17.6" label="Add" id="addButton" click="hotelViewStack.selectedIndex = 1"/>
                           <s:Button x="666.2" y="17.6" label="Edit" id="editButton" click="hotelViewStack.selectedIndex = 2"/>
                           <s:Button x="823.2" y="17.6" label="Delete" id="deleteButton"  click="hotelViewStack.selectedIndex = 3"/>
                           <Hotels:ListHotels  width="900" x="-5" y="69"/>
                      </s:NavigatorContent>
            
                      <s:NavigatorContent label="Add" width="100%" height="100%" visible="false">
                           <Hotels:NewHotel />
                      </s:NavigatorContent>
            
                      <s:NavigatorContent label="Edit" width="100%" height="100%" visible="false">
                      </s:NavigatorContent>
            
                      <s:NavigatorContent label="Delete" width="100%" height="100%" visible="false">
                      </s:NavigatorContent>
                 
                 </mx:ViewStack>
            

            In the second Navigator content, isnide my costum "New hotel" Component there is a button that when pressed i want to change the selectedIndex to 0.

             

            And i found it difficult to ACCESS the selectedIndex from inside the costum compoent.

             

            thanks for any help or direction i must work

            thodoris

            • 3. Re: How a child navigatorContent can access his parent?
              Subeesh Arakkan Level 4

              On the button click, dispatch a custom event. Add event listenere in the page containing the Viewstack and change the viewstack index from there.

              Check this livedocs page for dispatching custom events

              http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html

              an example

              http://kennethsutherland.com/2009/05/22/simple-tip-1-custom-events/

              1 person found this helpful
              • 4. Re: How a child navigatorContent can access his parent?
                Andrew Rosewarn Level 3

                HI there

                 

                Yea disatching an event is the way to go.  Heres the same example again with this added.

                 

                Heres the Hotel Component

                 

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

                <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

                xmlns:s="library://ns.adobe.com/flex/spark"

                xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">

                 

                <fx:Script>

                <![CDATA[

                protected function editButton_clickHandler(event:MouseEvent):void

                {

                dispatchEvent(new Event('myButtonClick'));

                }

                ]]>

                </fx:Script>

                 

                <fx:Metadata>

                [Event(name="myButtonClick", type="flash.events.Event")]

                </fx:Metadata>

                 

                 

                <s:Button x="26" y="20" label="My Button" id="myButton" click="editButton_clickHandler(event)"/>

                </s:Group>

                 

                You can see the button event handler dispatched and event called myButtonClick.  Notice the <Metadata> tag.  This tells the flex compiler what this event is called and the type of event it is.  This means it will be exposed in mxml and you can listen for it in the main file.

                 

                Here's the main file

                 

                <?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/halo" minWidth="1024" minHeight="768" xmlns:local="*">

                <fx:Declarations>

                <!-- Place non-visual elements (e.g., services, value objects) here -->

                </fx:Declarations>

                 

                <fx:Script>

                <![CDATA[

                 

                protected function hotelcomp1_myClickHandler(event:Event):void

                {

                viewstack1.selectedIndex = 0;

                }

                 

                ]]>

                </fx:Script>

                 

                 

                <mx:ViewStack x="199" y="225" id="viewstack1" width="200" height="200" >

                <s:NavigatorContent label="View 1" width="100%" height="100%">

                </s:NavigatorContent>

                <s:NavigatorContent label="View 2" width="100%" height="100%">

                <local:HotelComp width="100%" height="100%" myButtonClick="hotelcomp1_myClickHandler(event)"/>

                </s:NavigatorContent>

                </mx:ViewStack>

                 

                <mx:ToggleButtonBar x="199" y="442" dataProvider="{viewstack1}">

                </mx:ToggleButtonBar>

                </s:Application>

                 

                You can see here now in the viewstack in the hotelComp mxml I listed for the myButtonClick exactly as I would any other event and this calls the hotel1Comp_myClickHandler which sets the selected index to 0.

                 

                Hope thats sorts it for you.

                 

                Andrew