What’s DHTML Compilation Good For?

OpenLaszlo allows you to compile applications to SWF8, SWF9 or DHTML. Recently I’ve heard people ask, “why would you want to compile an application to DHTML?”

When you think about it, that’s not a silly question at all. Regardless of whether you compile an OpenLaszlo application to SWF or DHTML, you’ll have similar benefits and simliar constraints. On the positive side, coding complex and interactive user interfaces is straightforward. You’re using a language that was specificially designed for rich Internet applications (RIAs).

However, many of the problems people associate with SWF – inability to bookmark (what exactly?), lack of search engine exposure, back button integration (you want to try explaining what’s supposed to happen when you click back in a RIA), difficulty of integration with traditional HTML applications – affect DHTML-compiled OpenLaszlo applications too. Thankfully these days, most developers understand that a platform like OpenLaszlo isn’t supposed to replace HTML applications, but instead is intended for a specific type of application that’s difficult, if not impossible, to do with HTML. Think Gliffy.

So if DHTML doesn’t solve some of most long-standing “problems” of Flash, what does it offer? Certainly not media support; in fact SWF-compiled OpenLaszlo applications have more consistent support for PNG, as well as FLV, SWF, MP3.

Surely DHTML-compiled OpenLaszlo applications must offer some other benefits then? Well, they work in Webkit, which means they’ll run on the iPhone (and of course many upcoming mobile devices that use DHTML). That’s definitely an advantage, but the applications are still limited by the performance of the small CPU.

So now we get to where DHTML compilation really shines… Remember how I said that OpenLaszlo was good for some applications, and HTML was good for others? DHTML-compilation in OpenLaszlo allows you to run one or more HTML applications inside your OpenLaszlo application!

How can it do this? By using the <html> tag, you can embed another web property (e.g. a web site, HTML-based application) inside your OpenLaszlo application. Here’s an example that shows two HTML web sites embedded in the same OpenLaszlo application:

Screenshot of two HTML applications in one OpenLaszlo application

Unfortunately, I can’t simply embed this example into my blog, because it relies on the OpenLaszlo wrapper code. You have to click the screenshot above and then play with the windows.

You may be aware that SWF-compilation also supports the <html> tag. However, the problem with using the <html> tag with a SWF-compiled OpenLaszlo application is that the IFRAME which displays the HTML web site will always float above the SWF. That means you can’t really have a windowed application, unless you’re satisfied with only having one window in your entire application. And you can’t have two <html> tags, if they’re likely to ever overlap, since there’s no way to control which is on top at any one point.

As you can see, that’s not a problem for DHTML.

Download the source for this example.

Why I should RTFM

A few days ago, I wrote about how to access the named colors in OpenLaszlo 4.2.0. (Where Have All the Colors Gone?) I even wrote a little example showcasing the colors in the lz.colors array. Then Tucker helpfully directed me to a very complete example in the documentation that showed not only the location of the colors, but also a better way of setting colors.

The W3C provides a list of standard CSS colors, and OpenLaszlo now allows you to use those color names as strings when setting colors.

So in addition to being able to say:

myView.setAttribute("bgcolor", lz.colors.cornflowerblue);

… and of course:

myView.setAttribute("bgcolor", 0x6495ed);

… what’s new is that you can also say:

myView.setAttribute("bgcolor", "cornflowerblue");

Notice that the color name is a string, not a variable. Finally, you can also use the pound (#) notation when setting colors in script:

myView.setAttribute("bgcolor", "#6495ed");

Note that when using pound notation, the color value must be a string.

Where Have All the Colors Gone?

In OpenLaszlo you’ve always been able to specify colors in a variety of ways. In tags, you could use named colors, JavaScript hexadecimal notation and pound (hex) notation:

<view bgcolor="red" width="20" height="20" />
<view bgcolor="0xff0000" width="20" height="20" />
<view bgcolor="#ff0000" width="20" height="20" />

In JavaScript, you could use either the hex notation or the named color:

myview.setAttribute("bgcolor", 0xff0000);
myview.setAttribute("bgcolor", red);

Note that in JavaScript, the color is a global variable; not a string. That’s important, because if you try to use the variable’s name in OpenLaszlo 4.2, you’ll get a Debugger warning:

ERROR @colors.lzx#35: reference to undefined variable ‘red’

That’s because all the colors are now neatly arranged in an array called lz.colors. So in 4.2 you would write:

myview.setAttribute("bgcolor", lz.colors.red);

Another benefit of the colors all being grouped in an array – as opposed to being global – is that you can loop through them. I wrote the following application to display the colors and color names available in OpenLaszlo 4.2.

Click the button to render the color boxes. Move your mouse over the boxes to display the name of the color.

The code is below:

<canvas width="460" height="460" proxied="false">

    <class name="colorbox" width="30" height="30" clickable="true">
        <attribute name="colorname" type="string" />
    </class>

    <class name="colornameoutput" extends="text"
           font="Helvetica, Arial, sans-serif"
           fontsize="24" fontstyle="bold">
        <attribute name="updateDel" 
                   value="$once{new lz.Delegate(this, 'displayColor')}" />
        <method name="displayColor" args="c">
            this.setAttribute("text", "lz.colors." + c.colorname);
        </method>
    </class>

    <simplelayout axis="y" spacing="10" />
     
    <view name="colorboxes" width="100%">
        <wrappinglayout spacing="0" />
    </view>

    <colornameoutput name="outputText">
    </colornameoutput>

    <button options="ignorelayout" width="80%" 
            height="80%" align="center" valign="middle"
            font="Helvetica, Arial, sans-serif"
            fontsize="13" fontstyle="bold">
            Show Me The Colors!
            (Be patient, it takes a moment).
        <handler name="onclick">
            this.setAttribute("visible", false);
            for (var i in lz.colors) {
                var colorValue = lz.colors[i];
                var attrs = {bgcolor: colorValue, colorname: i}; 
                var v = new lz.colorbox(colorboxes, attrs);
                outputText.updateDel.register(v, "onmouseover");
            }
        </handler>
    </button>

</canvas>