<af:dialog>

af:dialog dialog dialog

UIComponent class: oracle.adf.view.rich.component.rich.RichDialog
Component type: oracle.adf.RichDialog

The dialog control is a layout element that displays its children inside a dialog window and delivers DialogEvents when the OK, Yes, No and Cancel actions are activated. The af:dialog must be placed inside a af:popup component and has to be the immediate child of the af:popup. To show a dialog use the af:showPopupBehavior tag or programmatically from Javascript, call show() on the popup client component. A dialog will automatically hide itself when OK, Yes or No buttons are selected provided that there are not any faces messages of severity of error or greater on the page. Selecting the Cancel button or close icon will cancel the popup and raise a popup canceled event.

Dialog Events

Client Dialog Event

When using the dialog type button configurations, action outcomes of type "ok", "yes", "no" and "cancel" can be intercepted on the client with a "dialog" type listener. Only "ok", "yes" and "no" event will be propagated to the server. The "cancel" button and close icon do raise a client dialog event but a "cancel" outcome prevents the DialogEvent from getting sent to the server. This propagation can be blocked, as with any RCF event, by calling cancel() on the JS event object. Use the af:clientListener with a type of dialog to listen for a dialog client event.

...
...
<f:facet name="metaContainer">
  <f:verbatim>
    
  </f:verbatim>
</f:facet>
<af:form>
  <af:panelGroupLayout>
     <af:selectOneRadio label="Gender">
        <af:selectItem label="Male" value="M"/>
        <af:selectItem label="Female" value="F"/>
        <af:clientListener method="handleValueChange" type="valueChange"/>
        <af:clientAttribute name="popupId" value="confirmationDialog"/>
     </af:selectOneRadio>
  </af:panelGroupLayout>
  <af:popup id="confirmationDialog">
    <af:dialog title="Confirm Change" type="yesNo">
       <f:verbatim>

Would you like to save the change?</f:verbatim>
       <af:clientListener method="handleDialog" type="dialog"/>
    </af:dialog>
  </af:popup>
</af:form>
  

Server Dialog Event

When a dialog event is propagated to the server, the dialog will be automatically closed on the client after the server event. If an error occurs during the server-side processing (specifically, if faces messages of error severity or greater are added) of the dialog event, then the dialog will not be closed.

...
...
<af:form>
  <af:panelGroupLayout>
     <af:selectOneRadio label="Gender" binding="#{sharedPopup.genderComponent}" 
          valueChangeListener="#{sharedPopup.handleValueChange}" 
          autoSubmit="true"
          value="#{sharedPopup.gender}">
        <af:selectItem label="Male" value="M"/>
        <af:selectItem label="Female" value="F"/>
     </af:selectOneRadio>
  </af:panelGroupLayout> 
  <af:popup id="confirmationDialog" binding="#{sharedPopup.popupComponent}">
    <af:dialog title="Confirm Change" type="yesNo" dialogListener="#{sharedPopup.handleDialog}">
       <f:verbatim>

Would you like to save the change?</f:verbatim>
    </af:dialog>
  </af:popup>
</af:form>
...
...
public void handleValueChange(ValueChangeEvent event) {
    setOldGender((String)event.getOldValue());

    FacesContext context = FacesContext.getCurrentInstance();
    String popupId = popupComponent.getClientId(context);

    StringBuilder script = new StringBuilder();
    script.append("var popup = AdfPage.PAGE.findComponent('")
          .append(popupId).append("'); ")
          .append("if (!popup.isPopupVisible()) { ")
          .append("var hints = {}; ")
          .append("popup.show(hints);}");
    ExtendedRenderKitService erks =
        Service.getService(context.getRenderKit(),
                           ExtendedRenderKitService.class);
    erks.addScript(context, script.toString());
}

public void handleDialog(DialogEvent event) 
{
  if (event.getOutcome().equals(DialogEvent.Outcome.no)) 
  {
    setGender(getOldGender());
    RequestContext.getCurrentInstance().addPartialTarget(genderComponent);
  }
}
  

Using Input Components Inside a Dialog

When using input components, such as inputText, pressing the Cancel-button will not reset the values on those controls. If you open a dialog for the second time, the old values will still be there. If you want the values to match with the current values on the server, this can be accomplished by setting contentDelivery to lazyUncached on the containing popup component. The lazyUncached content delivery type will cause the content of the popup to be re-rendered but does not reset the server-side state of the component.

The dialogs cancel button and close icon dismisses the inline popup dialog without saving any changes. However, input components having the autoSubmit property turned on, overrides the dialog's cancel behavior.

Using Custom Dialog Buttons

The af:dialog component provides a buttonBar facet that is a container used to add additional command components to the dialogs footer. Custom buttons are added after pre-configured buttons specified using the type property. These command buttons must be partial submit commands. Custom buttons will not queue the associated dialogListener but requires custom action listeners. A dialog will not automatically dismiss for custom buttons. Additional logic must be added to dismiss the popup by sending a script fragment to the client.

...
...
<af:popup >
    <af:dialog title="Confirm Change" type="none" >
       <f:verbatim>

Would you like to save the change?</f:verbatim>
      <f:facet name="buttonBar">
         <af:panelGroupLayout layout="horizontal">
           <af:commandButton text="Yes" id="yes" actionListener="#{sharedPopup.handleDialog}" partialSubmit="true"/>
           <af:commandButton text="No" id="no" actionListener="#{sharedPopup.handleDialog}" partialSubmit="true"/>           
         </af:panelGroupLayout>
      </f:facet>
    </af:dialog>
</af:popup>
...
...
public void handleDialog(ActionEvent event) {
    UIComponent source = (UIComponent)event.getSource();

    if (source.getId().equals("no")) {
        setGender(getOldGender());
        RequestContext.getCurrentInstance().addPartialTarget(genderComponent);
    }

    FacesContext context = FacesContext.getCurrentInstance();
    String popupId = popupComponent.getClientId(context);

    StringBuilder script = new StringBuilder();
    script.append("var popup = AdfPage.PAGE.findComponent('")
          .append(popupId).append("'); ")
          .append("if (popup.isPopupVisible()) { ")
          .append("popup.hide();}");
    ExtendedRenderKitService erks =
        Service.getService(context.getRenderKit(),
                           ExtendedRenderKitService.class);
    erks.addScript(context, script.toString());
}
   

Understanding Cancel/Close Dismissal

The dialog's cancel button and close icon both raise a client only dialog event. A dialogListener will not be notified when the dialog is dismissed using these two commands. However, these commands translate into a popup-canceled event of the owning inline popup component. Server-side listeners can be registered with the parent af:popup component and will be invoked when the dialog is dismissed using a closed dialog event outcome. See af:popup for more information on cancel dismissal.

Events

Supported Facets

Attributes