3

在我的 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>

我希望能够loadWidget.show();在我的 bean 的 init 方法的开头和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

编辑2

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

这是我的模板

<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
    }

}
4

1 回答 1

5

我有办法！

它非常简单，与 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

于 2013-08-01T13:38:39.517 回答