{"id":139,"date":"2008-09-11T15:49:22","date_gmt":"2008-09-11T23:49:22","guid":{"rendered":"http:\/\/www.antunkarlovac.com\/blog\/?p=139"},"modified":"2008-09-11T15:49:22","modified_gmt":"2008-09-11T23:49:22","slug":"selectionmanager-and-multirange-select","status":"publish","type":"post","link":"https:\/\/www.antunkarlovac.com\/blog\/2008\/09\/11\/selectionmanager-and-multirange-select\/","title":{"rendered":"Selectionmanager and multi\/range-select"},"content":{"rendered":"

For a long time, I’ve wondered why the OpenLaszlo selectionmanager<\/a> has such a bizarre API for enabling\/disabling range- and multi-selection.\u00a0 A quick introduction: the selectionmanager is a helper class that manages selection between a group of views. It’s very handy for building custom lists. Range-selection means shift-clicking to select a group of items. Multi-selection means control-clicking to build up a selection. Both range- and multi-selection are enabled by default.<\/p>\n

I would expect the API to have an on\/off metaphor, e.g. israngeselect=”false”. Instead, you override the isRangeSelect() and\/or isMultiSelect() methods at the instance level<\/em>, e.g.<\/p>\n

\r\n<selectionmanager name="selman">\r\n    <method name="isRangeSelect">\r\n        return false;\r\n    <\/method>\r\n\r\n    <method name="isMultiSelect" args="selectedView">\r\n        return false;\r\n    <\/method>\r\n<\/selectionmanager>\r\n<\/pre>\n
During a training class, I wondered about this aloud, and one of my students (Chuq<\/a>) suggested that it may be to allow developers to determine – each time a selection is made – whether to allow multi-\/range-selection for that particular click.<\/p>\n
An example use-case may be that you have a list of groceries, and you only want the user to be able to select one of each type<\/em> of grocery (e.g. fruits, vegetables, etc.). So with full credit to Chuq for the idea, I gave it a try:<\/p>\n
\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object><\/div>\n
And here's the source:<\/p>\n
\r\n<canvas proxied="false" width="300" height="260">\r\n    <dataset name="ds">\r\n        <groceries>\r\n            <item name="apple" type="fruit" \/>\r\n            <item name="orange" type="fruit" \/>\r\n            <item name="banana" type="fruit" \/>\r\n            <item name="carrot" type="vegetable" \/>\r\n            <item name="potato" type="vegetable" \/>\r\n            <item name="celery" type="vegetable" \/>\r\n            <item name="pasta" type="bulk" \/>\r\n            <item name="rice" type="bulk" \/>\r\n            <item name="beans" type="bulk" \/>\r\n        <\/groceries>\r\n    <\/dataset>\r\n\r\n    <alert name="errorAlert" width="250">\r\n        You can only select one of each type of grocery \r\n        (i.e. fruit, vegetable, bulk).\r\n    <\/alert>\r\n\r\n    <simplelayout axis="y" spacing="10" \/>\r\n\r\n    <text width="300" multiline="true">\r\n        Control-click to select one of each type of grocery from the list\r\n        below:\r\n    <\/text>\r\n \r\n    <view name="grocerylist" width="300">\r\n        <simplelayout spacing="1" \/>\r\n\r\n        <selectionmanager name="selman">\r\n            <method name="isRangeSelect">\r\n                return false;\r\n            <\/method>\r\n\r\n            <method name="isMultiSelect" args="selectedView">\r\n                var currentSelection = getSelection();\r\n                for (var i in currentSelection) {\r\n                    var item = currentSelection[i];\r\n                    if (item.datapath.p.getAttr("type") == selectedView.datapath.p.getAttr("type")) {\r\n                        errorAlert.open();\r\n                        return false;\r\n                    }\r\n                }\r\n                return super.isMultiSelect();\r\n            <\/method>\r\n        <\/selectionmanager>\r\n\r\n        <replicator dataset="ds" xpath="groceries\/item">\r\n            <view bgcolor="0xeaeaea" width="100%">\r\n                <method name="setSelected" args="isSel">\r\n                    var bgc = isSel ? yellow : 0xeaeaea;\r\n                    setAttribute("bgcolor", bgc);\r\n                <\/method>\r\n                <handler name="onmousedown">\r\n                    parent.selman.select(this);\r\n                <\/handler>\r\n                <text datapath="@name" fontsize="16" \/>\r\n                <text datapath="@type" fontsize="16" fontstyle="italic" \r\n                      align="right" \/>\r\n            <\/view>\r\n        <\/replicator>\r\n    <\/view>\r\n\r\n<\/canvas>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
For a long time, I’ve wondered why the OpenLaszlo selectionmanager has such a bizarre API for enabling\/disabling range- and multi-selection.\u00a0 A quick introduction: the selectionmanager is a helper class that manages selection between a group of views. It’s very handy for building custom lists. Range-selection means shift-clicking to select a group of items. Multi-selection means … Continue reading Selectionmanager and multi\/range-select<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/139"}],"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=139"}],"version-history":[{"count":1,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antunkarlovac.com\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}