/********************************************************************************************************/
//
//inside the api _stylingAndSkinningscalebar
//version 2.0
/********************************************************************************************************/
The position and visual attributes of the ScaleBar can be changed by using the CSS style properties and/or a custom skin.
可以通过使用CSS样式属性和/或者一个自定义的皮肤来改变scalebar控件的位置和可视化的外观
How to change the position of ScaleBar using "styles"
By default the ScaleBar is positioned at the lower left hand corner of the map. Modifying the style properties will enable you to change this default position. The code below will position the ScaleBar at the bottom right hand corner of the map.
默认情况下scalebar控件显示在地图的左下角。 重定义style属性将会使你能够改变scalebar的默认的位置，下面的代码将会让scalebar控件显示在地图的右下角的位置。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags�>
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";//这些样式类都存在于http://www.esri.com/2008/ags命名空间下面。
esri|ScaleBar
{
left: NaN;//取消默认的left属性值，这样就能改变scalebar的位置了
right: 5;//距离地图右边的位置
bottom: 5;//距离地图底部的位置
}
</fx:Style>
<esri:Map id="myMap" >
<esri:ArcGISTiledMapServiceLayer id="tiled"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
</esri:Map>
</s:Application>
//
Notice the directive "@namespace" and the qualified（v.(使)胜任，(使)具有资格，(使)合格） reference to ScaleBar "esri | ScaleBar". Components whose attributes are changed need to be uniquely identified to avoid class name collision.
Since the "left" property is the default property, you need to set it to NaN to allow other position properties such as "right" and "bottom" to take effect.
Similarly the code snippet(片段) below will position the ScaleBar in the upper right hand corner of the map.
注意："@namespace"指令和指向ScaleBar "esri | ScaleBar"的资质引用。 属性改变的组件需要一个唯一的标识来避免类名称冲突。
因为left属性是默认的属性，你需要设置一个NAN值去允许设置其他的位置比如：“right”和“bottom”等属性发挥作用。相似的，下面的代码片段将会将scalebar安置（定位）到地图控件的右上角的位置。
类似的，
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|ScaleBar
{
left: NaN;
right: 5;
top : 5;
}
</fx:Style>
Choosing the unit system to display, e.g. only metric units, using alternate skin
The ScaleBar by default displays distances in both the US and Metric systems. Depending upon the requirement of your application you may want to display the distance only in metric（a.公制的，米制的） units. To satisfy this requirement you will need to specify an alternate SkinClass for the ScaleBar.
The default skin class used by ScaleBar is "com.esri.ags.skins.ScaleBarSkin". You can notice that there are some alternate（交替的；间隔的 v.(使)轮流 ） skin classes available at <Extracted_API_Download_Location>/skins/src" such as "com.esri.ags.skins.ScaleBarMetricSkin" and "com.esri.ags.skins.ScaleBarUSSkin". To use one of these alternate skin classes for Scalebar, reference the skin class like this:
ScaleBar控件默认情况下显示距离使用的是US和公制系统。 基于你应用程序的要求，你可能会想仅仅使用一种公制单位显示距离。为了满足这种要求你可能需要为scaleBar具体的指定一个skinClass。
Scalebar默认使用的skin类是”com.esri.ags.skin.scalebarskin”。你可以注意的是：在<Extracted_API_Download_Location>/skins/src"位置有一些交替的类是可以获取的，比如：“com.esri.ags.skins.sacalebarmetricSkin”和“com.esri.ages.skins.scaleBarUsSkin”。 为了为scalebar使用这些skin类中的一个，像下面一样因为skins类
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|ScaleBar
{
skin-class: ClassReference("com.esri.ags.skins.ScaleBarMetricSkin");
left: NaN;
right: 5;
top : 5;
}
</fx:Style>
How to change the visual appearance using a custom skin
We can modify the default skin class of the ScaleBar to create an alternate look for the scale bar. Follow the steps below to modify skin class for the ScaleBar component.
Step 1: Copy the default skin class for the ScaleBar component
The ArcGIS API for Flex ships with the source code for the default skin classes of all the visual components. The default skin class used by ScaleBar is "com.esri.ags.skins.ScaleBarSkin" and it is located under <Extracted_API_Download_Location>/skins/src" folder .
Copy the file ScaleBarSkin.mxml in to the "src" folder of your Flex project and rename the file to MyScaleBarSkin.mxml
如何使用自定义的skin改变可视化的外观。
我么可以为scalebar重定义默认的skin类，为scalebar创建一个交互的外观。 根据下面的步骤为scalebar组件重定义skin类。
第一步：拷贝scalebar组件默认的skin类。
ArcGIS API FOR FLEX 承载者所有可视化组件的默认skin类的源代码。 被scalebar使用的默认皮肤类是：“com.esri.ags.skins.scalebarskin”，她存在于<Extracted_API_Download_Location>/skins/src"路径下。
拷贝ScaleBarSkin.mxml文件到你工程中的src文件夹下面，并且重新名称为“myScalebarSkin.mxml”
Step 2: Modify the skin class
Since we only need metric units displayed in the scale bar, delete the code for calculating US units, label for displaying US units and the line components. The modified code of the skin should like below:
第二部：重定义skin类
因为我们在scalebar里面我们只想展示公制单位，删除US单位计算的代码，显示US单位的标签和线组件。 Skin类重定义后的代码应该和下面的相似
Complete code for updated MyScaleBarSkin.mxml
<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" minWidth="200">
<fx:Metadata>
[HostComponent("com.esri.ags.components.ScaleBar")]
</fx:Metadata>
<fx:Script>
<![CDATA[
override protected function measure():void
{
labelMetric.text = hostComponent.textMetric;
labelMetric.x = hostComponent.lengthMetric - labelMetric.getExplicitOrMeasuredWidth() * 0.5;
super.measure();
}
]]>
</fx:Script>
<s:Label id="labelMetric" fontFamily="Verdana" fontSize="9" y="0"/>
</s:Skin>
We can now add a rectangle to display the distance in metric units. The code for the skin class should now look like this:
下面我们可以添加一个举行框以公制单位显示距离。 Skin class的类应该和下面的类似。
Complete code for updated MyScaleBarSkin.mxml
<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" minWidth="200">
<fx:Metadata>
[HostComponent("com.esri.ags.components.ScaleBar")]
</fx:Metadata>
<fx:Declarations>
<s:SolidColorStroke id="solidColorStroke" color="0x000000" weight="2"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
override protected function measure():void
{
labelMetric.text = hostComponent.textMetric;
labelMetric.x = hostComponent.lengthMetric + 5;
super.measure();
}
]]>
</fx:Script>
<s:Rect width = "{hostComponent.lengthMetric}" height="5">
<s:fill>
<s:SolidColor color="0xFF0000"/>
</s:fill>
</s:Rect>
<s:Label id="labelMetric" fontFamily="Verdana" fontSize="9" y="0" fontWeight="bold"/>
</s:Skin>
We have now added a rectangle with fill color as red. Also note that the "x" position of the label "labelMetric" has been adjusted such that it is placed at the end of the rectangle.
现在我们已经添加了一个矩形框，并填充上红色。我们还需要注意labelMetric标签的X坐标已经经过调整，因此labelMetric标签防止在举行的尾部。
Step 3: Set reference to the modified skin class
Now that we have modified the skin class, it needs to be referenced using the "skin-class" property in the application. The code snippet below shows how to reference the modified skin class in the application
第三部：设置引用到定义过的skin类。
既然我们已经重定义多skin类，它还需要在应用程序中使用skin-class属性引用。 下面的代码片段向你展示如何在你的应用程序中引用重定义过的skin类。
Complete code for updated ScaleBarSkinTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags">
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|ScaleBar
{
skin-class: ClassReference("MyScaleBarSkin");
}
</fx:Style>
<esri:Map >
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
</esri:Map>
</s:Application>
Thus you can see that by changing the skin class you can create different variations for the visual appearance of the scale bar without changing any of the business logic of how the distances are calculated.