14 Replies Latest reply on May 3, 2013 6:01 PM by moe

    RF4.1: bug with popupPanel not centralized

    edilmar

      Hi,

       

      My environment: NetBeans7.1 + GlassFish 3.1.1 + CDI/Weld + JSF2 + RichFaces4.1.

       

      I made a sample code to ilustrated the problem with popupPanel, that at first time appears centralized. From the second time to ever, RichFaces puts the popupPanel in a crazy position at more and less right and botton corner of the navigator. I tested in Firefox10, Chrome16 and IE9.

       

      teste.xhtml:

       

       

      <h:form id="formCad">

          <a4j:commandButton id="buttonPanel" value="Open"

                                                  render="openGrid"

                                                  action="#{t.openPanel}"

                                                  oncomplete="#{rich:component('openPanel')}.show();"/>

          <rich:popupPanel header="A Panel" id="openPanel" width="600" height="300" domElementAttachment="parent">

              <rich:panel style="width:100%;height:100%" id="openGrid">

                  <h:outputText value="Test Panel" />

                  <a4j:commandButton value="Close Panel" onclick="#{rich:component('openPanel')}.hide(); return false;" />

              </rich:panel>

          </rich:popupPanel>

      </h:form>

       

      TesteController.java:

       

      @Named(value="t")

      @ConversationScoped

      public class TesteController implements Serializable {

        public String openPanel() {

          return null;

        }

        • 1. Re: RF4.1: bug with popupPanel not centralized
          pvito

          Hi, Edilmar

           

          Try set domElementAttachment="form"

           

          It's work for me.

           

          Regards, Vitaliy

          • 2. Re: RF4.1: bug with popupPanel not centralized
            edilmar

            Hi,

             

            For a simple popupPanel with a button to just hide it, that works, like sample code that I put above.

            However, I have the following situation: my panel has some fields + a4j:commandButton to process something and return to main window.

             

             

            <rich:popupPanel header="Receber Conta" id="receberPanel" width="800" height="300" domElementAttachment="form">

              ... // some fields

               <a4j:commandButton value="OK" action="#{baixaContasReceberFil.receber}"

                 render="receberMessages,tituloTotais,tabledup,tabletransacao" execute="receberPanel"

                 oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('receberPanel')}.hide();}" />

            </rich:popupPanel>

             

            If I use "form", the a4j:commandButton becomes processing the AJAX and doesn't run the oncomplete method to hide the form.

            If I use "parent", all works fine. Is this a bug in popupPanel + a4j:commandButton combination?

            • 3. Re: RF4.1: bug with popupPanel not centralized
              edilmar

              I tried to change the code from a4j:commandButton to h:commandButton + a4j:jsFunction, like this:

               

               

              <h:commandButton value="OK" onclick="jsInicializarTicados();">

                <a4j:jsFunction name="jsInicializarTicados" actionListener="#{baixaContasPagarFil.inicializarTicados}"

                                render="inicializarTicadosMessages,tituloTotais,tabledup,inicializarTicadosPanel" execute="inicializarTicadosPanel"

                                oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('inicializarTicadosPanel')}.hide();}"/>

              </h:commandButton>

               

              This way was worse, because it arises Null Pointer very fast, I think because facesContext is null at this moment.

              • 4. Re: RF4.1: bug with popupPanel not centralized
                jamesc1

                I encountered this problem as well.

                 

                I discovered that there is a bug report currently opened on this issue.

                 

                https://issues.jboss.org/browse/RF-11736

                 

                This is my current work around for the problem.

                 

                I included a jquery function which will center an element to the screen.

                 

                jQuery.fn.center = function () {

                    this.css("position","absolute");
                   
                this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
                   
                this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
                   
                return this;
                }


                Taken from http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen

                 

                 

                I then put the following javascript into my buttons oncomplete attribute RichFaces.$('myForm:myPopup').getContentElement().center()

                 

                Using your button I would then make it

                 

                <a4j:commandButton id="buttonPanel" value="Open"

                                                            render="openGrid"

                                                            action="#{t.openPanel}"

                                                            oncomplete="#{rich:component('openPanel')}.show(); RichFaces.$('formCad:openPanel').getContentElement().center()"/>

                 

                I tried putting the call into the popPanels onbeforeshow event attribute but I failed to get it to work there.  Hope this works for you.  If anyone finds a cleaner or better way please post it.

                 

                Message was edited by: James C Trying to get some code formatting but I am failing.

                • 5. Re: RF4.1: bug with popupPanel not centralized
                  bleathem

                  Thanks James, I've updated the jira issue with your workaround.  We'll see if we can get this addressed in 4.3, or perhaps in a 4.2.2 release.

                  • 6. Re: RF4.1: bug with popupPanel not centralized
                    mahi

                    Hi All

                         I have found the solution for this problem , even i have faced same issue with project ,then after googling a lot i have found out the solution in rich faces

                       

                       http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=hashParam&skin=blueSky

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"

                        xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"

                        xmlns:rich="http://richfaces.org/rich">

                     

                        <rich:popupPanel id="pp" resizeable="true" header="Popup panel shown using rich:componentControl and rich:hashParam">

                            <f:facet name="controls">

                                <h:outputLink value="#" onclick="#{rich:component('pp')}.hide(); return false;">

                                    X

                                </h:outputLink>

                            </f:facet>

                            <h:outputText value="Settings applied by hashParam tag:" />

                            <h:panelGrid columns="2">

                                <h:outputText value="Width:" />

                                <h:outputText value="500" />

                                <h:outputText value="Height:" />

                                <h:outputText value="300" />

                                <h:outputText value="minWidth:" />

                                <h:outputText value="300" />

                                <h:outputText value="minHeight:" />

                                <h:outputText value="150" />

                            </h:panelGrid>

                            <p>The panel is getting centered by using:</p>

                     

                            <p>&lt;a4j:param noEscape="true" name="left" value="(window.width/2)-250"/&gt;</p>

                     

                            <p>&lt;a4j:param noEscape="true" name="top" value="(window.height/2)-150"/&gt;</p>

                            <fieldset>

                                <legend>

                                    <b>NOTE:</b>

                                </legend>

                                <p>Notice that the show() api method requires an event parameter to be first according to signature. So we

                                    passed it before the hashParam.</p>

                            </fieldset>

                        </rich:popupPanel>

                     

                        <h:commandButton value="Show popup">

                            <rich:componentControl target="pp" operation="show">

                                <a4j:param noEscape="true" value="event" />

                                <rich:hashParam>

                                    <f:param name="width" value="500" />

                                    <f:param name="height" value="300" />

                                    <f:param name="minWidth" value="300" />

                                    <f:param name="minHeight" value="150" />

                                    <a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />

                                    <a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />

                                </rich:hashParam>

                            </rich:componentControl>

                        </h:commandButton>

                     

                    </ui:composition>

                     

                     

                    we need to pass the height and width parameters as hashparams to the popup screen . Please see the code which i have posted ,then surley you will understand.

                    • 7. Re: RF4.1: bug with popupPanel not centralized
                      edilmar

                      Hi,

                       

                      I was in a big project and just today I got to test.

                      The problem continues the same after change to the code from Showcase.

                      The "secret" is that Showcase doesn't use this:

                        domElementAttachment="parent"

                      but my code need to work other things.

                      And I tested today in Richfaces 4.1.1 and 4.2.2, the bug continues.

                      Waiting for 4.3...

                      • 8. Re: RF4.1: bug with popupPanel not centralized
                        jamesc1

                        Have you tried it on the simple example that you gave in the original post?

                         

                        I have tried using the javascript and Mahendher's hashParam fix and its mostly working with the code you provided at the start.  I say mostly working because both center the popup on the screen, however, there is a small display problem with the bottom edge of the front panel and the drop shadow.  Seeing the exact same thing with both fixes.

                         

                        Perhaps we can narrow down the problem a bit depending on whether or not it is working on the simplified example.

                        • 9. Re: RF4.1: bug with popupPanel not centralized
                          edilmar

                          Hi,

                           

                          I changed my code to use domElementAttachment="form" and all worked fine in 4.2.2 in the simple test!

                          However, I have a popupPanel that does this in a button:

                           

                                      <a4j:commandButton value="OK" action="#{baixaContasPagarFil.inicializarTicados}"
                                                         render="inicializarTicadosMessages,tituloTotais,tabledup,inicializarTicadosPanel" execute="inicializarTicadosPanel"
                                                         oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('inicializarTicadosPanel')}.hide();}" />

                           

                          The render and execute commands work fine.

                          But oncomplete doesn't hide the popupPanel.

                          This is how the browser becomes:

                           

                          popupPanelTravado.jpeg

                           

                          I think there is a problem with "popupPanel using form" x "a4j:status".

                           

                          My status is here: <a4j:status onstart="#{rich:component('splash')}.show()" onstop="#{rich:component('splash')}.hide()" />

                           

                          If I use "parent", there is no problem with status, just the problem that doesn't center the popupPanel after first interaction.

                          • 10. Re: RF4.1: bug with popupPanel not centralized
                            edilmar

                            I also tried the workaround from James C. using jQuery.fn.center + the change in a4j:commandButton to do "show+center" into "oncomplete".

                            Again the problem with a4j:status, but now the popupPanel isn't show. The problem in the post above was in close of popupPanel process.

                            Here the image to show this:

                            popupPanelTravado2.jpeg

                            • 11. Re: RF4.1: bug with popupPanel not centralized
                              rdbatistil

                              I came out a clean work around on this issue by reading the RF documentation

                               

                              Step 1: UI - XHTML Page

                               

                              <a4j:commandLink render="winPopId" execute="@this" actionListener="#{mBean.showWinData}"

                                                       oncomplete="openPopWindow(#{rich:component('winPopId')});"><span>Open Window</span></a4j:commandLink>

                               

                               

                               

                              Step 2: Javascript

                               

                              /*

                              http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Panels.html#sect-Component_Reference-richpopupPanel-Size_and_positioning

                              Section: 9.4.7. JavaScript API

                              getTop() - Return the top co-ordinate for the position of the pop-up panel.

                              getLeft() - Return the left co-ordinate for the position of the pop-up panel.

                              moveTo(top,left) - Move the pop-up panel to the co-ordinates specified with the top and left parameters.

                              */

                               

                              var winTopV = 0;

                              var winLeftV = 0;

                               

                              function openPopWindow(popWx) {

                               

                                  popWx.show();

                                  setWinCoor(popWx.getTop(), popWx.getLeft());

                                  popWx.moveTo(winTopV, winLeftV);

                              }   

                               

                              function setWinCoor(topV,leftV) {

                                 if (winTopV == 0) {

                                    winTopV = topV;

                                 }

                               

                                 if (winLeftV == 0) {

                                    winLeftV = leftV;

                                 }

                              }

                              • 12. Re: RF4.1: bug with popupPanel not centralized
                                edilmar

                                It didn't work too.

                                This is really a bug with popupPanel (domElementAttachment="parent").

                                • 13. Re: RF4.1: bug with popupPanel not centralized
                                  rdbatistil

                                  I'm suprise it did'nt work for you as I'm also using domElementAttachment="parent" property setting.

                                   

                                  The moveTo(top,left) api function is not dependent I suppose on domElementAttachment property as it work for me perfectly.

                                  The concept on my workaround is to save the original coordinate position the first time you open the window which correctly center the object.

                                  The bug here is when you close and open it again that's where it alters and misplace the center coordinate.

                                   

                                  Make an alert on getTop() and getLeft() to see the coordinate changes. Hope this helps.

                                  1 of 1 people found this helpful
                                  • 14. Re: RF4.1: bug with popupPanel not centralized
                                    moe

                                    Thank you Rulix, you make my day!