Working with popups in ADF

Popups, ADF and browsers is the name of the game in this post. I’ve been developing ADF 11g web applications for some time now and I’ve been running into some issues while working with popups. While the popup mechanism in ADF is easy enough to understand and quite powerful, it has some quirks. This mainly has to do with showing and hiding them.  In this post I will show the various way’s to show and hide popups and what the advantages and disadvantages would be.

Firstly the way we create a popup. This is always the same. We create a “popup” element somewhere in the parent containers page.  Inside this element we can define the contents of the popup. This could be anything. If we would like to perform an action after we are done with the dialog we can use the “dialog” element to specify the actions and display the button’s to initiate these actions.

The hierarchical tree would look like this then:

<!--- pseudoXML -->
<af:popup>
   <af:dialog>
      [contents]
   </af:dialog>
</af:popup>

It might be handy to understand how exactly this popup is being rendered runtime. Essentially the popup is created and exists as soon as you create the page. It is simply hidden so it won’t bother you. So if you have a syntax error in your popup display code this error wil manifest itself when the parent page is being loaded, not when you show the popup. Because you usually want to display the popup without getting a full page refresh the popup will be shown and hidden by using javascript.

So how to interact with the popup?

1. From the JSF page

Showing the popup can be done by using the “showPopupBehavior” element. You create this element as the child of a component that can perform an action, like a button

<!--- pseudoXML -->
<af:commandToolbarButton>
   <af:showPopupBehavior />
</af:commandToolbarButton>

You can use this element to specify which popup needs to be shown and you can set some additional properties to specify where. For example if you set the “alignId” to the id of the button the popup will be shown over this button. If you want even more control you can set “align” property to control if the popup is show before, after, etc.. the button. Don’t forget to set the triggertype property. (in our case to “click”) Or else the popup will not be shown.

Closing the popup is done automatically when you use the “dialog” element and one of it’s buttons is clicked. Now there is another thing you can do using this element. You can perform actions based on which button was clicked. An example:

You have a dialog of the type “okCancel” . This means the popup will get two addtional buttons. One for “Ok” and one for “Cancel”. If we want to do something when one of the buttons is clicked we set the “dialogListener”. This must be a function in a backing bean with a parameter of the type “DialogEvent”. Here is how this function could look like:

public void onDialogClose(DialogEvent dialogEvent) {
    if (dialogEvent.getOutcome().equals(DialogEvent.Outcome.ok)) {
       // do Ok things
    } 
}

2. From Backing Bean code

Now there are situations where you do not want to react on a button but a different kind of event. In those cases it might be handy to be able to show a popup from backing bean code. This might pose for some difficulities since backing beans usually run server-side and not client-side (and that’s where the javascript is). Before 11g you had to jump through some hoops to get the job done.  You had to find the current JSF context, then initiate a render kit to provide a pathway to the javascript and eventually inject javascript for the popup to show.

Like so:

FacesContext context = FacesContext.getCurrentInstance();
ExtendedRenderKitService service = Service.getRenderKitService(context, ExtendedRenderKitService.class);
service.addScript(context, "var popup = AdfPage.PAGE.findComponent('"+DIALOG_CLIENT_ID+"'); popup."+action+"();");
AdfFacesContext.getCurrentInstance().addPartialTarget(dialog);

In the example above the “DIALOG_CLIENT_ID” is the id of the popup and the “action” is “show” or “hide”. The bad news is that the above works in older versions of Internet Explorer, but it fails to close the popup in other browsers such as Firefox. The effect is that when using this code and Firefox it will freeze your screen when trying to close (hide) the popup. You can do nothing but to refresh the page and lose all context.

Now on for the good news:

In 11g there is a function that does the work for you and does so equally well in all browsers I have tested. (Firefox, Chrome and IE)

The code for showing and hiding is as follows:

if (action.equals("show")){
  RichPopup.PopupHints ph = new RichPopup.PopupHints();
  popup.show(ph);
} else {
  popup.hide();
}

In the above case “popup” is in instance of RichPopup which can be bound from the JSF page or looked up using its context. The “PopupHints” essentially do the same as the “showPopupBehaviour”. You specify which popup you want to show and provide an alignment if neccesary. Hiding the popup is now as simple as calling “hide()” on the object.

So to recap and conclude:

When working with popups in adf 11g, try to use the “popup”, “dialog” and “showPopupBehaviour” elements. When it is impossible to do so, use the “popup”, “dialog” and the “popupHints” to controll a popup from your backing beans. In all cases try to avoid the use of the renderkit to inject javascript since this code is dependant on the javascript engine of the browser.

Thats all for now! Happy coding!

Ratings:

VN:F [1.9.22_1171]

please wait...

Rating: 4.4/5 (10 votes cast)

Tags: adf, Oracle, Popup

• 

 Print This PDF Version