What Happens at Runtime: Popup Component Events

13-16 Web User Interface Developers Guide for Oracle Application Development Framework Example 13–8 shows a backing bean method that cancels a popup in response to an actionEvent: Example 13–8 Backing Bean Method Canceling a Popup public void cancelPopupActionListenerActionEvent event { FacesContext context = FacesContext.getCurrentInstance; p1.cancel; } Example 13–9 shows a backing bean method that hides a popup in response to an actionEvent: Example 13–9 Backing Bean Method Hiding a Popup public void hidePopupActionListenerActionEvent event { FacesContext context = FacesContext.getCurrentInstance; p1.hide; } The p1 object in the previous examples refers to an instance of the RichPopup class from the following package: oracle.adf.view.rich.component.rich.RichPopup For more information about RichPopup, see the Oracle Fusion Middleware Java API Reference for Oracle ADF Faces.

13.3.1 How to Programatically Invoke a Popup

You configure the command component’s actionListener attribute to reference the backing bean method that shows, cancels or hides the popup. Before you begin: Create the type of popup that you want the server-side method to invoke, as described in Section 13.2, Declaratively Creating Popup Elements. It may be helpful to have an understanding of the configuration options available to you if you want to invoke a popup component programmatically. For more information, see Section 13.3, Programmatically Invoking a Popup. To programmatically invoke a popup: 1. In the Component Palette, from the General Controls panel, drag and drop a command component onto the JSF page. For example, a Button component. 2. In the Property Inspector, expand the Behavior section and set the following attributes: ■ PartialSubmit : set to true if you do not want the Fusion web application to render the entire page after an end user clicks the command component. The default value false causes the application to render the whole page after an end user invokes the command component. For more information about page rendering, see Chapter 7, 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 command component at runtime. Using Popup Dialogs, Menus, and Windows 13-17 3. Write the logic for the backing bean that is invoked when the command component in step 1 passes an actionEvent. For more information, see Example 13–7, Backing Bean Method Invoking a Popup , Example 13–8, Backing Bean Method Canceling a Popup , or Example 13–9, Backing Bean Method Hiding a Popup .

13.3.2 What Happens When You Programmatically Invoke a Popup

At runtime, end users can invoke the command components you configure to invoke the server-side methods to show, cancel, or hide a popup. For example, Figure 13–4 shows a panelWindow component that renders inside a popup component. It exposes two command buttons Cancel and Hide that invoke the cancel and hide methods respectively. End users invoke a commandLink component rendered in the SupplierName column of the table component in the underlying page to show the popup. Figure 13–4 Popup Component Invoked by a Server-Side Method

13.4 Invoking Popup Elements

With ADF Faces rich client components, JavaScript is not needed to show or hide popups. The showPopupBehavior client behavior tag provides a declarative solution, so that you do not have to write JavaScript to open the popup or register the script with the component. For more information about client behavior tags, see Section 5.6, Using Client Behavior Tags. The showPopupBehavior tag listens for a specified event, for example the actionEvent on a command component, or the disclosureEvent on a showDetail component. However, the showPopupBehavior tag also cancels delivery of that event to the server. Therefore, if you need to invoke some server-side logic based on the event that the showPopupBehavior tag is listening for, then you need to use either JavaScript to launch the popup, or to use a custom event as documented in Section 5.4, Sending Custom Events from the Client to the Server.

13.4.1 How to Use the af:showPopupBehavior Tag

You use the showPopupBehavior tag in conjunction with the component that will invoke the popup element, for example a commandButton component that will invoke a dialog, or an inputText component that, when right-clicked, will invoke a context menu. Before you begin: 1. Create a popup component and its holder. 2. Create the component that will invoke the popup. 13-18 Web User Interface Developers Guide for Oracle Application Development Framework To use the showPopupBehavior tag: 1. In the Component Palette, from the Operations panel, drag a Show Popup Behavior and drop it as a child to the component that will be used to invoke the popup element.

2. In the Property Inspector, use the dropdown menu for the PopupId attribute to

choose Edit. Use the Edit Property: PopuId dialog to select the popup component to invoke.

3. From the TriggerType dropdown menu, choose the trigger that should invoke the

popup. The default is action which can be used for command 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 mousekeyboard events that can trigger the popup, see the showPopupBehavior tag documentation.

4. From the AlignId dropdown, choose Edit, and then use the Edit Property: AlignId

dialog to select the component with which you want the popup to align.

5. From the Align dropdown menu, choose how the popup should be positioned

relative to the component selected in the previous step. Example 13–10 shows sample code that displays some text in the af:popup component with the id “popup1 when the button Click Me is clicked. Example 13–10 showPopupBehavior Associated with commandButton component af:commandButton text=Click me id=button af:showPopupBehavior popupId=popup1 alignId=button align=afterEnd af:commandButton af:popup id=popup1 af:panelGroupLayout layout=vertical af:outputText value=Some af:outputText value=popup af:outputText value=content af:panelGroupLayout af:popup Note: The event selected for the triggerType attribute will not be delivered to the server. If you need to invoke server-side logic based on this event, then you must launch the popup using either JavaScript or a custom event as documented in Section 5.4, Sending Custom Events from the Client to the Server. 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.