Basic JavaScript structure

Owned by Murat Purc
Last updated: Nov 20, 2013 by Marcus GnaßVersion comment

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:

<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 some properties and functions like:

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.

general.js

This file contains general modules which are potentially helpful for every Backend page, it should be loaded right after contenido.js!

Following modules are implemented here:

  • Registry (Con.Registry)

    Registry module store (get/set) application wide variables.

    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.
    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() 

JavaScript configuration

The Backend needs some dynamic settings on the JavaScript side, like session id, current backend language, backend path, etc. Therefore it will be added dynamically to the head-section.

The current code, this may change in the future, looks as follows:

(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.$);

This extends the global Con.cfg by adding those settings to it, you can then access them like Con.sid or Con.cfg.urlBackend.

startup.js

Right after setting the configuration, the startup file should be loaded. It is responsible to bootstrap the backend application, binding to common UI elements like info icon clicks, loading the translation, etc...

Full minimum backend JavaScipt code

After combining the single parts described before, the full minimun JavaScript code in backend templates looks like

<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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    ...
    {_JS_HEAD_CONTENIDO_}
    ...
</head>
...