Labs/Test Pilot/Experiment Tutorial: Difference between revisions

Line 66: Line 66:
Let's start with a very simple study that observes clicks on the back button.
Let's start with a very simple study that observes clicks on the back button.


== Registering a Listener on the Back Button ==
== Defining the Global Observer Class ==
 
Our study needs to export an object named '''handlers'''.  The base classes in '''study_base_classes.js''' define a class '''GenericGlobalObserver'''.  All we need to do is extend this class, instantiate one instance, and export that instance.  Find the code for ExampleStudyGlobalObserver and replace it with this:
 
  function BackButtonGlobalObserver() {
    // It's very important that our constructor function calls the base
    // class constructor function:
    BackButtonGlobalObserver.baseConstructor.call(this,
                                                  ExampleStudyWindowObserver);
  }
  // use the provided helper method 'extend()' to handle setting up the
  // whole prototype chain for us correctly:
  BaseClasses.extend(BackButtonGlobalObserver,
                    BaseClasses.GenericGlobalObserver);
 
 
  exports.handlers = new BackButtonGlobalObserver();
 
 
== Defining the Per-Window Observer Class ==


Each Firefox window has its own back button, so we need to put a listener on each one.  That means we need to use the per-window observer.  We'll use the base class '''BaseClasses.GenericWindowObserver''', defined in the file '''study_base_classes.js''', and extend it.
Each Firefox window has its own back button, so we need to put a listener on each one.  That means we need to use the per-window observer.  We'll use the base class '''BaseClasses.GenericWindowObserver''', defined in the file '''study_base_classes.js''', and extend it.
Line 86: Line 105:
  }
  }


Our '''install()''' method will be called whenever a new window opens.  Get the document from the newly opened window, get the back button element from the document, and then attatch a listener to it, like so:
We now need to let the global observer class know about our per-window observer class.  We do this by passing the per-window observer class as an argument to the global observer's base constructor.  The global observer will then automatically instantiate one instance of the per-window observer for each window that is opened, and will handle cleaning up this observer when the window is closed.  So our global observer class should now look like this:
 
  function BackButtonGlobalObserver() {
    BackButtonGlobalObserver.baseConstructor.call(this,
                                                  BackButtonWindowObserver);
  }
  BaseClasses.extend(BackButtonGlobalObserver,
                    BaseClasses.GenericGlobalObserver);
 
== Registering a Listener on the Back Button ==
 
The '''install()''' method of our BackButtonWindowObserver will be called whenever a new window opens.  Get the document from the newly opened window, get the back button element from the document, and then attatch a listener to it, like so:


  BackButtonWindowObserver.prototype.install = function() {
  BackButtonWindowObserver.prototype.install = function() {
1,007

edits