New job, new tools, new fun!

Being relatively new to the OSL, I have been gleefully learning some new tools. Specifically, Drupal and OpenLaszlo. In fact, I’m having so much fun with them I feel the need to share. So, with that in mind …

The problem. Well, OK, it’s not really a problem. Let’s call it a “challenge”. Drupal, for reasons too in-depth to go into right now, does not allow page authors to embed JavaScript directly into the body of a page. OpenLaszlo, on the other hand, uses JavaScript to embed applications in pages.

Hmm. So how does one embed an application developed in OpenLaszlo in a Drupal site?

Well, after a bit of head-scratching, this is what I learned:

Drupal has two handly little tools - drupal_add_js() and drupal_call_js() - to help. drupal_add_js() allows you to add external JavaScript files to the page header, and drupal_call_js() allows you to call the functions in the external scripts.

Normally, to embed an OpenLaszlo application you add the following code to the desired page:

<script src="/lps-3.3/lps/includes/embed.js" type="text/javascript"> </script>
<script type="text/javascript">
lzEmbed({url: 'AppName.lzx?lzt=swf', bgcolor: '#ffffff', width: '900', height: '600'});
</script>

However (hah! You should have known it wasn’t going to be quite that easy), there are some small issues that need to be dealt with before it will work properly. First of all, the script assumes it is being run from the Laszlo server directly, rather than the Drupal server. So we need to copy the Laszlo embed.js resource script from the Laszlo server over to the Drupal server and turn that JavaScript into something Drupal-compatible using drupal_add_js():

drupal_add_js('/drupal/path/to/embed.js');

And we need to drop the rest of the JavaScript into a file (we’ll call it laszloapp.js) that we can load using drupal_add_js() and save it to the Drupal server filesystem:

function load() {
lzEmbed({url: 'http://laszloserver.org:8080/AppName.lzx?lzt=swf', bgcolor: '#ffffff', width: '900', height: '600'});
}

To load the script into the Drupal page, we call it thusly:

drupal_add_js('/drupal/path/to/laszloapp.js');

Notice we have put the lzEmbed() function inside a load() function. This is because the drupal_add_js() function inserts the JavaScript (and therefore the Laszlo object) into the page head, above the rest of the page content. So to control where the Laszlo object is embedded in the page, we need to use the drupal_call_js() function to call the load() function from laszloapp.js. At the point in the page where you want to insert the Laszlo object:

<div id="laszlo_object">
<?php
$js = drupal_call_js(load);
return $js;
?>

Et voila! The Laszlo application loads within the “laszlo_object” div.

In a nutshell:

  1. Copy the embed.js file from the Laszlo server to the Drupal server
  2. Create a laszloapp.js file containing the following:
    function load() {
    lzEmbed({url: 'http://laszloserver.org:8080/AppName.lzx?lzt=swf', bgcolor: '#ffffff', width: '900', height: '600'});
    }
  3. Add the following code to the Drupal page:
    <?php
    drupal_add_js('http://newosl.osuosl.org/themes/newosl/embed.js');
    drupal_add_js('http://newosl.osuosl.org/themes/newosl/oslmon.js');
    ?>
    <div id="laszlo_object">
    <?php
    $js = drupal_call_js(load);
    return $js;
    ?></div>