First page Back Continue Last page Graphics

Displaying a Pop-Up Window


Displaying a Pop-Up Window

The af:showPopupBehavior tag is a declarative way to show a pop-up component in response to a client-side action or other event.

First, you drag the af:popup component to the page, placing the components on it that you want the popup to display. You can place the components on a Panel Window layout component, optionally setting its modal property. You must give the popup a unique ID.

Next, you can drag the showPopupBehavior operation from the Component Palette to the component to be used as a trigger for the event. You normally associate a pop-up window with a command component, but you can use other components as well. Then set PopupId to the same ID as the pop-up component.

To show a popup in response to an event, set the triggerType property. The default is to respond to an action, which works for a command component, but for other component types you can set triggerType to contextMenu. This uses the appropriate platform gesture to show a pop-up menu (usually right-click, but control-click on the Mac operating system, for example). The triggering event causes the popup specified using the PopupId attribute to be shown.

The example in the slide shows an image, which when right-clicked at run time invokes a popup that displays output text and an input component.