Building Blocks It is not enough for code to work. Code that works is often badly broken

Continuous Scrolling Thumbnail Component for Flex

This post continues to be the most popular on this space after a year and a half. I've never been particularly fond of the implmenetation. Tightly coupled to very specific data sets and not really anything like a Flex component. It is setup more like an application (because it was pulled out of an application and generalized).

I've finally found the opportunity to rewrite the continuous scrolling thumbnail view portion of the slideshow and I am much happier with the results. Now, instead of resembling an application it is structured like a standard Flex 3 List based component. You supply it with a dataProvider and an itemRenderer (IListItemRenderer) and it acts as you would expect it to.

This approach is much nicer, as the data is cleanly decoupled from the component implementation and it opens up the doors for reuse.

The code is available on Github. If you have any suggestions or would like to add to the component, fork it and let me know!

Pleat Menu – Flex Component (draft)

The Pleat menu that is used in Buzzword is really sweet. I wanted to emulate in an attempt to get a reusable component along the same lines. This is the first draft at my attempt, and it admittedly needs some work, but it is still useful, even in its current state.

Here's the source.

One of my goals with this is to have all the actual controls in the Pleat available at the top level. This makes it a lot easier to capture in PureMVC (or your event/notification system of choice) and doesn't bury the components. I want to go in and refactor it some more to emulate the Adobe set of Flex components. We'll see if I have the time

the icons are from the awesome fugue set found here.

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.

ImageSwap (crossfade) Flex Component

I needed a component that would work in my slideshow component and give a decent crossfade while letting the user know that something was going on. I used TweenLite for the tweening, and it works pretty well. It dispatches an 'imageLoaded' event when the image swap has completed. I needed this so that the slideshow timer can resume. It pauses when the image starts loading because of various image sizes/connection speeds. Pretty simple, but it is a lot nicer than the harsh transition (or lack of) in the current slideshow.

Source Here.