Flexで超簡単にシャレオツな入力フォームを作る

仕事でちょっとやって楽しかったんで
家でもシャレオツな入力フォームを5分(大げさですがなにか?)で作れるライブラリを作ってみました。

自分のsvn環境とか無いので、ソース張ってみます。

ちゃんとイベントとか書いてませんが、晒すってことで

完成品



使い方



1.InvalidButtonForm

Formの変わりに使う
checkComponentsプロパティにチェック対象のフォームアイテムを{id:false,id:true}みたいにセットする
ValidatorをArrayで囲む(ValidateAllするときみたく)
validatorsプロパティにこのArrayをセットする
インバリッドを切り替えたいボタンをinvalidButtonプロパティにセットする
これでASのコードを1行も書かずに自動的にValidatorのイベントを取得してcheckComponentsが全てTrueになったときにボタンが使用できるようになる



2.GuideTextInput


guideTextにガイド文字列をセット
guidColorにガイド時の文字色をセット(デフォルトは0xCCCCCC)
これだけで、入力の無いときに自動的にガイドが表示され、プログラムからtextを参照してもガイドは考慮されない



3.PasswordValidator


equalPropertyに等しくなるべきTextInputをセット
notEqualErrorにエラー文言を入れる
後は普通



4.ひたすら外観をお洒落にすることをデザイナーに頼む



たったこれだけで普通の入力フォームがお洒落フォームに変身する




以下コード

1.バリデータが全て正常に実行されたら
  ボタンを押せるようになるカスタムフォーム


package com.ken39arg.component
{
import flash.events.Event;

import mx.containers.Form;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;

/**
* InvalidButtonForm
*
* validatorの実行結果によってsubmitボタンを使用可能/不可能にする
*
* @access public
* @package com.ken39arg.component
* @author ken39arg
* @varsion $id : InvalidButtonForm.as, v 0.1 2008/02/21 ken39arg Exp $
*/
public class InvalidButtonForm extends Form
{
/** インバリッドを切り替えるUICompornent */
public var invalidButton : UIComponent;

/**
* チェック対象のコンポーネント配列
* key = コンポーネントのID
* value = true/false
* をセットする
*/
public var checkComponents : Object;

private var _validators : Array;

/**
* Arrayに格納したValidator達
*/
public function get validators():Array
{
return _validators;
}

public function set validators(value:Array):void
{
if (_validators != value) {
var validator : Validator;
for (var i:int = 0; i < value.length; i++) {
if (value[i] is Validator) {
validator = value[i] as Validator;
validator.addEventListener(ValidationResultEvent.INVALID, validatorInvalidHandler);
validator.addEventListener(ValidationResultEvent.VALID, validatorValidHandler);
}
}

_validators = value;
}

}

public function InvalidButtonForm()
{
super();
_validators = [];
checkComponents = {};
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationCompleteHandler);
}

private function onCreationCompleteHandler(event:FlexEvent):void
{
invalidButton.enabled = false;
removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationCompleteHandler);
}

private function validatorValidHandler(event:ValidationResultEvent):void
{
var varidator : Validator = event.target as Validator;

if (varidator != null) {
checkComponents[UIComponent(varidator.source).id] = true;
}
var ret : Boolean = true;

for each (ret in checkComponents) {
if (!ret) {
invalidButton.enabled = false;
return;
}
}
invalidButton.enabled = true;

}

private function validatorInvalidHandler(event:ValidationResultEvent):void
{
var varidator : Validator = event.target as Validator;
if (varidator != null) {
checkComponents[UIComponent(varidator.source).id] = false;

}
invalidButton.enabled = false;
}

}
}


2.ガイドを入れれる入力フォーム


package com.ken39arg.component
{
import flash.events.Event;
import flash.events.FocusEvent;

import mx.controls.TextInput;
import mx.events.FlexEvent;

/**
* GuideTextInput
*
* textに何も入力されていない状態のときにガイドを表示する
*
* @access public
* @package com.ken39arg.component
* @author ken39arg
* @varsion $id : GuideTextInput.as, v 0.1 2008/02/21 ken39arg Exp $
*/
public class GuideTextInput extends TextInput
{
/** ガイド状態かどうか */
private var isGuide : Boolean = true;

/** インプットモードかどうか */
private var inputMode : Boolean = false;

/** 通常テキストカラー */
private var _color : uint = 0x0B333C;

/** 入力がパスワードかどうか */
private var _asPassword : Boolean = false;

/** ガイドで表示するテキスト */
public var guideText : String;

/** ガイド表示のテキストカラー */
public var guideColor : uint = 0xCCCCCC;


override public function set text(value:String):void
{
if (value.length < 1) {
setGuide()
} else {
setNoGuideStyle();
super.text = value;
}
}

override public function get text():String
{
if (isGuide) {
return "";
}
return super.text;
}

override public function set displayAsPassword(value:Boolean):void
{
_asPassword = value;
super.displayAsPassword = value;
}

/**
* コンストラクタ
*
*/
public function GuideTextInput()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationCompleteHandler, false, int.MAX_VALUE);
addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler, false, int.MAX_VALUE);
}

override public function setStyle(styleProp:String, newValue:*):void
{
if (styleProp == "color" && !isGuide) {
_color = newValue as uint;
}
super.setStyle(styleProp, newValue);
}

override public function dispatchEvent(event:Event):Boolean
{
if (event.type == "textChanged" || event.type == FlexEvent.VALUE_COMMIT) {
if (!inputMode && isGuide) {
return true;
}
}

if (event.type == "displayAsPasswordChanged") {
if ((!inputMode && isGuide)
|| (inputMode && !isGuide)) {
return true;
}
}

return super.dispatchEvent(event);
}

private function onCreationCompleteHandler(event:FlexEvent):void
{
removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationCompleteHandler);
_color = getStyle("color");
_asPassword = displayAsPassword;
if (text.length < 1) {
setGuide();
}
}

private function onFocusInHandler(event:FocusEvent):void
{
addEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler, false, int.MAX_VALUE);
removeEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
if (isGuide) {
setInputMode();
}
}

private function onFocusOutHandler(event:FocusEvent):void
{
addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler, false, int.MAX_VALUE);
removeEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
if (super.text.length < 1) {
setGuide();
} else {
isGuide = false;
}
}

private function setGuide():void
{
isGuide = true;
super.displayAsPassword = false;
setStyle("color", guideColor);
super.text = guideText;
inputMode = false;
dispatchEvent(new Event("changeGuideMode"));
}

private function setNoGuideStyle():void
{
super.displayAsPassword = _asPassword;
setStyle("color", _color);
}

private function setInputMode():void
{
if (isGuide) {
super.text = "";
setNoGuideStyle();
}
inputMode = true;
}

}
}


3.パスワードのバリデータ


package com.ken39arg.validator
{
import mx.controls.TextInput;
import mx.validators.ValidationResult;
import mx.validators.Validator;

public class PasswordValidator extends Validator
{
/** 検査対象のTextInput */
public var equalProperty : TextInput;

/** エラーの場合のメッセージ文字列 */
public var notEqualError : String = "入力値が不正です";

override protected function doValidation(value:Object):Array
{
var results:Array = [];

results = super.doValidation(value);

if (results.length > 0) {
return results;
}

// 検査対象のtextと比較する
if (equalProperty.text != String(value) ) {
results.push(new ValidationResult(true, null, "notEqual",
notEqualError));
}

return results;
}

}
}


利用サンプル



0) {
Alert.show("間違ってるよ");
return;
}

Alert.show("OK!");
}
]]>