{"id":136,"date":"2008-09-10T19:17:54","date_gmt":"2008-09-11T03:17:54","guid":{"rendered":"http:\/\/www.antunkarlovac.com\/blog\/?p=136"},"modified":"2008-09-10T19:17:54","modified_gmt":"2008-09-11T03:17:54","slug":"using-the-value-attribute","status":"publish","type":"post","link":"https:\/\/www.antunkarlovac.com\/blog\/2008\/09\/10\/using-the-value-attribute\/","title":{"rendered":"Using the Value Attribute"},"content":{"rendered":"<p>Whether you realize it or not, you often use a subclass of the <a href=\"http:\/\/www.openlaszlo.org\/lps4.1\/docs\/reference\/lz.basevaluecomponent.html\" target=\"_blank\">basevaluecomponent<\/a> in OpenLaszlo. A typical example is <a href=\"http:\/\/www.openlaszlo.org\/lps4.1\/docs\/reference\/lz.radiobutton.html\" target=\"_blank\">radiobutton<\/a> (which is used with <a href=\"http:\/\/www.openlaszlo.org\/lps4.1\/docs\/reference\/lz.radiogroup.html\" target=\"_blank\">radiogroup<\/a>). The example for radiogroup in the OpenLaszlo reference is pretty simple:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;canvas debug=&quot;true&quot;&gt;\r\n    &lt;radiogroup id=&quot;group1&quot;&gt;\r\n        &lt;radiobutton value=&quot;1&quot; text=&quot;one&quot;\/&gt;\r\n        &lt;radiobutton value=&quot;2&quot; text=&quot;two&quot; selected=&quot;true&quot;\/&gt;\r\n        &lt;radiobutton value=&quot;3&quot; text=&quot;three&quot;\/&gt;\r\n    &lt;\/radiogroup&gt;\r\n&lt;\/canvas&gt;\r\n<\/pre>\n<p>I modified it a little, to include the debugger, but note that the values for the radiobuttons are &#8220;1&#8221;, &#8220;2&#8221; and &#8220;3&#8221;. If you decide that you need to use values such as &#8220;one&#8221;, &#8220;two&#8221; and &#8220;three&#8221; instead of numbers, the first thing you might try is something like this:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!-- WARNING: BAD EXAMPLE --&gt;\r\n&lt;canvas debug=&quot;true&quot;&gt;\r\n    &lt;radiogroup id=&quot;group1&quot;&gt;\r\n        &lt;radiobutton value=&quot;one&quot; text=&quot;one&quot;\/&gt;\r\n        &lt;radiobutton value=&quot;two&quot; text=&quot;two&quot; selected=&quot;true&quot;\/&gt;\r\n        &lt;radiobutton value=&quot;three&quot; text=&quot;three&quot;\/&gt;\r\n    &lt;\/radiogroup&gt;\r\n&lt;\/canvas&gt;\r\n<\/pre>\n<p>However, that will lead to debugger warnings along the lines of:<\/p>\n<blockquote><p>ERROR @filename.lzx#5: reference to undefined variable &#8216;three&#8217;<br \/>\nERROR @filename.lzx#4: reference to undefined variable &#8216;two&#8217;<br \/>\nERROR @filename.lzx#3: reference to undefined variable &#8216;one&#8217;<\/p><\/blockquote>\n<p>The issue is that the value attribute is of type <em>expression<\/em>. 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&#8217;ve omitted the quotes here intentionally), you&#8217;ll assign the <em>number <\/em>1. If you put the characters <em>one <\/em>(again, quotes omitted intentionally), then the runtime will search for a variable with the name &#8220;one&#8221;.<\/p>\n<p>What you really want is the string &#8220;one&#8221;, 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=&#8221;&#8216;one'&#8221;. The above example would then look like:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!-- CORRECT --&gt;\r\n&lt;canvas debug=&quot;true&quot;&gt;\r\n    &lt;radiogroup id=&quot;group1&quot;&gt;\r\n        &lt;radiobutton value=&quot;&#039;one&#039;&quot; text=&quot;one&quot;\/&gt;\r\n        &lt;radiobutton value=&quot;&#039;two&#039;&quot; text=&quot;two&quot; selected=&quot;true&quot;\/&gt;\r\n        &lt;radiobutton value=&quot;&#039;three&#039;&quot; text=&quot;three&quot;\/&gt;\r\n    &lt;\/radiogroup&gt;\r\n&lt;\/canvas&gt;\r\n<\/pre>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>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: I modified it a little, to include the debugger, but note that the values for the radiobuttons are &hellip; <a href=\"https:\/\/www.antunkarlovac.com\/blog\/2008\/09\/10\/using-the-value-attribute\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Using the Value Attribute<\/span><\/a><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/136"}],"collection":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":3,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/136\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}