Notes from the Flex Flash and ColdFusion Trenches - actionscript3

Ouch, it hurts when i do that

Wed, 10 Mar 2010 14:45:00 -0400

As promised, here are the slides for "Ouch! It hurts when i do that." presentation first delivered at 360Flex San Jose, March 10th, 2010.

Flex 360 tickets selling fast

Thu, 17 Dec 2009 12:13:00 -0400

Down to the last 5 (Cheap) tickets left for 360|Flex. Register now, save $100 and get the same awesome content for a little less coin. Act fast, these last tickets won't last. When they're gone, the regular price of $599 kicks in. Come on out and hear me give advice how not to hurt yourself with code, in my "Ouch, it hurts when i do that" talk.

Fun with custom preloaders in Flex

Fri, 02 Oct 2009 11:13:00 -0400

As you probably know, its pretty easy to use a custom preloader in flex to replace the built in preloader shown as a flex application loads. There are a few tricks to remember with a custom preloader though, remember that the preloader is built to be displayed until the flex framework is done downloading. As such, the preloader won't display until all the classes needed by the preloader are done downloading. For this reason, its really important to remember that your custom preloader class doesn't make use of the flex framework, because if it does, the users will see nothing until enough of the framework has been loaded to display the preloader, and the preloader will only be displayed while the remainder of the framework is downloaded. Fortunately, the DownloadProgressBar class makes little use of the flex framework, as it extends Sprite, instead of UIComponent, and only utilizes a few event classes from flex, which don't require any additional framework classes. A quick google search can show you dozens of examples on subclassing DownloadProgressBar to create a preloader which matches your application. A larger challenge is faced when you have additional needs from a preloader. Frequently, we are tasked with writing a preloader which is shown during the initial download, as well as remaining displayed until some startup procedures are complete within the application. Some might try to approach by referencing Application.application within the preloader, to listen for a custom event indicating that the startup procedures are complete. Of course, this is not an ideal solution, as referencing the Application class will link in the mx.core.Applicaiton class, which in turn links in around 170k worth of the Flex framework. A better approach is to create a new class, which is not linked to the flex framework, which can act as an event bus between the main application and the preloader. If this class is built as a singleton, you can be assured that both the main application and the preloader are accessing the same instance, allowing for a simple and convenient mechanism for the preloader to listen to the main application, without needing any reference to the application or the flex framework.


package net.digitalprimates.preload
{
	public class PreloadEventBus extends EventDispatcher
	{
		public var isReady:Boolean = false;
		
		private static var _instance:PreloadEventBus;
		
public static const READY:String = "READY";
		
		public static function getInstance():PreloadEventBus
		{
			if (!_instance)
			{
				_instance = new PreloadEventBus(new SingletonEnforcer());
			}
			return _instance;
		}
					
		public function PreloadEventBus(singletonEnforcer:SingletonEnforcer)
		{
			if (!singletonEnforcer)
			{
				throw new Error("PreloadEventBus is a singleton class, use getInstance() instead");
			} 
		}
	}
}

class SingletonEnforcer {}

With this class, when the main application is done with its startup procedure, it's a simple process to get a reference to the PreloadEventBus, set isReady to true, and dispatch an event.


protected function applicationCustomStartupDone(event:Event)
{
	var bus:PreloadEventBus = PreloadEventBus.getInstance();
	bus.isReady = true;
	bus.dispatchEvent( new Event ( PreloadEventBus.READY );
}

In the custom preloader, you can override the set preload method, and instead of listening for the complete event as the base class does, listen for the INIT_COMPLETE event, which indicates that the application has loaded, and had its initialize event dispatched. In the event handler for this method, you will get a reference to the PreloadEventBus, check if the application has already set the isReady flag to true, and if not, listen for the READY event.


private function bus:PreloadEventBus = PreloadEventBus.getInstance();

override public function set preloader( value:Sprite ):void 
{    
	preloader.addEventListener( FlexEvent.INIT_COMPLETE , initComplete);
}

An important thing to note is the lack of call to super.preloader in this overridden setter. If the base classes setter is allowed to run, the preloader will act as initially intended, such that it disappears when the application is done downloading. As the purpose of this preloader is to allow for the application to determine when to hide the preloader and start the app, its important we override this functionality. You may find that you need to listen for other events here, such as ProgressEvent.PROGRESS, FlexEvent.INIT_PROGRESS or Event.COMPLETE. This example shows the bare minimum you would need to make use of the preloader


private function initComplete( event:Event ):void 
{      
    if (bus.isReady)
    {
    	completePreloader(event)    	
    }
    else
	{
    	bus.addEventListener(PreloadEventBus.READY, completePreloader);
    }
}

While its not expected that the application will be done with its initialization procedures before the INIT_COMPLETE, but, based on how the application is built, it is possible. To avoid this race condition, the isReady property of the PreloadEventBus is used, so that the preloader only listens for the READY event if the application is not already done with its startup. Last but not least is the completePreloader method, which is called when the preloader has determined that the application is ready. With the logic in initComplete, this same method will be used, regardless whether the state of the application was determined by the isReady property, or by listening for the PreloadEventBus.READY event.


private function completePreloader(event:Event):void
{
	dispatchEvent( new Event( Event.COMPLETE ) );	
}

Event.COMPLETE is used, as this is the event for which the system manager listens, to know that the preloader is done with its job. By preventing its normal mechanism of dispatching, and only dispatching it when the application determines it is ready, you have a nice clean approach to allow the the preloader to display as long as it needs to.

FlexUnit 4 feature overview

Wed, 20 May 2009 09:29:00 -0400

Flex Unit 4 Feature Overview

View more presentations from jefftapper.

More details available on Labriola's blog and openSource.adobe

How not to code Flex Applications

Tue, 19 May 2009 17:08:00 -0400

How Not To Code Flex Applications

View more presentations from jefftapper.

Flex Camp 360 NJ

Tue, 07 Oct 2008 21:35:00 -0400

File this under the better late than never...

On September 26 and 27th, the folks who bring you Flex 360, put on a 2 day "Flex Camp" in New Jersery, which went over extremely well. I was presenting on Testing with Fluint (formerly known as DPUint). Of course, I promised my slides and materials would be up on here before the end of the weekend. Well, realizing its over a week later, I'm finally getting them uploaded now.

So, if you were one of the many asking for those materials, here they are.

slides
source code

I woke up this morning...

Thu, 15 May 2008 08:26:00 -0400

and found the public beta of flash player 10 was out. How cool is that. I knew this would be coming before too long, but didnt realize that it would be out so quickly. This new version is filled with lots of new features aimed at allowing greater "expressiveness" in flash player content, such as 3d effects, custom filters, enhanced text rendering, and revs to the drawing API. Of course, like each version before it, FP10 also has lots of performance enhancements. What are you waiting for go get it on adobe labs I'm particularly looking forward to working with the Advanced Text Rendering features, which promise to allow lots of layout possibilities, including bi-directional text! more later

You can stop waiting, its been released.

Wed, 09 Apr 2008 21:06:00 -0400

I'm a bit late in releasing this news, but our "Flex 3 Training from the source book" was released last week, and is now available from our publisher, as well as the major online bookstores such as Amazon, and Barnes and Noble. Speaking of Amazon, we are currently the #843 best selling of all their books, #15 in the Computers and Internet / Software category, and #8 in Computers and Internet / Programming. Thanks to all of you who have bought our book, and pushed the sales ranks so high. Anyhow, I know folks have been asking me for months when this book would finally be released, and the answer is, last week. Enjoy.

CFUnited Europe, AJAXWorld, and more conference stuff...

Tue, 04 Mar 2008 07:53:00 -0400

Next week I'm off to London to speak at CFUnited Europe, and the following week, I'll be speaking at AJAX World East. In both places, I'll be speaking about the joy that is Flex 3 in all its forms. The CFUnited talk is more focused on how Flex can improve the lives of CF Developers, while the AJAX World one is more focused on how Flex can help RIA developers increase their real world Retursn On Investment from RIA's. On another note, CFUnited has just released the session schedule for their Washington DC Conference in June, and rumor is that the session schedule for WebManiacs should be available shortly.

WebManiacs 2008, Coming soon...

Tue, 22 Jan 2008 12:38:00 -0400

The WebManiacs 2008 conference schedule has been finalized and registration is open. Early bird pricing ends Jan 31. Consisting of a two-day ColdFusion conference ("CFManiacs") coupled with a three-day Flex conference (FlexManiacs), hosting over 70 speakers and 130 distinct topics (some of which are hands-on), WebManiacs promises to have the most comprehensive coverage of Flex, AIR, and ColdFusion at the lowest price. Seating is limited, so folks should register early in order to get into the more popular sessions. I'll be speaking on building AIR applications in the first few days of the conference.

My Speaking Engagements for the first half of 2008

Tue, 22 Jan 2008 12:36:00 -0400

1/18 - Flex Camp Chicago

1/24 - Flex Camp Omaha

2/24-2/27 - Flex 360 Atlanta

3/12-3/13 - CFUnited Europe

5/1-5/4 - CF.Objective()

5/19-5/23 - WebManiacs

6/25-6/28 - CFUnited

Hey, what am I doing on blogs.digitalprimates.net?

Thu, 06 Dec 2007 10:40:00 -0400

I've been a bit slow in getting this announcement out, as I see several other bloggers have already posted on this, but the rumors are true. Tapper, Nimer and Associates. Inc. has teamed up with Digital Primates Inc. Some of you may recall, it was just over a year ago that I teamed up with Mike Nimer to form Tapper, Nimer and Associates. It's quite an odd experience for me to go from a solo propietorship to a team of 15 or so developers in about 16 months. With all the great minds from both our companies working together, we will be able to help more customer on bigger and better projects.

Many of you probably know Mike Labriola for his work on custom Flex Components, he has extended the Flex framework in ways that the developers at Adobe never even imagined. He is also frequently speaking at conferences and User groups. Both Nimer and I ran across him at dozens of speaking events across the country, and as we talked, we found there were far more similarities between us then differences.

One of our first meetings at a conference ended up with him as a co-author on the Flex 2 book. A year and a half of meeting at conferences later, and we were helping each other out on projects so frequently that it made sense to explore further integrating our companies. When the opportunity for Nimer and I to join forces with him and his company, it was much too enticing to pass up.

We are looking forward to doing great work together, continuing to build cutting-edge applications for our clients, continuing to teach the world to build better RIAs, and continuing to serve the community.

Flex 3 Training From the Source - NOW AVAILABLE on rough cuts

Fri, 19 Oct 2007 03:52:00 -0400

I just heard from our editor's that about a 1/3 of the content for our upcoming "Flex 3 Training from the Source" book is now available in Rough Cuts form on Safari from Peach Pit. Obviously, as the Flex 3 product hasnt been released yet, the chapter there may change as the product evolves, but we have been working diligently to get the updates in your hands as quickly as possible. So, for those who are dying to get started with Flex 3, you can start reading the pre-release chapters now.

CFUnited Europe

Fri, 28 Sep 2007 19:51:00 -0400

I've been asked to speak at the first ever CFUnited Europe this year. CFUnited, which has been running each year in the Washington DC area (earlier under the name CFUN) for the past 9 years, is branching out, and hosting the conference in Europe as well. The conference will be on March 12th and 13th in London. Hope to see you there! I hope to be presenting on Flex 3 for ColdFusion developers.

Reflecting an image in Flex

Fri, 21 Sep 2007 19:09:00 -0400

Increasingly, clients have been asking for a "reflection" effect, showing a vertically flipped image of a component next to the actual component. After reinventing the wheel on this several times, I came up with this simple reusable component:

package com.tappernimer.components{

import mx.containers.Canvas;

import mx.core.UIComponent;

import flash.display.BitmapData;

import flash.geom.Matrix;

import flash.display.IBitmapDrawable;

public class VerticalReflection extends Canvas{

private var _component:UIComponent;

public var trans:Number=.5;

public var filterArray:Array=new Array();

public var skewY:Number=0;

public var skewX:Number=0;

public function get component():UIComponent{

return _component;

public function set component(c:UIComponent):void{

this._component = c;

// hack to work around issue with component being

// a dynamically loaded image its possible for the

// image to be fully loaded, but its height or width

// not yet set this call later, keeps retrying until

// the values are set.

if(c.width ==0 || c.height==0){

callLater(resetComponent,[c]);

return;

doReflection();

private function resetComponent(c:UIComponent):void{

this.component = c;

private function doReflection():void {

// create bitmap object

var bmpData:BitmapData = new BitmapData(

	component.width,component.height);

// create matrix

var invertMatrix:Matrix = new Matrix(1,skewY,skewX);

// set matrix to invert vertically, but normal horizontally

invertMatrix.scale(1, -1);

// move matrix, so top is at bottom, and vice versa

invertMatrix.translate(0, component.height);

// draw component flipped

bmpData.draw(component as IBitmapDrawable,invertMatrix);

// create a new holder for the image

var ref:UIComponent = new UIComponent();

// match new holders size to the original

ref.setActualSize(component.width,component.height);

// fill the new component with the image

ref.graphics.beginBitmapFill(bmpData);

ref.graphics.drawRect(0, 0,

	component.width, component.height);

ref.graphics.endFill();

// set the transparency

ref.alpha = trans;

// apply any filters

ref.filters = filterArray;

// add image to stage

addChild(ref);

This component can then be passed any other component to reflect, accepting filters (filterArray), alpha value (trans), and arguments to allow you to skew the reflection. In fact, using it can be as simple as this:

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

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

xmlns:c="com.tappernimer.components.*"

layout="absolute">

<mx:Image id="image" source="images/tn_logo_full.jpg"/>

<c:VerticalReflection id="ref"

component="{image}"

x="{image.x}" y="{image.height}"

filterArray="{new Array(new BlurFilter())}"/>

</mx:Application>

Here is the code running: