1 Reply Latest reply on Oct 23, 2013 12:24 PM by Flex harUI

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

    kalsen

      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>