Flex TextInput Control: Rendu de style de recherche

Question

J'ai un contrôle TextInput qui a une fonctionnalité de recherche pour les personnes dans le système. Cela fonctionne très bien. Tout ce dont j'ai besoin, c'est de le styliser de telle manière que l'image de recherche apparaisse sur la droite, qui, une fois cliquée, va chercher. C'est en fait pour l'aspect et la convivialité de l'application, ce qui rendra le champ de recherche beaucoup mieux.

C'est exactement le même comportement implémenté dans la boîte de recherche intégrée dans Firefox.

Une solution à cela?

Merci :)

Answer 1

<mx:HBox> 
    <mx:TextInput id  = "txtSearch"/> 
    <mx:Image source  = "yourSearchIcon.png" 
       click  = "doSearch()" 
       buttonMode = "true"/> 
</mx:HBox> 

C'est tout!

Answer 2

Vous pouvez écrire une sous-classe de TextInput classe qui a comme une image pour l'image "de yourSearchIcon" tels que:

[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); 
} 

est évident que vous devez gérer l'événement resize

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

    } 

C'est votre commande composant

Answer 3

Acq, éviter le sous-classement. Sortez des sentiers battus, pour ainsi dire, et d'utiliser une toile:

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

Ensuite font qu'un composant lui-même si vous voulez faire plus propre. Favoriser la composition sur l'héritage, en MXML comme ailleurs.

Answer 4

J'espère que ce code vous aidera. Ce code ajoute une icône de recherche à gauche du 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); 

} 
}