I was checking the PureMVC website today and came across PureMVC Console developed by the good folks at Kap Lab. This is an absolutely invaluable tool to figure out in real-time what is going on inside the Flex PureMVC framework in a running application. PureMVC is quite lightweight and is very good at keeping things hidden under the hood. However, during development it is essential to get a snapshot of application state and the sequence of notifications. This is exactly what PureMVC Console does. It provides you with a flashlight to peer into your Notifications, Commands, Mediators and Proxies and track notifications and application flow in response to user gestures and other events.
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!



Hi buddy
Thanks for your excellent post, and for your enthusiasm about this console.
I just wanted to let you know that a new 1.0 version has been released, with true histories for commands and notifications, and a new Services tab with services history.
Other small features such as break point on notifs/Commands, and above all, the console has been totally refactored, so that the event log now accepts custom log entries with any object to record with it.
Hope you’ll enjoy
Hi Julien, the new features certainly made a good product even better. Thanks for the update. It has become easy to answer PureMVC questions as novices can now see (as opposed to visualize) how the the framework operates.
Just a note that you’ll need to include a link in your Library paths to the DataVisualisation.swc in Flex or FlashBuilder Pro, if you’re running the Standard edition of Flexbuilder or you will get a compile error.
Thanks @jimb, I didn’t come across this issue as I’m using the Flex Pro version. The the Flex 3.3 Data Visualizations Components (”DVC”) can be downloaded from:
http://download.macromedia.com/pub/flex/sdk/datavisualization_sdk3.3.zip
More details here:
http://www.webappsolution.com/wordpress/2009/04/22/installing-flex-33-sdk-data-visualization-33-swc/