10 Replies Latest reply on Jun 8, 2007 9:07 AM by stephenwilliams

    A4j: MediaOutout not rendering on ajax submit

    nishantkatoch

      hello,

      My a4j: Media component is not refreshing itself with new image on ajax submit. How ever it foes refreshes itslef when I change my code to h:form and don't use ajax form.
      But I need ajax submit.
      Please help.

      The code that I am using is :

      *********************************
      <a4j:outputPanel id="divCodeToEnter" ajaxRendered="true" layout="block">
      <a4j:form id="commentForm" ajaxSubmit="true">

      <h:inputText style="width:50px; height:20px" id="VerificationCode"
      value="#{proHandler.code}" maxlength="4"/>

      <a4j:mediaOutput id="codeImage" element="img" cacheable="false"
      rendered="true" createContent="#{paintBean.paint}" value="#{paintData}"
      mimeType="image/jpeg"/>

      <a4j:commandButton id="generalCommentSumbit"
      action="#{proHandler.enterCode}" reRender="divCodeToEnter"/>

      <h:outputText value="#{proHandler.result}"/>

      </a4j:form>
      </a4j:outputPanel>
      *********************************

      Analysis:
      Note: In the above case, MediaOutPut generates a random image.
      The a4j button when clicked, does all the functions and I am able to see
      output text, but the IMAGE from MediaOutput does not show a new image.

      Alternatlively: If I use h:form and t: commandButton I get the desired
      result (the new image is shown on click of button).

      Thanks,
      Your help will be greatlly apprecaited.
      Nishant

        • 1. Re: A4j: MediaOutout not rendering on ajax submit

          use value attribute of the mediaOutput and make it different each time.

          P.S. if you use ajaxRendered="true", there is no reason to point to the same panel with reRender

          • 2. Re: A4j: MediaOutout not rendering on ajax submit
            ilya_shaikovsky

            At first there is no need to use ajax-ed components (command*) if you already use ajax form.

            And while using ajax-ed form reRender must be defined in form element.

            But in your case try h:form with ajax commandButton you've defined.

            • 3. Re: A4j: MediaOutout not rendering on ajax submit
              nishantkatoch

              Thanks, but this is what is happening.

              1) I made changes as told by you.

              case 1 ) When I used Ajax form and t:command button mediaoutput does not show a new value(image) on submit.

              case 2 ) If I used h:form and a4j:command button mediaoutput does not show a new value(image) on submit.

              case 3 ) If I use h:form and t:command button mediaoutput does show a new value(image) on submit.

              I dont want case 3, sinceI dont want the whole page to be refreshed unnecessarily for this purpose.

              Please advise.

              Thanks,
              Nishant

              • 4. Re: A4j: MediaOutout not rendering on ajax submit
                nishantkatoch

                does the image in mediaoutput not refreshing itselff with a new image on ajax submit but refreshing itself if not ajaxed, has to do something with this: (Request Values phase and Application phase.)



                • 5. Re: A4j: MediaOutout not rendering on ajax submit
                  nishantkatoch

                  awaiting for your response....

                  • 6. Re: A4j: MediaOutout not rendering on ajax submit

                    Keep the code like shown below and do not make any magical attempts. Ajax4jsf is not operated by magic power:

                    <a4j:outputPanel id="divCodeToEnter"layout="block">
                     <h:form id="commentForm">
                    
                     <h:inputText style="width:50px; height:20px" id="VerificationCode"
                     value="#{proHandler.code}" maxlength="4"/>
                    
                     <a4j:mediaOutput id="codeImage" element="img" cacheable="false"
                     createContent="#{paintBean.paint}" value="#{paintData}"
                     mimeType="image/jpeg"/>
                    
                     <a4j:commandButton id="generalCommentSumbit"
                     action="#{proHandler.enterCode}" reRender="divCodeToEnter"/>
                    
                     <h:outputText value="#{proHandler.result}"/>
                     </h:form>
                    </a4j:outputPanel>


                    You have:
                    ... value="#{paintData} ..."


                    What is #{paintData}, what type, how it is declare, how does it changes for each request ???



                    • 7. Re: A4j: MediaOutout not rendering on ajax submit
                      nishantkatoch

                      Sergey,

                      I have implemented the code as in http://livedemo.exadel.com/a4j-mediaOutput/ example

                      <a4j:mediaOutput element="img" cacheable="false" session="true" createContent="#{paintBean.paint}" value="#{paintData}" mimeType="image/jpeg" />
                      JAVA Bean(Model):
                      
                      package demo;
                      import java.awt.Color;
                      import java.io.Serializable;
                      
                      public class PaintData implements Serializable{
                      
                       private static final long serialVersionUID = 1L;
                       Integer Width=100;
                       Integer Height=50;
                       Color Background=new Color(0,0,0);
                       Color DrawColor=new Color(255,255,255);
                       public PaintData() {
                       }
                       public Color getBackground() {
                       return Background;
                       }
                       public void setBackground(Color background) {
                       Background = background;
                       }
                       public Color getDrawColor() {
                       return DrawColor;
                       }
                       public void setDrawColor(Color drawColor) {
                       DrawColor = drawColor;
                       }
                       public Integer getHeight() {
                       return Height;
                       }
                       public void setHeight(Integer height) {
                       Height = height;
                       }
                       public Integer getWidth() {
                       return Width;
                       }
                       public void setWidth(Integer width) {
                       Width = width;
                       }
                      }
                      
                      JAVA Bean (Paint Method):
                      
                      package demo;
                      
                      import java.awt.Graphics2D;
                      import java.awt.image.BufferedImage;
                      import java.io.IOException;
                      import java.io.OutputStream;
                      import javax.imageio.ImageIO;
                      
                      public class PaintBean {
                      
                       public void paint(OutputStream out, Object data) throws IOException{
                       if (data instanceof PaintData) {
                       PaintData paintData = (PaintData) data;
                       BufferedImage img = new BufferedImage(paintData.getWidth(),paintData.getHeight(),BufferedImage.TYPE_INT_RGB);
                       Graphics2D graphics2D = img.createGraphics();
                       graphics2D.setBackground(paintData.getBackground());
                       graphics2D.setColor(paintData.getDrawColor());
                       graphics2D.clearRect(0,0,paintData.getWidth(),paintData.getHeight());
                       graphics2D.drawLine(5,5,paintData.getWidth()-5,paintData.getHeight()-5);
                       graphics2D.drawChars(new String("Ajax4JSF").toCharArray(),0,8,40,15);
                       graphics2D.drawChars(new String("mediaOutput").toCharArray(),0,11,5,45);
                       ImageIO.write(img,"jpeg",out);
                       }
                       }
                      }



                      The only difference is that instead of String "Ajax4JSF" ..I a using a random string.

                      public String randomStringKey()
                       {
                       String str=new String("QAabcLdUK2eHfJgTP8XhiFj6DkNm9nBI5pGqYVrs3CtSuMZvwWx4yE7zR");
                       StringBuffer sb=new StringBuffer();
                       Random r = new Random();
                       int te=0;
                       for(int i=1;i<=4;i++){
                       te=r.nextInt(56);
                       sb.append(str.charAt(te));
                       }
                       this.setStringKey(sb.toString());
                       return sb.toString();
                      
                       }


                      Also the beans have been defined in the faces-config file.

                      <managed-bean>
                      <description>Painting Bean</description>
                      <managed-bean-name>paintBean</managed-bean-name>
                      <managed-bean-class>com.rdi.web.common.util.PaintBean</managed-bean-class>
                      <managed-bean-scope>request</managed-bean-scope>
                      </managed-bean>
                      
                      <managed-bean>
                      <description>Painting Bean Data</description>
                      <managed-bean-name>paintData</managed-bean-name>
                      <managed-bean-class>com.rdi.web.common.util.PaintData</managed-bean-class>
                      <managed-bean-scope>request</managed-bean-scope>
                      </managed-bean>




                      • 8. Re: A4j: MediaOutout not rendering on ajax submit

                        The problem is the PaintData bean never changes (everything is statically defined there)

                        Move your generator or random string into PaintData. Have a getter and setter there for it. In the PaintBean use the string taken from PaintData object and draw it.

                        • 9. Re: A4j: MediaOutout not rendering on ajax submit
                          stephenwilliams

                          Hi!

                          Do you mean that you have to change the PaintData object in the enterCode method?

                          If so how can you get hold of the PaintData object in an enterCode action? In the paint it is passed in but not in the action.

                          cheers,
                          Stephen

                          • 10. Re: A4j: MediaOutout not rendering on ajax submit
                            stephenwilliams

                            Ok

                            Just have to add...

                            @In PaintData paintData;