PREV - NEXT navigation in ViewStack & Tab Navigation container

Hi,
I am using a ViewStack container inside a Tab container. There are 2 tabs.
In the first tab, I have 3 containers for ViewStack and in the
Second tab, I have 2 containers.
I am having a single PREV - NEXT (navigation) buttons for the navigation.On clicking the next (navigation) button, it should select the second viewstack container in the first tab [initially the first view stack container in first tab is selected]
On clicking next again, it should select the next viewstack container & so on...
Upon further clicking the next button, it should select the first Viewstack container of the second tab & so on...
When I place the navigation buttons for the ViewStack container, we can get the ViewStack ID & the selectedIndex, so PREV - NEXT navigation functionality can be done.
But my requirement is:
On traversing through the NEXT button and on reaching the last screen of the ViewStack container, it is required to go to the next tab's first ViewStack container. It is basically a PREV - NEXT navigation through all tabs and on each ViewStack in a tab container with a single set of PREV - NEXT navigation buttons
- Sen

hi,
I have put together a sample of navigating through multiple viewstacks, the only real need for this to work is that each viewstack is named after its parent navigators index i.e tabnavigator 0 has a viewstack with id of 'VS0' tbanavigator 1 has a viewstack with id of 'VS1' etc...
http://gumbo.flashhub.net/stacker/  source code included
David.

Similar Messages

  • Inserting tabbed navigation code makes my web page not display in design view..

    Hi everyone..
    I am on Dreamweaver 8 for MAC, and was working on a couple of web pages..these pages included divs and tables. But when I tried inserting a tabbed navigation I found at:
    http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
    In a nutshell, it asked me for step 1 to:
    Step 1: Insert the        below CSS and script into the HEAD section of your page:
    <link rel="stylesheet" type="text/css" href="tabcontent.css" />
    <script type="text/javascript" src="tabcontent.js">
    * Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    </script>
    The next step was this:
    Step 2: Finally, simply add the below      HTML to where you wish the Tab Content to appear on the page:
    <h3>Demo #1- Basic implementation</h3>
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    </ul>
    <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
    <div id="country1" class="tabcontent">
    Tab content 1 here<br />Tab content 1 here<br />
    </div>
    <div id="country2" class="tabcontent">
    Tab content 2 here<br />Tab content 2 here<br />
    </div>
    <div id="country3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    </div>
    <div id="country4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>
    </div>
    <script type="text/javascript">
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    </script>
    <p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>
    <hr />
    Well, I did all the steps required, but when I put this inside a div I had inside a table, all of a sudden I couldnt see anything in my design view, only two tables that arent even the same size..When I take out all this code, I get back my regular page..Can I see this tabbed navigation in my design view? Unfortunately, I dont have the spry widgets since I am on Dreamweaver 8..If I preview it in both Safari and Firefox (on Mac Firefox/3.0.8) (Safari 3.2.1) I can see everything fine, including the tabbed navigation..But designing in code isnt really helpful because I want to see what it looks like in design view, in case we change things-its just easier for me to work on..So I assume there is something in this code that is making my design view show nothing..
    Update:I tried taking out the code again, but this time, I couldnt see anything again, even without this code..
    I know that I can go to validation website, and I got a lot of errors-but all the pages I have that are in the same style have those same errors too—and they display fine..its only when I insert this specific piece of code that everything goes haywire..Is it even possible to view tabbed navigations (like the one in the above link) inside of Dreamweaver Design View?
    Any help would be appreciated..

    DW8 doesn't render any dynamic content, so I'd say it's a no go. You'll just have to live with that limitation or upgrade to CS4...
    Mylenium

  • Help in Tab Navigator

    Hi. I have a doubt in Tab Navigator. How can i include a menu
    bar between the tabs and the container of the tab navigator?
    Thank you

    You're going to have to use a TabBar component with a
    separate View Stack component. That way you can layout the two
    components however you'd like. I did this because I needed to place
    a row of Buttons next to the Tab Bar.

  • Interesting Result ....... Jump Over Tab Navigation Area.

    I received the following as my rendered page:
    Jump Over Tab Navigation Area.
    HomeHelp
    I was navigating from a page with a single button to a page with a TabSet containing 2 tabs. These 2 Tabs were labeled Home and Help.
    This is occurring on a Tomcat server 5.5.23.
    Any help would be greatly appreciated.

    A bit zen - and not much help, especially for someone, such as I, with a Masters in Drawing (Fine arts) and no formal programming skills whatsoever.  Producing a complex rendering of the human form = easy.
    I think what the problem that I'm having is how to get the image array (which could have an infinate amout of images) and the tab array (which could have anywhere from 1-6 tabs depending on the job) to associate, then pass on said variables to dynamically loaded image (holder) MC.
    To say that Tab 1 would cover images 1-4 all the time could possibly be easy to figure out.  On the other hand, the need is more like:
    Tab 1 is [i] through [n], then passing on the variable result so that first page value is set so the next button could also then compare the that page vs the next image in the linear sequence (ditto for the back button) then passing that on to the page count (dynamic text box) and loading in that page / image.
    back to the drawing board.

  • PDF Portfolio Navigator with horizontal tab layout

    Hello, Experts
             I am trying to create a PDF Portfolios with horizontal tab layout structure;
             several .NET libraries allowed me to create PDF files with thumbnail layout, but, in order to populate a horizontal tab
             layout, it seems, I would need to create a custom PDF navigator and import it into PDF Portfolio prior to inserting PDF file components ?
            preinstalled navigators look great, but I just need a simple horizontal tab view, where each tab only contains file's name and nothing else;
             buy clicking on each tab - corresponding file would be activated in the viewer
           is there any library of predesigned navigators that I can use ?
            is there any way to extract navigator from one and import it into another PDF portfolio ?
           would I need to use Flash or can this be done via .NET ?
    Best Regards,
    -Alex

    tried to install Portfolio SDK
    can't see the Navigator project wizard in Flex Builder  (  4.6 )
    The plugins have been extracted to:
    C:\Program Files\Adobe\Adobe Flash Builder 4.6\eclipse\plugins
    The NavigatorSupport folder has been extracted to:
    C:\Program Files\Adobe\Adobe Flash Builder 4.6\eclipse and ( just in case ) to
    C:\Program Files\Adobe\Adobe Flash Builder 4.6\

  • Adding a same component in each tab of super tab navigator creates problem

    When a UI component is created once and added to each tab using super tab navigator in AS 3.0, the component is adding only to the last index of the tab. The component is missing in the previous tab.
    I have given the code below. Please help me why this is happening and the solution for this.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application
            xmlns:mx="http://www.adobe.com/2006/mxml"
            creationComplete="createSuperTabNav()">
            <mx:Script>
                    <![CDATA[
                        import mx.core.UIComponent;
                            import com.tab.navigator.components.SuperTabBar;
                            import com.tab.navigator.components.SuperTabReorderEvent;
                            import com.tab.navigator.components.SuperTab;
                            import com.tab.navigator.components.SuperTabNavigator;
                            import com.tab.navigator.components.ButtonScrollingCanvas;
                            import mx.controls.Label;
                            import mx.controls.Button;
                            import mx.controls.Spacer;
                            import mx.containers.VBox;
                            import mx.containers.HBox;
                            import mx.containers.Canvas;                       
                            import mx.containers.Panel;
                            import mx.core.ScrollPolicy;
                            import mx.core.UIComponent;
                            import flash.events.MouseEvent;
                            public var _tabs : SuperTabNavigator;
                            public var _addBtn : Button;
                            public var _vbox:VBox;
                            public var pageCount:uint;
                            public var tabID:String;
                            private var _comp:UIComponent;
                            public function createSuperTabNav():void
                                _vbox = new VBox();
                                _vbox.percentWidth = 75;
                                _vbox.percentHeight = 75;   
                                _vbox.setStyle("horizontalAlign","center");   
                                _vbox.setStyle("verticalGap", 20);               
                                createTabs();
                                createAddButton();
                                addChild(_vbox);
                            public function createTabs():void
                                _tabs = new SuperTabNavigator();
                                //initTabs();
                                addObjectTab();
                                // Set Properties               
                                _tabs.id = "nav";
                                _tabs.percentHeight = 75;
                                _tabs.percentWidth = 50;
                                _vbox.addChild(_tabs);
                            public function addTab(lbl:String, navigator:SuperTabNavigator, component:UIComponent, getId:String) : Canvas
                                // Create canvas to put into tab
                                var child:Canvas = new Canvas();
                                child.percentHeight = 100;
                                child.percentWidth = 100;
                                child.id = getId;
                                child.label = lbl;
                                child.setStyle("closable", true); 
                                child.addChild(component);  
                                child.setStyle("backgroundColor",0xF8F8F8);
                                navigator.addChild(child);
                                 //trace(_tabs.selectedChild.getChildren().toString());
                                _tabs.reorderTabList();
                                return child;
                            public function createAddButton():void
                                _addBtn = new Button()
                                _addBtn.label = "Add Tab";
                                _addBtn.id = "addTabBtn";
                                _addBtn.width = 75;
                                _addBtn.height = 20;
                                _addBtn.addEventListener(MouseEvent.CLICK, handleButtonClick,false,0, true);
                                _vbox.addChild(_addBtn);
                            public function handleButtonClick(evt:MouseEvent):void
                                //addTab('tab '+Number(_tabs.numChildren + 1), _tabs);
                                addObjectTab();
                                _tabs.selectedIndex = _tabs.numChildren - 1;
                            public function addObjectTab():void
                                var frameCanvas:Canvas = new Canvas();           
                                frameCanvas.horizontalScrollPolicy = ScrollPolicy.OFF;
                                frameCanvas.verticalScrollPolicy = ScrollPolicy.OFF;
                                frameCanvas.percentHeight = 100;
                                frameCanvas.percentWidth = 100;
                                if ( _comp == null )
                                    _comp = addComponent();   
                                frameCanvas.addChild(_comp);
                                // Create container to implement horizontal padding
                                var horizontalPadder:HBox = new HBox();           
                                horizontalPadder.setStyle("backgroundAlpha", 0);
                                horizontalPadder.horizontalScrollPolicy = ScrollPolicy.OFF;
                                horizontalPadder.verticalScrollPolicy = ScrollPolicy.OFF
                                horizontalPadder.addChild(new Spacer());
                                horizontalPadder.addChild(frameCanvas);
                                horizontalPadder.addChild(new Spacer());
                                // Create container to implement vertical padding
                                var verticalPadder:VBox = new VBox();           
                                verticalPadder.setStyle("backgroundAlpha", 0);
                                verticalPadder.horizontalScrollPolicy = ScrollPolicy.OFF;
                                verticalPadder.verticalScrollPolicy = ScrollPolicy.OFF
                                verticalPadder.addChild(new Spacer());
                                verticalPadder.addChild(horizontalPadder);
                                verticalPadder.addChild(new Spacer());
                                // Position padder
                                verticalPadder.setStyle("horizontalAlign", "Left");
                                verticalPadder.x = 0
                                verticalPadder.y = 0;
                                tabID = "page"+ _tabs.getNumberOfTabs()+1;
                                var canvas:Canvas = addTab("Page "+(_tabs.getNumberOfTabs()+1), _tabs ,verticalPadder, tabID);
                                canvas.setStyle("backgroundColor", "#009900");
                            public function addComponent():UIComponent
                                var pageCount:uint = _tabs.getNumberOfTabs()+1;
                                var page:Canvas = new Canvas;
                                 page.width = 250;
                                 page.height = 250;
                                 page.setStyle("backgroundColor", "#FFFFFF");
                                var _pageBtn:Button = new Button();
                                _pageBtn.label = "Button "+(pageCount);
                                _pageBtn.id = "addTabBtn "+(pageCount);
                                _pageBtn.width =100;
                                _pageBtn.height = 20;
                                page.addChild(_pageBtn);
                                return page;
                    ]]>
            </mx:Script>
    </mx:Application>

    Adding an instance moves it, it does not copy it.

  • Tab navigator and swf loader issue

    I have written two flex applications. Each of the
    applications contains a tab navigator control. The direct children
    of this tab navigator are canvases, sized to max.
    i.e.
    <mx:Canvas label="WhateverLabel" width="100%"
    height="100%">
    <!--whatever additional children here-->
    </mx:Canvas>
    Everything works fine, the navigator, all its children and
    grandchildren Application does exaclty as it should ... untill I
    load it into another application using swf loader.
    Our main application is a menu driven app that loads
    individual swf files based on user selection. When either one of
    these programs (using the tab navigator described above) is loaded,
    I get a White Bar across the top of the screen, sized as the Tab
    navigator width.
    the white bar goes away as soon as the user interacts with
    any control, but it still is there on application load. Here is a
    picture of what I am speaking about.
    http://members.cox.net/dragon.magik/whitebar.jpg
    You can see the menu atop the screen as the base application.
    You can then see the panel right beneath it, that is the main panel
    of the application i am having problems with. The white bar, as you
    see, is as wide as my tab navigator. The TN labels are positioned
    correctly, but I don't know why I am getting the white bar. I am
    having the exact same problem with tab navigators in two different
    applications I load into this one control panel. Any help would be
    greatly appreciated. Thanks in advance.

    There is an unsolved bug in adobe.
    You have to solve it manually overriding the function:
    package
         import mx.containers.TabNavigator;
         public class TabNavigatorFixed extends TabNavigator
             public function TabNavigatorFixed()
                 super();
             override protected function  commitSelectedIndex(newIndex:int):void
                 super.commitSelectedIndex(newIndex);
                 if(tabBar.numChildren > 0){
                     // Select the corresponding Tab in the Tab Bar (this  fixes a bug in Flex)
                     tabBar.selectedIndex = newIndex;

  • Tab navigator style

    Hi experts,
    i want to user background images in tab navigator ..assume that i have two tabs tab1 ans tab 2 now what i want is the following
       1.       that both the tabs to have a background image // i was unable to find a property for the same
       2.      i have taken two vbox in the tab navigator after giving the border two the v box i saw a space between the tabs and the vbox..please find the attach image it will clear the my query more..
    following is the code:-
       <mx:TabNavigator borderThickness="4" borderColor="#6997AF"
                                     borderStyle="solid" verticalGap="0"  tabHeight="38"
                                      tabStyleName="Selected" cornerRadius="6" tabOffset="40" tabWidth="115"
                                       horizontalGap="17" id="TbNgtr"  width="328" height="461" color="0x323232">
                                           <mx:VBox verticalGap="0" borderColor="red" borderStyle="solid" label="Load Photo">
                                            <mx:Label text="TabNavigator container panel 1"/>
                                           </mx:VBox>
                                        <mx:VBox verticalGap="0" borderColor="green" borderStyle="solid" label="Design Studio">
                                            <mx:Label text="TabNavigator container panel 2"/>
                                        </mx:VBox>
                                </mx:TabNavigator>

    Hi,
    1. To set background image :- backgroundImage style is available for TabNavigator.
    2. To remove the gap : Set horizontalGap style of the TabNavigator to 0.
    3. To style selected tab: Use the selectedTabTextStyleName style property. Check the following link for an example
    http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/

  • Aligning tabs in Tab navigator

    I'm aware that you can align the tabs either left, center or
    right - but what if I have an application which requires some of
    the tabs to be left justified with others being right justified
    within the same component. I tried using CSS with the float left
    and right properties which did not appear to work with Flex.
    Perhaps this is not possible or I'm just doing something wrong
    being new to Flex.
    Thanks.

    Hi,
    This IS possible but hard in the incarnation of the halo tab navigator.
    Check out:
    http://blog.teotigraphix.com/2010/03/08/spark-navigators-viewstack-tabnavigator-accordion
    Within a week I will be releasing that framework opensource (alpha) and it will allow you to easily do this since in Spark, your just creating custom layouts.
    In Halo, the TabBar is like concrete, there is not a lot you can change about it's characteristics without rewritting the whole thing.
    The reason you are getting the ... is that a TabBar is an HBox in disguise. I does have a modified alyout algorithm but is lays out children using the HBox algorithm.
    Mike

  • Tabbed Navigation List Session State

    I converted regular tabs to a tabbed navigation list because the user wanted the tabs on the left side, on a region, not on the top of a page. Now when I navigate between pages using the tabbed navigation list the session state is not saved. For example: the user changes something in a field on page 1 without submitting the change, navigates to page 2, then back to page 1; the change they made on page 1 is gone. How can I prevent this from happening?
    I've checked all of the branches and navigation list targets to make sure I'm not clearing the session state.
    Thanks, Elizabeth

    First, I added Personal_Page under Action/Request.No, that sets the request value in the branch URL.
    so I added Personal_Page in Expression1 under Conditions and set the Condition Type to Request=Expression1That will work. Maybe you have a branch that fires before it so it never evaluated this branch. Anyway, my suggestion was to use an application process, not branches. The firing point of the process should be after-submit, before computations and validations. The process would contain a block like:
    declare l_page varchar2(30);
    begin
      case
        when :request = 'Personal_Page' then
          l_page := '3';
        when :request = 'some other value' then
          l_page := '4';
        -- etc.
      end case;
      apex_application.g_unrecoverable_error := true;
      owa_util.redirect_url('f?p=' || :APP_ID || ':' || l_page || ':' || :APP_SESSION);
    end;Scott

  • Multi-Layered Tabs in Tab Navigator

    I was trying to create a Tab Navigator, where there are about 16 Tabs. Placing all these viewstacks into a Tab, and setting the width of the TabNavigator to a Fixed Width, would unfortunately add "..." to my labels. lining all my tab buttons horizontally.
    Is there a way to put tabs in more than one layer? like having so...
    | view 1 || view 2 || view 3 || view 4 ||   |
    |      view 5 ||  view 6 || view 7            |
    |                                                      |
    |                                                      |

    Hi,
    This IS possible but hard in the incarnation of the halo tab navigator.
    Check out:
    http://blog.teotigraphix.com/2010/03/08/spark-navigators-viewstack-tabnavigator-accordion
    Within a week I will be releasing that framework opensource (alpha) and it will allow you to easily do this since in Spark, your just creating custom layouts.
    In Halo, the TabBar is like concrete, there is not a lot you can change about it's characteristics without rewritting the whole thing.
    The reason you are getting the ... is that a TabBar is an HBox in disguise. I does have a modified alyout algorithm but is lays out children using the HBox algorithm.
    Mike

  • Ellipsis ... show in tab of Tab navigator

    Hi guys,
    I'm using a TabNavigator component with static height, width and 3  static tabs. My problem is that the Tab navigator shows ellipsis in the  label of the first tab whereas it clearly looks that it does not lack  any space in tab width. how do i rectify it?
    <?xml version="1.0" encoding="utf-8"?>
    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" xmlns:local="*">
         <local:WLTabNavigator id="tn" x="83" y="60" width="210"  height="200" paddingBottom="0"
                          horizontalGap="1" tabHeight="18"  tabWidth="{tn.width/3}">
             <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
             </mx:Canvas>
             <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
             </mx:Canvas>
             <mx:Canvas label="Calls" fontFamily="Arial" fontSize="10">
             </mx:Canvas>
         </local:WLTabNavigator>
    </mx:WindowedApplication>

    I think this is working as designed. Your TabNavigator is 210px wide and with three tabs you're setting each tab to roughly 70px wide (give or take a pixel for gaps). If you don't set ANY tabWidth you can see that the first tab ("Contacts") wants to be about 78px, but you're only allowing 69-70px for the label, hence the truncation.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="horizontal">
        <mx:TabNavigator id="tn1" width="210"  height="100"
                         horizontalGap="1" tabHeight="18" tabWidth="69">
            <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
                <mx:Label id="lbl1" creationComplete="lbl1.text = tn1.getTabAt(0).width.toString();" />
            </mx:Canvas>
            <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
            </mx:Canvas>
            <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
            </mx:Canvas>
        </mx:TabNavigator>
        <mx:TabNavigator id="tn2" width="210"  height="100"
                         horizontalGap="1" tabHeight="18">
            <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
                <mx:Label id="lbl2" creationComplete="lbl2.text = tn2.getTabAt(0).width.toString();" />
            </mx:Canvas>
            <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
            </mx:Canvas>
            <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
            </mx:Canvas>
        </mx:TabNavigator>
    </mx:Application>
    I think a better approach is probably to set the TabNavigator container's internal TabBar to the same width of the TabNavigator and let the tabs resize themselves to fit. This may help get you started:
    <mx:TabNavigator id="tn3" width="210"  height="100"
                     horizontalGap="1" tabHeight="18"
                     resize="event.currentTarget.mx_internal::getTabBar().width = event.currentTarget.width;">
        <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
            <mx:Label id="lbl3" creationComplete="lbl3.text = tn3.getTabAt(0).width.toString();" />
        </mx:Canvas>
        <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
        </mx:Canvas>
        <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
        </mx:Canvas>
    </mx:TabNavigator>
    Or, since it looks like you are already subclassing TabNavigator, you could possibly move the logic into your subclass instead:
    package {
        import mx.containers.TabNavigator;
        import mx.events.ResizeEvent;
        public class ResizerTabNavigator extends TabNavigator {
            public function ResizerTabNavigator() {
                super();
                addEventListener(ResizeEvent.RESIZE, resizeEventListener);
            protected function resizeEventListener(evt:ResizeEvent):void {
                tabBar.width = this.width;
    Hope that helps,
    Peter

  • How can i find the label of all the tabs of a tab navigator??

    I have a tab navigator which has three fixed tabs and dynamically i am creating few tabs. Before creating a tab i wanted to know which all tabs are currently open, basically the name of all the tabs which are open.
    Please let me know how can i achieve this.
    Thanks

    extended from the TabNavigator example in the API docs
    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           minWidth="955" minHeight="600"
                           creationComplete="init()">
        <fx:Script>
            <![CDATA[
                private function init():void
                    for (var i:int = 0; i < tn.numElements; i++)
                        var btn:Button = tn.getTabAt(i);
                        trace(btn.label);
            ]]>
        </fx:Script>
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:Panel title="TabNavigator Container Example"
                 width="75%" height="75%"
                 horizontalCenter="0" verticalCenter="0">
            <s:VGroup left="10" right="10" top="10" bottom="10">
                <s:Label width="100%" color="blue"
                         text="Select the tabs to change the panel."/>
                <mx:TabNavigator id="tn"  width="100%" height="100%">
                    <!-- Define each panel using a VBox container. -->
                    <mx:VBox label="Panel 1">
                        <mx:Label text="TabNavigator container panel 1"/>
                    </mx:VBox>
                    <mx:VBox label="Panel 2">
                        <mx:Label text="TabNavigator container panel 2"/>
                    </mx:VBox>
                    <mx:VBox label="Panel 3">
                        <mx:Label text="TabNavigator container panel 3"/>
                    </mx:VBox>
                </mx:TabNavigator>
                <s:Label width="100%" color="blue"
                         text="Programmatically select the panel using a Button control."/>
                <s:HGroup>
                    <mx:Button label="Select Tab 1" click="tn.selectedIndex=0"/>
                    <mx:Button label="Select Tab 2" click="tn.selectedIndex=1"/>
                    <mx:Button label="Select Tab 3" click="tn.selectedIndex=2"/>
                </s:HGroup>
            </s:VGroup>
        </s:Panel>
    </s:WindowedApplication>

  • Remove inactive tabs border in Tab navigator

    Hi
    How can i remove the border of inactive tabs in in tab navigator
    Plz help

    Hi,
    This IS possible but hard in the incarnation of the halo tab navigator.
    Check out:
    http://blog.teotigraphix.com/2010/03/08/spark-navigators-viewstack-tabnavigator-accordion
    Within a week I will be releasing that framework opensource (alpha) and it will allow you to easily do this since in Spark, your just creating custom layouts.
    In Halo, the TabBar is like concrete, there is not a lot you can change about it's characteristics without rewritting the whole thing.
    The reason you are getting the ... is that a TabBar is an HBox in disguise. I does have a modified alyout algorithm but is lays out children using the HBox algorithm.
    Mike

  • SWFLoader and tab navigation

    Hi,
    In two applications that I'm writing, the content inside a SWFLoader does not participate in the tab navigation. The textfields in the loaded SWF are focusable and I can even detect Tab keystrokes in them, but there is no tab navigation.
    The setup is very simple - an application (in one case mx, another case spark) which contains a SWFLoader.
    I've seen one thread in a dev forum where the solution was to implement a focusmanager. I'm hoping for something simpler...
    Cheers

    All tabbable entities in a Flex app must implement IFocusManagerComponent or
    else they have to override the FocusManager.  If the sub-app is not written
    in Flex you'll probably have to do the latter.

Maybe you are looking for