Toper Turor: Positioning popup at the center of the screen

Sunday, June 24, 2018

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 Im 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 >"http://java.sun.com/jsf/core" >"http://>>
 <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>

go to link download

Toper Turor

Sunday, June 24, 2018

Positioning popup at the center of the screen

Positioning popup at the center of the screen

No comments:

Post a Comment