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.

Recently I had a problem in making fade effect work on text component. After few search in the internet found a solution to this problem, in fact a workaround.

Actually, if we apply Fade and Rotate effects to text component or any controls using text using system font, nothing happens with the text. Instead of fading effect, one will come across with single instant where the text appears and disappears depending upon the nature of fade effect. You can verify this using this simple code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
	<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
	<mx:Label id="testLbl" x="114" y="96" text="testing fading effect" showEffect="{fadeIn}" hideEffect="{fadeOut}"/>
	<mx:Button x="104" y="137" label="Fade In" click="{testLbl.visible=true}"/>
	<mx:Button x="177" y="137" label="Fade Out" click="{testLbl.visible=false}"/>
</mx:Application>

For the fading effect to work with text component, we have to embed the font as shown below:

…………………….
<mx:Style>
		@font-face{
			src: url("../assets/ARIAL.TTF");
			fontFamily:"myFont";
		}
</mx:Style>
..........
	<mx:Label id="testLbl" x="114" y="96" fontFamily="myFont" text="testing fading effect" showEffect="{fadeIn}" hideEffect="{fadeOut}"/>
	
..........

Just embed a font as shown above and add a property to the label component “fontFamily” specifying the embedded font. This time you can see that the fading effect works.

Another work around is to apply Blur filter to the text before applying any effects to it. This way you don’t require to embed the font.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
	<mx:Script>
		<![CDATA[
			private function applyBlurFilter():void {
			  var blurfilter:BlurFilter = new BlurFilter(0,0,0);
			  var filters:Array = new Array();
			  filters.push(blurfilter);
			  testLbl.filters = filters;
			}
		]]>
	</mx:Script>
	<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
	<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
	<mx:Label id="testLbl" x="114" y="96" text="testing fading effect" showEffect="{fadeIn}" hideEffect="{fadeOut}" creationComplete="{this.applyBlurFilter()}"/>
	<mx:Button x="104" y="137" label="Fade In" click="{testLbl.visible=true}"/>
	<mx:Button x="177" y="137" label="Fade Out" click="{testLbl.visible=false}"/>
</mx:Application> 

It’s been few months I have been working on ActionScript and I was pretty disappointed by the fact that ActionScript does not support function overloading. I wonder why that is. Function overloading is what I have been using very often while working in Java and C#.

However, unavailability of constructor and method overloading does not handicap Actionscript 3. It is still powerful programming language enhanced architecturally and conceptually compared to previous version.
There are two workarounds I have known so far for the unavailability of function overloading in ActionScript3.

• Using default parameters which will allow to call function with different number of parameters
• Using …..(rest) parameter i.e. ellipses followed by the name

The first one is pretty easy. The function should contain all the required parameters with default value associated with the parameters. For example:

public function foo(param1:int = 0, param2:int = 0, param3:int = 0):void{
//do something
}
foo(2); //only param1 is provided. param2 and param3 will take the default value
foo(4,5); //param3 will take the default value

The second solution is to use rest parameter. The rest parameter is denoted by using ellipses followed by the name of the parameter as shown below:

public function foo(…..params):void{
//do something
}

Using rest parameter allows a function to accept any number of comma delimited arguments which will be available to function in the form of array. For example:

foo( 2,3,4,5);
All these arguments will be available to function as array such that first argument can be accessed using params[0] and so on.

The main issue with rest parameter is type safety. Using reset parameter means you will lose compile-time type safety.

Though there are few workarounds, I still prefer native method overload support which I hope will be introduced in future version.