Posts Tagged ‘cs4’
Easy form validation for Flash
As a professional Flash and Flex developer, I wrote lots of handy utilities that I use on a daily basis when developing Flash websites or Flex applications. I developed my own library containing base classes and utilities that allow me to setup Flash website projects in no time. I call it the “viplib”.
I plan to releasing some of that code. And here’s a first code snippit:
In Flex, it’s easy to do form validation using the various validator components. But for Flash, one has to write his own code. Here’s a simple form-validation class that not only checks empty fields and invalid email entries, but also highlights those fields when their content is invalid. Using this class you can validate a form and highlight the fields that are invalid with only 1 line of code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | //copyright Ward De Langhe //Very Interactive People package be.viplib.util { import flash.display.Sprite; import flash.events.FocusEvent; import flash.text.TextField; public class FormValidator { private var _target:Sprite; private var _requiredFields:Array; private var _emailFields:Array; private var _normalColor:Number; private var _invalidColor:Number; private var _requiredMessage:String; private var _invalidEmailMessage:String; public function FormValidator(target:Sprite,requiredFields:Array, emailFields:Array,normalColor:Number=0x000000,invalidColor:Number=0xff0000,requiredFieldMessage:String="required field",invalidEmailMessage:String="invalid email") { _target=target; _requiredFields=requiredFields; _emailFields=emailFields; _normalColor=normalColor; _invalidColor=invalidColor; _requiredMessage=requiredFieldMessage; _invalidEmailMessage=invalidEmailMessage; } public function set invalidMailMessage(value:String):void{ _invalidEmailMessage=value; for(var i:Number=0;i<_emailFields.length;i++){ var field:TextField=_target.getChildByName(_emailFields[i]) as TextField; if(field.text==_invalidEmailMessage){ field.text=value; } } } public function set requiredMessage(value:String):void{ _requiredMessage=value; for(var i:Number=0;i<_requiredFields.length;i++){ var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField; if(field.text==_requiredMessage){ field.text=value; } } } public function validate():Boolean{ var valid:Boolean=true; for(var i:Number=0;i<_requiredFields.length;i++){ var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField; if(field.text=="" || field.text== _requiredMessage || field.text==_invalidEmailMessage || (field.text.length==1 && field.text.charCodeAt(0)==13)){ field.textColor=_invalidColor; field.text=_requiredMessage; field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); valid=false; } } for(i=0;i<_emailFields.length;i++){ field=_target.getChildByName(_emailFields[i]) as TextField; if(field.textColor!=_invalidColor){ if(!MailValidator.validateEmail(field.text)){ field.textColor=_invalidColor; field.text=_invalidEmailMessage; field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); valid=false; } } } return valid; } private function fieldFocus_handler(evt:FocusEvent):void{ for(var i:Number=0;i<_requiredFields.length;i++){ var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField; if(field.textColor==_invalidColor){ field.textColor=_normalColor; field.text=""; field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); } } for(i=0;i<_emailFields.length;i++){ field=_target.getChildByName(_emailFields[i]) as TextField; if(field.textColor==_invalidColor){ field.textColor=_normalColor; field.text=""; field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); } } } } } |
This class uses my mailvalidator utility to validate the email adresses. It’s a simple utility which checks if a e-mailaddress is valid using a regular expression.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //copyright Ward De Langhe //Very Interactive People package be.viplib.util { public class MailValidator { public static function validateEmail(str:String):Boolean { var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/; var result:Object = pattern.exec(str); if(result == null) { return false; } return true; } } } |
You can download example source code here. It’s a simple form containing a couple of required fields, and an email field. Here’s how this sample looks when compiled:
Click the “validate” button to see the validation class do it’s job.
At my day job (http://www.epyc.be), we developed a framework for rendering exercises (drag and drop, select text, multiple choice, fill in,… you name it, we got it). One of the features of this framework is font libraries on exercise level. In this way we can use different fonts and only load them when needed. If in an application we have for example 100 multiple choice questions that need font A, and only one of those questions needs font B, font B will be loaded when that specific exercise is rendered. Once loaded they are cached in memory, in case another exercise needs the same font library.
When an exercise is loaded, the first thing the base class does is loading the necessary font library in order to render the exercise. In the exercise logic, whenever we need a font, we can create one like this:
1 2 3 4 | var font:Font=FontMananger.getInstance().getFont( fontName, fontLibrary ); |
In theory, this would also allow the use of foreign character sets…. Only in theory, because when we finally needed this feature, we ran into a “little” problem.
A font library in our system is an empty swf file with some embedded fonts. We normally create these libraries by clicking “new font” in the library:
This workflow worked fine until we had to create a Polish version of one of our projects. The problem is that it is impossible to define which characters you want to embed when embedding fonts in the library. Flash only embeds a basic char set. Strangly enough, when embedding a font for a specific text field, you CAN define the extra character set :
So, it looks like the folks at Adobe simply forgot about this. We tried everything, but no success using the Flash IDE.
Eventually we had to switch to Flexbuilder to create the font libraries. Here’s how we did this:
1 2 3 4 5 6 7 8 9 10 11 12 | package { import flash.display.Sprite; import flash.text.Font; public class FontLib extends Sprite { [Embed(systemFont = "Arial", fontName = "Arial", mimeType = "application/x-font", unicodeRange = "U+0-U+00FF,U+0100-U+01FF,U+0200-U+02FF" )] public var DefaultFont:Class; public function FontLib() { } } } |
As you can see, in Flex we can define the Unicode ranges that need to be embedded. In this way we can create font libraries containing Baltic or Cyrillic character sets, or even Chinese!
There’s also a little problem with this workflow: Since the DefaultFont class is defined inside the FontLib application class, the compiler internally changes the class name to “FontLib_DefaultFont”. After loading this font library, and we want to create an instance of a certain font class, we have to add “FontLib_” before the class name.
Conclusion: Adobe, please add functionality to the Flash IDE so we can define extra character sets to be embedded when embedding fonts in the library!
If anyone knows a way of doing this by using the Flash IDE, please let me know.
