Choleriker
12-15-2006, 10:56 PM
All updates you find in the flow of that post.
Update: 2007-02-02, just more simpler and working way
Update: 2006-12-17, final version with test-page see a few posts below
Update: 2006-12-18:
1. to minimize the traffic completely i added the possibility to preload stylesheets with the LoadHandler :lol:
2. fixed issue while using the ScriptHandler as singleton in an new opened window
Hello,
I use many iframes embedded in an BorderLayout that are using yui-ext byitself. Using iframes give you more simplicity on destructing containing objects and you will not have any (huge or small) memory leaks while long running applications which has many objects to handle. On my local developer machine all works fine and there are no performance problems, but after uploading it, i found out that every iframe loads to long. The problem is that i have disabled the explorer cache like all web developers are doing (Im using jonnychache in firefox). Thatz not nice. I tried to get a copy of the YAHOO-object in a iframe:
YAHOO = window.top.window.YAHOO;
But it doesnt work because there are several object-extensions and prototype addons and there are methods that uses 'document' directly. Everytime i tried to use maybe getEl() i get only DOM objects in the frame which has loaded the yui extensions.
Here is my solution. With this you application loads all scripts only ones, and you can inject the code in all iframes you want without reloading all scripts:
At the top level i have a nearly blank page which only contains a load-indicator and one script-include. The script containing in that include you can even write directly into that page, but i do it this way, because of design / imlementation separation:
index.htm
<html>
<head>
<title>Loader-Sample</title>
<script></script>
</head>
<body>
<div>Ladevorgang, bitte warten...</div>
</body>
</html>
init.js
window.LM = function() {
return {
load: function(scripts) {
this.scripts = scripts;
setTimeout(scripts+';LM.init();', 0);
},
documentReady: function() {
window.onload = null;
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.style.display = 'none';
iframe.src = "script_loader.htm";
}
};
}();
window.onload = window.LM.documentReady;
As you can see, this one does not anything else than append an iframe to document (invisible with display:none) and load then a page which is named script_loader.htm! The load method will be called if we have get all content of the scripts we need at this app. See the second line in function load(), with it, i will execute the scripts contents i get as a string after loading global at this (which is window). But before i save this script-code in the LM object. This give us the possibility to trigger scripts code (the object and extensions of yui, yui-ext and our application) at every frame simply by executing it at the target frame, iframe, opened windows or where we need it. You will wonder why im adding to that call a method LM.init() which isnt defined yet. I will later explain that fact.
script_loader.htm
<html>
<head>
<title>Loader-Home</title>
<script></script>
<script></script>
<script></script>
<script>
var _scripts = [
"Utils/yui_0.12.0/build/yahoo/yahoo.js",
"Utils/yui_0.12.0/build/dom/dom.js",
"Utils/yui_0.12.0/build/event/event.js",
"Utils/yui_0.12.0/build/logger/logger.js",
"Utils/yui_0.12.0/build/dragdrop/dragdrop.js",
"Utils/yui_0.12.0/build/animation/animation.js",
"Utils/yui_0.12.0/build/connection/connection.js",
"Utils/yui_0.12.0/build/container/container.js",
"Utils/yui_0.12.0/build/treeview/treeview.js",
"Utils/yui-ext_0.33-rc3/yui-ext-debug.js",
"ScriptLoader.js",
"Utils/tecbehind_1.0/source/Common.js",
"Utils/tecbehind_1.0/source/Date.js",
"Utils/livemonitor_1.3/Texts.aspx",
"Utils/livemonitor_1.3/source/Application.js"
];
window.onload = function() {
(new ScriptLoader()).startRequest(_scripts, function(scriptStr) {
window.top.window.LM.load(scriptStr);
});
}
</script>
</head>
<body>
Hey, dont mess up with my code :)
</body>
</html>
This page loads now the yahoo-script and the yahoo-connection script to get the common connection things ready. The next important thing + javascript include is a a script which contains one single, its the next one i will describe. Then we have a simple ja-script block which defines all scripts we are need, exactly in this order, they have to be load! And on the window.onload-event we simply create a new ScriptLoader object and call its method startRequest. The first parameter is our script-array, and the second one is a callback which is called after all scripts are loaded. As you can see the callback will get a string. This string contains the content of the loaded script in the correct order. That callback simply calls the load method of our LM object (which lives at the top-window!) from init.js. Here is the code for the ScriptLoader:
ScriptLoader.js
ScriptLoader = function() {
this.scripts = new Array();
}
ScriptLoader.prototype = {
handleSuccess:function(o){
// Connection-Object mit der entsprechenden Transaction-ID finden und dies danach mit dem Script-Text ersetzen
var _tl = this.transactions.length;
for(var i=0; i<_tl; i++) {
if(this.transactions[i].tId==o.tId) {
this.results[i]=o.responseText;
this.loadedScripts++;
if(this.loadedScripts==this.scripts.length && this.connectionsTriggered) {
this.connectionsTriggered = false;
this.callback(this.results.join(''));
delete this.results; delete this.loadedScripts; delete this.transactions;
}
break;
}
}
},
handleFailure:function(o){
throw "Fehler beim Lesen des Scriptes '"+this._scripts[this.currentScript]+"': "+o.resonseText;
},
startRequest:function(scr, fn) {
if(typeof fn!='undefined') this.callback = fn;
if(typeof scr!='undefined') {
this.transactions = [];
this.results = [];
this.loadedScripts = 0;
this.scripts = scr;
this.connectionsTriggered = false;
var callback = {
success:this.handleSuccess,
failure:this.handleFailure,
scope: this
}
for(var i=0; i<scr>0)
document.body.removeChild(document.body.firstChild);
alert('OK done! Bring up your layout.');
}
});
// Das globale LM Object um das Anwendungs-Objekt erweitern
APP = new YAHOO.livemonitor.Application();
Object.extend(LM, APP);
This one is the last script of the loaded scripts and extends our LM object. This LM object i wanted to be the global application handler. But my global application handler has to be i sub-class of YAHOO.ext.util.Observable. But this is only possible after yui-ext is loaded. This way fixes another issue in IE: if you try to define the load method directly in the object LM, the YAHOO object isnt available because of scope. Yes, ok, you can give the YAHOO object as a parameter, but this is no nice way. The last thing which is one of the importants: i dont want to make my code easy readable. The most common problem of ajax is the security. How easier you code is readable, it will be more easier to understand, that is not i want at all because my application handles any sensitive user data. (but it is very well secured).
Now we have it. If you now load an iframe maybe as a ContentPanel in BorderLayout, you have no more to do to as calling one simply method in your iframe page to get the complete framework run:
function loadScripts() {
setTimeout(window.top.window.LM.scripts, 0);
}
With this way nested iframes in any depth are no problem!
Addendum:
This is the code of my developer machine. While going live, the ScriptLoader only loads one (huge) script, which is compressed. Use jacks very nice JSBuilder for that! But after compression you will see that the loading time is too always to much for loading it in every iframe.
One last thing is important, its Caching on your developer machine: I have tried this scripts in IE, but with loaded "IE Developer Toolbar" with "Disable > Cache", you ie will cache the script loaded by iframe! Even press STRG+F5 isnt enough! At best, develop in Firefox with installed JonnyCache extension. In this way you will get no problems while developing! I dont use parameters at my script url's so i can ensure ie not to use cache maybe by changing connect-call to:
for(var i=0; i<scr.length; i++) this.transactions[i] = YAHOO.util.Connect.asyncRequest('GET', scr[i]+'?_p='+escape(new Date()), callback);
Thatz it!
Any suggestions / addons or so to it?
Update: 2007-02-02, just more simpler and working way
Update: 2006-12-17, final version with test-page see a few posts below
Update: 2006-12-18:
1. to minimize the traffic completely i added the possibility to preload stylesheets with the LoadHandler :lol:
2. fixed issue while using the ScriptHandler as singleton in an new opened window
Hello,
I use many iframes embedded in an BorderLayout that are using yui-ext byitself. Using iframes give you more simplicity on destructing containing objects and you will not have any (huge or small) memory leaks while long running applications which has many objects to handle. On my local developer machine all works fine and there are no performance problems, but after uploading it, i found out that every iframe loads to long. The problem is that i have disabled the explorer cache like all web developers are doing (Im using jonnychache in firefox). Thatz not nice. I tried to get a copy of the YAHOO-object in a iframe:
YAHOO = window.top.window.YAHOO;
But it doesnt work because there are several object-extensions and prototype addons and there are methods that uses 'document' directly. Everytime i tried to use maybe getEl() i get only DOM objects in the frame which has loaded the yui extensions.
Here is my solution. With this you application loads all scripts only ones, and you can inject the code in all iframes you want without reloading all scripts:
At the top level i have a nearly blank page which only contains a load-indicator and one script-include. The script containing in that include you can even write directly into that page, but i do it this way, because of design / imlementation separation:
index.htm
<html>
<head>
<title>Loader-Sample</title>
<script></script>
</head>
<body>
<div>Ladevorgang, bitte warten...</div>
</body>
</html>
init.js
window.LM = function() {
return {
load: function(scripts) {
this.scripts = scripts;
setTimeout(scripts+';LM.init();', 0);
},
documentReady: function() {
window.onload = null;
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.style.display = 'none';
iframe.src = "script_loader.htm";
}
};
}();
window.onload = window.LM.documentReady;
As you can see, this one does not anything else than append an iframe to document (invisible with display:none) and load then a page which is named script_loader.htm! The load method will be called if we have get all content of the scripts we need at this app. See the second line in function load(), with it, i will execute the scripts contents i get as a string after loading global at this (which is window). But before i save this script-code in the LM object. This give us the possibility to trigger scripts code (the object and extensions of yui, yui-ext and our application) at every frame simply by executing it at the target frame, iframe, opened windows or where we need it. You will wonder why im adding to that call a method LM.init() which isnt defined yet. I will later explain that fact.
script_loader.htm
<html>
<head>
<title>Loader-Home</title>
<script></script>
<script></script>
<script></script>
<script>
var _scripts = [
"Utils/yui_0.12.0/build/yahoo/yahoo.js",
"Utils/yui_0.12.0/build/dom/dom.js",
"Utils/yui_0.12.0/build/event/event.js",
"Utils/yui_0.12.0/build/logger/logger.js",
"Utils/yui_0.12.0/build/dragdrop/dragdrop.js",
"Utils/yui_0.12.0/build/animation/animation.js",
"Utils/yui_0.12.0/build/connection/connection.js",
"Utils/yui_0.12.0/build/container/container.js",
"Utils/yui_0.12.0/build/treeview/treeview.js",
"Utils/yui-ext_0.33-rc3/yui-ext-debug.js",
"ScriptLoader.js",
"Utils/tecbehind_1.0/source/Common.js",
"Utils/tecbehind_1.0/source/Date.js",
"Utils/livemonitor_1.3/Texts.aspx",
"Utils/livemonitor_1.3/source/Application.js"
];
window.onload = function() {
(new ScriptLoader()).startRequest(_scripts, function(scriptStr) {
window.top.window.LM.load(scriptStr);
});
}
</script>
</head>
<body>
Hey, dont mess up with my code :)
</body>
</html>
This page loads now the yahoo-script and the yahoo-connection script to get the common connection things ready. The next important thing + javascript include is a a script which contains one single, its the next one i will describe. Then we have a simple ja-script block which defines all scripts we are need, exactly in this order, they have to be load! And on the window.onload-event we simply create a new ScriptLoader object and call its method startRequest. The first parameter is our script-array, and the second one is a callback which is called after all scripts are loaded. As you can see the callback will get a string. This string contains the content of the loaded script in the correct order. That callback simply calls the load method of our LM object (which lives at the top-window!) from init.js. Here is the code for the ScriptLoader:
ScriptLoader.js
ScriptLoader = function() {
this.scripts = new Array();
}
ScriptLoader.prototype = {
handleSuccess:function(o){
// Connection-Object mit der entsprechenden Transaction-ID finden und dies danach mit dem Script-Text ersetzen
var _tl = this.transactions.length;
for(var i=0; i<_tl; i++) {
if(this.transactions[i].tId==o.tId) {
this.results[i]=o.responseText;
this.loadedScripts++;
if(this.loadedScripts==this.scripts.length && this.connectionsTriggered) {
this.connectionsTriggered = false;
this.callback(this.results.join(''));
delete this.results; delete this.loadedScripts; delete this.transactions;
}
break;
}
}
},
handleFailure:function(o){
throw "Fehler beim Lesen des Scriptes '"+this._scripts[this.currentScript]+"': "+o.resonseText;
},
startRequest:function(scr, fn) {
if(typeof fn!='undefined') this.callback = fn;
if(typeof scr!='undefined') {
this.transactions = [];
this.results = [];
this.loadedScripts = 0;
this.scripts = scr;
this.connectionsTriggered = false;
var callback = {
success:this.handleSuccess,
failure:this.handleFailure,
scope: this
}
for(var i=0; i<scr>0)
document.body.removeChild(document.body.firstChild);
alert('OK done! Bring up your layout.');
}
});
// Das globale LM Object um das Anwendungs-Objekt erweitern
APP = new YAHOO.livemonitor.Application();
Object.extend(LM, APP);
This one is the last script of the loaded scripts and extends our LM object. This LM object i wanted to be the global application handler. But my global application handler has to be i sub-class of YAHOO.ext.util.Observable. But this is only possible after yui-ext is loaded. This way fixes another issue in IE: if you try to define the load method directly in the object LM, the YAHOO object isnt available because of scope. Yes, ok, you can give the YAHOO object as a parameter, but this is no nice way. The last thing which is one of the importants: i dont want to make my code easy readable. The most common problem of ajax is the security. How easier you code is readable, it will be more easier to understand, that is not i want at all because my application handles any sensitive user data. (but it is very well secured).
Now we have it. If you now load an iframe maybe as a ContentPanel in BorderLayout, you have no more to do to as calling one simply method in your iframe page to get the complete framework run:
function loadScripts() {
setTimeout(window.top.window.LM.scripts, 0);
}
With this way nested iframes in any depth are no problem!
Addendum:
This is the code of my developer machine. While going live, the ScriptLoader only loads one (huge) script, which is compressed. Use jacks very nice JSBuilder for that! But after compression you will see that the loading time is too always to much for loading it in every iframe.
One last thing is important, its Caching on your developer machine: I have tried this scripts in IE, but with loaded "IE Developer Toolbar" with "Disable > Cache", you ie will cache the script loaded by iframe! Even press STRG+F5 isnt enough! At best, develop in Firefox with installed JonnyCache extension. In this way you will get no problems while developing! I dont use parameters at my script url's so i can ensure ie not to use cache maybe by changing connect-call to:
for(var i=0; i<scr.length; i++) this.transactions[i] = YAHOO.util.Connect.asyncRequest('GET', scr[i]+'?_p='+escape(new Date()), callback);
Thatz it!
Any suggestions / addons or so to it?