Saturday, May 17, 2008

Access the Flash Player in OpenLaszlo

In previous blog entries, I demonstrated using the Flash Player via Flex to write data to the clipboard and to read/write Flash cookies. In this blog entry, I intend to demonstrate how to interact with the Flash Player from OpenLaszlo.

I'll specifically use these same two functions (writing data to the clipboard and interacting with Flash Cookies) to demonstrate OpenLaszlo interaction with the Flash Player. One very important note here is that, as of today (17 May 2008), OpenLaszlo specifically supports SWF7 or SWF8 but not SWF9. On the other hand, Flex only supports SWF9 and not SWF7 or SWF8. For the utilities I am demonstrating here, this distinction does not matter.

Using Flash with OpenLaszlo to Write to Clipboard

The code below shows a simple OpenLaszlo LZX file that adequately demonstrates the ability to write to the clipboard in OpenLaszlo via the Flash Player.


<canvas width="750" height="500">
<script>
<![CDATA[
function placeInputTextOnClipboard()
{
LzBrowser.setClipboard(inputTextArea.text);

}
]]>
</script>
<window id="MainWindow"
title="Write to Clipboard via Flash Player">
<simplelayout axis="y" spacing="10" />
<statictext id="mainLabel"
width="500"
height="25">Enter a string below to write to the clipboard.
</statictext>
<edittext id="inputTextArea" width="500"/>
<button onclick="placeInputTextOnClipboard()">
Click Me to Place Text on Clipboard
</button>
</window>
</canvas>


The single highlighted line in the code listing above is all that it takes to write to the clipboard from OpenLaszlo code. This line uses OpenLaszlo's LzBrowser (swf) class. The advantage of using this LzBrowser class is that the code that uses this class is portable to the DHTML runtime as well, thanks to the LzBrowser class for DHTML. The ability of this code to compile for both SWF and DHTML deployments is proven with the following two screen snapshots that show a successful command-line compilation of the code above for SWF8 and a successful compilation of the same code for DHTML.

Compiling to SWF8 with LzBrowser.setClipboard



Compiling to DHTML with LzBrowser.setClipboard



The easiest way to see other common functionalities available for SWF and DHTML environments is to read the LzBrowser documentation for both SWF and DHTML. Doing so shows that other supported functions include callJs, getVersion, and loadURL.

I need to take a single paragraph detour here for an important note. At the time of my writing of this blog entry, my use of LzBrowser.setClipboard() for DHTML was not working properly and was reporting "LFCdhtml-debug.js#18026: System is not defined". I am not sure if this is me missing a necessary OpenLaszlo file in my WAR file or a DHTML bug that will be fixed before OpenLaszlo's DHTML support is formally released with OpenLaszlo 4.1 or if it is some other issue altogether. In the LFCdhtml-debug.js file at line 18026, there is a line "System.setClipboard()" that looks like it is the Flash Player call rather than a DHTML-appropriate call. Because I most often use OpenLaszlo's SWF8 capabilities, this has not been an issue for me personally. Note that the LzBrowser.getVersion works properly for me in both SWF compilations (reports Flash Player's version) and in DHTML (reports web browser name and version).

It was easy to write data to the clipboard in OpenLaszlo in both the SWF and DHTML code because the LzBrowser class specifically supported this functionality. However, there are other Flash Player functions that are not explicitly supported in LzBrowser. To access these from OpenLaszlo, we'll need to access them using the Flash Player ActionScript classes that provide access to the Flash Player.

In my blog entry on Flash Cookies with Flex, I demonstrated use of the flash.net.SharedObject class to write and read Flash cookies. OpenLaszlo provides a handle for calling ActionScript classes. This can be used to call this same flash.net.SharedObject class. The simple code below shows how one can write to a Flash Cookie from OpenLaszlo:


<canvas width="750" height="500">
<script>
<![CDATA[
function writeInputTextToCookie()
{
var lso = SharedObject.getLocal("dustinLaszloLocalSharedObject");
lso.data.text = inputTextArea.text;

persistedText.setText(inputTextArea.text);
}
]]>
</script>
<window id="MainWindow"
title="Write and Read Flash Cookies">
<simplelayout axis="y" spacing="10" />
<statictext id="mainLabel"
width="500"
height="25">Enter a string below to write to the Flash Cookie.
</statictext>
<edittext id="inputTextArea" width="500"/>
<statictext id="persistedText" width="500" height="25">TBD</statictext>
<button onclick="writeInputTextToCookie()">
Click Me to Write Text to Flash Cookie
</button>
</window>
</canvas>


I highlighted the applicable code for writing to a Flash cookie from OpenLaszlo. It looks suspiciously similar to the Flex code for persisting Flash cookies because both take advantage of Flash-specific ActionScript classes.

The next screenshot shows how the compilation process of the above code looks:



Once the OpenLaszlo-based, Flash Cookie-writing application has been compiled into its SWF8 version, it can be run as shown in the next screen snapshot. In this example, I entered the text "Please write this out to cookie." in the input text field. After clicking on the only available button, that same string is shown to indicate that it was processed and the cookie is persisted.



I can verify that the cookie was written by going to my local storage drive and checking for the cookie. I documented in the Flash Cookies with Flex blog entry regarding this operating-system specific location. The next two screen snapshots indicate the presence of this newly written file from a Windows Explorer viewpoint and from a Windows PowerShell viewpoint. Note that I have intentionally marked-out the portion of the directory that is specific to me and randomly named for security reasons.

Windows Explorer View of OpenLaszlo-Persisted Flash Cookie



Windows PowerShell View of OpenLaszlo-Persisted Flash Cookie



I highlighted with a yellow-ish rectangle the text contents of the Flash Cookies as viewed in PowerShell with the type command. The text contents match what was specified in the OpenLaszlo application to be written to a Flash Cookie.

It was remarkably easy to access Flash Player ActionScript classes to work with the Flash Player. However, the one major drawback to directly accessing these ActionScript classes is that they are not supported in the DHTML runtime environment. Although the LZC compiler can compile the file okay even with --runtime=dhtml set, the application does not work correctly. When debug is turned on, the error preventing the application from running in DHTML mode becomes clear: the Flash Player-specific ActionScript class SharedObject cannot be found. The next screen snapshot displays this:



While it is not surprising that DHTML runtime cannot support a Flash Player-specific ActionScript class, it is important to make note of it because using such classes might benefit an OpenLaszlo application to be deployed to Flash Player runtime but will not work and might even hinder the same application's deployment to the DHTML runtime.

Conclusion

OpenLaszlo provides extremely easy access to a few of the most common Flash Player functions via its LzBrowser classes for SWF and DHTML. The advantages of this approach include ease of use and support for the multiple runtime environments.

It is not much more difficult to use the Flash Player ActionScript classes directly to obtain Flash Player functionality not included in LzBrowser. However, the one major disadvantage here is that these classes are Flash-specific and so do not work in the DHTML runtime. There are other things that one can do with OpenLaszlo that are also Flash-only, so these things can and are done. They simply require extra care (and probably a second thought) when adding them to OpenLaszlo applications.

3 comments:

Snow said...

Hey Dustin,

I came across your blog while looking for OpenLaszlo developers for a Laszlo project I have. I can't really call it a 'project' because what I need done is just replace an image in an open source Laszlo file, and then generate the relevant .swf file after the image has been replaced. That's it!

I'm not a developer by trade, and I don't wish to install the OpenLaszlo software, and then stumble my way across it just to make the small change described above.

If you are a freelance developer and would be interested in this 'project', please let me know. On the other hand, if you're not interested, but know someone who might be, could you please pass this on?

Please reply to me at:

snowboarder.usa (at) gmail.com

Look forward to hearing from you.

Thanks.

Viraf

Dustin said...

This does appear to be a simple task, but I unfortunately have too much on my plate right now to take on even a simple task. I recommend that you check out the OpenLaszlo Consultants for Hire page and look especially at Geert Bevin who has been active in the OpenLaszlo blogosphere and advertises availability for project-based contract work on the referenced page. I will also forward your contact information onto colleagues who develop with OpenLaszlo.

Snow said...

Dusin,

Thank you very much for your quick response, and suggestions.

Regards,

V