1,007
edits
| 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. | ||
== | == 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: | ||
} | } | ||
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() { | ||
edits