flex4 hslider跟vslider滑条高亮
flex4 hslider和vslider滑条高亮
HSliderSkin.mxml
HSliderTrackHighLightSkin.mxml
VSlider.as
VSliderSkin.mxml
VSliderTrackHighLightSkin.mxml
原文地址： http://www.patrick-heinzelmann.de/blog/2011/01/25/spark-slider-with-track-highlight/
在flex3中滑条高亮有个属性 showTrackHighlight="true"; 但是在flex4中不知道什么原因没有
后来在网上翻到一个别人重写的滑块组件 效果图如下：
Hslider.as
package com.bufoon.component
{
{
import com.bufoon.skin.HSliderSkin;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.InteractionMode;
import mx.events.ResizeEvent;
import spark.components.Button;
import spark.components.HSlider;
import spark.effects.animation.Animation;
/**
* The color for the slider track when it is selected.
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="accentColor", type="uint", format="Color", inherit="yes", theme="spark")]
/**
* Specifies whether to enable track highlighting between thumbs
* (or a single thumb and the beginning of the track).
*
* @default false
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="showTrackHighlight", type="Boolean", inherit="no")]
public class HSlider extends spark.components.HSlider
{
/**
* @private
*/
private var animator:Animation = null;
[SkinPart(required="false")]
public var trackHighLight:Button;
[Bindable]
private var _accentColor:uint;
private var accentColorChanged:Boolean
[Bindable]
private var _showTrackHighlight:Boolean = true;
private var showTrackHighlightChanged:Boolean;
public function HSlider()
{
super();
setStyle("skinClass", HSliderSkin);
}
/**
* @private
*/
override protected function updateSkinDisplayList():void
{
super.updateSkinDisplayList();
if (!thumb || !track || !trackHighLight)
return;
var thumbRange:Number = track.getLayoutBoundsWidth() - thumb.getLayoutBoundsWidth();
var range:Number = maximum - minimum;
// calculate new thumb position.
var thumbPosTrackX:Number = (range > 0) ? ((pendingValue - minimum) / range) * thumbRange : 0;
// convert to parent's coordinates.
var thumbPos:Point = track.localToGlobal(new Point(thumbPosTrackX, 0));
var thumbPosParentX:Number = thumb.parent.globalToLocal(thumbPos).x+thumb.getLayoutBoundsWidth()/2;
//thumb.setLayoutBoundsPosition(Math.round(thumbPosParentX), thumb.getLayoutBoundsY());
trackHighLight.setLayoutBoundsSize(Math.round(thumbPosParentX), trackHighLight.getLayoutBoundsHeight());
}
/**
* @private
* Warning: the goal of the listeners added here (and removed below) is to
* give the TrackBase a change to fixup the thumb's size and position
* after the skin's BasicLayout has run. This particular implementation
* is a hack and it begs a solution to the general problem of what we've
* called "cooperative layout". More about that here:
* http://opensource.adobe.com/wiki/display/flexsdk/Cooperative+Subtree+Layout
*/
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == trackHighLight)
{
trackHighLight.focusEnabled = false;
trackHighLight.addEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
// track is only clickable if in mouse interactionMode
if (getStyle("interactionMode") == InteractionMode.MOUSE)
trackHighLight.addEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
}
}
/**
* @private
*/
override protected function partRemoved(partName:String, instance:Object):void
{
super.partRemoved(partName, instance);
if (instance == trackHighLight)
{
trackHighLight.removeEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
trackHighLight.removeEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
}
}
/**
* @private
* Handle mouse-down events for the slider track hightlight. We
* calculate the value based on the new position and then
* move the thumb to the correct location as well as
* commit the value.
*/
protected function trackHighLight_mouseDownHandler(event:MouseEvent):void
{
this.track_mouseDownHandler(event);
}
/**
* @private
*/
private function trackHighLight_resizeHandler(event:Event):void
{
updateSkinDisplayList();
}
/**
* @private
*/
override public function styleChanged(styleProp:String):void
{
var anyStyle:Boolean = styleProp == null || styleProp == "styleName";
super.styleChanged(styleProp);
if (styleProp == "showTrackHighlight" || anyStyle)
{
showTrackHighlightChanged = true;
invalidateProperties();
}
if (styleProp == "accentColor" || anyStyle)
{
accentColorChanged = true;
invalidateProperties();
}
invalidateDisplayList();
}
override protected function commitProperties():void
{
super.commitProperties();
if (showTrackHighlightChanged)
{
this.trackHighLight.visible = this._showTrackHighlight;
showTrackHighlightChanged = false;
}
if(accentColorChanged){
this.trackHighLight.setStyle("themeColor", this.accentColor);
accentColorChanged = false;
}
}
public function set accentColor(color:uint):void
{
this._accentColor = color;
accentColorChanged = true;
this.invalidateProperties();
}
public function get accentColor():uint
{
return this._accentColor;
}
public function set showTrackHighlight(show:Boolean):void
{
this._showTrackHighlight = show;
showTrackHighlightChanged = true;
this.invalidateProperties();
}
public function get showTrackHighlight():Boolean
{
return this._showTrackHighlight;
}
}
}
}
HSliderSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark HSlider component. The thumb and track skins are defined by the
HsliderTrackHighLightSkin, HSliderThumbSkin and HSliderTrackSkin, classes, respectively.
@see de.patrickheinzelmann.components.spark.HSlider
@see spark.skins.spark.HSliderThumbSkin
@see spark.skins.spark.HSliderTrackSkin
@see de.patrickheinzelmann.components.spark.skins.HsliderTrackHighLightSkin
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="11" alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("com.bufoon.component.HSlider")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For slider, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["track", "thumb", "trackHighLight"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<fx:Script>
/**
* @private
*/
override protected function measure() : void
{
// Temporarily move the thumb to the left of the Slider so measurement
// doesn't factor in its x position. This allows resizing the
// HSlider to less than 100px in width.
var thumbPos:Number = thumb.getLayoutBoundsX();
thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
super.measure();
thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
}
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<!--- The tooltip used in the mx.controls.Slider control.
To customize the DataTip's appearance, create a custom HSliderSkin class.-->
<fx:Component id="dataTip">
<s:DataRenderer minHeight="24" minWidth="40" y="-34">
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="0x000000" alpha=".9"/>
</s:fill>
<s:filters>
<s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
</s:filters>
</s:Rect>
<s:Label id="labelDisplay" text="{data}"
horizontalCenter="0" verticalCenter="1"
left="5" right="5" top="5" bottom="5"
textAlign="center" verticalAlign="middle"
fontWeight="normal" color="white" fontSize="11">
</s:Label>
</s:DataRenderer>
</fx:Component>
</fx:Declarations>
<!--- The default skin class is HSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#trackHighlight
@see spark.skins.spark.HSliderTrackSkin -->
<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
skinClass="spark.skins.spark.HSliderTrackSkin" />
<!--- The default skin class is HSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see de.patrickheinzelmann.components.spark.skins.HsliderTrackHighLightSkin -->
<s:Button id="trackHighLight" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
skinClass="com.bufoon.skin.HSliderTrackHighLightSkin" />
<!--- The default skin class is HSliderThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.HSliderThumbSkin -->
<s:Button id="thumb" top="0" bottom="0" width="11" height="11"
skinClass="spark.skins.spark.HSliderThumbSkin" accentColor="0xFF00FF" />
</s:SparkSkin>
HSliderTrackHighLightSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the track of a Spark HSlider component.
@see spark.components.HSlider
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
[Bindable]
private var highlightColor:uint;
/**
* @private
*/
override protected function initializationComplete():void
{
highlightColor = this.getStyle("themeColor");
super.initializationComplete();
}
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if(styleProp == "themeColor"){
var trackHighlightColor:uint = this.getStyle("themeColor");
highlightColor = trackHighlightColor;
}
}
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="down" />
<s:State name="over" />
<s:State name="disabled" />
</s:states>
<!-- fill -->
<s:Rect left="1" right="1" top="4" bottom="4" bottomLeftRadiusX="2" bottomLeftRadiusY="2" topLeftRadiusX="2" topLeftRadiusY="2" bottomRightRadiusX="0" bottomRightRadiusY="0" topRightRadiusX="0" topRightRadiusY="0">
<s:fill>
<s:SolidColor color="{highlightColor}" alpha="0.5" />
</s:fill>
</s:Rect>
<!-- hit area -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:SparkSkin>
VSlider.as
package com.bufoon.component
{
import com.bufoon.skin.VSliderSkin;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.InteractionMode;
import mx.events.ResizeEvent;
import spark.components.Button;
/**
* The color for the slider track when it is selected.
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="accentColor", type="uint", format="Color", inherit="yes", theme="spark")]
/**
* Specifies whether to enable track highlighting between thumbs
* (or a single thumb and the beginning of the track).
*
* @default false
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="showTrackHighlight", type="Boolean", inherit="no")]
public class VSlider extends spark.components.VSlider
{
[SkinPart(required="false")]
public var trackHighLight:Button;
[Bindable]
private var _accentColor:uint;
private var accentColorChanged:Boolean;
[Bindable]
private var _showTrackHighlight:Boolean = true;
private var showTrackHighlightChanged:Boolean;
public function VSlider()
{
super();
setStyle("skinClass", VSliderSkin);
}
/**
* @private
*/
override protected function updateSkinDisplayList():void
{
super.updateSkinDisplayList();
if (!thumb || !track || !trackHighLight)
return;
var thumbRange:Number = track.getLayoutBoundsHeight() - thumb.getLayoutBoundsHeight();
var range:Number = maximum - minimum;
// calculate new thumb position.
var thumbPosTrackY:Number = (range > 0) ? thumbRange - (((pendingValue - minimum) / range) * thumbRange) : 0;
// convert to parent's coordinates.
var thumbPos:Point = track.localToGlobal(new Point(0, thumbPosTrackY));
var thumbPosParentY:Number = thumb.parent.globalToLocal(thumbPos).y+thumb.getLayoutBoundsHeight()/2;
trackHighLight.setLayoutBoundsPosition(trackHighLight.getLayoutBoundsX(), thumbPosParentY);
trackHighLight.setLayoutBoundsSize( trackHighLight.getLayoutBoundsWidth(), track.getLayoutBoundsHeight()-thumbPosParentY);
}
/**
* @private
* Warning: the goal of the listeners added here (and removed below) is to
* give the TrackBase a change to fixup the thumb's size and position
* after the skin's BasicLayout has run. This particular implementation
* is a hack and it begs a solution to the general problem of what we've
* called "cooperative layout". More about that here:
* http://opensource.adobe.com/wiki/display/flexsdk/Cooperative+Subtree+Layout
*/
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == trackHighLight)
{
trackHighLight.focusEnabled = false;
trackHighLight.addEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
// track is only clickable if in mouse interactionMode
if (getStyle("interactionMode") == InteractionMode.MOUSE)
trackHighLight.addEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
}
}
/**
* @private
*/
override protected function partRemoved(partName:String, instance:Object):void
{
super.partRemoved(partName, instance);
if (instance == trackHighLight)
{
trackHighLight.removeEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
trackHighLight.removeEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
}
}
/**
* @private
* Handle mouse-down events for the slider track hightlight. We
* calculate the value based on the new position and then
* move the thumb to the correct location as well as
* commit the value.
*/
protected function trackHighLight_mouseDownHandler(event:MouseEvent):void
{
this.track_mouseDownHandler(event);
}
/**
* @private
*/
private function trackHighLight_resizeHandler(event:Event):void
{
updateSkinDisplayList();
}
/**
* @private
*/
override public function styleChanged(styleProp:String):void
{
var anyStyle:Boolean = styleProp == null || styleProp == "styleName";
super.styleChanged(styleProp);
if (styleProp == "showTrackHighlight" || anyStyle)
{
showTrackHighlightChanged = true;
invalidateProperties();
}
if (styleProp == "accentColor" || anyStyle)
{
accentColorChanged = true;
invalidateProperties();
}
invalidateDisplayList();
}
override protected function commitProperties():void
{
super.commitProperties();
if (showTrackHighlightChanged)
{
this.trackHighLight.visible = this._showTrackHighlight;
showTrackHighlightChanged = false;
}
if(accentColorChanged){
this.trackHighLight.setStyle("themeColor", this.accentColor);
accentColorChanged = false;
}
}
public function set accentColor(color:uint):void
{
this._accentColor = color;
this.accentColorChanged = true;
this.invalidateProperties();
}
public function get accentColor():uint
{
return this._accentColor;
}
public function set showTrackHighlight(show:Boolean):void
{
this._showTrackHighlight = show;
showTrackHighlightChanged = true;
this.invalidateProperties();
}
public function get showTrackHighlight():Boolean
{
return this._showTrackHighlight;
}
}
}
VSliderSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark VSlider component. The thumb and track skins are defined by the
VSliderThumbSkin and VSliderTrackSkin classes, respectively.
@see spark.components.VSlider
@see spark.skins.spark.VSliderThumbSkin
@see spark.skins.spark.VSliderTrackSkin
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="11" alpha.disabled="0.5">
<fx:Metadata>[HostComponent("com.bufoon.component.VSlider")]</fx:Metadata>
<fx:Script fb:purpose="styling">
/* Define the skin elements that should not be colorized.
For slider, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["track", "thumb", "trackHighLight"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<fx:Script>
/**
* @private
*/
override protected function measure() : void
{
// Temporarily move the thumb to the top of the Slider so measurement
// doesn't factor in its y position. This allows resizing the
// VSlider to less than 100px in height.
var thumbPos:Number = thumb.getLayoutBoundsY();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), 0);
super.measure();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), thumbPos);
}
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<!--- The tooltip used in the mx.controls.Slider control.
To customize the DataTip's appearance, create a custom VSliderSkin class. -->
<fx:Component id="dataTip">
<s:DataRenderer minHeight="24" minWidth="40" x="20">
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="0x000000" alpha=".9"/>
</s:fill>
<s:filters>
<s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
</s:filters>
</s:Rect>
<s:Label id="labelDisplay" text="{data}"
horizontalCenter="0" verticalCenter="1"
left="5" right="5" top="5" bottom="5"
textAlign="center" verticalAlign="middle"
fontWeight="normal" color="white" fontSize="11">
</s:Label>
</s:DataRenderer>
</fx:Component>
</fx:Declarations>
<!--- The default skin class is VSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see spark.skins.spark.VSliderTrackSkin -->
<s:Button id="track" left="0" right="0" top="0" bottom="0" minHeight="33" height="100"
skinClass="spark.skins.spark.VSliderTrackSkin" />
<!--- The default skin class is VSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#trackHighLight
@see de.patrickheinzelmann.components.spark.skins.VsliderTrackHighLightSkin -->
<s:Button id="trackHighLight" left="0" right="0" top="0" bottom="0" minHeight="33" height="100"
skinClass="com.bufoon.skin.VSliderTrackHighLightSkin" />
<!--- The default skin class is VSliderThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.VSliderThumbSkin -->
<s:Button id="thumb" left="0" right="0" width="11" height="11"
skinClass="spark.skins.spark.VSliderThumbSkin" />
</s:SparkSkin>
VSliderTrackHighLightSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the track of a Spark VSlider component.
@see spark.components.VSlider
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
[Bindable]
private var highlightColor:uint;
/**
* @private
*/
override protected function initializationComplete():void
{
highlightColor = this.getStyle("themeColor");
super.initializationComplete();
}
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
if(styleProp == "themeColor"){
var trackHighlightColor:uint = this.getStyle("themeColor");
highlightColor = trackHighlightColor;
}
}
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="down" />
<s:State name="over" />
<s:State name="disabled" />
</s:states>
<!-- fill -->
<s:Rect left="4" right="4" top="1" bottom="1" radiusX="2" radiusY="2">
<s:fill>
<s:SolidColor color="{highlightColor}" alpha="0.5" />
</s:fill>
</s:Rect>
<!-- hit area -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:SparkSkin>使用方法
<component:HSlider showTrackHighlight="true" accentColor="0xff0000"/> <component:VSlider showTrackHighlight="true" accentColor="0xff0000"/>
原文地址： http://www.patrick-heinzelmann.de/blog/2011/01/25/spark-slider-with-track-highlight/