Thanks, Mister! » Flash http://www.thanksmister.com Adobe Flex & AIR Development Mon, 19 Jul 2010 17:28:02 +0000 en hourly 1 Garbage Collection and Event Listeners http://www.thanksmister.com/index.php/archive/be-good-clean-up-your-event-listeners/ http://www.thanksmister.com/index.php/archive/be-good-clean-up-your-event-listeners/#comments Fri, 29 May 2009 07:59:17 +0000 Mister http://thanksmister.com/?p=575 On a recent AIR project I have become aware and subsequently obsessed with memory. My concerns have centered around garbage collection and event listeners, specifically how you clean up event listeners to allow Garbage Collection (GC) to clean up objects. Most DisplayObjects implement the EventDispatcher class that allows it to broadcast events. Trolling around the googleverse I found some interesting ways to insure that you break strong references to allow clean up or manually remove event listeners on your own to make your application more memory savvy.

When you use addEventListener() method and register a event listener to an object you create reference. By default any object that has a reference to a listener will keep that reference until it is removed using the removeEventListener() method. Strong references will not be cleaned up by Flash player GC and remain in memory until the application is closed or the world ends, whichever comes first. This makes for a horribly leaky AIR applications, especially those applications that may run for days on the user’s system without being restarted.

Use Additional Parameters of Listener

The addEventListener() method does have some additional (and seldom used) parameters to create a weak reference when adding the listener to an object. On of those parameters is “useWeakReference”, the 5th parameter of the method. To utilize this parameter you need to set it from false to true:

1
2
3
4
5
6
7
8
9
10
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false);
.....

var button:Button = new Button()
button.addEventListener(MouseEvent.click, handleMouseClick, false, 0, true);

private function handleMouseClick(event:MouseEvent):void
{
 // handle the event
}

This will allow the event to be cleaned up at some point by Flash garbage collection. If you are like me and and find it annoying that the useWeakReference parameter of the addEventListener() method is false by default, you can can extend the object and make useWeakReference true by default, then use that object in your project:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.custom.controls
{
    import mx.controls.Button;

    public class CustomButton extends Button
    {
        public function CustomButton()
        {
            super();
        }
       
        override public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=true):void
        {
            super.addEventListener(type, listener, useCapture, priority, useWeakReference);
        }
       
    }
}

Explicitly Removing Listeners

Even though setting useWeakReference=true will most likely mark an object for clean up, to be even more certain you should explicitly remove the event listener with the removeEventListener() method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private var button:Button;

private function init()
{
     var button:Button = new Button();
     button.addEventListener(MouseEvent.click, handleMouseClick, false, 0, <strong>true</strong>);
}

private function handleMouseClick(event:MouseEvent):void
{
   button.removeEventListener(handleMouseClick);
   button = new Button();
   // handle the event
}

Now you are certain that you have cleaned up and removed the listener manually and the object will be removed at some point during GC since there is no longer an explicit reference to the object.

Anonymous Functions

Another technique that comes in handy is to removing event listeners when using anonymous functions as event handlers. The trick to this techniques is the arguments.callee:

1
2
3
4
var button:Button = new Button()
button.addEventListner(MouseEvent.CLICK, function(event:MouseEvent):void {
      event.currentTarget.removeEventListener(event.type, arguments.callee);
});

Bummer

Now for the disappointment. If you create an event listener using MXML they are always going to have strong reference by default with no way to change useWeakReference and they make it difficult to use removeEventListener() method:

1
2
3
4
5
6
private function handleClickEvent(event:Event):void
{
     // handle event
}

<mx:Button click="handleClickEvent(event)"/>

So these objects will not be cleaned up when created in this way unless you have some clean up method that explicitly removes the event listeners or you add the event listeners to MXML object using ActionScript instead of binding.

So basically you need to add objects or listeners in ActionScript rather than use MXML when using the addEventListener() method, which sort of makes MXML less valuable in some respects because binding to objects and listening to events is what drives the framework.

Additional Links

For a great discussion on the topic, see Ted Patricks post and be sure to read all the comments as many of the examples were taken from discussion.

Garbage Collection Articles:

http://spreadingfunkyness.com/garbage-collection-with-flex-and-adobe-air/
http://blogs.adobe.com/aharui/2007/03/garbage_collection_and_memory.html
http://gskinner.com/blog/archives/2006/08/as3_resource_ma_2.html
http://www.adobe.com/devnet/flashplayer/articles/resource_management.html

]]> http://www.thanksmister.com/index.php/archive/be-good-clean-up-your-event-listeners/feed/ 3 HTTP Status 201 causing Flex #2032 Error in IE only http://www.thanksmister.com/index.php/archive/http-status-201-causing-flex-2032-error-in-ie-only/ http://www.thanksmister.com/index.php/archive/http-status-201-causing-flex-2032-error-in-ie-only/#comments Sat, 28 Mar 2009 16:40:13 +0000 Mister http://thanksmister.com/?p=508 I ran into a problem right when we were going to launch a new Flex web-based application to production (of course) with Internet Explorer and Flex. I was calling an RESTful service that returns XML and using the built-in Flex HTTPService with either POST/GET as the method for the request. Most of the service calls either return a HTTP Status Code of 200 (OK) or they throw an error. For one POST request that returned a HTTP Status of “201 Created” Flex threw up a 2032 Stream Error in response. Here is a brief definition of the error:

The referenced resource does not exist or the swf is trying to access a file across a restricted domain.

This error causes Flex to report a fault error on the request even though it was successful. The 201 status code is handled fine in all other browsers except IE (6 & 7). I did some research on the issue thinking it must be something easy to fix, that many others have run across before me. It seems the error is out there for lots of different reasons.

One post reported that IE was having a caching issues, and the way to solve it was to add a random number on the end of your service calls or you have to set the response headers in your server side page to prevent caching. This one sounds similar to a FireFox issue I ran into a couple years back, but didn’t effect the results:

http://www.judahfrangipane.com/blog/?p=87

The overwhelming number of posts on the subject suggested that Rails and Adobe both share the responsibility for this error (depending on if you are a Rails dev or a Flex dev, the debate rages as to who is to blame). The fix seems to be changing status returned from Rails to something other than 201. This seems to be the legit solution since the web service I was hitting is running Rails:

http://stackoverflow.com/questions/354936/flex-2032-stream-error-in-ie-only
http://nachbar.name/blog/2008/06/14/flex-railsprotect_from_forgery-problem-with-rails-21-produces-ioerror-2032/
http://onrails.org/articles/2008/02/20/dealing-with-http-errors-in-a-flex-with-rails-application
http://www.manning-sandbox.com/message.jspa?messageID=64372
http://nachbar.name/blog/tag/adobe-flex-programming/

If you think Adobe should fix the issue (as some Rails people protest) then you can view all the other bug reports Adobe already had lined up to fix that involve a 2032 Stream Error, just type in Explorer 2032 and you will find them:

http://bugs.adobe.com/jira/secure/QuickSearch.jspa

The workaround we ended up implemented was totally client based. In the fault handler of this particular service request, I look for the errorID value of the Fault event and ignore it. It was all I could do on short notice and I wasn’t about to convince the backend dudes that we needed to change the server response from 201 to 200, pick your battles and my first battle was to get this app into the war.

For me the real culprit is IE (easy target). Something that works in every other browser but IE is so friggen familiar to anyone who has done any cross-browser work. IE sucks, it has always sucked, and it will always suck, period. My other thought is about web services and codes in general. As an application developer, I use a lot of different services, consuming data from many different pipes. I couldn’t tell you as a consumer of web services and an application designer what the value of having a returned Status of 201 has over returning a Status of 200, can you? I make a request, and if the request is good, just tell me ok, I don’t need to know that the server returned a HTTP Status Code of 311 (the server code for “I just made you a sandwich”). I need to know only two basic things, was the request good, or did it explode?

I think some API dudes and backend dudes are purists, they want server codes to bubble up to the client so we can admire them, even though in practice (meaning you actually build applications with these services) you don’t really need the extra data. Hey, I am totally used to having to make 5 service calls to accomplish one thing with a web service, I would never ask for the service to be changed to convenience the client, but some information is superfluous and could be scaled down.

UPDATE

Saw another blog post about the same topic at UserFlex.

- Mister

]]> http://www.thanksmister.com/index.php/archive/http-status-201-causing-flex-2032-error-in-ie-only/feed/ 3 Xdrive AS3 Library http://www.thanksmister.com/index.php/archive/xdrive-as3-library/ http://www.thanksmister.com/index.php/archive/xdrive-as3-library/#comments Tue, 17 Jun 2008 22:25:41 +0000 Mister http://thanksmister.com/?p=89 I have not posted in a long long while it seems. That would be nice if I were just hanging out on a beach some place. However, I have been busy doing lots of things for work and working on a new AS3 library.

I have been developing for the past few months an AS3 library (as3xdrivelib) wrapper for the Open Xdrive JSON API. Xdrive is an online storage platform and they offer a free JSON API for developers to create storage and other types of applications upon their service. With Xdrive, each user gets a 5GB account for free, with additional costs for more storage.

I finally got around to making an AS3 library that wraps much of the Xdrive API and abstracts the inner workings from those developing Flex, AIR, or Flash applications. The Xdrive API is extremely rich, it offers ways for users to share folders, collaborate on shared collections (look for a later post and application on this feature), and publish assets. However, main part of the platform is file management.

I have placed the library on Google Coders and included a Flex sample application for doing some basic operations with Xdrive. You just need an Xdrive account to start using the library. I am hoping this helps developers starts to build some cool applications using the Xdrive plaform. Along with the library, I included an example application called Xdrive SlimDrive, which demonstrates the basic functionality for doing file management and shows how to work with the library.

===============
as3xdrivelib
===============

The as3xdrivelib project is a wrapper for the Open Xdrive JSON API. It provides much of the client-side functionality for applications; for example, authentication, uploading files, sharing files, and basic file management.

Project Page: http://code.google.com/p/as3xdrivelib
Project Group: http://groups.google.com/group/as3xdrivelib

Authors: Michael Ritchie, Maria Vazquez, Lucas McGregor, Joe Provost
Dependencies: corelib (http://code.google.com/p/as3corelib)

How to use the as3xdrivelib with Cairngorm.

I didn’t get a chance to post this to the Google Code, but I wanted to show a quick login example that uses the library with Cairngorm. The following example uses a very simplistic login screen with a Cairngorm Event/Command/Delegate to login to a users Xdrive account. The example is pretty straight forward if you know Cairngorm already. There are some things to notice in the Delegate and Command. In the Delegate, notice how the I setup the delegate to use the as3xdrivelib as a service and how I mapped the events back to the command.

1
2
3
4
5
public function login(user:User) : void  {     
     var token : XdriveAPIToken = service.login(user);     
     token.addEventListener(XdriveAPIEvent.API_RESULT, responder.result);    
     token.addEventListener(XdriveAPIEvent.API_FAILURE, responder.fault);
}

In the Command notice how I map the payload (user) on the API result to the Model. This is explained in the documentation for the library, but basically the payload contains a return variable(s) name on the payload event that almost always represents the object you send to the library method.

1
2
3
4
5
public function result( event : Object ) : void        
{                                    
     var resultEvent : XdriveAPIEvent = XdriveAPIEvent(event);            
     model.user = resultEvent.payload.user as User; // store value in model for binding                
}

Example File (right-click to view source/download)

Update

AOL killed Xdrive and so the API is also dead, code still available but its not defunct and won’t work with Xdrive. Thanks AOL for killing yet another good product.

- Mister

]]> http://www.thanksmister.com/index.php/archive/xdrive-as3-library/feed/ 0 Custom RichTextEditor http://www.thanksmister.com/index.php/archive/custom-richtexteditor/ http://www.thanksmister.com/index.php/archive/custom-richtexteditor/#comments Thu, 24 Apr 2008 23:18:08 +0000 Mister http://thanksmister.com/?p=88 One of the longest running post on my blog has been about creating XHTML output from the Flex RichTextEditor control. I always thought it would would be nice if someone took all the comments and suggestions for that post and created a customized control that outputs proper XTHML. Well, Axel Jenson has created such a custom control. I want to send many thanks to all those who posted over the past year and to Axel for stepping up and creating this custom control for Flex. Give the component a try and let Axel know what you think.

-Mr

]]> http://www.thanksmister.com/index.php/archive/custom-richtexteditor/feed/ 0 Omniture Tracking in Flash, Flex and AIR Applications http://www.thanksmister.com/index.php/archive/omniture-tracking-in-air-applications/ http://www.thanksmister.com/index.php/archive/omniture-tracking-in-air-applications/#comments Sun, 27 Jan 2008 23:01:13 +0000 Mister http://thanksmister.com/?p=85 If you are developing Enterprise level applications chances are you are either used Omniture or you will be asked to integrate with Omniture tracking services. This post is not really about the specifics of Omniture tracking, but rather about the implementation methods for Flash, Flex, and AIR (with Flex). Usually, Omniture tracking events are sent using JavaScript on a web page. An HTML page would include the Omniture JavaScript library and events in your web application would call methods in the libary.

When creating RIA with Flex or Flash you have a couple of options. Ominture provides a proprietary ActionScript library, called ActionSource, for easy integration. ActionSource is a Flash MXP component library that transmits analytic data to Omniture without relying on calling JavaScript methods. This implementation is best for situation when your have a Flash file that can not call JavaScript. Brightcove has a good article describing this type of implemenation. Integrating Omniture services with Flex does not require the ActionSource library.

Flex has the ability to write and call JavaScript directly. With Flex, you can use the ExternalInterface call to call JavaScript functions on the page. So a typical call might look like this:

1
ExternalInterface.call("trackOmniture", omnitureType);

Where the value for the omnitureType represents the information you want to transmit to Omniture for analysis and “trackOmniture” is the name of a JavaScript method on the HTML embed page for the Flex application that calls Omniture methods in the included JS library from Oniture for HTML integration. Just setup your account information and other parameters in the Omniture JS library like you normally would for tracking Omniture in HTML-based applications.

Adobe AIR introdocues some new challenges and new solutions for Omniture tracking. An AIR application does not run in a web browser, its a desktop application that can make HTTP requests. Using ExternalInterface calls to an embed HTML page is not an option in this scenario. Now, you can create an entire AIR application with just HTML and JavaScript. However, in our implemenation we want to use Flex in AIR to create the application.

Lets talk a little bit about the new AIR security model introduced with Beta 3. According to Adobe :

One of the main threats facing HTML applications, whether desktop or web, are injection attacks which result in malicious code execution. Code is usually injected via a few common vectors such as via URL handling (“javascript:” and other dangerous schemes), eval() and assigning external HTML content to DOM elements such as innerHTML and outerHTML.

As a result of the security vulnerability AIR now uses two kinds of sandboxes, one is called the Application sandbox wich allows full access to AIR API’s but disables the JavaScript parser after the initial load to prevent exposure of the API to possibly harmful JavaScript calls (like eval()). The other sandbox is the “Non-application” sandbox. This is where you can execute JavaScript like you would in a browser, but it does not have direct access to the AIR system API’s and therefore can’t raise havoc on your application. Now to talk between the two sandboxes you need to use Adobe’s new SandboxBridge mechanism which can expose methods in both the parentSandboxBridge (the application sandbox) and the childSandboxBridge (the non-application sandbox location). So what does this mean for handling Omniture tracking in AIR?

Well, the Omniture JavaScript file is pulled from a separate domain and contains JavaScript deemed a security risk. This means that Omniture needs to run in the non-application sandbox, but the application reporting calls need to be made in the application sandbox.

This makes for an interesting implementation. Adobe does offer a good example of scripting between content in different domains. In this method, the main HTML content is loaded into the initial window of the application security sandbox, while the content from another domain is loaded into a <iframe> that specifies the content is placed in a non-application security sandbox.

Our application is built Flex within an AIR project, so we need to change the example from Adobe just a little bit to fit our specific implementation since they are building an AIR application with HTML. We are going to create an MXML file that loads an HTML page from a directory within our application called “omniture”. We do this using an HTMLLoader that loads our main HTML content (track.html). We use the instance of the HTMLoader to call a method within the loaded HTML window called “track”. Loading HTML into an HTMLLoader control will execute the HTML code on that page. So this page contains basic HTML and JavaScript that does not have a security risk. This loaded HTML page is not displayed inside our application the HTMLLoader is used merely to load and execute the HTML code, and also serve as a way to reference the JS methods of the loaded content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
private var html:HTMLLoader; // omniture tracker
/**
* @private
* Create an HTML object to handle Omniture tracking within
* the application.
**/
private function createHTMLTracker():void
{
    html = new HTMLLoader();
    //html.addEventListener(Event.COMPLETE, onHTMLLoadComplete);
    html.load(new URLRequest("omniture/tracking.html"));
}
           
/**
*Tracks Ominture events by callint a JavaScript function within the page
*loaded into an HTML control.
*@private
**/
private function omnitureHandler(omnitureType):void
{
 if(omnitureType != null){
 try{
 html.window.track(omnitureType);
 } catch(e:Error){trace(e.message);}
 }
 }

The track.html page also loads another HTML page into an <iframe> tag and establishses our SandboxBridge between the track.html page and the loaded HTML page. This second HTML paged (ui.html) loaded into the iframe includes our Omniture JavaScript library. The ui.html page can contain the JS library because we specify in the properties of the iframe that the content be placed in a non-application security sandbox. Our project includes a sub-directory called “omniture” that has two HTML pages, the tracking.html and the ui.html page. It also includes one more file, the AIRAliases.js file, which allows us to use AIR shortcuts within the tracking.html file. Below is the code for the tracking.html page this page does stray too far away from the example provided by Adobe, just notice the iframe tag settings for loading pages from a sub-directory within your AIR project.

    track.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
    <head>
         <script type="text/javascript" src="AIRAliases.js">
            // include the AIRAlias.js file to access AIR short cuts, like air.trace
         </script>
         
         <script type="text/javascript">
            // create an object that will be used to expose AIR functionality
            // (developer functions) to the browser sandbox
            var Exposed = {};
               
            // expose the trace method
            Exposed.trace = function(str) {
                    air.trace(str);  // this trace shows up in debugger
            }
               
            function doLoad() {
                // place Exposed on the parentSandboxBridge property of the browser sandbox (iframe)
                var frame = document.getElementById('child').contentWindow.parentSandboxBridge = Exposed;
                   
                // get the functions exposed from the Browser Sandbox
                window.track = document.getElementById('child').contentWindow.childSandboxBridge.trackPage;
             }  
         </script>
    </head>
    <body onload="doLoad();">
        <iframe
            id="child"
            src="http://localhost/omniture/ui.html"
            sandboxRoot="http://localhost/omniture/"
            documentRoot="app:/omniture/">
        </iframe>
    </body>
</html>

The ui.html page is loaded within the iframe, who sets it to load the content in the non-application security box (sandboxRoot=”http://localhost/omniture/”). The ui.html page uses JS to include the Omniture library (my_omniture_endpoint is specific to each client for Omniture tracking):

<script src=”http://my_omniture_endpoint/omniunih.js” type=”text/javascript”/>

The page also establishes our Omniture suite name:

var s_account = “mysuitename”;

The method track is exposed to the track.html window; this is in turn called from our MXML application, passing in Omniture tracking information. The ui.html page makes all the necessary calls to Omniture within the track method. Everything is secure and AIR is happy. Below is the ui.html code, I commented out the client specific information.

    ui.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
    <head>
        <script>
            var s_account = ""; // your omniture suite name
        </script>
       
        <script type="text/javascript">
            // developer function implemented in the browser sandbox
            function track(pagename)
            {
                // Call your Omniture JS library methods here.....
               
                // trace out the return in the parent
                parentSandboxBridge.trace("tracked: " + pagename);
               
            }
               
            function doLoad()
            {
                // expose this function for the application sandbox by writing to the childSandboxBridge property of the window
                childSandboxBridge = {'trackPage': track};
            }
        </script>
       
       <script src="http://my_omniture_endpoint/omniunih.js" type="text/javascript"/>
       
    </head>
    <body onload="doLoad();">
    </body>
</html>

With this implementation method you can perform Omniture tracking from inside your AIR applications just like you would if they were web-based applications or Flex applications using ExternalInterface calls. The added benefit of including the Omniture JS library dynamically within the ui.html window is that the application always gets the latest version of the JS library. We could have taken the entire JS library and wrote it to a local .js file within our project. We could have also rewritten the JS library to exclude the extensive use of “eval()” and run it within the application security sandbox. However, I think this implementation allows the most flexibility. The new AIR security model doesn’t prevent us from running JavaScript; it just requires us to take some extra steps to work with content from other domains, all while being secure.

- Mister

]]> http://www.thanksmister.com/index.php/archive/omniture-tracking-in-air-applications/feed/ 3 Better (Cooler) Flex Preloader http://www.thanksmister.com/index.php/archive/better-cooler-flex-preloader/ http://www.thanksmister.com/index.php/archive/better-cooler-flex-preloader/#comments Tue, 24 Jul 2007 18:06:54 +0000 Mister http://thanksmister.com/?p=67 Jesse Warden has a great new article about developing a custom Flex preloader using Flash (a cooler preloader as he calls it).  He also has a new look for his blog that you can now read (just kidding Jesse).   Jesse’s post relates to my previous post regarding Error #2025.  When I developed a custom preloader in Flash I made the terrible mistake of using a Flash 9 component that caused a huge error in my Flex app.    Jesse’s post is part 1 of 3, so look forward to subsequent posts. 

]]> http://www.thanksmister.com/index.php/archive/better-cooler-flex-preloader/feed/ 1 Error #2025 – Clash between Flex 2 & Flash CS3 http://www.thanksmister.com/index.php/archive/error-2025-clash-between-flex-2-flash-cs3/ http://www.thanksmister.com/index.php/archive/error-2025-clash-between-flex-2-flash-cs3/#comments Tue, 26 Jun 2007 14:50:13 +0000 Mister http://thanksmister.com/?p=64 I got my new copy of Flash CS3 and proceeded to make a new preloader for my Flex application.  I made a document Class for my CS3 file and attached a CS3 ProgressBar component.  I had a public function in the Document Class for setting the progress of the Flex preloading.   I dropped the SWF file into my Flex document and set up all the preloading code.  If you set a preloader in Flex it will load that file in the first frame before it loads the rest of the Flex application.  You can do progressive preloading the same way you would in Flash.   The CS3 preloader worked like a charm because with CS3, I can now (though still not elegantly) talk to the functions inside the loaded SWF file.   Here is the CS3 Document Class code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.preloader
{
    import flash.display.MovieClip;
    import fl.controls.ProgressBar;
    import fl.controls.ProgressBarMode;
   
    public class WelcomeScreenClass extends flash.display.MovieClip
       {
        private var progressBar:ProgressBar;
       
            public function WelcomeScreenClass()
               {
            progressBar = new ProgressBar();
            progressBar.indeterminate = false;
            progressBar.mode = ProgressBarMode.MANUAL;
            progressBar.setSize(150, 22);
            progressBar.move(10, 50);
            progressBar.setStyle("barPadding", 3);
            progressBar.setProgress(50, 100);
           
            addChild(progressBar);
            }
       
        public function setLoaderProgress(loaded:Number, total:Number):void
        {
            progressBar.setProgress(loaded, total);
            trace("loaded: " + loaded + " of total: " + total);
        }
    }
}

This all sounds good so far, a decent marriage between Flash and Flex, weeee!!   About a week later I noticed a bug in my Flex application.  Every time you hit the Tab key on any dialog created with the PopUpManager or even the Alert, I would get the following error code:

1
2
3
4
5
6
7
8
9
10
11
12
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
 at flash.display::DisplayObjectContainer/getChildIndex()
 at mx.core::Container/getChildIndex()
 at mx.containers::Panel/getChildIndex()
 at fl.managers::FocusManager/::getChildIndex()
 at fl.managers::FocusManager/::sortByDepth()
 at fl.managers::FocusManager/::sortByTabIndex()
 at Array$/Array::_sort()
 at Array/http://adobe.com/AS3/2006/builtin::sort()
 at fl.managers::FocusManager/::sortFocusableObjectsTabIndex()
 at fl.managers::FocusManager/::sortFocusableObjects()
 at fl.managers::FocusManager/::keyDownHandler()

This particular bug is very vague and a search of the Internet yielded nothing that seem to fit my situation.  I am using Cairngorm with Modules and my suspicion was that I had created a shared code typology.   Modules are cool because they can reduce your initial application load, but they are a real pain in the ass to manage because you run into these strange bugs that always seem related to a race condition with loading one Class or Manager into one module.    I spent a few days tracking down this issue, testing each module, commenting out code.  I finally created a new project without any modules, determined that it was the shared code typology issue.  I still had the same issue.

Something about the error dawned on me, the “fl.managers”.   This is a CS3 code package that Flex does not have.   I then decided to remove my CS3 prelaoder, and guess what, the bug went away.  I had inadvertently created my own bug by using CS3 with the new ProgressBar component.  This component most likely extends UIComponent, which contains the FocusManager, and therefore, causes the issue with the FocusManager in Flex.  According to shared code typology 101, the first instance of the loaded manager wins.

The solution was to yank out the CS3 ProgressBar component and just create my own progress bar using the Flash drawing tools.   This was a tough error, and probably not the first one that will be encountered as Flash and Flex start mingling more in the near future.  

-mr

]]> http://www.thanksmister.com/index.php/archive/error-2025-clash-between-flex-2-flash-cs3/feed/ 15