Jason's Flex Blog

In addition to the Spark styles for contentBackgroundColor and contentBackgroundAlpha styles, Callout adds a 3rd style called contentBackgroundAppearance. By default, the value is “inset” and the Callout appears with a slight border around the contentBackgroundColor as well as a drop shadow from the top edge to give an inset appearance. Other values for the style include “flat” and “none”. See the example code and screen shots below.

contentBackgroundAppearance=”inset” (default)

contentBackgroundAppearance=”flat”

contentBackgroundAppearance=”none”

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="Callout contentBackgroundAppearance">
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            
            import spark.components.ContentBackgroundAppearance;
            
            protected function openCallout(event:MouseEvent, 
                                           owner:UIComponent, 
                                           value:String=spark.components.ContentBackgroundAppearance.INSET):void
            {
                callout.setStyle('contentBackgroundAppearance', value);
                callout.open(owner);
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:Callout id="callout"
                   width="{Math.floor(this.width * .3)}"
                   height="{Math.floor(this.height * .3)}"
                   mouseDownOutside="callout.close()"/>
    </fx:Declarations>
    <s:actionContent>
        <s:Button id="button1" label="Inset (default)" 
                  click="openCallout(event, button1)"/>
        <s:Button id="button2" label="Flat"
                  click="openCallout(event, button2, spark.components.ContentBackgroundAppearance.FLAT)"/>
        <s:Button id="button3" label="None"
                  click="openCallout(event, button3, spark.components.ContentBackgroundAppearance.NONE)"/>
    </s:actionContent>
    <s:actionLayout>
        <s:HorizontalLayout verticalAlign="middle" gap="5"/>
    </s:actionLayout>
</s:View>