Styling Components
| Version 1.3 | 
|
Styling Components |
||
|
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:
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.
Figure 1 - default navigation control. |
Figure 2 - styled navigation control. |
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,
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.
Navigation
{
top: 30;
right: 30;
left: NaN;
}
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
{
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");
}
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
{
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");
}
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
{
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;
}
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.
Figure 3 - default InfoSymbol. |
Figure 4 - styled InfoSymbol. |
The style below represents the style as it is displayed in Figure 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.
Figure 5 - default state of InfoSymbol with user-defined behavior. |
Figure 6 - hover (or mouse over) state of InfoSymbol with user-defined behavior. |
Figure 7 - state of InfoSymbol with user-defined behavior after click. |
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: #FF530D;
outlineColor: #FFFFFF;
}
Figure 8 - default scale bar. |
Figure 9 - styled scale bar. |