You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2015/07/29 21:51:48 UTC

git commit: [flex-asjs] [refs/heads/develop] - Updated horizontal scroll bar to match new look of vertical scroll bar. Fixed scroll bar layout alignment issues due to change in scroll bar size.

Repository: flex-asjs
Updated Branches:
  refs/heads/develop 3970d514c -> 4585e7693


Updated horizontal scroll bar to match new look of vertical scroll bar. Fixed scroll bar layout alignment issues due to change in scroll bar size.


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

Branch: refs/heads/develop
Commit: 4585e76934dc430294b31e65fec062a74b6c0794
Parents: 3970d51
Author: Peter Ent <pe...@apache.org>
Authored: Wed Jul 29 15:51:45 2015 -0400
Committer: Peter Ent <pe...@apache.org>
Committed: Wed Jul 29 15:51:45 2015 -0400

----------------------------------------------------------------------
 .../flex/html/beads/DownArrowButtonView.as      |  18 +--
 .../flex/html/beads/HScrollBarThumbView.as      |  36 ++---
 .../flex/html/beads/HScrollBarTrackView.as      |  12 +-
 .../apache/flex/html/beads/HScrollBarView.as    | 143 +------------------
 .../flex/html/beads/LeftArrowButtonView.as      |  24 ++--
 .../flex/html/beads/RightArrowButtonView.as     |  24 ++--
 .../org/apache/flex/html/beads/ScrollBarView.as |  42 ++----
 .../apache/flex/html/beads/UpArrowButtonView.as |  16 +--
 .../flex/html/beads/VScrollBarThumbView.as      |  12 +-
 .../flex/html/beads/VScrollBarTrackView.as      |   4 +-
 .../apache/flex/html/beads/VScrollBarView.as    | 141 +-----------------
 .../flex/html/beads/layouts/VScrollBarLayout.as |   3 +-
 .../html/supportClasses/ScrollingViewport.as    |  38 +++--
 13 files changed, 115 insertions(+), 398 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DownArrowButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DownArrowButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DownArrowButtonView.as
index 55e4c67..9696f7c 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DownArrowButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/DownArrowButtonView.as
@@ -37,7 +37,7 @@ package org.apache.flex.html.beads
      *  @productversion FlexJS 0.0
      */
 	public class DownArrowButtonView extends BeadViewBase implements IBeadView
-	{
+	{		
         /**
          *  Constructor.
          *  
@@ -61,14 +61,14 @@ package org.apache.flex.html.beads
 		{
 			g.lineStyle(1, 0x808080);
 			g.beginFill(bgColor);
-			g.drawRoundRect(0, 0, 12, 12, 4);
+			g.drawRoundRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize, ScrollBarView.ThirdSize);
 			g.endFill();
 			g.lineStyle(0);
 			g.beginFill(0);
-			g.moveTo(3, 3);
-			g.lineTo(9, 3);
-			g.lineTo(6, 9);
-			g.lineTo(3, 3);
+			g.moveTo(ScrollBarView.QuarterSize, ScrollBarView.QuarterSize);
+			g.lineTo(ScrollBarView.ThreeQuarterSize, ScrollBarView.QuarterSize);
+			g.lineTo(ScrollBarView.HalfSize, ScrollBarView.ThreeQuarterSize);
+			g.lineTo(ScrollBarView.QuarterSize, ScrollBarView.QuarterSize);
 			g.endFill();
 		}
 		
@@ -87,7 +87,7 @@ package org.apache.flex.html.beads
 			super.strand = value;
 			shape = new Shape();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 12, 12);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize);
 			shape.graphics.endFill();
 			SimpleButton(value).upState = upView;
 			SimpleButton(value).downState = downView;
@@ -104,8 +104,8 @@ package org.apache.flex.html.beads
         
         private function sizeChangeHandler(event:Event):void
         {
-            SimpleButton(_strand).scaleX = SimpleButton(_strand).width / 12;
-            SimpleButton(_strand).scaleY = SimpleButton(_strand).height / 12;
+            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/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarThumbView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarThumbView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarThumbView.as
index 7afa5d7..05a41b6 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarThumbView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarThumbView.as
@@ -18,16 +18,17 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.beads
 {
+	import flash.display.DisplayObject;
 	import flash.display.Graphics;
 	import flash.display.Shape;
 	import flash.display.SimpleButton;
-    import flash.display.DisplayObject;
-
-    import org.apache.flex.core.BeadViewBase;
-    import org.apache.flex.core.IBeadView;
+	
+	import org.apache.flex.core.BeadViewBase;
+	import org.apache.flex.core.IBeadView;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.events.Event;
-	import org.apache.flex.events.IEventDispatcher;	
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.html.supportClasses.ScrollBar;
 	
     /**
      *  The HScrollBarThumbView class is the view for
@@ -58,15 +59,8 @@ package org.apache.flex.html.beads
             g.clear();
 			g.lineStyle(1);
 			g.beginFill(bgColor);
-			g.drawRect(0, 0, ww, 16);
+			g.drawRoundRect(0, 0, ww, ScrollBarView.FullSize, ScrollBarView.HalfSize);
 			g.endFill();
-            ww = Math.round(ww / 2);
-			g.moveTo(ww, 4);
-			g.lineTo(ww, 12);
-			g.moveTo(ww - 4, 4);
-			g.lineTo(ww - 4, 12);
-			g.moveTo(ww + 4, 4);
-			g.lineTo(ww + 4, 12);
 		}
 		
 		private var shape:Shape;
@@ -87,13 +81,13 @@ package org.apache.flex.html.beads
             downView = new Shape();
             overView = new Shape();
             
-            drawView(upView.graphics, 0xCCCCCC);
-            drawView(downView.graphics, 0x808080);
-            drawView(overView.graphics, 0xEEEEEE);
+            drawView(upView.graphics, 0xc8c8c8);
+            drawView(downView.graphics, 0xc8c8c8);
+            drawView(overView.graphics, 0xb8b8b8);
 
             shape = new Shape();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 16, 16);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize);
 			shape.graphics.endFill();
 			SimpleButton(value).upState = upView;
 			SimpleButton(value).downState = downView;
@@ -108,13 +102,13 @@ package org.apache.flex.html.beads
 			DisplayObject(_strand).scaleX = 1.0;
 			
             var ww:Number = DisplayObject(_strand).width;
-            drawView(upView.graphics, 0xCCCCCC);
-            drawView(downView.graphics, 0x808080);
-            drawView(overView.graphics, 0xEEEEEE);
+            drawView(upView.graphics, 0xc8c8c8);
+            drawView(downView.graphics, 0xc8c8c8);
+            drawView(overView.graphics, 0xb8b8b8);
             
             shape.graphics.clear();
             shape.graphics.beginFill(0xCCCCCC);
-            shape.graphics.drawRect(0, 0, ww, 16);
+            shape.graphics.drawRect(0, 0, ww, ScrollBarView.FullSize);
             shape.graphics.endFill();
         }
         

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarTrackView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarTrackView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarTrackView.as
index 1558ff2..5ec6777 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarTrackView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarTrackView.as
@@ -58,9 +58,9 @@ package org.apache.flex.html.beads
 		private function drawView(g:Graphics, bgColor:uint, w:Number):void
 		{
 			g.clear();
-			g.lineStyle(1);
+			g.lineStyle(1, 0x808080);
 			g.beginFill(bgColor);
-			g.drawRect(0, 0, w, 16);
+			g.drawRect(0, 0, w, ScrollBarView.FullSize);
 			g.endFill();
 			g.lineStyle(0);
 		}
@@ -72,12 +72,12 @@ package org.apache.flex.html.beads
 			
 			var w:Number = SimpleButton(_strand).width;
 			
-			drawView(upView.graphics, 0xCCCCCC, w);
-			drawView(downView.graphics, 0x808080, w);
-			drawView(overView.graphics, 0xEEEEEE, w);	
+			drawView(upView.graphics, 0xf8f8f8, w);
+			drawView(downView.graphics, 0xd8d8d8, w);
+			drawView(overView.graphics, 0xe8e8e8, w);	
 			shape.graphics.clear();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 16, w);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, w);
 			shape.graphics.endFill();
 			
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarView.as
index a985cd4..68fe11f 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/HScrollBarView.as
@@ -46,7 +46,7 @@ package org.apache.flex.html.beads
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */
-	public class HScrollBarView extends Strand implements IBeadView, IStrand, IScrollBarView
+	public class HScrollBarView extends ScrollBarView implements IBeadView, IStrand, IScrollBarView
 	{
         /**
          *  Constructor.
@@ -59,33 +59,6 @@ package org.apache.flex.html.beads
 		public function HScrollBarView()
 		{
 		}
-				
-		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
@@ -95,21 +68,11 @@ package org.apache.flex.html.beads
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
          */
-		public function set strand(value:IStrand):void
+		override 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);
+			super.strand = value;
+			
+			UIBase(value).setHeight(ScrollBarView.FullSize, true);
             
             // TODO: (aharui) put in values impl
 			_increment = new Button();
@@ -129,102 +92,8 @@ package org.apache.flex.html.beads
             UIBase(value).addChild(_thumb);
             
             IEventDispatcher(_strand).addEventListener("widthChanged", 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;
+            layout.layout();
 		}
-		
-        /**
-         *  @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/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/LeftArrowButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/LeftArrowButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/LeftArrowButtonView.as
index f367533..9fca051 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/LeftArrowButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/LeftArrowButtonView.as
@@ -53,23 +53,23 @@ package org.apache.flex.html.beads
 			downView = new Shape();
 			overView = new Shape();
 
-			drawView(upView.graphics, 0xCCCCCC);
-			drawView(downView.graphics, 0x808080);
-			drawView(overView.graphics, 0xEEEEEE);
+			drawView(upView.graphics, 0xf8f8f8);
+			drawView(downView.graphics, 0xd8d8d8);
+			drawView(overView.graphics, 0xe8e8e8);
 		}
 		
 		private function drawView(g:Graphics, bgColor:uint):void
 		{
-			g.lineStyle(1);
+			g.lineStyle(1, 0x808080);
 			g.beginFill(bgColor);
-			g.drawRect(0, 0, 16, 16);
+			g.drawRoundRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize, ScrollBarView.ThirdSize);
 			g.endFill();
 			g.lineStyle(0);
 			g.beginFill(0);
-			g.moveTo(4, 8);
-			g.lineTo(12, 12);
-			g.lineTo(12, 4);
-			g.lineTo(4, 8);
+			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();
 		}
 		
@@ -88,7 +88,7 @@ package org.apache.flex.html.beads
 			super.strand = value;
 			shape = new Shape();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 16, 16);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize);
 			shape.graphics.endFill();
 			SimpleButton(value).upState = upView;
 			SimpleButton(value).downState = downView;
@@ -105,8 +105,8 @@ package org.apache.flex.html.beads
 		
         private function sizeChangeHandler(event:Event):void
         {
-            SimpleButton(_strand).scaleX = SimpleButton(_strand).width / 16;
-            SimpleButton(_strand).scaleY = SimpleButton(_strand).height / 16;
+            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/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/RightArrowButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/RightArrowButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/RightArrowButtonView.as
index f6f956a..225c37c 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/RightArrowButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/RightArrowButtonView.as
@@ -53,23 +53,23 @@ package org.apache.flex.html.beads
 			downView = new Shape();
 			overView = new Shape();
 
-			drawView(upView.graphics, 0xCCCCCC);
-			drawView(downView.graphics, 0x808080);
-			drawView(overView.graphics, 0xEEEEEE);
+			drawView(upView.graphics, 0xf8f8f8);
+			drawView(downView.graphics, 0xd8d8d8);
+			drawView(overView.graphics, 0xe8e8e8);
 		}
 		
 		private function drawView(g:Graphics, bgColor:uint):void
 		{
-			g.lineStyle(1);
+			g.lineStyle(1, 0x808080);
 			g.beginFill(bgColor);
-			g.drawRect(0, 0, 16, 16);
+			g.drawRoundRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize, ScrollBarView.ThirdSize);
 			g.endFill();
 			g.lineStyle(0);
 			g.beginFill(0);
-			g.moveTo(4, 4);
-			g.lineTo(12, 8);
-			g.lineTo(4, 12);
-			g.lineTo(4, 4);
+			g.moveTo(ScrollBarView.QuarterSize, ScrollBarView.QuarterSize);
+			g.lineTo(ScrollBarView.ThreeQuarterSize, ScrollBarView.HalfSize);
+			g.lineTo(ScrollBarView.QuarterSize, ScrollBarView.ThreeQuarterSize);
+			g.lineTo(ScrollBarView.QuarterSize, ScrollBarView.QuarterSize);
 			g.endFill();
 		}
 		
@@ -88,7 +88,7 @@ package org.apache.flex.html.beads
 			super.strand = value;
 			shape = new Shape();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 16, 16);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize);
 			shape.graphics.endFill();
 			SimpleButton(value).upState = upView;
 			SimpleButton(value).downState = downView;
@@ -105,8 +105,8 @@ package org.apache.flex.html.beads
 		
         private function sizeChangeHandler(event:Event):void
         {
-            SimpleButton(_strand).scaleX = SimpleButton(_strand).width / 16;
-            SimpleButton(_strand).scaleY = SimpleButton(_strand).height / 16;
+            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/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ScrollBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ScrollBarView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ScrollBarView.as
index e6f31cf..e3f8c50 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ScrollBarView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/ScrollBarView.as
@@ -48,6 +48,12 @@ package org.apache.flex.html.beads
      */
 	public class ScrollBarView extends Strand implements IBeadView, IStrand, IScrollBarView
 	{
+		public static const FullSize:int = 12;
+		public static const ThreeQuarterSize:int = 9;
+		public static const HalfSize:int = 6;
+		public static const ThirdSize:int = 4;
+		public static const QuarterSize:int = 3;
+		
         /**
          *  Constructor.
          *  
@@ -60,9 +66,9 @@ package org.apache.flex.html.beads
 		{
 		}
 				
-		private var sbModel:IScrollBarModel;
+		protected var sbModel:IScrollBarModel;
 		
-		private var _strand:IStrand;
+		protected var _strand:IStrand;
 		
         /**
          *  The layout. 
@@ -72,7 +78,7 @@ package org.apache.flex.html.beads
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
          */
-        private var layout:IBeadLayout;
+        protected var layout:IBeadLayout;
         
         /**
          *  The host component. 
@@ -111,41 +117,21 @@ package org.apache.flex.html.beads
             sbModel.addEventListener("pageSizeChange", changeHandler);
             sbModel.addEventListener("valueChange", changeHandler);
             
-            // TODO: (aharui) put in values impl
-			_increment = new Button();
-			Button(_increment).addBead(new DownArrowButtonView());
-            Button(_increment).addBead(new ButtonAutoRepeatController());
-			_decrement = new Button();
-			Button(_decrement).addBead(new UpArrowButtonView());
-            Button(_decrement).addBead(new ButtonAutoRepeatController());
-			_track = new Button();				
-			Button(_track).addBead(new VScrollBarTrackView());
-			_thumb = new Button();				
-			Button(_thumb).addBead(new VScrollBarThumbView());
-            
-            UIBase(value).addChild(_decrement);
-            UIBase(value).addChild(_increment);
-            UIBase(value).addChild(_track);
-            UIBase(value).addChild(_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
+        protected function changeHandler(event:Event):void
         {
             layout.layout();    
         }
         
-		private var _decrement:DisplayObject;
-		private var _increment:DisplayObject;
-		private var _track:DisplayObject;
-		private var _thumb:DisplayObject;
+		protected var _decrement:DisplayObject;
+		protected var _increment:DisplayObject;
+		protected var _track:DisplayObject;
+		protected var _thumb:DisplayObject;
 		
         /**
          *  @copy org.apache.flex.html.beads.IScrollBarView#decrement

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/UpArrowButtonView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/UpArrowButtonView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/UpArrowButtonView.as
index 4f12625..8e6ff4a 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/UpArrowButtonView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/UpArrowButtonView.as
@@ -62,14 +62,14 @@ package org.apache.flex.html.beads
 		{
 			g.lineStyle(1);
 			g.beginFill(bgColor);
-			g.drawRoundRect(0, 0, 12, 12, 4);
+			g.drawRoundRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize, ScrollBarView.ThirdSize);
 			g.endFill();
 			g.lineStyle(0);
 			g.beginFill(0);
-			g.moveTo(3, 9);
-			g.lineTo(9, 9);
-			g.lineTo(6, 3);
-			g.lineTo(3, 9);
+			g.moveTo(ScrollBarView.QuarterSize, ScrollBarView.ThreeQuarterSize);
+			g.lineTo(ScrollBarView.ThreeQuarterSize, ScrollBarView.ThreeQuarterSize);
+			g.lineTo(ScrollBarView.HalfSize, ScrollBarView.QuarterSize);
+			g.lineTo(ScrollBarView.QuarterSize, ScrollBarView.ThreeQuarterSize);
 			g.endFill();
 		}
 		
@@ -88,7 +88,7 @@ package org.apache.flex.html.beads
 			super.strand = value;
 			shape = new Shape();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 12, 12);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize);
 			shape.graphics.endFill();
 			SimpleButton(value).upState = upView;
 			SimpleButton(value).downState = downView;
@@ -105,8 +105,8 @@ package org.apache.flex.html.beads
 		
         private function sizeChangeHandler(event:Event):void
         {
-            SimpleButton(_strand).scaleX = SimpleButton(_strand).width / 12;
-            SimpleButton(_strand).scaleY = SimpleButton(_strand).height / 12;
+            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/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarThumbView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarThumbView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarThumbView.as
index 6578a82..0f70b37 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarThumbView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarThumbView.as
@@ -58,7 +58,7 @@ package org.apache.flex.html.beads
             g.clear();
 			g.lineStyle(1);
 			g.beginFill(bgColor);
-			g.drawRoundRect(0, 0, 12, hh, 6);
+			g.drawRoundRect(0, 0, ScrollBarView.FullSize, hh, ScrollBarView.HalfSize);
 			g.endFill();
 		}
 		
@@ -81,12 +81,12 @@ package org.apache.flex.html.beads
             overView = new Shape();
             
             drawView(upView.graphics, 0xc8c8c8);
-            drawView(downView.graphics, 0xa8a8a8);
+            drawView(downView.graphics, 0xc8c8c8);
             drawView(overView.graphics, 0xb8b8b8);
 
             shape = new Shape();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 12, 12);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, ScrollBarView.FullSize);
 			shape.graphics.endFill();
 			SimpleButton(value).upState = upView;
 			SimpleButton(value).downState = downView;
@@ -101,13 +101,13 @@ package org.apache.flex.html.beads
 			DisplayObject(_strand).scaleX = 1.0;
 			
             var hh:Number = DisplayObject(_strand).height;
-            drawView(upView.graphics, 0xC8c8c8);
-            drawView(downView.graphics, 0xa8a8a8);
+            drawView(upView.graphics, 0xc8c8c8);
+            drawView(downView.graphics, 0xc8c8c8);
             drawView(overView.graphics, 0xb8b8b8);
             
             shape.graphics.clear();
             shape.graphics.beginFill(0xCCCCCC);
-            shape.graphics.drawRect(0, 0, 12, hh);
+            shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, hh);
             shape.graphics.endFill();
         }
         

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarTrackView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarTrackView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarTrackView.as
index e040b7e..79e2f58 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarTrackView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarTrackView.as
@@ -60,7 +60,7 @@ package org.apache.flex.html.beads
 			g.clear();
 			g.lineStyle(1, 0x808080);
 			g.beginFill(bgColor);
-			g.drawRect(0, 0, 12, h);
+			g.drawRect(0, 0, ScrollBarView.FullSize, h);
 			g.endFill();
 			g.lineStyle(0);
 		}
@@ -77,7 +77,7 @@ package org.apache.flex.html.beads
 			drawView(overView.graphics, 0xe8e8e8, h);	
 			shape.graphics.clear();
 			shape.graphics.beginFill(0xCCCCCC);
-			shape.graphics.drawRect(0, 0, 12, h);
+			shape.graphics.drawRect(0, 0, ScrollBarView.FullSize, h);
 			shape.graphics.endFill();
 			
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarView.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarView.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarView.as
index e116103..840f7bf 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarView.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/beads/VScrollBarView.as
@@ -46,7 +46,7 @@ package org.apache.flex.html.beads
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */
-	public class VScrollBarView extends Strand implements IBeadView, IStrand, IScrollBarView
+	public class VScrollBarView extends ScrollBarView implements IBeadView, IStrand, IScrollBarView
 	{
         /**
          *  Constructor.
@@ -59,33 +59,6 @@ package org.apache.flex.html.beads
 		public function VScrollBarView()
 		{
 		}
-				
-		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
@@ -95,21 +68,11 @@ package org.apache.flex.html.beads
          *  @playerversion AIR 2.6
          *  @productversion FlexJS 0.0
          */
-		public function set strand(value:IStrand):void
+		override 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);
+			super.strand = value;
+			
+			UIBase(value).setWidth(ScrollBarView.FullSize, true);
             
             // TODO: (aharui) put in values impl
 			_increment = new Button();
@@ -130,101 +93,7 @@ package org.apache.flex.html.beads
             
             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/4585e769/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 603b9b7..dddbff3 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
@@ -27,6 +27,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
 	import org.apache.flex.html.beads.IScrollBarView;
+	import org.apache.flex.html.beads.ScrollBarView;
 	import org.apache.flex.utils.BeadMetrics;
 
     /**
@@ -95,7 +96,7 @@ package org.apache.flex.html.beads.layouts
 			increment.x = 0;
 			increment.y = h - increment.height - 1;
 
-			track.x = (thumb.width - track.width) / 2;
+			track.x = 0;
 			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/4585e769/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
index d53acb0..a2f220b 100644
--- a/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
+++ b/frameworks/projects/HTML/as/src/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -12,14 +12,12 @@ package org.apache.flex.html.supportClasses
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.core.UIMetrics;
 	import org.apache.flex.events.Event;
+	import org.apache.flex.html.beads.ScrollBarView;
 	import org.apache.flex.html.beads.models.ScrollBarModel;
 	import org.apache.flex.utils.BeadMetrics;
 	
 	public class ScrollingViewport implements IBead, IViewport
-	{
-		static private const scrollerSize:int = 16;
-		static private const scrollerSizeWithBorder:int = 17;
-		
+	{		
 		public function ScrollingViewport()
 		{
 		}
@@ -77,33 +75,33 @@ package org.apache.flex.html.supportClasses
 			
 			if (_verticalScroller) {
 				ScrollBarModel(_verticalScroller.model).maximum = model.contentHeight;
-				_verticalScroller.x = model.viewportWidth - scrollerSizeWithBorder;
+				_verticalScroller.x = model.viewportWidth - _verticalScroller.width + 1;
 				_verticalScroller.y = model.viewportY;
 				
 				rect = contentArea.scrollRect;
 				rect.y = ScrollBarModel(_verticalScroller.model).value;
 				contentArea.scrollRect = rect;
 				
-				hbarAdjustWidthBy = scrollerSizeWithBorder;
+				hbarAdjustWidthBy = _verticalScroller.width + 1;
 			}
 			
 			if (_horizontalScroller) {
 				ScrollBarModel(_horizontalScroller.model).maximum = model.contentWidth;
 				_horizontalScroller.x = model.viewportX;
-				_horizontalScroller.y = model.viewportHeight - scrollerSizeWithBorder;
+				_horizontalScroller.y = model.viewportHeight - _horizontalScroller.height + 1;
 				
 				rect = contentArea.scrollRect;
 				rect.x = ScrollBarModel(_horizontalScroller.model).value;
 				contentArea.scrollRect = rect;
 				
-				vbarAdjustHeightBy = scrollerSizeWithBorder;
+				vbarAdjustHeightBy = _horizontalScroller.height + 1;
 			}
 			
 			if (_verticalScroller) {
-				_verticalScroller.setWidthAndHeight(scrollerSize, model.viewportHeight - vbarAdjustHeightBy, false);
+				_verticalScroller.setHeight(model.viewportHeight - vbarAdjustHeightBy, false);
 			}
 			if (_horizontalScroller) {
-				_horizontalScroller.setWidthAndHeight(model.viewportWidth - hbarAdjustWidthBy, scrollerSize, false);
+				_horizontalScroller.setWidth(model.viewportWidth - hbarAdjustWidthBy, false);
 			} 
 			
 			if (!model.contentIsHost) {
@@ -147,23 +145,23 @@ package org.apache.flex.html.supportClasses
 			if (addVbar) needsVerticalScroller();
 			if (_verticalScroller) {
 				ScrollBarModel(_verticalScroller.model).maximum = model.contentHeight;
-				ScrollBarModel(_verticalScroller.model).pageSize = model.viewportHeight;// - metrics.top - metrics.bottom;
-				ScrollBarModel(_verticalScroller.model).pageStepSize = model.viewportHeight;// - metrics.top - metrics.bottom;
+				ScrollBarModel(_verticalScroller.model).pageSize = model.viewportHeight;
+				ScrollBarModel(_verticalScroller.model).pageStepSize = model.viewportHeight;
 			}
 			
 			if (addHbar) needsHorizontalScroller();
 			if (_horizontalScroller) {
 				ScrollBarModel(_horizontalScroller.model).maximum = model.contentWidth;
-				ScrollBarModel(_horizontalScroller.model).pageSize = model.viewportWidth;// - metrics.left - metrics.right;
-				ScrollBarModel(_horizontalScroller.model).pageStepSize = model.viewportWidth;// - metrics.left - metrics.right
+				ScrollBarModel(_horizontalScroller.model).pageSize = model.viewportWidth;
+				ScrollBarModel(_horizontalScroller.model).pageStepSize = model.viewportWidth;
 			}
 			
 			var rect:Rectangle = contentArea.scrollRect;
 			if (rect) {
 				rect.x = 0;
 				rect.y = 0;
-				rect.width = model.viewportWidth - metrics.left;// - metrics.right;
-				rect.height = model.viewportHeight - 2*metrics.top;// - 2*metrics.bottom;
+				rect.width = model.viewportWidth - metrics.left;
+				rect.height = model.viewportHeight - 2*metrics.top;
 				contentArea.scrollRect = rect;
 			}
 		}
@@ -191,9 +189,9 @@ package org.apache.flex.html.supportClasses
 				_verticalScroller = createVerticalScrollBar();
 				var vMetrics:UIMetrics = BeadMetrics.getMetrics(_verticalScroller);
 				_verticalScroller.visible = true;
-				_verticalScroller.x = model.viewportWidth - scrollerSizeWithBorder - vMetrics.left - vMetrics.right;
+				_verticalScroller.x = model.viewportWidth - (_verticalScroller.width+1) - vMetrics.left - vMetrics.right;
 				_verticalScroller.y = model.viewportY;
-				_verticalScroller.setWidthAndHeight(scrollerSize, model.viewportHeight, true);
+				_verticalScroller.setHeight(model.viewportHeight, true);
 				
 				host.addElement(_verticalScroller, false);
 			}
@@ -213,8 +211,8 @@ package org.apache.flex.html.supportClasses
 				var hMetrics:UIMetrics = BeadMetrics.getMetrics(_horizontalScroller);
 				_horizontalScroller.visible = true;
 				_horizontalScroller.x = model.viewportX;
-				_horizontalScroller.y = model.viewportHeight - scrollerSizeWithBorder - hMetrics.top - hMetrics.bottom;
-				_horizontalScroller.setWidthAndHeight(model.viewportWidth, scrollerSize, true);
+				_horizontalScroller.y = model.viewportHeight - (_horizontalScroller.height+1) - hMetrics.top - hMetrics.bottom;
+				_horizontalScroller.setWidth(model.viewportWidth, true);
 				
 				host.addElement(_horizontalScroller, false);
 			}