APEX-AT-WORK no image

Dynamic file directories through javascript on page load

Von Tobias Arnhold 8.03.2009
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...

Post Tags:

2 Comments " Dynamic file directories through javascript on page load "

Patrick Wolf 03 August, 2009 17:11

Hi Tobias,

why do you make it so complicate by loading the external scripts with some Javascript code.

Just change your existing header/template code from

/i/themes/ext-2.0.2/resources/css/ext-all.css

to

&EXTJS_DIR./resources/css/ext-all.css

Create a substitution string called EXTJS_DIR in Shared Components\Application Definition\Substitutions and set the value to

/i/themes/ext-2.0.2

Run the page and everything is fine. If you install it on another system you just have to change this value. BTW, instead of using the substitution string you can also use the application item and populate it during initialization. But I would not use the Javascript part, because that's not necessary and much slower.

Regards
Patrick

Tobias Arnhold 04 August, 2009 07:05

Hi Patrick,

thanks for your hint. Somehow I must have come on the wrong track.

Your example sounds much easier and faster!

Best regards

Tobias