Using the Value Attribute

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>