JSF延迟加载组件值

问题描述

考虑一个简单的h:outputText组件:

Consider a simple h:outputText component:

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

在呈现页面后，如何才能懒惰加载该值，并在完成此操作时显示自定义的"ajax加载"图标而不是该值?

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?

我在项目中使用的是PrimeFaces 3.5，因此欢迎任何特定于PF的实现.

I am using PrimeFaces 3.5 in my project so any PF-specific implementation will be welcome.

推荐答案

建议通过在页面加载后调用remoteCommand来做到这一点(通过将autoRun属性设置为true来完成)并更新您的outputText

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
}

在页面上，您应该具有用于​​查看加载图像的ajaxStatus组件，以及您的outputText.还应该有p:remoteCommand组件:

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"/>

我以为您要延迟加载outputText的值，因为它包含一些长时间运行的计算，但是如果要完全延迟outputText的呈现，请首先添加boolean属性，并在initMyValue方法末尾将此属性设置为true:

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"/>

这篇关于JSF延迟加载组件值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！