ADF UI - How the default focus is set to popup dialog buttons?

When we use popup dialogs, we want to set default focus on one of the dialog's buttons as we want to navigate or execute some logic on pressing 'Enter' without loosing focus. But many of us not aware how to do that (at least I until sometime back). First, if you set 'type' (e.g., yesNo, okCancel, ok, cancel, yesNoCancel, etc.)of the af:dialog to specify the buttons you want to display, then you're safe. Because ADF framework will automatically set default focus to either 'OK' or 'Yes' button for yesNo, okCancel, ok, yesNoCancel types and to 'Cancel' button if the type is 'cancel'.

But, if you added your own buttons to the dialog buttonbar by specifying 'type' of the popup as 'none', then please note that you can't set default focus to any of these custom buttons. So, first you need to find why you require a custom button instead of the popup's default buttons by specifying 'type' attribute. You can always override the default 'OK' or 'Yes' button labels by setting 'AffirmativeTextAndAccessKey' and similarly 'No' and 'Cancel' button labels by specifying values for 'NoTextAndAccessKey' and 'CancelTextAndAccessKey' attributes. If your requirement is more than a label, like to have multiple actions in popup by specifying multiple buttons, then you need to consider adding additional buttons along with default buttons that comes by specifying the 'type' attribute for the dialog. If you just use the custom buttons only, then the default focus will be on the close(X) icon at the top right corner of the popup. That means, if you press 'Enter', the popup will be closed as the focus is on close icon.

If you want to execute some logic on pressing the default dialog buttons, you need to write the dialog listener. Similarly, if you need to do some processing on pressing the custom button that you added in the dialog buttonbar, you need to write actionlistener for the button. If you use both default buttons as well as custom buttons, you would require both dialoglistener and actionlistener.

Sample dialog listener code for dialog type 'yesNoCancel':

    public void sampleDialogListener(DialogEvent dialogEvent) {
        if ("yes".equals(dialogEvent.getOutcome())) {
            ADFUtil.invokeEL("#{bindings.Commit.execute}");
            FacesContext context = FacesContext.getCurrentInstance();
            context.getApplication().getNavigationHandler().handleNavigation(context,
                                                                             null,
                                                                             "submit");
        } else if ("no".equals(dialogEvent.getOutcome())) {
            ADFUtil.invokeEL("#{bindings.Rollback.execute}");
            FacesContext context = FacesContext.getCurrentInstance();
            context.getApplication().getNavigationHandler().handleNavigation(context,
                                                                             null,
                                                                             "noAction");
        } else if ("cancel".equals(dialogEvent.getOutcome())) {
            FacesContext context = FacesContext.getCurrentInstance();
            context.getApplication().getNavigationHandler().handleNavigation(context,
                                                                             null,
                                                                             "cancel");
        }

So, the moral of the story is if you just use custom buttons and specify 'none' for type attribute of af:dialog, you won't be able to set focus to any of those buttons. If you use at least button by specifying 'type' to other than 'none', then the focus will be set to the most obvious button among the displayed buttons based on the specified 'type' attribute.

ADF UI - Different ways of invoking or displayinig popup declaratively

To know how to invoke a popup in various ways, please refer to the document on af:popup here. I've created a sample application that demonstrates how to invoke the popup declaratively for different purposes like showing a model popup, displaying note window or panel window, or tooltip text, or menu items, etc. You can download the sample application from here. It's self explanatory.

Below are some sample screen shots.

Enjoy!

ADF UI - PopupUtil class to show or hide ADF popup programmatically

After ADFUtil class, we need another util class PopupUtil that contains the methods to show/hide ADF popup. Here, I'm including the source of this java file so that it can be handy when needed.

package com.mpapana.common.util.bean;

import javax.faces.context.FacesContext;

import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;


/**
 * Patterns Utility class for public use.
 */
public class PopupUtil
{
  /**
   * Shows the specified popup component and its contents
   * @param popupId is the clientId of the popup to be shown
   * clientId is derived from backing bean for the af:popup using getClientId method
   */
  public static void invokePopup(String popupId)
  {
    invokePopup(popupId, null, null);
  }

  /**
   * Shows the specified popup and uses the specified hints to align the popup.
   * @param popupId is the clientId of the popup to be shown - clientId is derived from backing bean for the af:popup using getClientId method
   * @param align is a hint for the popup display. Check AdfRichPopup js javadoc for valid values. Supported value includes: "AdfRichPopup.ALIGN_START_AFTER", "AdfRichPopup.ALIGN_BEFORE_START" and "AdfRichPopup.ALIGN_END_BEFORE"
   * @param alignId is the clientId of the component the popup should align to - clientId is derived from backing bean for the component using getClientId method
   * align and alignId need to be specified together - specifying null for either of them will have no effect.
   */
  public static void invokePopup(String popupId, String align,
                                 String alignId)
  {
    if (popupId != null)
    {
      ExtendedRenderKitService service =
        Service.getRenderKitService(FacesContext.getCurrentInstance(),
                                    ExtendedRenderKitService.class);

      StringBuffer showPopup = new StringBuffer();
      showPopup.append("var hints = new Object();");
      //Add hints only if specified - see javadoc for AdfRichPopup js for details on valid values and behavior
      if (align != null && alignId != null)
      {
        showPopup.append("hints[AdfRichPopup.HINT_ALIGN] = " + align +
                         ";");
        showPopup.append("hints[AdfRichPopup.HINT_ALIGN_ID] ='" + alignId +
                         "';");
      }
      showPopup.append("var popupObj=AdfPage.PAGE.findComponent('" +
                       popupId + "'); popupObj.show(hints);");
      service.addScript(FacesContext.getCurrentInstance(),
                        showPopup.toString());
    }
  }

  /**
   * Hides the specified popup.
   * @param popupId is the clientId of the popup to be hidden
   * clientId is derived from backing bean for the af:popup using getClientId method
   */
  public static void hidePopup(String popupId)
  {
    if (popupId != null)
    {
      ExtendedRenderKitService service =
        Service.getRenderKitService(FacesContext.getCurrentInstance(),
                                    ExtendedRenderKitService.class);

      String hidePopup =
        "var popupObj=AdfPage.PAGE.findComponent('" + popupId +
        "'); popupObj.hide();";
      service.addScript(FacesContext.getCurrentInstance(), hidePopup);
    }
  }

  /*
  public static void hideDynamicGlobalPopup(ActionEvent actionEvent)
  {
    FacesContext fc = FacesContext.getCurrentInstance();

    ExpressionFactory ef = fc.getApplication().getExpressionFactory();
    String swapEmptyTaskFlow = "#{bindings.swapEmptyTaskFlow.execute}";
    MethodExpression me =
      ef.createMethodExpression(fc.getELContext(), swapEmptyTaskFlow,
                                String.class, new Class[]{ActionEvent.class});
    me.invoke(fc.getELContext(), new Object[] {actionEvent});

    if (actionEvent != null)
    {
      UIComponent source = (UIComponent)actionEvent.getSource();
      UIComponent popup = PatternsUtil.getParentByType(source,RichPopup.class);
      String popupId = popup.getClientId(fc);
      PatternsPublicUtil.hidePopup(popupId);     
    }
  }*/
}

Sample Usages:

i. Displaying the af:popup programmatically

import com.mpapana.bean.util.PopupUtil;
public class ExampleBean {
    private RichPopup confirmationPopup;
    public void sampleMethod(ActionEvent actionEvent) { 
      PopupUtil.invokePopup(confirmationPopup.getClientId(FacesContext.getCurrentInstance()));
    }
}

ii. Hiding the af:popup programmatically

import com.mpapana.bean.util.PopupUtil;
public class ExampleBean {
    private RichPopup confirmationPopup;
    public void sampleMethod(ActionEvent actionEvent) { 
       PopupUtil.hidePopup(confirmationPopup.getClientId(FacesContext.getCurrentInstance()));
    }
}

In the above code, the popup 'confirmationPopup' is a binding for af:popup in jsff page (popup code jsff page below).

 <af:popup id="p1"
              binding="#{pageFlowScope.ExampleBean.confirmationPopup}">
      <af:dialog id="d1" type="ok" title="Confirmation"
                 inlineStyle="width:340px; height:125.0px;"
                 dialogListener="#{pageFlowScope.ExampleBean.confirmationDialog}">
        <af:panelGroupLayout id="pgl2">
          <af:outputText value="#{bundle.THE_DETAILS_HAVE_BEEN_SAVED}"
                         id="ot1"/>
        </af:panelGroupLayout>
      </af:dialog>
    </af:popup>

On calling invokePopup() or hidePopup() methods, this popup will be shown or hidden respectively.