‘Coalescing’ events or actions to prevent unnecessary computation

Flex/Actionscript code, which tends to be very event driven and asynchronous, will often turn up cases where something might be triggered many times in a short period and the latest trigger effectively invalidates any prior execution state.

A good example of this are text inputs used for a search in which the search results are updated automatically. This is the way Google works now for example. As a provider your client may be curious to search for a word such as ‘world’. You want to provide live results, but assuming the user types above a certain threshold for speed it doesn’t make much sense to search on ‘w’,'wo’,'wor’,'worl’ if the input is fast enough.

Below is a very trivial class that helps with this. It proxies the execution of a target function and builds in an automatic delay so that it can ‘coalesce’ any triggers that occur within a certain threshold interval.

package utils
{
	import flash.events.TimerEvent;
	import flash.utils.Timer;

	public class CoalescedCall
	{
		private var _timer:Timer;

		// Call Variables
		private var _targetFunction:Function;
		private var _thisObject:*;
		private var _args:Array;
		private var _interval:int;

		public function CoalescedCall(targetFunction:Function=null,
                                              interval:int=250,
                                              thisObject:*=null,
                                              args:Array = null)
		{
			_targetFunction = targetFunction;
			_interval = interval;
			_thisObject = thisObject;
			_args = args;
		}

		public function trigger():void
		{
			if (_timer == null)
			{
				_timer = new Timer(_interval,1);
				_timer.addEventListener(TimerEvent.TIMER_COMPLETE, fire);
			}

			if (_timer.running)
				_timer.reset();

			_timer.start();
		}

		private function fire(event:TimerEvent):void
		{
			if (_args)
				_targetFunction.apply(_thisObject, _args);
			else
				_targetFunction.apply(_thisObject);
		}
	}
}

Internal Namespace Does Not Work Between Inline Classes

Often times I like to use inline classes to break apart a large or confusing class into a public facing class with several smaller inline classes that I refer to as ‘collaborators’ to the main class. An inline class in Actionscript simply means a class that is defined inline the source file of another class.

package example
{
  public class StateMachine
  {
    public function StateMachine()
    {
    }
  }
}

public class InlineCollaborator
{
  public function InlineCollaborator()
  {
  }
}

These inline classes will implement some functionality of the large class and work together to compose it’s large functionality. A Finite State Machine implementation is a good example of cases for which I do this.

Typically the main class (StateMachine in the above example) will have it’s publicly accessible API, and then I will prefer to namespace the api between it and it’s collaborators so they are hidden as a module from other parts of the system (encapsulation).

It would seem to be sensible if you could use the internal namespace as shown in the example below:

package example
{
  public class StateMachine
  {
    private var _inlineCollaborator:InlineCollaborator

    private var _state:String;

    public function StateMachine()
    {
      _inlineCollaborator = new InlineCollaborator(this);
    }

    internal function updateState(newState:String):void
    {
      _state = newState;
    }

  }
}

public class InlineCollaborator
{
  private var _context:StateMachine

  public function InlineCollaborator(context:StateMachine)
  {
    _context = context;
    _context.updateState( 'initialized' );
  }
}

Unfortunately this isn’t the case. The inline classes are not in fact members of the same package and are in a unique scope of their own that is not addressed in much detail in Adobe documentation from what I have found. If you attempt to compile the code above you will get an error. Interestingly IntelliJ code inspection does not pick up on this either.

You could of course just use the public namespace for the intra class API. This is less then ideal in my opinion because then it implies too much.

The lesser evil I typically choose is to create a custom namespace which at least imparts to other developers that these APIs should really be ‘off-limits’.

This involves adding a second file that defines the namespace. This definitely sucks because it involves adding a boilerplate file which was half the reason I chose to use inline classes in the first place.

In the same package create a namespace file like the one below:

package example
{
	public namespace stateMachine_internal = "stateMachine_internal";
}

Then in the main class file:

package example
{
  use namespace stateMachine_internal;

  public class StateMachine
  {
    private var _inlineCollaborator:InlineCollaborator

    private var _state:String;

    public function StateMachine()
    {
      _inlineCollaborator = new InlineCollaborator(this);
    }

    stateMachine_internal function updateState(newState:String):void
    {
      _state = newState;
    }

  }
}

use namespace stateMachine_internal;

public class InlineCollaborator
{
  private var _context:StateMachine

  public function InlineCollaborator(context:StateMachine)
  {
    _context = context;
    _context.updateState( 'initialized' );
  }
}

LSO For Image Caching – Not So Useful

For work I am experimenting with making a more performant document viewer.

We deal with documents of potentially a very large size – on the order of hundreds of pages.

This necessitates virtualizing the rendering of that text due to minimize the memory footprint.

So in short I want to continually dump the oldest rendered portions of the document as a user browses through it and we render new pages.

However, because the user might very well scroll back and view prior content, I wanted to keep an image around to provide better scrolling usability.

I wanted to utilize the SharedObject facility of Flash Player which provides a local bucket of arbitrary size (pending end user confirmation) to store data.

I was going to create a named SharedObject store for each image, and then simply open and close the SharedObjects from disk as needed to minimize memory footprint.

Unfortunately opening a SharedObject store with data in the 100s of KB size range is a synchronous operation of ~ 100ms duration.

By itself this sort or in sporadic cases this might be acceptable, but I wanted to do this for lots of images as a user scrolls. Opening these SharedObject stored resulted in the frame rate dropping to unacceptable levels.

There are still some things left to try. I’m saving the data as a ByteArray – I could try to compress the data before writing to disk. I could also use lossy compression by turning the images into JPG or PNG and then saving them. Even with small amounts of data however, the read time was a fairly long synchronous operation.

Ideally what would be nice (beyond infinitely fast access to LSO data) would be asynchronous access to SharedObject data. Another alternative would be to add Web Database or similar functionality to the Flash Player.

Browser Full Screen Behavior From Flash Applications

Here is a table that details the various behavior that occurs when attempting to toggle a browser’s full screen mode when a Flash application has focus.

Embedded / Link

The same data inline ->

Minimal Setup for Using Sonar With a Non-Maven Flex Project on OS X

Assumptions:
These instructions are based on my environment which is an up-to-date installation of OS X 10.6 Snow Leopard.

As of 2011-02-14 a standard Snow Leopard install has:
Apache Maven 2.2.1
Java 1.6.0_22

Caveats
This covers an evaluation install of Sonar and getting it working with a Flex project. This is not production ready as we only use the built in Derby database.

Install Sonar

Download the Sonar 2.5 application from here -> http://www.sonarsource.org/downloads/ and extract to where you want to run it from. For our example: /opt/sonar2.5

Download the Flex language plugin and copy the jar file to /opt/sonar2.5/extensions/plugins

Open up a terminal and run the following

/opt/sonar2.5/bin/macosx-universal-64/sonar.sh start

Configure Maven

I have minimal experience with Maven, but it has a dependency based repository system similar to what you would find with Ruby Gems, or many *nix distros such as Debian apt-get or MacPorts.

If you have never used Maven before type the following into a terminal.

mvn

This creates a user specific settings directory ~/.m2/

For a minimal use of Sonar for Flex put the following in a file named settings.xml in ~/.m2/

<?xml version="1.0"?>
<settings>
	<profiles>
		<profile>
			<id>flex</id>
			<pluginRepositories>
				<pluginRepository>
					<id>flexpmd.opensource.adobe</id>
					<releases>
						<enabled>true</enabled>
					</releases>
					<snapshots>
						<enabled>false</enabled>
					</snapshots>
					<name>FlexPMD repository on opensource.adobe.com</name>
					<url>http://opensource.adobe.com/svn/opensource/flexpmd/maven-repository/release/</url>
				</pluginRepository>
			</pluginRepositories>
		</profile>
	</profiles>
</settings>

This tells Maven where to download the FlexPMD jar files from. FlexPMD is the basis for the Flex code analysis.

Configure Flex Project

Now we will setup a minimal Maven configuration for a particular Flex source directory.

Maven uses Project Object Model definition files (pom.xml) to define the structure of a project for building and other tasks. We need to create a very simple one to allow us to run the maven task that will analyze our target source directory and then pipe those results to our running Sonar server.

Identify the root location for your Flex project and create a file called pom.xml.

Paste the following content into it and then configure to need.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
 
  <groupId>com.yourcompany</groupId>
  <artifactId>ApplicationName</artifactId>
  <version>1.0</version>
  <packaging>swf</packaging>
 
  <name>Application Name</name>
 
  <build>
    <sourceDirectory>flexProject/src</sourceDirectory>
  </build>
 
  <properties>
    <sonar.language>flex</sonar.language>
    <sonar.dynamicAnalysis>false</sonar.dynamicAnalysis>
  </properties>
 
</project>

Open up a terminal and cd to the same directory that contains your pom.xml

Type the following:

mvn sonar:sonar -Pflex

Upon completion open up a browser to address http://localhost:9000

Installing Maven 3 on OS X

1. Install Mac Ports

2. Install Maven 3

Open a terminal and type the following:

sudo port install maven3 maven_select
sudo maven_select maven3

a heredoc in Actionscript

This is a frustrating little tidbit that I always tend to forget in every langauge I use.

How to create the equivalent of a ‘heredoc‘.

Here is how you do it in Actionscript:

var expected:String = (
<![CDATA[
Total use change was: 0.00 %
Total for prior time period was: 100 Joules
Total for this time period is: 100 Joules
This is considered: Average
]]> ).toString();

Edit: Doug McCune posted about it first (a long time ago)

Deep Object Check Idiom

This is a post about a little pattern to made the best of a shitty little piece of code. Hypothetical – you’re in codebase that is a bit of a mess in parts, it is brittle and you’re tasked with a bugfix or adding a feature.

And you find something like this…

	doSomethingHere(parent.child.grandparent.nephew.target);

…which amazingly enough is occasionally throwing RTE’s.

So it needs to be fixed. Obviously the first choice would be to apply the Law of Demeter and other various heuristics for refactoring out code smells, but sometimes that’s not feasible.

In those cases I at least try to apply a little consistency and reason to the scenario.

In the basic case in which you are simply having to check a very deep object chain a apply a simple formatting pattern in which I test for the entire object graph minus the last test on the first line and then test the last node of the graph on the 2nd line. This provides clear indication on the 2nd line of what we are testing for without taking up a lot of vertical space, and without requiring someone to scroll all the way to the right.

if (parent && parent.child && parent.child.grandparent && parent.child.grandparent.nephew &&
    parent.child.grandparent.nephew.target)
{
  doSomethingHere(parent.child.grandparent.nephew.target);
}

Additionally I will make a first step to refactoring and make a getter function that moves the garbage away

private function getTarget():Object
{
	if (parent && parent.child && parent.child.grandparent && parent.child.grandparent.nephew &&
   		parent.child.grandparent.nephew.target)
		return parent.child.grandparent.nephew.target

	return null
}

...

if (getTargetValue())
{
	doSomethingHere( getTargetValue() );
}
...

Exclamation Point of Death

In Flash Player 10.1 assignment of a negative integer value to a vector’s length property results in a blue exclamation point of death (EPOD).

Apparently there are other scenarios that result in this error as well.

IMHO much better looking than the script error dialog but entirely unhelpful in source of issue.

Disabling the RollOver Highlight in Spark List

I found this one a little frustrating.

AFAIK you can’t easily disable Flex automatically coloring the background of ItemRenderer instances in a Spark List – such as when you mouse over items or click on them.

To do this you must ensure the autoDrawBackground property is set to false on the ItemRenderer instances used within the list.  You can’t just set it from the List component as a style setting or a boolean property.  This must be done by extending the ItemRenderer OR perhaps through using an inline component definition for the ItemRenderer (which I haven’t tried yet with Spark List).