Solved! Go to Solution.
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2010 ESRI
All rights reserved under the copyright laws of the United States
and applicable international laws, treaties, and conventions.
You may freely redistribute and use this sample code, with or
without modification, provided you include the original copyright
notice and use restrictions.
See use restrictions in use_restrictions.txt.
-->
<!---
The default skin class for the TimeSlider component.
<p><b>Since:</b> ArcGIS API for Flex 2.0</p>
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
/**
* A strongly typed property that references the component to which this skin is applied.
*/
[HostComponent("com.esri.ags.components.TimeSlider")]
</fx:Metadata>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<fx:Declarations>
<!--- @private -->
<mx:DateFormatter id="dateFormatter" formatString="{resourceManager.getString('ESRIMessages', 'timeSliderDateFormatString')}"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function dataTipFormatter(value:Number):String
{
return dateFormatter.format(hostComponent.timeStops[value]);
}
]]>
</fx:Script>
<!--
<s:Button id="playButton"
enabled.disabled="false"
label="{resourceManager.getString('ESRIMessages','timeSliderPlay')}"/>
<s:Button id="pauseButton"
enabled.disabled="false"
label="{resourceManager.getString('ESRIMessages','timeSliderPause')}"/>
-->
<!--- ToggleButton to toggle between play pause modes. -->
<s:ToggleButton id="playPauseButton"
enabled.disabled="false"
skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin"/>
<!--- The HSlider control to select a time stop by moving the slider thumb(s) between the end points of the slider track. -->
<mx:HSlider id="slider"
width="100%" liveDragging="true"
dataTipFormatFunction="dataTipFormatter"
enabled.disabled="false"
showDataTip="{hostComponent.timeStops != null}"
showTrackHighlight="{!(hostComponent.thumbCount == 1 && hostComponent.singleThumbAsTimeInstant)}"
tickInterval="1"/>
<!--- Button to go to the previous time stop. -->
<s:Button id="previousButton"
enabled.disabled="false"
skinClass="com.esri.ags.skins.TimeSliderPreviousButtonSkin"/>
<!--- Button to go to the next time stop. -->
<s:Button id="nextButton"
enabled.disabled="false"
skinClass="com.esri.ags.skins.TimeSliderNextButtonSkin"/>
</s:Skin>