You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by cd...@apache.org on 2016/11/05 15:22:17 UTC

[11/54] [abbrv] git commit: [flex-asjs] [refs/heads/feature-autobuild/example-maven-dirs] - try to copy HTML to Basic without losing history

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
new file mode 100644
index 0000000..3150e7a
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextButtonView.as
@@ -0,0 +1,350 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.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.BeadViewBase;
+	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.html.TextButton;
+	import org.apache.flex.utils.CSSUtils;
+    import org.apache.flex.utils.SolidBorderUtil;
+    import org.apache.flex.utils.StringTrimmer;
+
+    /**
+     *  The CSSTextButtonView class is the default view for
+     *  the org.apache.flex.html.TextButton class.
+     *  It allows the look of the button to be expressed
+     *  in CSS via the background-image style and displays
+     *  a text label.  This view does not support right-to-left
+     *  text.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSTextButtonView extends BeadViewBase implements IBeadView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		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 shape:Shape;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		override 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();
+            upTextField.styleParent = _strand;
+            downTextField.styleParent = _strand;
+            overTextField.styleParent = _strand;
+            upTextField.parentDrawsBackground = true;
+            downTextField.parentDrawsBackground = true;
+            overTextField.parentDrawsBackground = true;
+            upTextField.parentHandlesPadding = true;
+            downTextField.parentHandlesPadding = true;
+            overTextField.parentHandlesPadding = true;
+			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;
+
+            setupSkins();
+			
+			IEventDispatcher(_strand).addEventListener("widthChanged",sizeChangeHandler);
+			IEventDispatcher(_strand).addEventListener("heightChanged",sizeChangeHandler);
+            IEventDispatcher(_strand).addEventListener("sizeChanged",sizeChangeHandler);
+		}
+	
+        protected function setupSkins():void
+        {
+            setupSkin(overSprite, overTextField, "hover");
+            setupSkin(downSprite, downTextField, "active");
+            setupSkin(upSprite, upTextField);
+            updateHitArea();
+        }
+        
+		private function setupSkin(sprite:Sprite, textField:TextField, state:String = null):void
+		{
+			var sw:uint = DisplayObject(_strand).width;
+			var sh:uint = DisplayObject(_strand).height;
+			
+			textField.defaultTextFormat.leftMargin = 0;
+			textField.defaultTextFormat.rightMargin = 0;
+            // set it again so it gets noticed
+			textField.defaultTextFormat = textField.defaultTextFormat;
+            
+			var borderColor:uint;
+			var borderThickness:uint;
+			var borderStyle:String;
+			var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
+			if (borderStyles is Array)
+			{
+				borderColor = CSSUtils.toColor(borderStyles[2]);
+				borderStyle = borderStyles[1];
+				borderThickness = borderStyles[0];
+			}
+            else if (borderStyles is String)
+                borderStyle = borderStyles as String;
+			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 = CSSUtils.toColor(value);
+			value = ValuesManager.valuesImpl.getValue(_strand, "border-width", state);
+			if (value != null)
+				borderThickness = value as uint;
+            if (borderStyle == "none")
+            {
+                borderStyle = "solid";
+                borderThickness = 0;
+            }
+            
+            var borderRadius:String;
+            var borderEllipseWidth:Number = NaN;
+            var borderEllipseHeight:Number = NaN;
+            value = ValuesManager.valuesImpl.getValue(_strand, "border-radius", state);
+            if (value != null)
+            {
+                if (value is Number)
+                    borderEllipseWidth = 2 * (value as Number);
+                else
+                {
+                    borderRadius = value as String;
+                    var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/");
+                    borderEllipseWidth = 2 * CSSUtils.toNumber(arr[0]);
+                    if (arr.length > 1)
+                        borderEllipseHeight = 2 * CSSUtils.toNumber(arr[1]);
+                } 
+            }
+
+			var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
+			var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-left", state);
+			var paddingRight:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-right", state);
+			var paddingTop:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-top", state);
+			var paddingBottom:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-bottom", state);
+            var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, DisplayObject(_strand).width);
+            var pr:Number = CSSUtils.getRightValue(paddingRight, padding, DisplayObject(_strand).width);
+            var pt:Number = CSSUtils.getTopValue(paddingTop, padding, DisplayObject(_strand).height);
+            var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, DisplayObject(_strand).height);
+            
+			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color", state);
+            var bgColor:uint;
+            var bgAlpha:Number = 1;
+            if (backgroundColor != null)
+            {
+                bgColor = CSSUtils.toColorWithAlpha(backgroundColor);
+				if (bgColor == uint.MAX_VALUE) {
+					bgAlpha = 0
+				}
+				else if (bgColor & 0xFF000000)
+                {
+                    bgAlpha = bgColor >>> 24 / 255;
+                    bgColor = bgColor & 0xFFFFFF;
+                }
+            }
+			if (borderStyle == "solid")
+			{
+				var useWidth:Number = Math.max(sw,textField.textWidth);
+				var useHeight:Number = Math.max(sh,textField.textHeight);
+				
+				if ((useWidth-pl-pr-2*borderThickness) < textField.textWidth) 
+					useWidth = textField.textWidth+pl+pr+2*borderThickness;
+				if ((useHeight-pt-pb-2*borderThickness) < textField.textHeight) 
+					useHeight = textField.textHeight+pt+pb+2*borderThickness;
+				
+                sprite.graphics.clear();
+				SolidBorderUtil.drawBorder(sprite.graphics, 
+					0, 0, useWidth, useHeight,
+					borderColor, backgroundColor == null ? null : bgColor, borderThickness, bgAlpha,
+                    borderEllipseWidth, borderEllipseHeight);
+				textField.y = ((useHeight - textField.textHeight) / 2) - 2;
+				textField.x = ((useWidth - textField.textWidth) / 2) - 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 { 
+					var useWidth:Number = Math.max(sw,textField.textWidth);
+					var useHeight:Number = Math.max(sh,textField.textHeight);
+					
+					if ((useWidth-2*Number(padding)-2*borderThickness) < textField.textWidth) 
+						useWidth = textField.textWidth+2*Number(padding)+2*borderThickness;
+					if ((useHeight-2*Number(padding)-2*borderThickness) < textField.textHeight) 
+						useHeight = textField.textHeight+2*Number(padding)+2*borderThickness;
+					
+					textField.y = (useHeight - textField.height) / 2;
+					textField.x = (useWidth - textField.width) / 2;
+					updateHitArea();
+				});
+			}
+			var textColor:Object = ValuesManager.valuesImpl.getValue(_strand, "color", state);
+			if (textColor) {
+				textField.textColor = Number(textColor);
+			}
+		}
+				
+		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
+		{
+			setupSkins();
+		}
+		
+		private var upTextField:CSSTextField;
+		private var downTextField:CSSTextField;
+		private var overTextField:CSSTextField;
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+		
+        /**
+         *  The text to be displayed in the button
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get text():String
+		{
+			return upTextField.text;
+		}
+        
+        /**
+         *  @private
+         */
+		public function set text(value:String):void
+		{
+			upTextField.text = value;
+			downTextField.text = value;
+			overTextField.text = value;
+			updateHitArea();
+		}
+		
+		private function updateHitArea():void
+		{
+			var useWidth:uint = Math.max(DisplayObject(_strand).width, upTextField.textWidth);
+			var useHeight:uint = Math.max(DisplayObject(_strand).height, upTextField.textHeight);
+			
+			shape.graphics.clear();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, useWidth, useHeight);
+			shape.graphics.endFill();
+			
+		}
+		
+        /**
+         *  The html-formatted text to be displayed in the button
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get html():String
+		{
+			return upTextField.htmlText;
+		}
+		
+        /**
+         *  @private
+         */
+		public function set html(value:String):void
+		{
+			upTextField.htmlText = value;
+			downTextField.htmlText = value;
+			overTextField.htmlText = value;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextToggleButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextToggleButtonView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextToggleButtonView.as
new file mode 100644
index 0000000..7de01ef
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CSSTextToggleButtonView.as
@@ -0,0 +1,105 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	
+    import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.IStyleableObject;
+	import org.apache.flex.core.IToggleButtonModel;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+
+    /**
+     *  The CSSTextToggleButtonView class is the default view for
+     *  the org.apache.flex.html.TextToggleButton class.
+     *  It allows the look of the button to be expressed
+     *  in CSS via the background-image style and displays
+     *  a text label.  This view does not support right-to-left
+     *  text.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSTextToggleButtonView extends CSSTextButtonView
+	{
+        /**
+         *  The suffix appended to the className when selected.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public static const SELECTED:String = "_Selected";
+        
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CSSTextToggleButtonView()
+		{
+		}
+		
+		private var toggleButtonModel:IToggleButtonModel;
+		
+        private var _selected:Boolean;
+        
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		override public function set strand(value:IStrand):void
+		{
+            super.strand = value;
+            
+			toggleButtonModel = value.getBeadByType(IToggleButtonModel) as IToggleButtonModel;
+            toggleButtonModel.addEventListener("selectedChange", selectedChangeHandler);
+		}
+	
+		private function selectedChangeHandler(event:org.apache.flex.events.Event):void
+		{
+            var className:String = IStyleableObject(_strand).className;
+            if (toggleButtonModel.selected)
+            {
+                if (className.indexOf(SELECTED) == className.length - SELECTED.length)
+                    IStyleableObject(_strand).className = className.substring(0, className.length - SELECTED.length);
+                setupSkins();
+            }
+            else
+            {
+                if (className.indexOf(SELECTED) == -1)
+                    IStyleableObject(_strand).className += SELECTED;
+                setupSkins();                
+            }
+		}
+		
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CheckBoxView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CheckBoxView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CheckBoxView.as
new file mode 100644
index 0000000..a04f2bf
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CheckBoxView.as
@@ -0,0 +1,296 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.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.BeadViewBase;
+	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;
+	
+    /**
+     *  The CheckBoxView class is the default view for
+     *  the org.apache.flex.html.CheckBox class.
+     *  It displays a simple checkbox with an 'x' if checked,
+     *  and a label on the right.  There are no styles or
+     *  properties to configure the look of the 'x' or the
+     *  position of the label relative to the checkbox as
+     *  there are no equivalents in the standard HTML checkbox.
+     * 
+     *  A more complex CheckBox could implement more view
+     *  configuration.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CheckBoxView extends BeadViewBase implements IBeadView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		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;
+
+        // TODO: Can we remove this?
+		private function get toggleButtonModel() : IToggleButtonModel
+		{
+			return _toggleButtonModel;
+		}
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		override public function set strand(value:IStrand):void
+		{
+			super.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(0,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;
+		}
+		
+        /**
+         *  @copy org.apache.flex.html.Label#text
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get text():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.text;
+		}
+		
+        /**
+         *  @private
+         */
+		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();
+		}
+		
+        /**
+         *  @copy org.apache.flex.html.Label#html
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get html():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.htmlText;
+		}
+		
+        /**
+         *  @private
+         */
+		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;
+		
+        /**
+         *  @copy org.apache.flex.core.IToggleButtonModel#selected
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get selected():Boolean
+		{
+			return _selected;
+		}
+		
+        /**
+         *  @private
+         */
+		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;
+		}
+		
+        /**
+         *  Display the icon and text label
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		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;
+			}
+			
+		}
+		
+        /**
+         *  Draw the checkbox
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		protected function drawCheckBox(icon:Shape) : void
+		{
+			icon.graphics.clear();
+			icon.graphics.beginFill(0xf8f8f8);
+			icon.graphics.lineStyle(1,0x808080);
+			icon.graphics.drawRect(0,0,10,10);
+			icon.graphics.endFill();
+			
+			if( _toggleButtonModel.selected ) {
+                icon.graphics.lineStyle(2,0);
+				icon.graphics.moveTo(3,4);
+				icon.graphics.lineTo(5,7);
+				icon.graphics.lineTo(9,0);
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CloseButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CloseButtonView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CloseButtonView.as
new file mode 100644
index 0000000..7d3fb19
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/CloseButtonView.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	
+	import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.html.Button;
+	import org.apache.flex.html.TitleBar;
+	
+    /**
+     *  The CloseButtonView class is the view for
+     *  the down arrow button in a ScrollBar and other controls.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CloseButtonView extends BeadViewBase implements IBeadView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CloseButtonView()
+		{
+			upView = new Shape();
+			downView = new Shape();
+			overView = new Shape();
+
+			drawView(upView.graphics, 0xCCCCCC);
+			drawView(downView.graphics, 0x666666);
+			drawView(overView.graphics, 0x999999);
+		}
+		
+		private function drawView(g:Graphics, bgColor:uint):void
+		{
+			g.beginFill(bgColor);
+			g.drawRect(0, 0, 11, 11);
+			g.endFill();
+            g.lineStyle(2);
+            g.moveTo(3,3);
+            g.lineTo(8,8);
+            g.moveTo(3,8);
+            g.lineTo(8,3);
+		}
+		
+		private var shape:Shape;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			shape = new Shape();
+			shape.graphics.beginFill(0xCCCCCC);
+			shape.graphics.drawRect(0, 0, 11, 11);
+			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;
+        
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
new file mode 100644
index 0000000..e725517
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ComboBoxView.as
@@ -0,0 +1,247 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import flash.display.DisplayObject;
+	import flash.display.DisplayObjectContainer;
+	import flash.display.Sprite;
+	
+    import org.apache.flex.core.BeadViewBase;
+	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.Button;
+	import org.apache.flex.html.TextInput;
+	
+	/**
+	 *  The ComboBoxView class creates the visual elements of the org.apache.flex.html.ComboBox 
+	 *  component. The job of the view bead is to put together the parts of the ComboBox such as the TextInput
+	 *  control and org.apache.flex.html.Button to trigger the pop-up.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class ComboBoxView extends BeadViewBase implements IBeadView, IComboBoxView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function ComboBoxView()
+		{
+		}
+		
+		private var textInput:TextInput;
+		private var button:Button;
+		private var selectionModel:IComboBoxModel;
+		
+		/**
+		 *  The value of the TextInput component of the ComboBox.
+		 * 
+		 *  @copy org.apache.flex.html.beads.IComboBoxView#text
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get text():String
+		{
+			return textInput.text;
+		}
+		public function set text(value:String):void
+		{
+			textInput.text = value;
+		}
+		
+		/**
+		 *  The HTML value of the TextInput component of the ComboBox.
+		 * 
+		 *  @copy org.apache.flex.html.beads.IComboBoxView#html
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get html():String
+		{
+			return textInput.html;
+		}
+		public function set html(value:String):void
+		{
+			textInput.html = value;
+		}
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get strand():IStrand
+		{
+			return _strand;
+		}
+		override public function set strand(value:IStrand):void
+		{
+			super.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();
+            button.upState = upSprite;
+            button.overState = overSprite;
+            button.downState = 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
+		 */
+		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;
+		
+		/**
+		 *  The pop-up component that holds the selection list.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get popUp():IStrand
+		{
+			return _popUp;
+		}
+		
+		private var _popUpVisible:Boolean;
+		
+		/**
+		 *  This property is true if the pop-up selection list is currently visible.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		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
+		 */
+		private function selectionChangeHandler(event:Event):void
+		{
+			text = selectionModel.selectedItem.toString();
+		}
+		
+		/**
+		 * @private
+		 */
+		private function textChangeHandler(event:Event):void
+		{	
+			var newEvent:Event = new Event("change");
+			IEventDispatcher(strand).dispatchEvent(newEvent);
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
new file mode 100644
index 0000000..0c6696a
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ContainerView.as
@@ -0,0 +1,553 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{		
+	import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.ContainerBase;
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IContainer;
+	import org.apache.flex.core.IContainerView;
+	import org.apache.flex.core.IContentViewHost;
+	import org.apache.flex.core.ILayoutChild;
+	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.IViewport;
+	import org.apache.flex.core.IViewportModel;
+	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.geom.Rectangle;
+    import org.apache.flex.geom.Size;
+	import org.apache.flex.html.beads.models.ViewportModel;
+	import org.apache.flex.html.supportClasses.Border;
+	import org.apache.flex.html.supportClasses.ContainerContentArea;
+	import org.apache.flex.html.supportClasses.Viewport;
+	import org.apache.flex.utils.CSSContainerUtils;
+    
+	/**
+	 * This class creates and manages the contents of a Container. On the ActionScript
+	 * side, a Container has a contentView into which the offical children can be
+	 * placed. When adding an element that implements IChrome, that element is not
+	 * placed into the contentView, but is made a child of the Container directly.
+	 * 
+	 * Containers also have a layout associated with them which controls the size and
+	 * placement of the elements in the contentView. When a Container does not have an
+	 * explicit size (including a percent size), the content dictates the size of the
+	 * Container.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+	 */
+	public class ContainerView extends BeadViewBase implements IBeadView, IContainerView, ILayoutHost
+	{
+		/**
+     	 *  The ContainerView class is the default view for
+         *  the org.apache.flex.core.ContainerBase classes.
+         *  It lets you use some CSS styles to manage the border, background
+         *  and padding around the content area.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function ContainerView()
+		{
+			super();
+			
+			layoutRunning = false;
+		}
+		
+		/**
+		 * The sub-element used as the parent of the container's elements. This does not
+		 * include the chrome elements.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get contentView():IParentIUIBase
+		{
+			return viewport.contentView as IParentIUIBase;
+		}
+		
+		/**
+		 * The view that can be resized.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get resizableView():IUIBase
+		{
+			return host;
+		}
+		
+		/**
+		 * The viewport used to present the content and may display
+		 * scroll bars (depending on the actual type of viewport).
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function get viewport():IViewport
+		{
+			return _viewport;
+		}
+		
+		/**
+		 * The data model used by the viewport to determine how it should
+		 * present the content area.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get viewportModel():IViewportModel
+		{
+			return _viewportModel;
+		}
+		
+		private var _viewportModel:IViewportModel;
+		private var _viewport:IViewport;
+		private var layoutRunning:Boolean;
+		
+		/**
+		 * @private
+		 */
+		public function addElement(c:Object, dispatchEvent:Boolean = true):void
+		{
+			contentView.addElement(c, dispatchEvent);
+		}
+		
+		/**
+		 * @private
+		 */
+		public function addElementAt(c:Object, index:int, dispatchEvent:Boolean = true):void
+		{
+			contentView.addElementAt(c, index, dispatchEvent);
+		}
+		
+		/**
+		 * @private
+		 */
+		public function getElementIndex(c:Object):int
+		{
+			return contentView.getElementIndex(c);
+		}
+		
+		/**
+		 * @private
+		 */
+		public function removeElement(c:Object, dispatchEvent:Boolean = true):void
+		{
+			contentView.removeElement(c, dispatchEvent);
+		}
+		
+		/**
+		 * @private
+		 */
+		public function get numElements():int
+		{
+			return contentView.numElements;
+		}
+		
+		/**
+		 * @private
+		 */
+		public function getElementAt(index:int):Object
+		{
+			return contentView.getElementAt(index);
+		}
+		
+		/**
+		 * Strand setter.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			super.strand = value;
+			
+            createViewport();
+			
+			(host as IContentViewHost).strandChildren.addElement(viewport.contentView, false);
+			
+			displayBackgroundAndBorder(host as UIBase);
+			
+			// listen for initComplete to signal that the strand is set with its size
+			// and beads.
+			host.addEventListener("initComplete", initCompleteHandler);
+		}
+		
+		/**
+		 * Handles the initComplete event by completing the setup and kicking off the
+		 * presentation of the Container.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function initCompleteHandler(event:Event):void
+		{
+            var ilc:ILayoutChild = host as ILayoutChild;
+			// Complete the setup if the height is sized to content or has been explicitly set
+            // and the width is sized to content or has been explicitly set
+			if ((ilc.isHeightSizedToContent() || !isNaN(ilc.explicitHeight)) &&
+                (ilc.isWidthSizedToContent() || !isNaN(ilc.explicitWidth))) {
+				completeSetup();
+				
+				var num:Number = contentView.numElements;
+				if (num > 0) performLayout(event);
+			}
+			else {
+				// otherwise, wait until the unknown sizes have been set and then finish
+				host.addEventListener("sizeChanged", deferredSizeHandler);
+                host.addEventListener("widthChanged", deferredSizeHandler);
+                host.addEventListener("heightChanged", deferredSizeHandler);
+			}
+		}
+		
+		/**
+		 * Handles the case where the size of the host is not immediately known, usually do
+		 * to one of its dimensions being indicated as a percent size.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		private function deferredSizeHandler(event:Event):void
+		{
+            host.removeEventListener("sizeChanged", deferredSizeHandler);
+            host.removeEventListener("widthChanged", deferredSizeHandler);
+            host.removeEventListener("heightChanged", deferredSizeHandler);
+			completeSetup();
+			
+			var num:Number = contentView.numElements;
+			if (num > 0) 
+            {
+                performLayout(event);
+            }
+		}
+		
+		/**
+		 * Called when the host is ready to complete its setup (usually after its size has been
+		 * determined).
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function completeSetup():void
+		{
+			// when the first layout is complete, set up listeners for changes
+			// to the childrens' sizes.
+			host.addEventListener("layoutComplete", childrenChangedHandler);
+			
+			host.addEventListener("childrenAdded", performLayout);
+			host.addEventListener("layoutNeeded", performLayout);
+			host.addEventListener("widthChanged", resizeHandler);
+			host.addEventListener("heightChanged", resizeHandler);
+			host.addEventListener("sizeChanged", resizeHandler);
+			host.addEventListener("viewCreated", viewCreatedHandler);
+		}
+		
+		/**
+		 * Handles the viewCreated event by performing the first layout if
+		 * there are children already present (ie, from MXML).
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function viewCreatedHandler(event:Event):void
+		{			
+			if ((host as UIBase).numElements > 0) {
+				performLayout(null);
+			}
+		}
+		
+        /**
+         * Calculate the space taken up by non-content children like a TItleBar in a Panel.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected function getChromeMetrics():Rectangle
+        {
+            return new Rectangle(0, 0, 0, 0);
+        }
+        
+		/**
+		 * Creates the Viewport (or ScrollableViewport) through which the content
+		 * area is presented.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function createViewport():void
+		{
+            var c:Class;
+			if (viewportModel == null) {
+                _viewportModel = _strand.getBeadByType(IViewportModel) as IViewportModel;
+                if (viewportModel == null) {
+                    c = ValuesManager.valuesImpl.getValue(host, "iViewportModel");
+                    if (c)
+                    {
+                        _viewportModel = new c() as IViewportModel;
+                        _strand.addBead(_viewportModel);
+                    }
+                }
+			}
+			
+			if (viewport == null) {
+				_viewport = _strand.getBeadByType(IViewport) as IViewport;
+				if (viewport == null) {
+					c = ValuesManager.valuesImpl.getValue(host, "iViewport");
+					if (c)
+					{
+						_viewport = new c() as IViewport;
+						_strand.addBead(viewport);
+					}
+				}
+			}			
+		}
+		
+		/**
+		 *  Positions the viewport, then sets any known sizes of the Viewport prior
+         *  to laying out its content.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function layoutViewBeforeContentLayout():void
+		{
+            var host:ILayoutChild = this.host as ILayoutChild;
+            var vm:IViewportModel = viewportModel;
+            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
+            vm.chromeMetrics = getChromeMetrics();
+            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
+                                 vm.borderMetrics.top + vm.chromeMetrics.top)
+            viewport.layoutViewportBeforeContentLayout(
+                !host.isWidthSizedToContent() ? 
+			        host.width - vm.borderMetrics.left - vm.borderMetrics.right -
+                        vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
+                !host.isHeightSizedToContent() ? 
+                    host.height - vm.borderMetrics.top - vm.borderMetrics.bottom -
+                        vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
+			
+		}
+		
+		/**
+		 * Executes the layout associated with this container. Once the layout has been
+		 * run, it may affect the size of the host or may cause the host to present scroll
+		 * bars view its viewport.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function performLayout(event:Event):void
+		{
+			layoutRunning = true;
+			
+			layoutViewBeforeContentLayout();
+			
+			var host:UIBase = _strand as UIBase;
+			
+			var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
+			if (layout == null) {
+				var c:Class = ValuesManager.valuesImpl.getValue(host, "iBeadLayout");
+				if (c) {
+					layout = new c() as IBeadLayout;
+					_strand.addBead(layout);
+				}
+			}
+			
+			if (layout) {
+				layout.layout();
+			}
+			
+			layoutViewAfterContentLayout();
+			
+			layoutRunning = false;
+		}
+		
+		/**
+		 * @private
+		 */
+		private var adjusting:Boolean = false;
+
+		/**
+		 * Adjusts the size of the host, or adds scrollbars to the viewport, after
+		 * the layout has been run.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function layoutViewAfterContentLayout():void
+		{
+			var host:UIBase = _strand as UIBase;
+            var vm:IViewportModel = viewportModel;
+            
+			adjusting = true;
+			
+            var viewportSize:Size = viewport.layoutViewportAfterContentLayout();
+            
+			if (host.isWidthSizedToContent() && host.isHeightSizedToContent()) {					
+				host.setWidthAndHeight(viewportSize.width + vm.borderMetrics.left + vm.borderMetrics.right +
+                                           vm.chromeMetrics.left + vm.chromeMetrics.right, 
+					                   viewportSize.height + vm.borderMetrics.top + vm.borderMetrics.bottom +
+                                           vm.chromeMetrics.top + vm.chromeMetrics.bottom,
+                                       false);
+			}
+			else if (!host.isWidthSizedToContent() && host.isHeightSizedToContent())
+			{
+				host.setHeight(viewportSize.height + vm.borderMetrics.top + vm.borderMetrics.bottom +
+                    vm.chromeMetrics.top + vm.chromeMetrics.bottom, false);
+			}
+			else if (host.isWidthSizedToContent() && !host.isHeightSizedToContent())
+			{
+				host.setWidth(viewportSize.width + vm.borderMetrics.left + vm.borderMetrics.right +
+                    vm.chromeMetrics.left + vm.chromeMetrics.right, false);
+			}			
+			adjusting = false;
+		}
+		
+		/**
+		 * Handles dynamic changes to the host's size by running the layout once
+		 * the viewport has been adjusted.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function resizeHandler(event:Event):void
+		{
+			if (!adjusting) {
+				performLayout(event);
+			}
+		}
+		
+		/**
+		 * Whenever children are added, listeners are added to detect changes
+		 * in their size. 
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function childrenChangedHandler(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+			host.removeEventListener(event.type, childrenChangedHandler);
+			
+			var n:Number = contentView.numElements;
+			for (var i:int=0; i < n; i++) {
+				var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+				child.addEventListener("widthChanged", childResizeHandler);
+				child.addEventListener("heightChanged", childResizeHandler);
+				child.addEventListener("sizeChanged", childResizeHandler);
+			}
+		}
+				
+		/**
+		 * This event handles changes to the size of children of the container by running
+		 * the layout again and adjusting the size of the container or viewport as necessary. 
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		protected function childResizeHandler(event:Event):void
+		{
+			// during this process we don't want the layout to trigger
+			// an endless event chain should any children get resized
+			// by the layout.
+			if (layoutRunning) return;			
+			performLayout(event);
+		}
+		
+		protected function displayBackgroundAndBorder(host:UIBase) : void
+		{
+			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(host, "background-color");
+			var backgroundImage:Object = ValuesManager.valuesImpl.getValue(host, "background-image");
+			if (backgroundColor != null || backgroundImage != null)
+			{
+				if (host.getBeadByType(IBackgroundBead) == null)
+					var c:Class = ValuesManager.valuesImpl.getValue(host, "iBackgroundBead");
+				if (c) {
+					host.addBead( new c() as IBead );
+				}
+			}
+			
+			var borderStyle:String;
+			var borderStyles:Object = ValuesManager.valuesImpl.getValue(host, "border");
+			if (borderStyles is Array)
+			{
+				borderStyle = borderStyles[1];
+			}
+			if (borderStyle == null)
+			{
+				borderStyle = ValuesManager.valuesImpl.getValue(host, "border-style") as String;
+			}
+			if (borderStyle != null && borderStyle != "none")
+			{
+				if (host.getBeadByType(IBorderBead) == null) {
+					c = ValuesManager.valuesImpl.getValue(host, "iBorderBead");
+					if (c) {
+						host.addBead( new c() as IBead );
+					}
+				}
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ControlBarMeasurementBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ControlBarMeasurementBead.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ControlBarMeasurementBead.as
new file mode 100644
index 0000000..18d19dd
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ControlBarMeasurementBead.as
@@ -0,0 +1,116 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.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.Container;
+	
+	/**
+	 *  The ControlBarMeasurementBead class measures the size of a org.apache.flex.html.ControlBar
+	 *  component.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class ControlBarMeasurementBead implements IMeasurementBead
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function ControlBarMeasurementBead()
+		{
+		}
+		
+		/**
+		 *  Returns the overall width of the ControlBar.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		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 container:Container = Container(_strand);
+			var n:int = container.numElements;
+			for(var i:int=0; i < n; i++) {
+				var child:IUIBase = container.getElementAt(i) as IUIBase;
+				if( child == null ) continue;
+				var childMeasure:IMeasurementBead = child.getBeadByType(IMeasurementBead) as IMeasurementBead;
+                if (childMeasure)
+    				mwidth += childMeasure.measuredWidth;
+			}
+			return mwidth;
+		}
+		
+		/**
+		 *  Returns the overall height of the ControlBar.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		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;
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridColumnView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridColumnView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridColumnView.as
new file mode 100644
index 0000000..7efa3ee
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridColumnView.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	
+	/**
+	 *  The DataGridColumnView class extends org.apache.flex.html.beads.ListView and 
+	 *  provides properties to the org.apache.flex.html.List that makes a column in 
+	 *  the org.apache.flex.html.DataGrid.  
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DataGridColumnView extends ListView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function DataGridColumnView()
+		{
+		}
+		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+    	}
+		
+		private var _columnIndex:uint;
+		
+		/**
+		 *  The zero-based index for the column.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get columnIndex():uint
+		{
+			return _columnIndex;
+		}
+		public function set columnIndex(value:uint):void
+		{
+			_columnIndex = value;
+		}
+		
+		private var _column:DataGridColumn;
+		
+		/**
+		 *  The org.apache.flex.html.support.DataGridColumn containing information used to 
+		 *  present the org.apache.flex.html.List as a column in the 
+		 *  org.apache.flex.html.DataGrid.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get column():DataGridColumn
+		{
+			return _column;
+		}
+		public function set column(value:DataGridColumn):void
+		{
+			_column = value;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridLinesBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridLinesBead.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridLinesBead.as
new file mode 100644
index 0000000..951f5f7
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridLinesBead.as
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.collections.ArrayList;
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.IParentIUIBase;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.svg.CompoundGraphic;
+	import org.apache.flex.graphics.IStroke;
+	import org.apache.flex.graphics.SolidColor;
+	import org.apache.flex.graphics.SolidColorStroke;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.beads.models.DataGridPresentationModel;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	
+	/**
+	 * The DataGridLinesBead is an add on bead for the DataGrid. This bead
+	 * adds horizontal and vertical grid lines to a DataGrid. The size and
+	 * color of the lines is specified by the stroke property (defaults to
+	 * a thin dark line). 
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DataGridLinesBead implements IBead
+	{
+		/**
+		 * Constructor. 
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
+		public function DataGridLinesBead()
+		{
+			// Set default separator line stroke.
+			var lineStroke:SolidColorStroke = new SolidColorStroke();
+			lineStroke.color = 0x333333;
+			lineStroke.alpha = 1.0;
+			lineStroke.weight = 1;
+			stroke = lineStroke;
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 * @copy org.apache.flex.core.UIBase#strand
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			_overlay = new CompoundGraphic();
+			
+			IEventDispatcher(_strand).addEventListener("beadsAdded", handleBeadsAdded);
+		}
+		
+		private var _stroke:IStroke;
+		
+		/**
+		 * Describes the line style used to separate the rows and columns.
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
+		public function get stroke():IStroke
+		{
+			return _stroke;
+		}
+		public function set stroke(value:IStroke):void
+		{
+			_stroke = value;
+		}
+		
+		private var _overlay:CompoundGraphic;
+		private var _area:UIBase;
+		
+		/**
+		 * Invoked when all of the beads have been added to the DataGrid. This
+		 * function seeks the Container that parents the lists that are the DataGrid's
+		 * columns. An overlay GraphicContainer is added to this Container so that the
+		 * grid lines will scroll with the rows.
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
+		private function handleBeadsAdded(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+			var n:int = host.numElements;
+			for (var i:int=0; i < n; i++) {
+				var child:UIBase = host.getElementAt(i) as UIBase;
+				if (child.id == "dataGridListArea") {
+					_area = child;
+					_area.addElement(_overlay);
+					break;
+				}
+			}
+			
+			// Now set up listeners to handle changes in the size of the DataGrid.
+			IEventDispatcher(_strand).addEventListener("sizeChanged", drawLines);
+			IEventDispatcher(_strand).addEventListener("widthChanged", drawLines);
+			IEventDispatcher(_strand).addEventListener("heightChanged", drawLines);
+			
+			// Also set up a listener on the model to know when the dataProvider has
+			// changed which might affect the number of rows/columns and thus the
+			// grid lines.
+			var model:IBeadModel = _strand.getBeadByType(IBeadModel) as IBeadModel;
+			IEventDispatcher(model).addEventListener("dataProviderChanged", drawLines);
+		}
+		
+		/**
+		 * This event handler is invoked whenever something happens to the DataGrid. This
+		 * function draws the lines either using a default stroke or the one specified by
+		 * the stroke property.
+	     *  
+	     *  @langversion 3.0
+	     *  @playerversion Flash 10.2
+	     *  @playerversion AIR 2.6
+	     *  @productversion FlexJS 0.0
+		 */
+		private function drawLines(event:Event):void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			var presentationModel:DataGridPresentationModel = _strand.getBeadByType(DataGridPresentationModel) as DataGridPresentationModel;
+			var layoutParent:ILayoutHost = _area.getBeadByType(ILayoutHost) as ILayoutHost;
+			var contentView:IParentIUIBase = layoutParent.contentView as IParentIUIBase;
+			
+			var columns:Array = sharedModel.columns;			
+			var arrayList:ArrayList = sharedModel.dataProvider as ArrayList;
+			var rowHeight:Number = presentationModel.rowHeight;
+			
+			var totalHeight:Number = arrayList.length * rowHeight;
+			var columnWidth:Number = _area.width / columns.length;
+			
+			// translate the stroke to a fill since rectangles are used for the grid
+			// lines and not lines.
+			var lineFill:SolidColor = new SolidColor();
+			var weight:Number = 1;
+			lineFill.color = (stroke as SolidColorStroke).color;
+			lineFill.alpha = (stroke as SolidColorStroke).alpha;
+			weight = (stroke as SolidColorStroke).weight;
+			_overlay.fill = lineFill;
+			
+			columnWidth = (columns[0] as DataGridColumn).columnWidth;
+			var xpos:Number = isNaN(columnWidth) ? _area.width / columns.length : columnWidth;
+			
+			_overlay.clear();
+			
+			// draw the verticals
+			for (var i:int=1; i < columns.length; i++) {
+				_overlay.drawRect(xpos, 0, weight, totalHeight);
+				columnWidth = (columns[i] as DataGridColumn).columnWidth;
+				xpos += isNaN(columnWidth) ? _area.width / columns.length : columnWidth;
+			}
+			
+			var n:int = arrayList.length;
+			
+			// draw the horizontals
+			for (i=1; i < n+1; i++) {
+				_overlay.drawRect(0, i*rowHeight, _area.width, weight);
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
new file mode 100644
index 0000000..8393057
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataGridView.as
@@ -0,0 +1,266 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadModel;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IDataGridModel;
+	import org.apache.flex.core.ISelectableItemRenderer;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	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.DataGridButtonBar;
+	import org.apache.flex.html.Container;
+	import org.apache.flex.html.beads.layouts.ButtonBarLayout;
+	import org.apache.flex.html.beads.layouts.VerticalLayout;
+	import org.apache.flex.html.beads.layouts.HorizontalLayout;
+	import org.apache.flex.html.beads.layouts.IDataGridLayout;
+	import org.apache.flex.html.beads.models.ArraySelectionModel;
+	import org.apache.flex.html.beads.models.DataGridPresentationModel;
+	import org.apache.flex.html.supportClasses.DataGridColumn;
+	import org.apache.flex.html.supportClasses.DataGridColumnList;
+	import org.apache.flex.html.supportClasses.ScrollingViewport;
+	import org.apache.flex.html.supportClasses.Viewport;
+
+	/**
+	 *  The DataGridView class is the visual bead for the org.apache.flex.html.DataGrid.
+	 *  This class constructs the items that make the DataGrid: Lists for each column and a
+	 *  org.apache.flex.html.ButtonBar for the column headers.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DataGridView implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function DataGridView()
+		{
+		}
+
+		private var _strand:IStrand;
+		private var _header:DataGridButtonBar;
+		private var _listArea:Container;
+		
+		private var _lists:Array;
+		
+		/**
+		 * An array of List objects the comprise the columns of the DataGrid.
+		 */
+		public function get columnLists():Array
+		{
+			return _lists;
+		}
+		
+		/**
+		 * The area used to hold the columns
+		 *
+		 */
+		public function get listArea():Container
+		{
+			return _listArea;
+		}
+
+		/**
+		 * @private
+		 */
+		public function get host():IUIBase
+		{
+			return _strand as IUIBase;
+		}
+		
+		/**
+		 * Returns the component used as the header for the DataGrid.
+		 */
+		public function get header():IUIBase
+		{
+			return _header;
+		}
+
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+
+			var host:UIBase = value as UIBase;
+
+			_header = new DataGridButtonBar();
+			_header.id = "dataGridHeader";
+
+			var scrollPort:ScrollingViewport = new ScrollingViewport();
+
+			_listArea = new Container();
+			_listArea.id = "dataGridListArea";
+			_listArea.className = "DataGridListArea";
+			_listArea.addBead(scrollPort);
+			
+			if (_strand.getBeadByType(IBeadLayout) == null) {
+				var c:Class = ValuesManager.valuesImpl.getValue(host, "iBeadLayout");
+				if (c)
+				{
+					var layout:IBeadLayout = new c() as IBeadLayout;
+					_strand.addBead(layout);
+				}
+			}
+
+			finishSetup(null);
+		}
+
+		/**
+		 * @private
+		 */
+		private function finishSetup(event:Event):void
+		{
+			var host:UIBase = _strand as UIBase;
+
+			// see if there is a presentation model already in place. if not, add one.
+			var presentationModel:DataGridPresentationModel = _strand.getBeadByType(DataGridPresentationModel) as DataGridPresentationModel;
+			if (presentationModel == null) {
+				presentationModel = new DataGridPresentationModel();
+				_strand.addBead(presentationModel);
+			}
+
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			IEventDispatcher(sharedModel).addEventListener("dataProviderChanged",handleDataProviderChanged);
+
+			var columnLabels:Array = new Array();
+
+			for(var i:int=0; i < sharedModel.columns.length; i++) {
+				var dgc:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+				columnLabels.push(dgc.label);
+			}
+
+			var bblayout:ButtonBarLayout = new ButtonBarLayout();
+			var buttonBarModel:ArraySelectionModel = new ArraySelectionModel();
+			buttonBarModel.dataProvider = columnLabels;
+
+			_header.addBead(buttonBarModel);
+			_header.addBead(bblayout);
+			_header.addBead(new Viewport());
+			host.addElement(_header);
+
+			host.addElement(_listArea);
+
+			handleDataProviderChanged(event);
+		}
+
+		/**
+		 * @private
+		 */
+		private function handleSizeChanges(event:Event):void
+		{	
+			var layoutBead:IDataGridLayout = _strand.getBeadByType(IBeadLayout) as IDataGridLayout;
+			layoutBead.header = _header;
+			layoutBead.columns = _lists;
+			layoutBead.listArea = _listArea;
+			layoutBead.layout();
+		}
+
+		/**
+		 * @private
+		 */
+		private function handleDataProviderChanged(event:Event):void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+
+			if (_lists == null || _lists.length == 0) {
+				createLists();
+			}
+
+			for (var i:int=0; i < _lists.length; i++)
+			{
+				var list:DataGridColumnList = _lists[i] as DataGridColumnList;
+				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
+				listModel.dataProvider = sharedModel.dataProvider;
+			}
+
+			host.dispatchEvent(new Event("layoutNeeded"));
+		}
+
+		/**
+		 * @private
+		 */
+		private function handleColumnListChange(event:Event):void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			var list:DataGridColumnList = event.target as DataGridColumnList;
+			sharedModel.selectedIndex = list.selectedIndex;
+
+			for(var i:int=0; i < _lists.length; i++) {
+				if (list != _lists[i]) {
+					var otherList:DataGridColumnList = _lists[i] as DataGridColumnList;
+					otherList.selectedIndex = list.selectedIndex;
+				}
+			}
+
+			host.dispatchEvent(new Event('change'));
+		}
+
+		/**
+		 * @private
+		 */
+		private function createLists():void
+		{
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			var presentationModel:DataGridPresentationModel = _strand.getBeadByType(DataGridPresentationModel) as DataGridPresentationModel;
+			var listWidth:Number = host.width / sharedModel.columns.length;
+
+			_lists = new Array();
+
+			for (var i:int=0; i < sharedModel.columns.length; i++) {
+				var dataGridColumn:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+
+				var list:DataGridColumnList = new DataGridColumnList();
+				list.id = "dataGridColumn"+String(i);
+				list.addBead(sharedModel);
+				list.itemRenderer = dataGridColumn.itemRenderer;
+				list.labelField = dataGridColumn.dataField;
+				list.addEventListener('change',handleColumnListChange);
+				list.addBead(presentationModel);
+
+				_listArea.addElement(list);
+				_lists.push(list);
+			}
+
+			host.dispatchEvent(new Event("layoutNeeded"));
+		}
+	}
+}
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
new file mode 100644
index 0000000..fdfd9b3
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/DataItemRendererFactoryForArrayData.as
@@ -0,0 +1,176 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.beads
+{
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IDataProviderItemRendererMapper;
+	import org.apache.flex.core.IItemRendererClassFactory;
+	import org.apache.flex.core.IItemRendererParent;
+	import org.apache.flex.core.IListPresentationModel;
+	import org.apache.flex.core.ISelectableItemRenderer;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.SimpleCSSStyles;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.EventDispatcher;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.events.ItemRendererEvent;
+	import org.apache.flex.html.List;
+	
+	[Event(name="itemRendererCreated",type="org.apache.flex.events.ItemRendererEvent")]
+	
+    /**
+     *  The DataItemRendererFactoryForArrayData class reads an
+     *  array of data and creates an item renderer for every
+     *  item in the array.  Other implementations of
+     *  IDataProviderItemRendererMapper map different data 
+     *  structures or manage a virtual set of renderers.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class DataItemRendererFactoryForArrayData extends EventDispatcher implements IBead, IDataProviderItemRendererMapper
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function DataItemRendererFactoryForArrayData(target:Object=null)
+		{
+			super(target);
+		}
+		
+		private var selectionModel:ISelectionModel;
+		
+		private var labelField:String;
+		
+		private var _strand:IStrand;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			IEventDispatcher(value).addEventListener("beadsAdded",finishSetup);
+			IEventDispatcher(value).addEventListener("initComplete",finishSetup);
+		}
+		
+		private function finishSetup(event:Event):void
+		{
+			selectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+			var listView:IListView = _strand.getBeadByType(IListView) as IListView;
+			dataGroup = listView.dataGroup;
+			selectionModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+			
+			labelField = (listView.host as List).labelField;
+			
+			if (!itemRendererFactory)
+			{
+				_itemRendererFactory = new (ValuesManager.valuesImpl.getValue(_strand, "iItemRendererClassFactory")) as IItemRendererClassFactory;
+				_strand.addBead(_itemRendererFactory);
+			}
+			
+			dataProviderChangeHandler(null);
+		}
+		
+		private var _itemRendererFactory:IItemRendererClassFactory;
+		
+        /**
+         *  The org.apache.flex.core.IItemRendererClassFactory used 
+         *  to generate instances of item renderers.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get itemRendererFactory():IItemRendererClassFactory
+		{
+			return _itemRendererFactory;
+		}
+		
+        /**
+         *  @private
+         */
+		public function set itemRendererFactory(value:IItemRendererClassFactory):void
+		{
+			_itemRendererFactory = value;
+		}
+		
+        /**
+         *  The org.apache.flex.core.IItemRendererParent that will
+         *  parent the item renderers.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		protected var dataGroup:IItemRendererParent;
+		
+		private function dataProviderChangeHandler(event:Event):void
+		{
+			var dp:Array = selectionModel.dataProvider as Array;
+			if (!dp)
+				return;
+			
+			dataGroup.removeAllElements();
+			
+			var listView:IListView = _strand.getBeadByType(IListView) as IListView;
+			var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+			
+			var n:int = dp.length; 
+			for (var i:int = 0; i < n; i++)
+			{				
+				var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
+				ir.index = i;
+				ir.labelField = labelField;
+				if (presentationModel) {
+					var style:SimpleCSSStyles = new SimpleCSSStyles();
+					style.marginBottom = presentationModel.separatorThickness;
+					UIBase(ir).style = style;
+					UIBase(ir).height = presentationModel.rowHeight;
+				}
+				dataGroup.addElement(ir);
+				ir.data = dp[i];
+				
+				var newEvent:ItemRendererEvent = new ItemRendererEvent(ItemRendererEvent.CREATED);
+				newEvent.itemRenderer = ir;
+				dispatchEvent(newEvent);
+			}
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+		}
+	}
+}