エラーヒントは、errorTip クラスセレクタからそのスタイルを取得する ToolTip クラスのインスタンスです。通常は、データの無効により検証メカニズムが警告を表示するときにエラーヒントが表示されます。ただし、errorTip スタイルの定義を使用してそれをツールヒントに適用し、カスタム検証警告メカニズムを作成することもできます。

エラーヒントのスタイルは、framework.swc ファイル内の defaults.css ファイルに定義されています。errorTip には、次のデフォルト設定が指定されています。errorTip の前のピリオドは、それがクラスセレクタであることを示します。

.errorTip {
    color: #FFFFFF;
    fontSize: 9;
    fontWeight: "bold";
    shadowColor: #000000;
    borderColor: #CE2929;
    borderStyle: "errorTipRight";
    paddingBottom: 4;
    paddingLeft: 4;
    paddingRight: 4;
    paddingTop: 4;
}

エラーヒントの外観をカスタマイズするには、デフォルトのスタイルをオーバーライドする新しいテーマを作成するか、またはアプリケーション内でスタイルプロパティをオーバーライドします。テーマの作成の詳細については、テーマについてを参照してください。

errorTip スタイルをツールヒントに適用して、検証エラーヒントによく似たツールヒントを作成できます。次の例は、検証ロジックは含まれていませんが、errorTip スタイルを使用して検証エラーヒントによく似たツールヒントを作成する方法を示しています。この例を実行するときは、TextInput コントロールにテキストを入力して Enter キーを押します。

<?xml version="1.0"?>
<!-- tooltips/ErrorTipStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">
  <mx:Script><![CDATA[
     import mx.controls.ToolTip;
     import mx.managers.ToolTipManager;
     
     private var errorTip:ToolTip;
     private var myError:String;
  
     private function validateEntry(type:String, event:Object):void {
        // NOTE: Validation logic would go here.
        switch(type) {
           case "ssn":
            myError="Use SSN format (NNN-NN-NNNN)";
            break;
           case "phone":
            myError="Use phone format (NNN-NNN-NNNN)";
            break;
        }
        // Use the target's x and y positions to set position of error tip.
        trace("event.currentTarget.width" + event.currentTarget.width);
        trace("event.currentTarget.x" + event.currentTarget.x);
        
        errorTip = ToolTipManager.createToolTip(
            myError, event.currentTarget.x + event.currentTarget.width, event.currentTarget.y) as ToolTip;
      
        // Apply the errorTip class selector.
        errorTip.setStyle("styleName", "errorTip");
     }
  ]]></mx:Script>

        <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>
        <mx:TextInput id="phone" enter="validateEntry('phone',event)"/>
        <mx:Label text="Press the enter key after entering text in each text input."/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

エラーヒントのもう 1 つの用途は、コンポーネントの errorString プロパティの値を設定することです。こうすると、ユーザー側で何もコーディングしなくても、ツールヒントのインスタンスが ToolTipManager によって作成され、そのツールヒントに errorTip スタイルが適用されます。

次の例は、errorString プロパティの値を設定してエラーヒントを作成する方法を示しています。

<?xml version="1.0"?>
<!-- tooltips/ErrorString.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">
  <mx:Script><![CDATA[
     import mx.controls.ToolTip;
     import mx.managers.ToolTipManager;
     
     private var errorTip:ToolTip;
     private var myError:String;
  
     private function validateEntry(type:String, event:Object):void {
        // NOTE: Validation logic would go here.
        switch(type) {
           case "ssn":
            myError="Use SSN format";
            break;
           case "phone":
            myError="Use phone format";
            break;
        }

        event.currentTarget.errorString = myError;

     }
  ]]></mx:Script>

  <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>
  <mx:TextInput id="phone" enter="validateEntry('phone',event)"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

また、次の例に示すように、errorTipBorderStyle プロパティの値を指定して、createToolTip() メソッドを呼び出す際にエラーヒントが作成されるようにすることもできます。

<?xml version="1.0"?>
<!-- tooltips/CreatingErrorTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
    import mx.managers.ToolTipManager;
    import mx.controls.ToolTip;

    public var myTip:ToolTip;

    private function createBigTip(event:Event):void {
        var myError:String = "These buttons let you save, exit, or continue with the current operation.";

        // By setting the fourth argument to a non-null value,
        // this ToolTip is created as an error tip.
        myTip = ToolTipManager.createToolTip(
            myError, 
            event.currentTarget.x + event.currentTarget.width, 
            event.currentTarget.y, 
            "errorTipRight"
            ) as ToolTip;
    }

    private function destroyBigTip():void {
        ToolTipManager.destroyToolTip(myTip);
    }

    ]]></mx:Script>
    <mx:Panel rollOver="createBigTip(event)" rollOut="destroyBigTip()">
        <mx:Button label="OK" toolTip="Save your changes and exit."/>
        <mx:Button label="Apply" toolTip="Apply changes and continue."/>
        <mx:Button label="Cancel" toolTip="Cancel and exit."/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

バリデータの使用の詳細については、データ検証を参照してください。