< MultiLineTab.mxml > <?xml version=”1.0″?>
<mx:Application xmlns=”*” creationComplete=”doInit()” xmlns:mx=” http://www.adobe.com/2006/mxml ” width=”450″ height=”350″ xmlns:eFlexComponents=”multiLineTab.*”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection;
private function doInit():void{
this.dp = new ArrayCollection();
this.dp.addItem({label:”Tab 1″});
this.dp.addItem({label:”Tab 2″});
this.dp.addItem({label:”Tab 3″});
this.dp.addItem({label:”Tab 4″});
this.dp.addItem({label:”Tab 5″});
this.dp.addItem({label:”Tab 6″});
this.dp.addItem({label:”Tab 7″});
this.dp.addItem({label:”Tab 8″});
this.dp.addItem({label:”Tab 9″});
this.dp.addItem({label:”Tab 10″});
this.dp.addItem({label:”Tab 11″});
this.dp.addItem({label:”Tab 12″});
this.dp.addItem({label:”Tab 13″});
this.dp.addItem({label:”Tab 14″});
this.dp.addItem({label:”Tab 15″});
this.dp.addItem({label:”Tab 16″});
this.initTabs();
}
private function initTabs():void{
multi.initTabs();
}
]]>
</mx:Script>
<mx:Panel width=”400″ height=”300″ title=”MultiRow Tabs”>
<eFlexComponents: MultiLineTabComponent id=”multi” rowHeight=”25″ myViewStack=”{mainView}” dp=”{this.dp}” tabsPerRow=”5″ />
<mx:ViewStack id=”mainView” width=”100%” height=”100%” paddingTop=”0″ paddingBottom=”0″>
<mx:Canvas label=”Tab 1″ width=”100%” height=”100%”>
<mx:Label text=”Tab 1″ />
</mx:Canvas>
<mx:Canvas label=”Tab 2″ width=”100%” height=”100%” >
<mx:Label text=”Tab 2″ />
</mx:Canvas>
<mx:Canvas label=”Tab 3″ width=”100%” height=”100%” >
<mx:Label text=”Tab 3″ />
</mx:Canvas>
<mx:Canvas label=”Tab 4″ width=”100%” height=”100%” >
<mx:Label text=”Tab 4″ />
</mx:Canvas>
<mx:Canvas label=”Tab 5″ width=”100%” height=”100%” >
<mx:Label text=”Tab 5″ />
</mx:Canvas>
<mx:Canvas label=”Tab 6″ width=”100%” height=”100%” >
<mx:Label text=”Tab 6″ />
</mx:Canvas>
<mx:Canvas label=”Tab 7″ width=”100%” height=”100%” >
<mx:Label text=”Tab 7″ />
</mx:Canvas>
<mx:Canvas label=”Tab 8″ width=”100%” height=”100%” >
<mx:Label text=”Tab 8″ />
</mx:Canvas>
<mx:Canvas label=”Tab 9″ width=”100%” height=”100%” >
<mx:Label text=”Tab 9″ />
</mx:Canvas>
<mx:Canvas label=”Tab 10″ width=”100%” height=”100%” >
<mx:Label text=”Tab 10″ />
</mx:Canvas>
<mx:Canvas label=”Tab 11″ width=”100%” height=”100%” >
<mx:Label text=”Tab 11″ />
</mx:Canvas>
<mx:Canvas label=”Tab 12″ width=”100%” height=”100%” >
<mx:Label text=”Tab 12″ />
</mx:Canvas>
<mx:Canvas label=”Tab 13″ width=”100%” height=”100%” >
<mx:Label text=”Tab 13″ />
</mx:Canvas>
<mx:Canvas label=”Tab 14″ width=”100%” height=”100%” >
<mx:Label text=”Tab 14″ />
</mx:Canvas>
<mx:Canvas label=”Tab 15″ width=”100%” height=”100%” >
<mx:Label text=”Tab 15″ />
</mx:Canvas>
<mx:Canvas label=”Tab 16″ width=”100%” height=”100%” >
<mx:Label text=”Tab 16″ />
</mx:Canvas>
</mx:ViewStack>
</mx:Panel>
</mx:Application> <MultiLineTabComponent .mxml> This mxml is in folder named with “multiLineTab”. <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=” http://www.adobe.com/2006/mxml ” width=”100%” paddingBottom=”0″ paddingLeft=”0″ paddingRight=”0″ paddingTop=”0″>
<mx:Style>
.tabHBox{
paddingTop:0;
paddingBottom:0;
horizontalGap:0;
verticalGap:0;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Button;
import mx.collections.ArrayCollection;
import mx.containers.HBox;
import mx.containers.ViewStack;
import mx.skins.halo.TabSkin;
public var dp:ArrayCollection;
public var myViewStack:ViewStack;
public var tabsPerRow:Number = 5;
public var rowHeight:Number = 25;
public var tabRows:Array = new Array();
private var buttonArray:ArrayCollection;
private function clickHandler(event:MouseEvent):void {
var splitArray:Array = event.target.data.split(””);
var myRowNumber:Number = Number(splitArray[0]);
var myButtonIndex:Number = Number(splitArray[1]);
myViewStack.selectedIndex=myButtonIndex;
for(var i:Number=0; i<buttonArray.length; i++){
buttonArray[i].selected = false;
}
event.target.selected=true;
var currentY:Number = 0;
for(var j:Number=0; j<tabRows.length; j++){
if(myRowNumber != j){
tabRows[j].y = currentY;
currentY = currentY + rowHeight;
}
}
tabRows[myRowNumber].y = currentY;
}
public function initTabs():void{
this.removeAllChildren();
buttonArray = new ArrayCollection();
var start:Number = 0;
var end:Number = tabsPerRow;
var currentY:Number = 0;
for(var i:Number=0; i<this.dp.length/tabsPerRow; i++){
tabRows[i] = new HBox();
tabRows[i].percentWidth=100;
tabRows[i].styleName=”tabHBox”;
tabRows[i].y = currentY;
currentY = currentY + rowHeight;
this.addChild(tabRows[i]);
for(var j:Number=start; j<end; j++){
var button:Button = new Button();
button.label = this.dp[j].label;
button.data = i + “” + j;
button.setStyle(”upSkin”,TabSkin);
button.setStyle(”downSkin”,TabSkin);
button.setStyle(”overSkin”,TabSkin);
button.setStyle(”selectedUpSkin”,TabSkin);
button.setStyle(”selectedOverSkin”,TabSkin);
button.setStyle(”selectedDownSkin”,TabSkin);
button.setStyle(”selectedDisabledSkin”,TabSkin);
button.percentWidth=100;
button.height = rowHeight;
button.addEventListener(MouseEvent.CLICK, clickHandler);
tabRows[i].addChild(button);
button.selected=false;
if(j==0){
button.selected=true;
}
buttonArray.addItem(button);
}
start = start + tabsPerRow;
end = end + tabsPerRow;
if(end > this.dp.length){
end = this.dp.length;
}
var myRowNumber:Number = 0;
var newCurrentY:Number = 0;
for(var k:Number=0; k<tabRows.length; k++){
if(myRowNumber != k){
tabRows[k].y = newCurrentY;
newCurrentY = newCurrentY + rowHeight;
}
}
tabRows[myRowNumber].y = newCurrentY;
}
}
]]>
</mx:Script>
</mx:Canvas>
| 
