Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 12c (12.2.1.4.0) E81455-03

# <af:popup>

af:popup popup popup

UIComponent class: oracle.adf.view.rich.component.rich.RichPopup
Component type: oracle.adf.RichPopup

Unsupported agents: pda

The popup component is an invisible container control whose contents will be used in popup windows, such as context menus, note windows, dialogs and popup selectors. These types of "popup windows" are within the same browser window and using layers of HTML to simulate an external browser window.

The inline popup should not be confused with the dialog framework. See the command family of components for more information on the dialog framework.

## Types of Inline Popups

There are several types of inline popups that provide different user experiences. The following matrix compares the properties of the inline popups.

Type | Demarcation | Display Properties | Behaviors | Common Use Cases
--- | --- | --- | --- | ---
Inline Selector | The inline selector type of popup is the default type when one of the other qualifying components (`af:noteWindow`, `af:panelWindow`, `af:dialog` and `af:menu`) is not provided as the immediate child.
    <af:popup id="inlineSelector">
      Hello World!
    </af:popup>
| This type of popup has rounded or square corners depending on the selected skins. | An inline selector type of popup should be aligned to another element. If alignment properties are not specified, the default alignment will be to the top-start of the page. When shown, this type of popup will steal focus for the primary window and set focus to the first focusable element within its content. The inline selector type of popup will auto dismiss when focus leaves the content of the popup. Activating the popup's launch source when the inline selector is shown will dismiss this type of popup. When the popup is not visible, activating the launch source will cause the popup to be shown. An inline selector will automatically dismiss when its alignment element is clipped and no longer visible in the browser window. Pressing the escape key will also cause the popup to cancel. | The inline selector is good for displaying arbitrary content. Because of its dismissal properties, it should not be used with other input components. It is best used to display read-only content.
Note Window | The note window type of popup is defined using the popup and `af:noteWindow` components. The `af:noteWindow` component must be the first child of the popup component and must be the single child occurrence.
    <af:popup id="noteWindow">
      <af:noteWindow>
        Hello World!
      </af:noteWindow>
    </af:popup>
| The note window popup has square corners with a cone pointing to the alignment component. | The note window popup must be aligned to another element or to a mouse position. A default alignment is provided when using the `af:showPopupBehavior` tag. A note window automatically recalculates its alignment based on the placement of it in the browser window to prevent clipping. The note window popup will not steal focus when shown. Focus will remain on the launch source. A note window will automatically dismiss when focus is made outside of the note window's content or from the launch source component. A note window will auto dismiss when its aligning element is clipped and no longer visible. Pressing the escape key will also cause the noteWindow to cancel. | Note windows are designed for displaying read-only information that is associated with another component. The note window cone will point to the associated aligning component. Note windows are not intended to hold editable components.
Dialogs | There are two dialog components, `af:dialog` and `af:panelWindow`. Both can only be used as the immediate child of the `af:popup` and only one occurrence is supported.
    <af:popup id="dialog">
      <af:dialog title="test">
        <af:inputText text="Say" value="Hello World!"/>
      </af:dialog>
    </af:popup>

    <af:popup id="panelWindow">
      <af:panelWindow title="test">
        <af:inputText text="Say" value="Hello World!"/>
      </af:panelWindow>
    </af:popup>
| The dialogs components resemble a window. They are framed with a title bar and close icon. They have rounded corners in the rich skin and square corners in the medium and simple skins. Both components can be displayed modal or modeless. When displayed as modal, a glass pane covers the primary window and the dialog becomes the new primary window. The `af:dialog` component has a button bar footer but the `af:panelWindow` does not. | Dialogs can align to a component but generally are used with default alignment. The default alignment of dialogs is the center of the browser window. A dialog can be repositioned on the page using drag-and-drop. The title bar is the gripper for the drag source. Dialogs will be auto positioned to stay within the browser window when the browser is resized as long as the browser window is larger than the dialog. Dialogs will not auto dismiss like other types of popups. Dialogs will not dismiss when loosing focus. They will not auto dismiss when cropped like other types of popups. Dialogs can be closed using the close icon, predefined button configurations (`af:dialog` only) or programmability using a JavaScript fragment. Like the other types of popups, the escape key will cause the popup to be canceled. When a dialog is opened, it will steal focus from the primary window. The ctrl+alt+w key combination can be used to cycle through open dialog instances above the primary window. A modal dialog is defined as a primary window. When a dialog loose focus, its appearance changes to an inactive state. | Dialogs are designed for data entry. They do not have implicit dismissal properties like the other types of popups making them ideal additional data collection flows.
Menus | Popup menus are provided using a combination of the `af:popup` and `af:menu` components. The menu must be an immediate child of the popup component and only one occurrence is supported.
    <af:popup id="popupMenu">
      <af:menu>
        <af:commandMenuItem text="Item 1"/>
        <af:commandMenuItem text="Item 2"/>
        <af:commandMenuItem text="Item 3"/>
      </af:menu>
    </af:popup>
| Popup menus will have square corners in all skins and take on the display properties of menus. | Popup menus are commonly used for context menus but don't necessary have to be launched using the `contextMenu` client event type. Popup menus will auto dismiss after a child command menu item has been selector or when focus is taken from the menu. Popup menus will steal focus from the primary window when opened and canceled using the escape key. | Popup menus are commonly used as context menus to provide context sensitive navigation.

### Delivering the Content to the Client

The popup component is a container that contains a page fragment. The page fragment is hidden by default and requires a client action or event in order to be shown. The popup conditionally determines when markup is sent to the client by its `contentDelivery` property. The default content delivery is `lazy`. This means the content of the popup is not delivered to the client until shown the first time. The options are:

- `lazy` -- the default strategy described above. The content isn't loaded until you show the popup once, but then is cached.

- `immediate` -- load the content onto the page immediately, so it displays as rapidly as possible. Use this for popups that are certain to be used by all users every time they use this page.

- `lazyUncached` -- the content isn't loaded until you show the popup, and then is re-fetched every subsequent time you show the popup. Use this strategy if the popup shows data that can become stale.

The popup's content delivery options are often misinterpreted. The content delivery defines when the markup is delivered to the client browser. The popup component doesn't try to intelligently manage a sub view of components like the `af:region` component. It assumes the sub component tree that represents its content has already been built.

### Controlling Aspects of Auto-dismissal

By default, an inline popup will auto-dismiss when the markup that defines it has been replaced. This behavior is controlled by the `autoCancel` property. There are several scenarios that might cause implicit auto-dismissal of inline popups.

- Uses of full submit command components. Full submit commands cause the entire document to be reloaded versus a partial submit command that results in partial content delivery.
- The popup component or parent of the popup component has been added as a partial target.
- The popup is contained within a component that toggles disclosed. A `af:showDetailItem` in a `af:panelTabbed` is an example.
- An inline popup is shown and a failover occurs. During a failover, the entire document is replaced.

For these scenarios, if the `autoCancel` property is set to `enabled`, the popup in question will not restore visibility. It will implicitly auto-dismiss.

However, if the `autoCancel` property is `disabled`, the popup will restore visibility instead of auto-dismissing. The popup must be explicitly dismissed by one of the expected/assumed dismissal behaviors for the type of popup or programmatically handled. See the next section on displaying and hiding popups.

### Displaying/Hiding Popups

The inline popup is client centric meaning that its states and behaviors are based on client events and actions. The client popup component has operations for showing and dismissing the popup. Beside JavaScript extension points, there are declarative and assumed behaviors.

#### Declarative

The best way to show a popup is with the `af:showPopupBehavior` tag. Simply add this tag to a command component anywhere on your page, and activating that command will show a popup behavior tag. When used to open various types of popups, inline selector, note window, menu, dialog and panelWindow, you are sure to get many of the built in - assumed behaviors for free without having to write JavaScript.

For example, the `af:showPopupBehavior` tag adds a delay when showing a popup using the `mouseHover` trigger type and added logic to track from what launch source a popup request was made to determine if the popup is shown in the correct context. Many of the auto dismissal options for the various types of popup's are dependent on using this special behavior tag.

    <af:outputText id="text" value="hover over this text with the mouse to launch a note window">
      <af:showPopupBehavior popupId="noteWindow" triggerType="mouseHover" alignId="text"/>
    </af:outputText>

##### Programmatic

Popups can be opened using JavaScript although using the `af:showPopupBehavior` tag is best-practice. In order to open a popup in script, you need to know how to use the client framework API to find the popup and invoke the show method. The show method is passed a map of hints. The popup hints parameters communicate various behaviors such as alignment. Most of the hints are considered private and only a few are exposed as public. The `af:showPopupBehavior` tag uses the private hits exposing features not possible with the programmatic method of showing a popup.

There are two classifications of popup dismissals, hide and cancel. When a popup is closed by auto-dismissal, it is canceled. If it is closed by an affirmative condition, it is hidden. Both types of dismissals will result in raising a popup closed event. Canceling a popup will raise a client popup canceled event that has an associated server-side counter part.

The popup hints that are considered public are found on the `AdfRichPopup` client component and are used for alignment positioning. There are two map keys that define where a popup is shown on the page. The first key, `AdfRichPopup.HINT_ALIGN_ID` is used to specify the client component's id that the popup should align to. Unlike the popupId attribute of the `af:showPopupBehavior` tag that uses relative positioning from the associated launcher component, this must be the fully qualified client id of the popup component. The second parameter, `AdfRichPopup.HINT_ALIGN` defines how the popup should align to the aligning component. There are nine predefined align enumerations represented by constants:

1. `AdfRichPopup.ALIGN_AFTER_START`: The popup appears underneath the element with the popup's upper-left corner aligned with the lower-left corner of the element. The left edges of the element and the popup are aligned.

2. `AdfRichPopup.ALIGN_AFTER_END`: The popup appears underneath the element with the popup's upper-right corner aligned with the lower-right corner of the element. The right edges of the element and the popup are aligned.

3. `AdfRichPopup.ALIGN_AFTER_CENTER`: The popup appears underneath the element with the popup's center point aligned with the center point of the element. The center of the element and the popup are aligned.

4. `AdfRichPopup.ALIGN_BEFORE_START`: The popup appears above the element with the popup's lower-left corner aligned with the upper-left corner of the element. The left edges of the element and the popup are aligned.

5. `AdfRichPopup.ALIGN_BEFORE_END`: The popup appears above the element with the popup's lower-right corner aligned with the upper-right corner of the element. The right edges of the element and the popup are aligned.

6. `AdfRichPopup.ALIGN_BEFORE_END`: The popup appears above the element with the popup's center point is aligned with the center point of the element. The center of the element and the popup are aligned.

7. `AdfRichPopup.ALIGN_END_AFTER`: The popup appears to the right of the element with the popup's lower-left corner aligned with the lower-right corner of the element. The bottom edges of the element and the popup are aligned.

8. `AdfRichPopup.ALIGN_END_BEFORE`: The popup appears to the right of the element with the popup's upper-left corner aligned with the upper-right corner of the element. The top edges of the element and the popup are aligned.

9. `AdfRichPopup.ALIGN_END_CENTER`: The popup appears to the right of the element with the popup's middle point is aligned with the middle point of the element. The middle of the element and the popup are aligned.

10. `AdfRichPopup.ALIGN_START_AFTER`: The popup appears to the left of the element with the popup's lower-right corner aligned with the lower-left corner of the element. The bottom edges of the element and the popup are aligned.

11. `AdfRichPopup.ALIGN_START_BEFORE`: The popup appears to the left of the element with the popup's upper-right corner aligned with the upper-left corner of the element. The top edges of the element and the popup are aligned.

12. `AdfRichPopup.ALIGN_START_CENTER`: The popup appears to the left of the element with the popup's middle point is aligned with the middle point of the element. The middle of the element and the popup are aligned.

13. `AdfRichPopup.ALIGN_OVERLAP`: The popup appears over top of the element with the upper-left corners aligned.

The popup hint, `AdfRichPopup.HINT_TAIL` indicates if a popup tail is shown. The tail value is associated with its visual presentation defined in the active skin. Other than out of the box values, it can have any custom value. But have to define styling in custom skin.

There are two out of the box tail options:

1. `AdfRichPopup.TAIL_NONE`: The popup tail will not be shown.

2. `AdfRichPopup.TAIL_SIMPLE`: The popup tail will be shown and applies the out of the box styling.

The third popup hint doesn't have to do with positioning but rather the context that the popup fetch event is invoked. The `AdfRichPopup.HINT_LAUNCH_ID` hint defines the component that launched the popup. The value should be set with the clientId of the launcher component. If the `eventContext` property is set to "launcher", this popup hint is required in order for the popup fetch event to be fired from the context of the launcher component. Following snippet of JSP and script demonstrates how to programmatically show and hide a popup:

    ...
    ...
    <af:resource type="javascript">
      function showPopup(event)
      {
        event.cancel();
        var source = event.getSource();
        var popupId = "popup";
        var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupId);

        if (!popup.isPopupVisible())
        {
          var hints = {};
          hints[AdfRichPopup.HINT_LAUNCH_ID] = source.getClientId();
          hints[AdfRichPopup.HINT_ALIGN_ID] = source.getClientId();
          hints[AdfRichPopup.HINT_ALIGN] = AdfRichPopup.ALIGN_AFTER_START;

          popup.show(hints);
        }
      }

      function hidePopup(event)
      {
        event.cancel();
        var source = event.getSource();
        var popupId = source.getProperty("popupId");
        var isCanceled = source.getProperty("isCanceled");

        var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupId);

        if (popup.isPopupVisible())
        {
          if (isCanceled)
            popup.cancel();
          else
            popup.hide();
        }
      }
    </af:resource>
    ...
    ...
    <af:form>
     <af:popup id="popup">
        Hello World!
     </af:popup>

     <af:outputText value="Show Popup">
       <af:clientListener method="showPopup" type="mouseOver"/>
     </af:outputText>

     <af:outputText value="Hide Popup">
      <af:clientListener method="hidePopup" type="mouseOver"/>
      <af:clientAttribute name="popupId" value="popup"/>
     </af:outputText>
     <af:outputText value="Cancel Popup">
      <af:clientListener method="hidePopup" type="mouseOver"/>
      <af:clientAttribute name="popupId" value="popup"/>
      <af:clientAttribute name="isCanceled" value="true"/>
     </af:outputText>

    </af:form>
    ...
    ...

Server-side listeners, such as action listeners, can show a popup. This might sound inconsistent with the description of the inline popup framework as being client centric but similar operations exist on the server-side popup component to show, hide and cancel a popup. One caveat to keep in mind is that the popup must be in the proper context when the server-side API is called. This is particularly important for a popup in a stamped component such as a table. The model must be position to the right row key in order for the client id to be properly encoded. The following code demonstrates how to open and close a popup server-side:

    ...
    ...
    <af:form>
       <af:popup id="popup" binding="#{testBean.popup}">
         <af:panelWindow title="Test">
           <af:button text="Hide" partialSubmit="true" actionListener="#{testBean.hidePopupActionListener}"/>
           <af:button text="Cancel" partialSubmit="true" actionListener="#{testBean.cancelPopupActionListener}"/>
         </af:panelWindow>
       </af:popup>
       <af:button text="Show" partialSubmit="true" actionListener="#{testBean.showPopupActionListener}"/>
    </af:form>
    ...
    ...
    public void showPopupActionListener(ActionEvent event)
    {
      UIComponent source = (UIComponent) event.getSource();
      // get the popup component - see binding="#{testBean.popup}" in the tag source
      RichPopup popup = getPopup();
      RichPopup.PopupHints hints = new RichPopup.PopupHints();
      hints.add(RichPopup.PopupHints.HintTypes.HINT_ALIGN_ID, source)
          .add(RichPopup.PopupHints.HintTypes.HINT_LAUNCH_ID, source)
          .add(RichPopup.PopupHints.HintTypes.HINT_ALIGN,
               RichPopup.PopupHints.AlignTypes.ALIGN_AFTER_END);
      popup.show(hints);
    }
    public void hidePopupActionListener(ActionEvent event)
    {
      FacesContext context = FacesContext.getCurrentInstance();
      // get the popup component - see binding="#{testBean.popup}" in the tag source
      RichPopup popup = getPopup();
      popup.hide();
    }
    public void cancelPopupActionListener(ActionEvent event)
    {
      FacesContext context = FacesContext.getCurrentInstance();
      // get the popup component - see binding="#{testBean.popup}" in the tag source
      RichPopup popup = getPopup();
      popup.cancel();
    }

### Client-only Popup Events

Besides the operations, the inline popup has several client events. Most of the client events do not have corresponding faces events or server-side listeners. However, the `popupCanceled` event does provide a corresponding server-side event. These events can be exploited using the clientListener tag and custom JavaScript functions.

1. `popupOpening`: A client only event that can be canceled. If this event is canceled in a client-side listener, the popup will not be shown.

2. `popupOpened`: This event is fired after the popup becomes visible. This event could be used to create custom rules for overriding default focus within the popup.

3. `popupCanceled`: The canceled event is fired when a popup is unexpectedly dismissed by auto-dismissal or by explicitly invoking the popup client component's `cancel` method.

4. `popupClosed`: The closed event is a client only event fired when the popup is hidden.

Not all inline popup's provide server-side counter parts for all client events. However, custom client event listeners can invoke JavaScript that raises a `CustomEvent` that is handled by a `af:serverListener`.

    ...
    ...
    <af:resource type="javascript">
      function popupClosedListener(event)
      {
        var source = event.getSource();
        var popupId = source.getClientId();

        var params = {};
        params['popupId'] = popupId;
        var type = "serverPopupClosed";
        var immediate = true;

        AdfCustomEvent.queue(source, type, params, immediate);
      }
    </af:resource>
    <af:form>
      <af:popup id="popup">
        <af:dialog title="Test">
          <f:verbatim>Hello World</f:verbatim>
        </af:dialog>
        <af:clientListener method="popupClosedListener" type="popupClosed"/>
        <af:serverListener type="serverPopupClosed" method="#{testBean.serverPopupClosedListener}"/>
      </af:popup>

      <af:button text="show">
        <af:showPopupBehavior popupId="popup"/>
      </af:button>
    </af:form>
    ...
    ...
    public void serverPopupClosedListener(ClientEvent event)
    {
      String popupId = (String) event.getParameters().get("popupId");
      System.out.print("Popup Closed: " + popupId);
    }

### Server-side Popup Events

The `PopupFetchEvent` is one of two server-side popup events but doesn't have a corresponding client event. The popup fetch event is invoked during content delivery. This means that the event will only queue for popups that have a `contentDelivery` type of `lazy` or `lazyUncached`. Another caveat is that the event will only work when the launch id is set. This is automatically handled by the af:showPopupBehavior but must be provided as a popup hint if programmatically shown.

The popup has two properties and a listener that work with this `PopupFetchEvent` event. The `eventContext` property is used to establish the currency that the `popupFetchListener` is invoked in. This is a similar concept seen with stamped components such as the `af:table` component. In fact, this property allows creating a shared popup instance launched from a component within a `af:table` using the `af:showPopupBehavior` tag. The launcher component is placed in context and an instance made available using the popup's `launcherVar` property.

Besides the `popupFetchListener`, the `af:setPropertyListener` can be used to move a value from one place to another when the `PopupFetchEvent` is queued. The following example demonstrates using the popup fetch event:

    <af:popup id="noteWindow" contentDelivery="lazyUncached" eventContext="launcher" launcerVar="source">
      <af:noteWindow>
        <af:outputText value="#{testBean.fullName}"/>
      </af:noteWindow>
      <af:setPropertyListener from="#{source.attributes.fullName}" to="#{testBean.fullName}" type="popupFetch"/>
    </af:popup>
    <af:table var="person" value="#{testBean.people}">
      <af:column id="firstName">
        <f:facet name="header">
          <af:outputText value="First Name"/>
        </f:facet>
        <af:link text="#{person.firstName}">
          <af:showPopupBehavior popupId="::noteWindow" triggerType="mouseHover"/>
          <af:clientAttribute name="fullName" value="#{person.fullName}"/>
        </af:link>
      </af:column>
    </af:table>

The `PopupCanceledEvent` is the second type of server-side event. Unlike the `PopupFetchEvent`, it has a corresponding client event. The canceled event is fired when the popup is unexpectedly closed by auto-dismissal or by calling the cancel method on the client component. Pressing the escape key will also cancel the popup.

The `af:dialog` and `af:panelWindow` extend this notion of unexpected dismissal to the cancel button and close icon. For these components, selecting the cancel button (af:dialog only) or close icon will raise the canceled event.

The `PopupCanceledEvent` event has optimized event delivery meaning that it will not propagate to the server unless there are server listeners registered for this event. The canceled event is immediate but it will prevent processing of the reset of the lifecycle on the popup's children whereby ignoring any submitted values and bypassing validation. This event is also flagged as discrete. Discrete events are sent to the server isolated in a single request. They are never combined with multiple events in a single server request. The following example demonstrates using the popup canceled event:

    <af:popup contentDelivery="lazyUncached" eventContext="launcher"
              launcherVar="source" id="popupRegion1"
              popupCanceledListener="#{pageFlowScope.PopupDynamicRegionBean.swapEmptyTaskFlow}">
      <af:setPropertyListener from="#{source.attributes.employee}"
                              type="popupFetch" to="#{pageFlowScope.employeeId}"/>
      <af:setPropertyListener from="#{pageFlowScope.PopupDynamicRegionBean.popupTaskFlowId}"
                              to="#{pageFlowScope.PopupDynamicRegionBean.dynamicTaskFlowId}"
                              type="popupFetch"/>
      <af:panelWindow title="Employee Popup" id="window">
        <af:region value="#{bindings.dynamicRegion1.regionModel}"
                           id="dynam1"
                           regionNavigationListener="#{pageFlowScope.PopupDynamicRegionBean.navigationListener}"/>
       </af:panelWindow>
    </af:popup>
    ...
    ...
    <af:column>
      <af:button text="Update" partialSubmit="true"
                 clientComponent="true" id="updateEmployee">
        <af:clientAttribute name="employee" value="#{row.Empno}"/>
        <af:showPopupBehavior popupId="::popupRegion1"/>
      </af:button>
    </af:column>
    ...
    ...
    public void swapEmptyTaskFlow(PopupCanceledEvent event)
    {
      setDynamicTaskFlowId("");
    }

### Popup Animations

The popup open and close transition can be animated by configuring <af:transition> tag within a popup. The af:transition tag will let you choose an animation style and what kind of transition will trigger what type of animation. Transition Trigger Types

- open - Transitioning popup to open popup
- close - Transitioning popup from open state to close state.

Transition Animations

- none - No animation while transitioning popup from one state to other. Also the type used if another specified animation type is not supported by popup transition.
- auto - The default transition animation type. The popup animation grows diagonally while transitioning popup to open state. No animation while transitioning popup from open to close state
- horizontally - While popup transitioning to open state, if popup is aligned right to the alignment element, then the popup open sliding animation will start from right and end towards left, and if popup is aligned left to the alignment element, then the popup open sliding animation will start from left and end towards right. When popup transitioning from open to close state, if popup is aligned right to the alignment element, then the popup close sliding animation will start from left and end towards right, and if popup is aligned left to the alignment element, then the popup close sliding animation will start from right and end towards left. If popup is configured not to be aligned with other element, then popup open sliding animation will start from left and end towards right, and close sliding animation will start from right and end towards left. (see note 1)
- vertically - While popup transitioning to open state, if popup is aligned top to the alignment element, then the popup open sliding animation will start from bottom and end towards top, and if popup is aligned bottom to the alignment element, then the popup open sliding animation will start from top and end towards bottom. When popup transitioning from open to close state, if popup is aligned top to the alignment element, then the popup close sliding animation will start from top and end towards bottom, and if popup is aligned bottom to the alignment element, then the popup close sliding animation will start from bottom and end towards top. If popup is configured not to be aligned with other element, then popup open sliding animation will start from top and end towards bottom, and close sliding animation will start from bottom and end towards top. (see note 1)

Note:

1. = Popup alignment element can be configured in af:showPopupBehavior tag, with "align" and "alignId" properties.

## Printable Pages"

Inline popups define content in the page that is hidden by default but when shown is layered above the primary document. If you use an <af:showPrintablePageBehavior> within a popup, only the components within the popup will be present for printing when the user activates that behavior from a component within the popup.

## Layout Considerations"

The popups dimensions are determined by the size of its content. There is no overflow in the content area. This means that the content area of the popup will not be scrollable or have the ability to clip its content. The default behavior for the popup is ideal for displaying read-only content but there are some caveats to watch for.

- The popup will size to content. If the popups content is also stretching to the size of the of the parent popup container, this combination results in an invalid layout that is inconsistently rendered across browsers. The workaround for this issue is to add fixed dimensions to the root child content layout component that provides scrolling or stretching (af:panelGroupLayout layout=scroll or af:panelStretchLayout).
- The content container of the popup doesn't have having overflow or the ability to stretch its children. This must be handled using the appropriate layout component within its content.

## Geometry Management"

- This component cannot be stretched by a parent layout component because it stands alone on its own layer in the page.
- This component does not have any support for stretching its children.

## Screen Shot(s)

Popup component used to construct a context menu.

## Code Example(s)

    <af:popup id="context1">
      <af:menu>
        <af:commandMenuItem text="Cut" id="cmi1"/>
        <af:commandMenuItem text="Copy" id="cmi2"/>
        <af:commandMenuItem text="Paste" id="cmi3"/>
      </af:menu>
    </af:popup>

## Events

Type | Phases | Description
--- | --- | ---
oracle.adf.view.rich.event.PopupFetchEvent | Any | The popupFetchEvent is delivered when the contentDelivery is lazy or lazyUncached and the popup is asked to retrieve content from the server.
oracle.adf.view.rich.event.PopupCanceledEvent | Apply, Request, Values | The PopupClosedEvent is delivered when the popup is unexpectedly dismissed or by invoking the cancel method on the client popup component.
org.apache.myfaces.trinidad.event.AttributeChangeEvent | Invoke, Application, Apply, Request, Values | Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change event might include the width of a column that supported client-side resizing.

## Attributes

Name | Type | Supports EL? | Description
animate | String | Yes | Valid Values: default, false, true Default Value: default Specifies the animation to be used for the popups. Animation of the popups is controlled by system animation setting("animation-enabled" in trinidad-config) and a skin property for individual popup types(af:menu, af:dailog, af:noteWindow etc). Use "false" to turn animation off for a popup regardless of the system settings. Use "true" to override the "-tr-animate" skin level property. The default value is "default", which implies use the system settings and skin properties.
attributeChangeListener | javax.el.MethodExpression | Only EL | a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
autoCancel | String | Yes | Valid Values: enabled, disabled Default Value: enabled Controls how the popup reacts to an unexpected dismissal due to a document reload (full submit action command) or a DOM replacement (included in a PPR target). Acceptable values include: "enabled": the popup will be implicitly canceled due to a dom replacement or document reload. "disabled": the popup will restore visibility after a dom replacement or document reload.
autoDismissalTimeout | int | Yes | A period of seconds that the popup will be displayed before it is automatically dismissed. When a value is provided for this property it will override the default auto-dismissal behavior. The popup will dismiss after shown for the period of seconds provided by the property. The timeout period is revoked if the user moves the mouse over/focus to the content of the popup. The timeout is restarted if the user moves the mouse out/focus out of the content of the popup
binding | oracle.adf.view.rich.component.rich.RichPopup | Only EL | an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
childCreation | String | Yes | Valid Values: immediate, deferred Default Value: immediate Controls when the children are created. Introduces a server-side performance enhancement by postponing construction of the components under the popup until its content is delivered whereby reducing the footprint of server-side state. Acceptable values include: "immediate": Children will always be added to the component tree. "deferred": Children will not be added to the component tree until content delivery is made.
clientComponent | boolean | Yes | Default Value: false whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary. For the components outputText and outputFormatted, setting the clientComponent to true will render id attribute for the html DOM. This ID attribute can alternatively be generated by setting oracle.adf.view.rich.SUPPRESS_IDS to "auto" in web.xml.
contentDelivery | String | Yes | Valid Values: immediate, lazy, lazyUncached Default Value: lazy whether the popup content is delivered with the initial page. When contentDelivery is "immediate", the content is inlined into the initial page. If contentDelivery is "lazy", the popup's content will be delivered to the client only after the first request to show that popup. If contentDelivery is "lazyUncached", the popup's content will be delivered fresh each and every time the popup is shown. By default, contentDelivery is "lazy", which means the content will not be sent to the client up front, but will be cached once loaded. In "attachment" mode, popups content delivery is forced to be "immediate". Therefore, popups that display data in context using "lazy" or "lazyUncached" content delivery must be refactored to establish contextual state with javascript acting on client component events such as "popupOpening".
customizationId | String | Yes | This attribute is deprecated. The 'id' attribute should be used when applying persistent customizations. This attribute will be removed in the next release.
eventContext | String | Yes | Valid Values: self, launcher Default Value: self Whether events delivered by the popup and its descendents are delivered in the context of the launch source. What does 'in context' mean? In something like a table, for example, when an event is delivered 'in context' then the data for the row clicked is made 'current' before the event listener is called, so if getRowData() is called on the collectionModel in the event listener it will return the data of the row that triggered the event. In the case of a shared popup you really want the popup to 'act' as if it's been reparented to the launch source when the popup opens. In other words, you want any event from the popup delivered in the context of the launch source so that you can access data available to the launch source. When eventContext is set to 'launcher' both the popupFetch event and events fired from inside the popup are delivered in the context of the launch source.
id | String | No | the identifier for the component. Every component may be named by a component identifier that must conform to the following rules: They must start with a letter (as defined by the Character.isLetter() method) or underscore ( _ ). Subsequent characters must be letters (as defined by the Character.isLetter() method), digits as defined by the Character.isDigit() method, dashes ( - ), or underscores ( _ ). To minimize the size of responses generated by JavaServer Faces, it is recommended that component identifiers be as short as possible. If a component has been given an identifier, it must be unique in the namespace of the closest ancestor to that component that is a NamingContainer (if any).
launcherVar | String | Yes | Name of the variable used to reference the launch component on the request, which makes it EL reachable. The launch component refers to the component that launched the popup. This variable is only available during event delivery on the popup or its descendents, outside of event delivery this variable is removed (or reverted back to its previous value). This value is only available when the eventContext is set to 'launcher'. If this value is not set, then the launch component is not made available on the request during event delivery.
partialTriggers | String[] | Yes | the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is already inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "::" will pop out of the component's naming container (or itself if the component is a naming container) and begin the search from there, ":::" will pop out of two naming containers (including itself if the component is a naming container) and begin the search from there, etc.
popupCanceledListener | javax.el.MethodExpression | Only EL | a method reference to a popupCanceledListener method. The PopupCancledEvent is delivered when the popup is unexpectedly dismissed or by invoking the cancel method on the client popup component.
popupFetchListener | javax.el.MethodExpression | Only EL | a method reference to a popupFetchListener method
rendered | boolean | Yes | Default Value: true whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.
resetEditableValues | String | Yes | Valid Values: never, whenCanceled Default Value: never Controls whither input components within the popup's content should have their submitted values reset on cancellation of the popup. Acceptable values include: "never": No attempts to reset input components within the popup's content. "whenCanceled": Input component within the content of the popup are reset on cancellation.
visible | boolean | Yes | Default Value: true the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. In most cases, use the "rendered" property instead of the "visible" property. Not supported on the following renderkits: org.apache.myfaces.trinidad.core