{"id":202,"date":"2009-03-12T16:47:46","date_gmt":"2009-03-13T00:47:46","guid":{"rendered":"http:\/\/www.antunkarlovac.com\/blog\/?p=202"},"modified":"2009-03-12T16:47:46","modified_gmt":"2009-03-13T00:47:46","slug":"colors-in-42","status":"publish","type":"post","link":"https:\/\/www.antunkarlovac.com\/blog\/2009\/03\/12\/colors-in-42\/","title":{"rendered":"Where Have All the Colors Gone?"},"content":{"rendered":"

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:<\/p>\n

<view bgcolor=\"red\" width=\"20\" height=\"20\" \/>\r\n<view bgcolor=\"0xff0000\" width=\"20\" height=\"20\" \/>\r\n<view bgcolor=\"#ff0000\" width=\"20\" height=\"20\" \/><\/pre>\n
In JavaScript, you could use either the hex notation or the named color:<\/p>\n
myview.setAttribute(\"bgcolor\", 0xff0000);\r\nmyview.setAttribute(\"bgcolor\", red);<\/pre>\n
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:<\/p>\n
ERROR @colors.lzx#35: reference to undefined variable ‘red’<\/p>\n
That’s because all the colors are now neatly arranged in an array called lz.colors. So in 4.2 you would write:<\/p>\n
myview.setAttribute(\"bgcolor\", lz.colors.red);<\/span><\/pre>\n
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.<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n
Click the button to render the color boxes. Move your mouse over the boxes to display the name of the color.<\/p>\n
The code is below:<\/p>\n
\r\n<canvas width="460" height="460" proxied="false">\r\n\r\n    <class name="colorbox" width="30" height="30" clickable="true">\r\n        <attribute name="colorname" type="string" \/>\r\n    <\/class>\r\n\r\n    <class name="colornameoutput" extends="text"\r\n           font="Helvetica, Arial, sans-serif"\r\n           fontsize="24" fontstyle="bold">\r\n        <attribute name="updateDel" \r\n                   value="$once{new lz.Delegate(this, 'displayColor')}" \/>\r\n        <method name="displayColor" args="c">\r\n            this.setAttribute("text", "lz.colors." + c.colorname);\r\n        <\/method>\r\n    <\/class>\r\n\r\n    <simplelayout axis="y" spacing="10" \/>\r\n     \r\n    <view name="colorboxes" width="100%">\r\n        <wrappinglayout spacing="0" \/>\r\n    <\/view>\r\n\r\n    <colornameoutput name="outputText">\r\n    <\/colornameoutput>\r\n\r\n    <button options="ignorelayout" width="80%" \r\n            height="80%" align="center" valign="middle"\r\n            font="Helvetica, Arial, sans-serif"\r\n            fontsize="13" fontstyle="bold">\r\n            Show Me The Colors!\r\n            (Be patient, it takes a moment).\r\n        <handler name="onclick">\r\n            this.setAttribute("visible", false);\r\n            for (var i in lz.colors) {\r\n                var colorValue = lz.colors[i];\r\n                var attrs = {bgcolor: colorValue, colorname: i}; \r\n                var v = new lz.colorbox(colorboxes, attrs);\r\n                outputText.updateDel.register(v, "onmouseover");\r\n            }\r\n        <\/handler>\r\n    <\/button>\r\n\r\n<\/canvas>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading Where Have All the Colors Gone?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/202"}],"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=202"}],"version-history":[{"count":6,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}