[ Feathers ] オブジェクト – TextInput –

前回は、FeathersのScrollTextクラスについてご紹介いたしました。
今回は、FeathersのTextInputクラスをご紹介したいと思います。

TextInputクラスは文字入力が行える部品となります。
それでは、使用方法の説明に入ります。

インスタンスを作成します。

	private var textInput:TextInput;
	textInput = new TextInput();

入力文字数の制限の指定をします。
こちらを指定した文字数しか入力できなくなります。
※全角、半角どちらも1個での数になります。

	textInput.maxChars = 10;

背景に使用する画像を用意して、TextInputの背景に指定します。
これは、TextInputに設定する背景を用意しないと、
”[Fault] exception, information=ArgumentError: A component’s width cannot be NaN.”
というエラーが出てしまうので、必ず指定してください。

    //各種ファイルの埋め込み
    [Embed(source = "backdata.png")]
    private static const backdataPng:Class;	//背景にする画像

    var texture:Texture = Texture.fromBitmap( new backdataPng() );	//背景のテクスチャ
    textInput.backgroundSkin =new Image(texture);

TextInputのイベントを登録します。
登録できるイベントは複数あるので、下記コードにイベントの内容も記載します。

	//TextInputの内容が書き換わった場合にイベントを通知する。
	textInput.addEventListener(Event.CHANGE, /*ここにコールバック関数名*/);

	//TextInputでEnterキーが押された場合にイベントを通知する。
	textInput.addEventListener(FeathersEventType.ENTER,  /*ここにコールバック関数名*/);

	//TextInputにフォーカスが移動した場合にイベントを通知する。
	textInput.addEventListener(FeathersEventType.FOCUS_IN,  /*ここにコールバック関数名*/);

	//TextInputからTextInput外にフォーカスが移動した場合にイベントを通知する。
	textInput.addEventListener(FeathersEventType.FOCUS_OUT, /*ここにコールバック関数名*/);

	//TextInputでソフトキーボードが開かれた場合にイベントを通知する（パソコンでは確認出来ませんでした）
	textInput.addEventListener(FeathersEventType.SOFT_KEYBOARD_ACTIVATE,  /*ここにコールバック関数名*/);

	//TextInputでソフトキーボードが閉じられた場合にイベントを通知する（パソコンでは確認出来ませんでした）
	textInput.addEventListener(FeathersEventType.SOFT_KEYBOARD_DEACTIVATE,  /*ここにコールバック関数名*/);

イベント内で書き換わった文字列を取得する場合は、下記のコードとなります。

	public function textInputChangeHandler(evt:Event):void{
		
		//書き換わった文字列を取得する
		var getString:String = textInput.text;
	}

イベントを使う場合は、下記のインポートが必要となりますので、
忘れず定義してください。

	import starling.events.Event;			//CHANGEを使用する場合
	import feathers.events.FeathersEventType;	//CHANGE以外のイベントを使用する場合

最後に画面に貼り付けて終了となります。

	addChild(textInput);

このように、TextInputクラスを使用すると、簡単にテキスト入力を実装することが出来ます。
皆さんも、是非使ってみてください。

簡単なご紹介となりましたが、以上で本記事は終了となります。

最後まで御覧いただきありがとうございました。

TextInputのサンプルコード

import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Touch;
import starling.events.TouchPhase;
import starling.events.TouchEvent;
import starling.textures.Texture;

import starling.events.Event;		//starlingEventのimport

import feathers.controls.TextInput;

import starling.text.TextField;
import  feathers.events.FeathersEventType;

internal class StarlinTestMain extends Sprite
{
	//各種ファイルの埋め込み
    [Embed(source = "backdata.png")]
    private static const backdataPng:Class;     
	
	
	private var textInput:TextInput;
	private var imageBack:Image;

	public var textFieldData:TextField;
	public var textFieldData2:TextField;

	public function StarlinTestMain()
    {
        addEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
    }
 
    private function addStage(e:starling.events.Event):void
    {
        removeEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);

		var texture:Texture = Texture.fromBitmap( new backdataPng() );

		textInput = new TextInput();
		textInput.backgroundSkin =new Image(texture);
		textInput.maxChars = 10;
		textInput.y = 200;
		textInput.x = 200;

		//内容変更でイベント通知
		textInput.addEventListener(Event.CHANGE, textInputChangeHandler);
		//Enterキー押下でイベント通知
		textInput.addEventListener(FeathersEventType.ENTER, textInputEnterChangeHandler);
		
		addChild(textInput);
		
		textFieldData = new TextField(400,200,"文字入力でここが変わります","",26,0xffffff,true);
		textFieldData.y = 300;
		textFieldData.x = 100;
		addChild(textFieldData);
		
		textFieldData2 = new TextField(400,200,"Enterでここが変わります","",26,0xffffff,true);
		textFieldData2.y = 400;
		textFieldData2.x = 100;
		addChild(textFieldData2);

		
	}
	public function textInputChangeHandler(evt:Event):void{
		if (textInput.text)
		{
			textFieldData.text = textInput.text;
		}
	}
	
	public function textInputEnterChangeHandler(evt:Event):void{
		if (textInput.text)
		{
			textFieldData2.text = textInput.text;
		}
	}
	
}    

feahters公式HP
feathers wiki

＜次回の更新について＞
次回は、Starlingに戻りまして、Starlingのフィルターについてご紹介します。

---

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。

---