JavaScript
This is the main article for everything related to JavaScript development in Contrexx.
Contents
JavaScript Collector
The Contrexx JavaScript and CSS collector class collects all script and style tags and moves them to the [[JAVASCRIPT]] placeholder. In addition he provides a set of predefined script sets available for activation (\JS::activate(...)).
CSS is not reordered by the collector. For additional info about this class, please visit it's API reference
Prevent collection
In order to prevent a script tag from beeing collected, simply add a space after the equals sign of the "src" attribute:
<script type="text/javascript" src= "/path/to/source.js"></script> // ^
Script tags without an src attribute are not collected.
jQuery
Most JavaScript in Contrexx is based on jQuery. jQuery is loaded per default in backend mode. In frontend it is activated if a script requiring it is activated via \JS::activate(). Since some code needs a specific version of jQuery, it isn't easy to migrate to a new version. Your scripts might require a newer version of jQuery than the one loaded by Contrexx. How to do that depends if you need it in front- or backend, the principle however is the same. Do not try to replace the jQuery version used by Contrexx!
Load a newer version of jQuery in frontend
- Add a script tag that loads the desired version of jQuery to the head part of you theme. As described above, add a space after the equals sign to prevent reordering of this tag.
- Assign jQuery to another variable using jQuery.noConflict()
- Use the new version of jQuery via the variable you assigned it to
Load a newer version of jQuery in backend
- Copy the file /cadmin/template/ascms/index.html to /customizing/cadmin/template/ascms/index.html and activate customizings
- Add a script tag that loads the desired version of jQuery to the head part of that file. As described above, add a space after the equals sign to prevent reordering of this tag.
- Assign jQuery to another variable using jQuery.noConflict()
- Use the new version of jQuery via the variable you assigned it to
Example
Here's an example (just a little sample), how an index.html file could look like with a custom jQuery version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My page title</title> <!-- meta, link and other tags --> <script type="text/javascript" src= "path to my custom jQuery version"></script> <script type="text/javascript"> myjQueryVersion = $.noConflict(); </script> {JAVASCRIPT} </head> <body> ...
Contrexx JavaScript Framework
Main articles: Contrexx Javascript Framework, Contrexx Javascript Framework UI and Contrexx Javascript Framework I18n
The framework allows easy data moving between client- and server-side, and has several handy client-side functions.
JsonData
Main article: JsonData
The server side classes under /core/Json allow easy handling of JSON requests and the corresponding responses.