Page Comparison

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

  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 linenumbers true
  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 backend language, Backend backend path, etc. , therefore Therefore it will be added dynamically to the head-section.

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

  ...

  Code Block
  language js linenumbers true
  (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 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 backend templates looks like

  Code Block
  language js linenumbers true
  <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
  language xml linenumbers true
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... {_JS_HEAD_CONTENIDO_}

  ...

  ... </head> ...