flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [20/50] git commit: [flex-asjs] [refs/heads/master] - Updated the TodoListExample so it works for both SWF and JS.
Date Wed, 07 Sep 2016 22:33:55 GMT
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 <pent@apache.org>
Authored: Wed Aug 3 17:28:36 2016 -0400
Committer: Peter Ent <pent@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>


Mime
View raw message