HowTo create your developer ToolBox with Mixins

In this post I’ll explain how you can develop a flex library that automatically initializes itself avoiding developers the hassle of remembering how, when and where the libraries need to be initialized and hooked into the application. This can be particularly helpful for debugging libraries like fxSpy, DeMonsterDebugger, KaptInspect, mrdoob, etc. and extremely useful to create your own Flex toolbox that simply plugs-in and can go with you on all your developments.

First, create a class in your library project with whatever name you pick, in my case I’ll call it LibraryInitializer.as, make sure you mark this class to be included on the final swc or even better use the new FB4 option “Include all classes from all sources”. Second and key point, add a public static method named init that receives a parameter and mark the class as a Mixin:

[Mixin]
public class LibraryInitializer
{
    public static function init(systemManager:ISystemManager):void
    {  
    }
}

The [Mixin] metadata tag is extensively used in the Flex automation API and it basically gives you a very interesting hook. The static init method of any class marked as a [Mixin] will be invoked at a very early point during the application initialization phase by the SystemManager class or FlexModuleFactory. The Mixins are executed before the preInitialize event is triggered on the main Application. The parameter that the init method receives is a reference to the related SystemManager so you can mark the parameter as an ISystemManager, InteractiveObject or whatever better fits your needs. You can read about another interesting use of the [Mixin] on the Global Exception Handler post .

By adding a Mixin class in a library and linking the library to an Application what you effectively get is a hook where the library can initialize itself and release the developer from manually initializing it.

Let’s see some real world examples.

Libraries like fxSpy, deMonsterDebugger, KaptInspect or mrdoob are extremely easy to use but on each project you end up doing some repetitive steps or adding conditionally compiled code to your Main application class.

I’ll focus on a sample with fxSpy where you can launch it from a contextual option when you right click on the application and see mrdoob memory monitor. The only step required to integrate this will is adding the following compiler option:

-include-libraries=libs/myToolbox.swc

And this is the library initializer, which basically adds a ContextMenuItem to the contextMenu of the systemManager. Note that we have to wait for the APPLICATION_COMPLETE event, otherwise the Flex SDK will override our contextMenu (it happens on the pre-initialize phase).

package
{
    import com.flexspy.FlexSpy;

    import flash.display.InteractiveObject;
    import flash.events.ContextMenuEvent;
    import flash.events.Event;
    import flash.ui.ContextMenu;
    import flash.ui.ContextMenuItem;

    import flashx.textLayout.elements.GlobalSettings;

    import mx.core.FlexGlobals;
    import mx.events.FlexEvent;
    import mx.managers.ISystemManager;

    import spark.core.SpriteVisualElement;

    [Mixin]
    public class MyToolBoxInitializer
    {
        private static var initializer:MyToolBoxInitializer;

        public static function init(systemManager:ISystemManager):void
        {
            systemManager.addEventListener(FlexEvent.APPLICATION_COMPLETE, applicationCompleteHandler);
        }

        private static function applicationCompleteHandler(event:Event):void
        {
            var systemManager:InteractiveObject = event.target as InteractiveObject;
            systemManager.removeEventListener(FlexEvent.APPLICATION_COMPLETE, applicationCompleteHandler);

            initializer = new MyToolBoxInitializer(systemManager);
        }

        public function MyToolBoxInitializer(target:InteractiveObject)
        {
            createContextMenu(target);
            createMonitor();
        }

        private function createContextMenu(target:InteractiveObject):void
        {
            var contextMenu:ContextMenu = target.contextMenu;
            contextMenu.customItems = [ createContextMenuItem() ];
        }

        private function createMonitor():void
        {
            var sve:SpriteVisualElement = new SpriteVisualElement();
            sve.addChild(new Stats());
            FlexGlobals.topLevelApplication.addElement(sve);
        }

        private function createContextMenuItem():ContextMenuItem
        {
            var contextItem:ContextMenuItem = new ContextMenuItem("Flex Spy");
            contextItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleContextMenuItemSelect);

            return contextItem;
        }

        private function handleContextMenuItemSelect(event:Event):void
        {
            FlexSpy.show();
        }
    }
}

In the Initializer you could also intialize the fps and memory monitor provided by mrdoob by simply adding a new instance to the DisplayList.

These are the benefits I see on this approach:

  • You won’t have to reapeat yourself in different projects initializing the same libraries always in the same way.
  • Your main file won’t be cluttered with infrastructure and glue code to configure your libraries.
  • You won’t need to use conditional compilation for this initializations. You can enable or disable all at once by removing the compiler option. Going an step further you could have diferent compiler profiles / environments on your ant tasks or maven builds or even use the -load-config compiler option to externalize your configurations to an xml file.

You can downdload a zip with 2 sample projects, one for the library and the other for the application using it.

Shortly I’ll blog about some of the things I have in my toolbox that could be helpful for you too.

2 Comments to “HowTo create your developer ToolBox with Mixins”

  1. Dan Nelson 9 February 2011 at 7:11 am #

    This is great! Thanks for sharing.

  2. Flex library for taking snaphots of your flex app « odds'n'sods

    [...] The lib combines the ability to take images, with the [Mixin] metadata tag (as used by Xavi). [...]


Leave a Reply