Re: [flexcoders] Button with Icon and two labels one with Left align while Other with right Align

[Manish Jethani]

On Sat, Dec 20, 2008 at 1:20 PM, Ashish Verma <verma.lu...@gmail.com> wrote:
> I tried the same. but how to fine tune all the methods like meaure, update
> list, label properties with this new textfield. and main problem is that the
> alignment is apply only for button not for textfield. please provide some
> work around.

Here's a custom Button-derived component with a basic TextField object
aligned at 100 px. horizontally.

public class MyButton extends Button
{
    private var label2Changed:Boolean = false;

    protected var label2Field:TextField;

    private var _label2:String = "";
    public function get label2():String
    {
        return _label2;
    }
    public function set label2(value:String):void
    {
        if (_label2 != value) {
            _label2 = value;

            label2Changed = true;

            invalidateProperties();
        }
    }

    override protected function createChildren():void
    {
        if (label2 && !label2Field) {
            label2Field = new TextField();
            addChild(label2Field);
        }

        super.createChildren();
    }

    override protected function commitProperties():void
    {
        if (label2Changed) {
            label2Changed = false;

            if (label2 && !label2Field) {
                label2Field = new TextField();
                addChild(label2Field);

                invalidateDisplayList();

            } else if (!label2 && label2Field) {
                removeChild(label2Field);
                label2Field = null;

                invalidateDisplayList();
            }
        }

        super.commitProperties();
    }

    override protected function measure():void
    {
        super.measure();

        measuredWidth += 100;
    }

    override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        if (label2Field) {
            label2Field.text = label2;

            // align
            label2Field.x = 100;
            label2Field.y = 5;

            // bring to front
            setChildIndex(label2Field, numChildren - 1);
        }
    }
}

Notice the implementations of the createChildren, commitProperties,
measure, and updateDisplayList methods, the label2 setter, and the
backing variables _label2 and label2Changed, and the internal
TextField object label2Field, and how they're all handled. You'll find
the best way to learn to write custom components is to just peek into
the source of the Flex framework itself.

Manish