6 Replies Latest reply on Jun 3, 2010 4:03 AM by Jayagopal Flex

    Tab Navigator Problem

    Jayagopal Flex

      Hi,

          I have a tab navigator in which i have loaded five canvas. I want the canvas to be loaded after clicking the confirm box.Please give me a code for this.

       

       

       

      Reagrds,

      Jayagopal P.S

        • 1. Re: Tab Navigator Problem
          BhaskerChari Level 4

          Hi,

           

          Can you post the code that you are working...?

           

           

          Thanks,

          Bhasker Chari

          • 2. Re: Tab Navigator Problem
            TanweerHq

            Hi,

            This is a simple solution. You need to chaneg the tabnavigator index. Thats it..Please find the example below :

             

            tb1.selectedIndex = index you required ; //tb1 is the id of your tab navigator

             

            Please mark as answer if this is correct

             

             

            • 3. Re: Tab Navigator Problem
              Jayagopal Flex Level 1

              <?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.CloseEvent;

               

              import mx.events.DataGridEvent;

               

              import mx.events.ListEvent;

               

              import mx.controls.Alert;

               

               

              public var flag:Boolean=false;

               

              public function test(evt:Event):void

              {

               

               

              if(flag==true)

              {

              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

              {

               

               

              if(obj.detail==Alert.OK)

              {

              flag=

              true;

              addEventListener(MouseEvent.CLICK,test);

              }

               

              else

              {

              flag=

               

              false;

              }

              }

              ]]>

              </mx:Script>

               

               

              <mx:TabNavigator width="103" change="test(event)" 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>

               

              Here i need to display the canvas only after getting the confirmation from alert.In default it shows the alert box after loding the canvas.

              • 4. Re: Tab Navigator Problem
                TanweerHq Level 2

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

                 

                 

                import

                 

                 

                import

                 

                 

                import

                 

                 

                public

                 

                 

                public

                 

                 

                function test(evt:Event):void

                 

                 

                {

                 

                 

                 

                 

                if

                 

                 

                else

                 

                 

                {

                Alert.show(

                "data", "title",

                Alert.OK | Alert.CANCEL,

                this,

                alertListener,

                null, Alert.OK);

                 

                }

                 

                }

                 

                 

                 

                 

                public

                 

                 

                function Confirmfile(obj:CloseEvent):void

                 

                 

                {

                 

                 

                 

                 

                if

                 

                 

                true

                 

                 

                else

                 

                 

                {

                 

                flag=

                 

                 

                 

                false

                 

                 

                private

                 

                 

                function alertListener(e:CloseEvent):void

                {

                 

                if(e.detail = Alert.OK)

                {

                 

                //canvas visibility will be set here

                }

                }

                 

                ]]>

                 

                 

                 

                </mx:Script>

                 

                 

                 

                 

                 

                 

                <mx:TabNavigator

                 

                width="103" change="test(event)" 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>

                ;

                 

                }

                 

                }

                 

                ;

                 

                addEventListener(MouseEvent.CLICK,test);

                 

                }

                 

                 

                 

                (obj.detail==Alert.OK)

                 

                {

                 

                flag=

                 

                 

                (flag==true)

                 

                {

                 

                evt.preventDefault();

                 

                }

                 

                 

                 

                var flag:Boolean=false;

                 

                 

                 

                mx.controls.Alert;

                 

                 

                 

                 

                mx.events.ListEvent;

                 

                 

                 

                mx.events.DataGridEvent;

                 

                 

                 

                 

                 

                mx.events.CloseEvent;

                 

                mark as answer if it helps you

                 

                 

                 

                • 5. Re: Tab Navigator Problem
                  BhaskerChari Level 4

                  Hi JayaGopal,

                   

                  Please find the working code below...Had to do a bit of work

                   

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

                   

                  <?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);
                                     
                            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;   
                      prevTabIndex = clickedTabIndex;
                     }
                     else
                     {
                      //
                     }
                    }
                  ]]>
                  </mx:Script>
                  <mx:TabNavigator width="103" change="test(event)" 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

                  • 6. Re: Tab Navigator Problem
                    Jayagopal Flex Level 1

                    Thanks very much it helped me a lot

                     

                     

                    Thanks & Reagrds,

                    Jayagopal.