http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RightArrowButtonView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RightArrowButtonView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RightArrowButtonView.as
new file mode 100644
index 0000000..225c37c
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/RightArrowButtonView.as
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.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.events.Event;
+       
+    /**
+     *  The RightArrowButtonView class is the view for
+     *  the right 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 RightArrowButtonView extends BeadViewBase implements 
IBeadView
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function RightArrowButtonView()
+               {
+                       upView = new Shape();
+                       downView = new Shape();
+                       overView = new Shape();
+
+                       drawView(upView.graphics, 0xf8f8f8);
+                       drawView(downView.graphics, 0xd8d8d8);
+                       drawView(overView.graphics, 0xe8e8e8);
+               }
+               
+               private function drawView(g:Graphics, bgColor:uint):void
+               {
+                       g.lineStyle(1, 0x808080);
+                       g.beginFill(bgColor);
+                       g.drawRoundRect(0, 0, ScrollBarView.FullSize, 
ScrollBarView.FullSize, ScrollBarView.ThirdSize);
+                       g.endFill();
+                       g.lineStyle(0);
+                       g.beginFill(0);
+                       g.moveTo(ScrollBarView.QuarterSize, 
ScrollBarView.QuarterSize);
+                       g.lineTo(ScrollBarView.ThreeQuarterSize, 
ScrollBarView.HalfSize);
+                       g.lineTo(ScrollBarView.QuarterSize, 
ScrollBarView.ThreeQuarterSize);
+                       g.lineTo(ScrollBarView.QuarterSize, 
ScrollBarView.QuarterSize);
+                       g.endFill();
+               }
+               
+               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, ScrollBarView.FullSize, 
ScrollBarView.FullSize);
+                       shape.graphics.endFill();
+                       SimpleButton(value).upState = upView;
+                       SimpleButton(value).downState = downView;
+                       SimpleButton(value).overState = overView;
+                       SimpleButton(value).hitTestState = shape;
+            
+            
SimpleButton(_strand).addEventListener("widthChanged",sizeChangeHandler);
+            
SimpleButton(_strand).addEventListener("heightChanged",sizeChangeHandler);
+               }
+        
+               private var upView:Shape;
+               private var downView:Shape;
+               private var overView:Shape;
+               
+        private function sizeChangeHandler(event:Event):void
+        {
+            SimpleButton(_strand).scaleX = SimpleButton(_strand).width / 
ScrollBarView.FullSize;
+            SimpleButton(_strand).scaleY = SimpleButton(_strand).height / 
ScrollBarView.FullSize;
+        }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ScrollBarView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ScrollBarView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ScrollBarView.as
new file mode 100644
index 0000000..e3f8c50
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/ScrollBarView.as
@@ -0,0 +1,216 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.core.IBead;
+       import org.apache.flex.core.IBeadLayout;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IScrollBarModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.Strand;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.events.Event;
+       import org.apache.flex.html.Button;
+       import 
org.apache.flex.html.beads.controllers.ButtonAutoRepeatController;
+
+    /**
+     *  The ScrollBarView class is the default view for
+     *  the org.apache.flex.html.supportClasses.ScrollBar class.
+     *  It implements the classic desktop-like ScrollBar.
+     *  A different view would implement more modern scrollbars that hide 
themselves
+     *  until hovered over with the mouse.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class ScrollBarView extends Strand implements IBeadView, 
IStrand, IScrollBarView
+       {
+               public static const FullSize:int = 12;
+               public static const ThreeQuarterSize:int = 9;
+               public static const HalfSize:int = 6;
+               public static const ThirdSize:int = 4;
+               public static const QuarterSize:int = 3;
+               
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function ScrollBarView()
+               {
+               }
+                               
+               protected var sbModel:IScrollBarModel;
+               
+               protected var _strand:IStrand;
+               
+        /**
+         *  The layout. 
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected var layout:IBeadLayout;
+        
+        /**
+         *  The host component. 
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get host():IUIBase
+        {
+            return _strand as IUIBase;
+        }
+
+        /**
+         *  @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;
+            
+            for each (var bead:IBead in beads)
+                addBead(bead);
+                        
+                       sbModel = value.getBeadByType(IScrollBarModel) as 
IScrollBarModel;
+            sbModel = _strand.getBeadByType(IScrollBarModel) as 
IScrollBarModel;
+            sbModel.addEventListener("maximumChange", changeHandler);
+            sbModel.addEventListener("minimumChange", changeHandler);
+            sbModel.addEventListener("snapIntervalChange", changeHandler);
+            sbModel.addEventListener("stepSizeChange", changeHandler);
+            sbModel.addEventListener("pageSizeChange", changeHandler);
+            sbModel.addEventListener("valueChange", changeHandler);
+            
+            if( _strand.getBeadByType(IBeadLayout) == null ) {
+                layout = new (ValuesManager.valuesImpl.getValue(_strand, 
"iBeadLayout")) as IBeadLayout;
+                _strand.addBead(layout);
+            }
+               }
+                                               
+        protected function changeHandler(event:Event):void
+        {
+            layout.layout();    
+        }
+        
+               protected var _decrement:DisplayObject;
+               protected var _increment:DisplayObject;
+               protected var _track:DisplayObject;
+               protected var _thumb:DisplayObject;
+               
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#decrement
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get decrement():DisplayObject
+               {
+                       return _decrement;
+               }
+
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#increment
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get increment():DisplayObject
+               {
+                       return _increment;
+               }
+        
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#track
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get track():DisplayObject
+               {
+                       return _track;
+               }
+        
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#thumb
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get thumb():DisplayObject
+               {
+                       return _thumb;
+               }
+               
+        /**
+         *  @copy org.apache.flex.core.IBeadView#viewHeight
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get viewHeight():Number
+        {
+            // don't want to put $height in an interface
+            return _strand["$height"];
+        }
+        
+        /**
+         *  @copy org.apache.flex.core.IBeadView#viewWidth
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get viewWidth():Number
+        {
+            // don't want to put $width in an interface
+            return _strand["$width"];
+        }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SimpleAlertView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SimpleAlertView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SimpleAlertView.as
new file mode 100644
index 0000000..949f9c9
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SimpleAlertView.as
@@ -0,0 +1,149 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IAlertModel;
+       import org.apache.flex.core.IBead;
+    import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IMeasurementBead;
+       import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.IParent;
+       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.html.Label;
+       import org.apache.flex.html.TextButton;
+    import org.apache.flex.utils.CSSContainerUtils;
+       
+       /**
+        *  The SimpleAlertView class creates the visual elements of the 
+        *  org.apache.flex.html.SimpleAlert component.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class SimpleAlertView extends BeadViewBase implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function SimpleAlertView()
+               {
+               }
+               
+               private var messageLabel:Label;
+               private var okButton:TextButton;
+               
+               /**
+                *  @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;
+            
+                       var backgroundColor:Object = 
ValuesManager.valuesImpl.getValue(value, "background-color");
+                       var backgroundImage:Object = 
ValuesManager.valuesImpl.getValue(value, "background-image");
+                       if (backgroundColor != null || backgroundImage != null)
+                       {
+                               if (value.getBeadByType(IBackgroundBead) == 
null)
+                                       value.addBead(new 
(ValuesManager.valuesImpl.getValue(value, "iBackgroundBead")) as IBead);        
                              
+                       }
+                       
+                       var borderStyle:String;
+                       var borderStyles:Object = 
ValuesManager.valuesImpl.getValue(value, "border");
+                       if (borderStyles is Array)
+                       {
+                               borderStyle = borderStyles[1];
+                       }
+                       if (borderStyle == null)
+                       {
+                               borderStyle = 
ValuesManager.valuesImpl.getValue(value, "border-style") as String;
+                       }
+                       if (borderStyle != null && borderStyle != "none")
+                       {
+                               if (value.getBeadByType(IBorderBead) == null)
+                                       value.addBead(new 
(ValuesManager.valuesImpl.getValue(value, "iBorderBead")) as IBead);  
+                       }
+                       
+                       var model:IAlertModel = 
_strand.getBeadByType(IAlertModel) as IAlertModel;
+                       
model.addEventListener("messageChange",handleMessageChange);
+                       
model.addEventListener("htmlMessageChange",handleMessageChange);
+
+            messageLabel = new Label();
+                       messageLabel.text = model.message;
+                       messageLabel.html = model.htmlMessage;
+                       IParent(_strand).addElement(messageLabel);
+                       
+                       okButton = new TextButton();
+                       okButton.text = model.okLabel;
+                       IParent(_strand).addElement(okButton);
+                       okButton.addEventListener("click",handleOK);
+                       
+                       handleMessageChange(null);
+               }
+               
+               /**
+                * @private
+                */
+               private function handleMessageChange(event:Event):void
+               {
+                       var ruler:IMeasurementBead = 
messageLabel.getBeadByType(IMeasurementBead) as IMeasurementBead;
+                       if( ruler == null ) {
+                               messageLabel.addBead(ruler = new 
(ValuesManager.valuesImpl.getValue(messageLabel, "iMeasurementBead")) as 
IMeasurementBead);
+                       }
+                       var maxWidth:Number = 
Math.max(UIBase(_strand).width,ruler.measuredWidth);
+                       
+                       var metrics:Rectangle = 
CSSContainerUtils.getBorderAndPaddingMetrics(_strand);
+                       
+                       messageLabel.x = metrics.left;
+                       messageLabel.y = metrics.top;
+                       messageLabel.width = maxWidth;
+                       
+                       okButton.x = (maxWidth - okButton.width)/2;
+                       okButton.y = messageLabel.y + messageLabel.height + 20;
+                       
+                       UIBase(_strand).width = maxWidth + metrics.left + 
metrics.right;
+                       UIBase(_strand).height = okButton.y + okButton.height + 
metrics.bottom;
+               }
+               
+               /**
+                * @private
+                */
+               private function handleOK(event:Event):void
+               {
+                       var newEvent:Event = new Event("close");
+                       IEventDispatcher(_strand).dispatchEvent(newEvent);
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
new file mode 100644
index 0000000..49f3608
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SingleLineBorderBead.as
@@ -0,0 +1,91 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.core.IBead;
+       import org.apache.flex.core.IStatesObject;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.utils.CSSBorderUtils;
+
+    /**
+     *  The SingleLineBorderBead class draws a single line solid border.
+     *  The color and thickness can be specified in CSS.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class SingleLineBorderBead implements IBead, IBorderBead, 
IGraphicsDrawing
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function SingleLineBorderBead()
+               {
+               }
+               
+               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("layoutNeeded", 
changeHandler);
+            IEventDispatcher(value).addEventListener("heightChanged", 
changeHandler);
+            IEventDispatcher(value).addEventListener("widthChanged", 
changeHandler);
+            IEventDispatcher(value).addEventListener("sizeChanged", 
changeHandler);
+            changeHandler(null);
+               }
+                       
+               private function changeHandler(event:Event):void
+               {
+            var host:UIBase = UIBase(_strand);
+            var g:Graphics = host.graphics;
+            var w:Number = host.width;
+            var h:Number = host.height;
+            var state:String;
+            if (host is IStatesObject)
+                state = IStatesObject(host).currentState;
+                       
+                       var gd:IGraphicsDrawing = 
_strand.getBeadByType(IGraphicsDrawing) as IGraphicsDrawing;
+                       if( this == gd ) g.clear();
+            
+            CSSBorderUtils.draw(g, w, h, host, state, false, false);
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderThumbView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderThumbView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderThumbView.as
new file mode 100644
index 0000000..c20c781
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderThumbView.as
@@ -0,0 +1,156 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+    COMPILE::AS3
+    {
+       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;
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;            
+    }
+    import org.apache.flex.events.Event;
+    import org.apache.flex.events.IEventDispatcher;
+       
+       /**
+        *  The SliderThumbView class creates the draggable input element for 
the 
+        *  org.apache.flex.html.Slider component.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class SliderThumbView extends BeadViewBase implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function SliderThumbView()
+               {
+            COMPILE::AS3
+            {
+                hitArea = new Shape();
+                upView = new Shape();
+                downView = new Shape();
+                overView = new Shape();                
+            }
+               }
+               
+               /**
+                * @private
+                */
+        COMPILE::AS3
+               private function drawView(g:Graphics, bgColor:uint):void
+               {
+                       g.clear();
+                       g.lineStyle(1,0x000000);
+                       g.beginFill(bgColor);
+                       g.drawCircle(SimpleButton(_strand).width/2, 
SimpleButton(_strand).height/2, 10);
+                       g.endFill();
+               }
+               
+        COMPILE::AS3
+               private var hitArea:Shape;
+               
+               /**
+                *  @copy org.apache.flex.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+         *  @flexjsignoreimport org.apache.flex.core.WrappedHTMLElement
+         *  @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+                */
+               override public function set strand(value:IStrand):void
+               {
+                       super.strand = value;
+                       
+            COMPILE::AS3
+            {
+                drawView(hitArea.graphics, 0xDD0000);
+                drawView(upView.graphics, 0xFFFFFF);
+                drawView(downView.graphics, 0x999999);
+                drawView(overView.graphics, 0xDDDDDD);
+                
+                SimpleButton(value).upState = upView;
+                SimpleButton(value).downState = downView;
+                SimpleButton(value).overState = overView;
+                SimpleButton(value).hitTestState = hitArea;
+                
+                
IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+                
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);    
            
+            }
+            COMPILE::JS
+            {
+                
+                element = document.createElement('div') as WrappedHTMLElement;
+                element.className = 'SliderThumb';
+                element.id = 'thumb';
+                element.style.backgroundColor = '#949494';
+                element.style.border = 'thin solid #747474';
+                element.style.position = 'relative';
+                element.style.height = '30px';
+                element.style.width = '10px';
+                element.style.zIndex = '2';
+                element.style.top = '-10px';
+                element.style.left = '20px';
+                
+                host.element.appendChild(element);
+                
+                element.flexjs_wrapper = this;
+
+            }
+               }
+               
+        COMPILE::AS3
+               private var upView:Shape;
+        COMPILE::AS3
+               private var downView:Shape;
+        COMPILE::AS3
+               private var overView:Shape;
+               
+        COMPILE::JS
+        public var element:WrappedHTMLElement;
+        
+               /**
+                * @private
+                */
+        COMPILE::AS3
+               private function sizeChangeHandler( event:Event ) : void
+               {
+                       drawView(hitArea.graphics, 0xDD0000);
+                       drawView(upView.graphics, 0xFFFFFF);
+                       drawView(downView.graphics, 0x999999);
+                       drawView(overView.graphics, 0xDDDDDD);
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderTrackView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderTrackView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderTrackView.as
new file mode 100644
index 0000000..6752347
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderTrackView.as
@@ -0,0 +1,153 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+       COMPILE::AS3
+       {
+               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.core.UIBase;
+       COMPILE::JS
+       {
+               import org.apache.flex.core.WrappedHTMLElement;                 
+       }
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       
+       /**
+        *  The SliderTrackView class creates the track area for the 
org.apache.flex.html.Slider
+        *  component.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class SliderTrackView extends BeadViewBase implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function SliderTrackView()
+               {
+                       COMPILE::AS3
+                       {
+                               hitArea = new Shape();
+                               upView = new Shape();
+                               downView = new Shape();
+                               overView = new Shape();                         
        
+                       }
+               }
+               
+               /**
+                * @private
+                */
+               COMPILE::AS3
+               private function drawView(g:Graphics, bgColor:uint):void
+               {
+                       g.clear();
+                       g.lineStyle(1,0x000000);
+                       g.beginFill(bgColor);
+                       g.drawRect(0, 0, SimpleButton(_strand).width, 
SimpleButton(_strand).height);
+                       g.endFill();
+               }
+               
+               COMPILE::AS3
+               private var hitArea: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;
+                       
+                       COMPILE::AS3
+                       {
+                               drawView(hitArea.graphics, 0xDD0000);
+                               drawView(upView.graphics, 0xCCCCCC);
+                               drawView(downView.graphics, 0x808080);
+                               drawView(overView.graphics, 0xEEEEEE);
+                               
+                               SimpleButton(value).upState = upView;
+                               SimpleButton(value).downState = downView;
+                               SimpleButton(value).overState = overView;
+                               SimpleButton(value).hitTestState = hitArea;
+                               
+                               
IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+                               
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);    
                                
+                       }
+                       COMPILE::JS
+                       {
+                               element = document.createElement('div') as 
WrappedHTMLElement;
+                               element.className = 'SliderTrack';
+                               element.id = 'track';
+                               element.style.backgroundColor = '#E4E4E4';
+                               element.style.height = '10px';
+                               element.style.width = '200px';
+                               element.style.border = 'thin solid #C4C4C4';
+                               element.style.position = 'relative';
+                               element.style.left = '0px';
+                               element.style.top = '10px';
+                               element.style.zIndex = '1';
+                               
+                               var host:UIBase = value as UIBase;
+                               host.element.appendChild(element);              
                
+                       }
+               }
+               
+               COMPILE::JS
+               public var element:WrappedHTMLElement;
+               
+               COMPILE::AS3
+               private var upView:Shape;
+               COMPILE::AS3
+               private var downView:Shape;
+               COMPILE::AS3
+               private var overView:Shape;
+               
+               /**
+                * @private
+                */
+               COMPILE::AS3
+               private function sizeChangeHandler( event:Event ) : void
+               {
+                       drawView(hitArea.graphics, 0xDD0000);
+                       drawView(upView.graphics, 0xCCCCCC);
+                       drawView(downView.graphics, 0x808080);
+                       drawView(overView.graphics, 0xEEEEEE);
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderView.as
new file mode 100644
index 0000000..071dd8d
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SliderView.as
@@ -0,0 +1,179 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.Sprite;
+       
+    import org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.IBead;
+       import org.apache.flex.core.IBeadModel;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IRangeModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.html.Button;
+       
+       /**
+        *  The SliderView class creates the visual elements of the 
org.apache.flex.html.Slider 
+        *  component. The Slider has a track and a thumb control which are 
also created with view beads.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class SliderView extends BeadViewBase implements ISliderView, 
IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function SliderView()
+               {
+               }
+               
+               private var rangeModel:IRangeModel;
+               
+               /**
+                *  @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;
+                       
+                       _track = new Button();
+                       Button(_track).addBead(new 
(ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
+                       
+                       _thumb = new Button();
+                       Button(_thumb).addBead(new 
(ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+                       
+                       UIBase(_strand).addChild(_track);
+                       UIBase(_strand).addChild(_thumb);
+                       
+                       
IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+                       
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+                       
+                       rangeModel = _strand.getBeadByType(IBeadModel) as 
IRangeModel;
+                       
+                       // listen for changes to the model and adjust the UI 
accordingly.
+                       
IEventDispatcher(rangeModel).addEventListener("valueChange",modelChangeHandler);
+                       
IEventDispatcher(rangeModel).addEventListener("minimumChange",modelChangeHandler);
+                       
IEventDispatcher(rangeModel).addEventListener("maximumChange",modelChangeHandler);
+                       
IEventDispatcher(rangeModel).addEventListener("stepSizeChange",modelChangeHandler);
+                       
IEventDispatcher(rangeModel).addEventListener("snapIntervalChange",modelChangeHandler);
+                       
+                       // set a minimum size to trigger the size change handler
+                       var needsSizing:Boolean = true;
+                       if( UIBase(_strand).width < 100 ) {
+                               UIBase(_strand).width = 100;
+                               needsSizing = false;
+                       }
+                       if( UIBase(_strand).height < 30 ) {
+                               UIBase(_strand).height = 30;
+                               needsSizing = false;
+                       }
+                       
+                       if( needsSizing ) sizeChangeHandler(null);
+               }
+               
+               private var _track:DisplayObject;
+               private var _thumb:DisplayObject;
+               
+               /**
+                *  The track component.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get track():DisplayObject
+               {
+                       return _track;
+               }
+               
+               /**
+                *  The thumb component.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get thumb():DisplayObject
+               {
+                       return _thumb;
+               }
+               
+               /**
+                * @private
+                */
+               private function sizeChangeHandler( event:Event ) : void
+               {
+                       var w:Number = UIBase(_strand).width;
+                       var h:Number = UIBase(_strand).height;
+                       
+                       _thumb.width = 20;
+                       _thumb.height = UIBase(_strand).height;
+                       
+                       _thumb.x = 10;
+                       _thumb.y = 0;
+                       
+                       // the track is inset 1/2 of the thumbwidth so the 
thumb can
+                       // overlay the track on either end with the thumb 
center being
+                       // on the track's edge
+                       _track.width = UIBase(_strand).width - _thumb.width;
+                       _track.height = 5;
+                       _track.x = _thumb.width/2;
+                       _track.y = (UIBase(_strand).height - _track.height)/2;
+               }
+               
+               /**
+                * @private
+                */
+               private function modelChangeHandler( event:Event ) : void
+               {
+                       setThumbPositionFromValue(rangeModel.value);
+               }
+               
+               /**
+                * @private
+                */
+               private function setThumbPositionFromValue( value:Number ) : 
void
+               {
+                       var p:Number = 
(value-rangeModel.minimum)/(rangeModel.maximum-rangeModel.minimum);
+                       var xloc:Number = p*(UIBase(_strand).width - 
_thumb.width);
+                       
+                       _thumb.x = xloc;
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
new file mode 100644
index 0000000..a42a23d
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
@@ -0,0 +1,191 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.Sprite;
+       import flash.display.Graphics;
+       
+       import org.apache.flex.core.IBead;
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.ILayoutChild;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+
+    /**
+     *  The SolidBackgroundBead class draws a solid filled background.
+     *  The color and opacity can be specified in CSS.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class SolidBackgroundBead implements IBead, IBackgroundBead, 
IGraphicsDrawing
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function SolidBackgroundBead()
+               {
+               }
+                               
+               private var _strand:IStrand;
+               
+        private var host:IUIBase;
+        
+        /**
+         *  @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;
+            if (value is IUIBase)
+                host = IUIBase(value);
+            else if (value is IBeadView)
+                host = IUIBase(IBeadView(value).host);
+            
+            IEventDispatcher(host).addEventListener("heightChanged", 
changeHandler);
+            IEventDispatcher(host).addEventListener("widthChanged", 
changeHandler);
+                       IEventDispatcher(host).addEventListener("sizeChanged", 
changeHandler);
+                       IEventDispatcher(host).addEventListener("initComplete", 
changeHandler);
+                       
+                       var bgColor:Object = 
ValuesManager.valuesImpl.getValue(host, "background-color");
+                       if( bgColor != null ) {
+                               backgroundColor = 
ValuesManager.valuesImpl.convertColor(bgColor);
+                       }
+                       
+                       var bgAlpha:Object = 
ValuesManager.valuesImpl.getValue(host, "opacity");
+                       if( bgAlpha != null ) {
+                               opacity = Number(bgAlpha);
+                       }
+            
+            var corner:Object = ValuesManager.valuesImpl.getValue(host, 
"border-radius");
+            if( corner != null ) {
+                borderRadius = Number(corner);
+            }
+            
+            changeHandler(null);
+               }
+               
+               private var _backgroundColor:uint;
+               
+        /**
+         *  The background color
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get backgroundColor():uint
+               {
+                       return _backgroundColor;
+               }
+        
+        /**
+         *  @private
+         */
+               public function set backgroundColor(value:uint):void
+               {
+                       _backgroundColor = value;
+                       if (_strand)
+                               changeHandler(null);
+               }
+               
+               private var _opacity:Number = 1.0;
+               
+        /**
+         *  The opacity (alpha).
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get opacity():Number
+               {
+                       return _opacity;
+               }
+               
+        /**
+         *  @private
+         */
+               public function set opacity(value:Number):void
+               {
+                       _opacity = value;
+                       if( _strand )
+                               changeHandler(null);
+               }
+               
+        private var _borderRadius:Number;
+        
+        /**
+         *  The opacity (alpha).
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get borderRadius():Number
+        {
+            return _borderRadius;
+        }
+        
+        /**
+         *  @private
+         */
+        public function set borderRadius(value:Number):void
+        {
+            _borderRadius = value;
+            if( _strand )
+                changeHandler(null);
+        }
+        
+               private function changeHandler(event:Event):void
+               {
+            var g:Graphics = Sprite(host).graphics;
+            var w:Number = host.width;
+            var h:Number = host.height;
+                       
+                       var gd:IGraphicsDrawing = 
_strand.getBeadByType(IGraphicsDrawing) as IGraphicsDrawing;
+                       if( this == gd ) g.clear();
+
+            g.beginFill(backgroundColor,opacity);
+            if (isNaN(borderRadius))
+                g.drawRect(0, 0, w, h);
+            else
+                g.drawRoundRect(0, 0, w, h, borderRadius * 2);
+            g.endFill();
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SpinnerView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SpinnerView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SpinnerView.as
new file mode 100644
index 0000000..44d3da8
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SpinnerView.as
@@ -0,0 +1,135 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.IBeadModel;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IRangeModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.html.Button;
+       import 
org.apache.flex.html.beads.controllers.ButtonAutoRepeatController;
+       
+       /**
+        *  The SpinnerView class creates the visual elements of the 
org.apache.flex.html.Spinner 
+        *  component.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class SpinnerView extends BeadViewBase implements ISpinnerView, 
IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function SpinnerView()
+               {
+               }
+               
+               private var rangeModel:IRangeModel;
+               
+               /**
+                *  @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;
+            
+                       _increment = new Button();
+                       Button(_increment).addBead(new UpArrowButtonView());
+                       Button(_increment).addBead(new 
ButtonAutoRepeatController());
+                       _decrement = new Button();
+                       Button(_decrement).addBead(new DownArrowButtonView());
+                       Button(_decrement).addBead(new 
ButtonAutoRepeatController());
+                                               
+                       Button(_increment).x = 0;
+                       Button(_increment).y = 0;
+                       Button(_decrement).x = 0;
+                       Button(_decrement).y = Button(_increment).height;
+                       
+                       UIBase(_strand).addChild(_decrement);
+                       UIBase(_strand).addChild(_increment);
+                       rangeModel = _strand.getBeadByType(IBeadModel) as 
IRangeModel;
+                       
+                       
IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+                       
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+               }
+               
+               private var _decrement:DisplayObject;
+               private var _increment:DisplayObject;
+               
+               /**
+                *  The component for decrementing the 
org.apache.flex.html.Spinner value.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get decrement():DisplayObject
+               {
+                       return _decrement;
+               }
+               
+               /**
+                *  The component for incrementing the 
org.apache.flex.html.Spinner value.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get increment():DisplayObject
+               {
+                       return _increment;
+               }
+               
+               /**
+                * @private
+                */
+               private function sizeChangeHandler( event:Event ) : void
+               {
+            var w:Number = UIBase(_strand).width;
+            var h:Number =  UIBase(_strand).height / 2;
+                       _increment.width = w;
+                       _increment.height = h;
+                       _increment.y      = 0;
+                       _decrement.width = w;
+                       _decrement.height = h;
+                       _decrement.y      = h;
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextAreaView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextAreaView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextAreaView.as
new file mode 100644
index 0000000..ef25539
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextAreaView.as
@@ -0,0 +1,263 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.events.Event;
+       import flash.events.IEventDispatcher;
+       import flash.text.TextFieldType;
+       
+       import org.apache.flex.core.IBead;
+    import org.apache.flex.core.IBeadModel;
+       import org.apache.flex.core.IScrollBarModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IParent;
+    import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.html.beads.models.ScrollBarModel;
+       import org.apache.flex.html.supportClasses.Border;
+       import org.apache.flex.html.supportClasses.VScrollBar;
+
+    /**
+     *  The TextAreaView class is the default view for
+     *  the org.apache.flex.html.TextArea class.
+     *  It implements the classic desktop-like TextArea with
+     *  a border and scrollbars.  It does not support right-to-left text.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class TextAreaView extends TextFieldViewBase implements IStrand
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function TextAreaView()
+               {
+                       super();
+                       
+                       textField.selectable = true;
+                       textField.type = TextFieldType.INPUT;
+                       textField.mouseEnabled = true;
+                       textField.multiline = true;
+                       textField.wordWrap = true;
+               }
+               
+               private var _border:Border;
+               
+        /**
+         *  The border.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get border():Border
+               {
+                       return _border;
+               }
+               
+               private var _vScrollBar:VScrollBar;
+               
+        /**
+         *  The vertical ScrollBar.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get vScrollBar():VScrollBar
+               {
+                       if (!_vScrollBar)
+                               _vScrollBar = createScrollBar();
+                       return _vScrollBar;
+               }
+               
+        /**
+         *  @private
+         */
+               override public function set strand(value:IStrand):void
+               {
+                       super.strand = value;
+                       
+            for each (var bead:IBead in beads)
+                addBead(bead);
+            
+                       // add a border to this
+                       _border = new Border();
+                       _border.model = new 
(ValuesManager.valuesImpl.getValue(value, "iBorderModel")) as IBeadModel;
+                       _border.addBead(new 
(ValuesManager.valuesImpl.getValue(value, "iBorderBead")) as IBead);
+            IParent(host).addElement(border);
+                       
+                       var vb:VScrollBar = vScrollBar;
+                       
+                       // Default size
+                       var ww:Number = DisplayObject(host).width;
+                       if( isNaN(ww) || ww == 0 ) DisplayObject(host).width = 
100;
+                       var hh:Number = DisplayObject(host).height;
+                       if( isNaN(hh) || hh == 0 ) DisplayObject(host).height = 
42;
+                       
+                       // for input, listen for changes to the _textField and 
update
+                       // the model
+                       textField.addEventListener(Event.SCROLL, 
textScrollHandler);
+                       
+                       IEventDispatcher(host).addEventListener("widthChanged", 
sizeChangedHandler);
+                       
IEventDispatcher(host).addEventListener("heightChanged", sizeChangedHandler);
+                       sizeChangedHandler(null);
+               }
+                               
+               private function createScrollBar():VScrollBar
+               {
+                       var vsb:VScrollBar;
+                       vsb = new VScrollBar();
+                       var vsbm:ScrollBarModel = new ScrollBarModel();
+                       vsbm.maximum = 100;
+                       vsbm.minimum = 0;
+                       vsbm.pageSize = 10;
+                       vsbm.pageStepSize = 10;
+                       vsbm.snapInterval = 1;
+                       vsbm.stepSize = 1;
+                       vsbm.value = 0;
+                       vsb.model = vsbm;
+            IParent(host).addElement(vsb);
+                       
+                       vsb.addEventListener("scroll", scrollHandler);
+                       
+                       return vsb;
+               }
+               
+               private function textScrollHandler(event:Event):void
+               {
+                       var visibleLines:int = textField.bottomScrollV - 
textField.scrollV + 1;
+                       var scrollableLines:int = textField.numLines - 
visibleLines + 1;
+                       var vsbm:ScrollBarModel = 
ScrollBarModel(vScrollBar.model);
+                       vsbm.minimum = 0;
+                       vsbm.maximum = textField.numLines+1;
+                       vsbm.value = textField.scrollV;
+                       vsbm.pageSize = visibleLines;
+                       vsbm.pageStepSize = visibleLines;
+               }
+               
+               private function sizeChangedHandler(event:Event):void
+               {
+                       var ww:Number = DisplayObject(host).width;
+            if( !isNaN(ww) && ww > 0 )
+                _border.width = ww;
+            
+            ww -= DisplayObject(vScrollBar).width;
+                       if( !isNaN(ww) && ww > 0 )
+                               textField.width = ww;
+                       
+                       var hh:Number = DisplayObject(host).height;
+                       if( !isNaN(hh) && hh > 0 ) 
+            {
+                               textField.height = hh;
+                               _border.height = hh;
+                       }
+                       
+                       var sb:DisplayObject = DisplayObject(vScrollBar);
+                       sb.y = 1;
+                       sb.x = textField.width - 1;
+                       sb.height = textField.height;
+               }
+               
+               private function scrollHandler(event:Event):void
+               {
+                       var vpos:Number = 
IScrollBarModel(vScrollBar.model).value;
+                       textField.scrollV = vpos;
+               }
+               
+        /**
+         *  @copy org.apache.flex.core.UIBase#beads
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public var beads:Array;
+               
+               private var _beads:Vector.<IBead>;
+
+        /**
+         *  @copy org.apache.flex.core.UIBase#addBead()
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function addBead(bead:IBead):void
+               {
+                       if (!_beads)
+                               _beads = new Vector.<IBead>;
+                       _beads.push(bead);
+                       bead.strand = this;
+               }
+               
+        /**
+         *  @copy org.apache.flex.core.UIBase#getBeadByType()
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function getBeadByType(classOrInterface:Class):IBead
+               {
+                       for each (var bead:IBead in _beads)
+                       {
+                               if (bead is classOrInterface)
+                                       return bead;
+                       }
+                       return null;
+               }
+               
+        /**
+         *  @copy org.apache.flex.core.UIBase#removeBead()
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function removeBead(value:IBead):IBead   
+               {
+                       var n:int = _beads.length;
+                       for (var i:int = 0; i < n; i++)
+                       {
+                               var bead:IBead = _beads[i];
+                               if (bead == value)
+                               {
+                                       _beads.splice(i, 1);
+                                       return bead;
+                               }
+                       }
+                       return null;
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonMeasurementBead.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonMeasurementBead.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonMeasurementBead.as
new file mode 100644
index 0000000..1341389
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonMeasurementBead.as
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IMeasurementBead;
+       import org.apache.flex.core.IStrand;
+       
+       /**
+        *  The TextButtonMeasurementBead class helps measure a 
org.apache.flex.html.TextButton.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class TextButtonMeasurementBead implements IMeasurementBead
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function TextButtonMeasurementBead()
+               {
+               }
+               
+               /**
+                *  The overall width of the org.apache.flex.html.TextButton.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get measuredWidth():Number
+               {
+                       var view:TextButtonView = 
_strand.getBeadByType(TextButtonView) as TextButtonView;
+                       if( view ) return 
Math.max(view.upTextField.textWidth,view.downTextField.textWidth,view.overTextField.textWidth);
+                       else return 0;
+               }
+               
+               /**
+                * The overall height of the org.apache.flex.html.TextButton
+                */
+               public function get measuredHeight():Number
+               {
+                       var view:TextButtonView = 
_strand.getBeadByType(TextButtonView) as TextButtonView;
+                       if( view ) return 
Math.max(view.upTextField.textHeight,view.downTextField.textHeight,view.overTextField.textHeight);
+                       else return 0;
+               }
+               
+               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/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonView.as
new file mode 100644
index 0000000..b1ab648
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextButtonView.as
@@ -0,0 +1,217 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.Shape;
+       import flash.display.SimpleButton;
+       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.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+
+    /**
+     *  The TextButtonView class is the default view for
+     *  the org.apache.flex.html.TextButton class.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class TextButtonView extends BeadViewBase implements IBeadView
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function TextButtonView()
+               {
+                       upTextField = new CSSTextField();
+                       downTextField = new CSSTextField();
+                       overTextField = new CSSTextField();
+                       upTextField.border = true;
+                       downTextField.border = true;
+                       overTextField.border = true;
+                       upTextField.background = true;
+                       downTextField.background = true;
+                       overTextField.background = true;
+                       upTextField.borderColor = 0;
+                       downTextField.borderColor = 0;
+                       overTextField.borderColor = 0;
+                       upTextField.backgroundColor = 0xCCCCCC;
+                       downTextField.backgroundColor = 0x808080;
+                       overTextField.backgroundColor = 0xFFCCCC;
+                       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";
+
+               }
+               
+               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
+               {
+                       super.strand = value;
+                       textModel = value.getBeadByType(ITextModel) as 
ITextModel;
+                       textModel.addEventListener("textChange", 
textChangeHandler);
+                       textModel.addEventListener("htmlChange", 
htmlChangeHandler);
+                       shape = new Shape();
+                       shape.graphics.beginFill(0xCCCCCC);
+                       shape.graphics.drawRect(0, 0, 10, 10);
+                       shape.graphics.endFill();
+                       SimpleButton(value).upState = upTextField;
+                       SimpleButton(value).downState = downTextField;
+                       SimpleButton(value).overState = overTextField;
+                       SimpleButton(value).hitTestState = shape;
+                       upTextField.styleParent = value;
+                       downTextField.styleParent = value;
+                       overTextField.styleParent = value;
+                       if (textModel.text !== null)
+                               text = textModel.text;
+                       if (textModel.html !== null)
+                               html = textModel.html;
+                       
+                       
IEventDispatcher(_strand).addEventListener("widthChanged",sizeChangeHandler);
+                       
IEventDispatcher(_strand).addEventListener("heightChanged",sizeChangeHandler);
+               }
+                       
+               private function textChangeHandler(event:Event):void
+               {
+                       text = textModel.text;
+               }
+               
+               private function htmlChangeHandler(event:Event):void
+               {
+                       html = textModel.html;
+               }
+               
+               private function sizeChangeHandler(event:Event):void
+               {
+                       upTextField.width = downTextField.width = 
overTextField.width = DisplayObject(_strand).width;
+                       upTextField.height= downTextField.height= 
overTextField.height= DisplayObject(_strand).height;
+               }
+               
+        /**
+         *  The CSSTextField in the up state
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public var upTextField:CSSTextField;
+
+        /**
+         *  The CSSTextField in the down state
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public var downTextField:CSSTextField;
+
+        /**
+         *  The CSSTextField in the over state
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public var overTextField:CSSTextField;
+               
+        /**
+         *  @copy org.apache.flex.html.core.ITextModel#text
+         *  
+         *  @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;
+                       shape.graphics.clear();
+                       shape.graphics.beginFill(0xCCCCCC);
+                       shape.graphics.drawRect(0, 0, upTextField.textWidth, 
upTextField.textHeight);
+                       shape.graphics.endFill();
+                       
+               }
+               
+        /**
+         *  @copy org.apache.flex.html.core.ITextModel#text
+         *  
+         *  @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/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldLabelMeasurementBead.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldLabelMeasurementBead.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldLabelMeasurementBead.as
new file mode 100644
index 0000000..ca38a0b
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldLabelMeasurementBead.as
@@ -0,0 +1,92 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+       import org.apache.flex.core.IMeasurementBead;
+       import org.apache.flex.core.IStrand;
+       
+       /**
+        *  The TextFieldLabelMeasurementBead class helps to measure 
org.apache.flex.html.Label 
+        *  components.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class TextFieldLabelMeasurementBead implements IMeasurementBead
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function TextFieldLabelMeasurementBead()
+               {
+               }
+               
+               /**
+                *  The overall width of the org.apache.flex.html.Label.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get measuredWidth():Number
+               {
+                       var view:TextFieldView = 
_strand.getBeadByType(TextFieldView) as TextFieldView;
+                       if( view ) return view.textField.textWidth;
+                       else return 0;
+               }
+               
+               /**
+                *  The overall height of the org.apache.flex.html.Label.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get measuredHeight():Number
+               {
+                       var view:TextFieldView = 
_strand.getBeadByType(TextFieldView) as TextFieldView;
+                       if( view ) return view.textField.textHeight;
+                       else return 0;
+               }
+               
+               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/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldView.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldView.as
new file mode 100644
index 0000000..61b6edb
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldView.as
@@ -0,0 +1,54 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.text.TextFieldType;
+       
+    /**
+     *  The TextFieldView class is the default view for
+     *  the org.apache.flex.html.Label class.
+     *  It displays text using a TextField, so there is no
+     *  right-to-left text support in this view.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class TextFieldView extends TextFieldViewBase
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function TextFieldView()
+               {
+                       super();
+                       
+                       textField.selectable = false;
+                       textField.type = TextFieldType.DYNAMIC;
+                       textField.mouseEnabled = false;
+                       textField.autoSize = "left";
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7853ef15/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldViewBase.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldViewBase.as
 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldViewBase.as
new file mode 100644
index 0000000..3ab2874
--- /dev/null
+++ 
b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/TextFieldViewBase.as
@@ -0,0 +1,404 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.text.StyleSheet;
+       
+       import org.apache.flex.core.CSSTextField;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.ILayoutChild;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.ITextModel;
+       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;
+       
+    /**
+     *  The TextFieldViewBase class is the base class for
+     *  the components that display text.
+     *  It displays text using a TextField, so there is no
+     *  right-to-left text support in this view.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public class TextFieldViewBase implements IBeadView, ITextFieldView
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function TextFieldViewBase()
+               {
+                       _textField = new CSSTextField();
+               }
+               
+               private var _textField:CSSTextField;
+               
+        /**
+         *  @copy org.apache.flex.core.ITextModel#textField
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get textField() : CSSTextField
+               {
+                       return _textField;
+               }
+               
+               private var _textModel:ITextModel;
+               
+               protected 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;
+                       _textModel = value.getBeadByType(ITextModel) as 
ITextModel;
+            _textModel.addEventListener("textChange", textChangeHandler);
+            _textModel.addEventListener("htmlChange", htmlChangeHandler);
+            IEventDispatcher(_strand).addEventListener("widthChanged", 
widthChangeHandler);
+            IEventDispatcher(_strand).addEventListener("heightChanged", 
heightChangeHandler);
+            IEventDispatcher(_strand).addEventListener("sizeChanged", 
sizeChangeHandler);
+                       DisplayObjectContainer(value).addChild(_textField);
+                       if (_textModel.text !== null)
+                               text = _textModel.text;
+                       if (_textModel.html !== null)
+                               html = _textModel.html;
+            
+            var ilc:ILayoutChild = host as ILayoutChild;
+            autoHeight = ilc.isHeightSizedToContent();
+            autoWidth = ilc.isWidthSizedToContent();
+            if (!autoWidth && !isNaN(ilc.explicitWidth))
+            {
+                widthChangeHandler(null);
+            }
+            if (!autoHeight && !isNaN(ilc.explicitHeight))
+            {
+                heightChangeHandler(null);
+            }
+            
+            // textfield's collapse to height==4 if no text
+            if (autoHeight && _textModel.text === null)
+            {
+                var fontHeight:Number = 
ValuesManager.valuesImpl.getValue(_strand, "fontSize") + 4;
+                if (textField.height != fontHeight) 
+                {
+                    textField.autoSize = "none";
+                    textField.height = fontHeight;
+                }
+            }
+               }
+               
+        /**
+         *  @private
+         */
+               public function get host() : IUIBase
+               {
+                       return _strand as IUIBase;
+               }
+               
+        /**
+         *  @copy org.apache.flex.core.ITextModel#text
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get text():String
+               {
+                       return _textField.text;
+               }
+
+        /**
+         *  @private
+         */
+        public function set text(value:String):void
+               {
+            if (value == null)
+                value = "";
+                       _textField.text = value;
+            autoSizeIfNeeded();
+               }
+
+        /**
+         *  Handle autosizing.  The built-in player algorithm
+         *  doesn't work the way we would like, especially
+         *  when it collapses Textfields with empty strings.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected function autoSizeIfNeeded():void
+        {
+            var host:UIBase = UIBase(_strand);
+            if (autoHeight)
+            {   
+                if (textField.text != "")
+                {
+                    if (textField.height != textField.textHeight + 4)
+                    {
+                        textField.height = textField.textHeight + 4;
+                        inHeightChange = true;
+                        host.dispatchEvent(new Event("heightChanged"));
+                        inHeightChange = false;
+                    }
+                }
+                else
+                {
+                    var fontHeight:Number = 
ValuesManager.valuesImpl.getValue(_strand, "fontSize") + 4;
+                    if (textField.height != fontHeight)
+                    {
+                        textField.height = fontHeight;
+                        inHeightChange = true;
+                        host.dispatchEvent(new Event("heightChanged"));
+                        inHeightChange = false;                        
+                    }
+                }
+            }
+            if (autoWidth)
+            {
+                if (textField.width != textField.textWidth + 4)
+                {
+                    textField.width = textField.textWidth + 4;
+                    inWidthChange = true;
+                    host.dispatchEvent(new Event("widthChanged"));
+                    inWidthChange = false;                    
+                }
+            }
+        }
+        
+        /**
+         *  @copy org.apache.flex.core.ITextModel#html
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function get html():String
+               {
+                       return _textField.htmlText;
+               }
+               
+        /**
+         *  @private
+         */
+        public function set html(value:String):void
+               {
+                       convertToTextFieldHTML(value);
+            autoSizeIfNeeded();
+               }
+               
+        private function convertToTextFieldHTML(input:String):void
+        {
+            var classCount:int = 0;
+            var ss:StyleSheet;
+            var c:int = input.indexOf("<span");
+            while (c != -1)
+            {
+                var c1:int = input.indexOf(">", c);
+                if (c1 == -1)
+                {
+                    trace("did not parse span correctly");
+                    return;
+                }
+                var tag:String = input.substring(c, c1 + 1);
+                var c2:int = tag.indexOf("style=");
+                if (c2 != -1)
+                {
+                    var quote:String = tag.charAt(c2 + 6);
+                    var c3:int = tag.indexOf(quote, c2 + 7);
+                    if (c3 != -1)
+                    {
+                        var styles:String = tag.substring(c2 + 7, c3);
+                        if (!ss)
+                            ss = new StyleSheet();
+                        var styleObject:Object = {};
+                        var list:Array = styles.split(";");
+                        for each (var pair:String in list)
+                        {
+                            var parts:Array = pair.split(":");
+                            var name:String = parts[0];
+                            var c4:int = name.indexOf("-");
+                            if (c4 != -1)
+                            {
+                                var firstChar:String = name.charAt(c4 + 1);
+                                firstChar = firstChar.toUpperCase();
+                                var tail:String = name.substring(c4 + 2);
+                                name = name.substring(0, c4) + firstChar + 
tail;
+                            }
+                            styleObject[name] = parts[1];
+                        }
+                        var className:String = "css" + classCount++;
+                        ss.setStyle("." + className, styleObject);
+                        var newTag:String = "<span class='" + className + "'>";
+                        input = input.replace(tag, newTag);
+                        c1 += newTag.length - tag.length;
+                    }
+                }
+                c = input.indexOf("<span", c1);
+            }
+            _textField.styleSheet = ss;   
+            _textField.htmlText = input;
+        }
+        
+               private function textChangeHandler(event:Event):void
+               {
+                       text = _textModel.text;
+               }
+               
+               private function htmlChangeHandler(event:Event):void
+               {
+                       html = _textModel.html;
+               }
+               
+        /**
+         *  Whether we are autosizing the height.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected var autoHeight:Boolean;
+
+        /**
+         *  Whether we are autosizing the width.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected var autoWidth:Boolean;
+        
+        /**
+         *  A flag to prevent looping.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected var inHeightChange:Boolean = false;
+        
+        /**
+         *  A flag to prevent looping.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected var inWidthChange:Boolean = false;
+        
+        /**
+         *  Determine the width of the TextField.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               protected function widthChangeHandler(event:Event):void
+               {
+            if (!inWidthChange)
+            {
+                textField.autoSize = "none";
+                autoWidth = false;
+                       textField.width = host.width;
+                if (autoHeight)
+                       autoSizeIfNeeded()
+                else
+                    textField.height = host.height;
+            }
+               }
+
+        /**
+         *  Determine the height of the TextField.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected function heightChangeHandler(event:Event):void
+        {
+            if (!inHeightChange)
+            {
+                textField.autoSize = "none";
+                autoHeight = false;
+                textField.height = host.height;
+                if (autoWidth)
+                    autoSizeIfNeeded();
+                else
+                    textField.width = host.width;
+            }
+        }
+        
+        /**
+         *  Determine the size of the TextField.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        protected function sizeChangeHandler(event:Event):void
+        {
+            var ilc:ILayoutChild = host as ILayoutChild;
+            autoHeight = ilc.isHeightSizedToContent();
+            if (!autoHeight)
+            {
+                textField.autoSize = "none";
+                textField.height = host.height;
+            }
+            
+            autoWidth = ilc.isWidthSizedToContent();
+            if (!autoWidth)
+            {
+                textField.autoSize = "none";
+                textField.width = host.width;
+            }
+        }
+    }
+}

Reply via email to