You can place a dialog component as a child to a popup component and render a dialog in a popup at runtime. The dialog component must be the only immediate child component of the popup component. At runtime, end users can view or enter information (for example, search criteria) and use the dialog component's default buttons to invoke a dialogEvent when clicked. Figure 16-2 shows an example where an end user can dismiss the dialog by clicking the Close button.

Figure 16-2 af:dialog Component

You can also use components within a popup to display contextual information related to another component. When so configured, the related component displays a small square. When moused over, the icon grows and also displays a note icon, as shown in Figure 16-3.

Figure 16-3 With Mouseover, Larger Icon with Note Is Displayed

When the user clicks the note icon, the associated popup displays its enclosed content.

You may find it helpful to understand other ADF Faces features before you use a popup component to create dialogs, menus, and windows. Additionally, once you have added a popup component (or related components) to your page, you may find that you need to add functionality such as accessibility and localization. Following are links to other functionality that these components can use.

• Using parameters in text: You can use the ADF Faces EL format tags if you want the text displayed in a component to contain parameters that will resolve at runtime. See How to Use the EL Format Tags.

• Events: The dialog component renders ADF Faces button components. You can also use a button component in conjunction with the showPopupBehavior tag to launch a popup. The button component used in conjunction with the showPopupBehavior tag delivers ActionEvent events when activated. For information about how to handle events on the server as well as on the client, see Handling Events.

• Messages: Popup dialogs and secondary windows are frequently used to provide different levels of help information for users. For information about how to display messages to users, see Displaying Tips, Messages, and Help.

• Localization: Instead of directly entering text for labels in the popup dialogs, menus, and windows that you create, you can use property files. These files allow you to manage translation of the text strings. See Internationalizing and Localizing Pages.

• Skins: You can change the look and feel of the components that you use to create popup dialogs, menus, and windows by changing the skin. See Customizing the Appearance Using Styles and Skins.

• Accessibility: You can make your popup dialogs, menus, and windows accessible. See Developing Accessible ADF Faces Pages.

• Dialog framework: If your application uses the full Fusion technology stack, note that the dialog framework is integrated with ADF Controller for use with ADF task flows. See Using Dialogs in Your Application in Developing Fusion Web Applications with Oracle Application Development Framework.

• Touch Devices: ADF Faces components may behave and display differently on touch devices. See Creating Web Applications for Touch Devices Using ADF Faces.

• Drag and Drop: You can configure your components so that the user can drag and drop them to another area on the page. See Adding Drag and Drop Functionality.

1. In the Components window, from the Layout panel, in the Secondary Windows group, drag a Popup and drop it onto the page.

   Tip:

   It does not matter where the popup component appears on the page, as the position is driven by the component used to invoke the popup. However, the popup component must be within a form component.

2. In the Properties window, expand the Common section and set the following attributes:

   • ContentDelivery: Select how the content is delivered to the component in the popup.

     Tip:

     Values of input components in a dialog are not reset when a user clicks the dialog's Cancel button. If the user opens the dialog a second time, those values will still display. If you want the values to match the current values on the server, then set the contentDelivery attribute to lazyUncached.

   • Animate: Configure animation for the popup dialog. See What You May Need to Know About Animation and Popups.

   • LauncherVar: Enter a variable to be used to reference the launch component. This variable is reachable only during event delivery on the popup or its child components, and only if the EventContext is set to launcher.

   • EventContext: Set to launcher if the popup is shared by multiple objects, for example if the dialog within the popup will display information for the selected row in a table. Setting this attribute to launcher makes the row clicked current before the event listener is called, and returns data only for that row. See What Happens at Runtime: Popup Component Events.

3. Optionally, in the Properties window, set the following attributes:

   • AutoCancel: Select disabled to prevent the automatic cancellation of an inline popup. See Controlling the Automatic Cancellation of Inline Popups.

   • ChildCreation: Select deferred to defer the creation of the popup component's child components until the application delivers the content. The default value for the childCreation attribute is immediate. See Declaratively Creating Popups.

   • ResetEditableValues: Select whenCanceled to reset editable values that an end user entered to null if the end user cancels the dialog.

     Alternatively, you can use the resetListener component. For information about using the resetListener component, see Resetting Input Fields in a Popup.

4. In the Components window, drag and drop a Dialog as a direct child to the popup component.
5. In the Properties window, expand the Common section and set the following attributes:

   • Type: Select the built-in partial-submit buttons you want to display in your dialog.

     For example, if you set the type attribute to yesNoCancel, the dialog displays Yes, No, and Cancel buttons. When any of these buttons are pressed, the dialog dismisses itself, and the associated outcome (either ok, yes, no, or cancel) is delivered with an event. The ok, yes, and no outcomes are delivered with the dialogEvent. Cancel outcomes are sent with the PopupCanceled event. You can use the appropriate listener property to bind to a method to handle the event, using the outcome to determine the logic.

     Tip:

     A dialog will not dismiss if there are any ADF Faces messages with a severity of error or greater.

   • Title: Enter text to be displayed as the title on the dialog window.

   • CloseIconVisible: Select whether or not you want the Close icon to display in the dialog.

   • Modal: Select whether or not you want the dialog to be modal. Modal dialogs do not allow the user to return to the main page until the dialog has been dismissed.

   • Resize: Select whether or not you want users to be able to change the size of the dialog. The default is off.

   • StretchChildren: Select whether or not you want child components to stretch to fill the dialog. When set to first, the dialog stretches a single child component. However, the child component must allow stretching. See Geometry Management and Component Stretching.

     Note:

     If you set Resize to on or set StretchChildren to first, you must also set ContentWidth and ContentHeight (see Step 8). Otherwise, the size will default to 250x250 pixels.

6. Expand the Appearance section and set the text attributes.

   Instead of specifying separate button text and an access key, you can combine the two, so that the access key is part of the button text. Simply precede the letter to be used as an access key with an ampersand (&).

   For example, if you want the text for the affirmative button to be OK, and you want the O in OK to be the access key, enter &OK.

7. Expand the Behavior section and if needed, enter a value for the DialogListener attribute. The value should be an EL expression method reference to a dialog listener method that handles the event.

   For example, suppose you create a dialog to confirm the deletion of an item. You might then create a method on a managed bean similar to the deleteItem method shown in the folloiwng example. This method accesses the outcome from the event. If the outcome is anything other than yes, the dialog is dismissed. If the outcome is yes (meaning the user wants to delete the item), the method then gets the selected item and deletes it.

     public void deleteItem(DialogEvent dialogEvent)
     {
       if (dialogEvent.getOutcome() != DialogEvent.Outcome.yes)
       {
         return;
       }
    
       // Ask for selected item from FileExplorerBean
       FileItem selectedFileItem = _feBean.getLastSelectedFileItem();
       if (selectedFileItem == null)
       {
         return;
       }
       else
       {
         // Check if we are deleting a folder
         if (selectedFileItem.isDirectory())
         {
           _feBean.setSelectedDirectory(null);
         }
       }
    
       this.deleteSelectedFileItem(selectedFileItem);
     }
   

   The following example shows how to bind the dialogListener attribute to the deleteItem method.

   <af:dialog title="#{explorerBundle['deletepopup.popuptitle']}"
              type="yesNo"
              dialogListener="#{explorer.headerManager.deleteItem}"
              id="d1">
   

   The dialogEvent is propagated to the server only when the outcome is ok, yes, or no. You can block this if needed. See How to Prevent Events from Propagating to the Server.)

   If the user instead clicks the Cancel button (or the Close icon), the outcome is cancel, the popupCancel client event is raised on the popup component. Any values entered into input components rendered in the popup component do not get sent to the server. Any editable components that have changed their values since the popup component rendered do not send the changed values to the server. The popupCancel event is delivered to the server.

8. If you want to set a fixed size for the dialog, or if you have set resize to on or set stretchChildren to first, expand the Appearance section and set the following attributes:

   • ContentHeight: Enter the desired height in pixels.

   • ContentWidth: Enter the desired width in pixels.

   Tip:

   While the user can change the values of these attributes at runtime (if the resize attribute is set to on), the values will not be retained once the user leaves the page unless you configure your application to use change persistence. For information about enabling and using change persistence, see Allowing User Customization on JSF Pages.

   Note:

   If you use an action component without the showPopupBehavior tag to launch the dialog, and if that action component has values for the windowHeight and windowWidth attributes, the values on the action component override the contentHeight and contentWidth values. The dialog framework allows you to use an action component to launch a dialog without the showPopupBehavior tag. See Running a Bounded Task Flow in a Modal Dialog in Developing Fusion Web Applications with Oracle Application Development Framework. For information about the showPopupBehavior tag, see Declaratively Invoking a Popup.

9. If needed, add button components to the buttonBar facet. The button components that you add invoke a standard actionEvent rather than a dialogEvent. To make sure that an actionEvent invokes only on components within the dialog, set the button component's partialSubmit attribute to true. You can set the button component's partialSubmit attribute to false if the af:popup component's autoCancel property is set to disabled. The values of an af:popup component's autoCancel property and a button component's partialSubmit property determine how the button component dismisses and reloads a dialog. See Controlling the Automatic Cancellation of Inline Popups.

   Tip:

   If the facet is not visible in the visual editor, right-click the dialog component in the Structure window and choose Facets - Dialog > ButtonBar. Facets in use on the page are indicated by a checkmark in front of the facet name.

   By default, added button components do not dismiss the dialog. You need to bind the actionListener on the button component to a handler that manages closing the dialog, as well as any needed processing. For examples on how to do this, see the tag documentation.

10. Insert components to display or collect data for the dialog. Use a layout component like panelGroupLayout to contain the components.

    Tip:

    Normally, clicking a dialog's Cancel button or Close icon prevents any data entered into an inputText component from being submitted. However, setting the autoSubmit attribute to true on an inputText component in a dialog overrides the dialog's cancel behavior, as this setting causes a submit.

11. Add logic on the parent page to invoke the popup and dialog. See Declaratively Invoking a Popup.

1. In the Components window, from the Layout panel, in the Secondary Windows group, drag a Popup and drop it onto the page.

   Tip:

   It does not matter where the popup component appears on the page, as the position is driven by the component used to invoke the popup. However, the popup component must be within a form component.

2. In the Properties window, expand the Common section and set the following attributes:

   • ContentDelivery: Select how the content is to be delivered to the component in the popup.

     Tip:

     Values of input components are not reset when a user closes the panelWindow component. If the user opens the window a second time, those values will still display. If you want the values to match the current values on the server, then set the contentDelivery attribute to lazyUncached.

   • Animate: Configure animation for the popup window. See What You May Need to Know About Animation and Popups.

   • LauncherVar: Enter a name (for example, source) for a variable. Similar to the var attribute on a table, this variable is used to store reference in the Request scope to the component containing the showPopupBehavior tag. The variable is reachable only during event delivery on the popup or its child components, and only if EventContext is set to launcher.

   • EventContext: Select launcher if the popup is shared by multiple objects, for example if the window within the popup will display information for the selected row in a table. Setting this attribute to launcher makes the row clicked current before the event listener is called, and returns data only for that row. See What Happens at Runtime: Popup Component Events.

   • PopupCancelListener: Set to an EL expression that evaluates to a handler with the logic that you want to invoke when the window is dismissed.

   • Optionally, select a value from the AutoCancel dropdown list to determine the automatic cancel behavior. See Controlling the Automatic Cancellation of Inline Popups.

3. In the Components window, from the Layout panel, in the Secondary Windows group, drag and drop a Panel Window as a direct child to the popup component.
4. In the Properties window, expand the Common section and set the following attributes:

   • Modal: Select whether or not you want the window to be modal. Modal windows do not allow the user to return to the main page until the window has been dismissed.

   • CloseIconVisible: Select whether or not you want the Close icon to display in the window.

   • Title: The text displayed as the title in the window.

   • Resize: Select whether or not you want users to be able to change the size of the dialog. The default is off.

   • StretchChildren: Select whether or not you want child components to stretch to fill the window. When set to first, the window stretches a single child component. However, the child component must allow stretching. See Geometry Management and Component Stretching.

     Note:

     If you set Resize to on or set StretchChildren to first, you must also set ContentWidth and ContentHeight (see Step 6). Otherwise, the size will default to 250x250 pixels.

5. If you want to set a fixed size for the window, or if you have set Resize to on or set StretchChildren to first, expand the Appearance section and set the following attributes:

   • ContentHeight: Enter the desired height in pixels.

   • ContentWidth: Enter the desired width in pixels.

   Tip:

   While the user can change the values of these attributes at runtime (if the resize attribute is set to on), the values will not be retained once the user leaves the page unless you configure your application to use change persistence. For information about enabling and using change persistence, see Allowing User Customization on JSF Pages.

   Note:

   If an action component without the showPopupBehavior tag is used to launch the dialog, and if that action component has values for the windowHeight and windowWidth attributes, the values on the action component will override the contentHeight and contentWidth values. For information about the showPopupBehavior tag, see Declaratively Invoking a Popup.

6. Insert components to display or collect data for the window. Use a layout component like panelGroupLayout to contain the components.
7. Add logic on the parent page to invoke the popup and panel window. See Declaratively Invoking a Popup.

1. In the Components window, from the Layout panel, in the Secondary Windows group, drag a Popup and drop it onto the page.

   Tip:

   It does not matter where the popup component appears on the page, as the position is driven by the component used to invoke the popup. However, the popup component must be within a form component.

2. In the Properties window, expand the Common section and set the following attributes.

   • ContentDelivery: Determines how the content is delivered to the component in the popup.

   • Animate: Configure animation for the context menu. See What You May Need to Know About Animation and Popups.

   • LauncherVar: Enter a variable name (for example, source) to be used to reference the launch component. This variable is reachable only during event delivery on the popup or its child components, and only if the EventContext is set to launcher.

   • EventContext: Set to launcher if the popup is shared by multiple objects, for example if the menu within the popup will display information for the selected row in a table. Setting this attribute to launcher makes the row clicked current before the event listener is called, and returns only data for that row. See What Happens at Runtime: Popup Component Events.

   • Optionally, select a value from the AutoCancel dropdown list to determine the automatic cancel behavior. See Controlling the Automatic Cancellation of Inline Popups.

3. In the Components window, drag and drop a Menu as a direct child to the popup component, and build your menu using commandMenuItem components, as described in How to Create and Use Menus in a Menu Bar.

   Tip:

   Because this is a context menu, you do not need to create a menu bar or multiple menus, as documented in Steps 1 through 5 in How to Create and Use Menus in a Menu Bar.

4. Add logic on the parent page to invoke the popup and context menu. See Declaratively Invoking a Popup.

When content is delivered to the popup, and the contentDelivery attribute is set to either lazy or lazyUncached, the popupFetch server-side event is invoked. This event has two properties, eventContext and launcherVar. The eventContext property determines the context from which the event is delivered, either from the context of the popup (self) or from the component that launched the popup (launcher). Setting the context to launcher can be very useful if the popup is shared by multiple components, because the framework will behave as though the component that launched the popup had launched the event, and not the popup. The launcherVar property is used to keep track of the current launcher, similar to the way in which variables are used to stamp out rows in a table.

For example, say you have a column in a table that displays a person's first name using a link component. When the link component is hovered over, a popup noteWindow is invoked that shows the person's full name. Because this noteWindow will be used by all rows in the table, but it needs to display the full name only for the row containing the link component that was clicked, you need to use the eventContext property to make sure that the context is that row, as shown in the following example.

<af:popup id="noteWindow" contentDelivery="lazyUncached" eventContext="launcher"
          launcherVar="source">
  <af:noteWindow>
    <af:outputText value="#{testBean.fullName}"/>
  </af:noteWindow>
</af:popup>
<af:table var="person" value="#{testBean.people}">
  <af:column id="firstName">
    <af:link text="#{person.firstName}">
      <af:showPopupBehavior popupId="::noteWindow" triggerType="mouseHover"/>
    </af:link>
  </af:column>
</af:table>

Using the variable source, you can take values from the source and apply them, or you can set values. For example, you could get the full name value of the people object used in the table, and set it as the value of the testBean's fullName property used by the window, using a setPropertyListener and clientAttribute tag, as shown in the following example.

<af:popup id="noteWindow" contentDelivery="lazyUncached" eventContext="launcher"
          launcherVar="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>

In this example, the launcherVar property source gets the full name for the current row using the popupFetch event. For information about using the setPropertyListener tag, see How to Use the pageFlowScope Scope Without Writing Java Code. For information about using client attributes, see Using Bonus Attributes for Client-Side Components. For information about the showPopupBehavior tag, see Declaratively Invoking a Popup.

Popups also invoke the following client-side events:

• popupOpening: Fired when the popup is invoked. If this event is canceled in a client-side listener, the popup will not be shown.

• popupOpened: Fired after the popup becomes visible. One example for using this event would be to create custom rules for overriding default focus within the popup.

• popupCanceled: Fired when a popup is unexpectedly dismissed by auto-dismissal or by explicitly invoking the popup client component's cancel method. This client-side event also has a server-side counterpart.

• popupClosed: Fired when the popup is hidden or when the popup is unexpectedly dismissed. This client-side event also has a server-side counterpart.

When a popup is closed by an affirmative condition, for example, when the Yes button is clicked, it is hidden. When a popup is closed by auto-dismissal, for example when either the Close icon or the Cancel button is clicked, it is canceled. Both types of dismissals result in raising a popupClosed client-side event. Canceling a popup also raises a client-side popupCanceled event that has an associated server-side counterpart. The event will not be propagated to the server unless there are registered listeners for the event. If it is propagated, it prevents processing of any child components to the popup, meaning any submitted values and validation are ignored. You can create a listener for the popupCanceled event that contains logic to handle any processing needed when the popup is canceled.

If you want to invoke some logic based on a client-side event, you can create a custom client listener method. See Listening for Client Events. If you want to invoke server-side logic based on a client event, you can add a serverListener tag that will invoke that logic. See Sending Custom Events from the Client to the Server.

The dialog component raises a dialogEvent when the end user clicks the OK, Yes, No or Cancel buttons. A dialog component automatically hides itself when the end user clicks the OK, Yes or No buttons provided that no message with a severity of error or greater exists on the page. An end user selecting the Cancel button or close icon cancels the parent popup component and raises a popup canceled event.

You can configure a dialogListener attribute to intercept the dialogEvent returned by the OK, Yes, No, and Cancel buttons. Only the dialogEvent returned by the OK, Yes and No buttons get propagated to the server. The dialogEvent returned by the Cancel button, the ESC key, and close icon queue a client dialog event and do not get propagated to the server.

If you configure an actionListener for the action component that invokes a dialog component to carry out an action (for example, update an inputText component) after the dialog component returns, you also need to call resetValue() on the inputText component if the action component's immediate value is set to true.

For information about the events raised by the dialog and popup components, see the Tag Reference for Oracle ADF Faces.

The dialog, panelWindow, menu, and noteWindow components that render inside the popup component to display popups can use animation when rendering. You enable animation for these components in an application by setting the <animation-enabled> element to true in the application's trinidad-config.xml file, as described in Animation Enabled.

You can further customize or disable the animation of these components by writing values for the -tr-animate and -tr-open-animation-duration ADF skin properties in the application's ADF skin. The following example demonstrates how you can permit animation for menu components in an application while you disable animation for dialog components.

/** Animate menu components and specify 10 seconds as the duration to open a menu or a popup menu */
af|menu {
    -tr-open-animation-duration: 10000; 
    -tr-animate: true;
}

/** Disable animation for dialog components */
af|dialog {
    -tr-animate: false;
}

The animation behavior of specific instances of a popup component can be configured by setting the appropriate value for the popup component's animate property, as described in the following list:

• default: The <animation-enabled> element in the application's trinidad-config.xml file and ADF skin properties in the application's ADF skin determine the animation behavior of the popup component.

• false: Turns off animation for the popup regardless of the animation settings that you have configured for the application in the trinidad-config.xml file or the application's ADF skin. For example, assume that you set this value for a popup component that displays a menu component. Animation is disabled for this specific popup menu despite an application enabling animation and containing the ADF skin properties for menu components, as shown in the previous code example..

• true: Overrides an -tr-animate: false entry in an application's ADF skin. For example, if you set the animate property to true for a popup component that renders a dialog component, the popup dialog uses animation when rendering despite the ADF skin properties configured for dialog components, as shown in the previous code example..

For information about the ADF skin properties for animation, see Tag Reference for Oracle ADF Faces Skin Selectors.

1. In the Structure window, right-click the af:popup component for which you want to specify time and choose Go to Properties.
2. In the Properties window, expand the Behavior section and specify the number of seconds in the AutoDismissalTimeout property.

When an inline popup is dismissed automatically after the specified time in the AutoDismissalTimeout attribute, the system raises an AdfPopupClosedEvent client-only event. This event is not synchronized back to the server. To send any custom data back to the server, create a new listener tag as given in the example below that leverages the existing af:serverListener tag and bind it to the af:clientListener tag without any JavaScript code needed:

<af:popup id="test" contentDelivery="lazyUncached">
   <af:dialog title="test">
      <af:inputText id="testInput" label="test" binding="#{mybean.testInput}"/>
   </af:dialog>
   <af:clientServerListener method="#{mybean.clientDelegateListener}" immediate="true" triggerType="click"/>
</af:popup>

1. In the Components window, from the Operations panel, in the Behavior group, drag a Show Popup Behavior and drop it as a child to the component that invokes the popup.
2. In the Properties window, choose Edit from the context menu that appears when you click the icon that appears when you hover over the PopupId property field. Use the Edit Property: PopupId dialog to select the popup component to invoke and click OK.
3. In the Properties window, from the TriggerType dropdown menu, choose the trigger to invoke the popup. The default is action which can be used for action components. Use contextMenu to trigger a popup when the right-mouse is clicked. Use mouseHover to trigger a popup when the cursor is over the component. The popup closes when the cursor moves off the component. For a detailed list of component and mouse/keyboard events that can trigger the popup, see the documentation for the showPopupBehavior tag in the Tag Reference for Oracle ADF Faces.

   Note:

   The event selected for the showPopupBehavior tag's triggerType attribute will not be delivered to the server. If you need to invoke server-side logic based on this event, then you must invoke the popup using either JavaScript or a custom event as documented in Sending Custom Events from the Client to the Server or invoke the popup programmatically as documented in Programmatically Invoking a Popup.

4. Choose Edit from the context menu that appears when you click the icon that appears when you hover over the AlignId property field. Use the Edit Property: AlignId dialog to select the component with which you want the popup to align.
5. In the Align dropdown menu, choose how the popup should be positioned relative to the component selected in the previous step.

   Note:

   The dialog and panelWindow components do not require alignId or align attributes, as the corresponding popup can be moved by the user. If you set AlignId, the value will be overridden by any manual drag and drop repositioning of the dialog or window. If no value is entered for AlignId or Align, then the dialog or window is opened in the center of the browser.

   Additionally, if the triggerType attribute is set to contextMenu, the alignment is always based on mouse position.

At design time, JDeveloper generates the corresponding values in the source files that you selected in the Properties window. The following example shows sample code that displays some text in the af:popup component with the id attribute "popup2" when the button "Show Popup" is clicked.

<af:button text="Click me" clientComponent="true" id="popupButton2">
    <showPopupBehavior popupId="popup2" alignId="popupButton2" align="afterStart"/>
</af:button>
...
<af:popup id="popup2">
   <af:panelGroupLayout layout="vertical">
      <af:outputText value="Some"/>
      <af:outputText value="popup"/>
      <af:outputText value="content"/>
   </af:panelGroupLayout>
</af:popup>

The code in the example tells ADF Faces to align the popup contents with the button identified by the id attribute, and to use the alignment position of afterStart, which aligns the popup underneath the button, as shown in Figure 16-5.

Figure 16-5 Button and Popup Contents

The tail attribute when used with af:showPopupBehavior tag displays the popup window with a triangle. It has valid values none or simple or any custom value. The default value of the tail attribute is none except for the notewindow popup type that has the default value simple. The following example shows sample code that displays some text in the af:button component with the id attribute launchElement and tail attribute is set to simple when the button Show Popup is clicked.

<af:button id="launchElement" text="Show Popup" clientComponent="true">
    <af:showPopupBehavior popupId="popup" align="afterCenter" alignId="launchElement" triggerType="action" tail="simple"/>
</af:button>

The code in the example tells ADF Faces to align the popup contents with the button identified by the id attribute, and to use the alignment position of afterCenter which aligns the popup after the button, as shown in Figure 16-6

Figure 16-6 Popup with Tail Attribute

1. In the Components window, from the General Controls panel, drag and drop an action component onto the JSF page. For example, a Button.
2. In the Properties window, expand the Behavior section and set the following attributes:

   • PartialSubmit: Select true if you do not want the Fusion web application to render the entire page after an end user clicks the action component. The default value (false) causes the application to render the whole page after an end user invokes the action component. For information about page rendering, see Rerendering Partial Page Content.

   • ActionListener: Set to an EL expression that evaluates to a backing bean method with the logic that you want to execute when the end user invokes the action component at runtime.

3. Write the logic for the backing bean that is invoked when the action component in Step 2 passes an actionEvent.

At runtime, end users can invoke the action components you configure to invoke the server-side methods to show, cancel, or hide a popup. For example, Figure 16-7 shows a panelWindow component that renders inside a popup component. The panelWindow component exposes two buttons (Cancel and Hide) that invoke the cancel and hide methods respectively. End users invoke a link component rendered in the SupplierName column of the table component in the underlying page to show the popup.

Figure 16-7 Popup Component Invoked by a Server-Side Method

1. In the Components window, from the General Controls panel, drag a Context Info and drop it into the Context facet of the component that is to display the additional information icons.

   Tip:

   If the facet is not visible in the visual editor, right-click the component in the Structure window and choose Facets - component name > Context. Facets in use on the page are indicated by a checkmark in front of the facet name.

2. If you need server-side logic to execute when the contextInfo component displays, in the Properties window, expand the Behavior section and bind the ContextInfoListener to a handler that can handle the event

   Note:

   If you use the showPopupBehavior tag to launch the popup, then delivery of the contextInfoEvent to the server is cancelled. If you need to invoke server-side logic based on this event, then you must launch the popup by using either JavaScript or a custom event as documented in Sending Custom Events from the Client to the Server.

3. In the Components window, from the Operations panel, in the Behavior group, drag a Show Popup Behavior and drop it as a child to the contextInfo component.
4. With the showPopupBehavior tag selected in the editor, in the Properties window, set the attributes as described in How to Declaratively Invoke a Popup Using the af:showPopupBehavior Tag. For the TriggerType, make sure to enter contextInfo.

1. In the Structure window, right-click the af:popup component for which you want to configure the automatic cancellation behavior and choose Go to Properties.
2. In the Properties window, expand the Common section and select disabled from the AutoCancel dropdown list.

JDeveloper sets the af:popup component autoCancel property's value to disabled, as shown in the following example. At runtime, the Fusion web application restores an inline popup after it rerenders a page if the inline popup displayed before invocation of the command to rerender the page.

<af:popup id="p1" autoCancel="disabled">
  ...
</af:popup>

1. Create the type of popup dialog that you require, as described in Declaratively Creating Popups.
2. In the Components window, from the Operations panel, in the Listeners group, drag and drop a Reset Listener as a direct child to the popup component.
3. In the Insert Reset Listener dialog that JDeveloper displays, enter popupCanceled as the type of event that the resetListener component responds to.

   Click Help in the Insert Reset Listener dialog to view a complete list of supported values.

JDeveloper writes entries similar to those shown in Example 16-4 when you configure a popup component and a resetListener component to allow end users to reset the input field(s) in the popup component to null.

At runtime, an end user gesture that raises a popupCanceled event results in the resetListener component resetting values in the input fields of the popup component to null, as illustrated in Figure 16-11.

Figure 16-11 Popup Component Resetting Input Fields

Description of "Figure 16-11 Popup Component Resetting Input Fields"

<af:popup id="popupDialog" contentDelivery="lazyUncached" 
  popupCanceledListener="#{demoInput.resetPopupClosed}">
    <af:dialog title="Enter an Incorrect Value">
      <af:inputText id="it2" label="Always-incorrect Value" value="#{demoInput.value}">
        <f:validator binding="#{demoInput.obstinateValidator2}"/>
      </af:inputText>
    </af:dialog>
    <af:resetListener type="popupCanceled"/>
</af:popup>