Question

在我的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：对话框包含在内容之前或之后。

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

}

Answer 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的人

在初始化bean期间，jsf / primefaces加载指示符

1 个答案: