2 Replies Latest reply on Aug 6, 2010 6:00 AM by UbuntuPenguin

    Prevent TabNavigator click and access old and new index

    usuresh

      Hi,

      I am facing a problem with TabNavigator click event.I have 3 tabs with in TabNavigator.When I am trying to come from 2 nd tab to 1 or 3 tabs,I have to ask the user to navigate to respective tabs or not.If he clicks on "Yes", Then I have to navigate to that tab,Otherwise i should stay back in 2 tab.This popup should not be shown,When user navigate from 1st tab to 3rd,2 tabs or 3rd  to  1,2 tabs.I tried with change event,But after changeing to new tab then only  popup is coming with this event.I tried with click event.It is working fine but I could not able to find out the oldIndex from click event to know from which tab to which tab we r navigating to.Can anybody help me out to solve this problem.I am pasting the code snippet below.

       

       

      <?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.events.IndexChangedEvent;
        import mx.controls.TabBar;
        import mx.events.CloseEvent;
        import mx.events.DataGridEvent;
        import mx.events.ListEvent;
        import mx.controls.Alert;

       

       

       

        public var flag:Boolean=false;
        private var clickedTabIndex:int = -1;
        private var prevTabIndex:int = 0;

        public function init():void
        {
         tabone.addEventListener(MouseEvent.CLICK, onTabClick, true);
        }
        private function onTabClick(event:MouseEvent):void
        {
            if (event.target.parent is TabBar)
            {
                clickedTabIndex = TabBar(event.target.parent).getChildIndex(event.target as DisplayObject);
                if (tabone.selectedIndex == 1 && (clickedTabIndex == 0 || clickedTabIndex == 2)) {
                     event.stopImmediatePropagation();
                    event.preventDefault();
                    Alert.show("Do you want to navigate away from this page","Testing",Alert.YES|Alert.NO,this,Confirmfile,null,Alert.OK);

       

                }
            }
        }

       

        public function test(evt:Event):void
        {
           
         if(flag==true)
         {
          evt.stopImmediatePropagation();
          evt.preventDefault();
          Alert.show("Do you want to navigate away from this page","Testing",Alert.YES|Alert.NO,this,Confirmfile,null,Alert.OK);
         }
         if (tabone.selectedIndex == 1) {
                flag = true;
            } else {
                flag = false;
            }
        }
        public function Confirmfile(obj:CloseEvent):void
        {
         var OKIndex:int = Alert.YES;
         var NOIndex:int = Alert.NO;
         if(obj.detail == Alert.YES)
         {
         //    if (clickedTabIndex == 0) {
                 /* tabone.getTabAt(1).selected = false;
                 tabone.getTabAt(2).selected = false;
                 tabone.getTabAt(0).selected = true; */
                 prevTabIndex = clickedTabIndex;
                 tabone.getTabAt(clickedTabIndex).selected=true;
                 tabone.getTabAt(tabone.selectedIndex).selected=false;
                  prevTabIndex = clickedTabIndex;
         //    } else {
             //    tabonegetTabAt(0).selected = false;
                 //tabone.getTabAt(1).selected = false;
                 //tabone.getTabAt(2).selected = true;
             //}
             //prevTabIndex = clickedTabIndex;
         /*  tabone.getTabAt(prevTabIndex).selected = false;
          tabone.getTabAt(clickedTabIndex).selected = true;  
          prevTabIndex = clickedTabIndex; */
         }
         else
         {
          //
         }
        }
      ]]>
      </mx:Script>
      <mx:TabNavigator width="103" change="test(event)" id="tabone">
        <mx:Canvas label="First Canvas" width="100%" height="100%" tabIndexChange="{Alert.show('This is Test')}">
         <mx:Label text="First Canvas"/>
        </mx:Canvas>
        <mx:Canvas label="Second Canvas" width="100%" height="100%">
         <mx:Label text="Second Canvas"/>
        </mx:Canvas>
        <mx:Canvas label="Third Canvas" width="100%" height="100%">
         <mx:Label text="Third Canvas"/>
        </mx:Canvas>
      </mx:TabNavigator>
      </mx:Application>

        • 1. Re: Prevent TabNavigator click and access old and new index
          BhaskerChari Level 4

          Hi usuresh,

           

          This is the same code I think I have posted earliar in this forum.

           

          Here is the code I hope you needed...

           

          Observe the conditions I have written in onTabClick() function according to the conditions u posted...

           

          <?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.events.IndexChangedEvent;
            import mx.controls.TabBar;
            import mx.events.CloseEvent;
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;
            import mx.controls.Alert;

            public var flag:Boolean=false;
            private var clickedTabIndex:int = -1;
            private var prevTabIndex:int = 0;
           
            public function init():void
            {
             tabone.addEventListener(MouseEvent.CLICK, onTabClick, true);
            }
            private function onTabClick(event:MouseEvent):void
            {
                if (event.target.parent is TabBar)
                {
                    clickedTabIndex = TabBar(event.target.parent).getChildIndex(event.target as DisplayObject);
                    if(!((prevTabIndex == 0 && clickedTabIndex == 1) || (prevTabIndex == 0 && clickedTabIndex == 2) || (prevTabIndex == 2 && clickedTabIndex == 0) || (prevTabIndex == 2 && clickedTabIndex == 1)))
                    {
                     event.stopImmediatePropagation();
                     event.preventDefault();
                     Alert.show("Do you want to navigate away from this page","Testing",Alert.YES|Alert.NO,this,Confirmfile,null,Alert.OK);
                    }
                }
            }

            /* public function test(evt:Event):void
            {
             flag = true;
             if(flag==true)
             {
              evt.stopImmediatePropagation();
              evt.preventDefault();
             }
             else
             {
              Alert.show("Do you want to navigate away from this page","Testing",Alert.YES|Alert.NO,this,Confirmfile,null,Alert.OK);
             }
            } */
            public function Confirmfile(obj:CloseEvent):void
            {
             var OKIndex:int = Alert.YES;
             var NOIndex:int = Alert.NO;
             if(obj.detail == Alert.YES)
             {
              tabone.getTabAt(prevTabIndex).selected = false;
              tabone.getTabAt(clickedTabIndex).selected = true;
              tabone.selectedIndex = clickedTabIndex;   
              prevTabIndex = clickedTabIndex;
             }
             else
             {
              //
             }
            }
          ]]>
          </mx:Script>
          <mx:TabNavigator width="103" id="tabone">
            <mx:Canvas label="First Canvas" width="100%" height="100%">
             <mx:Label text="First Canvas"/>
            </mx:Canvas>
            <mx:Canvas label="Second Canvas" width="100%" height="100%">
             <mx:Label text="Second Canvas"/>
            </mx:Canvas>
            <mx:Canvas label="Third Canvas" width="100%" height="100%">
             <mx:Label text="Third Canvas"/>
            </mx:Canvas>
          </mx:TabNavigator>
          </mx:Application>


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

           

          Thanks,

          Bhasker Chari.S

          • 2. Re: Prevent TabNavigator click and access old and new index
            UbuntuPenguin Level 4

            I would suggest using a presenter or controller to keep track of the index of the stack.  The presenter would have a method like this

             

            private var _proceedToOtherIndex:int;

            private var _stackIndex:int;

            public function set stackIndex( value:int ):void

            {

              if( _stackIndex == 2 && value ==1 && proceed == false )

              {

                 Alert.show("Do you want to ....");

                 // On the "ok" click of the Alert box , we have a handler where _proceed is set to "true" and stackIndex is set to wherever they were

                 // trying to go.

              }

            }

            ...

             

            public function get stackIndex( ):int

            {

              return _stackIndex;

            }