{"id":113,"date":"2013-12-13T08:17:53","date_gmt":"2013-12-13T08:17:53","guid":{"rendered":"http:\/\/tastaturkind.ch\/?p=113"},"modified":"2013-12-13T08:17:53","modified_gmt":"2013-12-13T08:17:53","slug":"flex-4-collection-change-example","status":"publish","type":"post","link":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/2013\/12\/13\/flex-4-collection-change-example\/","title":{"rendered":"Flex 4 Collection Change Example"},"content":{"rendered":"<p><code><?xml version=\"1.0\"?><br \/>\n<!-- dpcontrols\\ModifyDataGridData.mxml --><br \/>\n<s:Application xmlns:fx=\"http:\/\/ns.adobe.com\/mxml\/2009\" \n    xmlns:s=\"library:\/\/ns.adobe.com\/flex\/spark\" \n    xmlns:mx=\"library:\/\/ns.adobe.com\/flex\/mx\" \n    width=\"500\" height=\"600\" ><br \/>\n    <s:layout><br \/>\n        <s:VerticalLayout\/><br \/>\n    <\/s:layout><\/p>\n<p>    <fx:Script><br \/>\n        <![CDATA[\n            import mx.events.*;\n            import mx.collections.*;\n    \n            \/\/ Add event information to a log (displayed in the TextArea).\n            public function collectionEventHandler(event:CollectionEvent):void {\n                switch(event.kind) {\n                    case CollectionEventKind.ADD:\n                        addLog(\"Item \"+ event.location + \" added\");\n                        break;\n                    case CollectionEventKind.REMOVE:\n                        addLog(\"Item \"+ event.location + \" removed\");\n                        break;\n                    case CollectionEventKind.REPLACE:\n                        addLog(\"Item \"+ event.location + \" Replaced\");\n                        break;\n                    case CollectionEventKind.UPDATE:\n                        addLog(\"Item updated\");\n                        break;\n                }\n            }\n            \/\/ Helper function for adding information to the log.\n            public function addLog(str:String):void {\n                log.text += str + \"\\n\";\n            }\n    \n            \/\/ Add a person to the ArrayCollection.\n            public function addPerson():void {\n                ac.addItem({first:firstInput.text, last:lastInput.text,\n                    email:emailInput.text});\n                    clearInputs();\n            }\n    \n            \/\/ Remove a person from the ArrayCollection.\n            public function removePerson():void {\n                \/\/ Make sure an item is selected.\n                if (dg.selectedIndex >= 0) {\n                    ac.removeItemAt(dg.selectedIndex);\n            }\n        }\n    \n        \/\/ Update an existing person in the ArrayCollection.\n        public function updatePerson():void {\n            \/\/ Make sure an item is selected.\n            if (dg.selectedItem !== null) {\n                ac.setItemAt({first:firstInput.text, last:lastInput.text,\n                    email:emailInput.text}, dg.selectedIndex);\n            }\n        }\n    \n        \/\/ The change event listener for the DataGrid.\n        \/\/ Clears the text input controls and updates them with the contents\n        \/\/ of the selected item.\n        public function dgChangeHandler():void {\n            clearInputs();\n            firstInput.text = dg.selectedItem.first;\n            lastInput.text = dg.selectedItem.last;\n            emailInput.text = dg.selectedItem.email;\n        }\n    \n        \/\/ Clear the text from the input controls.\n        public function clearInputs():void {\n            firstInput.text = \"\";\n            lastInput.text = \"\";\n            emailInput.text = \"\";\n        }\n\n        \/\/ The labelFunction for the ComboBox;\n        \/\/ Puts first and last names in the ComboBox.\n        public function myLabelFunc(item:Object):String {\n            return item.first + \" \" + item.last;\n        }\n        ]]><br \/>\n    <\/fx:Script><\/p>\n<p>    <fx:Declarations><br \/>\n        <!-- The ArrayCollection used by the DataGrid and ComboBox. --><br \/>\n        <mx:ArrayCollection id=\"ac\"\n            collectionChange=\"collectionEventHandler(event)\"><br \/>\n            <mx:source><br \/>\n                <fx:Object first=\"Matt\" last=\"Matthews\" email=\"matt@myco.com\"\/><br \/>\n                <fx:Object first=\"Sue\" last=\"Sanderson\" email=\"sue@myco.com\"\/><br \/>\n                <fx:Object first=\"Harry\" last=\"Harrison\" email=\"harry@myco.com\"\/><br \/>\n            <\/mx:source><br \/>\n        <\/mx:ArrayCollection><br \/>\n    <\/fx:Declarations><\/p>\n<p>    <mx:DataGrid width=\"450\" id=\"dg\" dataProvider=\"{ac}\"\n            change=\"dgChangeHandler()\"><br \/>\n        <mx:columns><br \/>\n            <mx:DataGridColumn dataField=\"first\" headerText=\"First Name\"\/><br \/>\n            <mx:DataGridColumn dataField=\"last\" headerText=\"Last Name\"\/><br \/>\n            <mx:DataGridColumn dataField=\"email\" headerText=\"Email\"\/><br \/>\n        <\/mx:columns><br \/>\n    <\/mx:DataGrid><\/p>\n<p>    <!-- The ComboBox and DataGrid controls share an ArrayCollection as their\n        data provider.\n        The ComboBox control uses the labelFunction property to construct the\n        labels from the dataProvider fields. --><br \/>\n    <s:ComboBox id=\"cb\" dataProvider=\"{ac}\" labelFunction=\"myLabelFunc\"\/><\/p>\n<p>    <!-- Form for data to add or change in the ArrayCollection. --><br \/>\n    <mx:Form><br \/>\n       <mx:FormItem label=\"First Name\"><br \/>\n            <s:TextInput id=\"firstInput\"\/><br \/>\n       <\/mx:FormItem><br \/>\n       <mx:FormItem label=\"Last Name\"><br \/>\n            <s:TextInput id=\"lastInput\"\/><br \/>\n       <\/mx:FormItem><br \/>\n       <mx:FormItem label=\"Email\"><br \/>\n            <s:TextInput id=\"emailInput\"\/><br \/>\n       <\/mx:FormItem><br \/>\n    <\/mx:Form><\/p>\n<p>    <s:HGroup><br \/>\n        <!-- Buttons to initiate operations on the collection. --><br \/>\n        <s:Button label=\"Add New\" click=\"addPerson()\"\/><br \/>\n        <s:Button label=\"Update Selected\" click=\"updatePerson()\"\/><br \/>\n        <s:Button label=\"Remove Selected\" click=\"removePerson()\"\/><br \/>\n        <!-- Clear the text input fields. --><br \/>\n        <s:Button label=\"Clear\" click=\"clearInputs()\"\/><br \/>\n    <\/s:HGroup><\/p>\n<p>    <!-- The application displays event information here --><br \/>\n    <s:Label text=\"Log\"\/><br \/>\n    <s:TextArea id=\"log\" width=\"100\" height=\"100%\"\/><br \/>\n<\/s:Application><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>= 0) { ac.removeItemAt(dg.selectedIndex); } } \/\/ Update an existing person in the ArrayCollection. public function updatePerson():void { \/\/ Make sure an item is selected. if (dg.selectedItem !== null) { ac.setItemAt({first:firstInput.text, last:lastInput.text, email:emailInput.text}, dg.selectedIndex); } } \/\/ The change event &hellip; <a href=\"https:\/\/oliver-frick.ch\/wordpress\/index.php\/2013\/12\/13\/flex-4-collection-change-example\/\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":0,"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"wp:attachment":[{"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oliver-frick.ch\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}