Introduction to Using Popup Elements

13-4 Web User Interface Developers Guide for Oracle Application Development Framework By default, the content of the popup element is not sent from the server until the popup element is displayed. This represents a trade-off between the speed of showing the popup element when it is opened and the speed of rendering the parent page. Once the popup element is loaded, by default the content will be cached on the client for rapid display. You can modify this content delivery strategy by setting the contentDelivery attribute on the popup component to one of the following options: ■ lazy - The default strategy previously described. The content is not loaded until you show the popup element once, after which it is cached. ■ immediate - The content is loaded onto the page immediately, allowing the content to be displayed as rapidly as possible. Use this strategy for popup elements that are consistently used by all users every time they use the page. ■ lazyUncached - The content is not loaded until the popup element is displayed, and then the content is reloaded every time you show the popup element. Use this strategy if the popup element shows data that can become stale or outdated. If you choose to set the popup component’s contentDelivery attribute to lazy or lazyUncached, you can further optimize the performance of the popup component and the page that hosts it by setting another popup component attribute childCreation to deferred. This defers the creation of the popup components child components until the application delivers the content. The default value for the childCreation attribute is immediate.

13.2.1 How to Create a Dialog

Create a dialog when you need the dialog to raise events when dismissed. Once you add the dialog component as a child to the popup component, you can add other components to display and collect data. By default, the dialog component can have the following combination of buttons: ■ Cancel ■ OK ■ OK and Cancel ■ Yes and No ■ Yes, No, and Cancel ■ None These buttons launch a dialogEvent when clicked. You can add other buttons to a dialog using the buttonBar facet. Any buttons that you add do not invoke the dialogEvent. Instead, they invoke the standard actionEvent. It is recommended that any of these buttons that you add have their partialSubmit attribute set to true. This makes sure that an actionEvent invokes only on components within the dialog. However, you can add buttons and set their partialSubmit attribute to false if you set the af:popup component’s autoCancel property’s value to disabled. Choosing this latter option partialSubmit set to false results in increased wait times for end users because your application reloads the page and reinitializes components on the page before it restores the popup component’s visibility and by extension, the dialog component. Note that you must set the command component’s partialSubmit attribute to true if the af:popup component’s autoCancel property’s value is set to enabled the default value. For more information about the use of the af:popup component’s autoCancel property, see Section 13.6, Controlling the Automatic Cancellation of Inline Popups. Using Popup Dialogs, Menus, and Windows 13-5 To create an inline dialog: 1. In the Component Palette, from the Common Components panel, drag and drop a Popup onto the JSF page. 2. In the Property Inspector, expand the Common section and set the following attributes: ■ ContentDelivery : Select how the content is delivered to the component in the popup. ■ Animate : Select true to enable animation. Animation is determined by configuration in the trinidad-config.xml file and by its skin properties for more information, see Section A.6.2.1, Animation Enabled . You can override this setting by selecting false. ■ 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. For more information, see Section 13.2.5, What Happens at Runtime: Popup Component Events. 3. Optionally, in the Property Inspector, expand the Other section and set a value for the AutoCancel property to determine the automatic cancel behavior. For more information, see Section 13.6, Controlling the Automatic Cancellation of Inline Popups.

4. From the Component Palette, drag and drop a Dialog as a direct child to the

popup component. 5. In the Property Inspector, expand the Common section and set the following attributes: ■ Type : Select the built-in partial-submit command buttons you want to display in your dialog. For example, if you set the type attribute to yesNoCancel, the dialog will display 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. 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: 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. 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.