[Another quick note to myself]

I have always thought of flex developers as being categorized in two camps (at least this has been my experience).  You have the:

• those who focus on mostly Flex charting and
• those who focus on everything but Flex charting.

I fall into the latter category.  I just never decided to look into charts.  Everytime I would take a peek at the API I would just shake my head in confusion and focus on other tasks.  Why learn something new today that you can put off till tomorrow (or however that saying goes).  Well a client wants charts and I am the only Flex developer on the project.

Here is a basic breakdown of what the UI is expected to have:

• comparative data showing columns, each column representing an individual item of like-type.
• unique colors per item.
• color will also indicate some status compared to a benchmark indicator.

The idea is to achieve something like this:

Whoo hoo, big deal.  Just another column chart.  Anywho…. so the issue was I was trying to find a way to easily color the columns based on certain conditions ergo a conditionally colored column chart.

I ran across this post (link) where someone had created a ChartItemRenderer subclass.  It seems to work brilliantly, but I had to question if there was not some simpler means to do so.  After much poking around I did indeed find it.  Check out mx:ColumnSeries.fillFunction (link).

Doing component development is a challenging task, especially if you are trying to stick within the guidelines established by the MX framework.  So frustrating is this challenge sometimes, it makes you want to tear clumps of hair from your scalp.

I found this while digging around trying to extend mx:ComboBox:

/**
     *  @private
     */
    private function displayDropdown(show:Boolean, trigger:Event = null):void
    {
        if (!initialized || show == _showingDropdown)
            return;

        // Subclasses may extend to do pre-processing
        // before the dropdown is displayed
        // or override to implement special display behavior

Silly Adobe indeed.

Since being on the hunt for my next gig, I have been asked several hard questions by recruiters and clients. The question: “What kind of salary/rate are you looking for?” Now any consultant conducting interviews knows the inevitability of that question. And it should be addressed sooner rather than later.

The problem in answering that question is not knowing what kind of figure to give. Obviously you don’t want to low-ball yourself and giving a number too high can scare folks away. So I won’t belabor the point any further. Check out the salary calculator over at Simply Hired - link

Want to know what the average salary of a Senior Flex Developer in Dallas, TX is? Plug it in. Now get this: Simply adding th keyword ‘Adobe’ in the search parameters gives a significant jump in salary. So this may not be the best tool for zoning in on a specific number, but it will give you enough info to get some sort of range to play with.

Check out the info here - link

Also here are some tips for installing multiple versions - link

The potential of Flex for rapid prototyping and general application development is amazingly fast. With some mock data and a basic user-experience (UX) scenario, a developer can create a functioning sample application in a matter of minutes.

If you are developing either a full blown RIA or a prototype application then you have probably at least heard of Cairngorm. If not, familiarize yourself with the basics here - link. I use a stripped down version of it for almost every project I have worked on. It works beautifully

I plan to show you an example of using AppCoreLib’s XMLDataBroker to fill in some mock XML data for your commands. This is helpful when you have a basic idea of an API/services but they are not returning anything or not ready to be tapped or you wanna test out a service’s result format before the server developers implement it.

Before I continue, let’s set one or two rules about this tutorial.

• the expected format for the returned data is XML
• the mock XML data format will reflect the same format of the actual service’s result

Firstly let’s take a look at a basic Cairngorm command. This is a stripped down version so you won’t see any delegate-type references in here.

package com.foo.controller.commands
{
    import com.adobe.cairngorm.commands.ICommand;
    import com.adobe.cairngorm.control.CairngormEvent;
    import com.foo.business.Services;

    import mx.rpc.AsyncToken;
    import mx.rpc.IResponder;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.http.HTTPService;

    public class SampleCairngormCommand implements ICommand, IResponder
    {
        private var _vo:Object = {};

        public function execute (event:CairngormEvent):void
        {
            var call:HTTPService = Services.getInstance().httpService;
            call.url = "http://www.foo.com/someService";

            var param:Object = {};

            var token:AsyncToken = call.send(param);
            token.addResponder(this);
        }

        public function result (data:Object):void
        {
            var xmlResult:XML = ResultEvent(data).result as XML;
        }

        public function fault (info:Object):void
        {
        }

    }
}

So now with about 5 lines of code, I will show you how to inject mock XML data for creating a response that fits within the Cairngorm command structure:

package com.foo.controller.commands
{
    import appCoreLib.business.XMLDataBroker;
    import appCoreLib.events.XMLLoadEvent;

    import com.adobe.cairngorm.commands.ICommand;
    import com.adobe.cairngorm.control.CairngormEvent;

    import mx.rpc.IResponder;

    public class SampleCairngormCommand implements ICommand, IResponder
    {
        public function execute (event:CairngormEvent):void
        {
            var x:XMLDataBroker = new XMLDataBroker();
            x.addEventListener(XMLLoadEvent.XML_LOAD_SUCCESS, result);
            x.addEventListener(XMLLoadEvent.XML_LOAD_FAILURE, fault);
            x.loadXML("assets/xml/someMockXMLData.xml");

            /* var call:HTTPService = Services.getInstance().httpService;
            call.url = "http://www.foo.com/someService";

            var param:Object = {};

            var token:AsyncToken = call.send(param);
            token.addResponder(this); */
        }

        public function result (data:Object):void
        {
            var xmlResult:XML = XMLLoadEvent(data).xml;
            //var xmlResult:XML = ResultEvent(data).result as XML;
        }

        public function fault (info:Object):void
        {
        }
    }
}

That’s it! Simple, effective and most importantly, easy to remove once an actual service response is available.

It looks like I am on the hunt yet again. So goes the life of a flex consultant. Anyhow, here is what I am in the market for for my next gig:

• senior flex consultant role
  After working on the Speakerheart project, I have really come to love the more architectural aspects about projects. That is not to say I don’t love coding, because I do, but I really like some of the bigger-picture thinking involved with the overall structuring of a Flex client and the API.  Also I am not opposed to becoming an employee for a company, but it has to feel right.
• open to primarily telecommuting w/ occasional on-site work
  Gas is going to hit $4 pretty soon. So commuting to/fro work is getting more and more expensive. Also, in this day and age, there is no reason why a client/project/employer wouldn’t be open to telecommuting w/ occasional on-site time. I have been doing it 99% of the last 6+ months with very little hangups, if any. Skype, IM, email, and a regular ol’ phone facilitate telecommuting and they are all part of my arsenal of tools as a consultant.
• small team/small company
  I have worked both big and small teams for both small and big companies. I certainly like the feel of a smaller team as you get that “team” feeling where you feel the effects of your contributions. Bigger teams seem to diminish that feeling greatly. Also bigger teams introduce the whole “too many cooks in the kitchen” effect and coding consistency starts to waver. A team with 2-3 flex developers with one of them being the client-side lead is perfect.
• implements Agile-ish methodology
  Agile-ish development methodologies are great for a number of reasons but the one I find myself liking more and more is that it keeps people accountable and honest. It also provides the structure necessary to keep communication up and running which is of prime importance when telecommuting.
• user experience-driven development vs. design-driven development
  Its amazing how something so cool looking can really fail at providing a simple user experience. All the flash and pizzaz in the world won’t make a simple user experience any simpler. In fact, it will probably complicate things. UX driven development means that design has taken a back seat to the practicality of a particular experience. It also means that enough thought went into the task at hand to know that no matter what kind of fancy rims and spinners you have on your wheel, its still just a wheel that goes round and round.
• new project as opposed to an existing project
  I have worked on my fair share of other people’s bugs and spaghetti code. Yes, every project has these aspects (well maybe the former, hopefully not the latter). At this point in my career, I am ready to help build a new project with a great team, to rethink a web application or user experience, to start something fresh and do it right the first time
• pragmatist vs. zealots
  I really like working with like-minded people. I am a pretty down to earth, pragmatic guy. I have some beliefs but I am not too closed minded not to hear another take on a subject. Just be prepared to answer WHY when asked. I ask lots of questions and generally I question the status quo if not just to keep us all thinking. I am an agile, flex, flash, as3, cairngorm, oop, remoting, crud, and rest-pragmatist. I see the value in the old ways but I am not beyond questioning if there is a better way of doing it.
• and the rest
  In case you are wondering…
  • ActionScript 3 only
  • Flex Builder 2 & 3 only
  • I hate WSDLs
  • Flash gigs are cool but I really wanna do it in code, not the timelin

So there you have it. That is kinda the basics for what I am looking for for my next gig. If any of you folks knows of someone or something that looks like a good fit, send em my way. If you need a copy of my resume, download it from here - link

Alrighty then. Later.

Robotics just amazes me.  The potential to create assistive devices to make life for the disabled easier, or to make dangerous jobs safer, that is the real payoff.   It also scares the hell out of me.  Terminator and iRobot are certainly plausible in the abstract sense of self-aware robots.  But I digress

Festo, a German company, has been toying around with robotics for awhile now.  And it seems they are going in the right direction by using dear ol’ Mother Nature as the model for some of their experiments.  Check out their robotics section on their website - link

If you wanna read about their projects and can’t read German, each little project has a PDF brochure in English.  Nothing too technical but it does give a cursory explanation of the mechanics behind most of the projects.

recap

Last time we discussed two methods for handling service validation errors in a Cairngorm application. The first method was to borrow from some AS2/ARP techniques by passing a reference. The second method was to leverage the event nature of Flex and use a central event dispatcher type approach. Both of these have their advantages and certainly have their disadvantages. This last approach will try to take the best from both worlds and combine them to alleviate some of the problems we encountered.

ServiceValidationErrorManager method

Again you will have to pardon the names here but this gets the point across. There is no doubt what this puppy does. For the sake of simplicity I will continue to call it “the manager”. Ok so the manager is a) a Singleton-type class and b) has at its root a property called currentClient. Here’s a peek:

pacakge com.foo.managers
{
     public class ServiceValidationErrorManager
     {
         public var currentClient:IServiceValidationClient;
         static private var _instance:ServiceValidationErrorManager;
         static public function getInstance (){}//you get the idea....
     }
}

The idea is pretty much the same as the first method in that our views serve as the IServiceValidationClient. When dispatching a Cairngorm event we register the client with the manager class (if applicable). Basically that is achieved by:

ServiceValidationErrorManager.getInstance().currentClient = this; //the view/implementor

So this fixes issues from the other two methods. Firstly it eliminates the need to pass the view to the command. Secondly it doesn’t get us tangled up in all these IEventDispatcher methods.

Now upon a response that has some validation errors, we can simply say:

ServiceValidationErrorManager.getInstance().currentClient.handleValidationErrors();

The other nice thing is that we needn’t really worry about garbage collection because we’re only dealing with one property on one class. It gets overwritten when needed. Now you may be asking why use a separate manager type class. Well you may want to have some logic in there for various things including queuing the views, and other crap I can’t think of right now.

summary

This could easily be adapted to a preexisting singleton model so you can reduce the need for the additional class. You just gotta remember its there. Also, even though you needn’t clear out the property on the manager, it does make good practice. Having a manager class allows you to do just that: manage validation errors appropriately. Of course this might be a grotesque oversimplification of a very serious need, you get the gist of the idea.

pros:

• OOP
• negates the use of IEventDispatcher logic in both view and command
• provides a centralized place to handle more robust registration for error handling

cons:

• adds another class
• still doesn’t address timing issue, unless you implement some queuing mechanism in the manager when setting the current client
• not as elegantly simple as method one

That’s it folks. 3 very ugly solutions to an ugly problem. Chime in and let me know how you do it. Thanks.

recap

So last we left off we had discussed the reference method for passing info back and forth to the relevant view notifying the user about needed data changes. If you need a refresher check part 1. This next way of handling service validation errors is very simple, however it requires a bit more work.

central event dispatcher method

This method requires two additional classes which we will call something like ServiceValidationEventDispatcher & ServiceValidationErrorEvent. I am not too good at naming things off the top of my head so feel free to lay into me on this one. The point is this: We want a globally accessible IEventDispatcher class we can tap into from both the views and the commands. And we want an event that we can attach some data to in order to pass it back. The SVED is pretty straight forward so I won’t create that here. Just know its an IEventDispatcher and I would make it a Singleton-type class. The new event class should probably look kinda like this:

package com.foo.events
{
     public class ServiceValidationErrorEvent extends Event
     {
          static public const SERVICE_VALIDATION_ERRORS:String = "serviceValidationErrors";

          public var errors:Array = [];
     }
}

hooking it up

We are hanging onto the interface from part 1 but we’re gonna modify it for this particular implementation. Instead of the passing the array to the handleValidationErrors, we are gonna pass it a ServiceValidationErrorEvent as the parameter.

Another change we do is instead of passing the view as a value on the Cairngorm event, we will tell the ServiceValidationEventDispatcher instance to register our handleValidationError method for the ServiceValidationErrorEvent:

ServiceValidationEventDispatcher.getInstance().addEventListener(ServiceValidationErrorEvent.SERVICE_VALIDATION_ERRORS, handleValidationError);

Now at this point we have a few choices. We need to make sure that we are doing our best to preserve memory and garbage collection. One way is to use a weakReference when adding the event handler. I am not a fan of this because a) we cannot control garbage collection and b) it leaves too many doors open for timing issues.

Another means would be to make sure that we always trigger the handleValidationError method on our view, checking the errors array’s length. For one reason we will be removing the event handler from the SVED. But this means then we always have to trigger it from the SVED within the command regardless of the response’s success. The other way would be to have yet another handler on the view for successful validation so that you can go ahead and remove the handler. This means fattening up our interface. There are so many little things you could do here, but the main purpose is that we are using events to trigger out handlers rather than direct triggering via a reference.

summary

I really don’t dig this implementation because it adds more classes and more crap to remember to do. But here is a pro/con list for this method:

pros:

• better OOP than the ref method
• decouples the view from the command
• leverages the event driven nature of the flash player

cons:

• adds additional weight to your project
• prone to timing issues
• more stuff to remember to do

Ok so part 3 is coming next. It will basically be a blending of the two previous methods. See ya then

client-side validation

In general validation takes place in two places within a RIA: the client and the services. Generally when creating a services-enabled flex application, you try to validate some of that data on the client. For instance, you want to check for necessary data (e.g. required form fields) and properly formed data (e.g. making sure an email address has the @ sign and a domain). This is what I call client-side validation. So what do I mean by “service validation errors”?

service validation

Let’s use the example of sending some registration data to a service. We the flex client have already validated the data and send it off. So let us assume we are sending a user name, password and email address. Obviously we want our user name to be unique and the flex client hasn’t a way to determine this. Instead it relies on some registration service to check for the uniqueness of the data being sent. Ok, let’s assume now that we have sent something that is already being used by another user. This is service validation (it may be called something entirely different which I am ignorant of, but this is what I call it for now). Now if you have a good system in place, you will want to get some data associated with the registration error that just occurred. So now that we are on the same page about the high level validation stuff let’s get a closer view in handling it in an application that uses Cairngorm

user experience ground rules

Firstly I am going to set some ground rules for an application. We are going to assume that any view whose data requires a service and validation response will prompt further user input within itself. So no popups/Alerts on top of some registration popup/view. Why not? Well these solutions came about from my client’s user experience design that doesn’t allow for such simple solutions. Plus it would negate the whole purpose of my posting

under-the-hood-process

1. user enters data requiring validation
2. client-side validation occurs (assume it passes)
3. Cairngorm event dispatches with data
4. command (I am scrapping delegates for the sake of simplicity) process sends out and awaits reponse
5. service validation errors come back with response necessitating changes to data
6. command needs to notify someone that data needs to be corrected

method one: referencing

For the OOP purist out there, this might not settle well. It certainly did not settle well with me. But it’s a pragmatic approach with very few pitfalls attached. For those familiar with AS2 and ARP this will be very familiar.

Firstly we need to establish some sort of protocol for handling the service validation errors coming back. A very simple and forceful solution would be to use an interface. Let’s call it IServiceValidationClient. Yeah that sucks but it gets the point across. Here is a glimpse of that interface:

package com.foo.validation
{
	public interface IServiceValidationClient
	{
		function handleValidationErrors (errors:Array):void;
	}
}

Our view will implement this interface. Now to make use of it. We need pass a reference of this implementor along with the call. Depending how hairy your application is, you may have tons of custom CairngormEvent subclasses. For simplicity, I will just use a basic subclass called FooEvent. It looks like this:

package com.foo.events
{
	import com.adobe.cairngorm.control.CairngormEvent;
	import com.adobe.cairngorm.vo.IValueObject;
	import com.foo.ui.IServiceValidationClient;

	import flash.events.Event;

	public class FooEvent extends CairngormEvent
	{
		public var vo:IValueObject;
		public var serviceValidationClient:IServiceValidationClient;

		public function FooEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
		{
			super(type, bubbles, cancelable);
		}

		override public function clone ():Event
		{
			var evt:FooEvent = new FooEvent(type, bubbles, cancelable);
			evt.vo = vo;
			evt.serviceValidationClient = serviceValidationClient;

			return evt;
		}
	}
}

So before we dispatch the FooEvent, we just say:

var evt:FooEvent = new FooEvent("doRegistrationDude");
evt.vo /* = the value object you should have assembled from the view's inputs */
evt.serviceValidationClient = this;

Ok, so at this point we are now dealing with the command. Upon execution, you need to store an instance level reference to the event.serviceValidationClient. This way you can grab it upon the response. If there happens to be an issue with the response, assuming you have standardized the errors somehow, you just grab that reference again and say:

serviceValidationClient.handleValidationErrors(errors);

Now there is one thing left to do. And this is very important. You need to do some clean up after you have utilized the response data. In this call you to make the command’s ref to the view null again or it will not get garbage collected.

serviceValidationClient = null;

Summary

pros:

• simple implementation
• provides an interface for standardization of error handling
• requires very little in additional coding/classes
• not highly coupled

cons:

• not very OOP
• requires that you remember to implement the interface
• requires garbage collection clean up

Ok so that is method one. I will post the other two methods in separate posts so as to make a short read of them.