CSS in OpenLaszlo

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.