flex：可编辑的标签组件 [英] flex: Editable Label Component
本文介绍了flex：可编辑的标签组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
代码如下所示：
package unimap.components
{
import spark.components.Label;
导入spark.components.TextInput;
公共类SmartTextInput扩展TextInput
{
private var _label：Label;
public function SmartTextInput（）
{
super（）;
public override function set editable（value：Boolean）：void
{
super.editable = value;
if（value == false）
{
_label = new Label（）;
_label.x = this.x;
_label.y = this.y;
_label.width = this.width;
_label.height = this.height;
_label.text =Home;
addChild（_label）; //这段代码错误
错误代码//错误：addChild（）在这个类中不可用。相反，使用addElement（）或修改/ /皮肤，如果你有。
}
super.visible = false;
trace（Editable）
}
}
}
但是，如果我要改变addChild addElement，我会看到以下错误：
1180：调用一个可能未定义的方法addElement。
有人可以建议我做错了吗？
解决方案
这是我在生产系统中使用的一个解决方案：
{
import flash.events.Event;
import flash.events.FocusEvent;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;
导入mx.core.UIComponent;
导入spark.components.Label;
导入spark.components.PopUpAnchor;
导入spark.components.TextInput;
导入spark.components.supportClasses.SkinnableComponent;
$ {
$ {b $ {
[SkinState（正常）]
[SkinState（选择）]
[SkinPart（required =true）]
public var labelComponent：Label;
[SkinPart（required =true）]
public var inputAnchor：PopUpAnchor;
[SkinPart（required =true）]
public var inputComponent：UIComponent;
[Bindable]
public var text：String;
public function EditableLabel（）
{
addEventListener（MouseEvent.CLICK，handleDisplayLabelClick）;
保护函数partAdded（partName：String，instance：Object）：void
{
if（instance == labelComponent）
{
labelComponent.addEventListener（MouseEvent.CLICK，handleDisplayLabelClick）;
else if（instance == inputComponent）
{
inputComponent.addEventListener（Event.CHANGE，handleInputComponentChange）;
inputComponent.addEventListener（KeyboardEvent.KEY_DOWN，handleTextInputKeyDown）;
inputComponent.addEventListener（FocusEvent.FOCUS_OUT，handleInputComponentFocusOut）;
$ b private function handleInputComponentChange（e：Event）：void
{
text =（inputComponent as TextInput）.text;
dispatchEvent（e.clone（））;
private function handleDisplayLabelClick（event：MouseEvent）：void
{
skin.currentState =selected;
stage.addEventListener（MouseEvent.CLICK，handleStageClick）;
private function handleStageClick（e：MouseEvent）：void
{
if（！inputComponent.hitTestPoint（stage.mouseX，stage.mouseY））
{
stage.removeEventListener（MouseEvent.CLICK，handleStageClick）;
skin.currentState =normal;
$ b private function handleTextInputKeyDown（event：KeyboardEvent）：void
{
if（event.charCode == Keyboard.ENTER）
{
stage.removeEventListener（MouseEvent.CLICK，handleStageClick）;
skin.currentState =normal;
private function handleInputComponentFocusOut（event：FocusEvent）：void
{
stage.removeEventListener（MouseEvent.CLICK，handleStageClick）;
skin.currentState =normal;
这是一个示例皮肤组件：
<？xml version =1.0encoding =utf-8？>
xmlns：s =library：//ns.adobe.com/flex/spark
xmlns：mx =library：//ns.adobe.com/flex/mx>
<！ - 主机组件 - >
< fx：元数据>
[HostComponent（com.npacemo.component.EditableLabel）]
< / fx：Metadata>
- SkinParts
name = inputComponent，type = mx.core.UIComponent，required = true
name = labelComponent，type = spark.components.Label，required = true
- >
< s：州>
< s：转换>
< / s：转换>
alpha.normal =0alpha.selected =1
enabled.normal = falseenabled.selected =true
width ={labelComponent.width + 20}focusSkin ={null}
contentBackgroundColor =0xFBFCA4borderVisible =false
fontFamily =FuturafontSize =12textAlign =left>
< s：filters>
< / s：TextInput>
< / s：PopUpAnchor>
可见.normal =truevisible.selected =false
verticalCenter =0width ={this.width + 20}maxDisplayedLines =1
textDecoration =underlinebuttonMode =真/>
< / s：Skin>
I am trying to create an editable label in flex4.
To do it I am extending the textfield class, so it contains a label control element. But I am failing to make a label visible, once the text field gets invisible.
The code looks this way:
package unimap.components
{
import spark.components.Label;
import spark.components.TextInput;
public class SmartTextInput extends TextInput
{
private var _label:Label;
public function SmartTextInput()
{
super();
}
public override function set editable(value:Boolean):void
{
super.editable = value;
if (value == false)
{
_label = new Label();
_label.x = this.x;
_label.y = this.y;
_label.width = this.width;
_label.height = this.height;
_label.text = "Home";
addChild( _label ); // This lines fail the code with error
// Error: addChild() is not available in this class. Instead, use addElement() or modify //the skin, if you have one.
}
super.visible = false;
trace("Editable")
}
}
}
But if I would change addChild to addElement I will see the following error: 1180: Call to a possibly undefined method addElement.
Can somebody advice what I am doing incorrectly?
解决方案
Here's a solution I use in production systems:
package com.npacemo.component
{
import flash.events.Event;
import flash.events.FocusEvent;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;
import mx.core.UIComponent;
import spark.components.Label;
import spark.components.PopUpAnchor;
import spark.components.TextInput;
import spark.components.supportClasses.SkinnableComponent;
[Event(name="change", type="flash.events.Event")]
public class EditableLabel extends SkinnableComponent
{
[SkinState("normal")]
[SkinState("selected")]
[SkinPart(required="true")]
public var labelComponent:Label;
[SkinPart(required="true")]
public var inputAnchor:PopUpAnchor;
[SkinPart(required="true")]
public var inputComponent:UIComponent;
[Bindable]
public var text:String;
public function EditableLabel()
{
addEventListener(MouseEvent.CLICK, handleDisplayLabelClick);
}
override protected function partAdded(partName:String, instance:Object):void
{
if (instance == labelComponent)
{
labelComponent.addEventListener(MouseEvent.CLICK, handleDisplayLabelClick);
}
else if (instance == inputComponent)
{
inputComponent.addEventListener(Event.CHANGE, handleInputComponentChange);
inputComponent.addEventListener(KeyboardEvent.KEY_DOWN, handleTextInputKeyDown);
inputComponent.addEventListener(FocusEvent.FOCUS_OUT, handleInputComponentFocusOut);
}
}
private function handleInputComponentChange(e:Event):void
{
text = (inputComponent as TextInput).text;
dispatchEvent(e.clone());
}
private function handleDisplayLabelClick(event:MouseEvent):void
{
skin.currentState = "selected";
stage.addEventListener(MouseEvent.CLICK, handleStageClick);
}
private function handleStageClick(e:MouseEvent):void
{
if (!inputComponent.hitTestPoint(stage.mouseX, stage.mouseY))
{
stage.removeEventListener(MouseEvent.CLICK, handleStageClick);
skin.currentState = "normal";
}
}
private function handleTextInputKeyDown(event:KeyboardEvent):void
{
if (event.charCode == Keyboard.ENTER)
{
stage.removeEventListener(MouseEvent.CLICK, handleStageClick);
skin.currentState = "normal";
}
}
private function handleInputComponentFocusOut(event:FocusEvent):void
{
stage.removeEventListener(MouseEvent.CLICK, handleStageClick);
skin.currentState = "normal";
}
}
}
And this is a sample skin component:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("com.npacemo.component.EditableLabel")]
</fx:Metadata>
<!-- SkinParts
name=inputComponent, type=mx.core.UIComponent, required=true
name=labelComponent, type=spark.components.Label, required=true
-->
<s:states>
<s:State name="normal"/>
<s:State name="selected" enterState="inputComponent.setFocus(); inputComponent.selectRange(inputComponent.text.length, inputComponent.text.length);"/>
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="*" autoReverse="true">
<s:Fade targets="{[labelComponent, inputComponent]}" duration="100"/>
</s:Transition>
</s:transitions>
<s:PopUpAnchor id="inputAnchor" x="-1" y="-7" displayPopUp.normal="false" displayPopUp.selected="true">
<s:TextInput id="inputComponent" text="{hostComponent.text}"
alpha.normal="0" alpha.selected="1"
enabled.normal="false" enabled.selected="true"
width="{labelComponent.width + 20}" focusSkin="{null}"
contentBackgroundColor="0xFBFCA4" borderVisible="false"
fontFamily="Futura" fontSize="12" textAlign="left">
<s:filters>
<s:DropShadowFilter angle="135" alpha="0.5" blurX="10" blurY="10"/>
</s:filters>
</s:TextInput>
</s:PopUpAnchor>
<s:Label id="labelComponent" text="{hostComponent.text}"
alpha.normal="1" alpha.selected="0"
visible.normal="true" visible.selected="false"
verticalCenter="0" width="{this.width+20}" maxDisplayedLines="1"
textDecoration="underline" buttonMode="true"/>
</s:Skin>
这篇关于flex：可编辑的标签组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
