• Multiline TabNavigator #2

    Posted on April 20, 2009 by in ActionScript, Blog, Flex, Flex Note

    MultiLineTab.as
    package controls
    {
    import flash.display.DisplayObject;
    import flash.text.TextLineMetrics;
    import mx.controls.tabBarClasses.Tab;
    import mx.core.IFlexDisplayObject;
    import mx.core.UITextField;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class MultiLineTab extends Tab
    {
    public function MultiLineTab()
    {
    super();
    }
    override protected function createChildren():void
    {
    if (!textField)
    {
    textField = new UITextField();
    textField.styleName = this;
    addChild(DisplayObject(textField));
    }
    super.createChildren();
    textField.multiline = true;
    textField.wordWrap = true;
    }
    override protected function measure():void
    {
    if (!isNaN(explicitWidth))
    {
    var tempIcon:IFlexDisplayObject = getCurrentIcon();
    var w:Number = explicitWidth;
    if (tempIcon)
    w -= tempIcon.width + getStyle("horizontalGap") + getStyle("paddingLeft") + getStyle("paddingRight");
    textField.width = w;
    }
    super.measure();
    }
    override public function measureText(s:String):TextLineMetrics
    {
    textField.text = s;
    var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
    lineMetrics.width = textField.textWidth + 4;
    lineMetrics.height = textField.textHeight + 4;
    return lineMetrics;
    }
    override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
    {
    super.updateDisplayList(unscaledWidth,unscaledHeight);
    if (this.getCurrentIcon())
    {
    this.getCurrentIcon().y = 2;
    }
    }
    }
    }

    MultiLineTabBar.as
    package controls
    {
    import mx.controls.TabBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class MultiLineTabBar extends TabBar
    {
    public function MultiLineTabBar()
    {
    super ();
    navItemFactory = new ClassFactory (MultiLineTab);
    }
    }
    }

    MultiLineTabNavigator.as
    package controls
    {
    import flash.display.DisplayObject;
    import mx.containers.TabNavigator;
    public class MultiLineTabNavigator extends TabNavigator
    {
    public function MultiLineTabNavigator()
    {
    super();
    }
    override protected function createChildren():void
    {
    if (!tabBar)
    {
    tabBar = new MultiLineTabBar();
    tabBar.name = "tabBar";
    tabBar.focusEnabled = false;
    tabBar.styleName = this;
    tabBar.setStyle("borderStyle", "none");
    tabBar.setStyle("paddingTop", 0);
    tabBar.setStyle("paddingBottom", 0);
    rawChildren.addChild(tabBar);
    }
    super.createChildren();
    }
    override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
    {
    super.updateDisplayList(unscaledWidth,unscaledHeight);
    }
    }
    }

6 Responses so far.

  1. Michax says:

    Thanks a lot man ! I just hate some things about flex… for example simple things like wordWrap :/ But i love that is do able in some way.

    I saved me a lot of time. Thanks again.

  2. Way says:

    you are welcome

  3. Brian says:

    This is great work Way, my time can now be used in figuring out some other unnecessarily complicated problem.

  4. fszilinski says:

    Great, thanks!!!! Helped me to fix a bug very fast!

  5. Varkey says:

    Great Help Man…….. All the very best……

  6. Guru Prakash says:

    Thanks , this give lot of help to change functionality of flex component.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>