First things first I need to acknowledge David Tucker for this fantastic post that got me started.

As David Tucker says in his post, though I think he’s lying, I’m no Cairngorm Expert either.  But I have used it recently and I like it.  What I’m doing with this post is to explain it as I get it, so if I’ve made any glaring errors please let me know.  This is also an aide memoir to myself too so I apologise for the slightly jovial tone, I like to keep myself amused while I’m writing.  What I can say with authority though is that I really like Cairngorm even though I’m currently using the PureMVC framework (I hope to post a similar getting started for that framework).

The Cairngorm framework appears to be the main framework suggested by Adobe for use when creating RIAs with Flex.  There are lots of other frameworks, Pure MVC being one of them, but this one is really being pushed as they bought the company that created it (Iteration II – acutally they were bought by Macromedia, who were then bought by Adobe, but the essential theory stands).

Cairngorm is an MVC (Model, View, Controller) framework that aims to seperate these different parts of an application so it is easy to maintain and also easier for large development teams to work on.  As each part of the application is seperate a different developer can work on each bit, after planning the application of course.

In essence with an MVC design pattern the Model should deal with the data, the Controller with telling the Model what to do and the View should site there happily being told by the model what it’s supposed to be display.

I’ll have a go at some pretty diagrams of the MVC pattern (you’ll see I’m no designer) but I’ll mainly explain the way I understand it.

At the most simple level : -

A user interacts with the view.  The view dispatches an event which is mapped to the controller (known as a command), the command makes a change in the model and the model then tells the view what to display.

Now this is all well and good, but really the whole point of framework is to make it easy to manage the application and that includes data connections.  So the next step is : -

A user interacts with the view.  The view dispatches an event which is mapped to the controller (command).  The command creates a delegate to make a call to a data source and a responder that the result from the data call is mapped to.  The responder makes a change to model (which it is allowed to do as it is a controller) and the model tells the view what to display.

So for a simple app that loads some XML the flow would be : -

• Application Inititialises
• Dispatches an “I’m alive” event to a controller class
• The controller class creates a “GetXMLDelegate” class that calls to load the XML
• The XML is delivered back to responder (at the control level)
• The responder changes the model
• The view displays the data the model holds

OK, OK, I’m laboring the point – but that sort of is the point. It seems very obvious but this is really important.  View talks to Control, Control changes the model, model gets the view to display what it tells it to.

The most important and cardinal rule is ONLY CONTROLLERS (ie. Commands or Responders) CAN CHANGE THE MODEL!  If you stick to this cardinal rule your life with Cairngorm will be much more fruitful.

One other bit of advice is to try and keep things simple. One command does one function. This means you’ll end up with loads of classes, but if something does go tits up then you’ll probably have a good idea as to exactly where the application is failing, and probably the filename of the class that is the problem.

OK – part 2 – lets set up the environment for developing with Cairngorm.

Ok – I’ve popped some advertising on the site.  If it gets too intrusive I’ll take it off, and if google can’t work out that I’m actually in the UK and NOT spain then I’ll definately take it off!!

I hope that the ads don’t detract from the rest of the content. but hey – I’m a freelancer now and I need to fund my website hosting habbit somehow (I’m hosting 5 sites and this is the only one really doing anything – I’ve got a blog for my 18month old son for goodness sake!)

Firefox 3 has been released and there are a few new feaures that are cool.

I like the new address bar drop down, lots of extra info on the sites you’ve visited displayed really nicely.  Icons are very web 2.0 now, but I suppose that was to be expected.  I’m slightly irritated that the refresh button has moved to the right as I’ve been clicking on the wrong side from habit, though I’m sure that I’ll finally get the hang of it.

The new bookmarks system is very nice – allowing you to easily add links and tag them so you can add extra info.

I’ve heard that it runs a lot quicker too – but lets see.

The only irritation is that FireBug was knocked out by this latest release, I’m keeping my fingers crossed that they get that sorted soon.

I’ve not been all that bothered by twitter, and to be quite frank I didn’t really get it.  Recently someone sent me a link to a FireFox plugin called TwitterFox a seriously easy to use browser plugin for Twitter.  Just install it and then the twitter icon appears in the bottom right hand corner of the browser.  Pop in your Twitter username and password and boom!  All your ‘tweets’ are polled by this little tool – the number of latest tweets are displayed when you log in, and every time it makes another call to get the most recent posts.  What’s even better you can use it to directly tweet yourself from the browser.  Very nice!

Those of you that know me will be aware that I used to run an agency called e-Smartz with my colleague Patrick Reynolds.  Paddy set up the business early in the 00s and I joined around 5 or 6 years ago, and soon we were fully fledged business partners.  After the ‘difficult’ start up period – no money and lots of late nights (and grumpy wife-me / girlfriend-Paddy) we really started to make some in roads.

After a few really cool projects working for Allianz Cornhill (now Allianz), the BBC, Sony pictures and a few others we picked up a megga job redeveloping the Emirates Bank website.  Yep the one that works out of Dubai.  We’ve been working on this project for around 18 months, jetting back and forth from our development offices in England and the office we’d set up in Dubai.  Wow – so why the f*ck have I left?  Especially now the work (and more importantly money) is coming in?

Well my little boy, Charlie, is now about 18 months himself.  I thought it’d be fine to crack on with running the team, being a good husband, father and vanishing off to Dubai every month or so for a few weeks.  Well ladies and gents – it doesn’t work like that and after 6 months hard thought I realised that something had to give.  So, as anyone with a family will tell you there is only one decision that I could have made.

I think e-Smartz is a cracking agency with some really talented designers and developers working there, headed up be a technical architect who has (forgive me for this Padz) been in the industry for donkeys years.  I’d happily recommend them to anyone who wants / needs a new technology solution to their web or communication issues.

I wish them all the best in the future and look forward to collaborating with them as time goes by.  I’d especially like to thank my team, Sam, Mike, Luke and Jess for being cracking guys to work with!

To e-Smartz : Later t

So we’ve created our basic application in part three. You can see it here.

Adding and deleting is fine, but what about editing? I don’t want to simply add people, I want to be able to change them too. We’re going to need a few more variables and another function.

<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var peopleColl:ArrayCollection = new ArrayCollection();

		[Bindable]
		private var buttonTitle:String = "Add Person";

		private var workflowState:String = "adding";

		private function submitPerson():void
		{
			if (workflowState == "adding")
			{
				addPerson();
			}
		}

		private function addPerson():void
		{
			var obj:Object = new Object();
			obj.firstName = firstName.text;
			obj.lastName = lastName.text;

			peopleColl.addItem(obj);
		}

		private function peopleLabelFunction(item:Object):String
		{
			return item.firstName + " " + item.lastName;
		}

		private function deletePerson():void
		{
			if (people.selectedItem != null)
			{
				peopleColl.removeItemAt(people.selectedIndex);
			}
		}
	]]>
</mx:Script>

We’ve added a buttonTitle and made it bindable, a workflowState variable so we know at what stage the application it at and a submitPerson() function that makes a comparison on the workflowState and triggers the addPerson() function if we are adding. Now we’ll change the add person button.

<mx:Button label="{buttonTitle}" click="submitPerson()"/>

So what have we done here? As far as functionality – nada. It’ll still work the same, but now we are using data bindings for the button title too. Whoopy do. Well actually it is.

However first things first I’ve actually been bad and not added some simple functionality to the form. Once we’ve added a person we need to clear the text fields

I’ll assume now you are familiar enough with the code I can simply show you the bits I’m adding or changing.

 private function addPerson():void
{
	var obj:Object = new Object();
	obj.firstName = firstName.text;
	obj.lastName = lastName.text;

	peopleColl.addItem(obj);

	firstName.text = "";
	lastName.text = "";
}

That’s a bit better.

Now for the editing functionality. First lets add some more binding. When the list is selected we want to populate the text fields with the selected item.

<mx:Form>
	<mx:FormItem label="First Name">
		<mx:TextInput id="firstName" text="{people.selectedItem.firstName}"/>
	</mx:FormItem>
	<mx:FormItem label="Last Name">
		<mx:TextInput id="lastName" text ="{people.selectedItem.lastName}"/>
	</mx:FormItem>
	<mx:Button label="{buttonTitle}" click="submitPerson()"/>
</mx:Form>

Now we’ve bound the text field properties to the items in the list. When the list is selected though we want to set the form to be an edit rather than add form. We’ll do that with this function.

private function doEdit():void
{
	workflowState = "editing";
	buttonTitle = "Edit Person";
}

This simply changes the buttonTitle, which if you remember is bound to the form button. And it sets the workflow state to editing. This means we can write the next part of our submit person function.

private function submitPerson():void
			{
	if (workflowState == "adding")
	{
		addPerson();
	}
	else if (workflowState == "editing")
	{
		editPerson();
	}
	else
	{
		//Err something really odd is happening here.
	}
}

And the actual edit function.

private function editPerson():void
{
	var obj:Object = peopleColl.getItemAt(people.selectedIndex);

	obj.firstName = firstName.text;
	obj.lastName = lastName.text;

	peopleColl[people.selectedIndex] = obj;

	people.selectedIndices = new Array();

	workflowState = "adding";
	buttonTitle = "Add Person";
}

So what’s happening here? First lets get the object from the array. Then change it’s properties of firstName and lastName to the text fields. Then put it back into the array where we got it from, effectively overwriting the item in the array. As the textFields are bound to the selected item of the people list we need to deselect the list, or we are going to be stuck in edit mode as the text fields will keep displaying the selected item. We cannot do firstName.text = “” as this would overwrite the binding we had set up and stop the app working as expected. If you set the selectedIndices of a list to a new Array this effectively deselects the list.

We are done editing so we set the workflow state to adding and the buttonTitle back to Add Person.

The final tweaks we need to make are in the delete function as you need to select the list before you can delete the person from it. This would then leave the application in edit mode and would stop it working as expected.

private function deletePerson():void
{
	if (people.selectedItem != null)
	{
		peopleColl.removeItemAt(people.selectedIndex);
		workflowState = "adding";
		buttonTitle = "Add Person";
	}
}

And finally, finally, lets put the validation code on to make sure that people at least enter something into the form.

private function addPerson():void
{
	if (firstName.text != "" || lastName.text != "")
	{
		var obj:Object = new Object();
		obj.firstName = firstName.text;
		obj.lastName = lastName.text;

		peopleColl.addItem(obj);

		firstName.text = "";
		lastName.text = "";
	}
	else
	{
		mx.controls.Alert.show("At least enter something, doofus.","No Details Submitted");
	}
}

You can see the finished app here.

Download the code from this link -> Simple Contact Form Complete MXML . The code is commented, so should be quite easy to read through.

We’ve covered basic data binding with Actionscript in part one and simply sticking components together in part two, now lets look at something a bit more interesting. As I’m working on a contact manager at the moment I’m going to use this as the basis for this little tutorial (hey, I’m lazy and the code is just sitting there….).

First things first lets create a panel with a list to display the contacts, a little form to get the contact information and some buttons for managing the data.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

	<mx:Panel title="Contacts" layout="horizontal">

		<mx:VBox>
			<mx:List id="people"/>
			<mx:Button label="Delete Person" enabled="false"/>
		</mx:VBox>

		<mx:Form>
			<mx:FormItem label="First Name">
				<mx:TextInput id="firstName"/>
			</mx:FormItem>
			<mx:FormItem label="Last Name">
				<mx:TextInput id="lastName"/>
			</mx:FormItem>
			<mx:Button label="Add Person"/>
		</mx:Form>
	</mx:Panel>

</mx:Application>

This creates a basic panel which should look something like this.

Note that I’ve set the delete button to disabled as initially we won’t have any contacts, so we won’t have anything to delete.

Now we need to create the code that are going to make the mini application work. First we need an array collection to act as the data provider for the list.

<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var peopleColl:ArrayCollection = new ArrayCollection();
	]]>
</mx:Script>

The peopleColl needs to be bindable as we are going to attach this to the list.

<mx:List id="people" dataProvider="{peopleColl}"/>

Like that.

Next we are going to need a function to add a person.

<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var peopleColl:ArrayCollection = new ArrayCollection();

		private function addPerson():void
		{
			var obj:Object = new Object();
			obj.firstName = firstName.text;
			obj.lastName = lastName.text;

			peopleColl.addItem(obj);
		}
	]]>
</mx:Script>

And get the button to call the function when it is clicked.

<mx:Button label="Add Person" click="addPerson()"/>

Cool. Now when we enter details into the form and click ‘Add Person’ this adds the person’s details to the array collection. But hang on – look at the list

Ah. The list is getting updated by the data binding, but doesn’t know how to display the items. It, by default, calls the toString() function which in the case of an Object returns [object Object] . Not good enough for a proper display. So we add a label function to the list so it knows how to display the item.

<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var peopleColl:ArrayCollection = new ArrayCollection();

		private function addPerson():void
		{
			var obj:Object = new Object();
			obj.firstName = firstName.text;
			obj.lastName = lastName.text;

			peopleColl.addItem(obj);
		}

		private function peopleLabelFunction(item:Object):String
		{
			return item.firstName + " " + item.lastName;
		}
	]]>
</mx:Script>

Then tell the list to use this function

<mx:List id="people" dataProvider="{peopleColl}" labelFunction="peopleLabelFunction"/>

Now the list will display correctly.

Nice. A couple of notes. Normally when assigning a function to a component such as a click event you would put the call to the function in the “” such as click = “doSomething()” and you could send an event to the function too, click = “doSomething(event)”. In the case of a list component you only need to put in the name of the function.

The label function only receives objects, so you do need to know what the structure of the object is in order to extract the correct string and return it.

OK lets get the delete button working now. First lets enable it. We need to change the enabled property.

<mx:Button label="Delete Person" enabled="{peopleColl.length > 0}"/>

OK, what’s going on here? We are using data binding to do a comparison, on the fly, with the length of the peopleColl. If it is empty the comparison will be false, if not the comparison with be true. And as we are using data binding this will do the hard work for us, we don’t need another function operating on the button enabled property.

Right, now the delete function.

<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var peopleColl:ArrayCollection = new ArrayCollection();

		private function addPerson():void
		{
			var obj:Object = new Object();
			obj.firstName = firstName.text;
			obj.lastName = lastName.text;

			peopleColl.addItem(obj);
		}

		private function peopleLabelFunction(item:Object):String
		{
			return item.firstName + " " + item.lastName;
		}

		private function deletePerson():void
		{
			if (people.selectedItem != null)
			{
				peopleColl.removeItemAt(people.selectedIndex);
			}
		}
	]]>
</mx:Script>

Again – all we need to do is operate on the peopleColl array collection, we don’t need to get anywhere near the list component as it is bound to peopleColl. I’ve also added a little test to make sure that the list is actually selected or we’d get an error. Lets add the function to the delete button.

<mx:Button label="Delete Person" enabled="{peopleColl.length > 0}" click="deletePerson()"/>

And if you try out the app here you can see we can add and remove people from the list, and the delete button will disable itself if you delete all the people from the list. Alright, I know there is no validation, so you can add empty objects into the list, sheesh! Give me a break, we haven’t finished yet! On to part four.

OK, so we’ve covered the basics of data binding in part one. However you don’t have to use Actionscript to use data binding. This is a very quick example of how you can bind two components together without using Actionscript at all. Click here to see the example.

And this is the code :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

	<mx:Label text="{input.text}"/>

	<mx:TextInput id="input" text="Type in here to change the label"/>

</mx:Application>

Simple you can get the code from this link -> Binding Components MXML Code.(Sorry, just moved the blog – examples back soon) Note that when binding components their properties are available for binding without using [Bindable] meta, this is only for Actionscript. This is a fairly useless example of data binding though. What may be useful would be to bind the enabled state of a button, for example a delete button, to the length of the array property of a list component. If the list component was empty, disable (or hide) the button. Or set the index of a view stack to the value of a radio group, or – er – OK this isn’t too useful. (Shorthand for – I’ve run out of good examples, lets get on and play with some more code.)

Next lets look at something that’s halfway towards a useful application of data binding.

One of the really cool things you can do with flex is binding, or dynamic data binding, but I’ll just call it binding for now. At it’s most basic you can directly associate data with a view object, eg text input, without having to write the code that did it.

Suppose in Actionscript 2, or 1 for that matter, you had a dynamic text field with the instance name of ‘output_txt’.

There, I took a picture so you’d believe me. (The more eagle eyed of you will notice that this is actually Flash CS3).

If you had some data, in this case a string you wanted to display in this text field you’d write something like this.

var copy:String = "This is the copy.";

output_txt.text = copy;

And you’d display the copy. Fine, not too much code – what’s the problem?

The problem is that what if the copy has to be dynamic and change? What if the variable copy changes from “This is the copy” to “Disregard this information?” or “A zone one single is how much?” (I had to make a trip to London and am still wondering how anyone can afford it). The text input is a dumb component. It’s been told what its text property is, thankyou very much. If you want to change it, you’ll have to tell it to change the property. So in the function that returns the data, or changes the variable you’ve got to then reassign the variable to the text field

var copy:String = "This is the copy";
output_txt.text = copy;
function resetCopy()
{
 	copy = "Its costs nearly a fiver, why not take a cab, it's more comfortable and you've got more chance of getting where you want to."
	output_txt.text = copy;
}

Which is really just repeating yourself. And can become a real bore when you’ve got half a dozen (normally more) view components that are displaying data. Yes, you could write a function that is triggered every time a variable is changed (a listener), but invariably you’ll be checking which one has changed and then identifying which component that relates to and applying the change to that. You could be even more clever and use classes to have static functions that check your value objects (more classes basically) and update the view that way. (I’ll be doing some stuff on OOP – Object Orientated Programing soon)

However you do it as some point you will be saying this property (wot I already set) is equal to this variable (wot I’ve already said it was in the first place).

This is the point where dynamic data binding in flex really comes into it’s own. The process is really simple : -

1. Create the variable you want to assign.
2. Use the [Bindable] meta tag to let the compiler know that this variable is bindable – this allows us to access the variable with script on the component.
3. Tell the view component what variable it has to bind to.
4. That’s it.

Once it’s bound whenever the variable changes the component bound to updates too.

A simple example

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

 			creationComplete="resetString()">

 <mx:Script>

 	<![CDATA[

 		//Bindable metadata letting the compiler know the variable

 		//imediately afterwards is available for binding.  If you

 		//leave this off then you will get a compiler warning, but

 		//the code will still work...but just for me leave it in.

 		[Bindable]

 		public var copy:String = "This is the copy";

 		//Function called on Creation Complete.  This is triggered when

 		//the application has been launched, so after the copy variable

 		//was initially created.

 		public function resetString():void

 		{

 			//Reset the copy

 			copy = "I've changed."

 		}

 	]]>

 </mx:Script>

 <!--

 Here's the text input to display the variable.  The curly braces

 are required so the compiler knows to treat what is in them as Actionscript

  -->

 <mx:TextInput id="output" text="{copy}"/></mx:Application>

I’m not going to go through the code, there are comments and it should be quite self explanatory, you can down load the mxml from this link ->Simple Binding Example MXML File .(Sorry, just moved the blog – examples back soon EDIT : I lost it – I’ll get it back up ASAP – sorry!) The only things I will mention are :

Putting meta tags into Actionscript felt extremely alien to me when I first started and I didn’t really get them, however now I’m totally at ease with it so don’t worry if you start typing and think “What on earth is this all about?”

You HAVE to use the curly braces in the mxml or the compiler will not know it is supposed to be calling an Actionscript variable.

By the way if you run this you should get “I’ve changed.” in the text field. This proves that data binding is working as after reseting the variable we didn’t then go back to the text input component and reset the text property. Wow.
So? How was that? Totally underwhelmed? Don’t worry this is just the principles, next we’ll look at how you can bind components together with no code whatsoever.

Flex Dynamic Data Binding 101 – Part Two

I’m away for work at the moment, I’m actually in Dubai – which is very cool, and I’ve come out a few times this year. And every time I travel I get really excited about the flight. Even with the knowledge that, after having your testicles removed with a rusty spoon, actually getting on a plane is the most painful and frustrating experiences in life.

It doesn’t help that regardless of how I plot, plan and organise merely arriving at the airport I still manage to cock it up somewhere. I have had to cope with forgetting that the M25 is occasionally a *bit* busy – that time I checked in with merely minutes to rush through security and leg it to the plane; I’ve stuck the car in a ditch on the way, had to get a friend to tow me out and I checked in with merely minutes to rush through security (got picked out for a random search this time) and leg it to the plane; then there was the time I thought the plan took off at 9:30 and it took off at 9 – see above…..

This time I had the brain wave that I’d get the train to London and the blue line on the tube over to Heathrow.  In retrospect the previous sentence seems to sum up quite clearly what my mistake was this time. Which wasn’t helped by some poor bloke fainting on the tube ,requiring that the train was stopped in a station for 1/2 an hour. That little episode clearly sums up my opinion of London, the guy had fainted, keeled over, bashed up his nose, cut his head and NO ONE offered him a seat, and all of us (I have to include myself) stood around tutting and looking at our watches while the poor sod tried to work out where and who he was as he came round.

Anyway – mindful of my previous mistakes I’d given myself loads of time so I didn’t have to worry too much. Got to the airport finally and went to check in. I was quite interested as Virgin had sent me an email letting me know that they had a new check-in system which promised to make the whole process much easier. Cool. I walked into the check-in area.

Chaos! There were people everywhere – sorry – extremely stressed people everywhere. Basically the new system involved everyone checking themselves in and then dropping off their bags. In theory, great, in practice…. The main problem is that people where required to weigh their bags them selves and were trusted to fess up if they were overweight. Yeah – right. Trust had broken down by the time I got there and really pissed off Virgin staff were marching up and down the lines singling people out, “Is that bag 23kilos? Is that bag 23kilos? It doesn’t look like 23kilos, does it? You need two trolleys for it!” I don’t know what happened to that chap. Didn’t see him again, he was probably taken out the back and shot.

I was teachers pet, I’d already checked in online and had a little bag so actually got through this bit quite quickly as people in the queue in front of me were culled for being overweight by the various Virgin staff. (Not actually overweight, their bags were overweight – if that was the criteria, I’d still be in Blighty, waiting for a boat barge, to get me out here)  So the system worked for me.

My fastest check-in and journey to security ever!  At this rate I was going to have time for a beer and buy a book that I’d never read at any other time than when on a plane – something by Andy McNab no doubt.  Even the long queues for security were moving through well, terrific.  Weighing up the people ahead of me I could see the only problem was a family with a pram, who after a little eavesdropping, I ascertained they had no idea how to fold up the pram.  Armed with this information I peeled off to follow the sensibly dressed business man, who’d obviously been through the process before.  I thought.  First off he put his bag into the machine.  It was sent back as he’d forgotten to take his laptop out.  Computer problem fixed he walked through the gate that goes beep.  It went beep.  He was asked if he had any metal on him.  Offering his glasses he tried again with them off.  It went beep.  He checked his pocket and pulled out about twenty quids worth of shrapnel and went through again.  Beep – I noticed the family had smoothly collapsed the pram and were strolling off into duty free.  Beep.  Now he remembered he had a mobile phone.  Beep.  Finally a penknife.  At this point we were ushered through past him, never saw that bloke again either.

Then I checked the time, sighed and legged it to the gate.

I love flying…..