Add abutton inside an Infowindow

758
5
12-05-2011 02:37 AM
tanyabisen
New Contributor
Hello All,

Can somebody help me with adding a button inside an Infowindow..

Thanks,

Tanya
Tags (2)
0 Kudos
5 Replies
IvanBespalov
Occasional Contributor III
Tanya,

Try to modify InfoWindowSkin. (available since version 2.3)

In ArcGIS API find skins folder, copy InfoWindowSkin.mxml to your application skins folder. Modify it as you need: add buttons, labels ... Define skin to your InfoWindow.
0 Kudos
tanyabisen
New Contributor
Hi ibespalov,

Ok..I have done that..I need to call the button which is defind in a skin to the main application. I am not able to access it.

Thanks,
Tanya
0 Kudos
IvanBespalov
Occasional Contributor III
I am not able to access it.


Why do you need to access it? What do you want to do with button when accessed?

You can listen button events. For example:

1 - Modified esri sample application
<?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"
      pageTitle="FeatureLayer on demand">
 <!--
 This sample shows you how to add InfoWindows to a feature layer.
 When user clicks on one of the polygon features, the info window popup will show.
 -->
 
 <s:layout>
  <s:VerticalLayout/>
 </s:layout>
 
 <fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  esri|InfoWindow
  {
   skin-class: ClassReference("your.path.to.InfoWindowSkin");
  }
 </fx:Style>
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.events.FlexEvent;

   protected function map1_creationCompleteHandler(event:FlexEvent):void
   {
    if (map.infoWindow)
    {
     map.infoWindow.addEventListener("onSubmitClick", onInfoWindowSubmitClick, false, 0, true);
    }
   }
   
   protected function onInfoWindowSubmitClick(event:Event):void
   {
    Alert.show("submit button clicked", "! ! !");
   }

  ]]>
 </fx:Script>
 
 <esri:Map id="map"
     openHandCursorVisible="false"
     creationComplete="map1_creationCompleteHandler(event)">
  <esri:extent>
   <!-- Extent for Bloomfield Hills, Michigan -->
   <esri:Extent xmin="-9271300" ymin="5247400" xmax="-9270300" ymax="5248500">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>
  <esri:FeatureLayer id="fLayer"
         mode="onDemand"
         outFields="[PARCELID,OWNERNME1,SITEADDRESS,LNDVALUE,USECD]"
         url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer...">
   <esri:symbol>
    <esri:SimpleFillSymbol id="fillsym" style="null">
     <esri:SimpleLineSymbol width="3" color="0xFF0000"/>
    </esri:SimpleFillSymbol>
   </esri:symbol>
   <esri:infoWindowRenderer>
    <fx:Component>
     <mx:VBox backgroundColor="0xffffff"
        color="0x444444"
        label="Parcel {data.PARCELID}">
      <mx:Label text="Owner: {data.OWNERNME1}"/>
      <mx:Label text="Address: {data.SITEADDRESS}"/>
      <mx:Label text="Land Value: {data.LNDVALUE}"/>
      <mx:Label text="Landuse: {data.USECD}"/>
     </mx:VBox>
    </fx:Component>
   </esri:infoWindowRenderer>
  </esri:FeatureLayer>
 </esri:Map>
 
 <s:Label enabled="{fLayer.loaded}" text="Using the 'onDemand' mode, parcels are fetched 'as needed' when you pan and zoom.  Click any parcel to see more information."/>
 
</s:Application>


2 - Modifications in InfoWindowSkin

<fx:Metadata>
        /**
         * A strongly typed property that references the component to which this skin is applied.
         */
        [HostComponent("com.esri.ags.components.supportClasses.InfoWindow")]
  
 [Event(name="onSubmitClick", type="flash.events.Event")]
</fx:Metadata>

...

<fx:Script>
<![CDATA[
    /**
    * Listen submit button click
    */
    protected function onSubmitButtonClick(event:MouseEvent):void
    {
        dispatchEvent(new Event("onSubmitClick", true, false));
    }
]]>
</fx:Script>

...

<s:HGroup id="headerGroup"
               width="100%"
               includeInLayout.withoutHeader="false"
               minWidth="0"
               verticalAlign="middle"
               visible.withoutHeader="false">
            <esri:InfoWindowLabel id="labelText"/>
            <s:Rect width="100%" height="10"
                    minWidth="0"/>
            <esri:InfoWindowCloseButton id="closeButton"/>
     <s:Button id="submitButton"
 click="onSubmitButtonClick(event)"
 label="Submit"/>
0 Kudos
tanyabisen
New Contributor
Hi Ivan,

It worked. Thanks a ton... Basically I have 2 events: mouseover and mapclick and I want to show the button only on mapclick event. Thats the reason I asked if i can access the id of a button defined in skin into the main application
0 Kudos
JHayes
by
Occasional Contributor
Ivan,

You are the man, man.  Thanks for the code.  It really helped me out!!
0 Kudos