Attractive Textbox in Flex4

 Main mxml file (say AHTextFieldTest.mxml)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:local="*"
               backgroundColor="0xf4f4f4"
               viewSourceURL="srcview/index.html">

    <Style>
            .textInput {
                skinClass: ClassReference("AHTextInputSkin");
                focusColor: "0xa2d2ff";
                color: "0x808080";
                fontSize: "12";
                selectionColor: "0xa2d2ff";
            }
        </Style>


    <s:HGroup horizontalCenter="0"
              verticalCenter="0"
              gap="25">
        <s:TextInput text="Spark Default"/>
        <local:AHTextInput id="cf"
                           text="Customized"
                           styleName="textInput"
                           width="100"/>
    </s:HGroup>

</s:Application>

 Skin File (say AHTextInputSkin.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"
      alpha.disabled="0.5">

    <fx:Metadata>
        [HostComponent("AHTextInput")]
    </fx:Metadata>
   
    <fx:Script>
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background", "textDisplay"];
        override public function get colorizeExclusions():Array {return exclusions;}
       
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array; // = ["bgFill"];
        override public function get contentItems():Array {return contentFill};
    </fx:Script>
   
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="focused"/>
        <s:State name="invalid"/>
    </s:states>
   
    <!-- Transition from normal state to focused state and back -->
    <s:transitions>
        <s:Transition fromState="normal" toState="focused" >
            <s:AnimateColor duration="350" targets="{[bgFill,  stroke]}" />
        </s:Transition>
        <s:Transition fromState="focused" toState="normal" >
            <s:AnimateColor duration="350" targets="{[bgFill,  stroke]}" />
        </s:Transition>
    </s:transitions>
   
    <!-- background -->
    <s:Rect blendMode="normal" left="1" right="1" top="1" bottom="1" radiusX="3" radiusY="3" alpha="1">
         <s:fill >
            <s:SolidColor id="bgFill" color="0xa2d2ff" color.focused="0xe8f8ff"  />
        </s:fill>
        <s:stroke>           
            <s:SolidColorStroke id="stroke" color="0x92c2ef" color.focused="0xffffff"  weight="1" />
        </s:stroke>
    </s:Rect>
   
    <!-- text. To do: Get Properties from Component -->
    <s:RichEditableText id="textDisplay" color.focused="0x303030" color.invalid="0xff0000" verticalAlign="middle"
              left="1" right="1" top="1" bottom="1"
              paddingLeft="3" paddingTop="5"
              paddingRight="3" paddingBottom="3"/>

</s:SparkSkin>

Package file (say AHTextInput.as )





package
{
    import flash.events.FocusEvent;
    import spark.components.TextInput;

    public class AHTextInput extends TextInput
    {
        //Declare the Additional SkinStates
        [SkinState("focused")];
       
        private var bfocused:Boolean;
       
        public function AHTextInput()
        {
            super();
        }
       
        //Add EventListeners to the textview for FocusEvent
        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);
            if (instance == this.textDisplay) {
                trace ("Adding TextDisplay");
                this.textDisplay.addEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
                this.textDisplay.addEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
            }
        }
       
        //Clean up EventListeners and stuff...
        override protected function partRemoved(partName:String, instance:Object):void {
            super.partRemoved(partName, instance);
            if (instance == this.textDisplay) {
                this.textDisplay.removeEventListener(FocusEvent.FOCUS_IN, onFocusInHandler);
                this.textDisplay.removeEventListener(FocusEvent.FOCUS_OUT, onFocusOutHandler);
            }
        }
       
        //Leverage the new SkinState
        override protected function getCurrentSkinState():String {
            if (bfocused) {
                return "focused";
            } else {
                return super.getCurrentSkinState();
            }
        }
       
        //Handler for FocusIn Event
        private function onFocusInHandler(event:FocusEvent):void {
            bfocused = true;
            invalidateSkinState();
            trace("Getting focus");
        }
       
        //Handler for FocusOut
        private function onFocusOutHandler(event:FocusEvent):void {
            bfocused = false;
            invalidateSkinState();
            trace("Loosing focus");
        }

    }
}


Folder Structure