http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IGraphicsDrawing.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IGraphicsDrawing.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IGraphicsDrawing.as
new file mode 100644
index 0000000..91d1838
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IGraphicsDrawing.as
@@ -0,0 +1,36 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    /**
+     *  The IGraphicsDrawing interface is a marker interface for beads
+     *  that draw into the graphics layer.  This helps a bead determine
+     *  if it is the first of many graphics drawing beads so it can
+     *  know whether or not to clear the graphics layer before drawing.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public interface IGraphicsDrawing
+       {
+               
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IListView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IListView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IListView.as
new file mode 100644
index 0000000..f9159ce
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IListView.as
@@ -0,0 +1,48 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadView;
+       import org.apache.flex.core.IItemRendererParent;
+       import org.apache.flex.core.IStrand;
+
+       /**
+        *  The IListView interface provides the protocol for any bead that
+        *  creates the visual parts for a org.apache.flex.html.List control.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public interface IListView extends IBeadView
+       {
+               /**
+                *  The component which parents all of the itemRenderers for 
each
+                *  datum being displayed by the List component.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               function get dataGroup():IItemRendererParent;
+               
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IScrollBarView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IScrollBarView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IScrollBarView.as
new file mode 100644
index 0000000..c42daa7
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IScrollBarView.as
@@ -0,0 +1,80 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IScrollBarModel;
+       import org.apache.flex.core.IStrand;
+
+    /**
+     *  The IScrollBarView interface is the interface for views for
+     *  the org.apache.flex.html.supportClasses.ScrollBar.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public interface IScrollBarView
+       {
+        /**
+         *  The down arrow button in a vertical ScrollBar or right arrow
+         *  button in a horizontal ScrollBar
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               function get increment():DisplayObject;
+        
+        /**
+         *  The up arrow button in a vertical ScrollBar or left arrow
+         *  button in a horizontal ScrollBar
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               function get decrement():DisplayObject;
+
+        /**
+         *  The track in a ScrollBar
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               function get track():DisplayObject;
+        
+        /**
+         *  The thumb in a ScrollBar
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               function get thumb():DisplayObject;
+               
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISliderView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISliderView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISliderView.as
new file mode 100644
index 0000000..14a51c4
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISliderView.as
@@ -0,0 +1,60 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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::SWF
+    {
+        import flash.display.DisplayObject;            
+    }
+       import org.apache.flex.core.IBead;
+       
+       /**
+        *  The ISliderView interface provides the protocol for any bead that
+        *  creates the visual parts for a org.apache.flex.html.Slider control.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public interface ISliderView extends IBead
+       {
+               /**
+                *  The component used for the track area of the 
org.apache.flex.html.Slider.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+        COMPILE::SWF
+               function get track():DisplayObject;
+               
+               /**
+                *  The component used for the thumb button of the 
org.apache.flex.html.Slider.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+        COMPILE::SWF
+               function get thumb():DisplayObject;
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISpinnerView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISpinnerView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISpinnerView.as
new file mode 100644
index 0000000..e786db4
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ISpinnerView.as
@@ -0,0 +1,69 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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::SWF
+    {
+        import flash.display.DisplayObject;
+    }
+    COMPILE::JS
+    {
+       import org.apache.flex.html.supportClasses.SpinnerButton;
+    }
+
+       import org.apache.flex.core.IBead;
+
+       /**
+        *  The ISpinnerView interface provides the protocol for any bead that
+        *  creates the visual parts for a org.apache.flex.html.Spinner control.
+        *
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public interface ISpinnerView extends IBead
+       {
+               /**
+                *  The component used to increment the 
org.apache.flex.html.Spinner value.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+        COMPILE::SWF
+               function get increment():DisplayObject;
+               COMPILE::JS
+               function get increment():SpinnerButton;
+
+               /**
+                *  The component used to decrement the 
org.apache.flex.html.Spinner value.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+        COMPILE::SWF
+               function get decrement():DisplayObject;
+               COMPILE::JS
+               function get decrement():SpinnerButton;
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextFieldView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextFieldView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextFieldView.as
new file mode 100644
index 0000000..e94ee34
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextFieldView.as
@@ -0,0 +1,44 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+       import org.apache.flex.core.CSSTextField;
+
+    /**
+     *  The ITextFieldView interface is the interface for views for
+     *  the use a CSSTextField to display text.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public interface ITextFieldView
+       {
+        /**
+         *  The org.apache.flex.core.CSSTextField used to display text.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               function get textField():CSSTextField;
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextItemRenderer.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextItemRenderer.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextItemRenderer.as
new file mode 100644
index 0000000..0877b05
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ITextItemRenderer.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.ISelectableItemRenderer;
+
+    /**
+     *  The ITextItemRenderer interface is the interface for
+     *  for org.apache.flex.core.IItemRenderer that display text.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+       public interface ITextItemRenderer extends ISelectableItemRenderer
+       {
+        /**
+         *  The text to be displayed in the item renderer.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        function get text():String;
+        function set text(value:String):void;
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageAndTextButtonView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageAndTextButtonView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageAndTextButtonView.as
new file mode 100644
index 0000000..3083465
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageAndTextButtonView.as
@@ -0,0 +1,276 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.Loader;
+       import flash.display.Shape;
+       import flash.display.SimpleButton;
+       import flash.display.Sprite;
+       import flash.events.Event;
+       import flash.net.URLRequest;
+       import flash.text.TextField;
+       import flash.text.TextFieldType;
+       
+       import org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.CSSTextField;
+       import org.apache.flex.core.IBead;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IStrandWithModel;
+       import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.html.beads.models.ImageAndTextModel;
+    import org.apache.flex.utils.SolidBorderUtil;
+       
+       /**
+        *  The ImageButtonView class provides an image-only view
+        *  for the standard Button. Unlike the CSSButtonView, this
+        *  class does not support background and border; only images
+        *  for the up, over, and active states.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class ImageAndTextButtonView extends BeadViewBase implements 
IBeadView, IBead
+       {
+               /**
+                *  Constructor.
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function ImageAndTextButtonView()
+               {
+                       upSprite = new Sprite();
+                       downSprite = new Sprite();
+                       overSprite = new Sprite();
+            upTextField = new CSSTextField();
+            downTextField = new CSSTextField();
+            overTextField = new CSSTextField();
+            upTextField.selectable = false;
+            upTextField.type = TextFieldType.DYNAMIC;
+            downTextField.selectable = false;
+            downTextField.type = TextFieldType.DYNAMIC;
+            overTextField.selectable = false;
+            overTextField.type = TextFieldType.DYNAMIC;
+            upTextField.autoSize = "left";
+            downTextField.autoSize = "left";
+            overTextField.autoSize = "left";
+               }
+               
+               /**
+                *  @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 = IStrandWithModel(value).model as ImageAndTextModel;
+            textModel.addEventListener("textChange", textChangeHandler);
+            textModel.addEventListener("htmlChange", htmlChangeHandler);
+            textModel.addEventListener("imageChange", imageChangeHandler);
+                       
+                       shape = new Shape();
+                       shape.graphics.beginFill(0xCCCCCC);
+                       shape.graphics.drawRect(0, 0, 10, 10);
+                       shape.graphics.endFill();
+                       SimpleButton(value).upState = upSprite;
+                       SimpleButton(value).downState = downSprite;
+                       SimpleButton(value).overState = overSprite;
+                       SimpleButton(value).hitTestState = shape;
+                       
+                       setupBackground(upSprite, upTextField, 0xCCCCCC);
+                       setupBackground(overSprite, overTextField, 0xFFCCCC, 
"hover");
+                       setupBackground(downSprite, downTextField, 0x808080, 
"active");
+            upTextField.styleParent = value;
+            downTextField.styleParent = value;
+            overTextField.styleParent = value;
+
+               }
+               
+               private var upSprite:Sprite;
+               private var downSprite:Sprite;
+               private var overSprite:Sprite;
+               private var shape:Shape;
+        
+        private var textModel:ImageAndTextModel;
+               
+        /**
+         *  The URL of an icon to use in the button
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get image():String
+        {
+            return textModel.image;
+        }
+                
+               /**
+                * @private
+                */
+               private function setupBackground(sprite:Sprite, 
textField:CSSTextField, color:uint, state:String = null):void
+               {
+                       var backgroundImage:Object = image;
+                       if (backgroundImage)
+                       {
+                               var loader:Loader = new Loader();
+                               sprite.addChildAt(loader, 0);
+                sprite.addChild(textField);
+                               var url:String = backgroundImage as String;
+                               loader.load(new URLRequest(url));
+                               
loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, function 
(e:flash.events.Event):void { 
+                    var padding:int = 2;
+                    var borderWidth:int = 1;
+                                       updateHitArea();
+                    loader.x = padding;
+                    textField.x = loader.width + padding;
+                    textField.y = padding;
+                    loader.y = (textField.height + padding + padding - 
loader.height) / 2;
+                    sprite.graphics.clear();
+                    sprite.graphics.beginFill(color);
+                    sprite.graphics.drawRect(0, 0, sprite.width, 
sprite.height);
+                    sprite.graphics.endFill();
+                    SolidBorderUtil.drawBorder(sprite.graphics, 
+                        0, 0, textField.x + textField.width + padding, 
textField.height + padding + padding,
+                        0x000000, color, borderWidth);
+                               });
+                       }
+               }
+        
+        private function textChangeHandler(event:Event):void
+        {
+            text = textModel.text;
+        }
+        
+        private function htmlChangeHandler(event:Event):void
+        {
+            html = textModel.html;
+        }
+               
+        private function imageChangeHandler(event:Event):void
+        {
+            setupBackground(upSprite, upTextField, 0xCCCCCC);
+            setupBackground(overSprite, overTextField, 0xFFCCCC, "hover");
+            setupBackground(downSprite, downTextField, 0x808080, "active");
+        }
+        
+        /**
+         *  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, upSprite.width, upSprite.height);
+            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;
+        }
+
+        /**
+                * @private
+                */
+               private function updateHitArea():void
+               {
+                       shape.graphics.clear();
+                       shape.graphics.beginFill(0xCCCCCC);
+                       shape.graphics.drawRect(0, 0, upSprite.width, 
upSprite.height);
+                       shape.graphics.endFill();
+                       
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
new file mode 100644
index 0000000..21f34ca
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageButtonView.as
@@ -0,0 +1,158 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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::SWF {
+       import flash.display.Loader;
+       import flash.display.Shape;
+       import flash.display.SimpleButton;
+       import flash.display.Sprite;
+       import flash.events.Event;
+    import flash.events.IOErrorEvent;
+       import flash.net.URLRequest;
+
+       import org.apache.flex.core.UIButtonBase;
+}
+
+    import org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.IBead;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.Event;
+
+       /**
+        *  The ImageButtonView class provides an image-only view
+        *  for the standard Button. Unlike the CSSButtonView, this
+        *  class does not support background and border; only images
+        *  for the up, over, and active states.
+        *
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class ImageButtonView extends BeadViewBase implements IBeadView, 
IBead
+       {
+               /**
+                *  Constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function ImageButtonView()
+               {
+                       COMPILE::SWF {
+                               upSprite = new Sprite();
+                               downSprite = new Sprite();
+                               overSprite = new Sprite();
+                       }
+               }
+
+               /**
+                *  @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::SWF {
+                               shape = new Shape();
+                               shape.graphics.beginFill(0xCCCCCC);
+                               shape.graphics.drawRect(0, 0, 10, 10);
+                               shape.graphics.endFill();
+                               SimpleButton(value).upState = upSprite;
+                               SimpleButton(value).downState = downSprite;
+                               SimpleButton(value).overState = overSprite;
+                               SimpleButton(value).hitTestState = shape;
+
+                               setupBackground(upSprite);
+                               setupBackground(overSprite, "hover");
+                               setupBackground(downSprite, "active");
+                       }
+               }
+
+               COMPILE::SWF {
+                       private var upSprite:Sprite;
+                       private var downSprite:Sprite;
+                       private var overSprite:Sprite;
+                       private var shape:Shape;
+               }
+
+               /**
+                * @private
+                */
+               COMPILE::SWF
+               private function setupBackground(sprite:Sprite, state:String = 
null):void
+               {
+                       var backgroundImage:Object = 
ValuesManager.valuesImpl.getValue(_strand, "background-image", state);
+                       if (backgroundImage)
+                       {
+                               var loader:Loader = new Loader();
+                               sprite.addChildAt(loader, 0);
+                               var url:String = backgroundImage as String;
+                               loader.load(new URLRequest(url));
+                
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function 
(e:IOErrorEvent):void {
+                    trace(e);
+                    e.preventDefault();
+                });
+                               
loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, function 
(e:flash.events.Event):void {
+                    var host:UIButtonBase = UIButtonBase(_strand);
+                    if (isNaN(host.explicitWidth) && isNaN(host.percentWidth))
+                    {
+                        host.setWidth(loader.content.width);
+                        if (host.parent)
+                            host.parent.dispatchEvent(new 
org.apache.flex.events.Event("layoutNeeded"));
+                    }
+                    else
+                        loader.content.width = host.width;
+
+                    if (isNaN(host.explicitHeight) && 
isNaN(host.percentHeight))
+                    {
+                        host.setHeight(loader.content.height);
+                        if (host.parent)
+                            host.parent.dispatchEvent(new 
org.apache.flex.events.Event("layoutNeeded"));
+                    }
+                    else
+                        loader.content.height = host.height;
+                    updateHitArea();
+                               });
+                       }
+               }
+
+               /**
+                * @private
+                */
+               COMPILE::SWF
+               private function updateHitArea():void
+               {
+                       shape.graphics.clear();
+                       shape.graphics.beginFill(0xCCCCCC);
+                       shape.graphics.drawRect(0, 0, upSprite.width, 
upSprite.height);
+                       shape.graphics.endFill();
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageView.as
new file mode 100644
index 0000000..652392a
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ImageView.as
@@ -0,0 +1,223 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+    COMPILE::SWF
+    {
+        import flash.display.Bitmap;
+        import flash.display.Loader;
+        import flash.display.LoaderInfo;
+        import flash.events.IOErrorEvent;
+        import flash.net.URLRequest;            
+    }
+    COMPILE::JS
+    {
+        import goog.events;
+    }
+       
+       import org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IImageModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       
+       /**
+        *  The ImageView class creates the visual elements of the 
org.apache.flex.html.Image component.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class ImageView extends BeadViewBase implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function ImageView()
+               {
+               }
+               
+        COMPILE::SWF
+               private var bitmap:Bitmap;
+        COMPILE::SWF
+               private var loader:Loader;
+               
+               private var _model:IImageModel;
+               
+               /**
+                *  @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::SWF
+            {
+                
IEventDispatcher(_strand).addEventListener("widthChanged",handleSizeChange);
+                
IEventDispatcher(_strand).addEventListener("heightChanged",handleSizeChange);   
                 
+            }
+                       
+                       _model = value.getBeadByType(IImageModel) as 
IImageModel;
+                       _model.addEventListener("urlChanged",handleUrlChange);
+                       
+                       handleUrlChange(null);
+               }
+               
+               /**
+                * @private
+                */
+               private function handleUrlChange(event:Event):void
+               {
+            COMPILE::SWF
+            {
+                if (_model.source) {
+                    loader = new Loader();
+                    
loader.contentLoaderInfo.addEventListener("complete",onComplete);
+                    
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function 
(e:IOErrorEvent):void {
+                        trace(e);
+                        e.preventDefault();
+                    });
+                    loader.load(new URLRequest(_model.source));
+                }                    
+            }
+            COMPILE::JS
+            {
+                               if (_model.source) {
+                       var host:IUIBase = _strand as IUIBase;
+                       host.element.addEventListener('load',
+                           loadHandler, false);
+                       host.addEventListener('sizeChanged',
+                           sizeChangedHandler);
+                       (host.element as HTMLImageElement).src = _model.source;
+                               }
+            }
+               }
+               
+               /**
+                * @private
+                */
+        COMPILE::SWF
+               private function onComplete(event:Object):void
+               {
+            var host:UIBase = UIBase(_strand);
+                       if (bitmap) {
+                               host.removeChild(bitmap);
+                       }
+                       
+                       bitmap = Bitmap(LoaderInfo(event.target).content);
+                       
+                       host.addChild(bitmap);
+                       
+            if (host.isWidthSizedToContent())
+            {
+                host.dispatchEvent(new Event("widthChanged"));
+                if (host.parent)
+                    host.parent.dispatchEvent(new Event("layoutNeeded"));
+            }
+            else
+                bitmap.width = UIBase(_strand).width;
+                
+            if (host.isHeightSizedToContent())
+            {
+                host.dispatchEvent(new Event("heightChanged"));
+                if (host.parent)
+                    host.parent.dispatchEvent(new Event("layoutNeeded"));
+            }
+            else
+                bitmap.height = UIBase(_strand).height;
+                
+               }
+               
+               /**
+                * @private
+                */
+        COMPILE::SWF
+               private function handleSizeChange(event:Object):void
+               {
+            var host:UIBase = UIBase(_strand);
+            if (bitmap) {
+                if (!isNaN(host.explicitWidth) || !isNaN(host.percentWidth))
+                               bitmap.width = UIBase(_strand).width;
+                if (!isNaN(host.explicitHeight) || !isNaN(host.percentHeight))
+                               bitmap.height = UIBase(_strand).height;
+                       }
+               }
+        
+        COMPILE::JS
+        private function loadHandler(event:Object):void
+        {
+            var host:UIBase = UIBase(_strand);
+            host.parent.dispatchEvent(new Event("layoutNeeded"));
+        }
+        
+        /**
+         * @flexjsignorecoercion HTMLElement
+         */
+        COMPILE::JS
+        private function sizeChangedHandler(event:Object):void
+        {
+            var host:UIBase = _strand as UIBase;
+            var s:Object = host.positioner.style;
+            var l:Number = NaN;
+            var ls:String = s.left;
+            if (typeof(ls) === 'string' && ls.length > 0)
+                l = parseFloat(ls.substring(0, ls.length - 2));
+            var r:Number = NaN;
+            var rs:String = s.right;
+            if (typeof(rs) === 'string' && rs.length > 0)
+                r = parseFloat(rs.substring(0, rs.length - 2));
+            if (!isNaN(l) &&
+                !isNaN(r)) {
+                // if just using size constraints and image will not shrink or 
grow
+                var computedWidth:Number = (host.positioner.offsetParent as 
HTMLElement).offsetWidth -
+                    l - r;
+                s.width = computedWidth.toString() + 'px';
+            }
+            var t:Number = NaN;
+            var ts:String = s.top;
+            if (typeof(ts) === 'string' && ts.length > 0)
+                t = parseFloat(ts.substring(0, ts.length - 2));
+            var b:Number = NaN;
+            var bs:String = s.right;
+            if (typeof(bs) === 'string' && bs.length > 0)
+                b = parseFloat(bs.substring(0, bs.length - 2));
+            if (!isNaN(t) &&
+                !isNaN(b)) {
+                // if just using size constraints and image will not shrink or 
grow
+                var computedHeight:Number = (host.positioner.offsetParent as 
HTMLElement).offsetHeight -
+                    t - b;
+                s.height = computedHeight.toString() + 'px';
+            }
+        }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
new file mode 100644
index 0000000..de1296b
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/IncrementButtonView.as
@@ -0,0 +1,94 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+       import org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.svg.Path;
+       import org.apache.flex.svg.Rect;
+       import org.apache.flex.graphics.SolidColor;
+       import org.apache.flex.graphics.SolidColorStroke;
+       import org.apache.flex.events.Event;
+
+       public class IncrementButtonView extends BeadViewBase implements 
IBeadView
+       {
+               public function IncrementButtonView()
+               {
+                       super();
+               }
+
+               private var _backRect:Rect;
+               private var _arrow:Path;
+
+               /**
+                *  @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;
+                       _strand = value;
+
+                       var host:UIBase = _strand as UIBase;
+
+                       _backRect = new Rect();
+                       _backRect.fill = new SolidColor();
+                       (_backRect.fill as SolidColor).color = 0xFFFFFF;
+                       _backRect.stroke = new SolidColorStroke();
+                       (_backRect.stroke as SolidColorStroke).color = 0x000000;
+                       (_backRect.stroke as SolidColorStroke).weight = 1.0;
+                       host.addElement(_backRect);
+
+                       // arrow
+                       _arrow = new Path();
+                       _arrow.fill = new SolidColor();
+                       (_arrow.fill as SolidColor).color = 0x000000;
+                       host.addElement(_arrow);
+
+                       host.addEventListener("widthChanged", sizeHandler);
+                       host.addEventListener("heightChanged", sizeHandler);
+
+                       sizeHandler(null);
+               }
+
+               private function sizeHandler(event:Event):void
+               {
+                       var host:UIBase = _strand as UIBase;
+
+                       _backRect.x = 0;
+                       _backRect.y = 0;
+                       _backRect.setWidthAndHeight(host.width, host.height, 
true);
+                       _backRect.drawRect(0, 0, host.width, host.height);
+
+                       var xm:Number = host.width/2;
+                       var ym:Number = host.height - 4;
+
+                       _arrow.setWidthAndHeight(xm, ym, true);
+                       _arrow.y = 2;
+                       _arrow.x = 0;
+                       _arrow.drawStringPath(0, 0, "M "+xm+" 2 L "+(xm-8)+" 
"+ym+" L "+(xm+8)+" "+ym+" Z");
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/LeftArrowButtonView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/LeftArrowButtonView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/LeftArrowButtonView.as
new file mode 100644
index 0000000..9fca051
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/LeftArrowButtonView.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 LeftArrowButtonView class is the view for
+     *  the left 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 LeftArrowButtonView extends BeadViewBase implements 
IBeadView
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function LeftArrowButtonView()
+               {
+                       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.HalfSize);
+                       g.lineTo(ScrollBarView.ThreeQuarterSize, 
ScrollBarView.ThreeQuarterSize);
+                       g.lineTo(ScrollBarView.ThreeQuarterSize, 
ScrollBarView.QuarterSize);
+                       g.lineTo(ScrollBarView.QuarterSize, 
ScrollBarView.HalfSize);
+                       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/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
new file mode 100644
index 0000000..3018600
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/ListView.as
@@ -0,0 +1,211 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{      
+       import org.apache.flex.core.BeadViewBase;
+       import org.apache.flex.core.ContainerBase;
+       import org.apache.flex.core.IBead;
+       import org.apache.flex.core.IBeadLayout;
+       import org.apache.flex.core.IBeadModel;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.ISelectableItemRenderer;
+       import org.apache.flex.core.IItemRenderer;
+       import org.apache.flex.core.IItemRendererParent;
+       import org.apache.flex.core.IParent;
+    import org.apache.flex.core.IParentIUIBase;
+       import org.apache.flex.core.IRollOverModel;
+       import org.apache.flex.core.ISelectionModel;
+       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.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.html.beads.models.ArraySelectionModel;
+       import org.apache.flex.html.beads.models.ScrollBarModel;
+       import org.apache.flex.html.beads.models.SingleLineBorderModel;
+       import org.apache.flex.html.supportClasses.Border;
+       import org.apache.flex.html.supportClasses.DataGroup;
+       import org.apache.flex.html.supportClasses.ScrollBar;
+
+       /**
+        *  The List class creates the visual elements of the 
org.apache.flex.html.List 
+        *  component. A List consists of the area to display the data (in the 
dataGroup), any 
+        *  scrollbars, and so forth.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class ListView extends ContainerView implements IListView
+       {
+               public function ListView()
+               {
+               }
+                                               
+               protected var listModel:ISelectionModel;
+               
+               private var _border:Border;
+               
+               /**
+                *  The border surrounding the org.apache.flex.html.List.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+        public function get border():Border
+        {
+            return _border;
+        }
+               
+               /**
+                *  The area holding the itemRenderers.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get dataGroup():IItemRendererParent
+               {
+                       (contentView as UIBase).className = "ListDataGroup";
+                       return contentView as IItemRendererParent;
+               }
+                               
+               /**
+                * @private
+                */
+               override public function get resizableView():IUIBase
+               {
+                       return _strand as IUIBase;
+               }
+        
+        /**
+         * @private
+         */
+        override 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
+                */
+               override public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+                       super.strand = value;
+               }
+               
+               override protected function completeSetup():void
+               {
+                       super.completeSetup();
+                       
+                       // list is not interested in UI children, it wants to 
know when new items
+                       // have been added or the dataProvider has changed.
+                       
+                       host.removeEventListener("childrenAdded", 
childrenChangedHandler);
+                       host.removeEventListener("childrenAdded", 
performLayout);
+                       host.addEventListener("itemsCreated", 
itemsCreatedHandler);
+                       
+                       listModel = _strand.getBeadByType(ISelectionModel) as 
ISelectionModel;
+                       listModel.addEventListener("selectedIndexChanged", 
selectionChangeHandler);
+                       listModel.addEventListener("rollOverIndexChanged", 
rollOverIndexChangeHandler);
+                       listModel.addEventListener("dataProviderChanged", 
dataProviderChangeHandler);
+               }
+               
+               protected var lastSelectedIndex:int = -1;
+               
+               /**
+                * @private
+                */
+               protected function itemsCreatedHandler(event:Event):void
+               {
+                       performLayout(event);
+               }
+               
+               /**
+                * @private
+                */
+               protected function dataProviderChangeHandler(event:Event):void
+               {
+                       performLayout(event);
+               }
+               
+               /**
+                * @private
+                */
+               protected function selectionChangeHandler(event:Event):void
+               {
+                       if (lastSelectedIndex != -1)
+                       {
+                               var ir:ISelectableItemRenderer = 
dataGroup.getItemRendererForIndex(lastSelectedIndex) as ISelectableItemRenderer;
+                if (ir != null) ir.selected = false;
+                       }
+                       if (listModel.selectedIndex != -1)
+                       {
+                   ir = 
dataGroup.getItemRendererForIndex(listModel.selectedIndex) as 
ISelectableItemRenderer;
+                   if (ir != null) ir.selected = true;
+                       }
+            lastSelectedIndex = listModel.selectedIndex;
+               }
+               
+               protected var lastRollOverIndex:int = -1;
+               
+               /**
+                * @private
+                */
+               protected function rollOverIndexChangeHandler(event:Event):void
+               {
+                       if (lastRollOverIndex != -1)
+                       {
+                               var ir:ISelectableItemRenderer = 
dataGroup.getItemRendererForIndex(lastRollOverIndex) as ISelectableItemRenderer;
+                ir.hovered = false;
+                       }
+                       if (IRollOverModel(listModel).rollOverIndex != -1)
+                       {
+                   ir = 
dataGroup.getItemRendererForIndex(IRollOverModel(listModel).rollOverIndex) as 
ISelectableItemRenderer;
+                   ir.hovered = true;
+                       }
+                       lastRollOverIndex = 
IRollOverModel(listModel).rollOverIndex;
+               }
+        
+        /**
+         *  respond to a change in size or request to re-layout everything
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               override protected function resizeHandler(event:Event):void
+               {
+                       super.resizeHandler(event);
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/MultilineTextFieldView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/MultilineTextFieldView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/MultilineTextFieldView.as
new file mode 100644
index 0000000..72dc588
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/MultilineTextFieldView.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.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 MultilineTextFieldView extends TextFieldViewBase
+       {
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+               public function MultilineTextFieldView()
+               {
+                       super();
+                       
+                       textField.selectable = false;
+                       textField.type = TextFieldType.DYNAMIC;
+                       textField.mouseEnabled = false;
+                       textField.autoSize = "left";
+            textField.multiline = true;
+            textField.wordWrap = true;
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/NumericStepperView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/NumericStepperView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/NumericStepperView.as
new file mode 100644
index 0000000..6ebdbf4
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/NumericStepperView.as
@@ -0,0 +1,186 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBead;
+       import org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.ILayoutChild;
+    import org.apache.flex.core.IParent;
+       import org.apache.flex.core.IParentIUIBase;
+       import org.apache.flex.core.IRangeModel;
+       import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.IUIBase;
+    import org.apache.flex.core.UIBase;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.html.Label;
+       import org.apache.flex.html.Spinner;
+       import org.apache.flex.html.TextInput;
+       import org.apache.flex.html.supportClasses.Border;
+       import org.apache.flex.html.supportClasses.ScrollBar;
+       
+       /**
+        *  The NumericStepperView class creates the visual elements of the 
+        *  org.apache.flex.html.NumericStepper component. A NumberStepper 
consists of a 
+        *  org.apache.flex.html.TextInput component to display the value and a 
+        *  org.apache.flex.html.Spinner to change the value.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class NumericStepperView extends BeadViewBase implements 
IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function NumericStepperView()
+               {
+               }
+               
+               private var label:Label;
+               private var input:TextInput;
+               private var spinner:Spinner;
+               
+               /**
+                *  @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;
+            
+                       // add an input field
+                       input = new TextInput();
+                       IParent(value).addElement(input);
+                       
+                       // add a spinner
+                       spinner = new Spinner();
+                       spinner.addBead( UIBase(value).model as IBead );
+                       IParent(value).addElement(spinner);
+                       spinner.height = input.height;
+                       
+                       // listen for changes to the text input field which 
will reset the
+                       // value. ideally, we should either set the input to 
accept only
+                       // numeric values or, barring that, reject non-numeric 
entries. we
+                       // cannot do that right now however.
+                       
input.model.addEventListener("textChange",inputChangeHandler);
+                       
+                       // listen for change events on the spinner so the value 
can be updated as
+                       // as resizing the component
+                       
spinner.addEventListener("valueChange",spinnerValueChanged);
+                       
IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+                       
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+            
IEventDispatcher(value).addEventListener("sizeChanged",sizeChangeHandler);
+                       
+                       // listen for changes to the model itself and update 
the UI accordingly
+                       
IEventDispatcher(UIBase(value).model).addEventListener("valueChange",modelChangeHandler);
+                       
IEventDispatcher(UIBase(value).model).addEventListener("minimumChange",modelChangeHandler);
+                       
IEventDispatcher(UIBase(value).model).addEventListener("maximumChange",modelChangeHandler);
+                       
IEventDispatcher(UIBase(value).model).addEventListener("stepSizeChange",modelChangeHandler);
+                       
IEventDispatcher(UIBase(value).model).addEventListener("snapIntervalChange",modelChangeHandler);
+                       
+                       input.text = String(spinner.value);
+                       
+            var host:ILayoutChild = ILayoutChild(value);
+            if ((host.isWidthSizedToContent() || isNaN(host.explicitWidth)) &&
+                (host.isHeightSizedToContent() || isNaN(host.explicitHeight)))
+                sizeChangeHandler(null);
+               }
+               
+               /**
+                * @private
+                */
+               private function sizeChangeHandler(event:Event) : void
+               {
+                       input.x = 2;
+                       input.y = (UIBase(_strand).height - input.height)/2;
+                       input.width = UIBase(_strand).width-spinner.width-2;
+                       spinner.x = input.width+2;
+                       spinner.y = 0;
+               }
+               
+               /**
+                * @private
+                */
+               private function spinnerValueChanged(event:Event) : void
+               {
+                       input.text = String(spinner.value);
+                       
+                       var newEvent:Event = new 
Event(event.type,event.bubbles);
+                       IEventDispatcher(_strand).dispatchEvent(newEvent);
+               }
+               
+               /**
+                * @private
+                */
+               private function inputChangeHandler(event:Event) : void
+               {
+                       var newValue:Number = Number(input.text);
+
+                       if( !isNaN(newValue) ) {
+                               spinner.value = newValue;
+                       }
+                       else {
+                               input.text = String(spinner.value);
+                       }
+               }
+               
+               /**
+                * @private
+                */
+               private function modelChangeHandler( event:Event ) : void
+               {
+                       var n:Number = IRangeModel(UIBase(_strand).model).value;
+                       input.text = 
String(IRangeModel(UIBase(_strand).model).value);
+               }
+               
+               /**
+                *  The area containing the TextInput and Spinner controls.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get contentView():IParentIUIBase
+               {
+                       return _strand as IParentIUIBase;
+               }
+               
+               /**
+                * @private
+                */
+               public function get resizableView():IUIBase
+               {
+                       return _strand as IUIBase;
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
new file mode 100644
index 0000000..c52fe93
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelView.as
@@ -0,0 +1,168 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IBeadView;
+       import org.apache.flex.core.ILayoutChild;
+       import org.apache.flex.core.IContentViewHost;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.IViewportModel;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.core.ValuesManager;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.geom.Rectangle;
+       import org.apache.flex.geom.Size;
+       import org.apache.flex.html.Container;
+       import org.apache.flex.html.Panel;
+       import org.apache.flex.html.TitleBar;
+       import org.apache.flex.utils.CSSContainerUtils;
+       import org.apache.flex.utils.CSSUtils;
+       
+       /**
+        *  The Panel class creates the visual elements of the 
org.apache.flex.html.Panel 
+        *  component. A Panel has a org.apache.flex.html.TitleBar, and 
content.  A
+     *  different View, PanelWithControlBarView, can display a ControlBar.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class PanelView extends ContainerView implements IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function PanelView()
+               {
+                       super();
+               }
+               
+               private var _titleBar:TitleBar;
+               
+               /**
+                *  The org.apache.flex.html.TitleBar component of the 
+                *  org.apache.flex.html.Panel.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get titleBar():TitleBar
+               {
+                       return _titleBar;
+               }
+               
+        /**
+         *  @private
+         */
+        public function set titleBar(value:TitleBar):void
+        {
+            _titleBar = value;
+        }
+                               
+               /**
+                *  @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
+               {
+            var host:UIBase = UIBase(value);
+            
+            if (!_titleBar) {
+                _titleBar = new TitleBar();
+                               _titleBar.id = "panelTitleBar";
+                               _titleBar.height = 30;
+                       }
+                       // replace the TitleBar's model with the Panel's model 
(it implements ITitleBarModel) so that
+                       // any changes to values in the Panel's model that 
correspond values in the TitleBar will 
+                       // be picked up automatically by the TitleBar.
+                       titleBar.model = host.model;
+                                   
+            super.strand = value;
+               }
+               
+               override protected function completeSetup():void
+               {
+                       (host as 
IContentViewHost).strandChildren.addElement(titleBar);
+                       super.completeSetup();
+               }
+               
+        /**
+         * Calculate the space taken up by non-content children like a 
TItleBar in a Panel.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        override protected function getChromeMetrics():Rectangle
+        {
+            return new Rectangle(0, titleBar.height, 0, 0 - titleBar.height);
+        }
+        
+        override protected function layoutViewBeforeContentLayout():void
+        {
+            var vm:IViewportModel = viewportModel;
+            var host:ILayoutChild = this.host as ILayoutChild;
+            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
+            titleBar.x = vm.borderMetrics.left;
+            titleBar.y = vm.borderMetrics.top;
+            if (!host.isWidthSizedToContent())
+                titleBar.width = host.width - vm.borderMetrics.left - 
vm.borderMetrics.right;
+            vm.chromeMetrics = getChromeMetrics();
+            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
+                vm.borderMetrics.top + vm.chromeMetrics.top);
+            viewport.layoutViewportBeforeContentLayout(
+                !host.isWidthSizedToContent() ? 
+                host.width - vm.borderMetrics.left - vm.borderMetrics.right -
+                vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
+                !host.isHeightSizedToContent() ?
+                host.height - vm.borderMetrics.top - vm.borderMetrics.bottom -
+                vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
+        }
+        
+               override protected function layoutViewAfterContentLayout():void
+               {
+            var vm:IViewportModel = viewportModel;
+            var viewportSize:Size = 
this.viewport.layoutViewportAfterContentLayout();
+            var host:ILayoutChild = this.host as ILayoutChild;
+            var hasWidth:Boolean = !host.isWidthSizedToContent();
+            var hasHeight:Boolean = !host.isHeightSizedToContent();
+            if (!hasWidth) {
+                titleBar.width = viewportSize.width; // should get titlebar to 
layout and get new height
+                vm.chromeMetrics = this.getChromeMetrics();
+                vm.chromeMetrics.top = titleBar.height;
+            }
+            super.layoutViewAfterContentLayout();
+               }       
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
new file mode 100644
index 0000000..8dfcd42
--- /dev/null
+++ 
b/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/PanelWithControlBarView.as
@@ -0,0 +1,207 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 org.apache.flex.core.IBeadView;
+       import org.apache.flex.core.IContentViewHost;
+       import org.apache.flex.core.ILayoutChild;
+       import org.apache.flex.core.IPanelModel;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.ITitleBarModel;
+       import org.apache.flex.core.IUIBase;
+       import org.apache.flex.core.IViewportModel;
+       import org.apache.flex.core.UIBase;
+       import org.apache.flex.events.Event;
+       import org.apache.flex.events.IEventDispatcher;
+       import org.apache.flex.geom.Rectangle;
+       import org.apache.flex.geom.Size;
+       import org.apache.flex.html.Container;
+       import org.apache.flex.html.ControlBar;
+       import org.apache.flex.html.TitleBar;
+       import org.apache.flex.utils.CSSContainerUtils;
+       
+       /**
+        *  The Panel class creates the visual elements of the 
org.apache.flex.html.Panel 
+        *  component. A Panel has a org.apache.flex.html.TitleBar, content, 
and an 
+        *  optional org.apache.flex.html.ControlBar.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.0
+        */
+       public class PanelWithControlBarView extends ContainerView implements 
IBeadView
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function PanelWithControlBarView()
+               {
+               }
+               
+               private var _titleBar:TitleBar;
+               
+               /**
+                *  The org.apache.flex.html.TitleBar component of the 
+                *  org.apache.flex.html.Panel.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get titleBar():TitleBar
+               {
+                       return _titleBar;
+               }
+               
+               private var _controlBar:ControlBar;
+               
+               /**
+                *  The org.apache.flex.html.ControlBar for the Panel; may be 
null.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.0
+                */
+               public function get controlBar():ControlBar
+               {
+                       return _controlBar;
+               }
+               
+               /**
+                *  @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
+               {
+                       var host:UIBase = UIBase(value);
+                       
+                       // TODO: (aharui) get class to instantiate from CSS
+                       if (!_titleBar) {
+                               _titleBar = new TitleBar();
+                               _titleBar.id = "panelTitleBar";
+                               _titleBar.height = 30;
+                       }
+                       // replace the TitleBar's model with the Panel's model 
(it implements ITitleBarModel) so that
+                       // any changes to values in the Panel's model that 
correspond values in the TitleBar will 
+                       // be picked up automatically by the TitleBar.
+                       _titleBar.model = host.model;
+                       
+                       var controlBarItems:Array = (host.model as 
IPanelModel).controlBar;
+                       if( controlBarItems && controlBarItems.length > 0 ) {
+                               _controlBar = new ControlBar();
+                               _controlBar.id = "panelControlBar";
+                               _controlBar.height = 30;
+                               
+                               for each(var comp:IUIBase in controlBarItems) {
+                                       _controlBar.addElement(comp, false);
+                               }
+                       }
+                       
+                       super.strand = value;
+               }
+               
+               override protected function completeSetup():void
+               {
+                       super.completeSetup();
+                       
+                       (_strand as 
IContentViewHost).strandChildren.addElement(titleBar, false);
+                       
+                       if (controlBar) {
+                               (_strand as 
IContentViewHost).strandChildren.addElement(_controlBar, false);
+                       }
+               }
+               
+        /**
+         * Calculate the space taken up by non-content children like a 
TItleBar in a Panel.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        override protected function getChromeMetrics():Rectangle
+        {
+            return new Rectangle(0, titleBar.height, 0, controlBar.height - 
titleBar.height);
+        }
+        
+        override protected function layoutViewBeforeContentLayout():void
+        {
+            var vm:IViewportModel = viewportModel;
+            var host:ILayoutChild = this.host as ILayoutChild;
+            var hasHeight:Boolean = !host.isHeightSizedToContent();
+            var hasWidth:Boolean = !host.isWidthSizedToContent();
+            vm.borderMetrics = CSSContainerUtils.getBorderMetrics(host);
+            titleBar.x = vm.borderMetrics.left;
+            titleBar.y = vm.borderMetrics.top;
+            if (hasWidth) 
+            {
+                titleBar.width = host.width - vm.borderMetrics.left - 
vm.borderMetrics.right;
+                controlBar.width = host.width - vm.borderMetrics.left - 
vm.borderMetrics.right;
+            }
+            vm.chromeMetrics = getChromeMetrics();
+            controlBar.x = vm.borderMetrics.left;
+            if (hasHeight && hasWidth) 
+                controlBar.y = host.height - vm.borderMetrics.bottom - 
controlBar.height;
+            
+            viewport.setPosition(vm.borderMetrics.left + vm.chromeMetrics.left,
+                vm.borderMetrics.top + vm.chromeMetrics.top);
+            viewport.layoutViewportBeforeContentLayout(
+                hasWidth ? 
+                    host.width - vm.borderMetrics.left - 
vm.borderMetrics.right -
+                        vm.chromeMetrics.left - vm.chromeMetrics.right : NaN,
+                hasHeight ?
+                    host.height - vm.borderMetrics.top - 
vm.borderMetrics.bottom -
+                        vm.chromeMetrics.top - vm.chromeMetrics.bottom : NaN);
+        }
+        
+        override protected function layoutViewAfterContentLayout():void
+        {
+            var vm:IViewportModel = viewportModel;
+            var viewportSize:Size = 
this.viewport.layoutViewportAfterContentLayout();
+            var host:ILayoutChild = this.host as ILayoutChild;
+            var hasWidth:Boolean = !host.isWidthSizedToContent();
+            var hasHeight:Boolean = !host.isHeightSizedToContent();
+            if (!hasWidth) {
+                titleBar.width = viewportSize.width; // should get titlebar to 
layout and get new height
+                vm.chromeMetrics = this.getChromeMetrics();
+                vm.chromeMetrics.top = titleBar.height;
+                controlBar.width = viewportSize.width; // should get 
controlbar to layout and get new height
+                vm.chromeMetrics.bottom = controlBar.height;
+            }
+            super.layoutViewAfterContentLayout();
+            if (!hasHeight) {
+                controlBar.y = host.height - vm.borderMetrics.bottom - 
controlBar.height;
+            }
+        }       
+       }
+}

Reply via email to