General info on how to go about creating and using Javascript in the BW Rox code
How to include
Traditionally, including javascript was either done in the head element, by including your script in the /htdocs/script/main.js file or by simply adding a script element in your template that includes the script file ... if it wasn't just put straight into the template as a block of JS. None of these methods constitute good practice, because:
- It is much better to try to load JS as late on a page as possible, because browsers stop rendering a page when they see javascript and only start again after they have evaluated the javascript
- Including javascript files through a central javascript file is slow (it's using document.write) and it takes the knowledge of what javascript files need to be included away for where it is (in the individual apps)
A better way
In your rox page, you can add some method calls to your init method (or create your init method and stick these method calls in there):
- addEarlyLoadScriptFile($file) - adds a js file that will be loaded in the <head> element
- addLateLoadScriptFile($file) - adds a js file that will be loaded just before the </body> tag
Any files added by these methods will be loaded in the appropriate spot - and files won't be double included so no need to worry about what you include.
This serves to avoid both problems above, by allowing for loading javascript late and keeping control in pages.
Activating lateloaded JS
To run js that is being included at the end of pages, you can use the following shortcut methods:
- late_loader.queueFunction(js_function, arguments_as_array)
- late_loader.queueNamedFunction('function_name', arguments_as_array)
- late_loader.queueObjectMethod('object_name', 'method_name', arguments_as_array)
They are loaded with common.js, that is always loaded in the page head. Basically, they are shortcuts to Event.observe(window, load, function) - so, you're scheduling your function/object method to run when the page is done loading.
