Callout  - AS3 Flex

Package	spark.components
Class	public class Callout
Inheritance	Callout SkinnablePopUpContainer SkinnableContainer SkinnableContainerBase SkinnableComponent UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object

The following image shows a Callout container labeled 'Settings':

You can also use the CalloutButton control to open a callout container. The CalloutButton control encapsulates in a single control the callout container and all of the logic necessary to open and close the callout. The CalloutButton control is then said to the be the owner, or host, of the callout.

Callout uses the horizontalPosition and verticalPosition properties to determine the position of the Callout relative to the owner that is specified by the open() method. Both properties can be set to CalloutPosition.AUTO which selects a position based on the aspect ratio of the screen for the Callout to fit with minimal overlap with the owner and and minimal adjustments at the screen bounds.

Once positioned, the Callout positions the arrow on the side adjacent to the owner, centered as close as possible on the horizontal or vertical center of the owner as appropriate. The arrow is hidden in cases where the Callout position is not adjacent to any edge.

You do not create a Callout container as part of the normal layout of its parent container. Instead, it appears as a pop-up container on top of its parent. Therefore, you do not create it directly in the MXML code of your application.

Instead, you create is as an MXML component, often in a separate MXML file. To show the component create an instance of the MXML component, and then call the open() method. You can also set the size and position of the component when you open it.

To close the component, call the close() method. If the pop-up needs to return data to a handler, you can add an event listener for the PopUp.CLOSE event, and specify the returned data in the close() method.

The Callout is initially in its closed skin state. When it opens, it adds itself as a pop-up to the PopUpManager, and transition to the normal skin state. To define open and close animations, use a custom skin with transitions between the closed and normal skin states.

Callout changes the default inheritance behavior seen in Flex components and instead, inherits styles from the top-level application. This prevents Callout's contents from unintentionally inheriting styles from an owner (i.e. Button or TextInput) where the default appearance was desired and expected.

The Callout container has the following default characteristics:

Show MXML Syntax

Hide MXML Syntax

  <s:Callout
    Properties
    horizontalPosition="auto"
    verticalPosition="auto"
 
    Styles
    contentBackgroundAppearance="inset"
  />
  

Default MXML PropertymxmlContentFactory

View the examples

Related API Elements