Change media container size in Pop Up Window

2947
12
08-29-2011 10:35 AM
CarrieTropasso1
New Contributor III
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
Tags (2)
0 Kudos
12 Replies
RobertScheitlin__GISP
MVP Emeritus
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.
0 Kudos
CarrieTropasso1
New Contributor III
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
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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>
0 Kudos
DeweyPosehn
New Contributor II
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!
0 Kudos
DeweyPosehn
New Contributor II
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.
0 Kudos
AvelCasidsid
New Contributor
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.
0 Kudos
adnanhussain
New Contributor
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
0 Kudos
WillHughes1
Occasional Contributor II
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
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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).
0 Kudos