Significant value of JSF loadable component

Question

Consider the simple h: outputText component:

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

How can I load this value after the page has been displayed and display the custom “ajax load” icon instead of the value when it is running?

I am using PrimeFaces 3.5 in my project, so any implementation related to PF would be welcome.

Answer 1

We recommend doing this by calling remoteCommand after loading the page (this is done by setting the autoRun attribute to true) and update the outputText .

 private String myValue; // getter and setter public void initMyValue() { // init myValue } 

On the page, you must have the ajaxStatus component to view the loaded image and your outputText . There should also be a p:remoteCommand :

 <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 assumed that you want the lazy value of loading outputText because it contains some lengthy calculations, but if you want to completely stop rendering outputText , first add the boolean property in your bean support, and set this property to true at the end of the 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"/> 

Answer 2

You can use BlockUI to conditionally block a component while it is loading.

• Define the preRenderComponent event on <h:outputText/>

    <h:outputText id="myText"> <f:event name="preRenderComponent" id="started"/> </h:outputText> 

• Define <p:blockUI/> with event id as a trigger

    <p:blockUI block="myText" trigger="started" /> 

You can configure blockui to display an image or any other.

A word of caution: I suppose you demand this because you are making a heavy lift in the recipient of this component. Be aware that the recipient will be called several times in the life cycle of this page. Therefore, hiding the fact that the operation takes a lot of time will not change this fact. A better option would be to preload and cache the value for this component in a long-running area, rather than in a loading throbber theater.

Answer 3

Here is how I did it:

 <h:panelGroup id="loginLocation"> <p:graphicImage library="assets" name="small-kit-loader.gif" width="16" height="16" rendered="#{empty mybean.lastLoginLocation}"></p:graphicImage> <h:outputText value="#{myBean.lastLoginLocation}" rendered="#{!empty myBean.lastLoginLocation}"/> </h:panelGroup> <p:remoteCommand global="false" actionListener="#{actionBean.getUserLoginLocation(myBean.selectedUser)}" name="refreshLoginLocation" id="rc1" autoRun="true" update="loginLocation" process="@this"></p:remoteCommand> 

Personally, I'm not quite happy with this implementation:

• lazy load state is stored on the server side, not on the client side, where it should be
• I need to implement a separate method for my bean support (getUserLoginLocation) to retrieve a value and explicitly store it in another property (lastLoginLocation). It would be much cleaner to just have one getter, which is called lazy after rendering the page in the browser.
• Easy reuse - depends on the support of the bean of the "loaded" flag (# {empty myBean.lastLoginLocation} in this case) and requires that the action runner actually set the value. Any component based on this approach will also depend on the specific bean support code.

Any recommendations for improving this code are welcome! :)