Search code examples
actionscript-3apache-flexflex4flex4.6callout

How to maximize a spark.components.Callout? Screenshots attached


How to maximize a Callout, so that it takes the maximal available space at the screen?

I'm trying to display a ViewNavigator in a Callout and while it works, the displayed View is too narrow:

enter image description here

In the same program I have another Callout and it is wide enough:

enter image description here

The only 2 differences between them is that the latter is attached to a CalloutButton and the latter holds a custom Score component for which I set:

    override protected function measure():void {
        super.measure();
        measuredWidth = Capabilities.screenResolutionX;
        measuredHeight = Capabilities.screenResolutionY;
    }

I keep staring at the Callout.as code, but can't find a way to trick it to occupy most available space yet.

My custom mxml component is quite simple:

PlayerInfo.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Callout 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    contentBackgroundAppearance="none">

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var userid:String;
        ]]>
    </fx:Script>

    <s:ViewNavigator 
        firstView="views.Profile"
        firstViewData="{userid}">
        <s:navigationContent>
            <s:Button label="Close" click="close()" />
        </s:navigationContent>
    </s:ViewNavigator>

</s:Callout>        

Solution

  • Callout extends Container, so you shouldn't have problems setting the width and height to 100%.
    Also, in the Callout code there's a method:

    /**
     *  @private
     *  Force a new measurement when callout should use it's screen-constrained
     *  max size.
     */
    private function invalidateMaxSize():void
    {
        // calloutMaxWidth and calloutMaxHeight don't invalidate 
        // explicitMaxWidth or explicitMaxHeight. If callout's max size changes
        // and explicit max sizes aren't set, then invalidate size here so that
        // callout's max size is applied.
        if (!canSkipMeasurement() && !isMaxSizeSet)
            skin.invalidateSize();
    }
    

    So, try to set the 'explicitMaxWidth' and 'explicitMaxHeight' properties.