Add button to PopupInfo

[lavoillottenicolas]

Hello
is it possible to add components to PopUpInfo : e.g a simple button ?

like for the link "zoom on" I would like add a button that open the widget "google street" on the current location of my map

[RobertScheitlin__GISP]

Lavoillette,

   That would involve getting the PopUpRendererSkin.mxml from the Flex  API download in the  arcgis_api_for_flex_2_4\ArcGIS_Flex\skins\src\com\esri\ags\skins folder  and adding a new button to the Declarations section and in the  commitProperties function adding to the popup just like the zoom to  button.

[lavoillottenicolas]

Thanks Roberts,

is it possible to override class PopupRendererSkin  with my own renderer, instead of change the class PopupRendererSkin ?

[RobertScheitlin__GISP]

Lavoillette,

   Sure just use that as your starting point, for can use any skin you want with the PopUp.

[lavoillottenicolas]

Hi Roberts,

I created my own skin "CustomPopUpRendererSkin" with the source : PopUpRenderer, and my component "CustomPopUpRenderer" derived from PopupRenderer


When I Use my component : PopupRenderer, my skin : CustomPopUpRendererSkin is never called ? only the PopUpRendererSkin is called


Into the widget "LocateWidget" :

private function showLocation(data:Object):void
            {
                hideInfoWindow();
                graphicsLayer.clear();
                var ptGraphic:Graphic = new Graphic();
                ptGraphic.geometry = data.point;
                graphicsLayer.add(ptGraphic);

                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = data.title;
                popUpInfo.description = data.content;
 
  //
  // My component
                var infoWindowRenderer:ClassFactory = new ClassFactory(CustomPopUpRenderer);
 
                infoWindowRenderer.properties = { popUpInfo: popUpInfo };
                graphicsLayer.infoWindowRenderer = infoWindowRenderer;

                popUpRenderer.popUpInfo = popUpInfo;
                popUpRenderer.graphic = ptGraphic;

                if (map.scale > zoomScale)
                {
                    map.scale = zoomScale;
                }
                map.centerAt(data.point);

                infoWindowShow();
            }



My CustomPopUpRenderer.as
-------------------------
package com.esri.viewer.components
{
import com.esri.ags.webmap.PopUpRenderer;

public class CustomPopUpRenderer extends PopUpRenderer
{
  public function CustomPopUpRenderer()
  {
   //TODO: implement function
   super();
  }
}
}


My CustomPopUpRendererSkin.mxml
-------------------------------
<s:SparkSkin 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"
             xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"
             width="270"
             maxHeight="300"
             preinitialize="skin_preinitializeHandler(event)">
<fx:Metadata>[HostComponent("com.esri.viewer.components.CustomPopUpRenderer")]</fx:Metadata>

    <fx:Script>
        <![CDATA[
        ..... currently the source of PopUpRendererSkin.mxml


Nicolas

Regards

[RobertScheitlin__GISP]

Nicolas,

   The way use a particular PopUpRenederSkin is just one line of code. You do not need a CustomPopUpRenderer.as all you need is your CustomPopUpRendererSkin.mxml and this line in your widget.

popUpRenderer.setStyle("skinClass", Class(widgets.MyPopUps.PopUpRendererSkin));

So your whole function would look like this:

            private function showLocation(data:Object):void
            {
                hideInfoWindow();
                graphicsLayer.clear();

                var ptGraphic:Graphic = new Graphic();
                ptGraphic.geometry = data.point;
                graphicsLayer.add(ptGraphic);

                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = data.title;
                popUpInfo.description = data.content;

                var infoWindowRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                infoWindowRenderer.properties = { popUpInfo: popUpInfo };
                graphicsLayer.infoWindowRenderer = infoWindowRenderer;

                popUpRenderer.popUpInfo = popUpInfo;
                popUpRenderer.graphic = ptGraphic;
                popUpRenderer.setStyle("skinClass", Class(widgets.MyPopUps.PopUpRendererSkin));

                if (map.scale > zoomScale)
                {
                    map.scale = zoomScale;
                }
                map.centerAt(data.point);

                infoWindowShow();
            }

Of course you will need to import your PopUpRendererSkin as well:

import widgets.MyPopUps.PopUpRendererSkin;

[lavoillottenicolas]

thanks Roberts,

it works

nicolas
regards

[TroySchmidt]

When I do this I am trying to access this.hostcomponent in the SkinClass and it is giving me null.  I am trying to do additional processing by overriding the commitProperties function.  Is this methodology wrong?