上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




TextInputコントロール内に入力する項目を出力する為の
カスタムコンポーネントを作成してみました。

入力フォームで利用するといい感じに見えそうですね。


TextInputコントロールにTextFieldを子オブジェクトとして追加し、
TextFiledに入力項目を表示させています。

customTextInput.as




package sample
{
import flash.display.DisplayObject;
import flash.events.FocusEvent;
import flash.text.TextFieldAutoSize;

import mx.controls.TextInput;
import mx.core.FlexVersion;
import mx.core.IUITextField;
import mx.core.UITextField;
import mx.events.FlexEvent;

[Style(name="exTextColor", type="uint", format="Color", inherit="no")]

public class customTextInput extends TextInput
{
/* 拡張文字列 */
private var _exText:String;

/**
* デフォルトコンストラクタ
*/
public function customTextInput()
{
super();
}

/**
* プロパティ 拡張文字列 Set
*/
public function set exText(value:String):void
{
if ( !value ) {
value = "";
}

_exText = value;

if ( !exTextField ){
createExampleTextField( -1);
}

exTextField.text = value;
dispatchEvent( new FlexEvent ( FlexEvent.VALUE_COMMIT) );
}

/**
* プロパティ 拡張文字列 Get
*/
public function get exText():String
{
return _exText;
}

/* 拡張文字列用TextField */
protected var exTextField:IUITextField;

/**
* Focus Inイベント
*/
override protected function focusInHandler(event:FocusEvent):void
{
super.focusInHandler(event);

exTextField.text = "";
}

/**
* Focus Outイベント
*/
override protected function focusOutHandler(event:FocusEvent):void
{
super.focusOutHandler(event);

if ( (text == null) || (text.length <= 0) ){
exTextField.text = _exText;
} else {
exTextField.text = "";
}
}

/**
* 子オブジェクト 追加
*/
protected function createExampleTextField(childIndex:int):void
{
if ( !exTextField ) {
exTextField = IUITextField(createInFontContext(UITextField));

exTextField.autoSize = TextFieldAutoSize.NONE;
exTextField.enabled = enabled;
exTextField.ignorePadding = false;
exTextField.multiline = false;
exTextField.tabEnabled = false;
exTextField.wordWrap = false;
exTextField.enabled = false;

if (childIndex == -1){
addChild(DisplayObject(exTextField));
} else {
addChildAt(DisplayObject(exTextField), childIndex);
}
}
}

/**
* オブジェクト 更新
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

exTextField.x = textField.x;
exTextField.y = textField.y;

var paddingLeft:Number = getStyle("paddingLeft");
var paddingTop:Number = getStyle("paddingTop");

exTextField.x += paddingLeft;
exTextField.y += paddingTop;
exTextField.width = textField.width;
exTextField.height = textField.height;

var exampleTextColor:uint = getStyle("exTextColor");
if ( exampleTextColor ){
exTextField.textColor = exampleTextColor;
}
}
}
}


Main.mxml




<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:controls="sample.*" width="100%" height="100%">
<mx:TitleWindow>
<mx:Form>
<mx:FormItem label="名前">
<controls:customTextInput width="150" height="20" exText="Name" />
</mx:FormItem>

<mx:FormItem label="メールアドレス">
<controls:customTextInput width="150" height="20" exText="E-Mail" />
</mx:FormItem>
</mx:Form>
</mx:TitleWindow>
</mx:Application>



実行結果は以下のようになります

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。