It’s been over a month since my last (proper) post. I’ve been heads-down on a Webtop project. One feature that I had to become familiar with for this was CSS. Yes, OpenLaszlo has included support for CSS for some time, although it wasn’t documented. CSS was added to OpenLaszlo specifically to support the Webtop product. Webtop is customizable, but the client (i.e. OpenLaszlo) libraries are precompiled into .lzo files, so developers cannot modify them directly when they want to skin the product.

CSS works in OpenLaszlo 4.1.1 and 4.0.13. I haven’t tried it in the 4.2 branch.

You can use CSS to control colors, resources, text labels, coordinates and dimensions. Since the standard OpenLaszlo components don’t support any CSS properties yet, here’s how to define your own. This post is supposed to be a quick introduction to CSS in OpenLaszlo; I’ll post some more specific posts over the coming days.

When you define your class, specify its default styles in a stylesheet tag, and use the new style binding to constrain individual view properties to CSS properties:

styleablebox.lzx

<library>

    <stylesheet>
        styleablebox {
            borderColor: #0000ff;
            backgroundColor: #00ffff;
            buttonText: "Move the box!";
            buttonX: 30;
            buttonY: 30;
        }
    </stylesheet>

    <class name="styleablebox" width="200" height="100">
        <view name="bg" width="100%" height="100%"
              bgcolor="$style{'borderColor'}">
            <view name="inner" width="90%" height="80%"
                  align="center" valign="middle"
                  bgcolor="$style{'backgroundColor'}">
                <text fontsize="24">Stylable Box</text>
                <button text="$style{'buttonText'}" 
                        x="$style{'buttonX'}" y="$style{'buttonY'}">
                    <handler name="onclick">
                        classroot.animate("x", 25, 500, true);
                    </handler>
                </button>
            </view>
        </view>
    </class>

</library>

The default styles will apply to that class when you instantiate it, unless you override them later. To override them, simply define a new stylesheet tag later in the code:

test-styleablebox.lzx

<canvas proxied="false">
    <include href="styleablebox.lzx" />

    <stylesheet>
        styleablebox {
            borderColor: #ff0000;
            backgroundColor: #ffff00;
            buttonText: "Slide away!";
            buttonX: 80;
            buttonY: 50;
        }
    </stylesheet>

    <styleablebox />

</canvas>

There are a variety of supported CSS selectors that will allow you to specify which objects particular styles apply to; I’ll discuss those in a future post.

When you need to additional work on a previously-built OpenLaszlo application, you need to make sure that you use the same version of OpenLaszlo as was originally used to build it. If you use a different version of OpenLaszlo, you may run into incompatibilities in the existing application’s LZX source code. Unless the original application developer documented what version of OpenLaszlo they used, it won’t be immediately obvious.

I’m assuming that at this point, you have the source code, and a compiled SWF (possibly from the live deployment server). If you don’t have the application as a compiled SWF, then this approach won’t work.

First, download and extract Flasm. Flasm is an open-source SWF disassembler. It won’t translate a SWF into LZX code, but it will convert it into readable bytecode, and that is all you really need to find the OpenLaszlo canvas attributes. You run Flasm from the command line.

Second, download the compiled application SWF (the one whose OpenLaszlo version you want to determine) onto your development machine. If its on a production server, you can use a *NIX command-line tool like wget or curl. If you’re on Windows, install Cygwin, and you’ll have all the *NIX goodies you need. (The Windows Flasm executable works well in a Cygwin shell). e.g.

wget http://www.antunkarlovac.com/blog/wp-content/uploads/2008/09/selectionmanager.swf

That should download the SWF to your current directory.

Finally, run Flasm, with the disassemble argument, and search for the term lpsversion. Either save the output to a file, or pipe it through grep. There’s a bunch of output, but I find the last line of output tends to be the relevant one:

…
push ‘canvas’, ‘__LZproxied’, ‘true’, ‘bgcolor’, 16777215, ’embedfonts’, TRUE, ‘fontname’, ‘Verdana,Vera,sans-serif’, ‘fontsize’, 11, ‘fontstyle’, ‘plain’, ‘height’, 260, ‘lpsbuild‘, ‘10323-openlaszlo-branches-4.1‘, ‘lpsbuilddate’, ‘2008-07-11T15:05:43-0700’, ‘lpsrelease’, ‘Production’, ‘lpsversion‘, ‘4.1.1‘, ‘proxied’, FALSE, ‘runtime‘, ‘swf8‘, ‘width’, 300, 14

Note the relevant terms I’ve highlighted in bold:

• lpsbuild: The exact build number of OpenLaszlo that was used to compile this SWF.
• lpsversion: The version number that was used to compile this SWF.
• runtime: The version of SWF that this was compiled to.

There you have it. It’s also a good tip to put a comment in your main application file, to tell other developers (and yourself, six months from now) what version of OpenLaszlo you were using.