Welcome to Kap Lab Store

PureMVC Console Integration Guide

Principles

Extension of PureMVC core classes

The console works by extending the core classes of PureMVC, in order to add the code that performs the logging notifications. The extended classes are Facade, Controller,Model and View, respectively derived in DebugFacade, DebugController, DebugModel and DebugView.
These classes are included in the console libraries provided with the distribution (depending on the puremvc version used in your application)
In order to use the console, you will have to link one of these library into your project, and to change the code in your Facade classe(s).

Libraries and Compatibility

The package is made of the two following libraries

  • PureMVCConsole.swc : for single core Pure MVC
  • PureMVCMulticoreConsole.swc: for PureMVC multicore

To be compatible with provided libraries, you will have also to use the following:

  • Flex SDK 3.0.1 or higher
  • PureMVC 2.0.1
Unable to render {include} Couldn't find a page to include called: PatchLibraryIntegration


Modify your Facade(s)

As explained above, you will have to change your Facade class, by extending DebugFacade instead of Facade, at least in the single core version.
In the multicore framework, you will need to extend all you Facade classes, or at minimum those that you want to monitor with the console.
To do this, there is a simple way, and there is also a better way.
The simple way is just changing the facade class by extending DebugFacade. However, by doing this, you will have trouble when generating the production version, if any. You certainly don't want to release your app with the console inside, nor you would like to change your code before building !
The solution is - once again - conditional compilation.
To achieve the desired result with a minimum efforts, we propose the following solution:

1. Create a top level Facade Class , named for instance SwitchFacade as in the demo application

SwitchFacade.as3
package org.puremvc.as3.demos.flex.cafetownsend
{
    import fr.kapit.puremvc.as3.patterns.facade.DebugFacade;
    import org.puremvc.as3.patterns.facade.Facade;

    // Release version of the facade, extends Facade class from PureMVC
    CONFIG::release
    public class SwitchFacade extends Facade
    {
      public function SwitchFacade()
      {
        super();
      }
    }

    // Debug version of the facade, extends DebugFacade class from PureMVCKapit
    CONFIG::debug
    public class SwitchFacade extends DebugFacade
    {
        public function SwitchFacade()
        {
          super();
        }
    }
}

Note the conditional compilation directives included, and the special syntax of them: they do not enclose their code into braces, rather they prefix the class declaration and contents. This is the first good reason for creating this intermediate class.
The second good reason is that you will now be able to use it for all your Facades, if you have PureMVC multicore.

2. Extend your Facade class
Find your main Facade class, and modify it as follow:

main Facade class
    public class ApplicationFacade extends SwitchFacade

If you use PureMVC multicore, do the same thing with all Facade extended classes throughout your applications (and modules if any).

3. Add defines to compiler options
In your FlexBuilder project for development, add the following compiler option:

Compiler option to add
-define=CONFIG::release,false
-define=CONFIG::debug,true

Of course, to produce a release version, just switch the values, and add these directives into your build scripts as well.

4. Add the console loader into your application
In your main application code, you will create the console loader either in a method with AS code, which is required for conditional compilation to work, either in a MXML tag (and be always in).

AS3 integration
            private function _onApplicationComplete():void
            {
                CONFIG::debug
                {
                    var p : PureMVCConsole = new PureMVCConsole();
                    p.showPopup() // optional
                }
            }

MXML integration
<Application...xmlns:kapit="fr.kapit.*">
...
   <kapit:PureMVCConsole/>
...
</Application>

5. Run the application and hit Ctrl+Alt+F6 or Ctrl+Alt+Click to open the console

Next >> Presentation

Related Projects

 Top News

  Latest Updates: 2012/10/05

Released on:

Need Information?

Why Kap Lab?

Kap Lab exists because innovation is our passion. Enjoy our products and help us to give you the best.

Cyril Daloz
CEO Kap IT