失敗驗證時設置Spark TextInput背景

Question

如何在錯誤狀態下指定TextInput的外觀？關於這個主題的文檔似乎真的很少！

沒有錯誤狀態，但是您可以指定一個errorSkin（它是否必須是ErrorSkin的子類？）。

我想設置TextInput的背景色，並在驗證失敗時增加邊框的粗細。我該怎麼做呢？

Answer 1

這裏是我結束了：

public class ObviousErrorSkin extends ErrorSkin 
{ 
    private static var glowFilter:GlowFilter = new GlowFilter(0xFF0000, 0.85, 8, 8, 3, 1, true, true); 

    private static var rect:Rectangle = new Rectangle(); 

    private static var filterPt:Point = new Point(); 

    override protected function processBitmap():void 
    { 
     rect.x = rect.y = 0; 
     rect.width = bitmap.bitmapData.width; 
     rect.height = bitmap.bitmapData.height; 
     glowFilter.color = target.getStyle("errorColor"); 
     bitmap.bitmapData.applyFilter(bitmap.bitmapData, rect, filterPt, glowFilter); 
    } 

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
    { 
     // Early exit if we don't have a target object 
     if (!target) 
      return; 

     super.updateDisplayList(unscaledWidth, unscaledHeight); 

     graphics.clear(); 
     graphics.beginFill(target.getStyle("errorColor"), 0.25); 
     graphics.drawRect(bitmap.x, bitmap.y, bitmap.width, bitmap.height); 
     graphics.endFill(); 
    } 
} 

Answer 2

你應該使用errorString屬性激活錯誤狀態

Flex, any way to programmatically highlight a field in red the way the validators do?

對這個答案一看，我認爲這將幫助你瞭解

Answer 3

據我所知，有沒有簡單的實現這一目標的方法。問題是，在錯誤狀態組件不會改變它自己的皮膚，它只是添加errorSkin的實例作爲新的孩子。這裏的代碼SkinnableComponent

mx_internal function updateErrorSkin():void 
{ 
    if (errorString != null && errorString != "" && getStyle("showErrorSkin")) 
    { 
     if (!errorObj) 
     { 
      var errorObjClass:Class = getStyle("errorSkin"); 

      if (errorObjClass) 
       errorObj = new errorObjClass(); 

      if (errorObj) 
      { 
       if ("target" in errorObj) 
        errorObj["target"] = this; 
       super.addChild(errorObj); 
      } 
     } 
    } 
    else 
    { 
     if (errorObj) 
      super.removeChild(errorObj); 

     errorObj = null; 
    } 
} 

如果要添加errorSkin和SparkSkin擴展它就會具有零個大小。當然，您可以將它的寬度和高度屬性設置爲父組件，但是它會重疊此父組件。

如果您使用從ErrorSkin繼承的皮膚，則會發生大致相同的情況。但是你需要用bitmap屬性來做點什麼。而且它仍然是你的主要組成部分。是的，你可以交換錯誤的皮膚和皮膚主然後進行主肌膚透明，也許達到你所需要的，但我的意見，還挺創建自己的組件是這樣的：

TextInputWithError.as

package 
{ 
    import spark.components.TextInput; 

    [SkinState("error")] 

    public class TextInputWithError extends TextInput 
    { 

     public function TextInputWithError() 
     { 
      super(); 
     } 

     protected var useErrorSkin:Boolean; 

     override public function set errorString(value:String):void 
     { 
      super.errorString = value; 
      setStyle("errorSkin", null); 
      if (value != "") 
       useErrorSkin = true; 
      else 
       useErrorSkin = false; 
      invalidateProperties(); 
     } 

     override protected function commitProperties():void 
     { 
      super.commitProperties(); 

      if (useErrorSkin != "") 
       skin.currentState = "error"; 
      else 
       skin.currentState = getCurrentSkinState(); 
     } 

    } 
} 

TextInputWithErrorSkin.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    alpha.disabledStates="0.5" blendMode="normal"> 

    <fx:Metadata> 
    <![CDATA[ 
     /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent 
     */ 
     [HostComponent("TextInputWithError")] 
    ]]> 
    </fx:Metadata> 

    <s:states> 
     <s:State name="normal"/> 
     <s:State name="error"/> 
     <s:State name="disabled" stateGroups="disabledStates"/> 
     <s:State name="normalWithPrompt"/> 
     <s:State name="disabledWithPrompt" stateGroups="disabledStates"/> 
    </s:states> 

    <s:Rect id="background" left="1" right="1" top="1" bottom="1"> 
     <s:fill> 
      <s:SolidColor id="bgFill" color="0xFFFFFF" color.error="0x00FF00" /> 
     </s:fill> 
    </s:Rect> 

    <s:Rect left="0" right="0" top="0" bottom="0" id="border"> 
     <s:stroke>  
      <s:SolidColorStroke id="borderStroke" weight="1" weight.error="2" color.error="0xFF0000" /> 
     </s:stroke> 
    </s:Rect> 

    <s:Rect left="1" top="1" right="1" height="1" id="shadow"> 
     <s:fill> 
      <s:SolidColor color="0x000000" alpha="0.12" /> 
     </s:fill> 
    </s:Rect> 

    <s:RichEditableText id="textDisplay" 
       verticalAlign="middle" 
       widthInChars="10" 
       left="1" right="1" top="1" bottom="1" /> 

    <s:Label id="promptDisplay" maxDisplayedLines="1" 
       verticalAlign="middle" 
       mouseEnabled="false" mouseChildren="false" 
       includeIn="normalWithPrompt,disabledWithPrompt" 
       includeInLayout="false" 
       /> 

</s:SparkSkin> 

我將不勝感激，如果有人將指導我對這個問題的更好的解決辦法，因爲我太=）