So what's up with PureMVC Commands anyway?
That is what Jesse Warden (JesterXL) asks the fine folks over at the PureMVC forums. Cliff gives a good rundown on the why/when/how of PureMVC Commands.
PureMVC's relatively light use of commands, when compared to other widely used MVC frameworks, tends to make one think they are doing something wrong. This isn't really the case. Commands are still viable actors in our applications, but many times the shortest route is the best route. PureMVC doesn't force us to use them, but gives us access when we need to.
I generally use PureMVC Commands for actions that can be initiated from several places, as well as for application startup. I've also found them very useful for popups and AIR window management.
Debugging your AIR/Flex application with Arthropod
Arthropod is an external Debug trace window for Flash/Flex/AIR. Drop a simple class into your project and it will accept logging from the application/swf. I'm using it for debugging around the office with our internal project management AIR application with great success.
Form Validation for the Lazy Programmer in Flex
Forms... Any data-centric application is going to have its fair share of them. They are fairly tedious work. Layout out the form, manage the output, validate the output, over and over. Validation is best when it is active, to let the user know that they have made a mistake before they try to submit the data. Optimally the user won't be allowed to continue until the form data is complete and accurate.
Every form I've written carries the same structure for validation, so as a dedicated lazy programmer I wrote a simple FormValidator class to handle the boilerplate.
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 | package com.visualempathy.validators { import flash.display.DisplayObject; import flash.events.EventDispatcher; import flash.events.IEventDispatcher; import mx.events.ValidationResultEvent; import mx.validators.Validator; [Bindable] public class FormValidator extends EventDispatcher { public var formIsValid:Boolean = false; public var validators:Array; private var focusedFormControl:DisplayObject; public function FormValidator(target:IEventDispatcher=null) { super(target); } public function validateForm(event:Event):void { focusedFormControl = event.target as DisplayObject; formIsValid = true; for each( var validator:Validator in validators ) validate(validator); } private function validate(validator:Validator):Boolean { var validatorSource:DisplayObject = validator.source as DisplayObject; var supressEvents:Boolean = validatorSource != focusedFormControl; var event:ValidationResultEvent = validator.validate(null, supressEvents) var currentControlIsValid:Boolean = event.type == ValidationResultEvent.VALID; formIsValid = formIsValid && currentControlIsValid; return currentControlIsValid; } } } |
in the MXML I add an Array structure to hold the Validators, and add the FormValidator like so:
1 2 3 4 5 6 7 8 9 10 | <mx:Array id="validators"> <mx:StringValidator id="studioNameValidator" source="{this.studioNameInput}" property="text" required="true"/> <mx:EmailValidator id="emailValidator" source="{this.emailInput}" property="text" required="true"/> <mx:PhoneNumberValidator id="phoneValidator" source="{this.phoneInput}" property="text" required="true"/> <mx:StringValidator id="addValidator" source="{this.addressInput}" property="text" required="true"/> <mx:StringValidator id="cityValidator" source="{this.cityInput}" property="text" required="true"/> <mx:StringValidator id="stateValidator" source="{this.stateInput}" minLength="2" maxLength="2" property="text" required="true"/> <mx:ZipCodeValidator id="zipcodeValidator" source="{this.zipcodeInput}" property="text" required="true"/> </mx:Array> <validators:FormValidator id="formValidator" validators="{this.validators}"/> |
This allows you to add an arbitrary number of validators. Then in the various inputs:
1 | <mx:TextInput id="studioNameInput" text="{this.studio.name}" width="100%" change="this.formValidator.validateForm(event);"/> |
with the button to commit the changes enabled only when the form is valid:
1 | <mx:Button id="saveChangesBtn" label="save" click="handleSaveChanges()" enabled="{this.formValidator.formIsValid}"/> |
It reduces some of the pain and tedium with the process of creating forms, which is always welcome.
