8 Replies Latest reply on Jul 12, 2012 5:59 PM by deiver2005

    popupPanel problem

    snaker

      i have a rich:toolbar in my page, and a popupPanel from login, the problem is, if i move the popup where is the toolbar, the popup is under the toolbar, also i can click the links of the toolbar. it musn't  can click the links. look the photo.

      I try put the attribute movable to false, but i can to move it!!!

       

       

       

        • 1. popupPanel problem
          ilya_shaikovsky

          show your code and also specify RF version.

          • 2. popupPanel problem
            snaker

            Ok, i resolved the problem, i use richfaces 4 cr1.

            The problem was that the styleclass of the popup have z-index:100, i only modify the z-index of the toolbar

            • 3. Re: popupPanel problem
              deiver2005

              HI, i have a big problem with a popupPanel, I'm using richFaces 4.0 and JSF2.0, I'm trying with the code in the Jboss comunitty example, but it doesn't works...when I click the button, the popup shows as a image and not as a popup.

              error.png

              please.. helpme.. this is the code: http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&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">
                  <ui:composition template="/view/template/home.xhtml">
                      <ui:define name="title">Validación de Direcciones Online</ui:define>
                      <ui:define name="message"> #{validarDirUnoAUnoMBean.message}</ui:define>
                      <ui:define name="content">
                          <h:commandButton value="Call the popup">
                              <rich:componentControl target="popup" operation="show" />
                          </h:commandButton>
                          <rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
                              <f:facet name="header">
                                  <h:outputText value="Simple popup panel" />
                              </f:facet>
                              <f:facet name="controls">
                                  <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">
                                      X
                                  </h:outputLink>
                              </f:facet>
                              <p>Any content might be inside this panel.</p>
                              <p>             The popup panel is open and closed from the javascript function of component client side object. The following code            
                                  <a href="#" onclick="#{rich:component('popup')}.hide()">hide this panel</a>:
                                  <f:verbatim>&#35;</f:verbatim>{rich:component('popup')}.hide()         </p>
                          </rich:popupPanel>
                      </ui:define>
                  </ui:composition>
              </ui:composition>

              • 4. Re: popupPanel problem
                anil_vunnava

                hi try with this code

                 

                <!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"

                                template="/view/template/home.xhtml">

                        <ui:define name="title">Validación de Direcciones Online</ui:define>

                        <ui:define name="message"> #{validarDirUnoAUnoMBean.message}</ui:define>

                        <ui:define name="content">

                           <a4j:commandButton value="Call the popup" onclick="#{rich:component('popup')}.show()"/>

                            <rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">

                                <f:facet name="header">

                                    <h:outputText value="Simple popup panel" />

                                </f:facet>

                                <f:facet name="controls">

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

                                        X

                                    </h:outputLink>

                                </f:facet>

                                <p>Any content might be inside this panel.</p>

                                <p>             The popup panel is open and closed from the javascript function of component client side object. The following code            

                                    <a href="#" onclick="#{rich:component('popup')}.hide()">hide this panel</a>:

                                    <f:verbatim>&#35;</f:verbatim>{rich:component('popup')}.hide()         </p>

                            </rich:popupPanel>

                        </ui:define>

                </ui:composition>

                • 5. Re: popupPanel problem
                  deiver2005

                  Hi Anil,

                   

                  Thank you for your reply...

                   

                  I tried with the code, but it doesn't work ... the popup window is displayed still as a image... and when I click the "x", the image is hidden... just like it should works...

                   

                  PS: I'm working with WebLogic server 10.3 and Java 1.6

                   

                  Please.. help me!!!

                   

                  • 6. Re: popupPanel problem
                    anil_vunnava

                    I'm posting the code here for u'r reference which works fine for me

                     

                    WEB-INF/view/template/home.xhtml

                     

                    <?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">

                    <html xmlns="http://www.w3.org/1999/xhtml"

                      xmlns:ui="http://java.sun.com/jsf/facelets"

                      xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:f="http://java.sun.com/jsf/core"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:rich="http://richfaces.org/rich" xml:lang="en" lang="en">

                    <h:head>

                      <ui:insert name="title" />

                    </h:head>

                    <body>

                      <h:form>

                       <ui:insert name="message" />

                      <ui:insert name="content" />

                      </h:form>

                    </body>

                    </html>

                     

                    and the sample.xhtml page

                     

                    <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">

                      <ui:composition template="/view/template/home.xhtml">

                      <ui:define name="title">Validación de Direcciones Online</ui:define>

                      <ui:define name="message"> #{validarDirUnoAUnoMBean.message}</ui:define>

                      <ui:define name="content">

                      <h:commandButton value="Call the popup">

                      <rich:componentControl target="popup" operation="show" />

                      </h:commandButton>

                      <rich:popupPanel id="popup" modal="false" autosized="true"

                      resizeable="false">

                      <f:facet name="header">

                      <h:outputText value="Simple popup panel" />

                      </f:facet>

                      <f:facet name="controls">

                      <h:outputLink value="#"

                      onclick="#{rich:component('popup')}.hide(); return false;">

                                            X

                                        </h:outputLink>

                      </f:facet>

                      <p>Any content might be inside this panel.</p>

                      <p>

                      The popup panel is open and closed from the javascript function of

                      component client side object. The following code <a href="#"

                      onclick="#{rich:component('popup')}.hide()">hide this panel</a>:

                      <f:verbatim>&#35;</f:verbatim>

                      {rich:component('popup')}.hide()

                      </p>

                      </rich:popupPanel>

                      </ui:define>

                      </ui:composition>

                    </ui:composition>

                     

                    the above code works absolutely fine for me with

                     

                    RF - 4.0.0.Final

                    JSF - 2.1.2

                    WebLogic server 10.3 and Java 1.6.0_24

                    • 7. Re: popupPanel problem
                      deiver2005

                      Hi Anil,

                       

                      You are right ..   it works... the real problem is my template, because if I use it the popup doesn't works.

                      This is the code of my template:

                       

                      <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">    
                         
                      <h:head>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/styles.css" rel="stylesheet" type="text/css" />
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/aplication.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/contenido.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/footer.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/header.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/intro.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/layout.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/masterstyles.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/menu.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/navbar.css" rel="stylesheet" type="text/css"/>
                          <link href="${facesContext.externalContext.requestContextPath}/view/css/titulo_aplicacion.css" rel="stylesheet" type="text/css"/>
                      </h:head>
                         
                      <h:body>

                      <div id="layout">
                      <div id="content">
                          <h:panelGrid id="principal" styleClass="home" columns="1">
                              <h:panelGrid id="lbltittle" styleClass="principaltittle">
                                  <ui:insert name="title">SISTEMA DE DIRECCIONES</ui:insert>
                              </h:panelGrid>
                              <h:panelGrid id="lblmessage" styleClass="message">
                                  <ui:insert name="message"></ui:insert>
                              </h:panelGrid>
                          </h:panelGrid>
                          <h1 style="background-position: center">
                              <ui:insert name="content">
                                  <a href="${facesContext.externalContext.requestContextPath}/view/administracion/multivaluequery.jsf" 
                                     target="mainFrame">Prueba</a>
                              </ui:insert>
                          </h1>
                      </div>
                      <div id="bottom">
                      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bgcolor="#6868AE"  width="100%" >
                      <tr>
                          <td align="center" width="100%" style="font-family: Gill, Helvetica, sans-serif;
                              font-size: 10px;height: 0.7em;background-color:#6868AE;border-collapse: collapse;
                              background-position: center;border-color: #6868AE;top:623px;left:5px;bottom:623px; ">
                              <b>
                                  <font color="#ffffff" style="font-size: 10px; font-family:Gill, Helvetica, sans-serif;
                                       text-align:center;width: 100%;top:623px;left:5px;">Todos los derechos reservados.
                                  </font>
                              </b>
                          </td>
                      </tr>
                      </table>
                      </div>
                      </div>
                      </h:body>
                      </ui:composition>

                       

                       

                      Do you have any idea why it doesn't work... what is wrong in my code? ....

                       

                       

                      Thank you Anil for your time.

                       

                       

                       

                      • 8. Re: popupPanel problem
                        deiver2005

                        Hello community,

                         

                        I need your help, i'm trying to do it and it definitely doesn't works ...

                        When I use my template in this way:

                         

                        <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">    
                           
                        <h:head>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/styles.css" rel="stylesheet" type="text/css" />
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/aplication.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/contenido.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/footer.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/header.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/intro.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/layout.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/masterstyles.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/menu.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/navbar.css" rel="stylesheet" type="text/css"/>
                            <link href="${facesContext.externalContext.requestContextPath}/view/css/titulo_aplicacion.css" rel="stylesheet" type="text/css"/>
                        </h:head>
                           
                        <h:body>

                        <div id="layout">
                        <div id="content">
                            <h:panelGrid id="principal" styleClass="home" columns="1">
                                <h:panelGrid id="lbltittle" styleClass="principaltittle">
                                    <ui:insert name="title">SISTEMA AUTOMATIZACIÓN DE DIRECCIONES</ui:insert>
                                </h:panelGrid>
                                <h:panelGrid id="lblmessage" styleClass="message">
                                    <ui:insert name="message"></ui:insert>
                                </h:panelGrid>
                            </h:panelGrid>
                            <h1 style="background-position: center">
                                <ui:insert name="content">
                                    <a href="${facesContext.externalContext.requestContextPath}/view/administracion/multivaluequery.jsf" 
                                       target="mainFrame">Prueba</a>
                                </ui:insert>
                            </h1>
                        </div>
                        <div id="bottom">
                        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bgcolor="#6868AE"  width="100%" >
                        <tr>
                            <td align="center" width="100%" style="font-family: Gill, Helvetica, sans-serif;
                                font-size: 10px;height: 0.7em;background-color:#2b68aa;border-collapse: collapse;
                                background-position: center;border-color: #2b68aa;top:623px;left:5px;bottom:623px; ">
                                <b>
                                    <font color="#ffffff" style="font-size: 10px; font-family:Gill, Helvetica, sans-serif;
                                         text-align:center;width: 100%;top:623px;left:5px;">Copyright 2011 - TELMEX todos los derechos reservados.
                                    </font>
                                </b>
                            </td>
                        </tr>
                        </table>
                        </div>
                        </div>
                        </h:body>
                        </ui:composition>

                         

                        IT DOESN'T WORKS !!!!

                         

                        Finally when I change the </ui:composition> tag by a <html>, the popUp works ok but then the website styles collapse....... :/

                        please help.

                        it's my template well formed???

                        Thx