JSF 延迟加载组件值

Question

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

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

如何在页面呈现后延迟加载该值，并在执行此操作时显示自定义“ajax 加载”图标而不是该值？

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

Answer 1

建议通过在页面加载后调用 remoteCommand 来完成此操作(通过将 autoRun 属性设置为 true 来完成)并更新您的 outputText.

private String myValue;

// getter and setter

public void initMyValue() {
  // init myValue
}

在页面上，您应该有 ajaxStatus 组件用于查看加载图像和您的 outputText。还应该有 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"/>

编辑:我认为您想要延迟加载 outputText 的值，因为它包含一些长时间运行的计算，但如果您想完全延迟 的渲染outputText 首先在支持 bean 中添加 boolean 属性，并在 initMyValue 方法末尾将此属性设置为 true:

private boolean loaded;

// getter and setter

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

在页面上重新组织如下:

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