You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2013/09/04 21:57:58 UTC

git commit: [flex-asjs] [refs/heads/develop] - Created a base class for itemRenderers in ActionScript. Modified the list control in JavaScript to follow a similar pattern to the ActionScript version where the list is build using itemRenderers. Still more

Updated Branches:
  refs/heads/develop b9971f411 -> e0e2b8d44


Created a base class for itemRenderers in ActionScript. Modified the list control in JavaScript to follow a similar pattern to the ActionScript version where the list is build using itemRenderers. Still more work to do to bring the JavaScript closer to the ActionScript side.


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/e0e2b8d4
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/e0e2b8d4
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/e0e2b8d4

Branch: refs/heads/develop
Commit: e0e2b8d4446421da51103c9747f8e28f49f520b4
Parents: b9971f4
Author: Peter Ent <pe...@apache.org>
Authored: Wed Sep 4 15:57:46 2013 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Wed Sep 4 15:57:46 2013 -0400

----------------------------------------------------------------------
 frameworks/as/basic-manifest.xml                |   1 +
 frameworks/as/defaults.css                      |   8 +-
 frameworks/as/src/FlexJSUIClasses.as            |   3 +-
 .../TextItemRendererFactoryForArrayData.as      |   5 +-
 .../controllers/ItemRendererMouseController.as  |   4 +-
 .../NonVirtualVerticalScrollingLayout.as        |   2 +-
 .../supportClasses/StringItemRenderer.as        |  78 ++++++++++++++
 .../supportClasses/UIItemRendererBase.as        | 103 +++++++++++++++++++
 .../FlexJS/src/org/apache/flex/core/ListBase.js |  81 +++------------
 .../org/apache/flex/html/staticControls/List.js |  50 +++++++++
 .../controllers/ItemRendererMouseController.js  |  66 ++++++++++++
 .../beads/models/ArraySelectionModel.js         |  84 +++++++++++++++
 .../supportClasses/StringItemRenderer.js        | 101 ++++++++++++++++++
 13 files changed, 514 insertions(+), 72 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/basic-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/as/basic-manifest.xml b/frameworks/as/basic-manifest.xml
index cde5573..b92ef99 100644
--- a/frameworks/as/basic-manifest.xml
+++ b/frameworks/as/basic-manifest.xml
@@ -58,6 +58,7 @@
     <component id="ViewBaseDataBinding" class="org.apache.flex.core.ViewBaseDataBinding"/>
     <component id="NumericStepper" class="org.apache.flex.html.staticControls.NumericStepper" />
     <component id="TextFieldItemRenderer" class="org.apache.flex.html.staticControls.supportClasses.TextFieldItemRenderer"/>
+    <component id="StringItemRenderer" class="org.apache.flex.html.staticControls.supportClasses.StringItemRenderer"/>
     <component id="ScrollBar" class="org.apache.flex.html.staticControls.supportClasses.ScrollBar"/>
     <component id="NumericOnlyTextInputBead" class="org.apache.flex.html.staticControls.accessories.NumericOnlyTextInputBead" />
     <component id="PasswordInputBead" class="org.apache.flex.html.staticControls.accessories.PasswordInputBead" />

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/as/defaults.css b/frameworks/as/defaults.css
index 06645c3..3458881 100644
--- a/frameworks/as/defaults.css
+++ b/frameworks/as/defaults.css
@@ -135,7 +135,7 @@ List
     IBeadLayout: ClassReference("org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout");
     IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
-    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.TextFieldItemRenderer");
+    IItemRenderer: ClassReference("org.apache.flex.html.staticControls.supportClasses.StringItemRenderer");
 }
 
 NumericStepper
@@ -209,6 +209,12 @@ Spinner
     IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.SpinnerMouseController");
 }
 
+StringItemRenderer
+{
+    IBeadController: ClassReference("org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController");
+    height: 16;
+}
+
 TextArea
 {
     IBeadModel: ClassReference("org.apache.flex.html.staticControls.beads.models.TextModel");

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/src/FlexJSUIClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/FlexJSUIClasses.as b/frameworks/as/src/FlexJSUIClasses.as
index e1cd34c..e32c2ce 100644
--- a/frameworks/as/src/FlexJSUIClasses.as
+++ b/frameworks/as/src/FlexJSUIClasses.as
@@ -18,6 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package
 {
+
 /**
  *  @private
  *  This class is used to link additional classes into rpc.swc
@@ -73,7 +74,7 @@ internal class FlexJSUIClasses
     import org.apache.flex.html.staticControls.beads.controllers.VScrollBarMouseController; VScrollBarMouseController;
     import org.apache.flex.html.staticControls.beads.layouts.NonVirtualVerticalScrollingLayout; NonVirtualVerticalScrollingLayout;    
     import org.apache.flex.html.staticControls.beads.layouts.VScrollBarLayout; VScrollBarLayout;    
-    import org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData; TextItemRendererFactoryForArrayData;    
+    import org.apache.flex.html.staticControls.beads.TextItemRendererFactoryForArrayData; TextItemRendererFactoryForArrayData;
     import org.apache.flex.core.ItemRendererClassFactory; ItemRendererClassFactory;    
 	import org.apache.flex.events.CustomEvent; CustomEvent;
 	import org.apache.flex.events.Event; Event;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.as b/frameworks/as/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.as
index ff4678e..f233ef8 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/beads/TextItemRendererFactoryForArrayData.as
@@ -25,6 +25,7 @@ package org.apache.flex.html.staticControls.beads
     import org.apache.flex.core.IStrand;
     import org.apache.flex.core.ValuesManager;
     import org.apache.flex.events.Event;
+    import org.apache.flex.events.IEventDispatcher;
 
 	public class TextItemRendererFactoryForArrayData implements IBead, IDataProviderItemRendererMapper
 	{
@@ -80,7 +81,9 @@ package org.apache.flex.html.staticControls.beads
                 tf.index = i;
                 dataGroup.addElement(tf);
 				tf.text = dp[i];
-			}			
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
 		}
 		
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.as b/frameworks/as/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.as
index 78f9da1..87d9a58 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.as
@@ -64,7 +64,7 @@ package org.apache.flex.html.staticControls.beads.controllers
 
 		protected function mouseDownHandler(event:MouseEvent):void
 		{
-			var target:IItemRenderer = event.target as IItemRenderer;
+			var target:IItemRenderer = event.currentTarget as IItemRenderer;
 			if (target)
 			{
                 target.down = true;
@@ -74,7 +74,7 @@ package org.apache.flex.html.staticControls.beads.controllers
 		
 		protected function mouseUpHandler(event:MouseEvent):void
 		{
-			var target:IItemRenderer = event.target as IItemRenderer;
+			var target:IItemRenderer = event.currentTarget as IItemRenderer;
 			if (target)
 			{
                 target.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);                

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.as b/frameworks/as/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.as
index aa30dc2..c50c081 100644
--- a/frameworks/as/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.as
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/beads/layouts/NonVirtualVerticalScrollingLayout.as
@@ -56,7 +56,7 @@ package org.apache.flex.html.staticControls.beads.layouts
             borderModel = border.model as IBorderModel;
 			IEventDispatcher(listView.strand).addEventListener("heightChanged", changeHandler);
 			IEventDispatcher(listView.strand).addEventListener("widthChanged", changeHandler);
-			changeHandler(null);
+			IEventDispatcher(listView.strand).addEventListener("itemsCreated", changeHandler);
 		}
 	
 		private function changeHandler(event:Event):void

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.as b/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.as
new file mode 100644
index 0000000..fdcee9f
--- /dev/null
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.as
@@ -0,0 +1,78 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.html.staticControls.supportClasses
+{
+	import flash.text.TextFieldType;
+	
+	import org.apache.flex.core.CSSTextField;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.html.staticControls.beads.ITextItemRenderer;
+
+	public class StringItemRenderer extends UIItemRendererBase implements ITextItemRenderer
+	{
+		public function StringItemRenderer()
+		{
+			super();
+			
+			textField = new CSSTextField();
+			textField.type = TextFieldType.DYNAMIC;
+			textField.selectable = false;
+		}
+		
+		public var textField:CSSTextField;
+		
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+			
+			addChild(textField);
+			
+			addEventListener("widthChanged", sizeChangeHandler);
+			addEventListener("heightChanged", sizeChangeHandler);
+			
+			sizeChangeHandler(null);
+		}
+		
+		private function sizeChangeHandler(event:Event):void
+		{
+			textField.x = 0;
+			textField.y = 0;
+			textField.width = this.width;
+			textField.height = this.height;
+		}
+		
+		public function get text():String
+		{
+			return textField.text;
+		}
+		
+		public function set text(value:String):void
+		{
+			textField.text = value;
+		}
+		
+		override public function updateRenderer():void
+		{
+			super.updateRenderer();
+			
+			textField.background = (down || selected || hovered);
+			textField.backgroundColor = backgroundColor;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/UIItemRendererBase.as
----------------------------------------------------------------------
diff --git a/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/UIItemRendererBase.as b/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/UIItemRendererBase.as
new file mode 100644
index 0000000..f32083b
--- /dev/null
+++ b/frameworks/as/src/org/apache/flex/html/staticControls/supportClasses/UIItemRendererBase.as
@@ -0,0 +1,103 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.html.staticControls.supportClasses
+{
+	import org.apache.flex.core.IItemRenderer;
+	import org.apache.flex.core.UIBase;
+	
+	public class UIItemRendererBase extends UIBase implements IItemRenderer
+	{
+		public function UIItemRendererBase()
+		{
+		}
+		
+		public var backgroundColor:uint = 0xFFFFFF;
+		public var highlightColor:uint = 0xCEDBEF;
+		public var selectedColor:uint = 0xA8C6EE;
+		public var downColor:uint = 0x808080;
+		
+		private var _data:Object;
+		
+		public function get data():Object
+		{
+			return _data;
+		}
+		public function set data(value:Object):void
+		{
+			_data = value;
+		}
+		
+		private var _index:int;
+		
+		public function get index():int
+		{
+			return _index;
+		}
+		public function set index(value:int):void
+		{
+			_index = value;
+		}
+		
+		private var _hovered:Boolean;
+		
+		public function get hovered():Boolean
+		{
+			return _hovered;
+		}
+		public function set hovered(value:Boolean):void
+		{
+			_hovered = value;
+			updateRenderer();
+		}
+		
+		private var _selected:Boolean;
+		
+		public function get selected():Boolean
+		{
+			return _selected;
+		}
+		public function set selected(value:Boolean):void
+		{
+			_selected = value;
+			updateRenderer();
+		}
+		
+		private var _down:Boolean;
+		
+		public function get down():Boolean
+		{
+			return _down;
+		}
+		public function set down(value:Boolean):void
+		{
+			_down = value;
+			updateRenderer();
+		}
+		
+		public function updateRenderer():void
+		{
+			if (down)
+				backgroundColor = downColor;
+			else if (hovered)
+				backgroundColor = highlightColor;
+			else if (selected)
+				backgroundColor = selectedColor;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js b/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
index 263c602..d1c998d 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/core/ListBase.js
@@ -15,6 +15,7 @@
 goog.provide('org.apache.flex.core.ListBase');
 
 goog.require('org.apache.flex.core.UIBase');
+goog.require('org.apache.flex.html.staticControls.supportClasses.StringItemRenderer');
 
 
 
@@ -46,10 +47,14 @@ goog.inherits(org.apache.flex.core.ListBase,
  * @this {org.apache.flex.core.ListBase}
  */
 org.apache.flex.core.ListBase.prototype.createElement = function() {
-  this.element = document.createElement('select');
-  goog.events.listen(this.element, 'change',
-      goog.bind(this.changeHandler, this));
-
+//  this.element = document.createElement('select');
+//  goog.events.listen(this.element, 'change',
+//      goog.bind(this.changeHandler, this));
+  this.element = document.createElement('div');
+  this.element.style.overflow='auto';
+  this.element.style.border = 'solid';
+  this.element.style.borderWidth = '1px';
+  this.element.style.borderColor = '#333333';
   this.positioner = this.element;
 };
 
@@ -61,7 +66,7 @@ org.apache.flex.core.ListBase.prototype.createElement = function() {
  */
 org.apache.flex.core.ListBase.prototype.get_dataProvider =
     function() {
-  return this.dataProvider;
+   return this.model.get_dataProvider();
 };
 
 
@@ -72,22 +77,7 @@ org.apache.flex.core.ListBase.prototype.get_dataProvider =
  */
 org.apache.flex.core.ListBase.prototype.set_dataProvider =
     function(value) {
-  var dp, i, n, opt;
-
-  this.dataProvider = value;
-
-  dp = this.element.options;
-  n = dp.length;
-  for (i = 0; i < n; i++) {
-    dp.remove(0);
-  }
-
-  n = value.length;
-  for (i = 0; i < n; i++) {
-    opt = document.createElement('option');
-    opt.text = value[i];
-    dp.add(opt);
-  }
+  this.model.set_dataProvider(value);
 };
 
 
@@ -98,15 +88,7 @@ org.apache.flex.core.ListBase.prototype.set_dataProvider =
  */
 org.apache.flex.core.ListBase.prototype.get_selectedIndex =
     function() {
-  var result;
-
-  if (this.element.selectedIndex !== undefined) {
-    result = this.element.selectedIndex;
-  } else {
-    result = this.selectedIndex_;
-  }
-
-  return result;
+  return this.model.get_selectedIndex();
 };
 
 
@@ -117,11 +99,7 @@ org.apache.flex.core.ListBase.prototype.get_selectedIndex =
  */
 org.apache.flex.core.ListBase.prototype.set_selectedIndex =
     function(value) {
-  this.selectedIndex_ = value;
-
-  if (this.element.selectedIndex !== undefined) {
-    this.element.selectedIndex = value;
-  }
+  this.model.set_selectedIndex(value);
 };
 
 
@@ -132,16 +110,7 @@ org.apache.flex.core.ListBase.prototype.set_selectedIndex =
  */
 org.apache.flex.core.ListBase.prototype.get_selectedItem =
     function() {
-  var si;
-
-  si = this.get_selectedIndex();
-
-  if (!this.dataProvider || si < 0 ||
-      si >= this.dataProvider.length) {
-    return null;
-  }
-
-  return this.dataProvider[si];
+  this.model.get_selectedItem();
 };
 
 
@@ -152,27 +121,7 @@ org.apache.flex.core.ListBase.prototype.get_selectedItem =
  */
 org.apache.flex.core.ListBase.prototype.set_selectedItem =
     function(value) {
-  var dp, i, n;
-
-  dp = this.dataProvider;
-  n = dp.length;
-  for (i = 0; i < n; i++) {
-    if (dp[i] === value) {
-      break;
-    }
-  }
-
-  if (i < n) {
-    this.selectedIndex_ = i;
-
-    if (this.element.selectedIndex !== undefined) {
-      this.element.selectedIndex = i;
-    }
-
-    if (this.element.childNodes) {
-      this.element.childNodes.item(0).value = dp[i];
-    }
-  }
+  this.model.set_selectedItem(value);
 };
 
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
index 383842e..788a5a2 100644
--- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js
@@ -15,6 +15,7 @@
 goog.provide('org.apache.flex.html.staticControls.List');
 
 goog.require('org.apache.flex.core.ListBase');
+goog.require('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
 
 
 
@@ -23,6 +24,13 @@ goog.require('org.apache.flex.core.ListBase');
  * @extends {org.apache.flex.core.ListBase}
  */
 org.apache.flex.html.staticControls.List = function() {
+  this.model = new org.apache.flex.html.staticControls.beads.models.ArraySelectionModel();
+  
+  this.renderers = new Array();
+  
+  this.model.addEventListener('dataProviderChanged',
+      goog.bind(this.dataProviderChangedHandler,this));
+
   goog.base(this);
 };
 goog.inherits(org.apache.flex.html.staticControls.List,
@@ -39,3 +47,45 @@ org.apache.flex.html.staticControls.List.prototype.createElement =
 
   this.element.size = 5;
 };
+
+org.apache.flex.html.staticControls.List.prototype.dataProviderChangedHandler =
+function(event) {
+  var dp, i, n, opt;
+
+  while (this.element.hasChildNodes()) {
+    this.element.removeChild(this.element.lastChild);
+  }
+  
+  this.renderers.splice(0,this.renderers.length);
+
+  dp = this.model.get_dataProvider();
+  n = dp.length;
+  for (i = 0; i < n; i++) {
+    opt = new org.apache.flex.html.staticControls.supportClasses.StringItemRenderer();
+    this.addElement(opt);
+    opt.set_strand(this);
+    opt.set_text(dp[i]);
+    
+    this.renderers.push(opt);
+    
+    goog.events.listen(opt, 'selected',
+            goog.bind(this.selectedHandler, this));
+  }
+};
+
+org.apache.flex.html.staticControls.List.prototype.selectedHandler =
+function(event) {
+   var itemRenderer = event.currentTarget;
+   var n = this.renderers.length;
+   var i;
+   for (i = 0; i < n; i++) {
+       var test = this.renderers[i];
+       if (test == itemRenderer) {
+           this.model.set_selectedIndex(i);
+           itemRenderer.set_selected(true);
+       }
+       else {
+          test.set_selected(false);
+       }
+   }
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
new file mode 100644
index 0000000..e907de2
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/ItemRendererMouseController.js
@@ -0,0 +1,66 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController');
+
+
+/**
+ * @constructor
+ */
+org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController =
+function() {
+};
+
+org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController.
+prototype.set_strand = function(value) {
+  this.strand_ = value;
+ 
+  goog.events.listen(this.strand_.element, goog.events.EventType.MOUSEOVER,
+            goog.bind(this.handleMouseOver, this));
+
+  goog.events.listen(this.strand_.element, goog.events.EventType.MOUSEOUT,
+            goog.bind(this.handleMouseOut, this));
+
+  goog.events.listen(this.strand_.element, goog.events.EventType.MOUSEDOWN,
+            goog.bind(this.handleMouseDown, this));
+
+  goog.events.listen(this.strand_.element, goog.events.EventType.MOUSEUP,
+            goog.bind(this.handleMouseUp, this));
+};
+
+org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController.
+prototype.handleMouseOver = function(event) {
+
+   this.strand_.set_hovered(true);
+};
+
+org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController.
+prototype.handleMouseOut = function(event) {
+
+   this.strand_.set_hovered(false);
+};
+
+org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController.
+prototype.handleMouseDown = function(event) {
+
+   // ??
+};
+
+org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController.
+prototype.handleMouseUp = function(event) {
+
+   var target = event.currentTarget;
+   var newEvent = new goog.events.Event('selected');
+   this.strand_.dispatchEvent(newEvent);
+};
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
new file mode 100644
index 0000000..f93f903
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js
@@ -0,0 +1,84 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org.apache.flex.html.staticControls.beads.models.ArraySelectionModel');
+
+goog.require('org.apache.flex.events.EventDispatcher');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.events.EventDispatcher}
+ */
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel = function() {
+  goog.base(this);
+};
+goog.inherits(org.apache.flex.html.staticControls.beads.models.ArraySelectionModel,
+    org.apache.flex.events.EventDispatcher);
+
+
+/**
+ * @expose
+ * @this {org.apache.flex.html.staticControls.beads.models.ArraySelectionModel}
+ * @param {Object} value The strand.
+ */
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+set_strand = function(value) {
+  this.strand_ = value;
+};
+
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+get_dataProvider = function() {
+  return this.dataProvider_;
+};
+
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+set_dataProvider = function(value) {
+  this.dataProvider_ = value;
+  this.dispatchEvent('dataProviderChanged');
+};
+
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+get_selectedIndex = function() {
+  return this.selectedIndex_;
+};
+
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+set_selectedIndex = function(value) {
+  this.selectedIndex_ = value;
+  this.dispatchEvent('selectedIndexChanged');
+};
+
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+get_selectedItem = function() {
+  return this.selectedItem_;
+};
+
+org.apache.flex.html.staticControls.beads.models.ArraySelectionModel.prototype.
+set_selectedItem = function(value) {
+  this.selectedItem_ = value;
+  // find item in dataProvider and set selectedIndex or -1 if not exists
+
+  this.selectedIndex_ = -1;
+  var n = this.dataProvider_.length;
+  for (var i=0; i < n; i++) {
+     var item = this.dataProvider_[i];
+     if (item == value) {
+       this.selectedIndex_ = i;
+       break;
+     }
+  }
+  
+  this.dispatchEvent('selectedItemChanged');
+  this.dispatchEvent('selectedIndexChanged');
+};

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e0e2b8d4/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.js
----------------------------------------------------------------------
diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.js
new file mode 100644
index 0000000..87040be
--- /dev/null
+++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/supportClasses/StringItemRenderer.js
@@ -0,0 +1,101 @@
+/**
+ * Licensed 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.
+ */
+
+goog.provide('org.apache.flex.html.staticControls.supportClasses.StringItemRenderer');
+
+goog.require('org.apache.flex.core.UIBase');
+goog.require('org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController');
+
+/**
+ * @constructor
+ * @extends {org.apache.flex.core.UIBase}
+ */
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer = function() {
+  goog.base(this);
+};
+goog.inherits(org.apache.flex.html.staticControls.supportClasses.StringItemRenderer,
+    org.apache.flex.core.UIBase);
+
+
+/**
+ * @override
+ * @this {org.apache.flex.html.staticControls.Label}
+ */
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.createElement = function() {
+
+  this.element = document.createElement('div');
+  this.positioner = this.element;
+
+  this.element.flexjs_wrapper = this;
+  this.set_className('StringItemRenderer');
+  
+  // itemRenderers should provide something for the background to handle
+  // the selection and highlight 
+  this.backgroundView = this.element;
+  
+  this.controller = new org.apache.flex.html.staticControls.beads.controllers.ItemRendererMouseController();
+  this.controller.set_strand(this);
+};
+
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.set_strand = function(value) {
+
+  this.strand_ = value;
+};
+
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.get_strand = function() {
+  return this.strand_;
+};
+
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.set_text = function(value) {
+
+  this.element.innerHTML = value;
+};
+
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.get_text = function() {
+
+  return this.element.innerHTML;
+};
+
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.set_selected = function(value) {
+  this.selected_ = value;
+
+  if (value) {
+     this.backgroundView.style.backgroundColor = '#ACACAC';
+   } else {
+     this.backgroundView.style.backgroundColor = null;
+   }
+};
+
+org.apache.flex.html.staticControls.supportClasses.StringItemRenderer.
+prototype.set_hovered = function(value) {
+  this.hovered_ = value;
+
+  if (value) {
+     this.backgroundView.style.backgroundColor='#999999';
+   } else {
+     if (this.selected_) {
+       this.backgroundView.style.backgroundColor = '#ACACAC';
+     } else {
+       this.backgroundView.style.backgroundColor = null;
+     }
+   }
+};
+
+