I've been thinking and trying out some solutions for this, and ended up customizing the PopUpRendererSkin. It works but I'm not really satisfied with the solution, what I would like is to use some kind of AppEvent for showing PopUp and closing/hidning PopUp. I've been looking through the documentation but I can't find anything like that, I've tried using SHOW_INFOWINDOW and some other events without success.I've not tried to create my own custom AppEvent, because I wouldn't know how to dispatch the events when PopUp shows or hides, if I knew that I would probably not even have to create any AppEvents.Anyone knows a way to listen to the events of showing and closing/hiding a PopUp? If anyone is interested in the solution I have so far, I got the PopUpRendererSkin.mxml from downloading the API and copied it to src/com/esri/viewer/skins/ and to the default.css I added:esri|PopUpRenderer
{
skin-class: ClassReference("com.esri.viewer.skins.PopUpRendererSkin");
}All the code I put in PopUpRendererSkin.mxml, at the end of the commitProperties function add:// My addition for highlighting popup features...
var glExists:Boolean = false;
var glID:int;
//Go through layerIds in map to check if the highlightGraphics graphiclayer exists and if so get its id.
for (var i:int = 0; i < map.layerIds.length; i++)
{
if (map.layerIds== "highlightGraphics")
{
glID = i;
glExists = true;
}
}
//If highlightGraphics graphicslayer doesn't exist, create it and add it to the map.
if(!glExists){
var gl:GraphicsLayer = new GraphicsLayer();
gl.id = "highlightGraphics";
gl.visible = true;
map.addLayer(gl,200);
//Get the id of the graphicslayer
for (var j:int = 0; j < map.layerIds.length; j++)
{
if (map.layerIds== "highlightGraphics")
{
glID = j;
glExists = true;
}
}
}
//Set the highlight graphic symbol
var hlGraphic:Graphic = new Graphic(graphic.geometry);
switch(hlGraphic.geometry.type)
{
case Geometry.MAPPOINT:
{
hlGraphic.symbol = new SimpleMarkerSymbol("circle",22,0x000000,0,0,0,0,new SimpleLineSymbol("solid",0xFF0000,0.5,2));
break;
}
case Geometry.POLYLINE:
{
hlGraphic.symbol = new SimpleLineSymbol("solid",0xFF0000,0.3,8);
break;
}
default:
{
hlGraphic.symbol = new SimpleFillSymbol("solid",0x000000,0,new SimpleLineSymbol("solid",0xFF0000,0.4,3));
break;
}
}
//set a glow filter to the highlight graphic
var gf:spark.filters.GlowFilter = new spark.filters.GlowFilter();
gf.color = 0xFF0000;
gf.alpha = 1;
gf.strength = 2;
gf.blurX = 8;
gf.blurY = 8;
hlGraphic.filters = [gf];
//Clear the highlightGraphics graphiclayer and add the new highight graphic
map.layers[glID].clear();
map.layers[glID].add(hlGraphic);
//add eventhandlers to "unhighlight" features
map.infoWindow.closeButton.addEventListener(MouseEvent.CLICK, onInfoWindowClosed);
map.addEventListener(MapMouseEvent.MAP_CLICK, onMapClick)
// --- end addition ---------------And then add a these two functions somewhere://My handler for clicking closebutton on a popup/infowindow
private function onInfoWindowClosed(event:MouseEvent):void
{
if(hostComponent.map){
for (var i:int = 0; i < hostComponent.map.layerIds.length; i++)
{
if (hostComponent.map.layerIds== "highlightGraphics")
{
hostComponent.map.layers.clear();
}
}
hostComponent.map.infoWindow.closeButton.removeEventListener(MouseEvent.CLICK, onInfoWindowClosed);
}
}
//My handler for a mapclick, mapclicking outside a feature with popup configuration will hide popup/infowindow and clear the highlight graphics.
private function onMapClick(event:MapMouseEvent):void
{
for (var i:int = 0; i < event.map.layerIds.length; i++)
{
if (event.map.layerIds== "highlightGraphics")
{
event.map.layers.clear();
}
}
event.map.infoWindow.hide();
event.map.removeEventListener(MapMouseEvent.MAP_CLICK, onMapClick);
}
