topic Change media container size in Pop Up Window in ArcGIS Viewer for Flex Questions

Change media container size in Pop Up Window

CarrieTropasso1 — Mon, 29 Aug 2011 17:35:52 GMT

I would like to change the media container size in the popup window for Flex Viewer 2.4 so that there are no gaps around the top and bottom of my image - see attached image (I want to remove the gaps so that the blue border is tight against the image). Where do I access this information to change this setting?

Thanks

Re: Change media container size in Pop Up Window

RobertScheitlin__GISP — Mon, 29 Aug 2011 22:33:16 GMT

Carrie,

To do this you would have to extend/modify the Flex API's PopUpRendererSkin.mxml and then work with the PopUpMediaBrowser component and explicitly set a height, it has a 100% width right now so the height is always going to be a value that would equal the measured width. If you even what to attempt doing this I would really suggest getting rid of the border instead. Extending the API with a custom skin is not extremely hard but it's not a beginner task either.

Re: Change media container size in Pop Up Window

CarrieTropasso1 — Tue, 30 Aug 2011 13:18:12 GMT

Hi Robert,
Thanks so much for the reply. I have customized some of the other skins and I assumed where you specified is where I would make this change, but I am not having any luck changing this. You mentioned removing the border....where would I go and how I would I go about doing this - at this point this may be my best option.

Thanks,
Carrie

Re: Change media container size in Pop Up Window

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:11:40 GMT

Carrie,

In the PopUpMediaBrowserSkin.mxml you need to remove or comment out the border:

        <s:Group id="imageOrChartGroup"
                 width="100%"
                 resize="imageOrChartGroup_resizeHandler(event)">
            <s:Rect id="borderRect"
                    left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke id="borderRectSymbol"
                                        color="black"
                                        weight="1"/>
                </s:stroke>
            </s:Rect>

            <mx:SWFLoader id="image"
                          left="1" right="1" top="1" bottom="1"
                          click="image_clickHandler(event)"
                          initialize="image_initializeHandler(event)"
                          verticalAlign="middle"/>

            <mx:BarChart id="barChart"
                         left="1" right="1" top="1" bottom="1"
                         showDataTips="true">
                <mx:series>
                    <mx:BarSeries id="barSeries" xField="value"/>
                </mx:series>
                <mx:verticalAxis>
                    <mx:CategoryAxis id="barAxis" categoryField="name"/>
                </mx:verticalAxis>
                <mx:verticalAxisRenderers>
                    <mx:AxisRenderer axis="{barAxis}" showLabels="false"/>
                </mx:verticalAxisRenderers>
            </mx:BarChart>

            <mx:ColumnChart id="columnChart"
                            left="1" right="1" top="1" bottom="1"
                            showDataTips="true">
                <mx:series>
                    <mx:ColumnSeries id="columnSeries" yField="value"/>
                </mx:series>
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="columnAxis" categoryField="name"/>
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{columnAxis}" showLabels="false"/>
                </mx:horizontalAxisRenderers>
            </mx:ColumnChart>

            <mx:LineChart id="lineChart"
                          left="1" right="1" top="1" bottom="1"
                          showDataTips="true">
                <mx:series>
                    <mx:LineSeries id="lineSeries" yField="value"/>
                </mx:series>
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="lineAxis" categoryField="name"/>
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{lineAxis}" showLabels="false"/>
                </mx:horizontalAxisRenderers>
            </mx:LineChart>

            <mx:PieChart id="pieChart"
                         left="1" right="1" top="1" bottom="1"
                         showDataTips="true">
                <mx:series>
                    <mx:PieSeries id="pieSeries"
                                  field="value"
                                  labelField="name"
                                  nameField="name"/>
                </mx:series>
            </mx:PieChart>
        </s:Group>

Re: Change media container size in Pop Up Window

DeweyPosehn — Thu, 01 Sep 2011 16:36:27 GMT

Hi Robert, I am trying to do the same thing and I am working with the full source-code version of the 2.4 flex viewer but I do not have the skin 'PopUpMediaBrowserSkin.mxml'. On another forum you supplied a zip file of "PopUpRendererSkin.mxml' which I downloaded because my project was missing that skin too. I am not sure why these are not included in the full version download of 2.4 but I was wondering if you could post a copy of 'PopUpMediaBrowserSkin.mxml'? If you could, I would greatly appreciate it!

Re: Change media container size in Pop Up Window

DeweyPosehn — Thu, 01 Sep 2011 17:21:54 GMT

Oops, I just found out that I could download the source code from the api itself so I now have the skin file for the media browser that I can work with.

Re: Change media container size in Pop Up Window

AvelCasidsid — Wed, 21 Sep 2011 05:46:47 GMT

In the PopUpMediaBrowserSkin.mxml, you will see that the width is 100%. Notice the resize event, resize="imageOrChartGroup_resizeHandler(event)". Looking at the definition of this event, you will see this:

private function imageOrChartGroup_resizeHandler(event:ResizeEvent):void
{
imageOrChartGroup.height = imageOrChartGroup.width; // make it square
}

this makes the height equal to the width.

Re: Change media container size in Pop Up Window

adnanhussain — Mon, 25 Jun 2012 09:41:48 GMT

Hi,

i want to change the size of container ( piechart or barchart) ...in popup window...these are two big...your help is required .thanks
dani

Re: Change media container size in Pop Up Window

WillHughes1 — Tue, 27 Nov 2012 03:06:31 GMT

What is the correct way to modify the PopUpMediaBrowserSkin.mxml file?

I have already modified the PopUpRendererSkin.mxml file using Robert's instructions in another post.
Created package called com.esri.ags.skin , and then copied the PopUpRendererSkin.mxml file from the 3.0 API (arcgis_api_for_flex_3_0\ArcGIS_Flex\skins\src\com\esri\ags\skins), and pasted into the new package (ags.skins).

Is the process the same for adding and modifying the PopUpMediaBrowserSkin.mxml?
The only difference I see is that PopUpMediaBrowserSkin.mxml is located in the supportClasses folder inside the API download.
Can I place the PopUpMediaBrowserSkin.mxml file in the same package where I put PopUpRendererSkin.mxml?

Thanks.

Will

Re: Change media container size in Pop Up Window

RobertScheitlin__GISP — Tue, 27 Nov 2012 11:02:51 GMT

Will,

Yes you can put it in the same folder but it is better to mirror the API's package structure so that you do not have to change any of the codes paths. So my recommendation is to add the supportClasses folder (make sure to use the same case).

Re: Change media container size in Pop Up Window

WillHughes1 — Fri, 30 Nov 2012 03:45:48 GMT

Robert,

One more questions regarding label rotation.
I added labelRotation="45" to the

<mx:horizontalAxisRenderers> tag

and then compiled, however the labels are not rotated. What am I missing? Thanks. Will

<mx:ColumnChart

id="columnChart"left="1" right="1" top="1" bottom="1"dataTipFunction="columnSeriesDataTipFunction"showDataTips="true">

<mx:series>

<mx:ColumnSeries id="columnSeries" yField="value"/>

</mx:series>

<mx:horizontalAxis>

<mx:CategoryAxis id="columnAxis" categoryField="name"/>

</mx:horizontalAxis>

<mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{columnAxis}" showLabels="true" labelRotation="45"/>

</mx:horizontalAxisRenderers>

</mx:ColumnChart>

Re: Change media container size in Pop Up Window

RobertScheitlin__GISP — Fri, 30 Nov 2012 12:13:42 GMT

Will,

I dealt with this MANY versions ago of the API and Flex SDK and the only way I could be label rotated back then was to embed the font in the main index.mxml. That was back when you had to embed fonts in a Flex App if you wanted them rotated though.

Re: Change media container size in Pop Up Window

AtanasRusev — Fri, 30 Nov 2012 18:16:13 GMT

Hi ;),

trying to resolve the same question I just do the simplest and it worked:

in PopUpRendererSkin.mxml change this: (I wanted bigger popup...)
......
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"
width="350"
maxHeight="400"
preinitialize="skin_preinitializeHandler(event)">
......

and then, because I dont want the square box and empty spaces:

in PopUpMediaBrowserSkin.mxml :
....
private function imageOrChartGroup_resizeHandler(event:ResizeEvent):void
{
imageOrChartGroup.height = imageOrChartGroup.width -100 ; // Hacko make it not square
}
.....

so depends on what you want as size - but for me it was the easiest custom way

Best Regards!