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

Unknown said…
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.
kalyana raman said…
Hi Jobinesh,
Thanks for your post. Think this might solve my issue. But here i am getting error while using AdfAgent.AGENT, AdfPage.PAGE, AdfRichPopup.HINT_LAUNCH_ID, etc. Do we want to import any of the packages over here to use this. Please help me to fix this. Thanks in advance.

Disclaimer

The views expressed on this blog are my own and do not necessarily reflect the views of my employer.