How to give textinput skin to the textinput control in flex 4.5 mobile

Question

I have created a class RoundedTextInputSkin that extends from TextInputSkin

    package skins
{

    import assets.TextInput_389X35;

    import spark.skins.mobile.TextInputSkin;

    public class RoundedTextInputSkin extends TextInputSkin
    {

        public function RoundedTextInputSkin()
        {
            super();
            borderClass =  TextInput_389X35;
            layoutBorderSize = 5;
        } 
    }
}

Now i have given this skin as skinClass to the textInput Control. I could able to see the roundedTextInput but text entered in the textinput is not visible. Can any one please tell me what went wrong with my code.

Here is my fxg file

    <?xml version="1.0" encoding="utf-8" ?>
<Graphic version="2.0" ai:appVersion="16.0.0.682" ATE:version="1.0.0" flm:version="1.0.0" d:using="" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008">
      <Group x="3" y="1.35449" ai:seqID="1" flm:knockout="false">
        <Rect x="0.5" y="0.5" width="389" height="35" radiusX="16.9997" radiusY="16.9997" ai:seqID="2">
          <fill>
            <LinearGradient x="194.5" y="0.38916" scaleX="34.2022" rotation="90">
              <GradientEntry ratio="0" color="#B0B0B0"/>
              <GradientEntry ratio="1" color="#E0E0E0"/>
            </LinearGradient>
          </fill>
        </Rect>
        <Rect x="0.5" y="0.5" width="389" height="35" radiusX="16.9997" radiusY="16.9997" ai:seqID="3"/>
      </Group>
</Graphic>

JeffryHouser JeffryHouser · Accepted Answer · 2013-02-21T14:46:56

IT is not clear how your FXG file relates to the skin class you showed. But, I'm going to assume that the FXG you provided is the TextInput_389X35 referenced in code. I assume that your custom border is on top of all other elements; making them invisible. Per the createChildren() method of TextSkinBase; the border element is placed on top of everything else:

override protected function createChildren():void
{
 super.createChildren();
 if (!textDisplay)
 {
     textDisplay = StyleableTextField(createInFontContext(StyleableTextField));
     textDisplay.styleName = this;
     textDisplay.editable = true;
     textDisplay.useTightTextBounds = false;
     addChild(textDisplay);
 }

 if (!border)
 {
   border = new borderClass();
   addChild(border);
 }
}

The default Border FXG elements use paths to create the border so that the "fill" is a border. By using a Rectangle, you are placing a big square on top of everything else.

How to give textinput skin to the textinput control in flex 4.5 mobile

1 Answers