Powerful Cancelable Events

When you dispatch events I bet that most Flash/Flex devs don’t take advantage of the fact that dispatchEvent returns a Boolean value indicating wether or not the event has been canceled. Normally your code looks similar to this:

var event:MyEvent = new MyEvent(MyEvent.FOO);
dispatchEvent(event)

If you want to let something only happen if the event wasn’t canceled it should look like this:

// The second "true" sets the event cancelable, first one sets bubbles
var event:MyEvent = new MyEvent(MyEvent.FOO, true, true);
if(dispatchEvent(event)){
   // do the actual task
}

With the code above the event listener can control if the actual task gets executed or not:

dispatchingInstance.addEventListener(MyEvent.FOO, fooHandler);
function fooHandler(event:MyEvent):void{
   // depending on what you want to achieve you can cancel the event by calling preventDefault
   event.preventDefault();
   // this will cause dispatchEvent to return false so the actual task doesn't get executed
}

A real life usecase for UI related events could be dispatching an event before closing a popup window:

function closeButtonHandler(event:Event):void{
   if(dispatchEvent(new MyWindowEvent(MyWindowEvent.CLOSE, true, true)){
      PopUpManager.closePopup(this);
   }
}

Cancelable events are also very interesting when you develop APIs because it offers powerful and easy to use hooks for the API user.
I am making heavy use of cancelable events in my swizdesktop lib. Catching the different update phase events you get hooks to stop the update process by calling preventDefault on the listened event.

Connecting Pivotal Tracker with GitHub

GitHub with Pivotal Tracker is the killer agile combination.
With the just release Tracker v3 API update it is now easy to connect them.

You only have to configure GitHub Post-Receive Hooks so you can automatically deliver stories/bugs by providing the Tracker ID in the commit statement like: Fixes #TrackerId

How to set it up:

  1. Create a Pivotal Tracker API token: Login to PT -> My Profile -> Create New Token
  2. GitHub -> Project -> Admin -> Service Hooks -> Post-Receive URLs
  3. Paste https://www.pivotaltracker.com/services/v3/github_commits?token=YOUR_TOKEN_FROM_STEP_1

Now that was easy!

Flex 4 main class interface errors

I ended up a few times with these kind of errors while migrating to newer Flex 4 builds:

Description Resource Path Location Type
1044: Interface method invalidateParentSizeAndDisplayList in namespace mx.managers:ISystemManager not implemented by class _Main_mx_managers_SystemManager. example-project line 23 Flex Problem

Description Resource Path Location Type
1144: Interface method callInContext in namespace mx.core:IFlexModuleFactory is implemented with an incompatible signature in class _Main_mx_managers_SystemManager. example-project line 23 Flex Problem

The location/resource for these errors is the main MXML itself but that’s all you get. So you ask yourself what went wrong? A quick Google search does not help (until I blogged this hopefully) so where to start?

The problem is that you are mixing different SDK versions. In my case my project linked to a library which was compiled with a different SDK version and now the important thing: the framework linkage in the library was set to “Merge into code“. Change it to “Use default (external)” and you are fine.

Properties for actionscript3_v3_api
Uploaded with plasq’s Skitch!

Migrate Flex 4 Beta 2 to Latest Nightly Builds

I have a project based on Flex 4 Beta 2 and now I wanted to migrate to the latest nightly build since there were many important fixes.
Things have changed so here what I did to get my project up and running again:

Halo is now mx

The namespace for halo (Flex 3) components changed from xmlns:mx=”library://ns.adobe.com/flex/halo” to xmlns:mx=”library://ns.adobe.com/flex/mx”. Just do a quick search and replace and this one is solved. Also do not forget to update you CSS file namespace to @namespace mx “library://ns.adobe.com/flex/mx”;

Flex 3 compatibility mode is gone

My project originally was based on Flex 3 so I used the Flex 3 compatibility option in Flex 4 Beta 2. This does not seem supported anymore and you get lots of dependency errors for halo/mx components that they require at least 4.0.0. So disable the Flex 3 mode and select the halo theme to be still compatible with Flex 3 aka halo components.

Ant

I build my AIR project with Ant so I had to define to use the halo theme:

<compiler.theme dir="${flex.sdk.dir}/frameworks/themes/Halo/">
	<include name="halo.swc" />
</compiler.theme>

In my case I switched to build 4.0.0.13323 and it looks pretty cool. The compiler seems faster and my app in general performed well. There is now also a Spark ToggleButton but a few things are still missing like IconButton, SparkAlert and so on. Anyway, I use Flex 4 for production already and feel pretty solid about it. The workflow is way better than with Flex 3 because of the new state syntax, better skinning, FXG, light weight groups etc.

Chunk File Upload

A while back I worked on an AIR client which had to be capable uploading very large files. In this scenario you have to upload files in little chunks. The research on how to solve this took me quite a while so I thought it would make sense to post my findings.

More or less I have taken the NirvanixBinaryUploader as a base and then extended (I should say forked) it to fit my needs.

The class UploadFile takes a file and upload URL as constructor arguments. You can also define a separate resumeUrl if it differs from the upload URL. Further you can set the flag doCalcMD5 to true which is kind of experimental. It works using the as3corelib MD5Stream class but calculating the MD5 hash for large chunks like 1MB took about 20-30 secs on my machine.

I have also implement getters for bytesLoaded and bytesTotal so I can use an instance as a data source for the Flex ProgressBar in polled mode which comes in very handy.

<mx:ProgressBar source="{uploadFile}" mode="polled" label="Uploading" />

If you want to use my code I guess you want to subclass my class because it contains example code and you probably want to override at least the createBody method. However, if you have a similar scenario like me, the code might be a good start.

Another interesting read on this topic was A long journey through chunked transfer and file uploading.

Here now the code:

Twitter AS3 OAuth Lib with Flex 4 example

I have build a little Twitter AS3 library which handles Twitter OAuth authentication and let’s you update your Twitter status. The lib basically uses the OAuth AS3 lib and should be a good example how to use the actual OAuth lib.

This is still basic functionality but since it’s open source someone may fork and extend it. To get a simple idea of the current feature-set have a look at the ITwitter interface.

Further I have build a simple Flex 4 example AIR app which shows things in action. The only thing you need to do upfront is registering a Twitter app to obtain an OAuth consumer key and secret which you have to add to the example:

BTW: You maybe have already granted access to your Twitter account for some apps which you can check here.