Richfaces 4.5.0 popup with dynamic content and a4j:mediaOutput

[laurent.hever]

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

[michpetrov]

Hi,

do you have something we could reproduce this with?

[laurent.hever]

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

[michpetrov]

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?

[laurent.hever]

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.

[laurent.hever]

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