Updated TodoListSample so it works for SWF and JS, without using event bubbling.
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/4ef1bb43 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/4ef1bb43 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/4ef1bb43 Branch: refs/heads/master Commit: 4ef1bb430d12ead4285a92768e0b13e40aa753ee Parents: eb11ac1 Author: Peter Ent <[email protected]> Authored: Fri Aug 5 13:18:45 2016 -0400 Committer: Peter Ent <[email protected]> Committed: Fri Aug 5 13:18:45 2016 -0400 ---------------------------------------------------------------------- .../todo/controllers/TodoListController.as | 18 +++++- .../src/sample/todo/events/TodoListEvent.as | 7 ++ .../src/sample/todo/models/TodoListItem.as | 66 ------------------- .../src/sample/todo/models/TodoListModel.as | 37 ++++------- .../sample/todo/renderers/TodoItemRenderer.as | 10 +-- .../renderers/TodoListItemRendererFactory.as | 68 ++++++++++++++++++++ .../src/sample/todo/views/TodoListView.mxml | 14 +++- 7 files changed, 119 insertions(+), 101 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as b/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as index efd9168..dc39c6d 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as @@ -17,12 +17,12 @@ // //////////////////////////////////////////////////////////////////////////////// package sample.todo.controllers { - import sample.todo.events.TodoListEvent; - import sample.todo.models.TodoListModel; - import org.apache.flex.core.Application; import org.apache.flex.core.IDocument; import org.apache.flex.events.Event; + + import sample.todo.events.TodoListEvent; + import sample.todo.models.TodoListModel; public class TodoListController implements IDocument { private var app:TodoListSampleApp; @@ -47,6 +47,8 @@ package sample.todo.controllers { */ private function viewChangeHandler(event:Event):void { app.initialView.addEventListener(TodoListEvent.LOG_TODO, logTodo); + app.initialView.addEventListener(TodoListEvent.ITEM_CHECKED,handleItemChecked); + app.initialView.addEventListener(TodoListEvent.ITEM_REMOVE_REQUEST, handleItemRemove); } /** @@ -59,5 +61,15 @@ package sample.todo.controllers { //todoModel.todos.push({title: evt.todo, selected: false}); todoModel.addTodo(evt.todo); } + + public function handleItemChecked(event:TodoListEvent):void { + var model: TodoListModel = app.model as TodoListModel; + model.toggleItemCheck(event.item); + } + + public function handleItemRemove(event:TodoListEvent):void { + var model: TodoListModel = app.model as TodoListModel; + model.removeItem(event.item); + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/events/TodoListEvent.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/events/TodoListEvent.as b/examples/flexjs/TodoListSampleApp/src/sample/todo/events/TodoListEvent.as index c4d5fd1..7c55b61 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/events/TodoListEvent.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/events/TodoListEvent.as @@ -22,11 +22,18 @@ package sample.todo.events { public class TodoListEvent extends Event { public static const LOG_TODO:String = "logTodoEvent"; + public static const ITEM_CHECKED:String = "itemChecked"; + public static const ITEM_REMOVE_REQUEST:String = "itemRemoveRequest"; /** * the todo to log */ public var todo:String = null; + + /** + * handle item selection or removal + */ + public var item:Object = null; public function TodoListEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false) { super(type, bubbles, cancelable); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListItem.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListItem.as b/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListItem.as deleted file mode 100644 index 4e10082..0000000 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListItem.as +++ /dev/null @@ -1,66 +0,0 @@ -//////////////////////////////////////////////////////////////////////////////// -// -// Licensed to the Apache Software Foundation (ASF) under one or more -// contributor license agreements. See the NOTICE file distributed with -// this work for additional information regarding copyright ownership. -// The ASF licenses this file to You under the Apache License, Version 2.0 -// (the "License"); you may not use this file except in compliance with -// the License. You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// -//////////////////////////////////////////////////////////////////////////////// -package sample.todo.models -{ - import org.apache.flex.events.Event; - import org.apache.flex.events.EventDispatcher; - - [Event("titleChanged","org.apache.flex.events.Event")] - [Event("selectedChanged","org.apache.flex.events.Event")] - [Event("removeItem","org.apache.flex.events.Event")] - - public class TodoListItem extends EventDispatcher - { - public function TodoListItem(title:String, selected:Boolean) - { - super(); - _title = title; - _selected = selected; - } - - private var _title:String; - [Event("titleChanged")] - public function get title():String - { - return _title; - } - public function set title(value:String):void - { - _title = value; - dispatchEvent(new Event("titleChanged")); - } - - private var _selected:Boolean; - [Event("selectedChanged")] - public function get selected():Boolean - { - return _selected; - } - public function set selected(value:Boolean):void - { - _selected = value; - dispatchEvent(new Event("selectedChanged")); - } - - public function remove():void - { - dispatchEvent(new Event("removeItem")); - } - } -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as b/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as index acf2104..780d4f5 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as @@ -24,29 +24,11 @@ package sample.todo.models { public function TodoListModel() { super(); _filterFunction(); - - addTodo("Get something").selected = true; - addTodo("Do this").selected = true; - addTodo("Do that"); } - - private function titleChangeHandler(event:Event):void - { - dispatchEvent(new Event("todoListChanged")); - } - - private function selectChangeHandler(event:Event):void - { - dispatchEvent(new Event("todoListChanged")); - } - - private function removeHandler(event:Event):void - { - var item:TodoListItem = event.target as TodoListItem; - removeItem(item); - } - private var _todos:Array = []; + private var _todos:Array = [{title:"Get something", selected:true}, + {title:"Do this", selected:true}, + {title:"Do that", selected:false}]; private var _filteredList:Array = []; private var _filterFunction:Function = showAllTodos; @@ -62,12 +44,9 @@ package sample.todo.models { dispatchEvent(new Event("todoListChanged")); } - public function addTodo(value:String):TodoListItem + public function addTodo(value:String):Object { - var item:TodoListItem = new TodoListItem(value, false); - item.addEventListener("titleChanged", titleChangeHandler); - item.addEventListener("selectedChanged", titleChangeHandler); - item.addEventListener("removeItem", removeHandler); + var item:Object = {title:value, selected:false}; _todos.push(item); _filterFunction(); @@ -103,6 +82,12 @@ package sample.todo.models { _filterFunction = showCompletedTodos; } + public function toggleItemCheck(item:Object) : void { + item.selected = !item.selected; + _filterFunction(); + dispatchEvent(new Event("todoListChanged")); + } + public function removeItem(item:Object) : void { var index:int = _todos.indexOf(item); if (index >= 0) { http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as b/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as index 5e0dd50..7a0d6e3 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as @@ -24,9 +24,9 @@ package sample.todo.renderers { import org.apache.flex.html.CheckBox; import org.apache.flex.html.Label; import org.apache.flex.html.supportClasses.DataItemRenderer; - - [Event("checked","org.apache.flex.events.Event")] - [Event("remove","org.apache.flex.events.Event")] + + [Event("checkChanged","org.apache.flex.events.Event")] + [Event("removeRequest","org.apache.flex.events.Event")] public class TodoItemRenderer extends DataItemRenderer { @@ -79,12 +79,12 @@ package sample.todo.renderers { private function checkBoxChange(event:Event):void { - data.selected = !data.selected; + dispatchEvent(new Event("checkChanged")); } private function removeClick(event:MouseEvent):void { - data.remove(); + dispatchEvent(new Event("removeRequest")); } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoListItemRendererFactory.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoListItemRendererFactory.as b/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoListItemRendererFactory.as new file mode 100644 index 0000000..54f11ff --- /dev/null +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoListItemRendererFactory.as @@ -0,0 +1,68 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package sample.todo.renderers { + + import org.apache.flex.core.ISelectableItemRenderer; + import org.apache.flex.core.IStrand; + import org.apache.flex.events.Event; + import org.apache.flex.events.IEventDispatcher; + import org.apache.flex.html.beads.DataItemRendererFactoryAndEventDispatcherForArrayData; + + import sample.todo.events.TodoListEvent; + import sample.todo.renderers.TodoItemRenderer; + + [Event(name="itemChecked", type="sample.todo.events.TodoListEvent")] + [Event(name="itemRemoveRequest", type="sample.todo.events.TodoListEvent")] + + public class TodoListItemRendererFactory extends DataItemRendererFactoryAndEventDispatcherForArrayData { + + + private var _strand:IStrand; + + override public function set strand(value:IStrand):void + { + super.strand = value; + _strand = value; + } + + override protected function itemRendererCreated(ir:ISelectableItemRenderer):void + { + IEventDispatcher(ir).addEventListener("checkChanged",itemChecked); + IEventDispatcher(ir).addEventListener("removeRequest",itemRemove); + } + + private function itemChecked(event:Event):void + { + var renderer:TodoItemRenderer = event.target as TodoItemRenderer; + + var newEvent:TodoListEvent = new TodoListEvent(TodoListEvent.ITEM_CHECKED); + newEvent.item = renderer.data; + dispatchEvent(newEvent); + } + + private function itemRemove(event:Event):void + { + var renderer:TodoItemRenderer = event.target as TodoItemRenderer; + + var newEvent:TodoListEvent = new TodoListEvent(TodoListEvent.ITEM_REMOVE_REQUEST); + newEvent.item = renderer.data; + dispatchEvent(newEvent); + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4ef1bb43/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml b/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml index a1bd2c8..310cfc0 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml @@ -20,7 +20,8 @@ limitations under the License. <js:View xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:svg="library://ns.apache.org/flexjs/svg" - initComplete="setup()"> + initComplete="setup()" + xmlns:renderers="sample.todo.renderers.*"> <fx:Script> <