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>