4 Replies Latest reply on Oct 23, 2012 12:40 PM by Yoel Kazareski

    Rendering Problem with Richfaces 4

    Hauke Gulich Newbie

      Hello everyone,

       

      I have a strange problem with richfaces 4 I used to have with primefaces as well. Before I blamed primefaces but now the same thing happens with richfaces, so I think it might be my problem :-)

       

      What I want:

       

      I want a left-side panel with some images like a menu navigation (Main-Page, Help-Page, Settings-Page etc) The right panel should have the content. The loading should be realized with ajax because I have a MP3 player on the left side panel which would be start over again if the request isn't ajax.

       

      What is the problem:

       

      After deploying the application everything looks good if I go to the index.xhtml page (see below). If I click any of those buttons the content on the right panel changes but isn't rendered correctly at all. If I hit F5 (Refresh) it looks good.

      Also the rich:dataScroller works only in one direction. If I am one page one, I can switch to two and three, but if I go back to page two, it won't be rendered. It stays at page three. If I hit F5 it will be rendered correctly with page two.

      The thrid thing is that some components should be rendered only if some backing bean value isn't null. So I do something like this:

       

      {code:xml}

            <rich:panel id="lightTimerDetails" rendered="#{control.lightTimer!=null?'true':'false'}">

      {code}

       

      But this will be only noticed after hitting F5 again.

       

      What I am using:

       

      Richfaces 4

      JBoss 7

      Maven build the EAR file with one JAR (Server-Applicatoin) and the WAR (Web-Application)

       

       

      What I programmed so far:

       

      index.xhtml

       

      {code:xml}

      <!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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.prime.com.tr/ui" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

       

      <f:view>

       

          <h:head>

              <title>Whatever</title>

       

              <link href="style/mainstyle.css" rel="stylesheet" type="text/css" />

              <link href="style/control.css" rel="stylesheet" type="text/css" />

       

          </h:head>

       

          <h:body>

              <h:form>

       

                  <h:panelGrid columns="2" columnClasses="navigation, content">

       

                      <h:panelGroup>

                          <rich:panel styleClass="logoPanel">

                              <h:graphicImage url="graphics/#{systemBean.logo}"></h:graphicImage>

                          </rich:panel>

       

                          <rich:panel styleClass="navigationPanel" header="Navigation">

       

       

                              <a4j:commandButton value=" " id="menu_startseite" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_home.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_steuerung" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_control.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_timer" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_timer.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_statistik" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_statistik.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_musik" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_music.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_webcam" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_webcam.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_alert" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_alert.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_help" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_help.png')"></a4j:commandButton><br />

                              <a4j:commandButton value=" " id="menu_einstellung" actionListener="#{navigationBean.changePage}" render="content" style="border: none; width: 55px; height: 55px; background-color: white; background-image: url('graphics/menu_setting.png')"></a4j:commandButton><br />

       

                          </rich:panel>

                      </h:panelGroup>

       

                      <rich:panel styleClass="contentPanel" id="content">

                          <ui:include src="#{navigationBean.contentPage}"></ui:include>

                      </rich:panel>

       

                  </h:panelGrid>

       

              </h:form>

          </h:body>

      </f:view>

      </html>

      {code}

       

       

       

      The commandButtons call the actionListener which set the variable contentPage. This is actual a string representing the xhtml page which should be rendered on the content part.

       

       

       

      NavigationBean.java


      {code}

      package de.hauke.client.system;

       

      import java.io.Serializable;

       

      import javax.faces.bean.ManagedBean;

      import javax.faces.bean.SessionScoped;

      import javax.faces.event.ActionEvent;

       

      import org.apache.log4j.Logger;

       

      @ManagedBean (name="navigationBean")

      @SessionScoped

      public class NavigationBean implements Serializable{

       

          private static final long serialVersionUID = 1L;

       

          private static final Logger logger = Logger.getLogger(NavigationBean.class);

         

          /**

           * Welche Seite soll im Content für diese Session gerendert werden

           */

          private String contentPage = "startseite.xhtml";

       

          /**

           * Diese Methode wird aufgerufen, wenn ein Benutzer auf einen Menupunkt klickt

           * @param evt

           */

          public void changePage(ActionEvent evt) {

              logger.debug("Ein Navigationslink wurde angeklickt : " + evt.getComponent().getId());

             

              if(evt.getComponent().getId().equalsIgnoreCase("menu_startseite")) {

                  contentPage = "startseite.xhtml";

              } else if(evt.getComponent().getId().equalsIgnoreCase("menu_steuerung")) {

                  contentPage = "steuerung.xhtml";   

              } else if(evt.getComponent().getId().equalsIgnoreCase("menu_timer")) {

                  contentPage = "timer.xhtml";   

              }  else if(evt.getComponent().getId().equalsIgnoreCase("menu_statistik")) {

                  contentPage = "statistik.xhtml";   

              }  else if(evt.getComponent().getId().equalsIgnoreCase("menu_musik")) {

                  contentPage = "musik.xhtml";   

              }  else if(evt.getComponent().getId().equalsIgnoreCase("menu_webcam")) {

                  contentPage = "webcam.xhtml";   

              }  else if(evt.getComponent().getId().equalsIgnoreCase("menu_alert")) {

                  contentPage = "alert.xhtml";   

              }  else if(evt.getComponent().getId().equalsIgnoreCase("menu_help")) {

                  contentPage = "help.xhtml";   

              }  else if(evt.getComponent().getId().equalsIgnoreCase("menu_einstellung")) {

                  contentPage = "einstellung.xhtml";   

              }       

          }

       

       

         

          public String getContentPage() {

              return contentPage;

          }

       

          public void setContentPage(String contentPage) {

              this.contentPage = contentPage;

          }

         

      }

      {code}

       

       

      And here is the content of the page for the second button

       

      steuerung.xhtml

       


      {code:xml}

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

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

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

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

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

       

      <rich:tabPanel>

       

          <rich:tab name="Beleuchtung">

              <rich:panel style="height:600px;overflow:auto;">

                  <h:form>

             

              <a4j:jsFunction name="selectLight" render="timerListe, createTimerButton" action="#{control.selectLight}">

                  <a4j:param name="param1" assignTo="#{control.selectedLightID}"  />                 

              </a4j:jsFunction>

             

              <a4j:jsFunction name="selectLightTimer" render="timerListe,lightTimerDetails" action="#{control.selectLightTimer}">

                  <a4j:param name="param1" assignTo="#{control.selectedLightTimerID}"  />                 

              </a4j:jsFunction>

         

              <rich:dataTable value="#{control.lightList}" onrowclick="selectLight(#{licht['id'].integerValue})" rowKeyVar="rowKey" var="licht" style="width:100%" id="lichtListe" columns="5" columnClasses="lightTableWidthNarrow,lightTableWidthLarge,lightTableWidthLarge,lightTableWidthNarrow,lightTableWidthLarge">

                  <a4j:push address="" ></a4j:push>

                 

                  <rich:column>

                      <h:graphicImage value="graphics/#{licht['icon'].stringValue}" width="20"></h:graphicImage>

                  </rich:column>

                  <rich:column>

                      <f:facet name="header">

                          <h:outputText value="Beschreibung" />

                      </f:facet>           

                      <h:outputText value="#{licht['beschreibung'].stringValue}"/>   

                  </rich:column>

                  <rich:column>

                      <f:facet name="header">

                          <h:outputText value="Letztes mal eingeschaltet / läuft seit" />

                      </f:facet>

                      <h:outputText value="xxxxxx"/>

                  </rich:column>

                  <rich:column>

                      <f:facet name="header">

                          <h:outputText value="Anzahl der Timer" />

                      </f:facet>

                      <h:outputText value="#{licht['anzahlTimer'].integerValue}"/>

                  </rich:column>

                 

                 

                  <rich:column>

                      <f:facet name="header">

                          <h:outputText value="Funktion" />

                      </f:facet>

                     

                      <a4j:commandButton value="#{licht['buttonText'].stringValue}" disabled="#{licht['buttonDisable'].stringValue}" actionListener="#{control.switchLightState}">

                          <f:param name="switchButton" id="switchButton" value="#{licht['id'].stringValue}"/>

                      </a4j:commandButton>

       

                         

                  </rich:column>

       

              </rich:dataTable>

           

              </h:form>

             

              </rich:panel>

          </rich:tab>

       

       

       

          <rich:tab name="Pumpen">

       

          </rich:tab>

       

      </rich:tabPanel>

       

       

       

       

      </html>

      {code}

       

      Here are two screens from how it looks BEFORE hitting F5

       

      richfaces_rendering_wrong.PNG

       

      And here is the image AFTER F5

       

      richfaces_rendering_right.PNG

       

       

      I believe the problem is

       

       

      {code:xml}

                      <rich:panel styleClass="contentPanel" id="content">

                          <ui:include src="#{navigationBean.contentPage}"></ui:include>

                      </rich:panel>

      {code}

       

      But I couldn't find any other EASY way to relize that.

       

       

      Thanks a lot,

      Hauke

        • 2. Re: Rendering Problem with Richfaces 4
          Hauke Gulich Newbie

          dataScroller - problem - SOLVED:

          Well, the problem with the dataScroller is solved by removing the nested <h:form> Tags.

           

          Thanks to http://community.jboss.org/message/591988#591988

           

           

           

           

          Main-Rendering problem - Problem found, but no work-a-round:

          The rendering problem is really based on the ui:include because I merged the index.xthml and one of the content pages into one xhtml page (I copied the content of steuerung.xhtml page into the <ui:include>) and it worked!

           

           

           

          Rendering the rich:panel by the expression with true/false - Still not working:

          I still need to refresh the page in order to display or to disappear the rich:panel.

          1 of 1 people found this helpful
          • 3. Re: Rendering Problem with Richfaces 4
            zwergi Newbie

            Hi everyone,

             

            I am facing the same issues and wanted to ask if there are any new findings regarding the <ui:include> problem:

             

            I have a RichTree (RichFaces 4.0.0 Final and JSF 2.0).

            By selecting a tree node, a PanelGroup should be rendered with a dynamic <ui:include src="selectedNodeTypePath" > depending on the selected TreeNode.

             

            Due to the fact that <ui:include> is invoked before the the TreeSelectionChangeListener can change the path, I have to click the same node twice or refreshing the page with F5...

             

            Any new ideas on this?

             

            Kind regards

            • 4. Re: Rendering Problem with Richfaces 4
              Yoel Kazareski Newbie

              Hello,

                         is there any news regarding the dynamic ui:include issue? I'm having the same issue using RichFaces 4.2.3.CR1 and JSF 2.1.13. When a node in the tree is selected then the included page is not rendering properly, it only does after refreshing the page.

               

              Including an invisible control loads the CSS and JS associated to it. For instance, if a tabPanel and its tabs are not displaying properly adding:

               

              <rich:tabPanel style="display:none;">
                   <rich:tab />
              </rich:tabPanel>
              

               

              to the page that has the ui:include, makes the tab panel render properly. If it is a panel then an invisible rich:panel and so on...

               

              This is just a workaround, I was hoping for a more "native" solution.

               

              Regards,

              Yoel