The loader

Since the server and DfW have different layout of where to find the files, you need a loader to iron out the differences between the server and DfW. The server only sees the files in your /static/ folder but the DfW will see the app folder with a /static/ folder inside it. There is also a difference when loading files form the server and form locale storage. When reading information from the server, a async call is done to the server. Then the server has returned the information a function is called by the ajax call. When doing the same in DfW, you instantly get the information back. To be able to use server and DfW the same way we have to simulate the callback way of doing thing in DfW.

The dynloader to use

function dynload(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var elm=null;
    var ext='';
    var pos = url.lastIndexOf(".");
    if (pos>=0){
        ext = url.substr(pos);
        ext = ext.toLowerCase();
    }
    switch (ext){
    case '.js':   
        elm = document.createElement('script');
        elm.type = 'text/javascript';
        elm.async = false;
        elm.src = url;

        // Then bind the event to the callback function.
        // There are several events for cross browser compatibility.
        elm.onreadystatechange = callback;
        elm.onload = callback;
        break;
    case '.css':
        elm  = document.createElement('link');
        elm.rel  = 'stylesheet';
        elm.type = 'text/css';
        elm.href = url;
        elm.media = 'all';
        break;
    }
    // Fire the loading
    head.appendChild(elm);
}

The loader supports .js files and .css files for now. It will run the callback function when the file is loaded.

Using the loader

indataease = false;
// Test to see if we are running inside DataEase
if (window.external && window.external.hasPrismConnection){ // We are in DataEase
    fromwhere = "DataEase";
    indataease = true;
    dynload("./../editor/deeditor.css");
    dynload("./../js/jquery.min.js",loadJQueryDone);
    dynload("./decommon.js",loadDone);            
} else { // We are not in DataEase
    fromwhere = "The server";
    dynload("/editor/deeditor.css");
    dynload("/js/jquery.min.js",loadJQueryDone);
    dynload("/DSEditors/decommon.js",loadDone);
}

Example of setting up a loader from the server and DfW. As you can see each of the files loaded can have their own callback the gets called when the loading is done. You can also omit the callback if you have nothing to do.

Setting up decommon.js for use

// What to do when we are done loading the wrappers that looks the same for server and DataEase
function loadDone(){
  var dec = new DECommon(indataease); // setting it up and telling it if we are in server or DfW
  dec.loadinternals();
  dec.loadfilelist('/MyDQLs/');
  var query = window.location.search;
  if (query.length>0) {
    var params = dec.decodequery(query);
    var url=params.file;
    if (url)
      dec.loadfile(url);
  }
  $("#test").on('click',function(me){ 
    var elm=$("#dqlcontent");
    var code = elm.val();
    dec.testdql(code); 
  });
  $("#delete").on('click',function(me){ dec.delete(); });
  $("#save").on('click',function(me){ 
    var elm=$("#dqlcontent");
    var code = elm.val();
    dec.savefile(dec.url,code);
  });
  $(document).on('click','.listiteml2',function(me){dec.selectitem($(me.target));});
  $(document).on('dblclick','.listiteml2',function(me){dec.insertitem($(me.target));});
  $('div[contenteditable]').on('keydown',function(e){dec.editorkeydownhandler(e)});
  $('div[contenteditable]').on('keyup',function(e){dec.editorkeyuphandler(e)});
  $('div[contenteditable]').on('focus',function(){dec.calccaretpos()});
  $('div[contenteditable]').on('click',function(){dec.calccaretpos()});
}

Setting up decommon.js and calling functions for setting up the environment. As you can see now the differences between server and DfW are hidden from you. The only thing you have to do is use the object created after the dynamic loading of the libraries from the file structure. The object in this example have got the name "dec" for DataEase Common.