Javascript to Lazslo communication

[fission]

(originally posted elsewhere)

I need help.

We have a Laszlo project that has an embedded Flash .SWF file that needs to control a method on the root of the canvas.

The tack I have taken is to have the Flash .SWF call out to the HTML page, calling a Javascript function. This works fine. If I then try to call the method inside the Laszlo file from the Javascript, I get on response. I have tried every trick I can under the DOM to get this to work, and it doesn't.

Is there someone out there who can show me how to do this? Or is there a more direct approach to this problem?

Thanks!

[d~l]

currently I'm playing around with javascript calls to swf .. to explore what is possible .. can you give a clearer example of what method(s) you are trying to control from swf embedded in lzx app?

[coszmin]

I have a thread about this , here , in which i've been talking to myself .

How are you guys actually trying to call a laszlo method from the javascript / dom enviroenment ?

I know you can do jS <-> Flash . I know Laszlo - > jS works just as jS -> Flash with the loadUrl method . But how do you do jS - > Laszlo ???

[d~l]

I have not yet finished experimenting ..

Currently can "warp" between dhtml frames ..

{ [lzx] --> [js] } - lzx in one dhtml frame out to external dhtml frame --> { [js] -->[swf] }

using DOM navigation .. parent.framename.location.href = url;

then ..

{ [lzx] <-- [embedded swf is in external dhtml frame] } - back from dhtml frame - { [js] <-- [swf] }

...

Have not yet made the connector ..

{ [lzx method] <-- [embedded swf is held in external dhtml frame] } <-- back from dhtml frame -- { [js] <-- [swf] }


Need to understand what methods are to be changed ..

[d~l]

double-clicked .. sorry

[fission]

I can get the Flash (embedded in a Laszlo file) to communicate with Javascript by using this construct from a Flash button:

getURL("javascript: javascript_function_name(arguments);");

where:
- *javascript_function_name* is the javascript function name, and
- *arguments* is the comma-delimited set of input parameters to the function

This is the most direct way that I've found and it has worked flawlessly for me.

I have tried to create canvas-level methods in my Lazslo file, then attempted to hit them from Javascript using the DOM. This is where I either don't understand the architecture of Lazslo or it fails: how does one hit a Lazslo method from an external source?

You can bring in XML data from a static XML file or a database. You can URL-encode variables on the URL at runtime. Can you change the value of these init-time variables after the fact? If so, there might be a way to have an event watcher listen for changes in the value, then trigger an event.

Right now, I have invisible buttons in Lazslo doing the job of the Flash buttons. This is not the best solution, but does work. I REALLY want to figure this out!!! Any help is appreciated.

[coszmin]

i have not tried this , but based on a previous thread here it seems that laszlo has a similar getURL method itself , so laszlo - > jS comunication might be possible without embedding a ghost flash movie in laszlo .

however the big mistery is , like you were saying , running a method in the laszlo app from javaScript

[hqm]

Can you post the code you you use when trying to call into the Laszlo app ?

I don't know of any good way to call into a Flash app from the browser. There are some methods supported by Flash objects from browsers, documented at this URL

http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html

They don't seem to support function calls directly, but they do support a SetVariable call, which you could use to set a global variable in the Laszlo app.
I don't know how portable this API is across browsers.

In other words, if any kind of cross-browser compatibility is important, I would guess that this stuff will not be easy to get working reliably.

Based on some app notes from Macromedia's web site, this works in IE 6 but not in Firefox. There was some note about how including an "id" attribute of the embedded object caused it to fail in Netscape, but I don't know enough of the grubby details to know what they are talking about.

This code embed an app named "foo.lzx", and can set the value of a Flash global var named 'blah' to the value typed into an HTML input field in the same page. It will be visible to the LPS app as "blah". But there is no event or function call sent when the value is modified, so you would have to check for it's value being modified in some kind of idle loop.

<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico">
<title>Laszlo Application</title>
<script src="/intl2/lps/includes/embed.js" type="text/javascript"></script></head>

<body style="margin: 0; background-color: #ffffff">

<script type="text/javascript">

lzEmbed({url: 'foo.lzx?lzt=swf', bgcolor: '#ffffff', width: '1200', height: '600'});


function send_to_flash(varname, arg) {
window.document.lzapp.SetVariable(varname, arg);
}

</script>
<p>

Type some text: <input type="text" name="sendText" maxlength="45" onChange="send_to_flash('blah', this.value)">
</body>

</html>

[hqm]

Note these comments from the Macromedia app note page about browser compatibility:

MSN TV (formerly WebTV) currently supports Macromedia Flash Player 4 playback. See MSN TV's site for more information.

Real's RealSystem G2 and later supports Macromedia Flash playback. See Real's Site for more information.

The Opera browser for Windows supports Flash plug-ins. JavaScript is supported, but plug-in detection has not been tested. See the Opera Homepage for more information.

Internet Explorer 4.5 for Macintosh (and earlier versions) do not support sending variables using POST from a Get URL or Load Variables action. For more information on this browser, see Flash and Internet Explorer Issues on the Macintosh Platform (TechNote 13638).

Controlling a Flash movie via JavaScript methods requires Netscape Navigator 3.x to 4.x(with LiveConnect enabled), Netscape 6.2 or higher, or Internet Explorer 3.0 or higher (with ActiveX enabled). Netscape 6.0 and 6.1 do not support LiveConnect. See the article Scripting with Flash for more detail. There are also two example based Technotes: "An example of communication between JavaScript and Flash" (TechNote 15683) and "An example of communication between Flash movies" (TechNote 15692).

[coszmin]

i'd be happy with a solution that works on MSIE 5.5 + , basically 90% of the web users .

if you want to target EVERYONE you should stay away from CSS / Flash and most jS and write everything in HTML 3.0 , my grandmother is refusing to upgrade her Netscape 3 :) .

[fission]

I finally did figure this problem out, at least in Internet Exploder.

You need to set up your embedded Laszlo-SWF just like you do a regular SWF, by including the ID parameter in the embedding statements, so that the DOM can access the object on the page.

You set up your Javascript function to send a value into a variable in the embedded object.

You then need to set up an attribute in the canvas that will accept the value that is passed in. This is a canvas-level (therefore 'global') variable.

Finally, you need to set up a canvas-level event method that captures the 'onidle' event. I set up my 'onidle' script to only capture & process the change, so it wouldn't continually change. I also set the script up so that it would process one of several values, then reset to a default state after about a second, 're-loading' the function to work again.

I guess I should have just gone to Macromedia the first time & trusted my instincts on this one. Getting the hosting page set up right was half the battle. Thanks!

[coszmin]

nice , thanks for the update i'll be trying it soon

now maybe someone could copy paste your post into the documentation :P

[fission]

Here is the refined test version of my solution to this problem. You'll find an HTML and LZX file in this ZIP file.
Thanks!

[d~l]

fission .. I have a problem with the test files .. both placed in lps-2.2\myapps\

after launching http://localhost:8080/lps-2.2/myapps/test_opt.html (with test_opt.lzx in same location) ..

above the [ "Type, then click" ] test field

I have a "file not found" page error .. source view below ..


<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /pub/shockwave/cabs/flash/test_opt.lzx
was not found on this server.</p>
<hr />
<address>Apache/2.0.49 (Unix) Server at download.macromedia.com Port 8000</address>
</body></html>


seems to be looking for test_opt.lzx in the wrong URL ?

In test_opt.html I then commented out the object code you created .. here ..


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
data="test_opt.lzx?lzt=swf"
width="300" height="50" id="theTarget">
<param name="movie" value="test_opt.lzx?lzt=swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="salign" value="LT">
<param name="menu" value="false">
<param name="bgcolor" value="#ffffff">
<embed src="test_opt.lzx?lzt=swf" quality="high" scale="exactfit" salign="lt" width="300" height="50" name="theTarget" swLiveConnect="true" bgcolor="blue" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>


and added the standard issue Laszlo html wrapper .. here ..

but also tried adding in your idea of id="theTarget" ..


<object type="application/x-shockwave-flash"
data="test_opt.lzx?lzt=swf"
width="300" height="50" id="theTarget">
<param name="movie" value="test_opt.lzx?lzt=swf" />
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="salign" value="LT" />
<param name="menu" value="false" />
</object>


and at least I can now view the swf in the html wrapper

Seeing the lzx canvas text now .. but still can't pass data from form.

received value:
Change indicator: waiting ..

Where might this test be going wrong?

..

Incidentally, in your first post I had assumed that you were trying to post data from an embedded Macromedia Flash generated swf .. not a Laszlo compiled lzx?lzt=swf.

[fission]

d~l,

In my first post, I was describing the problem of going from a SWF resource in a Lazslo file communicating with the hosting page Javascript, that would then turn around and communicate back to the Lazslo app. In my particular instance, I was trying to make the Flash button load an external IFRAME with an URL defined in the Laszlo file. I didn't necessarily have to load the IFRAME this way, but I also had to turn invisible parts of the Laszlo interface to make the IFRAME visible - a screen real estate issue.

I'm not entirely sure where the problem is. I can tell you what I'm running, and what the code runs on.

I'm developing on a dual 3.2 Pentium 4 machine running Windows XP Pro SP2 with 1G RAM. The Flash player version is 7,0,19,0. The Lazslo version is the newest one for Windows, 2.2. Also, my Java is version 1.4.2_05 (build b04).

I am also testing in MS Internet Explorer 6.0.2900.2180. I have not had a lot of luck running Laszlo in Firefox, and have not tested it yet in Safari.

I'd hazard a guess that there is some issue with Apache. Make sure that you are running the files in a [sub-]directory in your server, and that they are being served from the server. Check to make sure permissions for that directory and files are such so that these files can be served. Since I am using Tomcat (the default server packaged), and all permissions are set up during install time, I'm not having a problem. I know next to nothing about Apache, but I do know that there are a number of permission/firewall settings that have to occur.

Anyone out there know of problems with serving Laszlo files from an Apache server...?

[d~l]

Thanks for replying fission ..

I am serving LPS content from Tomcat 5.0.28 (LPS-2.2 core installation).

I think the rogue link is trying to access Macromedia .. not my Apache server .. here is the clue ..


Apache/2.0.49 (Unix) Server at download.macromedia.com Port 8000


I am running both Apache server (port 88) and Tomcat 5 server (port 8080) on my development platform. Nothing on port 8000 (as in the above report).

XP Pro SP1
Java 2.0.47

I'll try again using the Laszlo default installation (I have Laszlo installed on Tomcat 5.0.28 .. and I also changed the path in your doctype to point to

<!DOCTYPE canvas SYSTEM "C:\Tomcat5\webapps\lps-2.2\tools\lzx.dtd">

..

regarding getting Flash generated swf to communicate from an IFRAME .. I did that using PHP.

..

postscript ..

O.K. .. I have tracked down the problem .. I get the failed display (as reported earlier) only when I am using Opera 75 (which I use concurrently with IE Explorer and Mozilla for testing content) ..

In IE Explorer I get the variable transferred from the form to the embedded lzx?lzt=swf ..

I've experienced other problems with Opera .. e.g. not playing media in the Laszlo examples .. so I'll look at bit more closely at the Flash plugins in there ..

this is the Shockwave plugin (might need an update):-

Shockwave Flash
application/x-shockwave-flash swf
application/futuresplash spl
C:\Program Files\Opera75\Program\Plugins\NPSWF32.dll

[d~l]

just to add to this .. I have started using Mozilla/Venkman to debug javascripts .. as posted here ..

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=1357

try out Mozilla .. with tools Venkman & DOM Inspector .. on the examples in this thread.