Building Blocks if there’s one thing I know about me and my thoughts: given enough time I’m always wrong

8Feb/090

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.

5Feb/090

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.

Filed under: AIR, flex No Comments
1Feb/0922

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.

Filed under: components, flex 22 Comments
24Jan/095

Adding a ToolTip function to a ComboBox in Flex

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.

31Dec/082

Installing PyAMF 0.4.0rc1 on Windows XP

I wanted to give the latest pyamf a go, but when I used the standard 'setup.py install', the following ominous warning was presented:

error: Python was built with Visual Studio 2003;
extensions must be built with a compiler than can generate compatible binaries.
Visual Studio 2003 was not found on this system. If you have Cygwin installed,
you can try compiling with MingW32, by passing "-c mingw32" to setup.py.

Uh oh! I actually DO have Cygwin installed, but unfortunately this message is a default and not entirely helpful. It did put me on the right path to actually getting it to go.

This webpage has a lot of good information on the subject, and it is where I pulled out these steps:

1. Grab the MingW32 Automated Installer and get it installed. I selected all of the available options as I figured it wouldn't hurt (it didn't)

2. Add the mingw32 binaries to your system path environmental variable (ie c:\mingw32\bin)

3. Tell Python to use mingw32 when it needs to compile a distribution by adding a file called distutils.cfg in this folder: {PYTHON_INSTALL}\lib\distutils\distutils.cfg. The file should contain:

[build]
compiler = mingw32

4. Version number parsing was throwing errors, so you actually have to edit {PYTHON_INSTALL}\lib\distutils\version.py to get it compiled. At line 100 make the following change:

from:

1
2
    version_re = re.compile(r'^(\d+) \. (\d+) (\. (\d+))? ([ab](\d+))?$',
                        re.VERBOSE)

to:

1
2
    version_re = re.compile(r'^(\d+) \. (\d+) (\. (\d+))? (\. (\d+))?$',
                            re.VERBOSE)

now with all that done, just run 'setup.py install' and it should compile as expected. Easy as... I dunno, it is actually kind of confusing, but it works and now I can give pyamf a whirl with the c-ext enabled.

Filed under: pyAMF, python 2 Comments
19Dec/083

Introspective PureMVC Console

This project is intended to help Flex and AS3 application developers, that use the PureMVC framework for AS3 - simple or multicore version - by providing them deep insights on what happens at the framework level: Notifications, Commands, Mediators and Proxies.
PureMVC is a highly recognized MVC framework, that has also many portages in various languages, and that's now quite widely in Flex applications, though not as much as Cairngorm.

What a fantastic tool. You can really dig deep into your application.

  • Monitors the internal flow of PureMVC in real time
  • Discover and inspect Mediators
  • Inspect Views associated to Mediators
  • Discover and inspect Proxies
  • Find starting point in source code
  • Integrated with KapInspect

http://lab.kapit.fr/display/puremvcconsole/PureMVC+Console

6Dec/088

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.

Filed under: components, flex 8 Comments
11Oct/0816

Flex Date and Time (datetime) Picker Control

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

Filed under: AIR, components, flex 16 Comments
21Sep/088

Django Authorization from Flex/AIR via PyAMF

Django views serve nicely as service end-points for Flex applications. Here are some notes on maintaining authenticated sessions between a Flex/Air/Flash application and your Django backend.

gateway.py

1
2
3
4
5
6
7
8
from pyamf.remoting.gateway.django import DjangoGateway
 
import myproject.myapp.views as views
 
gw = DjangoGateway({
    'login'                       : views.login_user,
    'logout'                     : views.logout_user,
})

views.py

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
import pyamf
from django.contrib import auth
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
 
try:
    pyamf.register_class( User,  'django.contrib.auth.models.User')
except ValueError:
    print "Classes already registered"
 
def logout_user(http_request):
    logout(http_request)
 
def login_user(http_request, username, password):
    user = authenticate(username=username, password=password)
    if user is not None:
        login(http_request, user)
        return user
    return None
 
@login_required
def registered_user_protected_function(http_request):
    return "You are a registered user."
 
@login_required
def staff_protected_function(http_request):
    if http_request.user.is_staff != True: return None
    return "You are staff."

from flex

1
2
3
4
var netConnection:NetConnection = new NetConnection();
netConnection.connect("http://mysite.com/gateway");
var responder:Responder = new Responder(loginResult, handleFault);
netConnection.call("login", responder, "username", "password")

The http_request carries a reference to the currently authenticated user throughout the session. This works for web based Flex application as well as AIR applications on the desktop. Note that I am using a try/except on the pyamf class registration calls. Because this is session based, the classes only need to be registered once. Without the trap, it throws a TypeError letting you know the registration has already taken place.

Django User Authentication Documentation
All of the various things you can do with authentication in Django. It is, of course, based mostly on the use of the very nice Django HTML template system. While those bits aren't handy to the likes of us, it is a good read either way.

pyAMF ByteArray example
This example shows the basic structure for setting up Django/Flex communication. It doesn't cover authentication, but covers a good bit of territory with examples in Flash and Flex.

16Sep/081

Fabrication – Simplified PureMVC multicore modules (and more)

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.