<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" events will be propagated to the server. The ESC key, "cancel" button and close icon queues a client dialog event with a "cancel" outcome. Dialog events with a "cancel" outcome will not be sent to the server. Propagation of dialog events to the server 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

A dialog will hide after processing the dialog event for error free actions. If an error occurs during the server-side processing (specifically, if faces messages of error severity or greater) 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.popup}">
    <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());

    RichPopup popup = getPopup(); // popup binding
    UIComponent source = (UIComponent) event.getSource();
    RichPopup.PopupHints hints = new RichPopup.PopupHints();
    hints.add(RichPopup.PopupHints.HintTypes.HINT_ALIGN_ID, source)
         .add(RichPopup.PopupHints.HintTypes.HINT_LAUNCH_ID, source)
         .add(RichPopup.PopupHints.HintTypes.HINT_ALIGN, 
              RichPopup.PopupHints.AlignTypes.ALIGN_AFTER_END);
    popup.show(popup);
}

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, Esc key 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 the container to add additional command components to the dialogs footer. Custom buttons are added after pre-configured buttons. Pre-configured buttons are specified using the type property. Custom buttons will not queue the associated dialogListener but requires custom action listeners.

Using partial submit custom buttons is recommended because by default, a popup will not restore visibility after a full postback. The immediate parent (af:popup) controls this behavior. If the parent popup's autoCancel property is enabled, full submit commands will cause the popup dialog to auto-dismiss. When the autoCancel property is disabled, full submit commands will restore visibility on postback. See the af:popup tag documentation for more information on controlling aspects of auto-dismissal.

A dialog will not automatically dismiss for custom buttons. Additional logic must be added to dismiss the popup. This task is accomplished by calling on the server-side popup API.

...
...
<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);
    }

    RichPopup popup = getPopup(); // popup binding
    popup.hide();
}    
   

Besides using an actionListener method expression binding of a command component to dismiss a popup by sending a script fragment to the client, another approach is to create action listeners that do the same. These action listeners can attach in a declarative fashion to command components using the f:actionListener tag.

...
...
<af:commandButton textAndAccessKey="#{viewcontrollerBundle.SAVE_AND_CLOSE}"
                  id="saveACBtn1"
                  shortDesc="#{viewcontrollerBundle.SAVE_AND_CLOSE}"
                  immediate="false" partialSubmit="true"
                  actionListener="#{bindings.Commit.execute}"
                  text="Save and Close">
  <f:actionListener type="view.PopupDismissActionListener"/>
</af:commandButton>
<af:commandButton textAndAccessKey="#{viewcontrollerBundle.CANCEL}"
                  id="cancelBtn1"
                  shortDesc="#{viewcontrollerBundle.CANCEL}"
                  immediate="true"
                  actionListener="#{bindings.Rollback.execute}"
                  text="Cancel" partialSubmit="true">
  <f:actionListener type="view.PopupCancelActionListener"/>
</af:commandButton>
...
...
public class PopupDismissActionListener implements ActionListener
{
  private UIComponent _findPopup(UIComponent component)
  {
    if (component == null)
      return null;

    if (component instanceof RichPopup)
      return component;

    return _findPopup(component.getParent());
  }
  private boolean _hasGlobalErrors(FacesContext context)
  {
    Iterator<FacesMessage> mi = context.getMessages(null);
    while (mi.hasNext())
    {
      FacesMessage fmsg = mi.next();
      if (fmsg.getSeverity().equals(FacesMessage.SEVERITY_ERROR) ||
          fmsg.getSeverity().equals(FacesMessage.SEVERITY_FATAL))
      {
        return true;
      }
    }
    return false;
  }
  private boolean _hasComponentErrors(FacesContext context,
                                      UIComponent component)
  {
    String clientId = component.getClientId(context);
    System.out.println(clientId);
    Iterator<FacesMessage> mi = context.getMessages(clientId);
    while (mi.hasNext())
    {
      FacesMessage fmsg = mi.next();
      if (fmsg.getSeverity().equals(FacesMessage.SEVERITY_ERROR) ||
          fmsg.getSeverity().equals(FacesMessage.SEVERITY_FATAL))
      {
        return true;
      }
    }
    for (UIComponent child: component.getChildren())
    {
      if (_hasComponentErrors(context, child))
      {
        return true;
      }
    }
    return false;
  }
  private boolean _hidePopup(FacesContext context, UIComponent popup)
  {
    return !_hasGlobalErrors(context) &&
      !_hasComponentErrors(context, popup);
  }
  public void processAction(ActionEvent event)
    throws AbortProcessingException
  {
    FacesContext context = FacesContext.getCurrentInstance();
    UIComponent source = (UIComponent) event.getSource();
    UIComponent popup = _findPopup(source);
    if (_hidePopup(context, popup))
    {
      popup.hide();
    }
    else
    {
      StringBuilder script = new StringBuilder();
      script.append("AdfPage.PAGE.showMessages();");
      ExtendedRenderKitService erks =
        Service.getService(context.getRenderKit(),
                           ExtendedRenderKitService.class);
      erks.addScript(context, script.toString());
    }
  }
}
...
...
public class PopupCancelActionListener implements ActionListener
{
  ...
  ...
  public void processAction(ActionEvent event)
    throws AbortProcessingException
  {
    FacesContext context = FacesContext.getCurrentInstance();
    UIComponent source = (UIComponent) event.getSource();
    UIComponent popup = _findPopup(source);
    popup.cancel();
  }
}
   

Another common misunderstanding with inline dialogs is that they do not automatically reset submitted values. If you have created custom dialog buttons and dismiss the dialog with validation errors, the previous submitted errors will be displayed on subsequent showings if the page has not be refreshed. To solve this problem use the af:resetActionListener. This listener will reset all input components within the form. To reset the input components within the popup only, consider developing a custom action listener.

<af:commandButton id="cancel" text="Cancel" immediate="true">
  <f:actionListener type="view.ResetPopupActionListener"/>
</af:commandButton>
...
...   
public class ResetPopupActionListener
  implements ActionListener
{
  private UIComponent _findPopup(UIComponent component)
  {
    if (component == null)
      return null;

    if (component instanceof RichPopup)
      return component;

    return _findPopup(component.getParent());
  }
  public void processAction(ActionEvent event)
    throws AbortProcessingException
  {
    UIComponent source = (UIComponent) event.getSource();
    UIComponent popup = _findPopup(source);
    _resetChildren(popup);

  }
  private void _resetChildren(UIComponent comp)
  {
    Iterator<UIComponent> kids = comp.getFacetsAndChildren();

    while (kids.hasNext())
    {
      UIComponent kid = kids.next();

      if (kid instanceof UIXEditableValue)
      {
        ((UIXEditableValue) kid).resetValue();
        RequestContext.getCurrentInstance().addPartialTarget(kid);
      }
      else if (kid instanceof EditableValueHolder)
      {
        _resetEditableValueHolder((EditableValueHolder) kid);
        RequestContext.getCurrentInstance().addPartialTarget(kid);
      }
      else if (kid instanceof UIXCollection)
      {
        ((UIXCollection) kid).resetStampState();
        RequestContext.getCurrentInstance().addPartialTarget(kid);
      }

      _resetChildren(kid);
    }
  }
  private void _resetEditableValueHolder(EditableValueHolder evh)
  {
    evh.setValue(null);
    evh.setSubmittedValue(null);
    evh.setLocalValueSet(false);
    evh.setValid(true);
  }
}
   

Another common misunderstanding with custom cancel dialog buttons is they it will not discard values like the pre-configured cancel button using the dialog's type property. This is because the pre-configured cancel button doesn't send a dialog event to the server so the input values contained within the dialogs content will not be applied. A custom cancel button should have the immediate property set to true or programmatically discard any unwanted state applied to the model.

Understanding Cancel/Close Dismissal

The dialog's cancel button, Esc key, and close icon all raise a client only dialog event with a "cancel" outcome. 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.

<af:popup>
  <af:dialog modal="true">
    <af:panelGroupLayout>
    <af:selectManyListbox value="bean">
      <af:selectItem label="coffee" value="bean" shortDesc="Coffee from Kona"/>
      <f:selectItem itemLabel="tea" itemValue="leaf" itemDescription="Tea from China"/>
      <af:selectItem disabled="true" label="orange juice" value="orange"/>
      <f:selectItem itemDisabled="true" itemLabel="wine" itemValue="grape"/>
      <af:selectItem label="milk" value="moo"/>
    </af:selectManyListbox>
    </af:panelGroupLayout>
  </af:dialog>
</af:popup>
   

Events

Supported Facets

Attributes