nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Trouver plus de publications taguées avec

Accepted answers

All comments

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.

MarcoPoetsch3_0-1610503838019.png

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?

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.