If your component is static and will never change , children will never get
removed and no new children will be added you could try an absolute
positioning. I do not recommend spacer tho.
On the other hand you could try to make your own component , you say that you
are new to flex so I guess that may be "scary" and you would not know where to
start .
Help yourself to this, I'm not saying it's finished but I do think it's the
best approach :
package
{
import mx.containers.TabNavigator;
import mx.controls.TabBar;
import mx.controls.TextInput;
import mx.core.FlexVersion;
import mx.styles.StyleProxy;
public class ExtendedTabNavigator extends TabNavigator
{
public function ExtendedTabNavigator()
{
}
//we don t realy need this, tabBarHeight could be tabBar.height
but eh
private function get tabBarHeight():Number
{
var tabHeight:Number = getStyle("tabHeight");
if (isNaN(tabHeight))
tabHeight = tabBar.getExplicitOrMeasuredHeight();
return tabHeight - borderMetrics.top;
}
protected var textS:TextInput;
override protected function createChildren():void
{
//doesn't matter when we call super, we are not messing
with the actual tabbar
super.createChildren()
//creating out textInput
if(!textS)
{
textS = new TextInput
//you can make a style for this so that it's
not hard.coaded, easiest way. no need for "internals"
textS.width = 100;
//adding our textInput
rawChildren.addChild(textS);
}
}
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
//move the textInput so that it appears right of the
tabbar
var leftOffset:Number = getStyle("tabOffset");
//watch out for borderThickness
//in case your tabnav has a border soldi with a set
borderthickness
//we will also remove it from the "move" of tabbar and
texti -> coming next
var borderThick:Number = getStyle("borderThickness");
switch (getStyle("horizontalAlign"))
{
case "left":
//addede calcs for -borderthick
tabBar.move(0 + borderThick + leftOffset, tabBar.y);
textS.move(0 + borderThick + leftOffset + tabBar.width,
tabBar.y)
break;
case "right":
//because txeti is right of tabbar we have to also move the
tabbar ,
//we could move texti left of the tabbar
//and leave the tabbar alone, your choice
//also addede calculation for -borderthick
tabBar.move(unscaledWidth - tabBar.width - textS.width
-borderThick + leftOffset, tabBar.y);
textS.move(unscaledWidth - textS.width -borderThick +
leftOffset, tabBar.y)
break;
case "center":
//no need for borderthick
tabBar.move((unscaledWidth - tabBar.width -
textS.width) / 2 + leftOffset, tabBar.y);
textS.move((unscaledWidth + tabBar.width - textS.width ) /
2 + leftOffset, tabBar.y)
}
//set textI height
textS.height = tabBar.height//tabBarHeight;
}
}
}
Feel free to ask if there is something unclear
