The Backend JavaScript code is based on jQuery, therefore it requires jQuery sources to be loaded initially.
Right after jQuery, it is required to load CONTENIDO Backend JavaScript sources. The minimum required JavaScript code in Backend and the order looks like:
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript" src="scripts/jquery/jquery.js"></script> |
...
<script type="text/javascript" src="scripts/jquery/jquery-ui.js"></script> |
...
<script type="text/javascript" src="scripts/contenido.js"></script> |
...
<script type="text/javascript" src="scripts/general.js"></script> |
contenido.js
The main CONTENIDO Backend JavaScript module.
Creates the global object 'Con' in window scope and stores the reference to jQuery as it's property 'Con.$'. Furthermore it defines few properties and functions like:
| Code Block | ||
|---|---|---|
| ||
Con.sid // Backend session id |
...
Con.cfg = {enableLog: true} // Common configuration object, will be set later |
...
Con.parseTemplate() // Template parser |
...
Con.getFrame() // Easy access to backend frames |
...
Con.log() // Logging, console.log wrapper |
The 'Con' property within windows scope is also the namespace which should be used by the JavaScript application in the Backend.
...
Following modules are implemented here:
Registry (Con.Registry)
Registry module store (get/set) application wide variables.
:Info title Note Every frame has it's own registry instance. If you want to keep something in the registry and it should be available for all frames, then add it to the top window. Code Block language js top.Con.Registry.set('foobar', 1);var value = top.Con.Registry.get('foobar');
- Loader (Con.Loader)
The JavaScript/CSS asset loader. Provides the feature to load required dependencies dynamically.
- UtilUrl (Con.UtilUrl)
Collection of URL helper functions to build Backend URLs, extrat parameters from URLs, etc.
- FrameLeftTop (Con.FrameLeftTop)
Object to resize left_top frame
- Additional functions
Definition of additional functions for common usage like
- Con.multiLink(), the former conMultiLink()
- Con.getRegistry()
- Con.getContentWindow(), returns right_bottom frame
- Con.getTranslations()
- Con.showConfirmation()
- Con.showNotification()
- Con.markSubmenuItem()
...
The current code, this may change in the future, looks as follows:
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript"> |
...
(function(Con, $) { |
...
Con.sid = "r3718q..."; // The Backend session id |
...
$.extend(Con.cfg, { |
...
urlBackend: "http://contenido.localhost/contenido/", // URL to Backend |
...
urlHelp: "", // URL to help page |
...
belang: "en_US", // Current Backend language |
...
frame: 4 // Current frame (feasible is 1, 2, 3, 4 or 0 for unknown) |
...
}); |
...
})(Con, Con.$); |
...
</script> |
This extends the global Con.cfg by adding those settings to it, you can then access them like Con.sid or Con.cfg.urlBackend.
...
After combining the single parts described before, the full minimun JavaScript code in Backend templates looks like
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript" src="scripts/jquery/jquery.js"></script> |
...
<script type="text/javascript" src="scripts/jquery/jquery-ui.js"></script> |
...
<script type="text/javascript" src="scripts/contenido.js"></script> |
...
<script type="text/javascript" src="scripts/general.js"></script> |
...
<script type="text/javascript"> |
...
function(Con, $) { |
...
Con.sid = ""; |
...
$.extend(Con.cfg, { |
...
... |
...
}); |
...
)(Con, Con.$); |
...
</script> |
...
<script type="text/javascript" src="scripts/startup.js"></script> |
You can get this code by adding one single wildcard to your Template
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... {_JS_HEAD_CONTENIDO_} |
...
...
</head>
...
|