<af:popup>

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 corners in the rich skin and square corners in the medium and simple 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.

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.

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.

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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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

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:

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:

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.

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.

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.

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.

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.

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 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.

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.

Events

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 events might include the width of a column that supported client-side resizing.

Attributes

Name

Type

Supports EL?

Description

animate

String

Yes

Valid Values: default, falseDefault 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. 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, disabledDefault 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.

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, deferredDefault 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.

contentDelivery

String

Yes

Valid Values: immediate, lazy, lazyUncachedDefault 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.

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, launcherDefault 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. The identifier must follow a subset of the syntax allowed in HTML:

Must not be a zero-length String.

First character must be an ASCII letter (A-Za-z) or an underscore ('_').

Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').

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.

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