topic Re: extend Navigation class using Beta Update3 library in ArcGIS API for Flex Questions

extend Navigation class using Beta Update3 library

xiaomingqin — Mon, 07 Jun 2010 17:06:31 GMT

I extended Navigation class to include a couple button within the slider. It works well with Beta Update2 library but failed with the new Update 3 library. I know the Navigation has been sparkified and can now be skinned, but not sure how should I change my code to reflect the change. My working site is here: http://gismapper.pwcgov.org/Demomapper . Following is code snippet:

import com.esri.ags.components.Navigation;
import com.esri.ags.events.MapMouseEvent;
import com.esri.ags.tools.NavigationTool;
import com.esri.ags.events.ExtentEvent;

import flash.events.MouseEvent;

import mx.controls.Button;

public class MyNavigation extends Navigation
{
public function MyNavigation()
{
   super();
}

[Embed(source='image/nav_fullextent.png')]
[Bindable]
private var fullExtentImage:Class;

private var fullButton:Button = new Button();
private var navTool:NavigationTool=new NavigationTool();
//navTool.map=map;

override protected function createChildren():void
{
   super.createChildren();

   navTool.map=map;

   fullButton.width=12;
   fullButton.height=12;
   fullButton.toolTip="Zoom to full Map Extent";
   fullButton.toggle=true;
   fullButton.setStyle('skin',null);
   fullButton.setStyle("icon", fullExtentImage);
   fullButton.addEventListener(MouseEvent.CLICK, fullExtentClickHandler);
   addChild(fullButton);
   //addElement(fullButton);

}
               private function fullExtentClickHandler(event:MouseEvent):void
{
   event.stopImmediatePropagation();
   navTool.zoomToFullExtent();

}
    }

It seems that "addChild(fullButton)" has the problem. Any help is appreciated. Comments for the site is welcome too.

thanks

xiaoming
Prince William County, VA

Re: extend Navigation class using Beta Update3 library

DasaPaddock — Sat, 11 Dec 2021 10:21:41 GMT

Now that Navigation has been sparkified, it'd be best to just use a custom skin to add your buttons. The source files for the skins are in the skins folder in the API zip file.

Here's an example where I copied the NavigationSkin to a skins folder in my project and modified it.

<?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 Navigation component.
-->
<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"
        xmlns:esri="http://www.esri.com/2008/ags">
    
    <fx:Metadata>
        /**
        * A strongly typed property that references the component to which this skin is applied.
        */
        [HostComponent("com.esri.ags.components.Navigation")]
    </fx:Metadata>
    
    <fx:Declarations>
        <!--- @private -->
        <mx:NumberFormatter id="numberFormatter" rounding="nearest"/>
        
        <esri:NavigationTool id="navTool" map="{hostComponent.map}"/>
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.layers.supportClasses.LOD;
            
            private function formatSliderDataTip(value:Number):String
            {
                const lod:LOD = hostComponent.map.lods[value];
                return lod ? "1:" + numberFormatter.format(lod.scale) : "Error";
            }
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="normalWithSlider"/>
        <s:State name="disabledWithSlider"/>
    </s:states>
    
    <s:Rect bottom="0"
            left="0"
            radiusX="10"
            radiusY="10"
            right="0"
            top="0">
        <s:fill>
            <s:SolidColor alpha="0.5" color="0x000000"/>
        </s:fill>
    </s:Rect>
    
    <s:VGroup gap="2"
              horizontalAlign="center"
              minHeight="34"
              paddingBottom="5"
              paddingLeft="3"
              paddingRight="3"
              paddingTop="4">
        
        <s:Button id="zoomInButton"
                  enabled.disabled="false"
                  enabled.disabledWithSlider="false"
                  skinClass="com.esri.ags.skins.NavigationZoomInButtonSkin"
                  toolTip="{resourceManager.getString('ESRIMessages', 'zoomInTooltip')}"/>
        
        <mx:VSlider id="slider"
                    dataTipFormatFunction="formatSliderDataTip"
                    dataTipPlacement="right"
                    enabled.disabled="false"
                    enabled.disabledWithSlider="false"
                    enabled.normalWithSlider="true"
                    height="160"
                    includeIn="normalWithSlider,disabledWithSlider"
                    liveDragging="false"
                    maximum="{hostComponent.map.lods.length - 1}"
                    showDataTip="true"
                    snapInterval="1"
                    tickColor="#000000"
                    tickInterval="1"
                    tickLength="3"
                    tickOffset="-3"
                    tickThickness="1"
                    value="{hostComponent.map.level}"/>
        
        <s:Button id="zoomOutButton"
                  enabled.disabled="false"
                  enabled.disabledWithSlider="false"
                  skinClass="com.esri.ags.skins.NavigationZoomOutButtonSkin"
                  toolTip="{resourceManager.getString('ESRIMessages', 'zoomOutTooltip')}"/>
        
        <s:Button click="navTool.zoomToFullExtent()" label="Full"/>
        
    </s:VGroup>
    
</s:Skin>

Here's how you can then use it in your app.

<?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:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags">
    
    <fx:Style>
        @namespace esri "http://www.esri.com/2008/ags";
        
        esri|Navigation
        {
            skin-class: ClassReference("skins.NavigationSkin");
        }
    </fx:Style>
    
    <esri:Map>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
    </esri:Map>
    
</s:Application>

Re: extend Navigation class using Beta Update3 library

xiaomingqin — Tue, 08 Jun 2010 16:59:53 GMT

thanks, Dasa. That did the trick. I end up creating separate skins to show icon for those three buttons.

xiaoming
Prince William County, VA