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

[09/50] [abbrv] git commit: [flex-asjs] [refs/heads/feature-autobuild/closure-classpath-sources] - try to copy HTML to Basic without losing history

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d8221452/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/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;
+            }
+        }       
+	}
+}