Since the SWF9 runtime in OpenLaszlo, the internal splashscreen isn’t anymore available. So if you need some preloader animation with a progressbar, you must implement an ajax-loader. You also have the option, to implement a preloader based on actionscript, but these isn’t multi runtime compatible and will not work with the HTML Runtime. So it’s the best solution, to implement a preloader for your OpenLaszlo applications based of JavaScript.
Click here for a quick demo Image may be NSFW.
Clik here to view.
In the first step, we will create the Preloader for the SWF10-Runtime. In a further step, we will change them for the HTML5-Runtime.
Sure you can use this preloader also for Flash- or Flex-Compiled SWF-Files Image may be NSFW.
Clik here to view.
At first we take the HTML embedding from a previous Solo Export, and extend it in the following steps.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<meta http-equiv="EXPIRES" content="0">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<![endif]-->
<script type="text/javascript" src="./js/flash_detect.js"></script>
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/embed-compressed.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
<script type="text/javascript" src="./js/loader.js"></script>
</head>
<body>
<noscript>
<font class="statusFont">Please enable JavaScript in order to use this application.</font>
</noscript>
<div id="lzsplash">
<p id="lzsplashp">
<img id="loadstatusimage" src="./img/ajax-loader.gif" />
<br />
<br />
<font id="loadstatus" class="statusFont"> 0% cached...</font>
</p>
</div>
</body>
</html>
In this part we have included the required CSS and JavaScript-Files, checking if JavaScript is available and created a Div-Layer for our Preloader.
Attention: By integrating the preloader into your HTML design, do not change the hierachy of the Div-Structure. If you do that, the swfobject will be not displayed anymore in some Internet Explorer Versions. Another problem is the wmode attribute, that is used to let some other elements upper the flash displayed, this isn’t recommendable. The practice have showed, that within some Firefox browser that are running on Windows the Flash file isn’t correctly loaded.
Tip: For creating quick a nice loading animation as a gif, i use the www.ajax-loder.info Site. There you can create directly online your own load animation, by choosing an animation and colored it with your prefered color.
The embedded CSS-Files are only for styling and placing the Div-Layers. Further there is a Flash-Detection, which you can get on www.featureblend.com, so we could give the visitor a message and the download-link if there’s no Flash available.
if(FlashDetect.versionAtLeast(10)) var flashDetected = true;
else var flashDetected = false;
window.onload = function(){
if(!flashDetected){
document.getElementById('loadstatus').innerHTML = "Please download the current version of the Adode Flash Player:<br /><a href=\"http://get.adobe.com/de/flashplayer/\" target=\"_blank\">http://get.adobe.com/de/flashplayer/</a>";
}
}
Additional we have integrated jQuery, for doing some Actions a quite bit faster Image may be NSFW.
Clik here to view.
The main-part of this Preloader is located in the loader.js:
// Reminds that the onload is already called
// The Internet Explorer sometimes seems to call that twice
var loadedCalled = false;
// Load Application
if(flashDetected) {
lz.embed.swf({
url: 'index.lzx.swf10.swf',
allowfullscreen: 'true',
width: '100%',
height: '100%',
id: 'lzapp',
accessible: 'false'
});
// Make Application Container invisible
if($.browser.msie) {
$('#lzappContainer').hide();
}
else {
$('#lzappContainer').css('width', '0px');
$('#lzappContainer').css('height', '0px');
}
// called with a percentage (0-100) indicating load progress
lz.embed.lzapp.onloadstatus = function loadstatus(p) {
// Set styles
//if(!basicStylesSetted) setBasicStyle();
$('#loadstatus').html(' ' + p + '% cached...');
}
// called when this appli
cation is done loading
lz.embed.lzapp.onload = function loaded() {
// Check if the function is
// already called
if(loadedCalled) return;
else loadedCalled = true;
// Set styles
//if(!basicStylesSetted) setBasicStyle();
$('#lzappContainer').show();
$('#lzapp').show();
$('#lzsplash').hide();
}
}
The ‘lz.embed.swf(..);‘ initials the Application-Loading and placement, the ‘lz.embed.lzapp.onloadstatus‘ fires the current percent-number for feeding the progressbar and the ‘lz.embed.lzapp.onload‘ will be fired when the Application is ready to use.
That’s all. The main-problem by all this work is, to get it work in every Browser, like my prefered Browser the Internet Explorer 6 Image may be NSFW.
Clik here to view.
Finishing Notice:
If you use a PHP-File as container for your HTML, and you want to pass some GET-, POST- or other PHP-Variables, there’s attention needed! These variables must be strictly checked, if you want to prävent a possible Script-Injection or bad variables.
As sample, you pass any ID by a GET- or Post-Parameter, like:
http://...index.php?anyID=123
You can catching the ID and pass it without any actions to your OpenLaszlo-/Flash-Application:
...
<script type="text/javascript">
//<![CDATA[
...
lz.embed.swf({url: 'index.lzx.swf10.swf?ses_id=?ses_id=<?php echo $ses_id; ?>&anyID=<?php echo $_GET['anyID']; ?>&lzr=swf10&lzproxied=false', allowfullscreen: 'false', width: '100%', height: '100%', id: 'lzapp', accessible: 'false', cancelmousewheel: false, appenddivid: 'lzappContainer'});
...
//]]>
</script>
...
This is very bad and dangerous!
If your visitor do change these ID you’ve catched from a GET- or Post-Parameter, like:
http://...index.php?anyID=123&badParameter1=bad&badParameter=superbad&
or even better:
http://...index.php?anyID=123 '}); document.title = 'mega bad'; //
Then maybe you have a problem. Everybody can inject any JavaScript into your site!
In the last sample, your visitor closed with ‘123 ‘});‘ the ‘lz.embed.swf(..);‘ and injects a new JavaScript action like ‘document.title = ‘mega bad’;‘. Finally he cuts the rest of your statements with a ‘ //‘, to get no JavaScript-Errors.
So, you must validate all passed Parameters in the head of your PHP-File strictly, copy these into their own self-created variables, validate them and use only this copies in your following code. Don’t use GET- or POST-varibles midst of your scripts.
Also, don’t access GET- or POST-Variables directly inner Functions or Class-Methods. Always pass all Variables you need as Function-Parameters.
That is best Practice!
Click here finally for a demo Image may be NSFW.
Clik here to view.
Sourcecode: OpenLaszlo - Preloader (1126)
If you found some bugs or have some Tips, please contact me.
Do you make some changes, because any Browser-Version has some fault, contact me too… So i can update these little Tutorial-Scripts, and give other guys also this corrected files.. Image may be NSFW.
Clik here to view.