I fumble around with supporting objects to make my application as portable as possible without any manual scripting. One issue I had discovered had to do with static CSS and JS files provided by frameworks like Ext/YUI or JQuery. I just addressed them hard coded inside my template header:
<html lang="&BROWSER_LANGUAGE.">
<head>
#HEAD#
<title>#TITLE#</title>
<!-- --------------------------------------------------------------------------------- -->
<!-- cascading style sheet file allocation -->
<!-- --------------------------------------------------------------------------------- -->
<!-- apex css integration -->
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_7/theme_3_1.css" type="text/css" />
<!-- extjs css stylesheets -->
<link rel="stylesheet" type="text/css" href="/i/themes/ext-2.0.2/resources/css/ext-all.css" /> -->
<!-- extjs theme -->
<link rel="stylesheet" type="text/css" href="/i/themes/ext-2.0.2/resources/css/xtheme-slate.css" /> -->
<!-- tobias arnhold css integration for extjs -->
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#extjs_css_template.css" />
<!-- inidviual css formatatting -->
<!-- forces form to fit screen height -->
<style type="text/css"> #wwvFlowForm {width:100%; height:100%;} </style>
<!-- --------------------------------------------------------------------------------- -->
<!-- javascript file allocation -->
<!-- --------------------------------------------------------------------------------- -->
<!-- extjs js integration -->
<script type="text/javascript" src="/i/themes/ext-2.0.2/adapter/ext/ext-base.js"></script> -->
<script type="text/javascript" src="/i/themes/ext-2.0.2/ext-all.js"></script> -->
<script type="text/javascript" src="/i/themes/ext-2.0.2/ext-all-debug.js"></script> -->
<!-- json integration -->
<script type="text/javascript" src="#APP_IMAGES#json.js"></script>
<!-- global js variables -->
<script type="text/javascript"> var htmldb_Img_Dir = "/i/"; </script>
<!-- extjs template integration by Tobias Arnhold -->
<script type="text/javascript" src="#APP_IMAGES#extjs_js_template_no_tabs.js"></script>
<!-- Own js, css, libs for applciation -->
<script type="text/javascript" src="#APP_IMAGES#aaw_js.js"></script>
</head>
<body #ONLOAD#>
<!-- id="wwvFlowForm"> --> #FORM_OPEN#
...
If you download this application and use other file directories you would need to change all page headers by hand. So I thought how could I make all directories portable (saved inside the database) and automatically be loaded with an application process. I made two examples both worked perfectly with Firefox but IE 8 failed completely.
<!-- --------------------------------------------------------------------------------- -->
<!-- APEX Page Template for ExtJS - No Tabs -->
<!-- by Tobias Arnhold -->
<!-- --------------------------------------------------------------------------------- -->
<html lang="&BROWSER_LANGUAGE.">
<head>
#HEAD#
<title>#TITLE#</title>
<!-- --------------------------------------------------------------------------------- -->
<!-- set ExtJS source directory -->
<!-- --------------------------------------------------------------------------------- -->
<script type="text/javascript">
// set gloabl variables
var v_dir = "http://www.gwt-ext.com/ext/2.0.2";
var v_wi = "#WORKSPACE_IMAGES#";
var v_ai = "#APP_IMAGES#";
var CSS_ext_all;
var CSS_template;
var JS_ext_base;
var JS_ext_all;
var JS_ext_all_debug;
var JS_template;
var JS_aaw;
// add CSS
// add ext-all.css
var v_file= "/resources/css/ext-all.css";
var v_css = v_dir + v_file;
// set variable head
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added StyleSheet
if (CSS_ext_all){ head.removeChild(CSS_ext_all); }
CSS_ext_all=document.createElement('LINK');
CSS_ext_all.rel='stylesheet';
CSS_ext_all.type='text/css';
CSS_ext_all.href=v_css;
head.appendChild(CSS_ext_all);
// add extjs_css_template.css
var v_file= "extjs_css_template.css";
var v_css = v_wi + v_file;
// set variable head
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added StyleSheet
if (CSS_template){ head.removeChild(CSS_template); }
CSS_template=document.createElement('LINK');
CSS_template.rel='stylesheet';
CSS_template.type='text/css';
CSS_template.href=v_css;
head.appendChild(CSS_template);
// add JS
var v_file= "/adapter/ext/ext-base.js";
var v_js = v_dir + v_file;
// add ext-base.js
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JS_ext_base){ head.removeChild(JS_ext_base); }
JS_ext_base=document.createElement('SCRIPT');
JS_ext_base.type='text/javascript';
JS_ext_base.src=v_js;
head.appendChild(JS_ext_base);
// add JS
// add ext-base.js
var v_file= "/adapter/ext/ext-base.js";
var v_js = v_dir + v_file;
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JS_ext_base){ head.removeChild(JS_ext_base); }
JS_ext_base=document.createElement('SCRIPT');
JS_ext_base.type='text/javascript';
JS_ext_base.src=v_js;
head.appendChild(JS_ext_base);
// add ext-all.js
var v_file= "/ext-all.js";
var v_js = v_dir + v_file;
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JS_ext_all){ head.removeChild(JS_ext_all); }
JS_ext_all=document.createElement('SCRIPT');
JS_ext_all.type='text/javascript';
JS_ext_all.src=v_js;
head.appendChild(JS_ext_all);
// add ext-all-debug.js
v_dir = "/i/themes/ext-2.0.2";
var v_file= "/ext-all-debug.js";
var v_js = v_dir + v_file;
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JS_ext_all_debug){ head.removeChild(JS_ext_all_debug); }
JS_ext_all_debug=document.createElement('SCRIPT');
JS_ext_all_debug.type='text/javascript';
JS_ext_all_debug.src=v_js;
head.appendChild(JS_ext_all_debug);
// add extjs_js_template_no_tabs.js
var v_file= "extjs_js_template_no_tabs.js";
var v_js = v_ai + v_file;
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JS_template){ head.removeChild(JS_template); }
JS_template=document.createElement('SCRIPT');
JS_template.type='text/javascript';
JS_template.src=v_js;
head.appendChild(JS_template);
// add aaw_js.js
var v_file= "aaw_js.js";
var v_js = v_ai + v_file;
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JS_aaw){ head.removeChild(JS_aaw); }
JS_aaw=document.createElement('SCRIPT');
JS_aaw.type='text/javascript';
JS_aaw.src=v_js;
head.appendChild(JS_aaw);
</script>
<!-- --------------------------------------------------------------------------------- -->
<!-- cascading style sheet file allocation -->
<!-- --------------------------------------------------------------------------------- -->
<!-- apex css integration -->
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_7/theme_3_1.css" type="text/css" />
<!-- individual css formatting -->
<!-- forces form to fit screen height -->
<style type="text/css"> #wwvFlowForm {width:100%; height:100%;} </style>
<!-- --------------------------------------------------------------------------------- -->
<!-- javascript file allocation -->
<!-- --------------------------------------------------------------------------------- -->
<!-- json integration -->
<script type="text/javascript" src="#APP_IMAGES#json.js"></script>
<!-- global js variables -->
<script type="text/javascript"> var htmldb_Img_Dir = "/i/"; </script>
</head>
<body #ONLOAD#>
<!-- id="wwvFlowForm"> --> #FORM_OPEN#
And this example which should work with IE. It loads every scripts one by one with 5 seconds in between. If you are more interested take a look into the sources.
<!-- --------------------------------------------------------------------------------- -->
<!-- APEX Page Template for ExtJS - No Tabs -->
<!-- by Tobias Arnhold -->
<!-- Sources: -->
<!-- http://www.phpied.com/dynamic-script-and-style-elements-in-ie/ -->
<!-- http://forum.jswelt.de/javascript/46294-innerhtml-probleme-internet-explorer.html -->
<!-- http://www.phpied.com/javascript-include-ready-onload/ -->
<!-- http://www.phpied.com/javascript-include-ready/ -->
<!-- http://www.phpied.com/javascript-include-ready/#comment-22580 -->
<!-- http://www.javascriptkit.com/javatutors/navigator.shtml -->
<!-- --------------------------------------------------------------------------------- -->
<html lang="&BROWSER_LANGUAGE.">
<head>
#HEAD#
<title>#TITLE#</title>
<!-- --------------------------------------------------------------------------------- -->
<!-- set ExtJS source directory -->
<!-- --------------------------------------------------------------------------------- -->
<script type="text/javascript">
// set gloabl variables
var v_dir = "http://www.gwt-ext.com/ext/2.0.2";
var v_wi = "#WORKSPACE_IMAGES#";
var v_ai = "#APP_IMAGES#";
var CSS_ext_all;
var CSS_template;
var JS_ext_base;
var JS_ext_all;
var JS_ext_all_debug;
var JS_template;
var JS_aaw;
// check browser and start loading files
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var t1 = setTimeout("CSS_ext_all()",5000);
// var t2 = setTimeout("CSS_template()",5000);
// var t3 = setTimeout("JS_ext_base()",5000);
// var t4 = setTimeout("JS_ext_all()",5000);
// var t5 = setTimeout("JS_ext_all_debug()",5000);
// var t6 = setTimeout("JS_template()",5000);
// var t7 = setTimeout("JS_aaw()",5000);
}
else
{
var t1 = CSS_ext_all();
var t2 = CSS_template();
var t3 = JS_ext_base();
var t4 = JS_ext_all();
var t5 = JS_ext_all_debug();
var t6 = JS_template();
var t7 = JS_aaw();
}
// add CSS
function CSS_ext_all() {
// add ext-all.css
var v_file= "/resources/css/ext-all.css";
var v_css = v_dir + v_file;
var html_doc = document.getElementsByTagName('head')[0];
CSS_ext_all = document.createElement('link');
CSS_ext_all.setAttribute('rel', 'stylesheet');
CSS_ext_all.setAttribute('type', 'text/css');
CSS_ext_all.setAttribute('href', v_css);
html_doc.appendChild(CSS_ext_all);
CSS_ext_all.onreadystatechange = function () {
if (CSS_ext_all.readyState == 'complete'|| CSS_ext_all.readyState == 'loaded') {var t2 = setTimeout("CSS_template()",5000);}}
CSS_ext_all.onload = function () {null;}
return true;
}
function CSS_template() {
// add extjs_css_template.css
var v_file= "extjs_css_template.css";
var v_css = v_wi + v_file;
var html_doc = document.getElementsByTagName('head')[0];
CSS_template = document.createElement('link');
CSS_template.setAttribute('rel', 'stylesheet');
CSS_template.setAttribute('type', 'text/css');
CSS_template.setAttribute('href', v_css);
html_doc.appendChild(CSS_template);
CSS_template.onreadystatechange = function () {
if (CSS_template.readyState == 'complete'|| CSS_template.readyState == 'loaded') {var t3 = setTimeout("JS_ext_base()",5000);}}
CSS_template.onload = function () {null;}
return true;
}
// add JS
function JS_ext_base() {
// add ext-base.js
var v_file= "/adapter/ext/ext-base.js";
var v_js = v_dir + v_file;
var html_doc = document.getElementsByTagName('head')[0];
JS_ext_base = document.createElement('script');
JS_ext_base.setAttribute('type', 'text/javascript');
JS_ext_base.setAttribute('src', v_js);
html_doc.appendChild(JS_ext_base);
JS_ext_base.onreadystatechange = function () {
if (JS_ext_base.readyState == 'complete'|| JS_ext_base.readyState == 'loaded') {var t4 = setTimeout("JS_ext_all()",5000);}}
JS_ext_base.onload = function () {null;}
return true;
}
function JS_ext_all() {
// add ext-all.js
var v_file= "/ext-all.js";
var v_js = v_dir + v_file;
var html_doc = document.getElementsByTagName('head')[0];
JS_ext_all = document.createElement('script');
JS_ext_all.setAttribute('type', 'text/javascript');
JS_ext_all.setAttribute('src', v_js);
html_doc.appendChild(JS_ext_all);
JS_ext_all.onreadystatechange = function () {
if (JS_ext_all.readyState == 'complete'|| JS_ext_all.readyState == 'loaded') {var t5 = setTimeout("JS_ext_all_debug()",5000);}}
JS_ext_all.onload = function () {null;}
return true;
}
function JS_ext_all_debug() {
// add ext-all-debug.js
v_dir = "/i/themes/ext-2.0.2";
var v_file= "/ext-all-debug.js";
var v_js = v_dir + v_file;
var html_doc = document.getElementsByTagName('head')[0];
JS_ext_all_debug = document.createElement('script');
JS_ext_all_debug.setAttribute('type', 'text/javascript');
JS_ext_all_debug.setAttribute('src', v_js);
html_doc.appendChild(JS_ext_all_debug);
JS_ext_all_debug.onreadystatechange = function () {
if (JS_ext_all_debug.readyState == 'complete'|| JS_ext_all_debug.readyState == 'loaded') {var t6 = setTimeout("JS_template()",5000);}}
JS_ext_all_debug.onload = function () {null;}
return true;
}
function JS_template() {
// add extjs_js_template_no_tabs.js
var v_file= "extjs_js_template_no_tabs.js";
var v_js = v_ai + v_file;
var html_doc = document.getElementsByTagName('head')[0];
JS_template = document.createElement('script');
JS_template.setAttribute('type', 'text/javascript');
JS_template.setAttribute('src', v_js);
html_doc.appendChild(JS_template);
JS_template.onreadystatechange = function () {
if (JS_template.readyState == 'complete'|| JS_template.readyState == 'loaded') {var t7 = setTimeout("JS_aaw()",5000);}}
JS_template.onload = function () {null;}
return true;
}
function JS_aaw() {
// add aaw_js.js
var v_file= "aaw_js.js";
var v_js = v_ai + v_file;
var html_doc = document.getElementsByTagName('head')[0];
JS_aaw = document.createElement('script');
JS_aaw.setAttribute('type', 'text/javascript');
JS_aaw.setAttribute('src', v_js);
html_doc.appendChild(JS_aaw);
JS_aaw.onreadystatechange = function () {
if (JS_aaw.readyState == 'complete'|| JS_aaw.readyState == 'loaded') {null;}}
JS_aaw.onload = function () {null;}
return true;
}
</script>
<!-- --------------------------------------------------------------------------------- -->
<!-- cascading style sheet file allocation -->
<!-- --------------------------------------------------------------------------------- -->
<!-- apex css integration -->
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_7/theme_3_1.css" type="text/css" />
<!-- individual css formatting -->
<!-- forces form to fit screen height -->
<style type="text/css"> #wwvFlowForm {width:100%; height:100%;} </style>
<!-- --------------------------------------------------------------------------------- -->
<!-- javascript file allocation -->
<!-- --------------------------------------------------------------------------------- -->
<!-- json integration -->
<script type="text/javascript" src="#APP_IMAGES#json.js"></script>
<!-- global js variables -->
<script type="text/javascript"> var htmldb_Img_Dir = "/i/"; </script>
</head>
<body #ONLOAD#>
<!-- id="wwvFlowForm"> --> #FORM_OPEN#
IE errors:
Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Mon, 3 Aug 2009 11:20:49 UTC
Meldung: 'null' ist Null oder kein Objekt
Zeile: 13
Zeichen: 707
Code: 0
URI: http://
:8080/i/themes/ext-2.0.2/ext-all.js
Meldung: 'null' ist Null oder kein Objekt
Zeile: 1555
Zeichen: 13
Code: 0
URI: http://:8080/i/themes/ext-2.0.2/ext-all-debug.js
Interesting behavior in example two: When I reload the page after I got these errors it works but when I then click onto another leaf IE crashes completely. For now I have enough...
