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!