You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2015/07/28 20:40:49 UTC

[23/36] git commit: [flex-asjs] [refs/heads/develop] - flat-ui like look for text area and scrollbar

flat-ui like look for text area and scrollbar


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/0f63a710
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/0f63a710
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/0f63a710

Branch: refs/heads/develop
Commit: 0f63a710cb028f70a19812fa15d1cf6ce2a80aca
Parents: 94a189b
Author: Alex Harui <ah...@apache.org>
Authored: Sun Jul 26 08:39:31 2015 -0700
Committer: Alex Harui <ah...@apache.org>
Committed: Sun Jul 26 08:39:31 2015 -0700

----------------------------------------------------------------------
 .../src/org/apache/flex/utils/CSSBorderUtils.as |   8 +-
 .../as/src/org/apache/flex/utils/CSSUtils.as    |  12 +
 .../org/apache/flex/utils/SolidBorderUtil.as    |   6 +-
 frameworks/projects/HTML/as/defaults.css        |  98 +++++++-
 frameworks/projects/HTML/as/src/HTMLClasses.as  |   5 +-
 .../org/apache/flex/html/beads/CSSButtonView.as | 122 ++++------
 .../flex/html/beads/CSSScrollBarButtonView.as   | 182 ++++++++++++++
 .../apache/flex/html/beads/CSSScrollBarView.as  | 240 +++++++++++++++++++
 .../flex/html/beads/layouts/VScrollBarLayout.as |   6 +-
 .../DropDownListStringItemRenderer.as           |  70 ++++++
 10 files changed, 654 insertions(+), 95 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
index 5a80e31..ccc8466 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSBorderUtils.as
@@ -127,10 +127,10 @@ package org.apache.flex.utils
                 var colorLeft:uint;
                 var colorRight:uint;
                 var colorBottom:uint;
-                var widthTop:int = -1;
-                var widthLeft:int = -1;
-                var widthBottom:int = -1;
-                var widthRight:int = -1;
+                var widthTop:int = 0;
+                var widthLeft:int = 0;
+                var widthBottom:int = 0;
+                var widthRight:int = 0;
                 value = ValuesManager.valuesImpl.getValue(host, "border-top", state);
                 if (value != null)
                 {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
index 3dbee10..10dad30 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/CSSUtils.as
@@ -157,6 +157,9 @@ package org.apache.flex.utils
             if (value is Number)
                 return value as Number;
 
+            if (values is Number)
+                return values as Number;
+            
             if (value != null)
                 return toNumber(value as String, reference);
             if (values == null)
@@ -194,6 +197,9 @@ package org.apache.flex.utils
             if (value is Number)
                 return value as Number;
 
+            if (values is Number)
+                return values as Number;
+            
             if (value != null)
                 return toNumber(value as String, reference);
             if (values == null)
@@ -228,6 +234,9 @@ package org.apache.flex.utils
             if (value is Number)
                 return value as Number;
             
+            if (values is Number)
+                return values as Number;
+            
             if (value != null)
                 return toNumber(value as String, reference);
             if (values == null)
@@ -262,6 +271,9 @@ package org.apache.flex.utils
             if (value is Number)
                 return value as Number;
             
+            if (values is Number)
+                return values as Number;
+            
             if (value != null)
                 return toNumber(value as String, reference);
             if (values == null)

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
index d814a2a..2c11b13 100644
--- a/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
+++ b/frameworks/projects/Core/as/src/org/apache/flex/utils/SolidBorderUtil.as
@@ -177,11 +177,11 @@ public class SolidBorderUtil
             alpha = (colorBottom >>> 24 & 0xFF) / 255;
             g.beginFill(color, alpha);
             g.moveTo(0, height + thicknessBottom + thicknessTop);
-            g.lineTo(thicknessLeft, height + thicknessBottom);
+            g.lineTo(thicknessLeft, height + thicknessTop);
             if (width > 0)
                 g.lineTo(width + thicknessLeft, height + thicknessTop);
-            g.lineTo(width + thicknessRight + thicknessLeft + thicknessLeft, height + thicknessBottom);
-            g.lineTo(-0, height + thicknessRight + thicknessBottom);
+            g.lineTo(width + thicknessRight + thicknessLeft, height + thicknessBottom + thicknessTop);
+            g.lineTo(0, height + thicknessBottom + thicknessTop);
             g.endFill();
         }
     }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/HTML/as/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/defaults.css b/frameworks/projects/HTML/as/defaults.css
index ab99e2b..0344efc 100644
--- a/frameworks/projects/HTML/as/defaults.css
+++ b/frameworks/projects/HTML/as/defaults.css
@@ -436,6 +436,14 @@ StringItemRenderer
     height: 16;
 }
 
+TextArea
+{
+  padding: 6px 10px;
+  font-size: 13px;
+  border-radius: 6px;
+  border: 2px solid #1abc9c;
+}
+
 TextInput
 {
   height: 35px;
@@ -555,7 +563,7 @@ DropDownListList
     IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
     IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
     IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
-    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
+    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.DropDownListStringItemRenderer");
 }
 
 Image
@@ -626,11 +634,97 @@ RadioButton
     IBeadView:  ClassReference("org.apache.flex.html.beads.RadioCSSContentAndTextToggleButtonView");			
 }
 
+.vscrollbar-uparrow {
+  padding: 0px;
+  display: inline-block;
+  border-color: #16a085;
+  border-radius: initial;
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  vertical-align: middle;
+  border-bottom: 8px solid;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  -webkit-transition: border-color .25s, color .25s;
+          transition: border-color .25s, color .25s;
+  }
+.vscrollbar-downarrow-btn {
+  padding: 2px;
+  display: inline-block;
+  border-style: none;
+  border-radius: initial;
+  background-color: transparent;
+  width: 12;
+  height: 12;
+  margin-left: 5px;
+  vertical-align: middle;
+  }
+.vscrollbar-uparrow-btn {
+  padding: 2px;
+  display: inline-block;
+  border-style: none;
+  border-radius: initial;
+  background-color: transparent;
+  width: 12;
+  height: 12;
+  margin-left: 5px;
+  vertical-align: middle;
+  }
+.vscrollbar-downarrow {
+  padding: 0px;
+  display: inline-block;
+  border-color: #16a085;
+  border-radius: initial;
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  margin-left: 5px;
+  vertical-align: middle;
+  border-top: 8px solid;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  -webkit-transition: border-color .25s, color .25s;
+          transition: border-color .25s, color .25s;
+  }
+.vscrollbar-track {
+  padding: 0px;
+  position: relative;
+  width: 8px;
+  height: 8px;
+  /*margin-bottom: 20px;*/
+  cursor: pointer;
+  background-color: #ebedef;
+  border-radius: 4px;
+  /*border-radius: 32px;*/
+  box-shadow: none;
+  }
+.vscrollbar-thumb {
+  padding: 0px;
+  position: absolute;
+  z-index: 2;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  background-color: #16a085;
+  border-radius: 6px;
+  -webkit-transition: background .25s;
+          transition: background .25s;
+  }
+.vscrollbar-thumb:hover {
+  background-color: #48c9b0;
+  outline: none;
+  }
+.vscrollbar-thumb:active {
+  background-color: #16a085;
+  }
+
 ScrollBar
 {
     IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VScrollBarLayout");
     IBeadModel: ClassReference("org.apache.flex.html.beads.models.ScrollBarModel");
-    IBeadView: ClassReference("org.apache.flex.html.beads.ScrollBarView");
+    IBeadView: ClassReference("org.apache.flex.html.beads.CSSScrollBarView");
     IBeadController: ClassReference("org.apache.flex.html.beads.controllers.VScrollBarMouseController");
 }
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/HTML/as/src/HTMLClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/HTMLClasses.as b/frameworks/projects/HTML/as/src/HTMLClasses.as
index e48bfe0..b1bf557 100644
--- a/frameworks/projects/HTML/as/src/HTMLClasses.as
+++ b/frameworks/projects/HTML/as/src/HTMLClasses.as
@@ -52,7 +52,9 @@ internal class HTMLClasses
     import org.apache.flex.html.beads.PanelView; PanelView;
     import org.apache.flex.html.beads.PanelWithControlBarView; PanelWithControlBarView;
 	import org.apache.flex.html.beads.RadioButtonView; RadioButtonView;
-	import org.apache.flex.html.beads.ScrollBarView; ScrollBarView;
+    import org.apache.flex.html.beads.CSSScrollBarView; CSSScrollBarView;
+    import org.apache.flex.html.beads.ScrollBarView; ScrollBarView;
+    import org.apache.flex.html.beads.CSSScrollBarButtonView; CSSScrollBarButtonView;
 	import org.apache.flex.html.beads.SimpleAlertView; SimpleAlertView;
     import org.apache.flex.html.beads.SingleLineBorderBead; SingleLineBorderBead;
 	import org.apache.flex.html.beads.SliderView; SliderView;
@@ -96,6 +98,7 @@ internal class HTMLClasses
 	import org.apache.flex.html.beads.layouts.TileLayout; TileLayout;
     import org.apache.flex.html.beads.TextItemRendererFactoryForArrayData; TextItemRendererFactoryForArrayData;
 	import org.apache.flex.html.beads.DataItemRendererFactoryForArrayData; DataItemRendererFactoryForArrayData;
+    import org.apache.flex.html.supportClasses.DropDownListStringItemRenderer; DropDownListStringItemRenderer;
 	import org.apache.flex.html.supportClasses.DataGroup; DataGroup;
 	import org.apache.flex.html.supportClasses.Viewport; Viewport;
 	import org.apache.flex.html.supportClasses.ScrollingViewport; ScrollingViewport;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
index 72038e1..fcd14cc 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSButtonView.as
@@ -19,21 +19,23 @@
 package org.apache.flex.html.beads
 {
     import flash.display.DisplayObject;
-	import flash.display.Loader;
-	import flash.display.Shape;
-	import flash.display.SimpleButton;
-	import flash.display.Sprite;
-	import flash.events.Event;
-	import flash.net.URLRequest;
-	
-	import org.apache.flex.core.BeadViewBase;
-	import org.apache.flex.core.IBeadView;
-	import org.apache.flex.core.IStrand;
-	import org.apache.flex.core.ITextModel;
-	import org.apache.flex.core.ValuesManager;
-	import org.apache.flex.utils.CSSUtils;
-	import org.apache.flex.utils.SolidBorderUtil;
-	import org.apache.flex.utils.StringTrimmer;
+    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 org.apache.flex.core.BeadViewBase;
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.ITextModel;
+    import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.Event;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.utils.CSSBorderUtils;
+    import org.apache.flex.utils.CSSUtils;
+    import org.apache.flex.utils.StringTrimmer;
 
     /**
      *  The CSSButtonView class is the default view for
@@ -92,54 +94,26 @@ package org.apache.flex.html.beads
             setupBackground(overSprite, "hover");
             setupBackground(downSprite, "active");
             setupBackground(upSprite);
+            
+            IEventDispatcher(_strand).addEventListener("widthChanged",sizeChangeHandler);
+            IEventDispatcher(_strand).addEventListener("heightChanged",sizeChangeHandler);
 		}
 	
+        private function sizeChangeHandler(event:org.apache.flex.events.Event):void
+        {
+            setupSkins();
+        }
+        
+        protected function setupSkins():void
+        {
+            setupSkin(overSprite, "hover");
+            setupSkin(downSprite, "active");
+            setupSkin(upSprite);
+            updateHitArea();
+        }
+
 		private function setupSkin(sprite:Sprite, state:String = null):void
 		{
-			var borderColor:uint;
-			var borderThickness:uint;
-			var borderStyle:String;
-			var borderStyles:Object = ValuesManager.valuesImpl.getValue(_strand, "border", state);
-			if (borderStyles is Array)
-			{
-				borderColor = CSSUtils.toColor(borderStyles[2]);
-				borderStyle = borderStyles[1];
-				borderThickness = borderStyles[0];
-			}
-            else if (borderStyles is String)
-                borderStyle = borderStyles as String;
-			var value:Object = ValuesManager.valuesImpl.getValue(_strand, "border-style", state);
-			if (value != null)
-				borderStyle = value as String;
-			value = ValuesManager.valuesImpl.getValue(_strand, "border-color", state);
-			if (value != null)
-				borderColor = CSSUtils.toColor(value);
-			value = ValuesManager.valuesImpl.getValue(_strand, "border-width", state);
-			if (value != null)
-				borderThickness = value as uint;
-            if (borderStyle == "none")
-            {
-                borderStyle = "solid";
-                borderThickness = 0;
-            }
-            
-            var borderRadius:String;
-            var borderEllipseWidth:Number = NaN;
-            var borderEllipseHeight:Number = NaN;
-            value = ValuesManager.valuesImpl.getValue(_strand, "border-radius", state);
-            if (value != null)
-            {
-                if (value is Number)
-                    borderEllipseWidth = value as Number;
-                else
-                {
-                    borderRadius = value as String;
-                    var arr:Array = StringTrimmer.splitAndTrim(borderRadius, "/");
-                    borderEllipseWidth = CSSUtils.toNumber(arr[0]);
-                    if (arr.length > 1)
-                        borderEllipseHeight = CSSUtils.toNumber(arr[1]);
-                } 
-            }
 			var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
 			var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-left", state);
 			var paddingRight:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-right", state);
@@ -150,27 +124,11 @@ package org.apache.flex.html.beads
             var pt:Number = CSSUtils.getTopValue(paddingTop, padding, DisplayObject(_strand).height);
             var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, DisplayObject(_strand).height);
 			
-			var backgroundColor:Object = ValuesManager.valuesImpl.getValue(_strand, "background-color", state);
-            var bgColor:uint;
-            var bgAlpha:Number = 1;
-            if (backgroundColor != null)
-            {
-                bgColor = CSSUtils.toColorWithAlpha(backgroundColor);
-                if (bgColor & 0xFF000000)
-                {
-                    bgAlpha = bgColor >>> 24 / 255;
-                    bgColor = bgColor & 0xFFFFFF;
-                }
-            }
-			if (borderStyle == "solid")
-			{
-                sprite.graphics.clear();
-				SolidBorderUtil.drawBorder(sprite.graphics, 
-					0, 0, sprite.width + pl + pr, 
-					sprite.height + pt + pb,
-					borderColor, backgroundColor == null ? null : bgColor, borderThickness, bgAlpha,
-                    borderEllipseWidth, borderEllipseHeight);
-			}			
+		    CSSBorderUtils.draw(sprite.graphics, 
+					DisplayObject(_strand).width + pl + pr, 
+					DisplayObject(_strand).height + pt + pb,
+                    _strand as DisplayObject,
+                    state, true);
 		}
 		
         private function setupBackground(sprite:Sprite, state:String = null):void
@@ -187,6 +145,10 @@ package org.apache.flex.html.beads
                     updateHitArea();
                 });
             }
+            else {
+                setupSkin(sprite, state);
+                updateHitArea();
+            }
         }
         
 		private var upSprite:Sprite;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarButtonView.as
new file mode 100644
index 0000000..aa3d25e
--- /dev/null
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarButtonView.as
@@ -0,0 +1,182 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+    import flash.display.DisplayObject;
+    import flash.display.Loader;
+    import flash.display.Shape;
+    import flash.display.SimpleButton;
+    import flash.display.Sprite;
+    import flash.events.Event;
+    import flash.net.URLRequest;
+    
+    import org.apache.flex.core.BeadViewBase;
+    import org.apache.flex.core.CSSShape;
+    import org.apache.flex.core.IBeadView;
+    import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.ITextModel;
+    import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.Event;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.utils.CSSBorderUtils;
+    import org.apache.flex.utils.CSSUtils;
+    import org.apache.flex.utils.StringTrimmer;
+
+    /**
+     *  The CSSButtonView class is the default view for
+     *  the org.apache.flex.html.Button class.
+     *  It allows the look of the button to be expressed
+     *  in CSS via the background-image style.  This view
+     *  does not display text.  Use CSSTextButtonView and
+     *  TextButton instead.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSScrollBarButtonView extends BeadViewBase implements IBeadView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CSSScrollBarButtonView()
+		{
+			upSprite = new Sprite();
+			downSprite = new Sprite();
+			overSprite = new Sprite();
+            upArrowShape = new CSSShape();
+            downArrowShape = new CSSShape();
+            overArrowShape = new CSSShape();
+            overArrowShape.state = "hover";
+            upSprite.addChild(upArrowShape);
+            downSprite.addChild(downArrowShape);
+            overSprite.addChild(overArrowShape);
+		}
+		
+		private var textModel:ITextModel;
+		
+		private var shape:Shape;
+		
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			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(overSprite, overArrowShape, "hover");
+            setupBackground(downSprite, downArrowShape, "active");
+            setupBackground(upSprite, upArrowShape);
+            
+            IEventDispatcher(_strand).addEventListener("widthChanged",sizeChangeHandler);
+            IEventDispatcher(_strand).addEventListener("heightChanged",sizeChangeHandler);
+		}
+	
+        private function sizeChangeHandler(event:org.apache.flex.events.Event):void
+        {
+            setupSkins();
+        }
+        
+        protected function setupSkins():void
+        {
+            setupSkin(overSprite, overArrowShape, "hover");
+            setupSkin(downSprite, downArrowShape, "active");
+            setupSkin(upSprite, upArrowShape);
+            updateHitArea();
+        }
+
+		private function setupSkin(sprite:Sprite, shape:CSSShape, state:String = null):void
+		{
+			var padding:Object = ValuesManager.valuesImpl.getValue(_strand, "padding", state);
+			var paddingLeft:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-left", state);
+			var paddingRight:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-right", state);
+			var paddingTop:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-top", state);
+			var paddingBottom:Object = ValuesManager.valuesImpl.getValue(_strand, "padding-bottom", state);
+			var pl:Number = CSSUtils.getLeftValue(paddingLeft, padding, DisplayObject(_strand).width);
+            var pr:Number = CSSUtils.getRightValue(paddingRight, padding, DisplayObject(_strand).width);
+            var pt:Number = CSSUtils.getTopValue(paddingTop, padding, DisplayObject(_strand).height);
+            var pb:Number = CSSUtils.getBottomValue(paddingBottom, padding, DisplayObject(_strand).height);
+			
+            var w:Object = ValuesManager.valuesImpl.getValue(shape, "width", state);
+            var h:Object = ValuesManager.valuesImpl.getValue(shape, "height", state);
+            shape.draw(Number(w), Number(h));
+            
+		    CSSBorderUtils.draw(sprite.graphics, 
+					shape.width + pl + pr, 
+					shape.height + pt + pb,
+                    _strand as DisplayObject,
+                    state, true);
+		}
+		
+        private function setupBackground(sprite:Sprite, shape:CSSShape, 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(flash.events.Event.COMPLETE, function (e:flash.events.Event):void { 
+                    setupSkin(sprite, shape, state);
+                    updateHitArea();
+                });
+            }
+            else {
+                setupSkin(sprite, shape, state);
+                updateHitArea();
+            }
+        }
+        
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+        public var upArrowShape:CSSShape;
+        public var downArrowShape:CSSShape;
+        public var overArrowShape:CSSShape;
+				
+		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/0f63a710/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarView.as
new file mode 100644
index 0000000..0d48de8
--- /dev/null
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/CSSScrollBarView.as
@@ -0,0 +1,240 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads
+{
+	import flash.display.DisplayObject;
+	
+    import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IBeadView;
+	import org.apache.flex.core.IScrollBarModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.IUIBase;
+	import org.apache.flex.core.Strand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ValuesManager;
+    import org.apache.flex.events.IEventDispatcher;
+    import org.apache.flex.events.Event;
+	import org.apache.flex.html.Button;
+	import org.apache.flex.html.beads.controllers.ButtonAutoRepeatController;
+
+    /**
+     *  The ScrollBarView class is the default view for
+     *  the org.apache.flex.html.supportClasses.ScrollBar class.
+     *  It implements the classic desktop-like ScrollBar.
+     *  A different view would implement more modern scrollbars that hide themselves
+     *  until hovered over with the mouse.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class CSSScrollBarView extends Strand implements IBeadView, IStrand, IScrollBarView
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function CSSScrollBarView()
+		{
+		}
+				
+		private var sbModel:IScrollBarModel;
+		
+		private var _strand:IStrand;
+		
+        /**
+         *  The layout. 
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        private var layout:IBeadLayout;
+        
+        /**
+         *  The host component. 
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get host():IUIBase
+        {
+            return _strand as IUIBase;
+        }
+
+        /**
+         *  @copy org.apache.flex.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+            
+            for each (var bead:IBead in beads)
+                addBead(bead);
+                        
+			sbModel = value.getBeadByType(IScrollBarModel) as IScrollBarModel;
+            sbModel = _strand.getBeadByType(IScrollBarModel) as IScrollBarModel;
+            sbModel.addEventListener("maximumChange", changeHandler);
+            sbModel.addEventListener("minimumChange", changeHandler);
+            sbModel.addEventListener("snapIntervalChange", changeHandler);
+            sbModel.addEventListener("stepSizeChange", changeHandler);
+            sbModel.addEventListener("pageSizeChange", changeHandler);
+            sbModel.addEventListener("valueChange", changeHandler);
+            
+            // TODO: (aharui) put in values impl
+			_increment = new Button();
+            Button(_increment).className = "vscrollbar-downarrow-btn";
+            var sbView:CSSScrollBarButtonView = new CSSScrollBarButtonView();
+            sbView.upArrowShape.className = "vscrollbar-downarrow";
+            sbView.downArrowShape.className = "vscrollbar-downarrow";
+            sbView.overArrowShape.className = "vscrollbar-downarrow";
+            Button(_increment).addBead(sbView);
+            Button(_increment).addBead(new ButtonAutoRepeatController());
+			_decrement = new Button();
+            Button(_decrement).className = "vscrollbar-uparrow-btn";
+            sbView = new CSSScrollBarButtonView();
+            sbView.upArrowShape.className = "vscrollbar-uparrow";
+            sbView.downArrowShape.className = "vscrollbar-uparrow";
+            sbView.overArrowShape.className = "vscrollbar-uparrow";
+            Button(_decrement).addBead(sbView);
+            Button(_decrement).addBead(new ButtonAutoRepeatController());
+			_track = new Button();
+            Button(_track).className = "vscrollbar-track";
+			_thumb = new Button();				
+            Button(_thumb).className = "vscrollbar-thumb";
+            
+            UIBase(value).addElement(_decrement);
+            UIBase(value).addElement(_increment);
+            UIBase(value).addElement(_track);
+            UIBase(value).addElement(_thumb);
+            
+            IEventDispatcher(_strand).addEventListener("heightChanged", changeHandler);
+            
+            if( _strand.getBeadByType(IBeadLayout) == null ) {
+                layout = new (ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout")) as IBeadLayout;
+                _strand.addBead(layout);
+            }
+            layout.layout();
+		}
+						
+        private function changeHandler(event:Event):void
+        {
+            layout.layout();    
+        }
+        
+		private var _decrement:DisplayObject;
+		private var _increment:DisplayObject;
+		private var _track:DisplayObject;
+		private var _thumb:DisplayObject;
+		
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#decrement
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get decrement():DisplayObject
+		{
+			return _decrement;
+		}
+
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#increment
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get increment():DisplayObject
+		{
+			return _increment;
+		}
+        
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#track
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get track():DisplayObject
+		{
+			return _track;
+		}
+        
+        /**
+         *  @copy org.apache.flex.html.beads.IScrollBarView#thumb
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function get thumb():DisplayObject
+		{
+			return _thumb;
+		}
+		
+        /**
+         *  @copy org.apache.flex.core.IBeadView#viewHeight
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get viewHeight():Number
+        {
+            // don't want to put $height in an interface
+            return _strand["$height"];
+        }
+        
+        /**
+         *  @copy org.apache.flex.core.IBeadView#viewWidth
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function get viewWidth():Number
+        {
+            // don't want to put $width in an interface
+            return _strand["$width"];
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
index 081208c..603b9b7 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/layouts/VScrollBarLayout.as
@@ -91,15 +91,11 @@ package org.apache.flex.html.beads.layouts
 			
 			decrement.x = 0;
 			decrement.y = 0;
-			decrement.width = DisplayObject(_strand).width;
-			decrement.height = decrement.width;
 			
 			increment.x = 0;
-			increment.width = DisplayObject(_strand).width;
-			increment.height = increment.width;
 			increment.y = h - increment.height - 1;
 
-			track.x = 0;
+			track.x = (thumb.width - track.width) / 2;
 			track.y = decrement.height;
 			track.height = increment.y - decrement.height;
             thumb.height = sbModel.pageSize / (sbModel.maximum - sbModel.minimum) * track.height;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/0f63a710/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListStringItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListStringItemRenderer.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListStringItemRenderer.as
new file mode 100644
index 0000000..e1a95d5
--- /dev/null
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/DropDownListStringItemRenderer.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.supportClasses
+{
+	import flash.text.TextFieldAutoSize;
+	import flash.text.TextFieldType;
+	
+	import org.apache.flex.core.CSSTextField;
+    import org.apache.flex.core.ValuesManager;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.html.beads.ITextItemRenderer;
+
+	/**
+	 *  The DropDownListStringItemRenderer is a StringItemRenderer with a particular
+     *  className for use in DropDownList.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class DropDownListStringItemRenderer extends StringItemRenderer
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function DropDownListStringItemRenderer()
+		{
+			super();
+			
+            className = 'dropdown-menu-item-renderer';
+            percentWidth = 90;
+		}
+		
+		/**
+		 * @private
+		 */
+		override public function updateRenderer():void
+		{
+            className = selected ? 'dropdown-menu-item-renderer-selected' : 'dropdown-menu-item-renderer';
+            if (selected)
+                selectedColor = ValuesManager.valuesImpl.getValue(this, 'background-color');
+            if (hovered)
+                highlightColor = ValuesManager.valuesImpl.getValue(this, 'background-color', "hover");
+            downColor = selectedColor;
+			super.updateRenderer();
+		}
+	}
+}