Flex TextInput restrict numbers

The “restrict” property of TextInput control is very useful in restricting input characters.Though restrict=”0-9″ works well for positive numbers, it is not enough for negative and decimal numbers as the user can enter “-” and “.” signs anywhere between the text. NumberInput is a simple class extending Spark TextInput. It has got two properties for controlling the input.

• allowNegative:- Specifies whether negative numbers are permitted. Valid values are true or false
• fractionalDigits:- The maximum number of digits that can appear after the decimal separator. The default value is 0

The base logic is derived from APPDIVISION blog

 

 

package
{
	import flashx.textLayout.operations.InsertTextOperation;

	import spark.components.TextInput;
	import spark.events.TextOperationEvent;

	public class NumberInput extends TextInput
	{
		public function NumberInput()
		{
			updateRegex();
		}

		//regex pattern
		private var regex:RegExp;

		private var _allowNegative:Boolean = true;
		/**
		 *  Specifies whether negative numbers are permitted.
		 *  Valid values are true or false
		 *
		 *  @default true
		 */
		public function set allowNegative(value:Boolean):void
		{
			_allowNegative = value;
			updateRegex();
		}

		private var _fractionalDigits:int = 0;
		/**
		 *  The maximum number of digits that can appear after the decimal
		 *  separator.
		 *
		 *

The default value is 0
		 */
		public function set fractionalDigits(value:int):void
		{
			_fractionalDigits = value;
			updateRegex();
		}

		override protected function childrenCreated():void
		{
			super.childrenCreated();

			//listen for the text change event
			addEventListener(TextOperationEvent.CHANGING, onTextChange);
		}

		public function onTextChange(event:TextOperationEvent):void
		{
			if (regex && event.operation is InsertTextOperation)
			{
				// What will be the text if this input is allowed to happen
				var textToBe:String = "";
				// Check selection
				if (selectionActivePosition > 0)
				{
					textToBe += text.substr(0, selectionActivePosition)
				}
				//append the newly entered text with the existing text
				textToBe += InsertTextOperation(event.operation).text;
				if (selectionAnchorPosition > 0)
				{
					textToBe += text.substr(selectionAnchorPosition, text.length - selectionAnchorPosition);
				}
				var match:Object = regex.exec(textToBe);
				if (!match || match[0] != textToBe)
				{
					// The textToBe didn't match the expression... stop the event
					event.preventDefault();
				}
				//special condition checking to prevent multiple dots
				var firstDotIndex:int = textToBe.indexOf(".");
				if( firstDotIndex != -1)
				{
					var lastDotIndex:int = textToBe.lastIndexOf(".");
					if(lastDotIndex != -1 && lastDotIndex != firstDotIndex)
						event.preventDefault();
				}
			}
		}

		private function updateRegex():void
		{
			var regexString:String = "\\d{0,50}";
			if(_allowNegative)
				regexString = "^\\-?" + regexString;
			else
				regexString = "^" + regexString;
			if(_fractionalDigits > 0 )
				regexString += "\\.?\\d{0," + _fractionalDigits.toString() + "}$";
			else
				regexString += "$";
			regex = new RegExp(regexString);
		}
	}
}

Flex 4 Dropdownlist and Accessibility

Pressing up/down arrow keys when Flex 4 DropdownList has focus changes the selection. Sometimes the user would want to see the list before making the selection.This can be achieved by overriding the keydownHandler and changing the default behaviour to open the drop list if it is not already open.

override protected function keyDownHandler(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.DOWN && !isDropDownOpen)
openDropDown();
else
super.keyDownHandler(event);
}

Flex Formatter Plugin

Flex Formatter is an Eclipse Plugin to provide source code formatting for Adobe Flex code (i.e. Actionscript and MXML).

It can

• Formate code
• Indent Code
• Generate ASDoc comments
• Rearrange AS Code

Here is the screenshot tour of the installation process in Flex Builder 3

Step 1: Begin the installation from the Flex Builder Help menu item.

Step 2: This screenshot show the screen as it initially comes up. In this case you will need to change the radio button to indicate that this is a new install.

Step 3 : This screen will vary depending on the features you have installed already. You want to click on the New Remote Site button.

Step 4: This screen is showing the New Remote Site dialog, filled in with the correct information to install Flex Formatter

Name : Flex Formatter

URL : http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/

Step 5: When you first come back to this screen, if the site you added is NOT selected, be sure to select it before clicking Finish.

Step 6 : This next screen shows all of the features that are available to install.

Step 7: Click the button to accept the license agreement.

Step 8: Confirm the install location

Step 9 : Just a screenshot of the in-process installation.

Step 10 : This screen is saying that the provider cannot be verified . Ignore that and click on Install All

Step 11: Flex Builder needs to be restarted after installing PHPEclipse.

Step 12: When the Flex Builder is restarted, you will see these new buttons in the toolbar if the plugin is successfully installed.

By Default, Ctrl + Shift + F is the command to format code and Ctrl + I is the command to indent code. You can change these commands in Window->Preferences->General->Keys

Code is not formatted the way you expected ? You can change all settings in

Window->Preferences->Flex Formatting

Flex Youtube Interface

Update: 4 Nov 2009

Proxy file is changed again!!! to get the correct flv url.

Thanks to NGCoders for the php proxy.

This is a simple youtube interface created in flex using the as3-youtube-data-api . I also used the Flex Video Player from http://www.fxcomponents.com/ and Kingnare theme from Scalenine.

Right Click to view the Source .

Click here or on the image below to view the app

Flex Coding Conventions

Here is the link to the document which lays out the coding standards for writing open-source Flex framework components in ActionScript 3. Adhering to these standards makes the source code look consistent, well-organized, and professional.

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

Build real-time social apps in Flex

Adobe launched “Cocomo”  which is a Platform as a Service that allows Flex developers to easily add real-time social capabilities into their RIA (rich Internet applications).

For more information click here

Installing PHPEclipse plugin in Flex Builder

Here you will find a screenshot tour of the PHPEclipse installation process in Flex Builder 3

Step 1 :

             Begin the installation from the Flex Builder Help menu item.

        

Step 2 :

             This screenshot show the screen as it initially comes up. In this case you will need to change the radio button to indicate that this is a new install.

Step 3 :

           This screen will vary depending on the features you have installed already. You want to click on the New Remote Site button. If you are behind a proxy and the Flex Builder install mechanism does not work, then you can download a zipped version of the update site and then click the New Local Site button instead. 

Step 4 :

           This screen is showing the New Remote Site dialog, filled in with the correct information to install PHPEclipse

           Name : PHPEclipse 1.2.x

           URL :   http://update.phpeclipse.net/update/stable/1.2.x

 

Step 5:

          When you first come back to this screen, if the site you added is NOT selected, be sure to select it before clicking Finish.

Step 6:

          This next screen shows all of the features that are available to install.

Step 7:

          Click the button to accept the license agreement.

Step 8:

          Confirm the install location

Step 9:

          Just a screenshot of the in-process installation.

Step 10:

            This screen is saying that the provider cannot be verified . Ignore that and click on Install All .Not even Eclipse.org nor IBM sign their features.

 

Step 11:

           Flex Builder needs to be restarted after installing PHPEclipse.

Step 12:

          Finally, after restarting Flex Builder, the first thing you will typically want to do is open the PHPEclipse perspective to check whether it is installed correctly. 

Thats it !! . PHPEclipse is successfully installed.

FLVPlayback in Flex

One thing clearly lacking in Flex is a Videoplayer component like the one found in Flash CS3.  Flex does have a VideoDisplay component , but it do not have controls to interact with video like  play, pause, seek etc.

In few simple steps we can easily use the FLash FLVPlayback in Flex

1. On windows machine go to Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\FLVPlayback and copy the “fl” folder containing the FLVPlayback source and paste it in the flex application’s source folder .
2. Create new actionscript class named Icon.as in the video folder with an empty constructor . This is to get rid of a compiler error like this ” Call to a possibly undefined method Icon. “
3. In the FLVPlayback class on line number 871, wrap the following lines of code in an if statement.


boundingBox_mc.visible = false;
removeChild(boundingBox_mc);
boundingBox_mc = null;

The result will look like this

if(boundingBox_mc){
boundingBox_mc.visible = false;
removeChild(boundingBox_mc);
boundingBox_mc = null;
};

Finally we need do is to copy the Video player controlbar skins . We can find them in this directory    Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 3.0
Thats it !! . We are good to go now . Click on the image below to view a sample ( Right click to view the source )

Free Flex Themes

 The winning themes of the “Skin to Win Challenge” conducted by ScaleNine are now available for download. All the themes are really cool and free to download. Click here to check it out!!

Butterfly in Flex ( Degrafa )

Last year Degrafa posted a SVG Tiger example demostrating the power of <Path> tag. I recently learned how to use that tag and created a simple example using an SVG file dowloaded from here .

This is just mxml code with the “data” copied from the SVG file. The colours can be changed using the ColorPicker on the right. Drag the slider to zoom in and out.

Click here or on the image to view the example
( Right Click to view the Source )