2 Replies Latest reply on Sep 28, 2011 10:58 AM by Markus Dahm

    RF4 rich:fileUpload vs rich:tabPanel

    Markus Dahm Novice

      Hi,

       

      I've got a serious problem in a complex nested web application using Richfaces 4 on JBoss 7 (Mojarra 2.0.X):

      Our application uses a lot of tabs where each tab contains complex nested data, such as an data tables, accordion and a

      file upload component within the accordion in particular.

       

      The behavior is that when I use the fileupload the very first time it works great. The uploaded image is added dynamically to

      another tab as a thumbnail. There it can be clicked and displays a popup with the complete file.

      But when I switch to another tab, then go back and try to upload another file, nothing happens. The listener is

      not being called nor is the output panel being rerendered....

       

      I'd appreciate any help...

          Markus

       

      The page causing problems looks like this:

       

      <!DOCTYPE composition 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:ui="http://java.sun.com/jsf/facelets"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:a4j="http://richfaces.org/a4j"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:rich="http://richfaces.org/rich">
      
          <rich:panel style="background-color: white;">
              <ui:param name="artikel" value="#{tab.artikel}" />
      
              <h:panelGrid columns="2" id="documentArea"
                  columnClasses="topAlignedLeftArticleViewColumn,topAlignedRightColumn">
                  <h:panelGroup layout="block">
                      <rich:panel bodyClass="articleDocumentArea">
                          <f:facet name="header">
                              <h:outputText
                                  value="#{messages['devA.articleview.documentUpload']}" />
                          </f:facet>
                          <h:form enctype="multipart/form-data">
                              <rich:fileUpload
                                  serverErrorLabel="#{messages['devA.articleview.errorUpload']}"
                                  sizeExceededLabel="#{messages['devA.documentSize.message']}"
                                  addLabel="#{messages['devA.articleview.addDocument']}"
                                  uploadLabel="#{messages['devA.articleview.upload']}"
                                  deleteLabel="#{messages['devA.articleview.delete']}"
                                  clearAllLabel="#{messages['devA.articleview.clearAll']}"
                                  clearLabel="#{messages['devA.articleview.clear']}"
                                  doneLabel="#{messages['devA.articleview.done']}"
                                  fileUploadListener="#{artikelDokumentController.uploadFile}"
                                  render="articleDocumentArea#{artikel.id}">
      <!-- 
                                  <a4j:ajax event="uploadcomplete" execute="@none"
                                      render="articleDocumentArea#{artikel.id}" />
       -->
                              </rich:fileUpload>
                              <h:messages layout="list" styleClass="feedbackPanel" warnClass="warn-message" infoClass="info-message" errorClass="error-message"
                                      globalOnly="true" />
                          </h:form>
                      </rich:panel>
      
                  </h:panelGroup>
      
                  <a4j:outputPanel id="articleDocumentArea#{artikel.id}" ajaxRendered="true">
                      <h:panelGroup layout="block">
                          <rich:panel bodyClass="articleDocumentArea">
                              <f:facet name="header">
                                  <h:outputText value="#{messages['devA.articleview.documents']}" />
                              </f:facet>
                              <h:outputText value="#{messages['devA.articleview.noDocuments']}"
                                  rendered="#{empty artikel.dokumente}" />
                              <h:panelGrid columns="5">
                                  <c:forEach items="#{artikel.dokumente}" var="dokument">
                                      <h:panelGroup rendered="#{dokument.image}"
                                          styleClass="documentCell">
                                          <h:panelGroup>
                                              <h:commandLink>
                                                  <rich:componentControl
                                                      target="dokumentPopup#{tab.id}X#{dokument.id}"
                                                      operation="show" />
      
                                                  <a4j:mediaOutput element="img"
                                                      mimeType="#{dokument.contentType}" cacheable="true"
                                                      createContent="#{dokumentController.loadThumbnail}"
                                                      value="#{dokument.id}" />
                                              </h:commandLink>
                                              <br />
                                              <h:commandLink
                                                  value="#{messages['devA.articleview.useAsDefaultImage']}"
                                                  action="#{artikelDokumentController.setDefaultImage(dokument.id)}" />
                                          </h:panelGroup>
      
                                          <h:form>
                                              <rich:popupPanel id="dokumentPopup#{tab.id}X#{dokument.id}"
                                                  modal="false" autosized="true" resizeable="false">
                                                  <f:facet name="header">
                                                      <h:outputText value="#{dokument.name}" />
                                                  </f:facet>
                                                  <f:facet name="controls">
                                                      <a href="#"
                                                          onclick="#{rich:component('dokumentPopup'.concat(tab.id).concat('X').concat(dokument.id))}.hide(); return false;"
                                                          style="color: white;">#{messages['devA.articleview.close']}</a>
      
                                                      <h:outputLink value="#"
                                                          onclick="#{rich:component('dokumentPopup'.concat(tab.id).concat('X').concat(dokument.id))}.hide(); return false;"
                                                          style="color: white;">
                                                  X
                                              </h:outputLink>
                                                  </f:facet>
      
                                                  <p>
                                                      <a4j:mediaOutput element="img" cacheable="false" session="true"
                                                          createContent="#{dokumentController.loadDokument}"
                                                          value="#{dokument.id}" mimeType="#{dokument.contentType}"
                                                          alt="img" />
                                                  </p>
      
                                              </rich:popupPanel>
                                          </h:form>
                                      </h:panelGroup>
      
                                      <h:panelGroup rendered="#{not dokument.image}"
                                          styleClass="documentCell">
                                          <a4j:mediaOutput title="#{dokument.name}" element="a"
                                              target="imageView" cacheable="false" session="true"
                                              fileName="#{dokument.name}"
                                              createContent="#{dokumentController.loadDokument}"
                                              value="#{dokument.id}" mimeType="#{dokument.contentType}"
                                              alt="Dokument" rendered="#{not dokument.image}">
                                              <a4j:mediaOutput element="img"
                                                  mimeType="#{dokument.contentType}" cacheable="true"
                                                  createContent="#{dokumentController.loadThumbnail}"
                                                  value="#{dokument.id}" />
                                          </a4j:mediaOutput>
                                      </h:panelGroup>
                                  </c:forEach>
                              </h:panelGrid>
                          </rich:panel>
                      </h:panelGroup>
                  </a4j:outputPanel>
              </h:panelGrid>
          </rich:panel>
      </ui:composition>
      
      
        • 1. Re: RF4 rich:fileUpload vs rich:tabPanel
          Markus Dahm Novice

          BTW: As mentioned in http://community.jboss.org/thread/172767

           

           

           

          In RF 4 you can't use forms inside tabs, accordion items and so on..  Only one form around whole tab panel could be used. That's because of JSF 2 limitation of adding the form programatically. (tab controls itself requires form around and in RF 4 we can't add it if developer not added it explicitly wrapping whole panel).

           

          So add form around tabpanel, remove from every tab and limit processing by playing with execute on your controls inside the tabs.

           

          This does not work. When I omit the form around the fileUpload nothing does happen, too...

          • 2. Re: RF4 rich:fileUpload vs rich:tabPanel
            Markus Dahm Novice

            Some updates:

             

            Using  switchType="server" instead of  switchType="ajax" helped partially. At least the files are now always uploaded.

             

            However, we found that the response of the render="..." is wrong. Consider two tabs currently open, we switch from the first to

            the second on and try to upload a file. The response now contains data for the other tab!

             

            Request:

             

            AJAX:EVENTS_COUNT1
            j_idt659j_idt659
            javax.faces.ViewState9192752647414414576:-9097354468665760381
            javax.faces.behavior.even...uploadcomplete
            javax.faces.partial.ajaxtrue
            javax.faces.partial.eventonuploadcomplete
            javax.faces.partial.execu...j_idt659:j_idt660 @component
            javax.faces.partial.rende...@component
            javax.faces.sourcej_idt659:j_idt660
            org.richfaces.ajax.compon...j_idt659:j_idt660

             

             

            Response:

            <?xml version='1.0' encoding='UTF-8'?>
            <partial-response><changes><update id="articleDocumentArea1"><![CDATA[<span id="articleDocumentArea1"><div class="rf-p " id="j_idt498"><div class="rf-p-hdr " id="j_idt498_header">Bilder und Dokumente...</div><div class="rf-p-b articleDocumentArea" id="j_idt498_body"><table>

             

             

            "articleDocumentArea1" should in fact be "articleDocumentArea2"! I suspect this has something to do with the fact that we have two file upload components, not just one as in the usual examples.

             

             

            Any suggestions from the Richfaces Gurus...?