yay, tacos!

My first real project in Flex/AIR was to recreate an existing dashboard application. As it was a first version release, our primary focus was getting the essential functionality built allowing us to come back and work on some of the niceties and flourishes later. One of those a little pop-up notification that occurs when a datafeed is updated.

In ColdFusion or other languages, this would require storing the current data and comparing against the new data coming in. When I first started looking into how to do this in Actionscript, I remembered a tutorial on Lynda which discussed using asynctoken to update a database and only updating a datagrid with the updated row instead of polling it for the entire dataset. Unfortunately, my Lynda account had expired and I no longer had access to this tutorial. Regardless, from my digging, it seems that asynctoken wouldn’t really do what I was looking for anyways.

Digging through other articles and the documentation, I found the CollectionEvent event class. Using the CollectionEvent.COLLECTIONCHANGE event, I was able to identify when my array had been updated.

private function init():void {
	// set up a simple array collection
	arData = new ArrayCollection(
		[
			{FirstName:'Luke', LastName:'Skywalker'},
			{FirstName:'Han', LastName:'Solo'},
			{FirstName:'Leia', LastName:'Organa'}
		]
	) ;
}

// simple functions to edit the array
private function addName():void {
	arData.addItem({FirstName:'Ben',LastName:'Kenobi'}) ;
}
private function updateName():void {
	arData.setItemAt({FirstName:'Jaster',LastName:'Mereel'},1) ;
}

First we just set up a simple array collection with some basic data and some basic functions to change the data. For the sake of simplicity, I’ve just got one to add a row, and another to edit a row. Obviously, you could update your data via the method of your choice. In my final application, the data would be receiving updated data from a server.

// set an event listener on the array to identify changes to it
	arData.addEventListener(CollectionEvent.COLLECTION_CHANGE,dataChanged) ;

Now, we add an event listener to the init function to the array. By attaching it to the array, we’re listening for when that specific array is updated.

// event handler function
private function dataChanged(c:CollectionEvent):void {
	var m:String = "" ;
	// for now, we'll just handle replace/add
	if (c.kind == "replace") {
		// replacements have oldValue and newValue properties
		m =  c.kind + ': ' + c.items[0].oldValue.FirstName + ' ' + c.items[0].oldValue.LastName ;
	} else if (c.kind == "add") {
		// additions only carry the single value
		m =  c.kind + ': ' + c.items[0].FirstName + ' ' + c.items[0].LastName ;
	}
	// create a highlight box to display our alert
	var h:HighlightAlertBox = new HighlightAlertBox();
	h.message = m ;
	this.addChild(h) ;
	// set a listener to know when to remove the box
	MyDispatcher.Dispatcher.addEventListener(Countdown.COUNTDOWNCOMPLETE,removeHighlightBox) ;
}

Here we have the function that will handle the change notifications. The CollectionEvent items struct is a little different depending on the kind value. In the case of “add”, it simply holds the new values. In the case of “update”, it holds both the original and new values. This could obviously be leveraged for some really nice update notices.

This block also creates a custom class called HighlightAlertBox which is just an extended canvas class. After creating the HighlightAlertBox, we add an eventlistener to await a custom Countdown event to be dispatched.

Once created, the HighlightAlertBox creates a five second timer. Once it runs, it dispatched Countdown.COUNTDOWNCOMPLETE. The main application is listening for this event and just removes the HighlightAlertBox which dispatched the event.

Here is the final product. View Source to see it all put together. Click one of the buttons to update the array. The CollectionEvent listener recognizes that the array has been updated and creates a new HighlightAlertBox which has a lifespan of five seconds. Once the five seconds have elapsed, the HighlightAlertBox is automatically removed.

There is still work to be done here, but we’ve got a great basis to work from.