Resizing Flex spark control with a custom skin

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">
 <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

Answers


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">
 <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.)


Need Your Help

Spawning a separate process from within a unit test

java unit-testing testing tdd junit

I have some unit tests (yes, perhaps more integration-ey tests !) that I would like to spin up another jvm, and then run the test code from that "other" JVM (and wait for it to finish, collecting the

remove duplicated array item

javascript jquery arrays

var arr = ["Chandelier", "Big Girls Cry", "Burn the Pages", "Eye of the Needle", "Hostage", "Straight for the Knife", "Fair Game", "Elastic Heart", "Free the Animal", "Fire Meet Gasoline", "Celloph...