You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/08/17 10:24:28 UTC

[29/47] git commit: [flex-sdk] [refs/heads/develop] - Skins for VScrollBar and HScrollBar

Skins for VScrollBar and HScrollBar


Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/77ffb23f
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/77ffb23f
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/77ffb23f

Branch: refs/heads/develop
Commit: 77ffb23f38b11b0edb97395ed44ea53e21cde725
Parents: b2fa2be
Author: Om <bi...@gmail.com>
Authored: Tue Jul 22 00:14:56 2014 -0700
Committer: Om <bi...@gmail.com>
Committed: Tue Jul 22 00:14:56 2014 -0700

----------------------------------------------------------------------
 .../projects/mobiletheme/src/android4x.css      |  12 ++
 .../src/spark/skins/android4/HScrollBarSkin.as  | 205 ++++++++++++++++++
 .../spark/skins/android4/HScrollBarThumbSkin.as | 169 +++++++++++++++
 .../src/spark/skins/android4/VScrollBarSkin.as  | 207 +++++++++++++++++++
 .../spark/skins/android4/VScrollBarThumbSkin.as | 178 ++++++++++++++++
 5 files changed, 771 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/77ffb23f/frameworks/projects/mobiletheme/src/android4x.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/android4x.css b/frameworks/projects/mobiletheme/src/android4x.css
index 280ca6e..d874051 100644
--- a/frameworks/projects/mobiletheme/src/android4x.css
+++ b/frameworks/projects/mobiletheme/src/android4x.css
@@ -150,6 +150,12 @@ CheckBox
 	chromeColor: #FFFFFF;
 }
 
+HScrollBar
+{
+	skinClass: ClassReference("spark.skins.android4.HScrollBarSkin");
+	thumbColor: #333333;
+}
+
 HSlider
 {
     skinClass: ClassReference("spark.skins.android4.HSliderSkin");
@@ -233,6 +239,12 @@ ToggleSwitch
 	textShadowColor: #000000;
 }
 
+VScrollBar
+{
+	skinClass: ClassReference("spark.skins.android4.VScrollBarSkin");
+	thumbColor: #333333;
+}
+
 ViewNavigator
 {
 	skinClass: ClassReference("spark.skins.mobile.ViewNavigatorSkin");

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/77ffb23f/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarSkin.as
new file mode 100644
index 0000000..1e71279
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarSkin.as
@@ -0,0 +1,205 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.android4
+{
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.Button;
+import spark.components.HScrollBar;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for HScrollBar components in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class HScrollBarSkin extends MobileSkin 
+{   
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function HScrollBarSkin()
+    {
+        super();
+        
+        minWidth = 20;
+        thumbSkinClass = HScrollBarThumbSkin;
+        var paddingBottom:int;
+        var paddingHorizontal:int;
+        
+        // Depending on density set our measured height
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				minHeight = 24;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_640DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				minHeight = 18;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_480DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                minHeight = 12;   
+                paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_320DPI;
+                paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_320DPI;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				minHeight = 9;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_240DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_240DPI;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				minHeight = 5;   
+				paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_120DPI;
+				paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_120DPI;
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                minHeight = 6;              
+                paddingBottom = HScrollBarThumbSkin.PADDING_BOTTOM_DEFAULTDPI;
+                paddingHorizontal = HScrollBarThumbSkin.PADDING_HORIZONTAL_DEFAULTDPI;
+                break;
+            }
+        }
+        
+        // The minimum width is set such that, at it's smallest size, the thumb appears
+        // as wide as it is high.
+        minThumbWidth = (minHeight - paddingBottom) + (paddingHorizontal * 2);   
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:HScrollBar;
+    
+    /**
+     *  Minimum width for the thumb 
+     */
+    protected var minThumbWidth:Number;
+    
+    /**
+     *  Skin to use for the thumb Button skin part
+     */
+    protected var thumbSkinClass:Class;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts 
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  HScrollbar track skin part.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var track:Button;
+    
+    /**
+     *  HScrollbar thumb skin part.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var thumb:Button;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  @private 
+     */ 
+    override protected function createChildren():void
+    {
+        // Create our skin parts if necessary: track and thumb.
+        if (!track)
+        {
+            // We don't want a visible track so we set the skin to MobileSkin
+            track = new Button();
+            track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+            track.width = minWidth;
+            track.height = minHeight;
+            addChild(track);
+        }
+        
+        if (!thumb)
+        {
+            thumb = new Button();
+            thumb.minWidth = minThumbWidth;
+            thumb.setStyle("skinClass", thumbSkinClass);
+            thumb.width = minHeight;
+            thumb.height = minHeight;
+            addChild(thumb);
+        }
+    }
+    
+    /**
+     *  @private 
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementSize(track, unscaledWidth, unscaledHeight);
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/77ffb23f/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as
new file mode 100644
index 0000000..ed3a6b9
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/HScrollBarThumbSkin.as
@@ -0,0 +1,169 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.android4
+{
+
+import flash.display.CapsStyle;
+import flash.display.JointStyle;
+import flash.display.LineScaleMode;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.Button;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for the HScrollBar thumb skin part in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class HScrollBarThumbSkin extends MobileSkin 
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    // These constants are also accessed from HScrollBarSkin
+	mx_internal static const PADDING_BOTTOM_640DPI:int = 10;
+	mx_internal static const PADDING_HORIZONTAL_640DPI:int = 8;
+	mx_internal static const PADDING_BOTTOM_480DPI:int = 8;
+	mx_internal static const PADDING_HORIZONTAL_480DPI:int = 6;
+    mx_internal static const PADDING_BOTTOM_320DPI:int = 5;
+    mx_internal static const PADDING_HORIZONTAL_320DPI:int = 4;
+	mx_internal static const PADDING_BOTTOM_240DPI:int = 4;
+	mx_internal static const PADDING_HORIZONTAL_240DPI:int = 3;
+	mx_internal static const PADDING_BOTTOM_120DPI:int = 2;
+	mx_internal static const PADDING_HORIZONTAL_120DPI:int = 2;
+    mx_internal static const PADDING_BOTTOM_DEFAULTDPI:int = 3;
+    mx_internal static const PADDING_HORIZONTAL_DEFAULTDPI:int = 2;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    public function HScrollBarThumbSkin()
+    {
+        super();
+        
+        // Depending on density set padding
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_480:
+			{
+				paddingBottom = PADDING_BOTTOM_480DPI;
+				paddingHorizontal = PADDING_HORIZONTAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                paddingBottom = PADDING_BOTTOM_320DPI;
+                paddingHorizontal = PADDING_HORIZONTAL_320DPI;
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                paddingBottom = PADDING_BOTTOM_240DPI;
+                paddingHorizontal = PADDING_HORIZONTAL_240DPI;
+                break;
+            }
+            default:
+            {
+                paddingBottom = PADDING_BOTTOM_DEFAULTDPI;
+                paddingHorizontal = PADDING_HORIZONTAL_DEFAULTDPI;
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** 
+     * @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Button;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------    
+    /**
+     *  Padding from bottom.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingBottom:int;
+    
+    /**
+     *  Horizontal padding from left and right.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingHorizontal:int;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    
+    /**
+     *  @private
+     */
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        var thumbHeight:Number = unscaledHeight - paddingBottom;
+        
+        graphics.beginFill(getStyle("thumbColor"), 1);
+        graphics.drawRect(paddingHorizontal + .5, 0.5, unscaledWidth - 2 * paddingHorizontal, thumbHeight);
+        
+        graphics.endFill();
+    }    
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/77ffb23f/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarSkin.as
new file mode 100644
index 0000000..1a2a0df
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarSkin.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 spark.skins.android4
+{
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+
+import spark.components.Button;
+import spark.components.VScrollBar;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+use namespace mx_internal;
+
+/**
+ *  ActionScript-based skin for VScrollBar components in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class VScrollBarSkin extends MobileSkin
+{
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function VScrollBarSkin()
+    {
+        super();
+        
+        minHeight = 20;
+        thumbSkinClass = VScrollBarThumbSkin;
+        var paddingRight:int;
+        var paddingVertical:int;
+        
+        // Depending on density set our measured width
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				minWidth = 24;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				minWidth = 18;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                minWidth = 12;
+                paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_320DPI;
+                paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_320DPI;
+                break;
+            }
+			case DPIClassification.DPI_240:
+			{
+				minWidth = 9;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_240DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_240DPI;
+				break;
+			}
+			case DPIClassification.DPI_120:
+			{
+				minWidth = 9;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_120DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_120DPI;
+				break;
+			}
+            default:
+            {
+                // default DPI_160
+                minWidth = 6;
+                paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_DEFAULTDPI;
+                paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_DEFAULTDPI;
+                break;
+            }
+        }
+        
+        // The minimum height is set such that, at it's smallest size, the thumb appears
+        // as high as it is wide.
+        minThumbHeight = (minWidth - paddingRight) + (paddingVertical * 2);   
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------
+    
+    /** 
+     *  @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:VScrollBar;
+    
+    /**
+     *  Minimum height for the thumb
+     */
+    protected var minThumbHeight:Number;
+    
+    /**
+     *  Skin to use for the thumb Button skin part
+     */
+    protected var thumbSkinClass:Class;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Skin parts 
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  VScrollbar track skin part
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */   
+    public var track:Button;
+    
+    /**
+     *  VScrollbar thumb skin part
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     */  
+    public var thumb:Button;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     *  @private 
+     */
+    override protected function createChildren():void
+    {
+        // Create our skin parts if necessary: track and thumb.
+        if (!track)
+        {
+            // We don't want a visible track so we set the skin to MobileSkin
+            track = new Button();
+            track.setStyle("skinClass", spark.skins.mobile.supportClasses.MobileSkin);
+            track.width = minWidth;
+            track.height = minHeight;
+            addChild(track);
+        }
+        if (!thumb)
+        {
+            thumb = new Button();
+            thumb.minHeight = minThumbHeight; 
+            thumb.setStyle("skinClass", thumbSkinClass);
+            thumb.width = minWidth;
+            thumb.height = minWidth;
+            addChild(thumb);
+        }
+    }
+    
+    /**
+     *  @private 
+     */
+    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.layoutContents(unscaledWidth, unscaledHeight);
+        
+        setElementSize(track, unscaledWidth, unscaledHeight);
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/77ffb23f/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as
new file mode 100644
index 0000000..9d17a97
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/android4/VScrollBarThumbSkin.as
@@ -0,0 +1,178 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 spark.skins.android4
+{
+
+import flash.display.CapsStyle;
+import flash.display.JointStyle;
+import flash.display.LineScaleMode;
+
+import mx.core.DPIClassification;
+import mx.core.mx_internal;
+use namespace mx_internal;
+
+import spark.components.Button;
+import spark.skins.mobile.supportClasses.MobileSkin;
+
+/**
+ *  ActionScript-based skin for the VScrollBar thumb skin part in mobile applications. 
+ * 
+ *  @langversion 3.0
+ *  @playerversion Flash 10
+ *  @playerversion AIR 2.5 
+ *  @productversion Flex 4.5
+ */
+public class VScrollBarThumbSkin extends MobileSkin 
+{
+    //--------------------------------------------------------------------------
+    //
+    //  Class constants
+    //
+    //--------------------------------------------------------------------------
+    
+    // These constants are also accessed from VScrollBarSkin
+	mx_internal static const PADDING_RIGHT_640DPI:int = 10;
+	mx_internal static const PADDING_VERTICAL_640DPI:int = 8;
+	mx_internal static const PADDING_RIGHT_480DPI:int = 8;
+	mx_internal static const PADDING_VERTICAL_480DPI:int = 6;
+    mx_internal static const PADDING_RIGHT_320DPI:int = 5;
+    mx_internal static const PADDING_VERTICAL_320DPI:int = 4;
+	mx_internal static const PADDING_RIGHT_240DPI:int = 4;
+	mx_internal static const PADDING_VERTICAL_240DPI:int = 3;
+	mx_internal static const PADDING_RIGHT_120DPI:int = 2;
+	mx_internal static const PADDING_VERTICAL_120DPI:int = 1;
+    mx_internal static const PADDING_RIGHT_DEFAULTDPI:int = 3;
+    mx_internal static const PADDING_VERTICAL_DEFAULTDPI:int = 2;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Constructor
+    //
+    //-------------------------------------------------------------------------- 
+    /**
+     *  Constructor.
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5 
+     *  @productversion Flex 4.5
+     * 
+     */
+    public function VScrollBarThumbSkin()
+    {
+        super();
+        
+        // Depending on density set padding
+        switch (applicationDPI)
+        {
+			case DPIClassification.DPI_640:
+			{
+				minWidth = 19;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_640DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_640DPI;
+				break;
+			}
+			case DPIClassification.DPI_480:
+			{
+				minWidth = 19;
+				paddingRight = VScrollBarThumbSkin.PADDING_RIGHT_480DPI;
+				paddingVertical = VScrollBarThumbSkin.PADDING_VERTICAL_480DPI;
+				break;
+			}
+            case DPIClassification.DPI_320:
+            {
+                paddingRight = PADDING_RIGHT_320DPI;
+                paddingVertical = PADDING_VERTICAL_320DPI;
+                break;
+            }
+            case DPIClassification.DPI_240:
+            {
+                paddingRight = PADDING_RIGHT_240DPI;
+                paddingVertical = PADDING_VERTICAL_240DPI;
+                break;
+            }
+            default:
+            {
+                paddingRight = PADDING_RIGHT_DEFAULTDPI;
+                paddingVertical = PADDING_VERTICAL_DEFAULTDPI;
+                break;
+            }
+        }
+    }
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** 
+     * @copy spark.skins.spark.ApplicationSkin#hostComponent
+     */
+    public var hostComponent:Button;
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Variables
+    //
+    //--------------------------------------------------------------------------	
+    /**
+     *  Padding from the right
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingRight:int;
+    
+    /**
+     *  Vertical padding from top and bottom
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */ 
+    protected var paddingVertical:int;
+    
+    
+    //--------------------------------------------------------------------------
+    //
+    //  Overridden methods
+    //
+    //--------------------------------------------------------------------------	
+    
+    /**
+     *  @protected
+     */ 
+    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.drawBackground(unscaledWidth, unscaledHeight);
+
+        var thumbWidth:Number = unscaledWidth - paddingRight;
+        
+        graphics.beginFill(getStyle("thumbColor"), 1);
+        graphics.drawRect(0.5, paddingVertical + 0.5,thumbWidth, unscaledHeight - 2 * paddingVertical);
+        
+        graphics.endFill();
+    }
+    
+}
+}
\ No newline at end of file