Version 9
Created by artdaw on Jul 21, 2009 6:36 AM. Last modified by artdaw on Mar 8, 2012 11:06 AM.

    ← RichFaces FAQ ← RichFaces Components FAQ

     

     

    Problem to refresh an image/pain2D/mediaOutput created resources using  component

    Imagine the situation when you want to generate image or any sort of media dynamically. For example, you want to generate image from <h:inputText> field on-the-fly:

    ...
    <h:form>
         <a4j:mediaOutput element="img" value="#{mediaData}" 
                          createContent="#{media.paint}" 
                          mimeType="image/jpeg" id="img" 
                          cacheable="false" session="false">
         </a4j:mediaOutput>
         <h:inputText value="#{media.in}" id="in" />
         <a4j:commandButton action="#{media.updateText}" reRender="img, out" 
                            value="Change text" />
         <h:outputText value="#{media.text}" id="out" />
    </h:form>
    ...

     

    After the first request the image will be successfully rendered on a page. But if you try to submit new value from <h:inputText> nothing will be happened on the page.

    The content of the image has been changed, but browser doesn't know about it because the URL to the image remains the same. Therefore we need some hack to inform browser about changes. We can attach random number to the URL of the image in every Ajax request, so browser will receive "new" URL to image:

    ...
    <h:form>
         <a4j:mediaOutput element="img" value="#{mediaData}" 
                          createContent="#{media.paint}" 
                          mimeType="image/jpeg" id="img" 
                          cacheable="false" session="false">
              <f:param value="#{media.timeStamp}" name="time" />
         </a4j:mediaOutput>
         <h:inputText value="#{media.in}" id="in" />
         <a4j:commandButton action="#{media.updateText}" reRender="img, out" 
                            value="Change text" />
         <h:outputText value="#{media.text}" id="out" />
    </h:form>
    ...

     

    In the example above the time parameter is attached to the URL of the generated image every time GET request is occured. The value of the time parameter is a current timestamp:

    ...
         public long getTimeStamp(){
              return System.currentTimeMillis();
         }
    ...

     

    <a4j:log> causes JavaScript error

     

    There are some cases when <a4j:log> might cause JavaScript error:

    • <a4j:log> is wrapped in <h:form> causes "out of memory" error, so to prevent this error you should use <a4j:log> outside of the <h:form>
    • <a4j:log popup="true"> closed manually in IE 6, IE 7 causes JavaScript error "access is denied".

    howTo stop <a4j:poll> or <a4j:push> from JavaScript

     

    in order to stop updates from poll or push component at client side you could use next JS calls:

     

    onsomeevent="A4J.AJAX.StopPoll('#{rich:clientId('poll')}');"
onsomeevent="A4J.AJAX.StopPush('#{rich:clientId('poll')}');"

     

    mediaOutput/paint2D and Seam conversation

    Problem source

     

    There could be problems with using these components if them relies on data stored in conversation. And it explained by the fact that them uses GET requests in order to request resources and GET request do not propagates conversation. So you will need to use

     

    <s:conversationId/>

     

    defined nested to components. That will cause tem to add conversation Id in resource requests and conversation them will be propagated.