Adobe Flex / Actionscript：可编辑标签

Question

I am working on a project where it would be really nice if we had editbale labels or an area for TextInput that looks like a Label if it isnt hovered with the mouse.

I'm pretty new at Flex, and dont know how to develop a skin. I dont even know if it possible to do this just by skinning.

Anyhow, I found this question from a few months ago but i cant get it working, it just displays a empty white page.

Here the code I used to create a editable Label mentioned in the link above:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:component="com.npacemo.component.*"
           xmlns:skins="skins.*">
<fx:Declarations>
    <!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
</fx:Declarations>
<s:BorderContainer>     
    <component:EditableLabel text="Text 132"  skinClass="skins.EditableLabel" />
</s:BorderContainer>

</s:Application>

Any idea why the displayed page is empty? Or a different approach?

Thanks in advance, markus

Answer 1

I encountered the same problem about this editable label.
I think the root cause was from SkinPart:labelComponent . Inside the skin, the label was like this:

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

Since the width setting was causing a self-reference loop, label would throw the exception. The solution here is just clear the width setting:

<s:Label id="labelComponent" text="{hostComponent.text}"
         alpha.normal="1" alpha.selected="0" 
         visible.normal="true" visible.selected="false"
         verticalCenter="0" maxDisplayedLines="1"
         textDecoration="underline" buttonMode="true"/>

And the component can be displayed now.
I found there's a difference between displaying components in Application and View. In Application , some exceptions are caught automatically, making the process of debugging become more difficult.
Hope this would help!

Answer 2

In a project we were working on we did editable labels by using a textbox and remove background and borders (it will look just like a label and will be editable). In your case you can do this and then on mouseIn you can show the border and background again (making it look like a text box) and then MouseOut with removing til style again.