Editing Viewer 2.4's Pop-Up Skin

3273
33
08-11-2011 08:51 AM
ChadKijewski
New Contributor
Hey all,

I was wondering if anyone could impart any insight regarding altering the skin of the built-in pop-up utility.  In particular, I'm trying to figure out how to remove the 'Zoom To' button that automatically appears at the bottom of each generated pop-up.  I'm going through the compiled source code now but unfortunately I can't seem to find a particular MXML that governs the popup's skin, and was hoping someone could point me in the right direction.

Thanks for any help in advance.
Tags (2)
0 Kudos
33 Replies
RobertScheitlin__GISP
MVP Emeritus
Chad,

   The popup that is used in the Viewer is actually part of the Flex API, so the source for it is not in the Viewers project structure. That being said it is easy to add the API's PopUpRendererSkin.mxml to your Flex Viewer project so that you can modify it and have it used by your viewer app. All you need to do is get the Flex API download from here:

http://resources.arcgis.com/content/arcgis-flex-api-download



  1. When you unzip it you will have a arcgis_api_for_flex_2_4 folder drill down and find arcgis_api_for_flex_2_4\ArcGIS_Flex\skins\src\com\esri\ags\skins\PopUpRendererSkin.mxml and copy it to the clipboard.

  2. In the Flex Viewer project right click on src folder in the Package  Explorer and choose New > Package and for the name field put  com.esri.ags.skins and then paste the PopUpRendererSkin.mxml into that Package/folder.

  3. then look for vGroup.addElement(zoomToButton) and comment that line out.

  4. Then the next time you compile run your viewer the zoom to button should be gone.

0 Kudos
ChadKijewski
New Contributor
Robert,

Fantastic, thanks much for the assist.  I'm a complete newbie when it comes to editing source code and ActionScript, but was easily able to alter it with your help.

Chad
0 Kudos
PetrTrefil
New Contributor
Please,
give advice for two questions:
1/
how to use such new PopUpRendererSkin.mxml ?

How to do, use this skin for example PopUp windows ?

In main config.xml I have for example:
<operationallayers>
<layer label="vrstevnice" type="dynamic" visible="false" alpha="0.8"
url="http://gishzskv:8399/arcgis/rest/services/vrstevnice/MapServer">
<sublayer id="0" popupconfig="popups/PopUp_vrstevnice.xml"/>
</layer>
</operationallayers>

and in the section popups I created "PopUp_vrstevnice.xml"

How to manage, the PopUp window for this case use PopUpRendererSkin.mxml and not default?

2/
How to do to open popup windows without clicking on object in map, but by moving over object ?

Thanks
0 Kudos
JonathanBaggott
New Contributor
Hi there guys
I'm sorry to bother you, but I'm desperately trying to use the new PopUpRendererSkin as provided by http://forums.arcgis.com/threads/36513-2.4-PopUp-scrollbar-bug in my Flex Viewer 2.4 app.

I followed the steps provided by Robert, but instead of using the skin from the Flex API download, I used the one from the above link. The thing is, I make the changes to the PopUpRenderSkin, I save it, then re-run the project, but the changes do not appear.

Any suggestions?
I would really appreciate some help with this. My manager is on my case.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Jonathan,

   Are you using the compiled or source code version of the viewer?
0 Kudos
JonathanBaggott
New Contributor
Robert, thanks so much for replying, I really appreciate it!
I am using the viewer "with" source code version.

Your widgets are great by the way.
I hope ESRI is rewarding you for your efforts!
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Jonathan,

   So you said you followed the steps that I outlined. Can you verify for me that you have a your Flex Viewer project as shown exactly in this attached JPG?

[ATTACH=CONFIG]9208[/ATTACH]
0 Kudos
JonathanBaggott
New Contributor
Hey Robert

I got it sorted!
Thanks for helping me out.
The problem was that I put the skin in the wrong folder!
Keep well.
0 Kudos
JonathanBaggott
New Contributor
Hi Robert
I'm back again.
I was wondering how do I widen the first column in the popup window?
I have successfully widened the entire window, but the column doesn't automatically adjust.
As you can see in the attached screenshot, the labels for my fields are getting cut off, as they are too long. Any ideas?

Thanks so much.
0 Kudos