primefaces教程_Primefaces BlockUI组件示例教程

primefaces教程

Primefaces BlockUI is used to block interactivity of JSF components with optional ajax integration.

Primefaces BlockUI用于通过可选的ajax集成来阻止JSF组件的交互。

Primefaces BlockUI (Primefaces BlockUI)

Tag	BlockUI
Component Class	org.primefaces.component.blockui.BlockUI
Component Type	org.primefaces.component.BlockUI
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.BlockUIRenderer
Renderer Class	org.primefaces.component.blockui.BlockUIRenderer

标签	块UI
组件类别	org.primefaces.component.blockui.BlockUI
组件类型	org.primefaces.component.BlockUI
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.BlockUIRenderer
渲染器类	org.primefaces.component.blockui.BlockUIRenderer

Primefaces BlockUI属性 (Primefaces BlockUI Attributes)

Name	Default	Type	Description
id	null	String	Unique identifier of the component.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar	null	String	Name of the client side widget.
trigger	null	String	Identifier of the component(s) to bind.
block	null	String	Identifier of the component to block.
blocked	false	Boolean	Blocks the UI by default when enabled.
rendered	true	Boolean	Boolean value to specify the rendering of the component

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
widgetVar	空值	串	客户端小部件的名称。
触发	空值	串	要绑定的组件的标识符。
块	空值	串	要阻止的组件的标识符。
受阻	假	布尔型	启用时，默认情况下阻止UI。
呈现	真正	布尔型	布尔值，用于指定组件的呈现

Primefaces BlockUI入门 (Getting Started With Primefaces BlockUI)

BlockUI component integrates with the ajax behavior without need for associating the p:ajax component as usual. By providing a trigger attribute you are defining those sources that would be used for initiating the blockUI component once they are activated, defining a block attribute will be determined to which component you want to get blocked. As it’s appeared in the attributes, trigger attribute can be associated with multiple sources rather block attribute which identified by using one component only.

BlockUI组件与ajax行为集成在一起，而无需像往常那样关联p：ajax组件。通过提供触发器属性，您可以定义一旦被激活即可用于启动blockUI组件的源，定义块属性将确定您要阻止的组件。正如它出现在属性中一样，触发器属性可以与多个源相关联，而可以与仅使用一个组件标识的块属性相关联。

Let’s see below a very basic sample that provides you an action source that would initiate the BlockUI component once it’s invoked. By its turn, BlockUI component will get the identified component blocked.

下面让我们看一个非常基本的示例，该示例为您提供了一个动作源，该动作源将在调用BlockUI组件后将其初始化。到时候，BlockUI组件将阻止已识别的组件。

<html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui">
<h:head><title>BlocuUI</title><script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form><div style="width: 30%"><p:panel id="messagePanel"><h:outputText value="JouranlDev Message Blocked !!"></h:outputText></p:panel>#{' '}<p:commandButton id="action" value="Block Message"action="#{blockUIManagedBean.someAction}"></p:commandButton><p:blockUI trigger="action" block="messagePanel"></p:blockUI></div>
</h:form>
</html>

package com.journaldev.prime.faces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class BlockUIManagedBean {public String someAction() throws InterruptedException{Thread.currentThread().sleep(4000);return "";}
}

Here is the detailed explanation for the above example:

这是上述示例的详细说明：

We’ve defined panel that contains a message component.我们定义了包含消息组件的面板。
The command action is responsible of triggering the blockUI component.命令操作负责触发blockUI组件。
Panel component messagePanel will be blocked once action source is activated.激活动作源后，面板组件messagePanel将被阻止。
The command action will get delayed for 4 seconds that makes the blockUI component visible for acceptable period of time to be noticed.该命令动作将延迟4秒钟，使blockUI组件在可接受的时间内可见。

Result of executing code above will be like below:

上面执行代码的结果如下：

The message shown above isn’t blocked and so it’s selectable and readable.

上面显示的消息未被阻止，因此它是可选的且可读。

Once the block messages action get activated the panel component will be blocked.

一旦阻止消息动作被激活，面板组件将被阻止。

Panel component above isn’t selectable now and you are about learning how do you make it invisible.

上面的面板组件现在无法选择，您将要学习如何使其不可见。

Primefaces BlockUI多个来源 (Primefaces BlockUI Multiple Sources)

As we saw, a blockUI component has been used for blocking already rendered component within your view by activating certain action source. Now, it’s time for achieving the same principle but this time using two different action sources.

如我们所见，blockUI组件已用于通过激活某些操作源来阻止视图中已渲染的组件。现在，是时候实现相同的原理了，但是这次使用两个不同的动作源。

<html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui">
<h:head><title>BlocuUI</title><script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form><div style="width: 30%"><p:panel id="messagePanel"><h:outputText value="JouranlDev Message Blocked !!"></h:outputText><p:commandButton id="action2" value="Panel Block Message Action"action="#{blockUIManagedBean.someAction}"></p:commandButton></p:panel>#{' '}<p:commandButton id="action1" value="Block Message Action"action="#{blockUIManagedBean.someAction}"></p:commandButton><p:blockUI trigger="action1 action2" block="messagePanel"></p:blockUI></div>
</h:form>
</html>

package com.journaldev.prime.faces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class BlockUIManagedBean {public String someAction() throws InterruptedException{Thread.currentThread().sleep(4000);return "";}
}

Here is a detailed explanation for the code listed above:

这是上面列出的代码的详细说明：

Index view has defined two actions, one of them is listed inside the panel which is the target of the blockUI component, while second one is outside of the panel. Both actions will cause the panel to be blocked, but this time the inside action will also get blocked when the outside action has fired. Action blocking means the action no longer used, that is the user won’t be able of doing clicks.索引视图定义了两个动作，其中之一在面板内部列出，这是blockUI组件的目标，而第二个动作则在面板外部。这两个动作都将导致面板被阻止，但是这次，当外部动作被触发时，内部动作也将被阻止。动作阻止表示该动作不再使用，即用户将无法点击。
For long time period of blocking we’ve added Thread.currentThread().sleep(4000).对于长时间的阻塞，我们添加了Thread.currentThread（）。sleep（4000） 。

The result of executing the above code is like below:

执行以上代码的结果如下：

As you’ve noticed, the internal action source isn’t activated until the blockUI has disappeared. If you are activated the internal action the same blockUI will get displayed as well.

您已经注意到，直到blockUI消失，内部动作源才被激活。如果您激活了内部操作，则也会显示相同的blockUI。

Primefaces BlockUI自定义内容 (Primefaces BlockUI Custom Content)

As we’ve promised you, it’s also applicable for you to display some custom content when the BlockUI component gets displayed. Custom content like loading image may cause the content of the blocked component to be invisible.

如我们所承诺的，当显示BlockUI组件时，它也适用于您显示一些自定义内容。自定义内容（如加载图像）可能导致被阻止组件的内容不可见 。

By associating the BlockUI component with any components you desire like graphicImage, you are about getting custom content displayed when the BlockUI get shown. In the below sample we will use an image like ajax loader as custom content for hiding the content of the blocked component.

通过将BlockUI组件与所需的任何组件（如graphicImage）相关联，您将获得在显示BlockUI时显示的自定义内容。在下面的示例中，我们将使用像ajax loader这样的图像作为自定义内容，以隐藏被阻止组件的内容。

<html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui">
<h:head><title>BlocuUI</title><script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form><div style="width: 30%"><p:panel id="messagePanel"><h:outputText value="JouranlDev Message Blocked !!"></h:outputText></p:panel>#{' '}<p:commandButton id="action" value="Block Message"action="#{blockUIManagedBean.someAction}"></p:commandButton><p:blockUI trigger="action" block="messagePanel"><p:graphicImage value="#{resource['images/ajax-loader.gif']}"></p:graphicImage></p:blockUI></div>
</h:form>
</html>

package com.journaldev.prime.faces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class BlockUIManagedBean {public String someAction() throws InterruptedException{Thread.currentThread().sleep(4000);return "";}
}

And the result of execution is like below:

执行结果如下：

As you’ve noticed:

您已经注意到：

Ajax loader image added into project for being used in conjunction with the BlockUI component.将Ajax加载程序图像添加到项目中，以便与BlockUI组件一起使用。
Once the block message action has been activated, the BlockUI component get displayed with the associated Ajax loader image that cause the content of the panel to be unseen.一旦激活了阻止消息操作，BlockUI组件就会与关联的Ajax加载器图像一起显示，这将导致面板内容看不到。
We’ve used the resource concept that already implemented by the jsf 2 framework. Resource variable is referring the resources folder that located underneath webapp folder. Below, the directory structure of the developed project.我们使用了jsf 2框架已经实现的资源概念。资源变量引用了位于webapp文件夹下面的resources文件夹。下面是已开发项目的目录结构。

Primefaces BlockUI客户端API (Primefaces BlockUI Client Side API)

Primefaces provides you the ability to manipulate and control the components of your view using the client side API. Defining widgetVar attribute will help you controlling the component and consequently invoking all of those behaviors that the controlled component provide. BlockUI component provides you two client side methods might be invoked by the JavaScript code. Show() & hide() are mainly the only methods available for BlockUI that get it blocked and unblocked respectively. Below sample shows you the mechanism of how can you control the BlockUI component using two JavaScript functions.

Primefaces使您能够使用客户端API来操纵和控制视图的组件。定义widgetVar属性将帮助您控制组件并因此调用受控组件提供的所有那些行为。 BlockUI组件为您提供了两个可能由JavaScript代码调用的客户端方法。 show（）和hide（）主要是可用于BlockUI的唯一使它们分别被阻止和解除阻止的方法。下面的示例向您展示了如何使用两个JavaScript函数来控制BlockUI组件的机制。

<html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui">
<h:head><title>BlocuUI</title><script name="jquery/jquery.js" library="primefaces"></script><script>function show(){PF('blockUI').show();}function hide(){PF('blockUI').hide();}</script>
</h:head>
<h:form><div style="width: 30%"><p:panel id="messagePanel"><h:outputText value="JouranlDev Message Blocked !!"></h:outputText></p:panel>#{' '}<p:blockUI widgetVar="blockUI" block="messagePanel"><p:graphicImage value="#{resource['images/ajax-loader.gif']}"></p:graphicImage></p:blockUI><br/><input type="button" onclick="show();" value="Show BlockUI"/><input type="button" onclick="hide();" value="Hide BlockUI"/></div>
</h:form>
</html>

package com.journaldev.prime.faces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class BlockUIManagedBean {public String someAction() throws InterruptedException{Thread.currentThread().sleep(4000);return "";}
}

The result of executing the above code it will be:

执行以上代码的结果将是：

The panel component will get blocked once the Show BlockUI HTML input has activated where the Hide BlockUI will cause the panel to get unblocked.

一旦激活Show BlockUI HTML输入后，面板组件将被阻止，而Hide BlockUI将导致面板被阻止。

Primefaces BlockUI阻止的属性 (Primefaces BlockUI Blocked Attribute)

One remaining attribute needs to be mentioned as well. Blocked attribute makes the blocking behavior happened intuitively. It’s defaulted to false in order to make the blocking behavior conditionally. At all cases, if you would to make your component blocked instantly, once the view get displayed, just set this attribute to true. Following sample below show you the impact of set this attribute to true.

还需要提及一个剩余的属性。阻止属性使阻止行为直观地发生。默认将其设置为false ，以便有条件地进行阻止行为。在所有情况下，如果要立即阻止组件，则在显示视图后，只需将此属性设置为true即可 。以下示例显示了将此属性设置为true的影响。

<html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui">
<h:head><title>BlocuUI</title><script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form><div style="width: 30%"><p:panel id="messagePanel"><h:outputText value="JouranlDev Message Blocked By Default !!"></h:outputText></p:panel>#{' '}<p:blockUI blocked="true" block="messagePanel"></p:blockUI></div>
</h:form>
</html>

package com.journaldev.prime.faces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class BlockUIManagedBean {public String someAction() throws InterruptedException{Thread.currentThread().sleep(4000);return "";}
}

Primefaces BlockUI摘要 (Primefaces BlockUI Summary)

Primefaces BlockUI is a Primefaces component used for blocking component or set of components. This tutorial provides you complete samples that discusses the different business scenarios in which the BlockUI are used. You can download the sample project from below link.

Primefaces BlockUI是一个Primefaces组件，用于阻止一个组件或一组组件。本教程为您提供了完整的样本，讨论了使用BlockUI的不同业务场景。您可以从下面的链接下载示例项目。

Download PrimeFaces BlockUI Project下载PrimeFaces BlockUI项目

翻译自: https://www.journaldev.com/3413/primefaces-blockui-component-example-tutorial

primefaces教程