13 Replies Latest reply on May 10, 2007 9:12 AM by jgreene

    Strange behavior of <rich:panel... tag

    jgreene

      I'm using RichFaces in a small app with Facelets. I've got a layout.xhtml and a facelets page to "define" my "insert"s. In my layout page, I'm using <h:panelGrid... tags to section off my layout. One particular panelGrid defines 2 columns. Right now, I put only default text ("Default Data Tree") in the first column, and I actually define the content for the second column in my facelets page. Here's the snippet in my layout page:

      <h:panelGrid border="1" columns="2" style="height: 480px;" width="100%" columnClasses="navcol,mapcol">
      <ui:insert name="navigation" >
      Default Data Tree
      </ui:insert>
      <ui:insert name="myContent">Main Content</ui:insert>
      </h:panelGrid>

      The content for this second column is based on a <rich:panel... component. It has a suggestionbox and some other basic form fields and labels. Strangely, when the page displays, the second column of the panelGrid is empty, and the content defined in the facelets page is displayed in the first column of a second panelGrid row, which shouldn't even exist. If I define a simple <h:commandLink... tag or something to display instead of the <rich:panel... component, the link displays just fine in the second column of the ONLY panelGrid row. Has anyone ever seen this before? Any help would be appreciated.

        • 1. Re: Strange behavior of <rich:panel... tag

          Do you use RichFaces 3.0.0 ? If so, try 3.0.1 snapshot (with Ajax4jsf 1.1.1 snapshot)

          • 2. Re: Strange behavior of <rich:panel... tag
            jgreene

            Hi Sergey -
            I'm using the following versions for ajax4jsf and RichFaces:

            ajax4jsf-1.1.1-20070328.231031-16
            richfaces-3.0.1-20070329.000337-19

            • 3. Re: Strange behavior of <rich:panel... tag
              jgreene

              Hi Sergey -
              I'm using the following versions for ajax4jsf and RichFaces:

              ajax4jsf-1.1.1-20070328.231031-16
              richfaces-3.0.1-20070329.000337-19

              • 4. Re: Strange behavior of <rich:panel... tag
                jgreene

                Sergey -
                I downloaded the latest snapshots, and I still have the problem. An extra panelGrid row is created, and the 2nd piece of content is put into the 1st column of the 2nd row, instead of in the 2nd column of what is supposed to be the ONLY row.

                - Joe

                • 5. Re: Strange behavior of <rich:panel... tag

                  try to more the suggestion box out of the panelGrid. There is not reason to keep input field and suggestionbox close to each other.

                  • 6. Re: Strange behavior of <rich:panel... tag
                    jgreene

                    Sergey -
                    Thanks again for the response. But I'm not sure what you mean here. My facelets page (the page with the suggestionbox) has content that is really the <rich:panel... Inside this panel is whatever I need to create a nice little form that contains a header with the suggestionbox, and some form fields with labels. I do indeed use a panelGrid inside this <rich:panel..., but only to provide layout for inside the form. The <rich:panel... and all of its content is inside a <ui:define... facelets component. The panelGrid I assume you are referring to is the panelGrid I use in my layout.xhtml. So how can I remove the suggestionbox from the panelGrid since its not on the same page? And logically, it seems like it should indeed be near its input field, and if moving it away fixed the problem, wouldn't that indicate a rendering bug of some kind?

                    • 7. Re: Strange behavior of <rich:panel... tag
                      jgreene

                      Sergey -
                      Thanks again for the response. But I'm not sure what you mean here. My facelets page contains the suggestionbox, and the panelGrid is on my layout.xhtml template page. So how can I remove the suggestionbox from the panelGrid since its not on the same page? And logically, it seems like it should indeed be near its input field, and if moving it away fixed the problem, wouldn't that indicate a rendering bug of some kind?

                      • 8. Re: Strange behavior of <rich:panel... tag
                        jgreene

                        Sorry about the double posts - we're having intermittent problems with our internet connection here, and I'm not sure my posts are being submitted.

                        • 9. Re: Strange behavior of <rich:panel... tag
                          ilya_shaikovsky

                          Look.. myu sources:

                          template:

                          <!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">
                          
                           <f:loadBundle basename="resources" var="msg" />
                           <head>
                           <title><ui:insert name="pageTitle">Page Title</ui:insert></title>
                           <script>
                           //<![CDATA[
                           A4J.AJAX.onError = function (req,status,message) {
                           alert('Hi');
                           };
                           //]]>
                           </script>
                           <style type="text/css">
                           body {
                           font-family: Verdana, Arial, Helvetica, sans-serif;
                           font-size: 14px;
                           }
                           .header {
                           font-family: Verdana, Arial, Helvetica, sans-serif;
                           font-size: 18px;
                           }
                           .bottom {
                           font-family: Verdana, Arial, Helvetica, sans-serif;
                           font-size: 9px;
                           text-align: center;
                           vertical-align: middle;
                           color: #8E969D;
                           }
                           </style>
                           </head>
                          
                          <body bgcolor="#ffffff" >
                           <h:panelGrid columns="2" border="1">
                           <ui:insert name="pageHeader">Page Header</ui:insert>
                           <ui:insert name="body">Page Body</ui:insert>
                           </h:panelGrid>
                          </body>
                          
                          </html>
                          


                          page:
                          <!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:a4j="https://ajax4jsf.dev.java.net/ajax"
                           xmlns:f="http://java.sun.com/jsf/core"
                           xmlns:h="http://java.sun.com/jsf/html"
                           xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                           xmlns:ui="http://java.sun.com/jsf/facelets">
                           <ui:composition template="/templates/common1.xhtml">
                           <ui:define name="body">
                           <h:form>
                           <h:outputText value="Before Input"></h:outputText>
                           <h:inputText value="#{bean.property}" id="test" size="50"></h:inputText>
                           <h:outputText value="Before Suggestion"></h:outputText>
                           <rich:suggestionbox width="200" height="200" for="test"
                           suggestionAction="#{bean.autocomplete}" var="cap">
                           <h:column>
                           <h:outputText value="#{cap.text}"></h:outputText>
                           </h:column>
                           </rich:suggestionbox>
                           <h:outputText value="After Suggestion"></h:outputText>
                           <a4j:log></a4j:log>
                           </h:form>
                           </ui:define>
                           </ui:composition>
                          </html>
                          


                          So my content all is shown in the second column. May be I miss something in your code? Then post it please.


                          • 10. Re: Strange behavior of <rich:panel... tag
                            jgreene

                            Ok, here's the code. sorry for the mess - I'm just prototyping right now.

                            template page - layout.xhtml:

                            <!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="https://ajax4jsf.dev.java.net/ajax"
                             >
                            <head>
                            <link rel="stylesheet" type="text/css" href="../styles/jmat.css" />
                            </head>
                            
                            <body>
                            <form jsfc="a4j:form" id="layoutForm">
                            <h:panelGroup>
                            
                            
                             <h:panelGrid border="1" columns="2" style="height: 480px;" width="100%" columnClasses="navcol,mapcol">
                             <ui:insert name="navigation" >Default Data Tree</ui:insert>
                             <ui:insert name="map">Main Content</ui:insert>
                             </h:panelGrid>
                            
                            
                            </h:panelGroup>
                            </form>
                            </body>
                            
                            </html>
                            


                            facelets page:
                            <!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="https://ajax4jsf.dev.java.net/ajax"
                             xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                             xmlns:s="http://jboss.com/products/seam/taglib"
                             >
                            
                             <ui:composition template="../templates/layout.xhtml">
                             <ui:define name="map">
                             <rich:panel style="width: 520px;">
                             <f:facet name="header">
                             <h:panelGrid columns="2" border="0" style="width: 100%;">
                             <h:outputText value="Locate an Account" />
                            
                             <h:panelGroup id="searchWidget" style="float: right;">
                             <h:outputLabel for="searchAcctText" value="Search " />
                             <h:inputText value="#{suggestionBox.property}" id="searchAcctText" />
                             <rich:suggestionbox id="suggestionBoxId" for="searchAcctText"
                             tokens=",[" rules="none"
                             suggestionAction="#{suggestionBox.autocomplete}"
                             var="result" fetchValue="#{result.text}"
                             rows="0" first="0" minChars="1" shadowOpacity="4"
                             border="1" width="150" height="200"
                             frequency="0"
                             shadowDepth="4"
                             cellpadding="2" cellspacing="2">
                             <h:column>
                             <h:outputText value="#{result.text}" />
                             </h:column>
                             <a4j:support event="onselect" ajaxSingle="false"
                             action="#{suggestionBox.selectAccount}"
                             reRender="partId,partName,inst,username,password,
                             pwConfirm,pwQuest,pwAnswer,pwChange"/>
                             </rich:suggestionbox>
                            
                             </h:panelGroup>
                             </h:panelGrid>
                             </f:facet>
                            
                             <fieldset>
                             <legend>Account Info</legend>
                             <h:panelGrid columns="2" border="0" style="width: 100%;" columnClasses="col1,col2">
                             <h:outputLabel for="partId" value="System Id:" />
                             <h:outputText value="#{theAcct.partId}" id="partId" />
                            
                             <h:outputLabel for="partName" value="Name:" />
                             <h:outputText value="#{person.partName}" id="partName" />
                            
                             <h:outputLabel for="inst" value="Institution:" />
                             <h:outputText value="#{person.inst}" id="inst" />
                             </h:panelGrid>
                             </fieldset>
                            
                             <rich:spacer width="100%" height="10"/>
                            
                             <fieldset>
                             <legend>Security</legend>
                             <h:panelGroup id="secInfo">
                             <h:panelGrid columns="2" border="0" style="width: 100%;" columnClasses="secInfoCol1,secInfoCol2">
                             <h:outputLabel for="username" value="Username:" />
                             <h:inputText style="width: 120px;" value="#{theAcct.username}" id="username" />
                            
                             <h:outputLabel for="password" value="Password:" />
                             <h:inputSecret style="width: 120px;" value="" id="password" />
                            
                             <h:outputLabel for="pwConfirm" value="Confirm Password:" />
                             <h:inputSecret style="width: 120px;" value="" id="pwConfirm" />
                            
                             <h:outputLabel for="pwQuest" value="Password Question:" />
                             <h:inputText style="width: 300px;" value="#{theAcct.pwQuestion}" id="pwQuest" />
                            
                             <h:outputLabel for="pwAnswer" value="Password Answer:" />
                             <h:inputText style="width: 300px;" value="#{theAcct.pwAnswer}" id="pwAnswer" />
                             </h:panelGrid>
                            
                             <rich:separator height="1"/>
                            
                             <h:panelGroup id="forcePwChange">
                             <h:selectBooleanCheckbox value="#{theAcct.forcePwChange}" id="pwChange" />
                             <h:outputLabel for="pwChange" value="Force Password Change at Next Login" />
                             </h:panelGroup>
                            
                             </h:panelGroup>
                             </fieldset>
                            
                            
                             <rich:spacer width="100%" height="10"/>
                            
                             <h:messages/>
                             <a4j:commandButton action="#{accountManager.save}" value="Save Changes"/>
                            
                             </rich:panel>
                             </ui:define>
                             </ui:composition>
                            </html>
                            


                            • 11. Re: Strange behavior of <rich:panel... tag
                              jgreene

                              Hi all -
                              Ok, I have found the problem with my facelets page. To summarize, a simple 2-column panelGrid that is supposed to have only 1 row was not putting the content in the 2nd column of the first row, but instead was creating a 2nd row, and inserting the content in the 1st column of the second row. The problem appears to be some kind of rendering bug. Here's a summary of the code I had around the <rich:panel... component on the facelets page:

                              <ui:composition template="../templates/layout.xhtml">
                               <ui:define name="map">
                               <!--<form jsfc="a4j:form">-->
                               <rich:panel style="width: 520px;">
                               .
                               .
                               .
                               </rich:panel>
                               <!--</form>-->
                               </ui:define>
                              </ui:composition>
                              


                              Notice the commented <form.. tags. When I actually remove these commented lines so that they are no longer in the file, the page is rendered correctly, with only 1 panelGrid row, and my facelets content appears in the 2nd column of the row like it should.

                              Is this somehow an incorrect usage of comments in a facelets page? I've got a couple other comments elsewhere on the page, and see no other apparent rendering issues. Anyway, does this look like a rendering bug or what?

                              • 12. Re: Strange behavior of <rich:panel... tag
                                ilya_shaikovsky

                                You tell about removing form from facelet page.. but i'm able to see parent one in template page also.. nested forms aren't allowed..
                                B.t.w. but even with nested form unfortunatelly I'm not able to reproduce your behaviour. Probably will be easier to provide us with your war file in such cases.

                                • 13. Re: Strange behavior of <rich:panel... tag
                                  jgreene

                                  Ilya -
                                  Thanks for your response.

                                  I didn't mean to imply that I removed the actual form from the application. I simply removed the commented form tags which were left over from an earlier round of prototyping. I understand I need a form, and that nested forms are not allowed.

                                  This was a funny problem, but since I found it, I'm willing to move on. Apparently, this is not a big issue for the community, and will probably be fixed in another version.

                                  Thanks to everyone else for their interest and responses.