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!

We need mockups. They allow us to communicate with developers, clients, users and everybody in between in a common language. I'm a big fan of the Sharpie and a pad of paper. Balsamiq Mockups has created a really great piece of software to speed up the mockup process.

I'm also a big fan of mind maps. Using Balsamiq feels a lot like mind mapping, but with UI structures. It opens the door for new workflows. For me a new project will now consist of the mind map -> Balsamiq generated mockups -> refined wireframes -> implementation.

Balsamiq allows you to save your mockups, both in an application specific XML format (BMML) and as png images. The png files are great for printing scratch sheets from templates that you have mocked up. These are extremely useful for meetings and annotation with the trusty pen.

One thing I really hope they consider for future versions is some sort of API for extending the available widgets. it would be great to build on the mockupstogo community with lower-level user generated components. The ability to share fully mocked components is awesome, but I always want more control.

(edit) I thought that I would add that after playing a bit more I found that you can import your own 'widgets' using the Image object. It also lets you sketch an image on the fly, effectively allowing unlimited custom objects. Sweet.

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.

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.

My screens get a bit crowded sometimes, especially when dealing with forms. Users want to be able to see additional information, but there is just no place to put it. The data is dynamic though, so the toolTip needs to change based on the currently selectedItem of the ComboBox. With a DataGrid, for example, you have a showDataTip property on a column and can assign a dataTipFunction. There is no similar function in the ComboBox, but it is easy enough to add. I'm also using the HtmlToolTip class for a little extra style in the ToolTip itself.

View Source is enabled.

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.

I saw one of these at some point, but couldn't find it when I needed it again. Pretty simple, the control has a property called selectedDate that returns a date object represented by the selected date and time. You can also feed it a Date and it will adjust to that. It is on a 12 hour clock. It dispatches a change event (Event.CHANGE) as a new date/time is selected.

There is an Inspectable property called minuteIncrement to adjust the increment on the minute stepper. I couldn't figure out how to have double digits on the 0-9 minutes. If anybody knows how I might achieve that, please let me know.

Here's the Source

One of the many reasons I love PureMVC is the community of highly intelligent, skilled, object-oriented (oriented) programmers that are constantly using the framework to build new and interesting utilities. This is a by-product of the very nature of PureMVC. Cliff architected the core framework in such a way that is is truly simple, providing a base from which to build new useful structures.

Fabrication, a new utility developed by Darshan Sawardekar is a shining example of this fact. He has taken the PureMVC multi-core apperatus, combined it with Cliff's Pipes utility, and created a wonderfully abstracted means for creating modular PureMVC applications. Not only does this simplify the connection of modules in your application and allow them to communicate seamlessly, but he provides a router/firewall metaphor for controlling the communication as well as undo/redo functionality.

Thanks Darshan, your efforts are appreciated. And as always, thanks Cliff for providing the base from which our community can build and contribute. Cheers.

The SuperPanel is an excellent component created by Wietse Veenstra. The styling is all hard-coded,  and I need to be able to change this. It also hard-codes the event that is triggered on close, and I wanted to be able to control this. So I added the appropriate meta-tags and properties to enable these options. Here is the result, link to the source is at the bottom:

Source is here.

I've updated this component to allow for keyboard and forward/back navigation. I'm still improving it, refactoring, but it is almost finished.

Here is the original post.