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>

Webtuner Application Added to Webtop

Vortex is an OpenLaszlo application built by Real Time Matrix. It’s essentially a customizable media browser – Real Time Matrix built a highly-configurable skeleton of the application, and brands it for various content providers. End-users can then embed the application into their own web pages, or into personal start pages (e.g. igoogle). The end-user gets fed various forms of content – streaming audio, video, images, news feeds, etc. – depending on the configuration of that particular Vortex. In exchange, they see discreet ads at the bottom of the Vortex application. You can see a variety of skinned Vortices at www.vortexme.com.

What’s new is that the Vortex has now been integrated into Laszlo Webtop. You can check it out at www.gowebtop.com. You do need an account for gowebtop.com, but it’s fairly quick and free.

Vortex Application in Laszlo Webtop
Vortex Application in Laszlo Webtop

What’s interesting to OpenLaszlo developers is:

  • The Vortex application is completely dynamically-skinned. The components in the Vortex can be enabled, disabled and re-ordered without recompiling the SWF. All resources in the application get loaded over HTTP when the application initializes. This performs surprisingly well.
  • You can plug an OpenLaszlo application into Webtop relatively easily. Webtop provides the notion of applications, as well as windowing/docking/undocking behavior. And, Webtop includes some applicaitons that people use the most (Mail, Contacts, Calendar).

Although Webtop does offer a service that proxies and optimizes data transactions between the client and data stores, you don’t have to use it; you can just compile an OpenLaszlo application that uses datasets in the normal way into Webtop, and run it alongside the existing applications.