Updated the TodoListExample so it works for both SWF and JS.
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/3dea25a1 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/3dea25a1 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/3dea25a1 Branch: refs/heads/master Commit: 3dea25a1f3c37ae383480523756d8a75fa070918 Parents: f57cfc4 Author: Peter Ent <[email protected]> Authored: Wed Aug 3 17:28:36 2016 -0400 Committer: Peter Ent <[email protected]> Committed: Wed Aug 3 17:28:36 2016 -0400 ---------------------------------------------------------------------- .../todo/controllers/TodoListController.as | 3 +- .../src/sample/todo/models/TodoListItem.as | 66 ++++++++++ .../src/sample/todo/models/TodoListModel.as | 88 ++++++++++++-- .../sample/todo/renderers/TodoItemRenderer.as | 21 ++++ .../src/sample/todo/views/TodoListView.mxml | 120 ++++++++++++------- 5 files changed, 245 insertions(+), 53 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3dea25a1/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 cbc4b1e..efd9168 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/controllers/TodoListController.as @@ -57,6 +57,7 @@ package sample.todo.controllers { // still need to change model a view get the changes var todoModel:TodoListModel = app.model as TodoListModel; //todoModel.todos.push({title: evt.todo, selected: false}); + todoModel.addTodo(evt.todo); } } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3dea25a1/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 new file mode 100644 index 0000000..4e10082 --- /dev/null +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListItem.as @@ -0,0 +1,66 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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/3dea25a1/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 e4d06b1..acf2104 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/models/TodoListModel.as @@ -17,26 +17,98 @@ // //////////////////////////////////////////////////////////////////////////////// package sample.todo.models { + import org.apache.flex.events.Event; import org.apache.flex.events.EventDispatcher; public class TodoListModel extends EventDispatcher { 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 = [ - {title: "Get something", selected: true}, - {title: "Do this", selected: true}, - {title: "Do that", selected: false} - ]; + private var _todos:Array = []; + + private var _filteredList:Array = []; + private var _filterFunction:Function = showAllTodos; - [Bindable] + [Bindable("todoListChanged")] public function get todos():Array { - return _todos; + return _filteredList; } public function set todos(value:Array):void { _todos = value; + _filterFunction(); + dispatchEvent(new Event("todoListChanged")); } + + public function addTodo(value:String):TodoListItem + { + var item:TodoListItem = new TodoListItem(value, false); + item.addEventListener("titleChanged", titleChangeHandler); + item.addEventListener("selectedChanged", titleChangeHandler); + item.addEventListener("removeItem", removeHandler); + _todos.push(item); + + _filterFunction(); + + return item; + } + + public function showAllTodos() : void { + _filteredList = _todos.slice(); + dispatchEvent(new Event("todoListChanged")); + _filterFunction = showAllTodos; + } + + public function showActiveTodos() : void { + _filteredList = []; + for (var i:int=0; i < _todos.length; i++) { + if (!_todos[i].selected) { + _filteredList.push(_todos[i]); + } + } + dispatchEvent(new Event("todoListChanged")); + _filterFunction = showActiveTodos; + } + + public function showCompletedTodos() : void { + _filteredList = []; + for (var i:int=0; i < _todos.length; i++) { + if (_todos[i].selected) { + _filteredList.push(_todos[i]); + } + } + dispatchEvent(new Event("todoListChanged")); + _filterFunction = showCompletedTodos; + } + + public function removeItem(item:Object) : void { + var index:int = _todos.indexOf(item); + if (index >= 0) { + _todos.splice(index,1); + } + _filterFunction(); + } } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3dea25a1/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 a4fa9f1..5e0dd50 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/renderers/TodoItemRenderer.as @@ -17,14 +17,22 @@ // //////////////////////////////////////////////////////////////////////////////// package sample.todo.renderers { + + import org.apache.flex.events.Event; + import org.apache.flex.events.MouseEvent; import org.apache.flex.html.Button; 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")] + public class TodoItemRenderer extends DataItemRenderer { + public function TodoItemRenderer() { super(); + className = "TodoItemRenderer"; } private var checkbox:CheckBox; @@ -36,12 +44,14 @@ package sample.todo.renderers { checkbox = new CheckBox(); addElement(checkbox); + checkbox.addEventListener("change", checkBoxChange); title = new Label(); addElement(title); removeButton = new Button(); addElement(removeButton); + removeButton.addEventListener("click", removeClick); } override public function set data(value:Object):void { @@ -52,6 +62,7 @@ package sample.todo.renderers { } override public function adjustSize():void { + var hgt:Number = this.height; var cy:Number = this.height / 2; checkbox.x = 10; @@ -65,5 +76,15 @@ package sample.todo.renderers { updateRenderer(); } + + private function checkBoxChange(event:Event):void + { + data.selected = !data.selected; + } + + private function removeClick(event:MouseEvent):void + { + data.remove(); + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3dea25a1/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 3a4c7e4..a1bd2c8 100644 --- a/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml +++ b/examples/flexjs/TodoListSampleApp/src/sample/todo/views/TodoListView.mxml @@ -19,69 +19,100 @@ 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"> + xmlns:svg="library://ns.apache.org/flexjs/svg" + initComplete="setup()"> <fx:Script> <![CDATA[ - import sample.todo.events.TodoListEvent; - - /** - * add to the list the text entered by the user, in the text box, - * as a new todo list item - */ - public function logTodo():void { - var logEvent:TodoListEvent = new TodoListEvent(TodoListEvent.LOG_TODO); - logEvent.todo = todoInput.text; - dispatchEvent(logEvent); - - //todoList.width = Math.random() * 200; // to show changes vÃa ENTER key - } - - /** - * show all todos - */ - private function showAll():void { - } - - /** - * show active todos - */ - private function showActive():void { - } - - /** - * show completed todos - */ - private function showCompleted():void { - } + import org.apache.flex.events.Event; + import org.apache.flex.html.beads.controllers.ItemRendererMouseController; + + import sample.todo.events.TodoListEvent; + import sample.todo.models.TodoListModel; + import sample.todo.renderers.TodoItemRenderer; + + private function setup():void { + // Listening for events on the model will update the UI. Functions like + // showActive() change the model which results in this event being + // dispatched. + (applicationModel as TodoListModel).addEventListener("todoListChanged", updateStatus); + updateStatus(null); + } + + /** + * add to the list the text entered by the user, in the text box, + * as a new todo list item + */ + public function logTodo():void { + var logEvent:TodoListEvent = new TodoListEvent(TodoListEvent.LOG_TODO); + logEvent.todo = todoInput.text; + dispatchEvent(logEvent); + + todoInput.text = ""; + } + + private function updateStatus(event:org.apache.flex.events.Event):void { + var numberLeft:Number = 0; + + var model: TodoListModel = applicationModel as TodoListModel; + var list: Array = model.todos; + for (var i:int=0; i < list.length; i++) { + var item:Object = list[i]; + numberLeft += item.selected ? 0 : 1; + } + + statusLabel.text = numberLeft + " items left"; + } + + /** + * show all todos + */ + private function showAll():void { + (applicationModel as TodoListModel).showAllTodos(); + } + + /** + * show active todos + */ + private function showActive():void { + (applicationModel as TodoListModel).showActiveTodos(); + } + + /** + * show completed todos + */ + private function showCompleted():void { + (applicationModel as TodoListModel).showCompletedTodos(); + } ]]> </fx:Script> + + <js:beads> + <js:ViewDataBinding /> + </js:beads> <js:Panel title="FlexJS TODO List" width="600"> <js:beads> <js:VerticalLayout/> </js:beads> - <js:TextInput id="todoInput" - width="300" - change="logTodo()"/> + <js:HContainer width="100%"> + <js:TextInput id="todoInput" + width="85%"/> + <js:TextButton text="Enter" click="logTodo()" width="15%" /> + </js:HContainer> <js:List id="todoList" itemRenderer="sample.todo.renderers.TodoItemRenderer" - width="300" height="400"> - <!-- dataProvider="{TodoListModel(applicationModel).todos}" --> - <js:beads> - <js:ConstantBinding sourceID="applicationModel" - sourcePropertyName="todos" - destinationPropertyName="dataProvider"/> - </js:beads> + dataProvider="{TodoListModel(applicationModel).todos}" + width="100%" height="400"> </js:List> <js:Container> <js:beads> <js:HorizontalLayout/> </js:beads> - <js:Label id="statusLabel" text="N items left"/> + <js:Label id="statusLabel" text="N items left" width="295"/> <svg:TextButton text="All" width="100" height="30" click="showAll()" /> <svg:TextButton text="Active" width="100" height="30" click="showActive()" /> <svg:TextButton text="Completed" width="100" height="30" click="showCompleted()" /> @@ -101,7 +132,8 @@ limitations under the License. } renderers|TodoItemRenderer { - height: 40; + backgroundColor: #FFFFFF; + height: 40px; IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ItemRendererMouseController"); } </fx:Style>
