Prime Faces:如何通过进度“正在加载..."从页面A导航到页面B(缓慢)，指标 [英] Prime Faces: how to navigate from page A to (slow) page B with progress "Loading..." indicator

问题描述

我正在使用Prime Faces(JSF UI库).

I am using Prime Faces (JSF UI library).

我想从A页导航到B页，但是由于B页的运行缓慢，因此需要使用某种进度指示器，

I would like to navigate from page A to page B, but with some kind of progress indicator because page B is slow, it takes time to load.

我应该怎么做?

推荐答案

您可以通过在B页上添加AJAX加载来完成此操作.在B页上，您会看到以下内容:

You can do this with adding AJAX loading on page B. On page B you have something like this:

<h:head>
  <script type="text/javascript">
    function onLoadCallback(data) {
      if (data.status == "begin") {
        dialogWidget.show();
      } else {
        dialogWidget.hide();
      }
    }
  </script>
</h:head>
<h:body>
  <f:ajax event="load" listener="#{bean.onload}" onevent="onLoadCallback" render=":include1"/>

  <h:panelGroup id="include1">
    <h:panelGroup id="include2" rendered="#{bean.loaded}">
      <ui:include src="realPageB.xhtml"/>
    </h:panelGroup>
  </h:panelGroup>

  <p:dialogid="dialog" widgetVar="dialogWidget" modal="true">
    Loading
  </p:dialog>
</h:body>

使用此方法，您最初仅用AJAX加载页面(速度很快)，然后调用了更新面板的方法，该面板将实际页面分组.在加载过程中，您将看到模式对话框(您也可以尝试使用p:ajaxStatus).在bean initali中，loaded为false，在调用onload方法之后，将loaded更新为true:

With this you initially loaded just page with AJAX (it is fast), and you called method which updates panel which groups real page. During loading you will see modal dialog (you can experiment with p:ajaxStatus as well). In bean initali loaded is false, and after onload method is called you update loaded to true:

private loaded;

// getters and setters

public void onload(AjaxBehaviourEvent event) {
  loaded = true;
}

这篇关于Prime Faces:如何通过进度“正在加载..."从页面A导航到页面B(缓慢)，指标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！