Positioning popup at the center of the screen

-
Sometimes you may want to position af:popup at the center of the screen. At this moment, there is no declarative solution for this usecase. In this post I'm sharing a code snippet that I noticed from Gary Van Matre(Oracle) for the same. This sample uses a Javascript method(showPopupInCenter) for displaying popup relative to an 'empty' af:outputText (kept hidden) whose position is decided dynamically. When invoked, the Javascript method for showing popup position the hidden af:outputText to the center of the window, made it visible(with empty content), and then shows the popup relative to it.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <af:document title="popupsample.jsf" id="d1">
        <af:resource type="javascript">
          function showPopupInCenter(event) {
              var agent = AdfAgent.AGENT;
              var winWidth = agent.getWindowWidth();
              var winHeight = agent.getWindowHeight();
              var phLeft = winWidth / 2 + "px";
              var phTop = winHeight / 2 + "px";

              var page = AdfPage.PAGE;
              var placeHolder = page.findComponent("placeHolder");
              placeHolder.setVisible(true);
              var placeHolderDom = AdfRichUIPeer.
                           getDomElementForComponent(placeHolder);
              placeHolderDom.style.zIndex = 2;
              placeHolderDom.style.position = "fixed";
              placeHolderDom.style.top = phTop;
              placeHolderDom.style.left = phLeft;

              var popup = AdfPage.PAGE.
                              findComponentByAbsoluteId("p1");

              var hints = {};
              hints[AdfRichPopup.HINT_LAUNCH_ID] = placeHolder.
                                                  getClientId();
              hints[AdfRichPopup.HINT_ALIGN_ID] = placeHolder.
                                                  getClientId();
              hints[AdfRichPopup.HINT_ALIGN] = AdfRichPopup.
                                               ALIGN_AFTER_START;

              popup.show(hints);
          }

          function popupClosed(event) {
              var placeHolder = page.findComponent("placeHolder");
              placeHolder.setVisible(false);
          }
        </af:resource>
        <af:form id="f1">
            <af:commandButton text="Show Popup" id="btn1" 
               partialSubmit="true">
                <af:clientListener type="click" 
                  method="showPopupInCenter"/>
            </af:commandButton>
            <af:popup id="p1" contentDelivery="immediate">
                <af:clientListener method="popupClosed" 
                   type="popupClosed"/>
                <af:dialog id="d2">
                    <f:facet name="buttonBar"/>
                    A simple popup
                </af:dialog>
            </af:popup>
            <af:outputText id="placeHolder" value=" " 
                    visible="false" 
                    clientComponent="true"/>
        </af:form>
    </af:document>
</f:view>

Comments

  1. UnknownApril 23, 2014 at 1:53 AM

    Hi Jobinesh - thanks for your article, I appreciate, and you have helped me solve my issue. As the options still allow you only to align with a particular method such as 'AFTER_START' etc, the centering of my popup was still an issue. I ended up subtracting the width's and heights / 2 for the Left and Top variable calcs. I will work on making this dynamic based upon the popup size.

    ReplyDelete

Post a Comment