apache-flex - FlexSparkTextinputの異なるコンポーネント幅と内側のテキスト幅

Question

SparkTextinputコンポーネント内に表示されるテキストの長さをピクセル単位で変更しようとしています。mx Textinputでは、updateDisplayListをオーバーライドし、textFieldの幅を変更しますが、ここで同様の解決策を思い付くことができません。

何かご意見は？

ありがとう、

Answer 1

SparkTextInputのカスタムスキンを作成できます。

次のようになります（デフォルトのTextInputSkinのコピー）：

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

        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata> 

    <fx:Script>
        <![CDATA[
            ...
        ]]>
    </fx:Script>

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

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

    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </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"
                />

ここに、 textDisplayという名前のRichEditableTextが表示されます。これはTextInput内の実際のテキスト入力フィールドです。好きなように配置できます。