JSF lazy loading component value

jsf, jsf-2, primefaces

Solution

A suggest to do this by calling `remoteCommand` after on page load (it is done by setting `autoRun` attribute to true) and update your `outputText`.

private String myValue;

// getter and setter

public void initMyValue() {
  // init myValue
}

On page you should have `ajaxStatus` component for viewing loading image, and your `outputText`. Also there should be `p:remoteCommand` component:

<p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">  
  <f:facet name="start">  
    <h:graphicImage value="ajaxloading.gif" />  
  </f:facet>
  <f:facet name="complete">  
    <h:outputText value="" />
  </f:facet>  
</p:ajaxStatus>

<h:outputText id="myText" value="#{myBean.myValue}"/>

<p:remoteCommand autoRun="true" actionListener="#{myBean.initMyValue}" update="myText"/>

EDIT: I supposed that you want to lazy load value of `outputText` because it contains some long running calculations, but if you want to completely deffer rendering of `outputText` first add `boolean` property in your backing bean, and set this property to `true` at the end of `initMyValue` method:

private boolean loaded;

// getter and setter

public void initMyValue() {
  // init myValue
  loaded = true;
}

on the page reorganize it as follows:

<h:panelGroup id="myPanel" layout="block">
  <h:graphicImage value="ajaxloading.gif" rendered="#{!myBean.loaded}"/>
  <h:outputText value="#{myBean.myValue}" rendered="#{myBean.loaded}"/>
</h:panelGroup>

<p:remoteCommand autoRun="true" actionListener="#{myBean.initMyValue}" update="myPanel"/>

Problem

Consider a simple h:outputText component: ``` <h:outputText value="#{myBean.myValue}"/> ``` How can I lazy load that value after the page has been rendered, and display custom 'ajax loading' icon instead of the value while this is being done? I am using PrimeFaces 3.5 in my project so any PF-specific implementation will be welcome.

Original source