Javascript to Laszlo via ExternalInterface: The Missing HelloWorld Example
Ever tried to call functions in Laszlo using JavaScript in the HTML page using the built-in flash.external.ExternalInterface class which is included in Flash Player 8 and above? There isn't exactly a wealth of documentation on how to accomplish the simplest use-case of this, but it can be done very easily.
I have created a simple "Hello World" example that illustrates exactly how to call ActionScript functions in OpenLaszlo shockwave movies from Javascript functions in the HTML page, and vice versa, using the flash.external.ExternalInterface library that comes built-in to Flash 8.
Download HelloWorld Example
ExternalInterface.zip (2 Kb), last updated on 2007.01.28
The example runs on OpenLaszlo "legals" beta, and requires no other JavaScript or ActionScript libraries, and no other Shockwave movies. In order to run the example, simply unzip the helloWorld.html and helloWorld.lzx file into a running OpenLaszlo environment.
Without further ado, here are both of the aforementioned files in their entirety:
<!--
helloWorld.html
Copyright 2007 Alexander Saint Croix
Published under Creative Commons License
-->
<html>
<head>
<link rel="SHORTCUT ICON"
href="http://java.eremite.org/favicon.ico"/>
<title>
Javascript to Laszlo via ExternalInterface
</title>
<script
src="../lps/includes/embed-compressed.js"
type="text/javascript">
</script>
</head>
<body>
<button
onclick='document.getElementById("lzapp").sayHello();'>
Say Hello to Flash
</button>
<div id="app" style="height: 400;">
<embed
width="400"
height="300"
align="center"
pluginspage="http://www.macromedia.com/go/getflashplayer"
swliveconnect="true"
allowscriptaccess="sameDomain"
flashvars="lzt=swf&debug=true&lzr=swf8"
name="lzapp"
bgcolor="#ffffff"
quality="high"
type="application/x-shockwave-flash"
src="helloWorld.lzx?lzt=swf&debug=false&lzr=swf8"
id="lzapp"/>
</div>
</body>
</html>
This HTML file references the embed-compressed.js script that comes with each Laszlo installation. If you unzip the HTML file directly into your context root, please update that path reference, as the example will not work otherwise. The LZX document below must be published in the same directory as the HTML document.
/*
* helloWorld.lzx
* Copyright 2007 Alexander Saint Croix
* Published under Creative Commons License
*/
<canvas width="400">
<simplelayout axis="y"/>
<text id="t01" width="400"></text>
<button id="b01"
onclick="sayHelloBack()">
Say Hello Back to JavaScript
</button>
<script>
var c = flash.external.ExternalInterface.
addCallback("sayHello", null, sayHello);
var iter = 0;
function sayHello () {
++iter;
var out1 = "JavaScript has said hello ";
var out2 = " times!"
Debug.write(out1 + iter + out2);
t01.setAttribute('text', out1 + iter + out2 );
}
function sayHelloBack() {
LzBrowser.loadJS('alert("hello back")');
}
LzBrowser.loadJS('document.getElementById("lzapp").sayHello()');
</script>
</canvas>
This file tells JavaScript to call its sayHello function upon successfully loading, so you will know immediately whether you have correctly installed the code. I tested this example on Firefox 1.5 and IE 6.x on Windows, and will provide more information or fix any bugs which anyone brings to my attention. Remember--in order for this to work, you must have version 8 or higher of the Flash Player installed in your browser!
Enjoy!
Comments
thanks alot, a valuable piece of knowledge. I didn't know one can use
flash.external.ExternalInterface
within openlaszlo.
Posted by: Mohamed | October 3, 2007 12:37 PM
Hi,
This is really a very good example. But actually my requirements are a bit different and I doubt if such a thing is possible. Can you provide an example for the same if possible?
I want to make an swf file called readlocalxml.swf, which will read the urls specified in a an xml file. Now I want this readlocalxml.swf file to read the url and call back to the javascript funtion.
The scenario is something like this. I have readlocalxml.swf on my system desktop. I embed it into an html file using swfobject. This html file also have a javascript function into it.
Now I open this html file locally, i.e. not through a server. The url will be something like this:
file:///C:/Documents and Settings/Desktop/Test.html.
This html have swf file embed which will pass the read xml file parameters to the javascript function on the html page.
Is such a thing possible. Kindly let me know if its possible.
An example will be best.
Posted by: Abhinav | February 4, 2008 2:56 PM