topic Re: Add button to PopupInfo in ArcGIS API for Flex Questions

Add button to PopupInfo

lavoillottenicolas — Fri, 26 Aug 2011 11:46:47 GMT

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

Re: Add button to PopupInfo

RobertScheitlin__GISP — Fri, 26 Aug 2011 12:09:28 GMT

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.

Re: Add button to PopupInfo

lavoillottenicolas — Fri, 26 Aug 2011 13:58:19 GMT

Thanks Roberts,

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

Re: Add button to PopupInfo

RobertScheitlin__GISP — Fri, 26 Aug 2011 14:21:50 GMT

Lavoillette,

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

Re: Add button to PopupInfo

lavoillottenicolas — Mon, 29 Aug 2011 08:21:54 GMT

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

Re: Add button to PopupInfo

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:15:31 GMT

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;

Re: Add button to PopupInfo

lavoillottenicolas — Tue, 30 Aug 2011 06:58:44 GMT

thanks Roberts,

it works

nicolas
regards

Re: Add button to PopupInfo

TroySchmidt — Thu, 03 Nov 2011 15:19:41 GMT

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?