Editing Viewer 2.4's Pop-Up Skin

[ChadKijewski]

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.

[RobertScheitlin__GISP]

Jonathan,

   Sure that is as easy as changing the style block in the PopUpRendererSkin.mxml

<fx:Style>
        .formStyle
        {
            indicatorGap: 5;
            labelWidth: 100;
            paddingBottom: 5;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 5;
            labelWidth: 250;
        }
    </fx:Style>

[JonathanBaggott]

Hi Robert

Thanks a million for all your help so far.
I really hope this is the last time I have to bother you!
😄

I increased the width of the labels, but as you can see in the screenshot, the label and field data don't "center" in the form. How can I do this? Does it have something to do with padding?

Thanks again.

[RobertScheitlin__GISP]

Jonathan,

    The only thing you can do is you know what you set the skins width to, so make your label half of that.

[LefterisKoumis]

First of all, thank you for making the life for flex newbies easier.

I followed your steps and I successfuly altered the width of the pop up window when I tested it in flash builder.  So, now what do I transfer to my application to apply the wider property for the pop up window? What do I copy from the compiled code (bin-debug) to my application. I know that I have to copy the default.css but what else? Thank you so much.

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.

[RobertScheitlin__GISP]

Lefteris,

   You will have to export a release build and then copy everything from the bin-release folder to your web server.

[LefterisKoumis]

Thank you.

Lefteris,

   You will have to export a release build and then copy everything from the bin-release folder to your web server.

[MartynSmith]

Jonathan,

   Sure that is as easy as changing the style block in the PopUpRendererSkin.mxml

<fx:Style>
        .formStyle
        {
            indicatorGap: 5;
            labelWidth: 100;
            paddingBottom: 5;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 5;
            labelWidth: 250;
        }
    </fx:Style>

Robert-  I have imported the PopUpRendererSkin.mxml from the API, and successfully removed the "zoomto" text from the popup... but I dont have the above code block in my PopUpRendererSkin.mxml ?


EDIT: nevermind I found it, but looked different, not in fx:style, formstyle:

       

<!--- @private -->
        <mx:Form id="descriptionForm"
                 width="100%" height="100%"
                 horizontalScrollPolicy="off"
                 indicatorGap="5"
                 labelWidth="150"
                 paddingBottom="5"
                 paddingLeft="0"
                 paddingRight="0"
                 paddingTop="5"
                 verticalScrollPolicy="off"/>

[TonyAlmeida]

Jonathan8209

How did you change the color the popup from gray to green?
Or if anyone else can answer this for me i would greatly appreciate it.

Thanks!

[RobertScheitlin__GISP]

Tony,

   Look here:

http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Setting_styles_for_the_Viewer/01m30000...

[TonyAlmeida]

rscheitlin, thanks for the reply. Is there a way to just change the popup with out changing the header?

Thanks for pointing me in the right direction.

Thanks!