Flex TextInput Control: отображение стиля поиска - PullRequest
Новая
       18

Flex TextInput Control: отображение стиля поиска

1 голос
/ 29 июня 2009

У меня есть элемент управления TextInput, который имеет функцию поиска людей в системе. Работает нормально. Все, что мне нужно, это стилизовать его таким образом, чтобы в нем было изображение поиска справа, которое при нажатии будет искать. На самом деле это часть приложения, которая делает окно поиска намного лучше.

Подобное поведение реализовано в окне поиска, встроенном в Firefox.

Есть какое-нибудь решение для этого?

Спасибо:)

Ответы [ 4 ]

2 голосов
/ 15 июля 2009

Ack, избегайте подклассов. Думайте вне Коробки, как бы, и используйте Canvas: 

<mx:Canvas>
    <mx:TextInput change="doSearchFor(event.currentTarget.text)" />
    <mx:Image source="search_icon.png" verticalCenter="0" right="5" />
</mx:Canvas>

Затем сделайте этот компонент самим, если хотите сделать его более аккуратным. Сочетание композиции с наследованием в MXML, как и везде.

1 голос
/ 29 июня 2009 
<mx:HBox>
    <mx:TextInput id     = "txtSearch"/>
    <mx:Image source     = "yourSearchIcon.png" 
              click      = "doSearch()" 
              buttonMode = "true"/>
</mx:HBox>

Вот и все!

0 голосов
/ 20 августа 2009

Надеюсь, этот код поможет вам. Этот код добавляет значок поиска слева от TextInput. 

public class SearchInputBox extends TextInput
{

[Embed(source='../../../../assets/images/icons/searchIcon.png')]
private var searchIcon:Class;   
private var searchImg:Image;        

override protected function createChildren():void
{
        super.createChildren();
        searchImg = new Image();
        searchImg.source = searchIcon;
        searchImg.width=15;
        searchImg.height=15;
        searchImg.x = 2;
        searchImg.y = 3;

        setStyle("paddingLeft",searchImg.width+2);
        addChild(searchImg);

}
}
0 голосов
/ 10 июля 2009

Вы можете написать подкласс класса TextInput, который имеет в качестве изображения для изображения «yourSearchIcon», например: 

[Embed(source='../../libs/graphic_elements.swf#search_ico')]
private var searchIcon:Class;
private var searchImg:Image = new Image();

private function onCreationComplete(event:Event) : void {
    searchImg.source = searchIcon;
    searchImg.x = this.width - 40;
    this.addChild(searchImg);
    this.addEventListener(ResizeEvent.RESIZE, onResize);
}

очевидно, вы должны обработать событие изменения размера 

private function onResize(event:ResizeEvent) : void {
        searchImg.x = event.currentTarget.width - 40;

    }

Это ваш пользовательский компонент

...