In Flex you can use item editor to edit the data in a list based control. You can use default item editing mechanism or you can create your own item editor. However, if you want to add an inline editing mechanism in other components like Text and Label, you have to find a workaround yourself. In this post I will try to explain the way I often use to create in – place editor in my application using view stack.

Using view stack you can create stack of two components viz. the text component and text area/text input component. The click listener is added to the text component and on clicking the text component the selecteIndex or selectedChild property of view stack is changed to show the text editing component.

The simplest of code to accomplish this is shown below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			[Bindable]
			public var testText:String = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
		]]>
	</mx:Script>
	<mx:ViewStack id="editStack" width="100%"  selectedIndex="0" height="100%">
		<mx:Box width="100%" height="100%">
			<mx:Text id="readOnlyTitle" width="100%" fontSize="12" click="{editStack.selectedIndex = 1;if(editArea != null){editArea.setFocus();}}" text="{testText}" />
		</mx:Box>
		<mx:HBox width="100%" verticalAlign="bottom" height="50">
			<mx:TextArea id="editArea" fontSize="12" width="100%" text="{testText}" creationComplete="{editArea.setFocus()}" height="50"/>
			<mx:Button label="Ok" click="testText=editArea.text;editStack.selectedIndex = 0" />
			<mx:Button label="Cancel" click="editArea.text=testText;editStack.selectedIndex = 0" />
		</mx:HBox>
	</mx:ViewStack>
</mx:Application>

Inside Script, I have defined a variable which I will bind to the text property of text and textarea components.

I have created a viewstack which has two containers – one for text component and another for textarea component. The selectedIndex property of viewstack is set to 0 initially which will show only the text component.

On clicking the text component, the selectedIndex property of view stack is changed to 1 which will show textarea component in place of text component and the focus is set to textarea component.

Along with textarea component, two buttons are also shown for user to save or cancel the editing at any time and go back to previous state in which text component is only visible. Adding buttons is not mandatory, user can even use keyboard listener to save or cancel the editing based on the press of ENTER and ESC keys respectively.

The demo is shown below:

Click on the text to edit it.