flex:可编辑标签组件 [英] flex: Editable Label Component
本文介绍了flex:可编辑标签组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在 flex4 中创建一个可编辑的标签.
I am trying to create an editable label in flex4.
为此,我扩展了 textfield 类,因此它包含一个标签控件元素.但是一旦文本字段不可见,我就无法使标签可见.
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.
代码如下所示:
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")
}
}
}
但是如果我将 addChild 更改为 addElement 我会看到以下错误:1180:调用可能未定义的方法 addElement.
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屋!
查看全文