Flex2上の入力エラー表示 - カタヤマンがプログラマチックに今日もコードアシスト

Flex2のコンポーネントにはエラーを表示する機構がついている。
UIComponentに「errorString」というプロパティがあり、この変数に文字を入れるだけで
コンポーネントの枠の色が変わり、かつマウスオーバー時にツールチップが出るようになる。

例えばこれの場合、

 var userIdTextInput:TextInput = page.userIdTextInput;
 userIdTextInput.errorString="id/password required";

という感じで入れるだけと、大変手軽。
枠の色やツールチップのスタイルは、CSSを使って定義できる。
枠の色は、error-colorというスタイル名を使用する。デフォルトは赤。
例えばすべてのコンポーネントの枠の色を変えたい場合は、

global {
 error-color: #FF8000;
}

こんな感じで指定すればいい。

ツールチップ自体は、デフォルトでは「.errorTip」という名前のセレクタからスタイルを取得する。
例えばこれだと

.errorTip {
    color: #FF0000;
    fontSize: 14;
    fontWeight: "bold";
    shadowColor: #CCCCCC;
    borderColor: #0000FF;
    borderStyle: "errorTipRight";
    paddingBottom: 6;
    paddingLeft: 6;
    paddingRight: 6;
    paddingTop: 6;
}

となる。

ところで、エラー時にコンポーネントの枠だけでなく背景も変えたい場合はあると思うのだが、
調べた限りではそれを設定する方法がなかった。
ということで、そういう動作をさせる用に簡単なユーティリティを作ってみた。

  /**
   * UIComponentに対して、エラーメッセージをセットします。
   * エラー発生時、枠だけでなく背景もエラー色にします。 
   * エラー時の枠の色はerror-color(errorColor)、
   * エラー時の背景はerror-background-color(errorBackgroundColor)
   * で定義します。
   * エラー時の背景は、error-background-colorでスタイル定義していない場合、
   * error-colorを使用します。
   **/
  public static function setUIError(comp:UIComponent,msg:String):void{
    //元の背景色を保存
    if(comp.getStyle("__backgroundColor")==null){
      comp.setStyle("__backgroundColor",comp.getStyle("backgroundColor"));
    }
    var errorStyle:Object = comp.getStyle("errorBackgroundColor");
    if(errorStyle==null){
      errorStyle = comp.getStyle("errorColor");
    }
    if(errorStyle != null){  
      comp.setStyle("backgroundColor",errorStyle);
    }
    comp.errorString = msg;
  }
  /**
   * エラー状態のUIComponentを元に戻します。
   **/
  public static function resetUIError(comp:UIComponent):void{
    //元の背景色がある場合、その背景色を取得してセット
    if(comp.getStyle("__backgroundColor")!=null){
      comp.setStyle("backgroundColor",comp.getStyle("__backgroundColor"));
    }
    comp.errorString = "";
  }

こんな感じ。
元の背景スタイルを__backgroundColorに退避しておいて、後で復元する。
このやり方が正しいかどうか分からないが、とりあえず動作はしている模様。

あと、ボタン押下時に相関チェックを行うというような場合、このツールチップを
使ってエラー表示をする場合、結構不親切になる。
なぜなら、このツールチップはマウスポインタが当たった所しか出ない為、エラーチェック
直後はメッセージが一切出ないからだ。

↑コンポーネントに色がつくが、なんとなく不親切

ということで、ボタンにちょっとしたメッセージを出したりすれば良いと思うのだが、

これを出すには、少々小細工が必要。

public function okButtonClickHandler(e:Event):void{
    //エラーがある場合
    if(errorCheck()==false){
      var targetComp:UIComponent = UIComponent(e.target);
      var p:Point = new Point(targetComp.x,targetComp.y);
      p = targetComp.parent.localToGlobal(p);
      var tooltop:ToolTip = ToolTipManager.createToolTip("入力にエラーがあります。",p.x,p.y,"errorTipAbove") as ToolTip;
      tooltop.setStyle("styleName", "errorTip");
      //ロールアウトもしくはマウス押下時にツールチップを消去
      var destroyListner:Function = function(e:Event):void{
        targetComp.removeEventListener(MouseEvent.ROLL_OUT,destroyListner);
        targetComp.removeEventListener(MouseEvent.MOUSE_DOWN,destroyListner);
        ToolTipManager.destroyToolTip(tooltop);
      };
      targetComp.addEventListener(MouseEvent.ROLL_OUT,destroyListner);
      targetComp.addEventListener(MouseEvent.MOUSE_DOWN,destroyListner);
    }
}

とこんな感じ。
これだと、ボタンを押したときにエラーがあると、ボタンの上にすぐにツールチップが出る。