Whether you realize it or not, you often use a subclass of the basevaluecomponent in OpenLaszlo. A typical example is radiobutton (which is used with radiogroup). The example for radiogroup in the OpenLaszlo reference is pretty simple:

<canvas debug="true">
    <radiogroup id="group1">
        <radiobutton value="1" text="one"/>
        <radiobutton value="2" text="two" selected="true"/>
        <radiobutton value="3" text="three"/>
    </radiogroup>
</canvas>

I modified it a little, to include the debugger, but note that the values for the radiobuttons are “1”, “2” and “3”. If you decide that you need to use values such as “one”, “two” and “three” instead of numbers, the first thing you might try is something like this:

<!-- WARNING: BAD EXAMPLE -->
<canvas debug="true">
    <radiogroup id="group1">
        <radiobutton value="one" text="one"/>
        <radiobutton value="two" text="two" selected="true"/>
        <radiobutton value="three" text="three"/>
    </radiogroup>
</canvas>

However, that will lead to debugger warnings along the lines of:

ERROR @filename.lzx#5: reference to undefined variable ‘three’
ERROR @filename.lzx#4: reference to undefined variable ‘two’
ERROR @filename.lzx#3: reference to undefined variable ‘one’

The issue is that the value attribute is of type expression. That means it has to be a valid JavaScript expression. Think of what you can put on the right-hand side of an equals sign in JavaScript. If you put the number 1 (I’ve omitted the quotes here intentionally), you’ll assign the number 1. If you put the characters one (again, quotes omitted intentionally), then the runtime will search for a variable with the name “one”.

What you really want is the string “one”, so you need to quote it. The double quotes are the XML attribute quotes. Since in JavaScript, you can alternate between single- and double-quotes freely, the easiest solution is to use single-quotes within the double-quotes, to specify a string. e.g. value=”‘one'”. The above example would then look like:

<!-- CORRECT -->
<canvas debug="true">
    <radiogroup id="group1">
        <radiobutton value="'one'" text="one"/>
        <radiobutton value="'two'" text="two" selected="true"/>
        <radiobutton value="'three'" text="three"/>
    </radiogroup>
</canvas>

The current release of OpenLaszlo doesn’t like empty handler tags. If you compile the following code, you’ll get a compiler warning:

<canvas debug="true">
    <handler name="oninit">

    </handler>
</canvas>

The warning will say:

“Refusing to compile an empty handler, you should declare the event instead”

This wasn’t the case previously. The warning is intended to educate developers who continue to define empty handlers to “hack” a custom event. (This is an old practice that is no longer necessary, since there is now an <event /> tag). If you’re intentionally writing empty handler tags (e.g. as stubs), those warnings may get in the way.

To work around them, provide a comment in your empty handler:

<canvas debug="true">
    <handler name="oninit">
        // Setup code for application.
    </handler>
</canvas>

When you want to trace something to the Debugger in OpenLaszlo, you can call the Debug.write() method.

Often, you’ll want to write the value of something and a label, so that you can identify that output in the debugger, something like:

Debug.write("subviews: " + canvas.subviews);

However, it’s better to to get into a habit of use commas instead of a plus sign, like so:

Debug.write("subviews:", canvas.subviews);

Debug.write() takes an arbitrary number of arguments, which are comma-separated, and concatenates the output. If any of those arguments are complex objects (such as arrays, references to views, etc.) they’ll become links. If you click on them, you’ll be able to inspect the object itself. If you use the plus sign, then the JavaScript runtime will do the concatenation, and you’ll end up with a string; you won’t be able to click on the traced statement.