5 Replies Latest reply on May 11, 2015 3:00 AM by Laurent Hever

    Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput

    Laurent Hever Newbie

      Hi,

       

      I have a problem with richfaces 4.5.0 (CR2, Final ...).

      I use popup for CRUD and in one of my projects I have a a4j:mediaOutput as part of one of those popups.

      When this is the case, the popup autosize="true" parameter isn't working as expected. The first time the popup is rendered, the height of the popup is calculated wrong.

      The second time however it is working fine.

      This has nothing to do with this problem: https://issues.jboss.org/browse/RF-13655

      I already have this workaround implemented and for all my popups not using mediaOutput it is working correctly.

      Even if I remove the mediaOutput the popup is rendered correctly.

       

      Does somebody is familiar with this problem or is a solution/workaround already known?

       

       

      best regards,

      Laurent

        • 1. Re: Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput
          Michal Petrov Master

          Hi,

           

          do you have something we could reproduce this with?

          • 2. Re: Re: Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput
            Laurent Hever Newbie

            Hi,

             

            sorry for the delay. A lot was happening during the last days.

            I forgot to mention that the mediaOutput displays an image which lays as a blob in a database.

             

            here is my popup

             

            <h:form id="formPopupEditPanneau">
                        <rich:popupPanel id="popupEditPanneau" autosized="true" modal="true" domElementAttachment="parent" >
                            <f:facet name="header">
                                <h:outputText value="Commande d'un panneau"/>
                            </f:facet>
            
            
                            <br />
                            <h:panelGrid columns="3">
            
            
                                <h:outputLabel value="Quantité"/>
                                <rich:inputNumberSpinner  id="itQuantity" value="#{elementCrudBean.editEntity.quantity}" required="true"
                                             requiredMessage="Sélectionnez une quantité">
                                    <a4j:ajax render="itTotal" execute="@this" event="change" />
                                </rich:inputNumberSpinner>
                                <rich:message for="itQuantity"/>
            
            
                                <h:outputLabel value="Dimension"/>
                                <rich:select defaultLabel="Veuillez sélectionner"
                                             id="slcDimension"
                                             value="#{elementCrudBean.editEntity.dimension}"
                                             required="true"
                                             requiredMessage="Veuillez sélectionner une dimension"
                                             converter="#{dimensionConverter}" >
                                    <f:selectItem itemLabel="---" itemValue="#{null}" noSelectionOption="true"/>
                                    <f:selectItems value="#{dimensionFacade.getAllForPanneau(elementCrudBean.editEntity.panneau)}"
                                               var="dimension" itemLabel="#{dimension.name} (#{dimension.dimension})"
                                               itemValue="#{dimension}"/>
                                    <a4j:ajax event="selectitem" render="itTotal" execute="@this" />
                                </rich:select>
                                <rich:message for="slcDimension"/>
            
            
                                <h:outputLabel value="Remarque" />
                                <h:inputText value="#{elementCrudBean.editEntity.remarque}" style="width: 250px" id="itRemarque" />
                                <rich:message for="itRemarque" />
            
            
                                <h:outputText value="Prix: " rendered="#{elementCrudBean.editEntity.dimension ne null and elementCrudBean.editEntity.panneau ne null}"/>
                                <h:outputText value="#{elementActionBean.getTotalPrice(elementCrudBean.editEntity)} €" id="itTotal" rendered="#{elementCrudBean.editEntity.dimension ne null and elementCrudBean.editEntity.panneau ne null}">
                                        <f:convertNumber maxFractionDigits="2"/>
                                </h:outputText>
                                <rich:message for="itTotal" rendered="#{elementCrudBean.editEntity.dimension ne null and elementCrudBean.editEntity.panneau ne null}" />
            
            
            
            
                                <h:outputLabel value="Image de situation" />
                                <rich:fileUpload fileUploadListener="#{elementCrudBean.listener}"
                                                 id="itImage"
                                                 listHeight="1"
                                                 ontyperejected="alert('Only JPG, PNG and GIF files are accepted');"
                                                 maxFilesQuantity="1"
                                                 immediateUpload="true"
                                                 acceptedTypes="jpg, gif, png"
                                                 sizeExceededLabel="La taille du fichier est dépassée"/>
                                <h:message for="itImage" />
                            </h:panelGrid>
            
            
              <a4j:mediaOutput element="img"
              createContent="#{panneauActionBean.paintBigImage}"
              cacheable="false"
              session="true"
              value="#{elementCrudBean.editEntity.panneau.id}" />
                            <br/>
                            <br/>
                            <br/>
                            <rich:messages id="msgPopupEditPanneau" globalOnly="true"/>
                            <a4j:commandButton value="Sauvegarder" action="#{elementCrudBean.doSaveEdit()}"
                                               render=":template"
                                               id="btSaveEdit"
                                               oncomplete="if(#{facesContext.maximumSeverity==null}) #{rich:component('popupEditPanneau')}.hide(); return false;"/>
                            <a4j:commandButton value="Cancel" action="#{elementCrudBean.doCancel()}" immediate="true"
                                               oncomplete="#{rich:component('popupEditPanneau')}.hide(); return false;"/>
                            <rich:hotKey key="return" onkeydown="#{rich:element('btSaveEdit')}.click()"
                                         enabledInInput="true" preventDefault="true"
                                         selector="#popupEditPanneau"/>
                        </rich:popupPanel>
                    </h:form>
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            

             

             

            Here the "paint" method

            public void paintBigImage(OutputStream output, Object object) throws IOException {
                    if (object != null) {
                        Long id = (Long) object;
                        byte[] image = panneauFacade.find(Panneau.class, id).getBigImage();
                        if (image != null) {
                            output.write(image);
                        } else {
                            image = panneauFacade.find(Panneau.class, id).getImage();
                            if (image != null)
                                output.write(image);
                        }
                    }
                }
            

             

            thanks for any suggestions

            • 3. Re: Re: Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput
              Michal Petrov Master

              Hi,

               

              thank you but could you create a short self-contained example? (http://sscce.org/) It's not easy finding a problem in a code I cannot run, I'm assuming there is no problem with a simple popup that contains a static mediaOutput, is there?

              • 4. Re: Re: Re: Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput
                Laurent Hever Newbie

                Hi,

                 

                yes you're right. With static data, there seems to be no problem.

                The problem is related to dynamic data.

                 

                Here I have a example for you

                 

                <!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:h="http://java.sun.com/jsf/html"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:rich="http://richfaces.org/rich"
                      xmlns:a4j="http://richfaces.org/a4j">
                    <f:view contentType="text/html">
                        <h:head>
                            <title>Signalisation</title>
                        </h:head>
                        <h:body>
                            <h1>Test popup</h1>
                
                
                            <h:form id="editForm">
                                <h:inputText value="#{testBean.number}">
                                    <f:convertNumber />
                                </h:inputText>
                
                
                                <a4j:commandButton
                                                 value="Call popup"
                                                 render="formPopupTest"
                                                 oncomplete="#{rich:component('popupTest')}.show();"/>
                
                
                                <rich:messages />
                            </h:form>
                
                
                            <h:form id="formPopupTest">
                                <rich:popupPanel id="popupTest" autosized="true" model="true" domElementAttachment="parent">
                                    <f:facet name="header">
                                        <h:outputLabel value="Test popup" />
                                    </f:facet>
                                    <h:panelGrid columns="1">
                                        <h:outputLabel value="Selected number is: #{testBean.number}" />
                                    </h:panelGrid>
                                    <br />
                                    <a4j:mediaOutput element="img"
                                                     createContent="#{testBean.paint}"
                                                     cacheable="false"
                                                     session="false" value="#{testBean.number}" />
                                    <br />
                                    <br />
                                    <h:commandButton value="Close the popup" onclick="#{rich:component('popupTest')}.hide();" />
                                </rich:popupPanel>
                                <rich:messages />
                            </h:form>
                        </h:body>
                    </f:view>
                </html>
                
                

                 

                @Named
                @SessionScoped
                public class TestBean implements Serializable {
                    private Long number;
                
                
                    @Inject
                    private PanneauFacade panneauFacade;
                
                
                    public void paint(OutputStream output, Object object) throws IOException {
                        if (object != null) {
                            Long passedNumber = (Long) number;
                            File file = null;
                            if (passedNumber.equals(1L)) file = new File("D:\\1.jpg");
                            else if (passedNumber.equals(2L)) file = new File("D:\\2.jpg");
                            else file = new File("D:\\3.jpg");
                
                
                            byte fileContent[];
                            if (file != null) {
                                FileInputStream fin = null;
                                try {
                                    fin = new FileInputStream(file);
                                    fileContent = new byte[(int)file.length()];
                                    fin.read(fileContent);
                                    output.write(fileContent);
                                }
                                catch (FileNotFoundException e) {
                                    System.out.println("File not found" + e);
                                }
                                catch (IOException ioe) {
                                    System.out.println("Exception while reading file " + ioe);
                                }
                                finally {
                                    // close the streams using close method
                                    try {
                                        if (fin != null) {
                                            fin.close();
                                        }
                                    }
                                    catch (IOException ioe) {
                                        System.out.println("Error while closing stream: " + ioe);
                                    }
                                }
                            }
                        }
                    }
                
                
                    public Long getNumber() {
                        return number;
                    }
                
                
                    public void setNumber(Long number) {
                        this.number = number;
                    }
                }
                
                

                 

                 

                This loads one of 3 images located on my harddisk.

                I detected that the first time image number 2 was loaded, the size of the popup was wrong too.

                 

                If I replace the static images with the blobs from my database by Injecting my Facade class, I get the same behaviour as mentioned in the original post.

                • 5. Re: Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput
                  Laurent Hever Newbie

                  Hi,

                   

                  I just updated my richfaces to the latest version (4.5.5) and tested this again. However no change in the behavior.

                  The server we use is Wildfly 8.2

                   

                  best regards.

                   

                  Laurent