topic Re: Select graphic programmatically in ArcGIS API for Flex Questions

Select graphic programmatically

JordanChapman — Fri, 14 Jun 2013 18:35:49 GMT

I have a layer containing several Graphic's each of these have an infoWindowRenderer. When you click on these the selected one gets highlighted (I think a GlowFilter gets applied to the graphic) and an infoWindow opens. I also have a list in a widget which lists all of the graphics. What I want to happen is that when I click on an item in the list the actual graphic gets highlighted and the infoWindow associated with that graphic gets displayed. Is there a way to simulate a click or else display the infoWindow and add the highlighting?

I can add the highlighting effect by adding a GlowFilter to the Graphic, but I wonder if there is an easier way to do this.

Re: Select graphic programmatically

RobertScheitlin__GISP — Fri, 14 Jun 2013 20:20:00 GMT

Jordan,

You can display a popup programatically by following this code sample:

http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000008v000000.htm

Re: Select graphic programmatically

JordanChapman — Tue, 18 Jun 2013 16:34:24 GMT

Jordan,

You can display a popup programatically by following this code sample:

http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000008v000000.htm

Thank you very much Robert, is there a good way to select the item in the list (or at the very least deselect the last item) when you click on the graphic on the map ? In the example provided the item that was last clicked in the list stays selected even if you click on another state.

Re: Select graphic programmatically

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:57:06 GMT

Jordan,

Sure here is the updated script portion of that sample:

            import com.esri.ags.Graphic;
            import com.esri.ags.components.ContentNavigator;
            import com.esri.ags.events.QueryEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.portal.PopUpRenderer;
            import com.esri.ags.portal.supportClasses.PopUpFieldFormat;
            import com.esri.ags.portal.supportClasses.PopUpFieldInfo;
            import com.esri.ags.portal.supportClasses.PopUpInfo;
            import com.esri.ags.utils.GraphicUtil;
            
            import mx.collections.ArrayList;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            
            import spark.events.IndexChangeEvent;
            
            private var contentNavigator:ContentNavigator = new ContentNavigator();
            
            protected function createPopupRenderer_initializeHandler(event:FlexEvent):void
            {
                var field1:PopUpFieldInfo = new PopUpFieldInfo();
                field1.fieldName = "MED_AGE";
                field1.label = "Median Age: ";
                field1.visible = true;
                
                var field2:PopUpFieldInfo = new PopUpFieldInfo();
                field2.fieldName = "POP2007";
                field2.format = new PopUpFieldFormat();
                field2.label = "Population: ";
                field2.visible = true;
                
                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = "{STATE_NAME}";
                popUpInfo.popUpFieldInfos = [ field1, field2 ];
                popUpInfo.showZoomToButton = false;
                
                var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                popUpRenderer.properties = { "popUpInfo": popUpInfo };
                statesGraphicsLayer.infoWindowRenderer = popUpRenderer;
            }
            
            protected function queryTask_executeCompleteHandler(event:QueryEvent):void
            {
                if (event.featureSet.features)
                {
                    for each(var gra:Graphic in event.featureSet.features)
                    {
                        gra.addEventListener(MouseEvent.CLICK, selectStateFromList);
                    }
                    statesGraphicsLayer.graphicProvider = event.featureSet.features;
                    statesList.dataProvider = new ArrayList(event.featureSet.features);
                    map.extent = GraphicUtil.getGraphicsExtent(event.featureSet.features);
                }
            }
            
            protected function esriService_faultHandler(event:FaultEvent):void
            {
                Alert.show("Error: " + event.fault.faultString, "Error code: " + event.fault.faultCode);
            }
            
            protected function statesList_changeHandler(event:IndexChangeEvent):void
            {
                statesList.ensureIndexIsVisible(statesList.selectedIndex);
                var currentGraphic:Graphic = List(event.currentTarget).selectedItem as Graphic;
                var mapPoint:MapPoint = currentGraphic.geometry.extent.center;
                contentNavigator.dataProvider = new ArrayList([ currentGraphic ]);
                map.infoWindowContent = contentNavigator;
                map.zoomTo(currentGraphic.geometry);
                map.infoWindow.show(mapPoint);
            }
            
            protected function selectStateFromList(event:MouseEvent):void
            {
                var gr:Graphic = Graphic(event.target);
                statesList.selectedItem = gr;
                statesList.ensureIndexIsVisible(statesList.dataProvider.getItemIndex(gr));
            }

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic:

Re: Select graphic programmatically

JordanChapman — Sat, 11 Dec 2021 08:57:09 GMT

Jordan,

Sure here is the updated script portion of that sample:

            import com.esri.ags.Graphic;
            import com.esri.ags.components.ContentNavigator;
            import com.esri.ags.events.QueryEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.portal.PopUpRenderer;
            import com.esri.ags.portal.supportClasses.PopUpFieldFormat;
            import com.esri.ags.portal.supportClasses.PopUpFieldInfo;
            import com.esri.ags.portal.supportClasses.PopUpInfo;
            import com.esri.ags.utils.GraphicUtil;
            
            import mx.collections.ArrayList;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            
            import spark.events.IndexChangeEvent;
            
            private var contentNavigator:ContentNavigator = new ContentNavigator();
            
            protected function createPopupRenderer_initializeHandler(event:FlexEvent):void
            {
                var field1:PopUpFieldInfo = new PopUpFieldInfo();
                field1.fieldName = "MED_AGE";
                field1.label = "Median Age: ";
                field1.visible = true;
                
                var field2:PopUpFieldInfo = new PopUpFieldInfo();
                field2.fieldName = "POP2007";
                field2.format = new PopUpFieldFormat();
                field2.label = "Population: ";
                field2.visible = true;
                
                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = "{STATE_NAME}";
                popUpInfo.popUpFieldInfos = [ field1, field2 ];
                popUpInfo.showZoomToButton = false;
                
                var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                popUpRenderer.properties = { "popUpInfo": popUpInfo };
                statesGraphicsLayer.infoWindowRenderer = popUpRenderer;
            }
            
            protected function queryTask_executeCompleteHandler(event:QueryEvent):void
            {
                if (event.featureSet.features)
                {
                    for each(var gra:Graphic in event.featureSet.features)
                    {
                        gra.addEventListener(MouseEvent.CLICK, selectStateFromList);
                    }
                    statesGraphicsLayer.graphicProvider = event.featureSet.features;
                    statesList.dataProvider = new ArrayList(event.featureSet.features);
                    map.extent = GraphicUtil.getGraphicsExtent(event.featureSet.features);
                }
            }
            
            protected function esriService_faultHandler(event:FaultEvent):void
            {
                Alert.show("Error: " + event.fault.faultString, "Error code: " + event.fault.faultCode);
            }
            
            protected function statesList_changeHandler(event:IndexChangeEvent):void
            {
                statesList.ensureIndexIsVisible(statesList.selectedIndex);
                var currentGraphic:Graphic = List(event.currentTarget).selectedItem as Graphic;
                var mapPoint:MapPoint = currentGraphic.geometry.extent.center;
                contentNavigator.dataProvider = new ArrayList([ currentGraphic ]);
                map.infoWindowContent = contentNavigator;
                map.zoomTo(currentGraphic.geometry);
                map.infoWindow.show(mapPoint);
            }
            
            protected function selectStateFromList(event:MouseEvent):void
            {
                var gr:Graphic = Graphic(event.target);
                statesList.selectedItem = gr;
                statesList.ensureIndexIsVisible(statesList.dataProvider.getItemIndex(gr));
            }

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic:

That's what I initially tried to do, simply add an eventListener to the graphic, but it seems that something consumes the CLICK event most of the time. My code is a different from the example, but here is how I'm currently doing things:

                    for (var i:int = 0; i < result.Intersections.length; i++) {
                        var currentInter:Intersection = result.Intersections.getItemAt(i) as Intersection;
                        intersections.addItem(currentInter);
                        var graphic:Graphic = currentInter.createGraphic();
                        var iwr:ClassFactory = new ClassFactory(IntersectionInfoWindowRenderer);
                        iwr.properties = {intersection: currentInter};
                        graphic.infoWindowRenderer = iwr;
                        graphic.addEventListener(MouseEvent.CLICK, graphicClicked);
                    }

Is there any kind of event that gets dispatched when the map's infoWindow changes/opens ?

Re: Select graphic programmatically

RobertScheitlin__GISP — Tue, 18 Jun 2013 18:38:02 GMT

Jordan,

You may want to try to useCapture on the event listener:

graphic.addEventListener(MouseEvent.CLICK, graphicClicked, true);

As far as an event that is launched when the infowindow is shown. Sure there is:

map.infoWindow.addEventListener(Event.OPEN, some function);

Re: Select graphic programmatically

JordanChapman — Tue, 18 Jun 2013 18:53:39 GMT

Jordan,

You may want to try to useCapture on the event listener:
graphic.addEventListener(MouseEvent.CLICK, graphicClicked, true);
As far as an event that is launched when the infowindow is shown. Sure there is:
map.infoWindow.addEventListener(Event.OPEN, some function);

Thanks again for the help, however even with the useCapture flag the function is only getting called sporadically. As far as the infoWindow event, my graphic's infoWindowRenderer has a reference to the Intersection item, but I don't think there is a way to get that Intersection given only the map's infoWindow.