bean 初始化期间的 jsf/primefaces 加载指示器答案

【问题标题】：jsf/primefaces load indicator during init of the beanbean 初始化期间的 jsf/primefaces 加载指示器
【发布时间】：2013-07-31 12:03:59
【问题描述】：

在我的 JSF/Primefaces 项目中，我的 bean 的 init (postconstruct) 方法中有大量数据加载。这就是为什么我想在 bean 加载期间显示一个 gif 指示器。

我尝试使用 primefaces 和 Ajax 状态（展示的程序化版本）

http://www.primefaces.org/showcase/ui/ajaxStatusScript.jsf

所以我将它添加到我的项目模板中

<p:dialog modal="true" widgetVar="loadWidget" header="Status"
    draggable="false" closable="false">

    <p:graphicImage value="../images/ajaxload.gif" />
</p:dialog>

我希望能够在我的 bean 的 init 方法的开头调用 loadWidget.show(); 并在结尾调用 loadWidget.hide();。

您知道在哪里以及如何触发 javascript 以显示加载 gif 吗？谢谢

编辑

我可以补充一点，我试过了。这是我的模板中包含页面内容的部分。在内容之前或之后包含 p:dialog 都不起作用。

<div class="content">
    <script>loadWidget.show();</script>
        <ui:insert name="body" />
    <script>loadWidget.hide();</script>
</div>

控制台显示loadWidget is not defined

EDIT2

我将尝试解释我的项目是如何工作的。可能会有所帮助。

这是我的模板

<html ... >

<f:view contentType="text/html">

    <h:head> ... </head>

    <h:body>
        <ui:insert name="header" />
        <ui:insert name="menu" />
        <ui:insert name="body" />
        <ui:insert name="footer" />
        ... <!-- Other things -->
    </h:body>
</f:view>   
</html>

然后每个页面定义body。页面示例。

<html ... >

<ui:composition template="myTemplateAbove">

    <ui:define name="body">

            <h:outputText value="#{beanOfMyFirstPage.myText}" />
            <p:commandButton action="#{beanOfMyFirstPage.goToAnotherPage}" />
            ...
        </ui:define>
</ui:composition>

</html>

然后每个页面都链接到一个扩展 BaseBean 的 bean。

@ManagedBean(name = "beanOfMyFirstPage")
@ViewScoped
public class beanOfMyFirstPage extends BaseBean {
    // attributes + getters and setters

    @PostConstruct
    public void init() {
        super.init();
        ... // actions that take time cause of DB requests for example
    }

    public void goToAnotherPage() {
        navigation.handleNavigation(FacesContext.getCurrentInstance(), null, "mySecondPage");
    }

    // methods
}

还有普通的豆子

public class BaseBean {

    @PostConstruct
    public void init() {
        super.init();
        // General actions for all beans
    }

}

【问题讨论】：

您何时/如何构建 bean ？你在点击p:commandButton 吗？如果是这样，您可以使用onstart 和oncomplete 属性。如果没有，请更新您的代码，以便我了解您的操作方式。
这是一个页面很多的项目。通过单击菜单或单击其他页面上的按钮来加载 Bean。所以我想要一些通用的东西。我编辑我的问题以尝试解释。
对于更一般的答案，您可以使用<p:ajaxStatus onstart="loadWidget.show()" oncomplete="loadWidget.hide()"/> 而不是div。 p:ajaxStatus 将监控所有全局 ajax 请求并调用 p:dialog。我能看到的唯一缺点是它会为所有 ajax 触发。您可以为您不感兴趣的输入设置global = "false"。但我不确定这是否是您所追求的。如果可行，请告诉我，我会将其添加为答案。如果没有，我们会尝试找出更多。
如果你不明白，请告诉我，我可以举一个更具体的例子。
感谢您提供的精确度，但事实上我已经尝试过了，我想要一个适用于非 ajax 进程的解决方案。就像我点击一个按钮并且函数后面需要很长时间才能执行，所以我可以在调用之前启动 gif 并在进程结束时停止它。

标签： jsf primefaces javabeans loading gif

【解决方案1】：

我有办法！

非常简单，与 primefaces 或 JSF bean 构建过程无关。

我刚刚在我的模板中添加了这个（每个页面都包含）

<div id="nonAjaxLoad">
    <img src="../images/ajaxload.gif"/>
</div>

然后我添加了下面的 css 将其固定到页面的右下角

#nonAjaxLoad {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
}

为了让它更神奇，我添加了这个脚本

<script>
    $(document).ready(function(){
        $('#nonAjaxLoad').hide();
    });

    $(window).bind('beforeunload', function() {
        $('#nonAjaxLoad').show(); 
    });
</script>

所以当我离开页面时，加载指示器会显示，而当另一个页面加载时，它会被隐藏。

感谢所有帮助过的人，尤其是@Andy

【讨论】：

我只是想提出类似的建议。干得好！
是否也可以显示非 ajax 加载的模式对话框？对于 ajax，我使用 p:ajaxStatus 和自定义内容 <p:dialog id="nonAjaxLoad" widgetvar="nonAjaxLoad"><p:graphicImage/></dialog>，所以我的想法是使用您的 javascript 解决方案中的 PF('nonAjaxLoad').show() 和 PF('nonAjaxLoad').hide 显示/隐藏 nonAjaxLoad 对话框？！