如何以p:blockUI/pe:blockUI阻止整个JSF页面? [英] How to target entire JSF page to be blocked by p:blockUI / pe:blockUI?

问题描述

该示例演示了 <pe:blockUI> .

The example demonstrates blocking of <h:form> by <pe:blockUI>.

<h:form id="form" prependId="true">
    <pe:blockUI target="form" widgetVar="blockBodyUIWidget">
        <h:panelGrid columns="2">
            <h:graphicImage library="default" name="images/ajax-loader1.gif" class="block-ui-image"/>
            <h:outputText value="#{messages['blockui.panel.message']}" class="block-ui-text"/>
        </h:panelGrid>
    </pe:blockUI>

<p:commandButton id="btnSubmit" 
                 onstart="PF('blockBodyUIWidget').block()" 
                 oncomplete="PF('blockBodyUIWidget').unblock();}" 
                 update=":form:dataGrid" actionListener="#{bean.listener}" 
                 icon="ui-icon-check" 
                 value="Save">
</h:form>

这会阻止<h:form>，但是有一个模板，其标题和左侧栏不会因此而被阻止.

This blocks <h:form> but there is a template with a header and a left side bar which are not blocked by doing so.

我曾尝试在模板页面上阻止<h:body id="body"> <pe:blockUI target="body"...，但是该操作无法正常工作，并出现异常，指出"在视图中找不到ID主体的组件."

I have tried to block <h:body id="body"> <pe:blockUI target="body"... on the template page but that didn't work ending with an exception indicating, "Cannot find component with the id body in the view."

那么，如何定位整个页面?

So, how to target the entire page?

_{尽管我使用的是 PrimeFaces扩展名的<pe:blockUI>，但同样的事情可以由PrimeFaces的<p:blockUI>}

_{Although I'm using <pe:blockUI> of PrimeFaces extension, the same thing can be demonstrated by <p:blockUI> of PrimeFaces}

推荐答案

为您的身体提供一个ID，然后在<p:blockUI>组件的block参数上引用它.

Give an id to your body and then reference it on the block argument of the <p:blockUI> component.

示例:

<h:body id="entirePage"/>

和

<p:blockUI id="blockUI" widgetVar="blockBodyUIWidget" block=":entirePage"/>

这篇关于如何以p:blockUI/pe:blockUI阻止整个JSF页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！