スキン付きの Spark TextInput があります。このスキンには 3 つの状態があり、リッスンしたイベントに応じて状態を変更できる必要があります。
TextInput のホルダーは、ユーザーが特定の場所をクリックしたときにイベントを送出する Panel です。
そのようなイベントを聞く方法がわかりません。
Panel 内の textInput:
<s:TextInput id="nombre" x="10" y="23" width="264" borderVisible="false"
chromeColor="#791111" color="#741111" contentBackgroundColor="#ECECEC"
focusColor="#6E1212" fontWeight="bold"
skinClass="skins.NormalInputText"
text="@{clientesModel.datosCliente.nombre}"/>
およびスキン NormalInputText:
<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" currentState="normal"
creationComplete="init()">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TextInput")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import mx.core.FlexVersion;
private var paddingChanged:Boolean;
/* Define the skin elements that should not be colorized. */
static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "border"];
/* exclusions before Flex 4.5 for backwards-compatibility purposes */
static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay"];
public function init():void {
parent.addEventListener('panel_mode_edit', editMode);
parent.addEventListener('panel_mode_query', queryMode);
parent.addEventListener('panel_mode_new', newMode);
}
private function editMode(evt:Event):void {
this.currentState = 'editing';
}
private function queryMode(evt:Event):void {
this.currentState = 'normal';
}
private function newMode(evt:Event):void {
this.currentState = 'adding';
}
override public function get colorizeExclusions():Array {
// Since border is styleable via borderColor, no need to allow chromeColor to affect
// the border. This is wrapped in a compatibility flag since this change was added
// in Flex 4.5
if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
{
return exclusions_4_0;
}
return exclusions;
}
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];
/**
* @private
*/
override public function get contentItems():Array {return contentFill};
/**
* @private
*/
override protected function commitProperties():void
{
super.commitProperties();
if (paddingChanged)
{
updatePadding();
paddingChanged = false;
}
}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == true)
{
border.visible = true;
shadow.visible = true;
background.left = background.top = background.right = background.bottom = 1;
textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
if (promptDisplay)
{
promptDisplay.setLayoutBoundsSize(unscaledWidth - 2, unscaledHeight - 2);
promptDisplay.setLayoutBoundsPosition(1, 1);
}
}
else
{
border.visible = false;
shadow.visible = false;
background.left = background.top = background.right = background.bottom = 0;
textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
if (promptDisplay)
{
promptDisplay.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
promptDisplay.setLayoutBoundsPosition(0, 0);
}
}
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
/**
* @private
*/
private function updatePadding():void
{
if (!textDisplay)
return;
// Push padding styles into the textDisplay
var padding:Number;
padding = getStyle("paddingLeft");
if (textDisplay.getStyle("paddingLeft") != padding)
textDisplay.setStyle("paddingLeft", padding);
padding = getStyle("paddingTop");
if (textDisplay.getStyle("paddingTop") != padding)
textDisplay.setStyle("paddingTop", padding);
padding = getStyle("paddingRight");
if (textDisplay.getStyle("paddingRight") != padding)
textDisplay.setStyle("paddingRight", padding);
padding = getStyle("paddingBottom");
if (textDisplay.getStyle("paddingBottom") != padding)
textDisplay.setStyle("paddingBottom", padding);
if (!promptDisplay)
return;
padding = getStyle("paddingLeft");
if (promptDisplay.getStyle("paddingLeft") != padding)
promptDisplay.setStyle("paddingLeft", padding);
padding = getStyle("paddingTop");
if (promptDisplay.getStyle("paddingTop") != padding)
promptDisplay.setStyle("paddingTop", padding);
padding = getStyle("paddingRight");
if (promptDisplay.getStyle("paddingRight") != padding)
promptDisplay.setStyle("paddingRight", padding);
padding = getStyle("paddingBottom");
if (promptDisplay.getStyle("paddingBottom") != padding)
promptDisplay.setStyle("paddingBottom", padding);
}
/**
* @private
*/
override public function styleChanged(styleProp:String):void
{
var allStyles:Boolean = !styleProp || styleProp == "styleName";
super.styleChanged(styleProp);
if (allStyles || styleProp.indexOf("padding") == 0)
{
paddingChanged = true;
invalidateProperties();
}
}
]]>
</fx:Script>
<fx:Script>
<![CDATA[
/**
* @private
*/
private static const focusExclusions:Array = ["textDisplay"];
/**
* @private
*/
override public function get focusSkinExclusions():Array { return focusExclusions;};
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="editing" />
<s:State name="adding" />
<s:State name="disabled" stateGroups="disabledStates"/>
<s:State name="normalWithPrompt"/>
<s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
</s:states>
<!-- border -->
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
<s:stroke>
<!--- @private -->
<s:SolidColorStroke id="borderStroke" weight="0" />
</s:stroke>
</s:Rect>
<!-- fill -->
<!--- Defines the appearance of the TextInput component's background. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1">
<s:fill>
<!--- @private Defines the background fill color. -->
<s:SolidColor id="bgFill" color="#ebebeb" />
</s:fill>
</s:Rect>
<!-- shadow -->
<!--- @private -->
<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>
<!-- text -->
<!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:RichEditableText id="textDisplay"
verticalAlign="middle"
widthInChars="10"
color.normal="#999999"
color.editing="#29ABE2"
color.adding="#D67A1E"
left="1" right="1" top="1" bottom="1" />
<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
<s:Label id="promptDisplay" maxDisplayedLines="1"
verticalAlign="middle"
mouseEnabled="false" mouseChildren="false"
includeIn="normalWithPrompt,disabledWithPrompt"
includeInLayout="false"
color.normal="#999999"
color.editing="#29ABE2"
color.adding="#D67A1E"
/>
私はparent.addEventListener('panel_mode_edit', editMode);を使用します。イベントをリッスンするためですが、機能しません。
どうしたの？
更新：
イベントのディスパッチ:
panelClientes.dispatchEvent(new Event("panel_mode_query", true, true));
TextInput スキン内:
public function init():void {
hostComponent.addEventListener('panel_mode_edit', editMode);
hostComponent.addEventListener('panel_mode_query', queryMode);
hostComponent.addEventListener('panel_mode_new', newMode);
}
private function editMode(evt:Event):void {
this.currentState = 'editing';
}
private function queryMode(evt:Event):void {
this.currentState = 'normal';
}
private function newMode(evt:Event):void {
this.currentState = 'adding';
}