APEX-AT-WORK no image
Tags:

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:

Veröffentlicht von Tobias Arnhold Am 12:53
Kategorien: