Resizing Flex spark control with a custom skin

Question

Hi,

I have made a custom skin for TextInput spark control in Catalyst.

The problem is that in Flash Builder's design view I can't resize TextInput control with applied custom skin. I want to be able to adjust only TextInput's length keeping the same font metrics and proportions of the skin, so I can use the same skin for short, medium, and long TextInput.

Similarly, during runtime, I want to dock the control to the right and/or bottom of a parent container creating something like re-sizable web form.

I've made an ugly but simple TextInput skin for this example:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"&gt;
 <fx:Metadata>[HostComponent(spark.components.TextInput)]</fx:Metadata>
 <s:states>
      <s:State name="normal"/>
      <s:State name="disabled"/>
 </s:states>
 <s:Group x="0" y="0">
      <s:Rect height="31" radiusX="5" width="182" x="0.5" y="0.5">
           <s:stroke>
                <s:SolidColorStroke caps="none" color="#000000" joints="miter" miterLimit="4" weight="1"/>
           </s:stroke>
           <s:fill>
                <s:SolidColor color="#FF90CD"/>
           </s:fill>
      </s:Rect>
      <s:RichEditableText color="#2B4381" fontFamily="Arial" fontSize="12" tabStops="S0 S50 S100" x="11" y="11" width="161" heightInLines="1" id="textDisplay"/>
 </s:Group>
</s:Skin>

My first thought was that it is done by using 9-slicing, but couldn't find any example.

Thanks in advance, Petar

Answer 1

You need to change your positioning/sizing from being explicit to being relative to the edges, something like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"&gt;
 <fx:Metadata>[HostComponent(spark.components.TextInput)]</fx:Metadata>
 <s:states>
      <s:State name="normal"/>
      <s:State name="disabled"/>
 </s:states>
 <s:Rect left="0" right="0" top="0" bottom="0">
      <s:stroke>
           <s:SolidColorStroke caps="none" color="#000000" joints="miter" miterLimit="4" weight="1"/>
      </s:stroke>
      <s:fill>
           <s:SolidColor color="#FF90CD"/>
      </s:fill>
 </s:Rect>
 <s:RichEditableText left="11" right="11" top="11" bottom="11" color="#2B4381" fontFamily="Arial" fontSize="12" tabStops="S0 S50 S100" heightInLines="1" id="textDisplay"/>
</s:Skin>

(I haven't compiled or tried this, only edited as an example.)