Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 11g Release 1 (11.1.1.7.2) E12419-11 |
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.
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: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. |
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: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 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: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 |
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 ( 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 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 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. |
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.
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.
af:showDetailItem
in a af:panelTabbed
is an example.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.
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.
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>
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:
... ... <f:facet name="metaContainer"> <f:verbatim> </f:verbatim> </f:facet> ... ... <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:commandButton text="Hide" partialSubmit="true" actionListener="#{testBean.hidePopupActionListener}"/> <af:commandButton text="Cancel" partialSubmit="true" actionListener="#{testBean.cancelPopupActionListener}"/> </af:panelWindow> </af:popup> <af:commandButton 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 UIComponent 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 UIComponent 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 UIComponent popup = getPopup(); popup.cancel(); }
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
.
... ... <f:facet > <f:verbatim> </f:verbatim> </f:facet> <af:form> <af: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:commandButton text="show"> <af:showPopupBehavior popupid="popup"/> </af:commandButton> </af:form> ... ... public void serverPopupClosedListener(ClientEvent event) { String popupId = (String) event.getParameters().get("popupId"); System.out.print("Popup Closed: " + popupId); }
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:commandLink text="#{person.firstName}"> <af:showPopupBehavior popupid="O__noteWindow" triggerType="mouseHover"/> <af:clientAttribute name="fullName" value="#{person.fullName}"/> </af:commandLink> </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.
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:commandButton text="Update" partialSubmit="true" clientComponent="true" id="updateEmployee"> <af:clientAttribute name="employee" value="#{row.Empno}"/> <af:showPopupBehavior popupid="O__popupRegion1"/> </af:commandButton> </af:column> ... ... public void swapEmptyTaskFlow(PopupCanceledEvent event) { setDynamicTaskFlowId(""); }
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.<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>
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 events might include the width of a column that supported client-side resizing. |
Name | Type | Supports EL? | Description |
---|---|---|---|
animate | String | Yes | Valid Values: default, false 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, disabled 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:
|
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 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:
|
clientComponent | boolean | Yes | 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, lazyUncached 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 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:
|
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 | 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 | 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 |