PopUpRenderer and infoWindowRenderer

[JacksonTrappett]

Hi, I am upgrading my app which is built on top of flexviewer code from the old 1.3 viewer to the new 2.4 viewer code.  One of the functions that I had built into the old version was an identify tool that had a popup with the results.  It used code like this:

     identGfxLayer.add(lastIdentifyResultGraphic);
     var infoData:Object = 
     { 
      title: title, 
      content: content, 
      link: link, 
      point: point,
      geometry: resultGraphic.geometry
     };
     infoPopup.infoData = infoData;

Now I am trying to replace that with the new way which seems like it should be this:

     var infoData:Object = 
     { 
      title: title, 
      content: content, 
      link: link, 
      point: point,
      geometry: resultGraphic.geometry
     };
     var infoWindowRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
     infoWindowRenderer.properties = { popUpInfo: configurePopUpInfo(infoData)};
     lastIdentifyResultGraphic.infoWindowRenderer = infoWindowRenderer;
     identGfxLayer.add(lastIdentifyResultGraphic);

This is working just fine, except that when the user clicks on the map, the feature they chose is highlighted on the graphics layer but no popup is shown until they click AGAIN on the graphic.  In the old popup, it would add the graphic and display the popup at the same time.  Is there some kind of extra command I need to send to get the popup to display automatically without the user having to click twice?

[JacksonTrappett]

Ok, got this one figured out on my own.  Instead of adding the renderer to the graphic, I created a popUpRenderer and added it to the map, then told it to display at the same time the graphic is drawn.

     identGfxLayer.add(lastIdentifyResultGraphic);
     var infoData:Object = 
      { 
       title: title, 
       content: content, 
       link: link, 
       point: point,
       geometry: resultGraphic.geometry
      };
     var popUpInfo:PopUpInfo = new PopUpInfo;
     popUpInfo = configurePopUpInfo(infoData);
     var myInfoPopup:PopUpRenderer = new PopUpRenderer;
     myInfoPopup.popUpInfo = popUpInfo;
     map.infoWindow.content = myInfoPopup;
     map.infoWindow.show(infoData.point);

Now I'm trying to figure out how to clear the graphics layer when the popup is closed.  If anyone has any hints on that please let me know, otherwise hopefully I'll figure that out too soon and post it up!

[JacksonTrappett]

Ok, that last question was super simple --

Add info window close listener like this:
map.infoWindow.addEventListener(Event.CLOSE, infoWindowCloseHandler);

Then clear the graphics layer in that function.  Should have looked for a few minutes before asking!

[JacksonTrappett]

This popup has been a lot of trouble for me.  After finally getting everything I was asking about above working, I found out today that the media portion of the popup is now not displaying.

If I'm using a map.InfoWindow, is there still a media section available?  I am still setting it the way I was before but now it just isn't there.

Here's the code including the function that sets the popup media:

     var infoData:Object = 
      { 
       title: title, 
       content: content, 
       link: link, 
       point: point,
       geometry: resultGraphic.geometry
      };
     
     identGfxLayer.add(lastIdentifyResultGraphic);
     var popUpInfo:PopUpInfo = new PopUpInfo;
     popUpInfo = configurePopUpInfo(infoData);
     var myInfoPopup:PopUpRenderer = new PopUpRenderer;
     myInfoPopup.popUpInfo = popUpInfo;
     map.infoWindow.content = myInfoPopup;
     map.infoWindow.show(infoData.point);

   private function configurePopUpInfo(popUpData:Object):PopUpInfo
   {
    var popUpInfo:PopUpInfo = new PopUpInfo;
    
    popUpInfo.title = popUpData.title;
    popUpInfo.description = popUpData.content;
    
    if (popUpData.link)
    {
     var pos:Number = popUpData.link.length - 4;
     var sfx:String = popUpData.link.substr(pos, 4).toLowerCase();
     if ((sfx == ".jpg") || (sfx == ".png") || (sfx == ".gif")) // use PopUpMediaInfo if it is an image
     {
      var popUpMediaInfo:PopUpMediaInfo = new PopUpMediaInfo;
      popUpMediaInfo.type = PopUpMediaInfo.IMAGE;
      popUpMediaInfo.imageLinkURL = popUpData.link;
      popUpMediaInfo.imageSourceURL = popUpData.link;
      popUpInfo.popUpMediaInfos = [ popUpMediaInfo ];
     }
     else
     {
      popUpInfo.description += "<br/><a href='" + popUpData.link + "'>Click here for more info</a>"
     }
    }
    
    return popUpInfo;
   }

Any insight would be a relief!  Thanks.

[JacksonTrappett]

Looks like I'm going to be the only one posting in my thread, but I'll keep it up in case anyone has my same issues down the road.  I solved my problem of no media section by configuring the popup renderer first and then adding it to the map.infoWindow.  I still don't 100% understand why/how this works, but it does.  Here's the code:

     var infoData:Object = 
      { 
       title: title, 
       content: content, 
       link: link, 
       point: point,
       geometry: resultGraphic.geometry
      };
     
     identGfxLayer.add(lastIdentifyResultGraphic);
     
     popUpRenderer.popUpInfo = configurePopUpInfo(infoData);
     popUpRenderer.graphic = lastIdentifyResultGraphic;
     map.infoWindow.content = popUpRenderer;
     map.infoWindow.contentOwner = popUpRenderer;
     map.infoWindow.show(infoData.point);

[GerardoArmendariz]

Thanks for your thread.  I was having a similar problem while upgrading to version 3 of the Flex API.

[shreetibanerjee]

This was a helpful post - helped to solve my popup configuring issue.