You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2016/08/25 15:32:31 UTC
[23/50] [abbrv] git commit: [flex-asjs] [refs/heads/spark] - Updated
the TodoListExample so it works for both SWF and JS.
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/spark
Commit: 3dea25a1f3c37ae383480523756d8a75fa070918
Parents: f57cfc4
Author: Peter Ent <pe...@apache.org>
Authored: Wed Aug 3 17:28:36 2016 -0400
Committer: Peter Ent <pe...@apache.org>
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>