This was a presentation on Custom Formatters, Validators, and Effects for Flex 2.

7. NumberFormatter import mx.formatters.NumberFormatter; private var myString:String = "1234567" ; private function format():String{ var numFormatter:NumberFormatter = new NumberFormatter(); return numFormatter.format(myString); } Demo

17. Custom Format String import mx.formatters.SwitchSymbolFormatter; private var myString:String = "1234567" ; private function format():String{ var ssFormatter:SwitchSymbolFormatter = new SwitchSymbolFormatter(); return ssFormatter.formatValue( "##-###-##" ,myString); } Demo

24. Custom Format Characters import mx.formatters.SwitchSymbolFormatter; private var myString:String = "1234567" ; private function format():String{ var ssFormatter:SwitchSymbolFormatter = new SwitchSymbolFormatter( "*" ); return ssFormatter.formatValue( "#**-**-***" ,myString); } Demo

31. ReverseFormatter class package com.everythingflex.flex.formatters { import mx.formatters.Formatter // Custom formatters must extend mx.formatters.Formatter public class ReverseFormatter extends Formatter { public function ReverseFormatter() { super (); } // Custom formatters must override format(). override public function format(formatObj:Object):String{ // ADD OVERRIDE HERE } } }

32. ReverseFormatter override format method // Custom formatters must override format(). override public function format(formatObj:Object):String{ if (formatObj.length == 0) { // return empty string and set error property if string //has zero length. error= "Can not format an empty String" ; return "" } else { error= null ; var returnString:String = "" ; // loop through value and build string in reverse for ( var i:Number=formatObj.length; i>=0; i--){ returnString = returnString + formatObj.charAt(i); } return returnString; }

33. Using ReverseFormatter import ReverseFormatter; private var myString:String = "Rich Tretola" ; private function format():String{ var reverseFormatter:ReverseFormatter = new ReverseFormatter(); return reverseFormatter.format(myString); } Demo

38. PasswordValidator class package com.everythingflex.flex.validators { import mx.validators.Validator; import mx.validators.ValidationResult; public class PasswordValidator extends Validator { private var results:Array; public function PasswordValidator() { super (); } // Override the doValidation() method. override protected function doValidation(value:Object):Array { // ADD OVERRIDE HERE } } }

39. Override doValidation // Override the doValidation() method. override protected function doValidation(value:Object):Array { results = []; // Call super's doValidation(). results = super .doValidation(value); // Return if super's doValidation contains // errors (required would be an example). if (results.length > 0){ return results; } // *****Add Custom Validation Here***** return results; }

40. Now add custom validation // Check for min length if (dataString.length < 6){ results.push( new ValidationResult( true , null , &quot;Short&quot; , &quot;Password must be at least 6 characters.&quot; )); return results; } var dataString:String = String(value); // Check for max length (this can be set in the text component's maxChars property). if (dataString.length > 10){ results.push( new ValidationResult( true , null , &quot;Long&quot; , &quot;Password must be no larger than 10 characters.&quot; )); return results; }

41. More custom validation // Check for at least 1 upper case letter. if (dataString.search( &quot;[A-Z]&quot; )<0) { results.push( new ValidationResult( true , null , &quot;Upper&quot; , &quot;Passwords must contain at least one upper case letter.&quot; )); return results; } // Check for at least 1 lower case letter. if (dataString.search( &quot;[a-z]&quot; )<0) { results.push( new ValidationResult( true , null , &quot;Lower&quot; , &quot;Passwords must contain at lease one lower case letter.&quot; )); return results; } // Check for at least 1 number. if (dataString.search( &quot;[0-9]&quot; )<0) { results.push( new ValidationResult( true , null , &quot;Number&quot; , &quot;Passwords must contain at least one number.&quot; )); return results; }

42. Results Demo

49. ScaleEffect Class package com.everythingflex.flex.effects { import mx.effects.Effect; import mx.effects.EffectInstance; import mx.effects.IEffectInstance; public class ScaleEffect extends Effect { // Define scaleTo parameter public var scaleTo:Number; public function ScaleEffect(targetObj:Object = null ){ super (targetObj); instanceClass= ScaleEffectInstance; } // ADD Override getAffectedProperties() // ADD Override initInstance() } }

50. ScaleEffect Overrides // override getAffectedProperties() and // pass the properties effected override public function getAffectedProperties():Array{ return [ &quot;scaleX,scaleY&quot; ]; } // Override initInstance() override protected function initInstance(inst:IEffectInstance): void { super .initInstance(inst); ScaleEffectInstance(inst).scaleTo = scaleTo; }

52. ScaleEffectInstance Class package com.everythingflex.flex.effects { import mx.effects.EffectInstance; public class ScaleEffectInstance extends EffectInstance { // Custom Parameter public var scaleTo:Number; public function ScaleEffectInstance(targetObj:Object) { super (targetObj); } // ADD Override play() method. // ADD Override reverse() method. } }

53. ScaleEffectInstance Overrides // Override play() method. override public function play(): void { super .play(); target.scaleX=scaleTo; target.scaleY=scaleTo; } // Override reverse() method. override public function reverse(): void { target.scaleX=1; target.scaleY=1; }

54. Results Demo

59. MoveBounceTweenEffect Class package com.everythingflex.flex.effects { import mx.effects.TweenEffect; import mx.effects.EffectInstance; import mx.effects.IEffectInstance; public class MoveBounceTweenEffect extends TweenEffect{ // Define xFrom and xTo parameters public var xFrom:Number; public var xTo:Number; public function MoveBounceTweenEffect(targetObj:Object = null ){ super (targetObj); instanceClass= MoveBounceTweenEffectInstance; } // ADD Override getAffectedProperties() // ADD Override initInstance() }

60. MoveBounceTweenEffect Overrides // override getAffectedProperties() and // pass the properties effected override public function getAffectedProperties():Array{ return [ &quot;x&quot; ]; } // Override initInstance() override protected function initInstance(inst:IEffectInstance): void { super .initInstance(inst); MoveBounceTweenEffectInstance(inst).xFrom = xFrom; MoveBounceTweenEffectInstance(inst).xTo = xTo; }

62. MoveBounceTweenEffectInstance package { import mx.effects.effectClasses.TweenEffectInstance; import mx.effects.Tween; public class MoveBounceTweenEffectInstance extends TweenEffectInstance { // Move parameters public var xFrom:Number; public var xTo:Number; public function MoveBounceTweenEffectInstance(targetObj:Object){ super (targetObj); } // Override play() method. override public function play(): void { super .play(); // Create the Tween object var tween:Tween = createTween( this , xFrom, xTo, duration); } // Override onTweenUpdate() method. override public function onTweenUpdate(val:Object): void { target.x = val; } // Override onTweenEnd() method. override public function onTweenEnd(val:Object): void { // call super.onTweenEnd(). super .onTweenEnd(val); } } }

63. Results Demo

66. Easing Function Easing function was borrowed from the Adobe docs private function bounceFunction(t:Number, b:Number, c:Number, d:Number):Number { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t-=(1.5/2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t-=(2.25/2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t-=(2.625/2.75)) * t + .984375) + b; } } MoveBounceTweenEffectInstance(inst).easingFunction = bounceFunction; Add it to the initInstance method

67. Results Demo

69. Wrap Up Hopefully, if I have done my job correctly you will now see the benefits of using custom classes for formatters, validators, and effects.

78. Contact and Downloads Rich Tretola [email_address] or [email_address] Pre sentation and Sour ce available at: http://blog.everythingflex.com