Select to view content in your preferred language

Popup Container

1081
5
08-11-2011 10:34 AM
MarcCavallaro
Regular Contributor
I've asked this question in the viewer forum with no response, so I'm posting it here with the hope that I can get an answer.

Is it possible to change the border, change the corner radius and change the open effect via the PopUpRendererSkin? I've been successful with stylizing the contents of a popup but not the container itself.

If it is possible, can someone please provide and example? Either in code or at least a live website?

Thanks.
Tags (2)
0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus
Marc,

   I must have missed that post. You will notice in a  widget like the SearchWidget.mxml it shows the search results popup by  using the map.infoWindow. Well the map infoWindow uses the API default  InfoWindowSkin.mxml so the same way you manipulate the  PopUpRendererSkin.mxml of the API you can do the same for the  InfoWindowSkin.mxml. Or just adjust it using CSS:

esri|InfoWindow
{
    upperRightRadius: 5;
    upperLeftRadius: 0;
    lowerLeftRadius: 5;
    lowerRightRadius: 0;
    verticalGap: 6;
    paddingTop: 6;
}

esri|InfoWindowCloseButton
{
    /*my custom close button Skin*/
    skinClass:ClassReference("com.esri.viewer.skins.WidgetCloseButtonSkin");
}


You can see my site where I round certain corners of the popups and not others and I have the close button skinned.
http://gis.calhouncounty.org/flexviewer2.0/index.html?PPIN=1998&EXT=645120.3306,1173575.0875,645558....
0 Kudos
DasaPaddock
Esri Regular Contributor
0 Kudos
MarcCavallaro
Regular Contributor
THANKS GUYS! That did the trick.  I must have missed that day of 101.

One last issue I'm having is with setting a transition for the PopUp.  I'm trying to use the Scale effect to make the it grow when it opens.

I've tried adding the following code to the InfoWindowSkin.mxml.  Am I on the right track or way off?

<fx:Declarations>
        <s:DropShadowFilter id="dropShadow"/>
        <s:SolidColorStroke id="pathStroke" pixelHinting="true"/>
        <s:SolidColor id="pathFill"/>
    </fx:Declarations>
    <s:states>
        <s:State name="withHeader"/>
        <s:State name="withoutHeader"/>
 <s:State name="open"/>
 <s:State name="closed"/>
    </s:states>
 <s:transitions>
  <s:Transition fromState="*" toState="open">
   <s:Scale target="{hostComponent}" duration="200"
      scaleXFrom="0.1" scaleXTo="1"
      scaleYFrom="0.1" scaleYTo="1"/>
  </s:Transition>
  <s:Transition fromState="open" toState="closed">
   <s:Scale target="{containerGroup}" duration="200"
      scaleXFrom="1" scaleXTo="0.1"
      scaleYFrom="1" scaleYTo="0.1"/>
  </s:Transition>
 </s:transitions>
 <s:Path id="path"/>
 <s:VGroup id="containerGroup"
              gap="{getStyle('verticalGap')}"
              minHeight="0"
              minWidth="0"
              paddingBottom="{getStyle('paddingBottom')}"
              paddingLeft="15"
              paddingRight="15"
              paddingTop="10">
        <s:HGroup id="headerGroup"
                  width="100%"
                  includeInLayout.withoutHeader="false"
                  minWidth="0"
                  verticalAlign="middle"
                  visible.withoutHeader="false">
            <esri:InfoWindowLabel id="labelText"/>
            <s:Rect width="100%" height="10"
                    minWidth="0"/>
            <esri:InfoWindowCloseButton id="closeButton"/>
        </s:HGroup>
        <s:Group id="contentGroup"
                 width="100%" height="100%"
                 minHeight="0"
                 minWidth="0"/>
    </s:VGroup>
</s:Skin>
0 Kudos
MarcCavallaro
Regular Contributor
Robert or Dasa, is it possible to change the open/close effect for the popup via transitions?  If so do I put the code in the InfoWindowSkin.mxml or the PopUpRendererSkin.mxml?

Thanks
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Marc,

    I have tried a couple of things and have not figured it out either.
0 Kudos