Simple Console Mode
If you pass ffdebug as HTTP parameter to a page in which ffjs is loaded, it will create a simple logging console via DOM builder and output all firebug log statements to it. ( Note that firebug's message formatting options are not fully supported, but simplified.)
The simple debug console is unstyled by default but has ids / classes enabling you to style the console to your liking. The debug console is a div with the id "ffdebug". A div with the class "debug", "info", "warn" or "error" is created for every log entry inside it. A double click handler that toggles the class minimized is added to the debug console. This only works with apropriate styles.
See the style sheet of this page for an example of how to style the debug console to look ok and to correctly minimize.
ff.event ensures that the this keyword points to the event target element (e.g. the DOM element you clicked on for a click event). This is the standard behaviour for old style event declarations with onclick="..." and for events registered with addEventListener. ff.event ensures that this is also the behaviour in Internet Explorer.
Note the different meaning of the keyword this in the hello.js script. this only refers to the hello object in the foo method. In the event handlers the this object refers to the DOM element that is the source of the current event. For Functions called from ff.event.onload and ff.request the this object refers to the window, as if the window was the source of the event. So if you want to access the hello object from the event functions you have to use the global hello variable. ( You can see the console.debug messages by either running the script in firefox with the firebug extension installed or by clicking this link )
The hello object is a singleton (There will only be one hello object per document) which makes it easy to access it without being able to use this. Look at the ffview example for how to deal with objects were multiple instances exist in the document.
There is a rather strict separation between those layers. The XHTML markup does neither contain style nor onclick nor onload attributes but only id and class attributes used to style the content and to retrieve the DOM elements to add event handlers.
The XHTML document imports a common style sheet and defines some local styles only used in the Hello World Example. The button click handler requests a document fragment via AJAX and pastes the response at the end of div with the di "page". The document fragment again does not include style attributes but uses the locally defined style classes.
Don't use onclick="" or onload="" to setup events but use the ff.event functions to handle all events. In a perfect world you could just use the w3 DOM Event functions but unfortunately Internet Explorer does not care about standards and has a totally different event model. This is the reason for the existence of ff.event which offers a unified API for all browsers.
For example instead of doing popups like the traditional, bad way
Do them like shown in the popup example<a href="#" onclick="window.open('page.html')">my page</a> BAD!