For example, if you need to know the state of your value objects at any point, just click on the Proxiestab and select the proxy.

If you want to check the sequence of actions taking place in your application from startup, just click on the PureMVC flow tab. This is very useful for debugging as it provides a record of the command invocation sequence and will help answer questions like “why did this command execute before this other one?”

I am a big fan of the Xray logger developed for Flash AS2 and had to try out this console right away as this is the first console with similar utility for AS3, I integrated the console into the Employee Admin demo (developed by Cliff Hall).

Employee Admin Demo with integrated Console

Click on the button below to open the Employee Admin demo. Make sure that you hit Ctrl+Alt+F6 to open the console ( Alt = Option in OSX ).

Integrating the console into the Employee Admin Demo

The console is very easy to integrate into a new or existing app – just follow the integration guide. The ease of integration is a huge plus as it is simply injected before the application is invoked.

1. Add the PureMVC Console SWC into your library

First drag-and-drop the PureMVC Console swc file into the libs folder in your Flex project. There is a different swc if you are using the multi-core version of PureMVC.

2. Add the console component into your application

For an MXML app, you need to add an additional xmlns:kapit="fr.kapit.*" name space attribute to the  <mx:Application> tag and then add the <kapit:PureMVCConsole/> component before the closing </mx:Application> tag (see integration guide). I added this to the EmployeeAdmin.mxml file which is the default application for the project.

3. Add a new SwitchFacade parent class for you application facade

The next step is to create a new SwitchFacade class and modify your application facade so that it inherits from SwitchFacade ( instead of the PureMVC Facade class ). The SwitchFacade class is the same for all apps and can be copied and pasted from the integration guide. Make sure you create the SwitchFacade class in the same location in the folder hierarchy where you current application facade class resides. You can right click on the enclosing folder (employeeadmin in my case) and create New > ActionScript Class and type in SwitchFacade for the class name. Now copy and paste the code.

Injecting the  SwitchFacade class allows you to control the integration of the console using compiler directives as opposed to changing code when it comes time to ship the application. SwitchFacade extends the PureMVC Facade class if the CONFIG::release directive is set. Conversely, if the CONFIG::debug directive is set ( and CONFIG::release is unset), SwitchFacade extends DebugFacade that has all the debug stuff required by the console.

4. Set the compiler directives

To control which facade gets extended you need to add the CONFIG::release and CONFIG::debug directives in the compiler options. Right click on the Project folder and choose properties from the contextual menu. Now click on Flex Compiler option to add the additional compiler directives in the Additional Compiler Arguments field.

-define=CONFIG::release,false -define=CONFIG::debug,true

Reset the directives for the release version.

Recap of cool features:

• Very easy to integrate into a new or existing app.
• Works with the standard version of Flash ( does not need the debugger version ).
• Integration is controlled by using compiler options ( just change a compiler option for the release version ).

Simple to integrate and keeps out of the way of you doing the job of coding and debugging – excellent!