Flex Text Input with icon inside like mac os x search text input

Question

Hi Everybody,

I'm trying to extend the text input that comes in flex to support an icon, just like mac os x search text input has a grey circle aligned to the right, the text input has a addChild method, but it didn't work for me.

Is there some way to do this?

thanks in advance

Answer 1

An easier way to do this would be to create an mxml component that looks like the text input you want. I've never seen the mac OSX search box, but based on your description a component based off the canvas with a white back ground, and proper boarders could then contain an image and a text input without boarders. This would give you the look you're going for I think.

Answer 2

I've found a solution :D here it's the code

The trick were override the updateDisplayList.

Happy hacking.

package
{
import flash.display.DisplayObject;

import mx.controls.Image;
import mx.controls.TextInput;
import mx.core.mx_internal;

use namespace mx_internal;

public class MyTextInput extends TextInput
{
    private var _image:Image;

    public function MyTextInput()
    {
        super();
    }

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

        _image = new Image();
        _image.source = "http://sstatic.net/so/img/replies-off.png",

        addChild(DisplayObject(_image));
    }

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

        this._image.width = 16;
        this._image.height = 16;

        this._image.x = this.width - this._image.width - 5;
        this._image.y = this.height - this._image.height;

        this.textField.width = this.width - this._image.width - 5;
    }
}
}