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"));
+               }
+       }
+}

Reply via email to