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 2013/11/18 22:03:10 UTC

[15/21] move AS code into a projects/FlexJSUI

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertMeasurementBead.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertMeasurementBead.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertMeasurementBead.as
new file mode 100644
index 0000000..8199b28
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertMeasurementBead.as
@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IMeasurementBead;
+	import org.apache.flex.core.IStrand;
+	
+	public class AlertMeasurementBead implements IMeasurementBead
+	{
+		public function AlertMeasurementBead()
+		{
+		}
+		
+		public function get measuredWidth():Number
+		{
+			return 0;
+		}
+		
+		public function get measuredHeight():Number
+		{
+			return 0;
+		}
+		
+		private var _strand:IStrand;
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertView.as
new file mode 100644
index 0000000..b02911a
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/AlertView.as
@@ -0,0 +1,178 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IAlertModel;
+	import org.apache.flex.core.IBead;
+    import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IMeasurementBead;
+    import org.apache.flex.core.IParent;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.UIMetrics;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.createjs.staticControls.Label;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.staticControls.Alert;
+	import org.apache.flex.html.staticControls.ControlBar;
+	import org.apache.flex.html.staticControls.TextButton;
+	import org.apache.flex.html.staticControls.TitleBar;
+	import org.apache.flex.utils.BeadMetrics;
+	
+	public class AlertView implements IBeadView
+	{
+		public function AlertView()
+		{
+		}
+		
+		private var _titleBar:TitleBar;
+		private var _controlBar:ControlBar;
+		private var _label:Label;
+		private var _okButton:TextButton;
+		private var _cancelButton:TextButton;
+		private var _yesButton:TextButton;
+		private var _noButton:TextButton;
+		
+		private var _strand:IStrand;
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+
+            var backgroundColor:Object = ValuesManager.valuesImpl.getValue(value, "background-color");
+			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(value, "background-image");
+			if (backgroundColor != null || backgroundImage != null)
+			{
+				if (value.getBeadByType(IBackgroundBead) == null)
+					value.addBead(new (ValuesManager.valuesImpl.getValue(value, "iBackgroundBead")) as IBead);					
+			}
+			
+			var borderStyle:String;
+			var borderStyles:Object = ValuesManager.valuesImpl.getValue(value, "border");
+			if (borderStyles is Array)
+			{
+				borderStyle = borderStyles[1];
+			}
+			if (borderStyle == null)
+			{
+				borderStyle = ValuesManager.valuesImpl.getValue(value, "border-style") as String;
+			}
+			if (borderStyle != null && borderStyle != "none")
+			{
+				if (value.getBeadByType(IBorderBead) == null)
+					value.addBead(new (ValuesManager.valuesImpl.getValue(value, "iBorderBead")) as IBead);	
+			}
+			
+			var flags:uint = IAlertModel(UIBase(_strand).model).flags;
+			if( flags & Alert.OK ) {
+				_okButton = new TextButton();
+				_okButton.text = IAlertModel(UIBase(_strand).model).okLabel;
+				_okButton.addEventListener("click",handleOK);
+			}
+			if( flags & Alert.CANCEL ) {
+				_cancelButton = new TextButton();
+				_cancelButton.text = IAlertModel(UIBase(_strand).model).cancelLabel;
+				_cancelButton.addEventListener("click",handleCancel);
+			}
+			if( flags & Alert.YES ) {
+				_yesButton = new TextButton();
+				_yesButton.text = IAlertModel(UIBase(_strand).model).yesLabel;
+				_yesButton.addEventListener("click",handleYes);
+			}
+			if( flags & Alert.NO ) {
+				_noButton = new TextButton();
+				_noButton.text = IAlertModel(UIBase(_strand).model).noLabel;
+				_noButton.addEventListener("click",handleNo);
+			}
+			
+			_titleBar = new TitleBar();
+			_titleBar.title = IAlertModel(UIBase(_strand).model).title;
+			
+			_label = new Label();
+			_label.text = IAlertModel(UIBase(_strand).model).message;
+			
+			_controlBar = new ControlBar();
+			if( _okButton ) _controlBar.addElement(_okButton);
+			if( _cancelButton ) _controlBar.addElement(_cancelButton);
+			if( _yesButton  ) _controlBar.addElement(_yesButton);
+			if( _noButton ) _controlBar.addElement(_noButton);
+			
+		    IParent(_strand).addElement(_titleBar);
+            IParent(_strand).addElement(_controlBar);
+            IParent(_strand).addElement(_label);
+			
+			sizeHandler(null);
+		}
+		
+		private function sizeHandler(event:Event):void
+		{
+			var labelMeasure:IMeasurementBead = _label.measurementBead;
+			var titleMeasure:IMeasurementBead = _titleBar.measurementBead;
+			var ctrlMeasure:IMeasurementBead  = _controlBar.measurementBead;
+			var maxWidth:Number = Math.max(titleMeasure.measuredWidth, ctrlMeasure.measuredWidth, labelMeasure.measuredWidth);
+			
+			var metrics:UIMetrics = BeadMetrics.getMetrics(_strand);
+
+			_titleBar.x = metrics.left;
+			_titleBar.y = metrics.top;
+			_titleBar.width = maxWidth;
+			
+			// content placement here
+			_label.x = metrics.left;
+			_label.y = _titleBar.y + _titleBar.height + 2;
+			_label.width = maxWidth;
+			
+			_controlBar.x = metrics.left;
+			_controlBar.y = _label.y + _label.height + 2;
+			_controlBar.width = maxWidth;
+			
+			UIBase(_strand).width = maxWidth + metrics.left + metrics.right;
+			UIBase(_strand).height = _controlBar.y + _controlBar.height + metrics.bottom + 2;
+		}
+		
+		private function handleOK(event:Event):void
+		{
+			// create some custom event where the detail value
+			// is the OK button flag. Do same for other event handlers
+			dispatchCloseEvent(Alert.OK);
+		}
+		
+		private function handleCancel(event:Event):void
+		{
+			dispatchCloseEvent(Alert.CANCEL);
+		}
+		
+		private function handleYes(event:Event):void
+		{
+			dispatchCloseEvent(Alert.YES);
+		}
+		
+		private function handleNo(event:Event):void
+		{
+			dispatchCloseEvent(Alert.NO);
+		}
+		
+		public function dispatchCloseEvent(buttonFlag:uint):void
+		{
+			// TO DO: buttonFlag should be part of the event
+			var newEvent:Event = new Event("close",true);
+			IEventDispatcher(_strand).dispatchEvent(newEvent);
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ButtonBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ButtonBarView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ButtonBarView.as
new file mode 100644
index 0000000..d1c781f
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ButtonBarView.as
@@ -0,0 +1,44 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	
+	import org.apache.flex.core.ILayoutParent;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+
+	public class ButtonBarView extends ListView
+	{
+		public function ButtonBarView()
+		{
+			super();
+		}
+		
+		private var _strand:IStrand;
+		
+		override public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			super.strand = value;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSButtonView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSButtonView.as
new file mode 100644
index 0000000..f7dc60a
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSButtonView.as
@@ -0,0 +1,128 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.Loader;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.events.Event;
+	import flash.net.URLRequest;
+	
+	import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.CSSTextField;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.ITextModel;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.utils.SolidBorderUtil;
+
+	public class CSSButtonView implements IBeadView
+	{
+		public function CSSButtonView()
+		{
+			upSprite = new Sprite();
+			downSprite = new Sprite();
+			overSprite = new Sprite();
+		}
+		
+		private var textModel:ITextModel;
+		
+		private var _strand:IStrand;
+		
+		private var shape:Shape;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			shape = new Shape();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, 10, 10);
+			shape.graphics.endFill();
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
+			SimpleButton(value).hitTestState = shape;
+
+            setupBackground(overSprite, "hover");
+            setupBackground(downSprite, "active");
+            setupBackground(upSprite);
+		}
+	
+		private function setupSkin(sprite:Sprite, state:String = null):void
+		{
+			var borderColor:uint;
+			var borderThickness:uint;
+			var borderStyle:String;
+			var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
+			if (borderStyles is Array)
+			{
+				borderColor = borderStyles[2];
+				borderStyle = borderStyles[1];
+				borderThickness = borderStyles[0];
+			}
+			var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state);
+			if (value != null)
+				borderStyle = value as String;
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
+			if (value != null)
+				borderColor = value as uint;
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
+			if (value != null)
+				borderThickness = value as uint;
+			var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
+			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color", state);
+			if (borderStyle == "solid")
+			{
+				SolidBorderUtil.drawBorder(sprite.graphics, 
+					0, 0, sprite.width + Number(padding) * 2, sprite.height + Number(padding) * 2,
+					borderColor, backgroundColor, borderThickness);
+			}			
+		}
+		
+        private function setupBackground(sprite:Sprite, state:String = null):void
+        {
+            var backgroundImage:Object = ValuesManager.valuesImpl.getValue(_strand, "background-image", state);
+            if (backgroundImage)
+            {
+                var loader:Loader = new Loader();
+                sprite.addChildAt(loader, 0);
+                var url:String = backgroundImage as String;
+                loader.load(new URLRequest(url));
+                loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, function (e:flash.events.Event):void { 
+                    setupSkin(sprite, state);
+                    updateHitArea();
+                });
+            }
+        }
+        
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+				
+		private function updateHitArea():void
+		{
+			shape.graphics.clear();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, upSprite.width, upSprite.height);
+			shape.graphics.endFill();
+			
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSTextButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSTextButtonView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSTextButtonView.as
new file mode 100644
index 0000000..23428d8
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CSSTextButtonView.as
@@ -0,0 +1,210 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.Loader;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.events.Event;
+	import flash.net.URLRequest;
+	import flash.text.TextField;
+	import flash.text.TextFieldType;
+	
+	import org.apache.flex.core.CSSTextField;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.ITextModel;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.utils.SolidBorderUtil;
+
+	public class CSSTextButtonView implements IBeadView
+	{
+		public function CSSTextButtonView()
+		{
+			upSprite = new Sprite();
+			downSprite = new Sprite();
+			overSprite = new Sprite();
+			upTextField = new CSSTextField();
+			downTextField = new CSSTextField();
+			overTextField = new CSSTextField();
+			upTextField.selectable = false;
+			upTextField.type = TextFieldType.DYNAMIC;
+			downTextField.selectable = false;
+			downTextField.type = TextFieldType.DYNAMIC;
+			overTextField.selectable = false;
+			overTextField.type = TextFieldType.DYNAMIC;
+			upTextField.autoSize = "left";
+			downTextField.autoSize = "left";
+			overTextField.autoSize = "left";
+			upSprite.addChild(upTextField);
+			downSprite.addChild(downTextField);
+			overSprite.addChild(overTextField);
+		}
+		
+		private var textModel:ITextModel;
+		
+		private var _strand:IStrand;
+		
+		private var shape:Shape;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			textModel = value.getBeadByType(ITextModel) as ITextModel;
+			textModel.addEventListener("textChange", textChangeHandler);
+			textModel.addEventListener("htmlChange", htmlChangeHandler);
+			shape = new Shape();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, 10, 10);
+			shape.graphics.endFill();
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
+			SimpleButton(value).hitTestState = shape;
+			if (textModel.text !== null)
+				text = textModel.text;
+			if (textModel.html !== null)
+				html = textModel.html;
+
+            setupSkin(overSprite, overTextField, "hover");
+			setupSkin(downSprite, downTextField, "active");
+			setupSkin(upSprite, upTextField);
+			
+			IEventDispatcher(_strand).addEventListener("widthChanged",sizeChangeHandler);
+			IEventDispatcher(_strand).addEventListener("heightChanged",sizeChangeHandler);
+		}
+	
+		private function setupSkin(sprite:Sprite, textField:TextField, state:String = null):void
+		{
+			var sw:uint = DisplayObject(_strand).width;
+			var sh:uint = DisplayObject(_strand).height;
+			
+			var borderColor:uint;
+			var borderThickness:uint;
+			var borderStyle:String;
+			var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
+			if (borderStyles is Array)
+			{
+				borderColor = borderStyles[2];
+				borderStyle = borderStyles[1];
+				borderThickness = borderStyles[0];
+			}
+			var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state);
+			if (value != null)
+				borderStyle = value as String;
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
+			if (value != null)
+				borderColor = value as uint;
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-thickness", state);
+			if (value != null)
+				borderThickness = value as uint;
+			var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
+			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color", state);
+			if (borderStyle == "solid")
+			{
+				SolidBorderUtil.drawBorder(sprite.graphics, 
+					0, 0, sw, textField.textHeight + Number(padding) * 2,
+					borderColor, backgroundColor, borderThickness);
+				textField.y = (sprite.height - textField.height) / 2;
+				textField.x = (sprite.width - textField.width) / 2;
+			}			
+			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(_strand, "background-image", state);
+			if (backgroundImage)
+			{
+				var loader:Loader = new Loader();
+				sprite.addChildAt(loader, 0);
+				var url:String = backgroundImage as String;
+				loader.load(new URLRequest(url));
+				loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, function (e:flash.events.Event):void { 
+					textField.y = (sh - textField.height) / 2;
+					textField.x = (sw - textField.width) / 2;
+					updateHitArea();
+				});
+			}
+		}
+		
+		private function drawSkin() : void
+		{
+			setupSkin(overSprite, overTextField, "hover");
+			setupSkin(downSprite, downTextField, "active");
+			setupSkin(upSprite, upTextField);
+			
+			updateHitArea();
+		}
+		
+		private function textChangeHandler(event:org.apache.flex.events.Event):void
+		{
+			text = textModel.text;
+		}
+		
+		private function htmlChangeHandler(event:org.apache.flex.events.Event):void
+		{
+			html = textModel.html;
+		}
+		
+		private function sizeChangeHandler(event:org.apache.flex.events.Event):void
+		{
+			drawSkin();
+		}
+		
+		private var upTextField:CSSTextField;
+		private var downTextField:CSSTextField;
+		private var overTextField:CSSTextField;
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+		
+		public function get text():String
+		{
+			return upTextField.text;
+		}
+		public function set text(value:String):void
+		{
+			upTextField.text = value;
+			downTextField.text = value;
+			overTextField.text = value;
+			updateHitArea();
+		}
+		
+		private function updateHitArea():void
+		{
+			shape.graphics.clear();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, upSprite.width, upSprite.height);
+			shape.graphics.endFill();
+			
+		}
+		
+		public function get html():String
+		{
+			return upTextField.htmlText;
+		}
+		
+		public function set html(value:String):void
+		{
+			upTextField.htmlText = value;
+			downTextField.htmlText = value;
+			overTextField.htmlText = value;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CheckBoxView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CheckBoxView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CheckBoxView.as
new file mode 100644
index 0000000..c6a9cb3
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/CheckBoxView.as
@@ -0,0 +1,214 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.text.TextFieldAutoSize;
+	import flash.text.TextFieldType;
+	
+	import org.apache.flex.core.CSSTextField;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IToggleButtonModel;
+	import org.apache.flex.events.Event;
+	
+	public class CheckBoxView implements IBeadView
+	{
+		public function CheckBoxView()
+		{
+			sprites = [ upSprite = new Sprite(),
+				        downSprite = new Sprite(),
+						overSprite = new Sprite(),
+						upAndSelectedSprite = new Sprite(),
+						downAndSelectedSprite = new Sprite(),
+						overAndSelectedSprite = new Sprite() ];
+			
+			for each( var s:Sprite in sprites )
+			{
+				var tf:CSSTextField = new CSSTextField();
+				tf.type = TextFieldType.DYNAMIC;
+				tf.autoSize = TextFieldAutoSize.LEFT;
+				tf.name = "textField";
+				var icon:Shape = new Shape();
+				icon.name = "icon";
+				s.addChild(icon);
+				s.addChild(tf);
+			}
+		}
+		
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+		private var upAndSelectedSprite:Sprite;
+		private var downAndSelectedSprite:Sprite;
+		private var overAndSelectedSprite:Sprite;
+		
+		private var sprites:Array;
+		
+		private var _toggleButtonModel:IToggleButtonModel;
+		
+		public function get toggleButtonModel() : IToggleButtonModel
+		{
+			return _toggleButtonModel;
+		}
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+            
+			_toggleButtonModel = value.getBeadByType(IToggleButtonModel) as IToggleButtonModel;
+			_toggleButtonModel.addEventListener("textChange", textChangeHandler);
+			_toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
+			_toggleButtonModel.addEventListener("selectedChange", selectedChangeHandler);
+			if (_toggleButtonModel.text !== null)
+				text = _toggleButtonModel.text;
+			
+			layoutControl();
+			
+			var hitArea:Shape = new Shape();
+			hitArea.graphics.beginFill(0x000000);
+			hitArea.graphics.drawRect(12,0,upSprite.width, upSprite.height);
+			hitArea.graphics.endFill();
+			
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
+			SimpleButton(value).hitTestState = hitArea;
+			
+			if (toggleButtonModel.text !== null)
+				text = toggleButtonModel.text;
+			if (toggleButtonModel.html !== null)
+				html = toggleButtonModel.html;
+		}
+		
+		public function get text():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.text;
+		}
+		
+		public function set text(value:String):void
+		{
+			for each( var s:Sprite in sprites )
+			{
+				var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+				tf.text = value;
+			}
+			
+			layoutControl();
+		}
+		
+		public function get html():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.htmlText;
+		}
+		
+		public function set html(value:String):void
+		{
+			for each(var s:Sprite in sprites)
+			{
+				var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+				tf.htmlText = value;
+			}
+			
+			layoutControl();
+		}
+		
+		private function textChangeHandler(event:Event):void
+		{
+			text = toggleButtonModel.text;
+		}
+		
+		private function htmlChangeHandler(event:Event):void
+		{
+			html = toggleButtonModel.html;
+		}
+		
+		private var _selected:Boolean;
+		
+		public function get selected():Boolean
+		{
+			return _selected;
+		}
+		
+		public function set selected(value:Boolean):void
+		{
+			_selected = value;
+			
+			layoutControl();
+			
+			if( value ) {
+				SimpleButton(_strand).upState = upAndSelectedSprite;
+				SimpleButton(_strand).downState = downAndSelectedSprite;
+				SimpleButton(_strand).overState = overAndSelectedSprite;
+				
+			} else {
+				SimpleButton(_strand).upState = upSprite;
+				SimpleButton(_strand).downState = downSprite;
+				SimpleButton(_strand).overState = overSprite;
+			}
+		}
+		
+		private function selectedChangeHandler(event:Event):void
+		{
+			selected = toggleButtonModel.selected;
+		}
+		
+		protected function layoutControl() : void
+		{
+			for each(var s:Sprite in sprites)
+			{
+				var icon:Shape = s.getChildByName("icon") as Shape;
+				var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+				
+				drawCheckBox(icon);
+				
+				var mh:Number = Math.max(icon.height,tf.height);
+				
+				icon.x = 0;
+				icon.y = (mh - icon.height)/2;
+				
+				tf.x = icon.x + icon.width + 1;
+				tf.y = (mh - tf.height)/2;
+			}
+			
+		}
+		
+		protected function drawCheckBox(icon:Shape) : void
+		{
+			icon.graphics.clear();
+			icon.graphics.beginFill(0xCCCCCC);
+			icon.graphics.lineStyle(1,0x333333);
+			icon.graphics.drawRect(0,0,10,10);
+			icon.graphics.endFill();
+			
+			if( _toggleButtonModel.selected ) {
+				icon.graphics.moveTo(0,0);
+				icon.graphics.lineTo(10,10);
+				icon.graphics.moveTo(10,0);
+				icon.graphics.lineTo(0,10);
+			}
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ComboBoxView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ComboBoxView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ComboBoxView.as
new file mode 100644
index 0000000..d7a5bba
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ComboBoxView.as
@@ -0,0 +1,175 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	import flash.display.Sprite;
+	
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IComboBoxModel;
+	import org.apache.flex.core.IPopUpHost;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.core.IParent;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.staticControls.Button;
+	import org.apache.flex.html.staticControls.TextInput;
+	
+	public class ComboBoxView implements IBeadView, IComboBoxView
+	{
+		public function ComboBoxView()
+		{
+		}
+		
+		private var textInput:TextInput;
+		private var button:Button;
+		
+		public function get text():String
+		{
+			return textInput.text;
+		}
+		public function set text(value:String):void
+		{
+			textInput.text = value;
+		}
+		
+		public function get html():String
+		{
+			return textInput.html;
+		}
+		public function set html(value:String):void
+		{
+			textInput.html = value;
+		}
+		private var _strand:IStrand;
+		
+		public function get strand():IStrand
+		{
+			return _strand;
+		}
+		
+		private var selectionModel:IComboBoxModel;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+        
+			selectionModel = value.getBeadByType(IComboBoxModel) as IComboBoxModel;
+			selectionModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
+            
+			textInput = new TextInput();
+			IParent(strand).addElement(textInput);
+			textInput.width = 100;
+			textInput.height = 18;
+			
+			upSprite = new Sprite();
+			drawButton( upSprite, "up", 18, 18 );
+			overSprite = new Sprite();
+			drawButton( overSprite, "over", 18, 18 );
+			downSprite = new Sprite();
+			drawButton( downSprite, "down", 18, 18 );
+			
+			button = new Button( upSprite, overSprite, downSprite );
+			DisplayObjectContainer(strand).addChild(button);
+			button.width = 18;
+			button.height = 18;
+			button.x = textInput.width;
+			button.y = textInput.y;
+			
+			// listen for events on the text input and modify the list and selection
+			textInput.addEventListener("change", textChangeHandler,false,0,true);
+		}
+		
+		private var upSprite:Sprite;
+		private var overSprite:Sprite;
+		private var downSprite:Sprite;
+		
+		private function drawButton( sprite:Sprite, mode:String, width:Number, height:Number ) : void
+		{
+			sprite.graphics.clear();
+			sprite.graphics.lineStyle(1,0xFFFFFF);
+			sprite.graphics.drawRect(0, 0, width-1, height-1);
+			sprite.graphics.lineStyle(-1);
+			
+			if( mode == "over" ) sprite.graphics.beginFill(0xCCCCCC);
+			else if( mode == "down" ) sprite.graphics.beginFill(0x888888);
+			sprite.graphics.drawRect(0, 0, width-1, height-1);
+			sprite.graphics.endFill();
+			
+			sprite.graphics.beginFill(0x333333);
+			sprite.graphics.moveTo(4,4);
+			sprite.graphics.lineTo(width-4,4);
+			sprite.graphics.lineTo(int(width/2),height-4);
+			sprite.graphics.lineTo(4,4);
+			sprite.graphics.endFill();
+		}
+		
+		private var _popUp:IStrand;
+		public function get popUp():IStrand
+		{
+			return _popUp;
+		}
+		
+		private var _popUpVisible:Boolean;
+		
+		public function get popUpVisible():Boolean
+		{
+			return _popUpVisible;
+		}
+		
+		public function set popUpVisible(value:Boolean):void
+		{
+			if (value != _popUpVisible)
+			{
+				_popUpVisible = value;
+				if (value)
+				{
+					if (!_popUp)
+					{
+						var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
+						_popUp = new popUpClass() as IStrand;
+					}
+					var root:Object = DisplayObject(_strand).root;
+					var host:DisplayObjectContainer = DisplayObject(_strand).parent;
+					while (host && !(host is IPopUpHost))
+						host = host.parent;
+                    if (host)
+    					IPopUpHost(host).addElement(popUp);
+				}
+				else
+				{
+					DisplayObject(_popUp).parent.removeChild(_popUp as DisplayObject);                    
+				}
+			}
+		}
+		
+		private function selectionChangeHandler(event:Event):void
+		{
+			text = selectionModel.selectedItem.toString();
+		}
+		
+		private function textChangeHandler(event:Event):void
+		{	
+			var newEvent:Event = new Event("change");
+			IEventDispatcher(strand).dispatchEvent(newEvent);
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ContainerView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ContainerView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ContainerView.as
new file mode 100644
index 0000000..c0eb0b7
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ContainerView.as
@@ -0,0 +1,144 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	import flash.display.Sprite;
+	
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.ILayoutParent;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.html.staticControls.Container;
+	import org.apache.flex.html.staticControls.ContainerContentArea;
+	import org.apache.flex.html.staticControls.supportClasses.Border;
+	import org.apache.flex.html.staticControls.supportClasses.ScrollBar;
+	
+	public class ContainerView implements IBeadView, ILayoutParent
+	{
+		public function ContainerView()
+		{
+		}
+		
+		protected var actualParent:DisplayObjectContainer;
+				
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(value, "background-color");
+			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(value, "background-image");
+			if (backgroundColor != null || backgroundImage != null)
+			{
+				if (value.getBeadByType(IBackgroundBead) == null)
+					value.addBead(new (ValuesManager.valuesImpl.getValue(value, "iBackgroundBead")) as IBead);					
+			}
+			
+			var borderStyle:String;
+			var borderStyles:Object = ValuesManager.valuesImpl.getValue(value, "border");
+			if (borderStyles is Array)
+			{
+				borderStyle = borderStyles[1];
+			}
+			if (borderStyle == null)
+			{
+				borderStyle = ValuesManager.valuesImpl.getValue(value, "border-style") as String;
+			}
+			if (borderStyle != null && borderStyle != "none")
+			{
+				if (value.getBeadByType(IBorderBead) == null)
+					value.addBead(new (ValuesManager.valuesImpl.getValue(value, "iBorderBead")) as IBead);	
+			}
+			
+			var paddingLeft:Object;
+			var paddingTop:Object;
+			var padding:Object = ValuesManager.valuesImpl.getValue(value, "padding");
+			if (padding is Array)
+			{
+				if (padding.length == 1)
+					paddingLeft = paddingTop = padding[0];
+				else if (padding.length <= 3)
+				{
+					paddingLeft = padding[1];
+					paddingTop = padding[0];
+				}
+				else if (padding.length == 4)
+				{
+					paddingLeft = padding[3];
+					paddingTop = padding[0];					
+				}
+			}
+			else if (padding == null)
+			{
+				paddingLeft = ValuesManager.valuesImpl.getValue(value, "padding-left");
+				paddingTop = ValuesManager.valuesImpl.getValue(value, "padding-top");
+			}
+			else
+			{
+				paddingLeft = paddingTop = padding;
+			}
+			var pl:Number = Number(paddingLeft);
+			var pt:Number = Number(paddingTop);
+			if ((!isNaN(pl) && pl > 0 ||
+				!isNaN(pt) && pt > 0))
+			{
+				actualParent = new ContainerContentArea();
+				DisplayObjectContainer(value).addChild(actualParent);
+				Container(value).setActualParent(actualParent);
+				actualParent.x = pl;
+				actualParent.y = pt;
+			}
+			else
+			{
+				actualParent = value as DisplayObjectContainer;
+			}
+		}
+		
+		public function get contentView():DisplayObjectContainer
+		{
+			return actualParent;
+		}
+		
+		public function get border():Border
+		{
+			return null;
+		}
+		
+		public function get resizableView():DisplayObject
+		{
+			return _strand as DisplayObject;
+		}
+		
+		public function get vScrollBar():ScrollBar
+		{
+			return null;
+		}
+		
+		public function get hScrollBar():ScrollBar
+		{
+			return null;
+		}
+		
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ControlBarMeasurementBead.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ControlBarMeasurementBead.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ControlBarMeasurementBead.as
new file mode 100644
index 0000000..af16940
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/ControlBarMeasurementBead.as
@@ -0,0 +1,74 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObjectContainer;
+	
+	import org.apache.flex.core.IMeasurementBead;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.html.staticControls.Container;
+	
+	public class ControlBarMeasurementBead implements IMeasurementBead
+	{
+		public function ControlBarMeasurementBead()
+		{
+		}
+		
+		public function get measuredWidth():Number
+		{
+			// Note: the measurement should problably be done by the ControlBar's layout manager bead
+			// since it would know the arrangement of the items and how far apart they are and if
+			// there are margins and paddings and gaps involved.
+			var mwidth:Number = 0;
+			var children:Array = Container(_strand).getChildren();
+			var n:int = children.length;
+			for(var i:int=0; i < n; i++) {
+				var child:IUIBase = children[i] as IUIBase;
+				if( child == null ) continue;
+				var childMeasure:IMeasurementBead = child.getBeadByType(IMeasurementBead) as IMeasurementBead;
+                if (childMeasure)
+    				mwidth += childMeasure.measuredWidth;
+			}
+			return mwidth;
+		}
+		
+		public function get measuredHeight():Number
+		{
+			// Note: the measurement should problably be done by the ControlBar's layout manager bead
+			// since it would know the arrangement of the items and how far apart they are and if
+			// there are margins and paddings and gaps involved.
+			var mheight:Number = 0;
+			var n:int = DisplayObjectContainer(_strand).numChildren;
+			for(var i:int=0; i < n; i++) {
+				var child:IUIBase = DisplayObjectContainer(_strand).getChildAt(i) as IUIBase;
+				if( child == null ) continue;
+				var childMeasure:IMeasurementBead = child.getBeadByType(IMeasurementBead) as IMeasurementBead;
+				mheight += childMeasure.measuredHeight;
+			}
+			return mheight;
+		}
+		
+		private var _strand:IStrand;
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.as
new file mode 100644
index 0000000..94dc74c
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridColumnView.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IStrand;
+	
+	public class DataGridColumnView extends ListView
+	{
+		public function DataGridColumnView()
+		{
+		}
+		
+		private var _strand:IStrand;
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			_strand = value;
+		}
+		
+		private var _columnIndex:uint;
+		public function get columnIndex():uint
+		{
+			return _columnIndex;
+		}
+		public function set columnIndex(value:uint):void
+		{
+			_columnIndex = value;
+		}
+		
+		private var _labelField:String;
+		public function get labelField():String
+		{
+			return _labelField;
+		}
+		public function set labelField(value:String):void
+		{
+			_labelField = value;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridView.as
new file mode 100644
index 0000000..f2d3cc2
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataGridView.as
@@ -0,0 +1,156 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	import flash.display.Shape;
+	
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.IDataGridPresentationModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.staticControls.ButtonBar;
+	import org.apache.flex.html.staticControls.Container;
+	import org.apache.flex.html.staticControls.List;
+	import org.apache.flex.html.staticControls.SimpleList;
+	import org.apache.flex.html.staticControls.beads.layouts.NonVirtualHorizontalLayout;
+	import org.apache.flex.html.staticControls.beads.models.ArraySelectionModel;
+	
+	public class DataGridView implements IDataGridView
+	{
+		public function DataGridView()
+		{
+		}
+		
+		private var background:Shape;
+		private var buttonBar:ButtonBar;
+		private var buttonBarModel:ArraySelectionModel;
+		private var columnContainer:Container;
+		private var columns:Array;
+		
+		private var _strand:IStrand;
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			background = new Shape();
+			DisplayObjectContainer(_strand).addChild(background);
+			
+			var pm:IDataGridPresentationModel = _strand.getBeadByType(IDataGridPresentationModel) as IDataGridPresentationModel;
+			buttonBarModel = new ArraySelectionModel();
+			buttonBarModel.dataProvider = pm.columnLabels;
+			buttonBar = new ButtonBar();
+			buttonBar.addBead(buttonBarModel);
+			UIBase(_strand).addElement(buttonBar);
+			
+			columnContainer = new Container();
+			var layout:NonVirtualHorizontalLayout = new NonVirtualHorizontalLayout();
+			columnContainer.addBead(layout);
+			UIBase(_strand).addElement(columnContainer);
+			
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			
+			columns = new Array();
+			for(var i:int=0; i < pm.columnLabels.length; i++) {
+				var column:List = new SimpleList();
+				var columnView:DataGridColumnView = new DataGridColumnView();
+				columnView.labelField = sharedModel.labelFields[i];
+				var factory:DataItemRendererFactoryForColumnData = new DataItemRendererFactoryForColumnData();
+				columnView.columnIndex = i;
+				column.addBead(sharedModel);
+				column.addBead(columnView);
+				column.addBead(factory);
+				columnContainer.addElement(column);
+				columns.push(column);
+				
+				column.addEventListener('change',columnListChangeHandler);
+				column.addEventListener('rollover',columnListRollOverHandler);
+			}
+			
+			IEventDispatcher(_strand).addEventListener("widthChanged",handleSizeChange);
+			IEventDispatcher(_strand).addEventListener("heightChanged",handleSizeChange);
+			
+			handleSizeChange(null); // initial sizing
+		}
+		
+		private function handleSizeChange(event:Event):void
+		{
+			var sw:Number = DisplayObject(_strand).width;
+			var sh:Number = DisplayObject(_strand).height;
+			
+			var backgroundColor:Number = 0xDDDDDD;
+			var value:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color");
+			if (value != null) backgroundColor = Number(value);
+			
+			background.graphics.clear();
+			background.graphics.beginFill(backgroundColor);
+			background.graphics.drawRect(0,0,sw,sh);
+			background.graphics.endFill();
+			
+			buttonBar.x = 0;
+			buttonBar.y = 0;
+			buttonBar.width = sw;
+			buttonBar.height = 25;
+			
+			columnContainer.x = 0;
+			columnContainer.y = 30;
+			columnContainer.width = sw;
+			columnContainer.height = sh - 25;
+			
+			for(var i:int=0; i < columns.length; i++) {
+				var column:List = columns[i];
+			
+				var cw:Number = sw/(columns.length);
+				column.x = i*cw; // should be positioned by the Container's layout
+				column.y = 0;
+				column.width = cw;
+				column.height = columnContainer.height; // this will actually be Nitem*rowHeight
+			}
+		}
+		
+		private function columnListChangeHandler(event:Event):void
+		{
+			var list:List = event.target as List;
+			for(var i:int=0; i < columns.length; i++) {
+				if (list != columns[i]) {
+					columns[i].selectedIndex = list.selectedIndex;
+				}
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event('change'));
+		}
+		
+		private function columnListRollOverHandler(event:Event):void
+		{
+			var list:List = event.target as List;
+			for(var i:int=0; i < columns.length; i++) {
+				if (list != columns[i]) {
+					columns[i].rollOverIndex = list.rollOverIndex;
+				}
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event('rollOver'));
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForArrayData.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForArrayData.as
new file mode 100644
index 0000000..dbb06ed
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForArrayData.as
@@ -0,0 +1,92 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IItemRenderer;
+	import org.apache.flex.core.IItemRendererClassFactory;
+	import org.apache.flex.core.IItemRendererParent;
+	import org.apache.flex.core.ISelectionModel;
+	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 DataItemRendererFactoryForArrayData implements IBead, IDataProviderItemRendererMapper
+	{
+		public function DataItemRendererFactoryForArrayData()
+		{
+		}
+		
+		private var selectionModel:ISelectionModel;
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			selectionModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
+			var listView:IListView = value.getBeadByType(IListView) as IListView;
+			dataGroup = listView.dataGroup;
+			selectionModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+			
+			if (!itemRendererFactory)
+			{
+				_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
+				_strand.addBead(_itemRendererFactory);
+			}
+			
+			dataProviderChangeHandler(null);
+		}
+		
+		public var _itemRendererFactory:IItemRendererClassFactory;
+		
+		public function get itemRendererFactory():IItemRendererClassFactory
+		{
+			return _itemRendererFactory
+		}
+		
+		public function set itemRendererFactory(value:IItemRendererClassFactory):void
+		{
+			_itemRendererFactory = value;
+		}
+		
+		protected var dataGroup:IItemRendererParent;
+		
+		private function dataProviderChangeHandler(event:Event):void
+		{
+			var dp:Array = selectionModel.dataProvider as Array;
+			if (!dp)
+				return;
+			
+			dataGroup.removeAllElements();
+			
+			var n:int = dp.length; 
+			for (var i:int = 0; i < n; i++)
+			{
+				var ir:IItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as IItemRenderer;
+				ir.index = i;
+				dataGroup.addElement(ir);
+				ir.data = dp[i];
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.as
new file mode 100644
index 0000000..34b7969
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DataItemRendererFactoryForColumnData.as
@@ -0,0 +1,98 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IItemRenderer;
+	import org.apache.flex.core.IItemRendererClassFactory;
+	import org.apache.flex.core.IItemRendererParent;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.staticControls.supportClasses.DataItemRenderer;
+	
+	public class DataItemRendererFactoryForColumnData implements IBead, IDataProviderItemRendererMapper
+	{
+		public function DataItemRendererFactoryForColumnData()
+		{
+		}
+		
+		private var selectionModel:ISelectionModel;
+		
+		private var _strand:IStrand;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			selectionModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
+			var listView:IListView = value.getBeadByType(IListView) as IListView;
+			dataGroup = listView.dataGroup;
+			selectionModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+			
+			if (!itemRendererFactory)
+			{
+				_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
+				_strand.addBead(_itemRendererFactory);
+			}
+			
+			dataProviderChangeHandler(null);
+		}
+		
+		public var _itemRendererFactory:IItemRendererClassFactory;
+		
+		public function get itemRendererFactory():IItemRendererClassFactory
+		{
+			return _itemRendererFactory
+		}
+		
+		public function set itemRendererFactory(value:IItemRendererClassFactory):void
+		{
+			_itemRendererFactory = value;
+		}
+		
+		protected var dataGroup:IItemRendererParent;
+		
+		private function dataProviderChangeHandler(event:Event):void
+		{
+			var dp:Array = selectionModel.dataProvider as Array;
+			if (!dp)
+				return;
+			
+			dataGroup.removeAllElements();
+			
+			var view:DataGridColumnView = _strand.getBeadByType(IBeadView) as DataGridColumnView;
+			if (view == null) return;
+			
+			var n:int = dp.length; 
+			for (var i:int = 0; i < n; i++)
+			{
+				
+				var tf:ITextItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ITextItemRenderer;
+				tf.index = i;
+				dataGroup.addElement(tf);
+				tf.text = dp[i][view.labelField];
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DownArrowButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DownArrowButtonView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DownArrowButtonView.as
new file mode 100644
index 0000000..9a241f9
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DownArrowButtonView.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.beads
+{
+	import flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+
+	import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.IBeadView;
+	
+	public class DownArrowButtonView implements IBeadView
+	{
+		public function DownArrowButtonView()
+		{
+			upView = new Shape();
+			downView = new Shape();
+			overView = new Shape();
+
+			drawView(upView.graphics, 0xCCCCCC);
+			drawView(downView.graphics, 0x808080);
+			drawView(overView.graphics, 0xEEEEEE);
+		}
+		
+		private function drawView(g:Graphics, bgColor:uint):void
+		{
+			g.lineStyle(1);
+			g.beginFill(bgColor);
+			g.drawRect(0, 0, 16, 16);
+			g.endFill();
+			g.lineStyle(0);
+			g.beginFill(0);
+			g.moveTo(4, 4);
+			g.lineTo(12, 4);
+			g.lineTo(8, 12);
+			g.lineTo(4, 4);
+			g.endFill();
+		}
+		
+		private var _strand:IStrand;
+		
+		private var shape:Shape;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			shape = new Shape();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, 16, 16);
+			shape.graphics.endFill();
+			SimpleButton(value).upState = upView;
+			SimpleButton(value).downState = downView;
+			SimpleButton(value).overState = overView;
+			SimpleButton(value).hitTestState = shape;
+		}
+				
+		private var upView:Shape;
+		private var downView:Shape;
+		private var overView:Shape;
+        
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DropDownListView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DropDownListView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DropDownListView.as
new file mode 100644
index 0000000..59954ed
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/DropDownListView.as
@@ -0,0 +1,223 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	import flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.text.TextFieldType;
+	
+	import org.apache.flex.core.CSSTextField;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IPopUpHost;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IPopUpHost;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+
+	public class DropDownListView implements IDropDownListView, IBeadView
+	{
+		public function DropDownListView()
+		{
+            upSprite = new Sprite();
+            downSprite = new Sprite();
+            overSprite = new Sprite();
+			upTextField = new CSSTextField();
+			downTextField = new CSSTextField();
+			overTextField = new CSSTextField();
+            upSprite.addChild(upTextField);
+            overSprite.addChild(overTextField);
+            downSprite.addChild(downTextField);
+			upTextField.border = true;
+			downTextField.border = true;
+			overTextField.border = true;
+			upTextField.background = true;
+			downTextField.background = true;
+			overTextField.background = true;
+			upTextField.borderColor = 0;
+			downTextField.borderColor = 0;
+			overTextField.borderColor = 0;
+			upTextField.backgroundColor = 0xEEEEEE;
+			downTextField.backgroundColor = 0x808080;
+			overTextField.backgroundColor = 0xFFFFFF;
+			upTextField.selectable = false;
+			upTextField.type = TextFieldType.DYNAMIC;
+			downTextField.selectable = false;
+			downTextField.type = TextFieldType.DYNAMIC;
+			overTextField.selectable = false;
+			overTextField.type = TextFieldType.DYNAMIC;
+			//upTextField.autoSize = "left";
+			//downTextField.autoSize = "left";
+			//overTextField.autoSize = "left";
+            
+            upArrows = new Shape();
+            overArrows = new Shape();
+            downArrows = new Shape();
+            upSprite.addChild(upArrows);
+			overSprite.addChild(overArrows);
+			downSprite.addChild(downArrows);
+            drawArrows(upArrows, 0xEEEEEE);
+            drawArrows(overArrows, 0xFFFFFF);
+            drawArrows(downArrows, 0x808080);
+
+		}
+
+        private function drawArrows(shape:Shape, color:uint):void
+        {
+            var g:Graphics = shape.graphics;
+            g.beginFill(color);
+            g.drawRect(0, 0, 16, 17);
+            g.endFill();
+            g.beginFill(0);
+            g.moveTo(8, 2);
+            g.lineTo(12, 6);
+            g.lineTo(4, 6);
+            g.lineTo(8, 2);
+            g.endFill();
+            g.beginFill(0);
+            g.moveTo(8, 14);
+            g.lineTo(12, 10);
+            g.lineTo(4, 10);
+            g.lineTo(8, 14);
+            g.endFill();
+            g.lineStyle(1, 0);
+            g.drawRect(0, 0, 16, 17);
+        }
+        
+		private var selectionModel:ISelectionModel;
+		
+		private var _strand:IStrand;
+		
+		private var shape:Shape;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+            selectionModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
+            selectionModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
+			shape = new Shape();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, 10, 10);
+			shape.graphics.endFill();
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
+			SimpleButton(value).hitTestState = shape;
+			if (selectionModel.selectedIndex !== -1)
+				text = selectionModel.selectedItem.toString();
+            IEventDispatcher(value).addEventListener("heightChanged", changeHandler);
+            IEventDispatcher(value).addEventListener("widthChanged", changeHandler);
+			changeHandler(null);
+		}
+		
+		private function selectionChangeHandler(event:Event):void
+		{
+			text = selectionModel.selectedItem.toString();
+		}
+		
+        private function changeHandler(event:Event):void
+        {
+            var ww:Number = DisplayObject(_strand).width;
+            var hh:Number = DisplayObject(_strand).height;
+            upArrows.x = ww - upArrows.width;            
+            overArrows.x = ww - overArrows.width;            
+            downArrows.x = ww - downArrows.width;
+			upTextField.width = upArrows.x;
+			downTextField.width = downArrows.x;
+			overTextField.width = overArrows.x;
+			upTextField.height = hh;
+			downTextField.height = hh;
+			overTextField.height = hh;
+			shape.graphics.clear();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, ww, hh);
+			shape.graphics.endFill();
+        }
+        
+		private var upTextField:CSSTextField;
+		private var downTextField:CSSTextField;
+		private var overTextField:CSSTextField;
+        private var upSprite:Sprite;
+        private var downSprite:Sprite;
+        private var overSprite:Sprite;
+        private var upArrows:Shape;
+        private var downArrows:Shape;
+        private var overArrows:Shape;
+		
+		public function get text():String
+		{
+			return upTextField.text;
+		}
+        
+		public function set text(value:String):void
+		{
+            var ww:Number = DisplayObject(_strand).width;
+            var hh:Number = DisplayObject(_strand).height;
+			upTextField.text = value;
+			downTextField.text = value;
+			overTextField.text = value;
+			
+		}
+		
+        private var _popUp:IStrand;
+        public function get popUp():IStrand
+        {
+            return _popUp;
+        }
+        
+        private var _popUpVisible:Boolean;
+        
+        public function get popUpVisible():Boolean
+        {
+            return _popUpVisible;
+        }
+        
+        public function set popUpVisible(value:Boolean):void
+        {
+            if (value != _popUpVisible)
+            {
+                _popUpVisible = value;
+                if (value)
+                {
+                    if (!_popUp)
+                    {
+                        var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
+                        _popUp = new popUpClass() as IStrand;
+                    }
+					var root:Object = DisplayObject(_strand).root;
+					var host:DisplayObjectContainer = DisplayObject(_strand).parent;
+                    while (host && !(host is IPopUpHost))
+                        host = host.parent;
+                    if (host)
+                        IPopUpHost(host).addElement(popUp);
+                }
+                else
+                {
+                    DisplayObject(_popUp).parent.removeChild(_popUp as DisplayObject);                    
+                }
+            }
+        }
+        
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBackgroundBead.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBackgroundBead.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBackgroundBead.as
new file mode 100644
index 0000000..f73da26
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBackgroundBead.as
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+
+	public interface IBackgroundBead extends IBead
+	{
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBorderBead.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBorderBead.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBorderBead.as
new file mode 100644
index 0000000..813be04
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IBorderBead.as
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+
+	public interface IBorderBead extends IBead
+	{
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IComboBoxView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IComboBoxView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IComboBoxView.as
new file mode 100644
index 0000000..e3866fc
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IComboBoxView.as
@@ -0,0 +1,37 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.IStrand;
+    
+	public interface IComboBoxView extends IBeadView
+	{
+		function get text():String;
+		function set text(value:String):void;
+		
+		function get html():String;
+		function set html(value:String):void;
+		
+		function get popUp():IStrand;
+		
+		function get popUpVisible():Boolean;
+		function set popUpVisible(value:Boolean):void;
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataGridView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataGridView.as
new file mode 100644
index 0000000..17afcd5
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataGridView.as
@@ -0,0 +1,27 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBeadView;
+	
+	public interface IDataGridView extends IBeadView
+	{
+		
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataProviderItemRendererMapper.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataProviderItemRendererMapper.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataProviderItemRendererMapper.as
new file mode 100644
index 0000000..8a83d82
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDataProviderItemRendererMapper.as
@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IItemRendererClassFactory;
+
+    /**
+     * Classes that generate ItemRenderers based on dataProvider contents.
+     * These classes use an IItemRendererFactory to generate the actual
+     * ItemRenderer instances
+     */
+	public interface IDataProviderItemRendererMapper extends IBead
+	{
+        function get itemRendererFactory():IItemRendererClassFactory;
+        function set itemRendererFactory(value:IItemRendererClassFactory):void;
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDropDownListView.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDropDownListView.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDropDownListView.as
new file mode 100644
index 0000000..b90b00c
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IDropDownListView.as
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.IStrand;
+
+	public interface IDropDownListView extends IBeadView
+	{
+        function get popUp():IStrand;
+        
+        function get popUpVisible():Boolean;
+        function set popUpVisible(value:Boolean):void;
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/66246d8a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IGraphicsDrawing.as
----------------------------------------------------------------------
diff --git a/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IGraphicsDrawing.as b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IGraphicsDrawing.as
new file mode 100644
index 0000000..dc1ca3d
--- /dev/null
+++ b/frameworks/as/projects/FlexJSUI/src/org/apache/flex/html/staticControls/beads/IGraphicsDrawing.as
@@ -0,0 +1,25 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	public interface IGraphicsDrawing
+	{
+		
+	}
+}
\ No newline at end of file