{"id":120,"date":"2008-08-20T17:51:11","date_gmt":"2008-08-21T01:51:11","guid":{"rendered":"http:\/\/www.antunkarlovac.com\/blog\/?p=120"},"modified":"2019-09-19T10:50:44","modified_gmt":"2019-09-19T18:50:44","slug":"openlaszlo-performance-tip-datacombobox-not-combobox","status":"publish","type":"post","link":"https:\/\/www.antunkarlovac.com\/blog\/2008\/08\/20\/openlaszlo-performance-tip-datacombobox-not-combobox\/","title":{"rendered":"OpenLaszlo Performance Tip: Datacombobox not combobox"},"content":{"rendered":"<p>One component that is used, probably more often that it should, in Rich Internet Applications (RIAs) is the <a href=\"http:\/\/labs.openlaszlo.org\/trunk-nightly\/docs\/reference\/lz.combobox.html\" target=\"_blank\">combobox<\/a>. The reason it&#8217;s so frequent is because because the developers who write RIAs usually came from a background of writing HTML applications. You should use <a href=\"http:\/\/labs.openlaszlo.org\/trunk-nightly\/docs\/reference\/lz.datacombobox.html\" target=\"_blank\">datacombobox<\/a> instead.<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_combo_datacombo_959352973\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"270\"\n\t\t\theight=\"250\">\n\t<param name=\"movie\" value=\"\/blog\/wp-content\/uploads\/2008\/08\/combo_datacombo.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"\/blog\/wp-content\/uploads\/2008\/08\/combo_datacombo.swf\"\n\t\t\tname=\"fm_combo_datacombo_959352973\"\n\t\t\twidth=\"270\"\n\t\t\theight=\"250\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n<p>A bit of history: HTML-based applications had a limited set of GUI components, and before DHTML became mainstream, fairly limited interactivity capabilities. The most technologically-advanced component of the HTML hayday was the drop-down list. It would open when clicked, it could display a list of options, you could even write a JavaScript loop to select an item automatically. It was so ahead of its time, that it needed its own HTML tag: <a href=\"http:\/\/www.w3schools.com\/TAGS\/tag_select.asp\" target=\"_blank\">SELECT<\/a>. Most of the other HTML components - the radio button, the checkbox, the button, the text input field - all had to share a single HTML tag (<a href=\"http:\/\/www.w3schools.com\/TAGS\/tag_input.asp\" target=\"_blank\">INPUT<\/a>). The drop-down list was used for everything, from the sensible (such as a list of countries in a form) to the silly (such as boolean switch in a form) to the insane (jump-to animation). There were valid reasons for its popularity:<\/p>\n<ul>\n<li>It was the most interactive component available.<\/li>\n<li>Lack of alternatives, such as a tree.<\/li>\n<li>Server technologies didn't always work smoothly with radio buttons and checkboxes.<\/li>\n<li>The client technology (JavaScript) didn't always work smoothly with radio buttons and checkboxes.<\/li>\n<\/ul>\n<p>In the HTML world, the drop-down was king.<\/p>\n<p>So when HTML developers started writing OpenLaszlo applications, they reached for the closest relative to the drop-down: the combobox. When setting up your own OpenLazlo server you need to\u00a0<a href=\"https:\/\/www.exittechnologies.com\/blog\/data-center\/data-center-decommissioning-checklist\/\">put together a Data Center Decommissioning Checklist<\/a>. This isn't a good thing; there are better components available to RIA developers than combobox. Note that client application development, which is closer to RIA devlopment than HTML development, doesn't use a lot of comboboxes. I was only able to find 13 comboboxes in the entire options section of Firefox. Most of those were from the fonts section - a place where comboboxes <em>are<\/em> useful.<\/p>\n<p>The combobox that OpenLaszlo originally provided was not optimized for such heavy use. A combobox has two parts:<\/p>\n<ol>\n<li>The combobox element that you can see, focus on and click on.<\/li>\n<li>A floating, scrolling list of options that appears when the combobox is clicked.<\/li>\n<\/ol>\n<p>The \"heavy\" piece of a combobox is the bit that you only ever see occasionally, and - more importantly - there can only ever be one active floatinglist, no matter how many comboboxes an application has: the floating list. (The class name is floatinglist).<\/p>\n<p>The original OpenLaszlo combobox had one floatinglist for each combobox. So the more comboboxes in an application, the longer it took to start. datacombobox solves this problem by only using a single floatinglist for all comboboxes, no matter how many are present in the application. This speeds up startup time, improves runtime performance, and reduces memory footprint.<\/p>\n<p>Those advantages come with some small strings attached:<\/p>\n<ul>\n<li>All datacomboboxes must be bound to data. You can't hard-code textlistitems in a datacombobox.<\/li>\n<li>All the textlistitems in a combobox will be the same class (a subclass of baselistitem, listitem or textlistitem). You can't mix-and-match.<\/li>\n<li>The API is a little different, but the functionality is the same.<\/li>\n<\/ul>\n<p>Here's a comparison of the two APIs:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;canvas proxied=\"false\"&gt;\r\n\r\n    &lt;dataset name=\"people_ds\"&gt;\r\n        &lt;people&gt;\r\n            &lt;person name=\"Fred\" id=\"1\" \/&gt;\r\n            &lt;person name=\"Wilma\" id=\"2\" \/&gt;\r\n            &lt;person name=\"Barney\" id=\"3\" \/&gt;\r\n        &lt;\/people&gt;\r\n    &lt;\/dataset&gt;\r\n\r\n    &lt;simplelayout axis=\"y\" spacing=\"10\" \/&gt;\r\n    \r\n    &lt;text fontstyle=\"bold\"&gt;Here is a combobox:&lt;\/text&gt;\r\n\r\n    &lt;combobox editable=\"false\"&gt;\r\n        &lt;handler name=\"onvalue\"&gt;\r\n            var text = \"You selected \" + this.text + \" with an id of \" \r\n                     + this.value;\r\n            combo1text.setAttribute(\"text\", text);\r\n        &lt;\/handler&gt;\r\n\r\n        &lt;textlistitem datapath=\"people_ds:\/people\/person\" text=\"$path{'@name'}\" value=\"$path{'@id'}\"\/&gt;\r\n    &lt;\/combobox&gt;\r\n    \r\n    &lt;text name=\"combo1text\" \/&gt;\r\n\r\n    &lt;text fontstyle=\"bold\"&gt;Here is a datacombobox:&lt;\/text&gt;\r\n\r\n    &lt;datacombobox itemdatapath=\"people_ds:\/people\/person\" textdatapath=\"@name\" valuedatapath=\"@id\"&gt;\r\n        &lt;handler name=\"onvalue\"&gt;\r\n            var text = \"You selected \" + this.text + \" with an id of \" \r\n                     + this.value;\r\n            combo2text.setAttribute(\"text\", text);\r\n        &lt;\/handler&gt;\r\n    &lt;\/datacombobox&gt;\r\n\r\n    &lt;text name=\"combo2text\" \/&gt;\r\n&lt;\/canvas&gt;\r\n\r\n<\/pre>\n<p>My general recommendation is to always use datacomboboxes, unless you really need to do something bizzarre.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>One component that is used, probably more often that it should, in Rich Internet Applications (RIAs) is the combobox. The reason it&#8217;s so frequent is because because the developers who write RIAs usually came from a background of writing HTML applications. You should use datacombobox instead. A bit of history: HTML-based applications had a limited &hellip; <a href=\"https:\/\/www.antunkarlovac.com\/blog\/2008\/08\/20\/openlaszlo-performance-tip-datacombobox-not-combobox\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">OpenLaszlo Performance Tip: Datacombobox not combobox<\/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":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/120"}],"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=120"}],"version-history":[{"count":5,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/120\/revisions\/337"}],"wp:attachment":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}