Component Scope?

GlenReid · ‎09-09-2011

In the measure lengths sample, I added a button into the info symbol component -- on button click I want clear the graphic layers and thus, the info symbol. The code errs as the button click event cannot see the closeWin() method:

<?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"
      initialize="application_initializeHandler(event)"
      pageTitle="Draw and Measure lines">
 <!--
 This sample shows how to measure line distance correctly.
 
 ArcGIS Server 10 adds support for geodesic measurement.
 
 With earlier versions of ArcGIS Server, the "geodesic" property cannot be used.
 The "9.3" solution depends on which coordinate system is being using.
 If the map uses a geographic coordinate system, the line needs to be projected
 into the desired projected coordinate system for calculating the line length.
 The geometry service can be used to do the projection.
 
 With ArcGIS Server 10, the geodesic property can be used for easier measurements.
 -->
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.SpatialReference;
   import com.esri.ags.events.DrawEvent;
   import com.esri.ags.events.GeometryServiceEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.geometry.Polyline;
   import com.esri.ags.tasks.supportClasses.LengthsParameters;
   
   import mx.events.FlexEvent;
   
   [Bindable]private var latestEndpoint:MapPoint;
   
   private function application_initializeHandler(event:FlexEvent):void
   {
    drawTool.activate(DrawTool.FREEHAND_POLYLINE);
   }
   
   private function drawEndHandler(event:DrawEvent):void
   {
    var drawnLine:Polyline = Polyline(event.graphic.geometry);
    
    var lengthsParameters:LengthsParameters = new LengthsParameters();
    lengthsParameters.geodesic = true;
    lengthsParameters.polylines = [ drawnLine ];
    
    latestEndpoint = drawnLine.paths[0][0] as MapPoint;
    
    geometryService.lengths(lengthsParameters);
   }
   
   private function lengthsCompleteHandler(event:GeometryServiceEvent):void
   {
    // Report as meters if less than 3km, otherwise km
    var dist:Number = (event.result as Array)[0];
    var myAttributes:Object = {};
    if (dist < 3000)
    {
     myAttributes.distance = Math.round(dist) + " meters";
    }
    else
    {
     myAttributes.distance = Number(dist / 1000).toFixed(1) + " km";
    }
    //var g:Graphic = new Graphic(latestEndpoint, new TextSymbol(null, "text3", 0, true, 0, true));
    var g:Graphic = new Graphic(latestEndpoint, myInfoSymbol, myAttributes);
    resultLayer.add(g);
   }

   private function closeWin(event:MouseEvent):void
   {
    trace ("closeWin");
    lineLayer.clear();
    resultLayer.clear();
   }
  ]]>
 </fx:Script>
 
 <fx:Style>
  @namespace esri "http://www.esri.com/2008/ags";
  
  esri|InfoSymbolWindow
  {
   backgroundColor: #FFFF00;
   border-color: #6E6F00;
   border-thickness: 2;
   info-placement: bottom;
  }
 </fx:Style>
 
 <fx:Declarations>
  <esri:InfoSymbol id="myInfoSymbol">
   <esri:infoRenderer>
    <fx:Component>
     <s:DataRenderer>
      <s:layout>
       <s:HorizontalLayout/>
      </s:layout>
      <s:Label paddingBottom="3"
         paddingLeft="3"
         paddingRight="3"
         paddingTop="3"
         text="This line is {data.distance}"/>
      <s:Button id="closeButton" label="X"
          width="14" height="14" click="closeWin(event)"/>
     </s:DataRenderer>
    </fx:Component>
   </esri:infoRenderer>
  </esri:InfoSymbol>
  
  <esri:GeometryService id="geometryService"
         concurrency="last"
         lengthsComplete="lengthsCompleteHandler(event)"
         showBusyCursor="true"
         url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
  
  <esri:SimpleLineSymbol id="lineSymbol"
          width="4"
          color="#6E6F00"/>
  
  <esri:DrawTool id="drawTool"
        drawEnd="drawEndHandler(event)"
        graphicsLayer="{lineLayer}"
        lineSymbol="{lineSymbol}"
        map="{map}"/>
 </fx:Declarations>
 
 <s:controlBarContent>
  <s:Label width="100%"
     color="#6E6F00"
     fontSize="14"
     text="Click and hold down on the map to draw a line that will be added to the map. The application will then use the geometry service to calculate the length of the line."/>
 </s:controlBarContent>
 
 <esri:Map id="map">
  <esri:extent>
   <esri:Extent xmin="-13044000" ymin="4035000" xmax="-13039000" ymax="4039000">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="lineLayer"/>
  <esri:GraphicsLayer id="resultLayer"/>
 </esri:Map>
 
</s:Application>

Any ideas on this?

Thanks,
Glen

RobertScheitlin__GISP · ‎09-09-2011

Glen,

You need to have your closeWin function inside the fx:Component element by adding a fx:Script element

GlenReid · ‎09-09-2011

Thanks,Robert.

I did that, but now the graphic layers that I'm trying to clear are 'undefined'. Am I able work with anything outside the component?

  <esri:InfoSymbol id="myInfoSymbol">
   <esri:infoRenderer>
    <fx:Component>
     <s:DataRenderer>
      <s:layout>
       <s:HorizontalLayout/>
      </s:layout>

      <fx:Script>
       <![CDATA[
        protected function closeWin(event:MouseEvent):void
        {
         trace ("closeWin");
         lineLayer.clear();
         resultLayer.clear();
        }
       ]]>
      </fx:Script>

      <s:Label paddingBottom="3"
         paddingLeft="3"
         paddingRight="3"
         paddingTop="3"
         text="This line is {data.distance}"/>
      <s:Button id="closeButton" label="X"
          width="14" height="14" click="closeWin(event)"/>
     </s:DataRenderer>
    </fx:Component>
   </esri:infoRenderer>
  </esri:InfoSymbol>

RobertScheitlin__GISP · ‎09-10-2011

Glen,

Try this:

<?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"
               initialize="application_initializeHandler(event)"
               pageTitle="Draw and Measure lines">
    <!--
    This sample shows how to measure line distance correctly.
    
    ArcGIS Server 10 adds support for geodesic measurement.
    
    With earlier versions of ArcGIS Server, the "geodesic" property cannot be used.
    The "9.3" solution depends on which coordinate system is being using.
    If the map uses a geographic coordinate system, the line needs to be projected
    into the desired projected coordinate system for calculating the line length.
    The geometry service can be used to do the projection.
    
    With ArcGIS Server 10, the geodesic property can be used for easier measurements.
    -->
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.SpatialReference;
            import com.esri.ags.events.DrawEvent;
            import com.esri.ags.events.GeometryServiceEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.geometry.Polyline;
            import com.esri.ags.tasks.supportClasses.LengthsParameters;
            
            import mx.events.FlexEvent;
            
            [Bindable]private var latestEndpoint:MapPoint;
            
            private function application_initializeHandler(event:FlexEvent):void
            {
                drawTool.activate(DrawTool.FREEHAND_POLYLINE);
                map.infoWindow.addEventListener("closeWin", closeHandler); 
            }
            
            private function drawEndHandler(event:DrawEvent):void
            {
                var drawnLine:Polyline = Polyline(event.graphic.geometry);
                
                var lengthsParameters:LengthsParameters = new LengthsParameters();
                lengthsParameters.geodesic = true;
                lengthsParameters.polylines = [ drawnLine ];
                
                latestEndpoint = drawnLine.paths[0][0] as MapPoint;
                
                geometryService.lengths(lengthsParameters);
            }
            
            private function lengthsCompleteHandler(event:GeometryServiceEvent):void
            {
                // Report as meters if less than 3km, otherwise km
                var dist:Number = (event.result as Array)[0];
                var myAttributes:Object = {};
                if (dist < 3000)
                {
                    myAttributes.distance = Math.round(dist) + " meters";
                }
                else
                {
                    myAttributes.distance = Number(dist / 1000).toFixed(1) + " km";
                }
                //var g:Graphic = new Graphic(latestEndpoint, new TextSymbol(null, "text3", 0, true, 0, true));
                var g:Graphic = new Graphic(latestEndpoint, myInfoSymbol, myAttributes);
                resultLayer.add(g);
            }

            private function closeHandler(event:Event):void
            {
                trace ("closeWin");
                lineLayer.clear();
                resultLayer.clear();
            }
        ]]>
    </fx:Script>
    
    <fx:Style>
        @namespace esri "http://www.esri.com/2008/ags";
        
        esri|InfoSymbolWindow
        {
            backgroundColor: #FFFF00;
            border-color: #6E6F00;
            border-thickness: 2;
            info-placement: bottom;
        }
    </fx:Style>
    
    <fx:Declarations>
        <esri:InfoSymbol id="myInfoSymbol">
            <esri:infoRenderer>
                <fx:Component>
                    <s:DataRenderer>
                        <s:layout>
                            <s:HorizontalLayout/>
                        </s:layout>

                        <fx:Script>
                            <![CDATA[
                                protected function closeWin(event:MouseEvent):void
                                {
                                    dispatchEvent(new Event("closeWin", true));
                                }
                            ]]>
                        </fx:Script>

                        <s:Label paddingBottom="3"
                                 paddingLeft="3"
                                 paddingRight="3"
                                 paddingTop="3"
                                 text="This line is {data.distance}"/>
                        <s:Button id="closeButton" label="X"
                                  width="14" height="14" click="closeWin(event)"/>
                    </s:DataRenderer>
                </fx:Component>
            </esri:infoRenderer>
        </esri:InfoSymbol>
        
        <esri:GeometryService id="geometryService"
                              concurrency="last"
                              lengthsComplete="lengthsCompleteHandler(event)"
                              showBusyCursor="true"
                              url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
        
        <esri:SimpleLineSymbol id="lineSymbol"
                               width="4"
                               color="#6E6F00"/>
        
        <esri:DrawTool id="drawTool"
                       drawEnd="drawEndHandler(event)"
                       graphicsLayer="{lineLayer}"
                       lineSymbol="{lineSymbol}"
                       map="{map}"/>
    </fx:Declarations>
    
    <s:controlBarContent>
        <s:Label width="100%"
                 color="#6E6F00"
                 fontSize="14"
                 text="Click and hold down on the map to draw a line that will be added to the map. The application will then use the geometry service to calculate the length of the line."/>
    </s:controlBarContent>
    
    <esri:Map id="map">
        <esri:extent>
            <esri:Extent xmin="-13044000" ymin="4035000" xmax="-13039000" ymax="4039000">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="lineLayer"/>
        <esri:GraphicsLayer id="resultLayer"/>
    </esri:Map>
</s:Application>

GlenReid · ‎09-10-2011

The closeWin() within the <fx:Script> doesn't get fired from the button click event.

RobertScheitlin__GISP · ‎09-11-2011

Glen,

Here is the code that works (Tested this time):

The big issue was adding the event listener to the right component and enabling mouse events for draw graphics when you don't deactivate the draw tool after you have drawn a graphic.

<?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"
               initialize="application_initializeHandler(event)"
               pageTitle="Draw and Measure lines">
    <!--
    This sample shows how to measure line distance correctly.
    
    ArcGIS Server 10 adds support for geodesic measurement.
    
    With earlier versions of ArcGIS Server, the "geodesic" property cannot be used.
    The "9.3" solution depends on which coordinate system is being using.
    If the map uses a geographic coordinate system, the line needs to be projected
    into the desired projected coordinate system for calculating the line length.
    The geometry service can be used to do the projection.
    
    With ArcGIS Server 10, the geodesic property can be used for easier measurements.
    -->
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.SpatialReference;
            import com.esri.ags.events.DrawEvent;
            import com.esri.ags.events.GeometryServiceEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.geometry.Polyline;
            import com.esri.ags.tasks.supportClasses.LengthsParameters;
            
            import mx.events.FlexEvent;
            
            [Bindable]private var latestEndpoint:MapPoint;
            
            private function application_initializeHandler(event:FlexEvent):void
            {
                drawTool.activate(DrawTool.FREEHAND_POLYLINE, true); 
            }
            
            private function drawEndHandler(event:DrawEvent):void
            {
                var drawnLine:Polyline = Polyline(event.graphic.geometry);
                
                var lengthsParameters:LengthsParameters = new LengthsParameters();
                lengthsParameters.geodesic = true;
                lengthsParameters.polylines = [ drawnLine ];
                
                latestEndpoint = drawnLine.paths[0][0] as MapPoint;
                
                geometryService.lengths(lengthsParameters);
            }
            
            private function lengthsCompleteHandler(event:GeometryServiceEvent):void
            {
                // Report as meters if less than 3km, otherwise km
                var dist:Number = (event.result as Array)[0];
                var myAttributes:Object = {};
                if (dist < 3000)
                {
                    myAttributes.distance = Math.round(dist) + " meters";
                }
                else
                {
                    myAttributes.distance = Number(dist / 1000).toFixed(1) + " km";
                }
                //var g:Graphic = new Graphic(latestEndpoint, new TextSymbol(null, "text3", 0, true, 0, true));
                var g:Graphic = new Graphic(latestEndpoint, myInfoSymbol, myAttributes);
                g.addEventListener("closeWin", closeHandler);
                resultLayer.add(g);
            }
            
            private function closeHandler(event:Event):void
            {
                trace ("closeWin");
                lineLayer.clear();
                resultLayer.clear();
            }
        ]]>
    </fx:Script>
    
    <fx:Style>
        @namespace esri "http://www.esri.com/2008/ags";
        
        esri|InfoSymbolWindow
        {
            backgroundColor: #FFFF00;
            border-color: #6E6F00;
            border-thickness: 2;
            info-placement: bottom;
        }
    </fx:Style>
    
    <fx:Declarations>
        <esri:InfoSymbol id="myInfoSymbol">
            <esri:infoRenderer>
                <fx:Component>
                    <s:DataRenderer>
                        <s:layout>
                            <s:HorizontalLayout/>
                        </s:layout>
                        
                        <fx:Script>
                            <![CDATA[
                                protected function closeWin(event:MouseEvent):void
                                {
                                    dispatchEvent(new Event("closeWin", true));
                                }
                            ]]>
                        </fx:Script>
                        
                        <s:Label paddingBottom="3"
                                 paddingLeft="3"
                                 paddingRight="3"
                                 paddingTop="3"
                                 text="This line is {data.distance}"/>
                        <s:Button id="closeButton" label="X"
                                  width="14" height="14" click="closeWin(event)"/>
                    </s:DataRenderer>
                </fx:Component>
            </esri:infoRenderer>
        </esri:InfoSymbol>
        
        <esri:GeometryService id="geometryService"
                              concurrency="last"
                              lengthsComplete="lengthsCompleteHandler(event)"
                              showBusyCursor="true"
                              url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
        
        <esri:SimpleLineSymbol id="lineSymbol"
                               width="4"
                               color="#6E6F00"/>
        
        <esri:DrawTool id="drawTool"
                       drawEnd="drawEndHandler(event)"
                       graphicsLayer="{lineLayer}"
                       lineSymbol="{lineSymbol}"
                       map="{map}"/>
    </fx:Declarations>
    
    <s:controlBarContent>
        <s:Label width="100%"
                 color="#6E6F00"
                 fontSize="14"
                 text="Click and hold down on the map to draw a line that will be added to the map. The application will then use the geometry service to calculate the length of the line."/>
    </s:controlBarContent>
    
    <esri:Map id="map">
        <esri:extent>
            <esri:Extent xmin="-13044000" ymin="4035000" xmax="-13039000" ymax="4039000">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="lineLayer"/>
        <esri:GraphicsLayer id="resultLayer"/>
    </esri:Map>
</s:Application>

GlenReid · ‎09-12-2011

That was it. Many thanks Robert.