Skip to main content

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.

Popular posts from this blog

How to set Bind Variable Values at runtime ?

In this post I'm sharing a couple of approaches for programmatically setting bind variables values at run time. This post is an attempt to explain 'When to use what ?'[ In case if you are familiar with 'Bind Variables' in ADF BC, please refer Section 5.10, Working with Bind Variables in Fusion Developer's Guide ]

1. Set the Bind Variable value using RowSet::setNamedWhereClauseParam(...)

You can use use the setNamedWhereClauseParam(...) method on the ViewObject interface (which extends oracle.jbo.RowSet) to set the value for bind variables. Please note this sets the value on default RowSet. In other words, this doesn't have any effect on the secondary RowSets that you/system generates.
ViewObject vo = am.findViewObject("EmployeesView1"); vo.setNamedWhereClauseParam("bindVarDeptId", new Number(10)); vo.executeQuery();
2. Set the Bind Variable value using ViewObject's VariableValueManager::setVariableValue(...)

VariableValueManager Ma…

Happy New Year 2018 !

We can't go back and change the beginning, but we always can start where we are and change the ending. Believe in yourself and you will be unstoppable!

Wishing you and your family a very happy new year 2018 !!!