Bean初始化期间的jsf/primefaces加载指示器 [英] jsf/primefaces load indicator during init of the bean

查看:117
本文介绍了Bean初始化期间的jsf/primefaces加载指示器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的JSF/Primefaces项目中,我的bean的init(postconstruct)方法中加载了很多数据.这就是为什么我想在Bean加载期间显示gif指示器.

In my JSF/Primefaces project, I have a lot of data loading in the init (postconstruct) method of my beans. That's why I would like to show an gif indicator during the bean load.

我尝试使用素数和Ajax状态(展示柜的编程版本)

I tried with primefaces and the Ajax status (programmatic version of the showcase)

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

所以我将其添加到了项目模板中

So I added this to the template of my project

<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();.

I would like to be able to call loadWidget.show(); at the beginning of the init method of my bean and loadWidget.hide(); at the end.

您是否知道在何处以及如何触发javascript以显示加载的gif? 谢谢

Do you have an idea where and how to fire the javascript to display the loading gif? Thanks

编辑

我可以补充一点,我尝试了这个.这是模板的一部分,其中包含页面的内容.在内容之前或之后包含p:dialog均不起作用.

I could add that I tried this. Here is the part of my template that include the content of the page. It's not working either the p:dialog is included before or after the content.

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

控制台显示loadWidget is not defined

EDIT2

我将尝试解释我的项目如何运作.可能会有帮助.

I will try to explain how my project works. Could be helpful.

这是我的模板

<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.页面示例.

Then each page defines the body. Example of a page.

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

Then each page is linked to a bean that extends a BaseBean.

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

}

推荐答案

我有解决方法!

这非常简单,与素数或JSF bean的构建过程无关.

It was very simple and there is nothing to do with primefaces or with the JSF bean construction process.

我刚刚将其添加到了模板中(每个页面都包含了该模板)

I just added this in my template (that is included for every pages)

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

然后我在下面添加了CSS,将其固定在页面的右下角

Then I added the css below to move it fixed to the bottom right of the page

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

为了使它变得神奇,我添加了此脚本

And to make it magical, I added this script

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

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

因此,当我离开页面时,会显示正在加载的指示符,而在另一页面加载时,它会被隐藏.

So when I leave the page, the loading indicator is shown and when the other page is loaded, it's hidden.

感谢所有为@Andy提供帮助的人

Thanks to everyone that helped especially @Andy

这篇关于Bean初始化期间的jsf/primefaces加载指示器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆