/*********************************************************************************/
//
//InsideTheAPI_StylingComponets_6.9
//*********************************************************************************
The API along with its classes has UI components that can be customized to suit your application needs.
Styles are the visual properties of components such as size, color, etc. A style can be applied to all instances of a component using a Type Selector style or just individual instances using a Class Selector style. In Flex the style definition is declared within the <mx:Style> tag. The style properties that are available for modification（修改、修饰） for a component can be found in the API reference. The components that can be styled are found under the package com.esri.controls.
On this page we will show how to style three different components:
Styling the Navigation toolbar
跟随类的API的有她的UI（用户界面）组件，它可以被自定义以便符合你的应用程序需要。
Style是组件的可视化属性，比如：大小、颜色等等。一个样式可以通过使用一个Type Selector style被应用到所有的组件实例，或者使用一个selector 样式类应用到所有的独立的实例上。 在FLEX中，style的定义在<mx:Style>标签内。我们可以获取一个属性为组件修改样式，这个属性可以在API的引用里面找到。样式可以被修改的组件能够在com.esri.controls包里面找到。
本节里面我们可以向你展示如何样式化三种不同的组件。
Styling the Navigation toolbar
Styling the Navigation toolbar
Navigation — The navigation control is used to display layers at predefined scales. The default navigation control is as shown in Figure 1. It consists of a VSlider and a plus and minus button. The default look of the navigation control (Figure 1) can be changed to suit your project. The section below shows how to style the navigation control as shown in Figure 2. See the Styling zoom slider with CSS sample.
设计导航控件的样式
Navigation：导航控件被用来在预先定义的比例下展示地图。默认的导航控件展示如下面的图标一所示。 她包含一个Vslider和一个增加和缩小的按钮。 导航控件默认的外观是可以改变来适应你的应用程序的。下面的章节向你展示了如何设计导航控件，就像图标二中展示的那样。
The class com.esri.ags.controls.Navigation represents the Navigation control. The control supports a set of style classes that can be used to provide a different appearance to the slider. The style classes used by the navigation control are,
Navigation – this class controls the location of the slider and enables placing the slider to the left or right side of the Map.
The style below will place the slider at a distance of 30 pixels from the top and right margin of the Map. Since the property left is a default property you will have to use the value NaN so that the value of property left is not used.
类com.esri.ags.controls.Navigations代表着导航控件，导航控件支持一系列的样类，这些样式可以被用来来改变slider的外观。 被navigation控件使用的样式类是：
Navigation：这个类控制着控件的silider的位置并且能够防止slider到地图的左或者右边。
下面的样式将会把silider放置到一个离顶部30像素以及地图右边的位置。 因为地图放置在左边的属性是一个默认的属性，你必须将left的属性为设置为NAN，这样left属性值才不会被使用。
Navigation
{
top: 30;
right: 30;
left: NaN;//设置slider控件放置在地图的右边，而不是默认的左边
}
NavigationMinusButton – this class controls the appearance of the Zoom Out button placed at the bottom of the slider. This class inherits mx.controls.Button and hence all the style properties that can be applied on mx.controls.Button can be used.
The style below sets the different states of the NavigationMinusButton. These properties are standard style properties of a Button. In this case the button is assigned an image of a globe.
NavigationMinusButton：这个类控制着silider控件底部的缩小按钮的外观。 这个类继承了mx.controls.Button，因此所有的可以应用到mx.controls.buttons上面的样式属性在这里就可以被使用了。
下面的样式设置了NavigationMinusButton不同的状态。 这些属性是一个按钮的的标准样式属性。在这个例子中，这个按钮和一个地图图片关联在一起。
NavigationMinusButton
{
disabledSkin: Embed(source="assets/globe_icon.png");//不可用状态下显示的样式
downSkin: Embed(source="assets/globe_icon.png");//鼠标按下状态下显示的样式
overSkin: Embed(source="assets/globe_icon.png");//鼠标悬停下显示的样式
upSkin: Embed(source="assets/globe_icon.png");//鼠标谈起状态下显示的样式。
}
//
NavigationPlusButton – this class controls the appearance of the Zoom In button placed at the top of the slider. This class inherits mx.controls.Button and hence all the style properties that can be applied on mx.controls.Button can be used.
The style below sets the different states of the NavigationPlusButton. These properties are standard style properties of a Button. In this case the button is assigned an image of a home.
NavigationPlusButton：这个类控制着silider控件顶部放大地图按钮的外观。这个类继承了mx.controls.Button，因此所有的可以应用到mx.controls.buttons上面的样式属性在这里就可以被使用了。
下面的样式设置了NavigationPlusButton不同的状态。 这些属性是一个按钮的的标准样式属性。在这个例子中，这个按钮和一个房子图片关联在一起。
NavigationPlusButton
{
disabledSkin: Embed(source="assets/home_icon.png");
downSkin: Embed(source="assets/home_icon.png");
overSkin: Embed(source="assets/home_icon.png");
upSkin: Embed(source="assets/home_icon.png");
}
NavigationSlider – this class controls the appearance of the slider. The NavigationSlider inherits mx.controls.VSlider and hence all the style properties that can be applied on an mx.controls.VSlider can also be applied on a NavigationSlider.
The style below defines the appearance of the slider. Except for the property show-scale-in-data-tip all other properties are inherited from a VSlider.
NavigationSlider：这个类控制着slider控件的外观。NavigationSlider控件继承来mx.controls.Vslider控件，因此所有可以应用到一个mx.controls.Vsilider控件上的样式属性都可以被应用到一个NavigationSlider
下面的样式定义了silider控件的外观。除了how-scale-in-data-tip属性所有其他的属性都是从一个Vslider继承的。
NavigationSlider
{
show-scale-in-data-tip:false; /*display tile level instead of scale */
dataTipPlacement: "left";
show-track-highlight: true;
tick-color: #ffffff;
}
ToolTip
{
backgroundAlpha: 1.0;
backgroundColor: haloBlue;
fontWeight: bold;
color: white;
}
//
Styling the InfoSymbol
InfoSymbol – These are callouts that are used to display content, usually the results of a query. InfoSymbols can only be used with a graphic of type MapPoint. The class InfoSymbolContainer represents style that is used to render the InfoSymbol.
The callout in figure 3 is displayed with the default style. To change the style use a CSS class called InfoSymbolContainer and set the appropriate values. The InfoSymbolContainer inherits mx.core.container hence all the style properties that can be applied on an mx.controls.container can be used.
样式化InfoSymbol
InfoSymbol：他们是插图的编号(callouts)，可以用来展示内容，通常是展示查询结果的内容。InfoSymbols控件仅仅能够被用于MapPoint类型的graphic。InfoSymbolContainer类代表用来render InfoSymbol样式。
编号为3的插图展示了默认样式下的InfoSymbolContainer，为了改变它的样式，使用称为InfoSymbolContainer的CSS类并设置书信的值。InfoSymbolContainer继承了mx.core.container类，因此所有能够应用到mx.controls.container控件的样式我都可以被使用
The style below represents the style as it is displayed in Figure 4,
下面的样式代表了展示在图标4中的样式。
InfoSymbolContainer
{
backgroundColor: #FF530D;
backgroundAlpha: 1.0;
font-style: italic;
font-weight: bold;
font-size: 12;
}
Adding behaviors to infosymbols – In addition to adding styling properties, behaviors can also be added to the infoSymbols. The figures below show an example of a infoSymbol with a user-defined behavior. The Figures 6 and 7 show the mouse hover and mouse click behavior of the infoSymbol. This example takes advantage of the States feature of the Flex framework to assign behavior. See the InfoSymbol with States sample for more information on how this behavior is implemented.
为infosymbols添加行为：除了添加样式属性，行为仍然可以添加到infoSymbols中。 下面的轮廓展示了一个使用用户自定义行为的infoSymbol例子。图表6-7展示了infoSymbol的鼠标悬停和鼠标单击的行为。 这个例子利用了Flex 框架的状态要素关联行为。查看InfoSymbol with States例子获取更多的关于如何实现这个行为的信息。
Styling the ScaleBar
ScaleBar – the scalebar supports two styling properties. They are fillColor and outlineColor. The default ScaleBar style is shown in Figure 8. The scale bar shown in Figure 9 uses the style properties below.
ScaleBar支持两哥样式属性。 他们是fillColor和outlineColor。图标8显示ScaleBar控件默认的样式。图标9展示的ScaleBar使用了下面的样式属性
ScaleBar： {
fillColor: #FF530D;
outlineColor: #FFFFFF;
}
