Strategies for controlling the af:popup close event

In a previous OTN Harvest summary, I discussed how to handle the af:dialog OK and Cancel event: http://www.oracle.com/technetwork/developer-tools/adf/learnmore/77-ok-cancel-support-in-dialog-351871.pdf . In this post, I get back to this though not covering the "Cancel" case.

There are two options developers have to handle the "Ok" event of an af:dialog component in an af:popup

· Using a DialogListener with the default Ok button

· Using a custom command button instead of the default Ok button

The sample use case is quite simple: A command button added to a page opens the popup component that contains a dialog with an input text field in it. Users can provide a value in the input text field and press either a "custom Ok" button or the default "Ok" button to submit the value and close the popup. In both cases, the provided value in the text field is evaluated and if it is not "ADF ROCKS" written in whatever case, an error message is displayed and the popup is not closed.

Example 1: Using the default OK button and a DialogListener

The sample application opens with a single command button visible on the screen. Pressing the command button uses an af:showPopupBehavior behavior tag to open the popup.

Typing "Hello World" into the text field and pressing the Ok button (which is the default Ok button configured in the Type property of the af:dialog component) invokes a managed bean method that is configured as the DialogListener for the dialog component.

<af:dialog
  …
  binding="#{DialogContentHandler.dialogComponent}"
  contentWidth="300"
  contentHeight="200"
  dialogListener="#{DialogContentHandler.onDialogAction}">

Note that the binding property is set to define a JSF component binding of the dialog to the managed bean to allow the lookup of the input text field in Java. Because the entered text is not "ADF ROCKS", an error message is displayed below the input field To display error messages in a popup, the af:message tag is added to the popup dialog as shown below


<af:dialog …>
  <af:panelFormLayout id="pfl1">
    <af:panelLabelAndMessage label="Validate Me" id="plam1">
     <af:panelGroupLayout id="pgl1" layout="vertical">
        <af:inputText id="it1"/>
          <af:message id="m1" for="it1"/>
        </af:panelGroupLayout>
      </af:panelLabelAndMessage>
  </af:panelFormLayout>
</af:dialog>

The dialog listener managed bean code displaying the error or, in the case of the correct entry, dismissing the dialog is shown next:

/**
 * Dialog Listener that validates the input field for ADF ROCKS. 
 * If the string doesn't match, an error message is shown
 * 
 * @param dialogEvent
 */
public void onDialogAction(DialogEvent dialogEvent) {  
  //lookup the text field starting from the dialog component for
  //which a JSF component binding has been created
  UIComponent inputText = dialogComponent.findComponent("it1");
  String inputTextValue = 
                (String)((RichInputText)inputText).getValue();        
  //If the dialog outcome is OK (the OK button has been pressed)
  //validate the entry
  if(dialogEvent.getOutcome() == DialogEvent.Outcome.ok){
     if(inputTextValue != null &&
         inputTextValue.equalsIgnoreCase("ADF ROCKS")){   
     //ensure the input text value is reset for a second run
     ((RichInputText) inputText).resetValue();
  }
  else{
   //show error message so that popup doesn't close
   FacesContext fctx = FacesContext.getCurrentInstance();
   FacesMessage fm = 
             new FacesMessage(FacesMessage.SEVERITY_ERROR,
                     "Value Validation Failed", "Try: ADF ROCKS");       
   fctx.addMessage(inputText.getId(), fm);
  }
 }
} 

Example 2: Using a custom command button

The af:dialog component renders without default buttons when the Type property is set to none. This is useful if you want to add your own command buttons, which then also are better to customize.

<af:dialog id="…" …>
  <f:facet name="buttonBar">
    <af:commandButton text="Custom OK" id="cb2"                                                  
        action="#{DialogContentHandler.onOK}"                                                    
        partialSubmit="true"/>
</af:dialog>

The use case is the same as before and a message displays when the input text field value is not ADF ROCKS. The only difference to the code executed in a DialogListener is that the command button action listener needs to explicitly close the dialog

public String onOK() {      
  UIComponent inputText = dialogComponent.findComponent("it1");
  String inputTextValue = (String) ((RichInputText)inputText).getValue();
  if(inputTextValue != null &&
     inputTextValue.equalsIgnoreCase("ADF ROCKS")){
     RichPopup rp = (RichPopup)
     dialogComponent.getParent();
     //reset input text component
     ((RichInputText)inputText).resetValue();
     rp.hide();
  }
  else{
    FacesContext fctx = FacesContext.getCurrentInstance();
    FacesMessage fm = 
         new FacesMessage(FacesMessage.SEVERITY_ERROR,
                         "Value Validation Failed", "Try: ADF ROCKS");
         fctx.addMessage(inputText.getId(), fm);
  }        
  return null;
}

Sample Download

You can download an Oracle JDeveloper 11g R2 sample workspace from here: https://blogs.oracle.com/jdevotnharvest/resource/PreventPopupFromClosing.zip. The JSF page has both approaches,default Ok button and custom Ok button on a single dialog. You don't need a database for running the sample.


        
    
Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today