How to Create a Dialog

Using Popup Dialogs, Menus, and Windows 13-7 } else { Check if we are deleting a folder if selectedFileItem.isDirectory { _feBean.setSelectedDirectorynull; } } this.deleteSelectedFileItemselectedFileItem; } Example 13–2 shows how the dialogListener attribute is bound to the deleteItem method. Example 13–2 Binding the dialogListener attribute to a 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. For more information, see Section 5.3.5, 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, and any other events including the dialogEvent are prevented from getting to the server. However, 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 Other section and set the following attributes: ■ ContentHeight : Enter the desired height in pixels. ■ ContentWidth : Enter the desired width in pixels. 9. If needed, add command components to the buttonBar facet. It is recommended that you set the partialSubmit attribute to true for every added command component. However, you can set the command component’s partialSubmit 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 Chapter 31, Allowing User Customization on JSF Pages. Note: If a command component without the showPopupBehavior tag is used to launch the dialog, and if that command component has values for the windowHeight and windowWidth attributes, the values on the command component will override the contentHeight and contentWidth values. For more information about the showPopupBehavior tag, see Section 13.4, Invoking Popup Elements. 13-8 Web User Interface Developers Guide for Oracle Application Development Framework attribute to false if the af:popup component’s autoCancel property is set to disabled. The values an af:popup component’s autoCancel property and a command component partialSubmit property determine how a command component dismisses and reloads a dialog. For more information, see Section 13.6, Controlling the Automatic Cancellation of Inline Popups. By default, added command components do not dismiss the dialog. You need to bind the actionListener on the command 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. 11. Add logic on the parent page to invoke the popup and dialog. For more information, see Section 13.4, Invoking Popup Elements.

13.2.2 How to Create a Panel Window

The panelWindow component is similar to the dialog component, but it does not allow you to configure the buttons or to add buttons to a facet. If you need some logic to be invoked to handle data in the panelWindow, then you need to create a listener for the popup component’s cancel event. The popup component that contains the panelWindow component must be contained within a form component. To create an inline window: 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: Tip: If the facet is not visible in the visual editor: 1. Right-click the dialog component in the Structure window. 2. From the context menu, choose Facets - Dialog ButtonBar. Facets in use on the page are indicated by a checkmark in front of the facet name. 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 dialogs cancel behavior, as this setting causes a submit. Tip: If you are using the panelWindow as an inline popup in an application that uses the Fusion technology stack, and you want to emulate the look of a dialog, place the panelWindow component in the center facet of a panelStretchLayout component, and place command buttons in the bottom facet. 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. Using Popup Dialogs, Menus, and Windows 13-9 ■ ContentDelivery : Select how the content is to be 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 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 : Set to 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. For more information, see Section 13.2.5, 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. 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. In the Component Palette, from the Layout panel, drag and drop a Panel Window

as a direct child to the popup component. 5. In the Property Inspector, 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. For more information, see Section 8.2.1, Geometry Management and Component Stretching. 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. 13-10 Web User Interface Developers Guide for Oracle Application Development Framework

6. If you want to set a fix size for the window, or if you have set resize to on or set

stretchChildren to first, expand the Other section and set the following attributes: ■ ContentHeight : Enter the desired height in pixels. ■ ContentWidth : Enter the desired width in pixels.

7. Insert components to display or collect data for the window. Use a layout

component like panelGroupLayout to contain the components.

8. Add logic on the parent page to invoke the popup and panel window. For more

information, see Section 13.4, Invoking Popup Elements.

13.2.3 How to Create a Context Menu

You create a context menu by using menu components within the popup component. You can then invoke the context menu popup from another component, based on a given trigger. If instead, you want toolbar buttons in a toolbar to launch popup menus, then see Section 14.3, Using Toolbars. To create an inline context menu: 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 : Determines how the content is delivered to the component in the popup. 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. 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 Chapter 31, Allowing User Customization on JSF Pages. Note: If a command component without the showPopupBehavior tag is used to launch the dialog, and if that command component has values for the windowHeight and windowWidth attributes, the values on the command component will override the contentHeight and contentWidth values. For more information about the showPopupBehavior tag, see Section 13.4, Invoking Popup Elements. 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. Using Popup Dialogs, Menus, and Windows 13-11 ■ 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 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. 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 Menu as a direct child to the popup

component, and build your menu using commandMenuItem components, as documented starting with Step 6 in Section 14.2.1, How to Create and Use Menus in a Menu Bar. 5. Add logic on the parent page to invoke the popup and context menu. For more information, see Section 13.4, Invoking Popup Elements.

13.2.4 How to Create a Note Window

Use the noteWindow component to display read-only text. The popup component that contains the noteWindow component must be contained within a form component. To create an inline window: 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 : Determines 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 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 Section 14.2.1, How to Create and Use Menus in a Menu Bar. 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.