Flex TextInput restrict numbers

June 18, 2011 Leave a comment

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); } } }

Categories: Flex Tags: , , ,

Flex 4 Dropdownlist and Accessibility

April 26, 2011 Leave a comment

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);
}

Categories: Flex

Flex Formatter Plugin

November 24, 2009 Leave a comment

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

Categories: Flex

Flex Youtube Interface

February 2, 2009 15 comments

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

fxtube

Categories: Flex, youtube

Flex Coding Conventions

January 30, 2009 Leave a comment

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

Categories: Flex

Build real-time social apps in Flex

January 22, 2009 Leave a comment

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

Categories: Flex Tags:

Installing PHPEclipse plugin in Flex Builder

November 5, 2008 10 comments

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.

1        

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.

2

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. 

3

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

 41

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.

5

Step 6:

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

6

Step 7:

          Click the button to accept the license agreement.

7

Step 8:

          Confirm the install location

8

Step 9:

          Just a screenshot of the in-process installation.

9

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.

 

10

Step 11:

           Flex Builder needs to be restarted after installing PHPEclipse.

11

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. 

12

Thats it !! . PHPEclipse is successfully installed.