apache-flex - Flex TextInput コントロール: 検索スタイルのレンダリング

Question

システム内の人々の検索機能を備えた TextInput コントロールがあります。それは正常に動作します。必要なのは、右側に検索画像が表示され、クリックすると検索されるようにスタイルを設定することだけです。これは実際には、アプリケーションのルック アンド フィールの一部であり、検索ボックスの見栄えが大幅に向上します。

Firefox に埋め込まれた検索ボックスに実装されている動作とまったく同じです。

これに対する解決策はありますか？

ありがとう ：）

Answer 1

サブクラス化は避けてください。いわば Box の外で考え、Canvas を使用します。

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

次に、よりきれいにしたい場合は、それをコンポーネント自体にします。MXML では、他の場所と同様に、継承よりも構成を優先します。

Answer 2

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

それで全部です！

Answer 3

次のような「yourSearchIcon」画像の画像として持つTextInputクラスのサブクラスを作成できます。

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

    }

それはあなたのカスタムコンポーネントです

Answer 4

このコードがお役に立てば幸いです。このコードは、検索アイコンを の左側に追加します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);

}
}