Adobe Flex/Actionscript: editable label - actionscript-3

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

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.

Answer 2

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!