Primefaces BlockUI组件示例教程
Primefaces BlockUI用于通过可选的Ajax集成来阻止JSF组件的交互性。
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 |
Primefaces BlockUI属性
| 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 |
Primefaces BlockUI入门
BlockUI组件与ajax行为集成在一起，而无需像往常那样关联p：ajax组件。
通过提供触发属性，您可以定义将在激活后用于启动blockUI组件的那些源，从而确定要阻止的组件的定义块属性。
正如它出现在属性中一样，触发器属性可以与多个源相关联，而可以与仅使用一个组件标识的块属性相关联。
下面我们来看一个非常基本的示例，该示例为您提供了一个动作源，该动作源将在调用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.theitroad.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 "";
}
}
这是上述示例的详细说明：
我们定义了包含消息组件的面板。
该命令动作负责触发blockUI组件。
一旦激活动作源，面板组件messagePanel将被阻止。
该命令动作将延迟4秒钟，使blockUI组件在可接受的时间段内可见。
上面执行代码的结果如下：
上面显示的消息没有被阻止，因此可以选择并且可读。
一旦阻止消息动作被激活，面板组件将被阻止。
上面的面板组件现在无法选择，您将要学习如何使其不可见。
Primefaces 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: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.theitroad.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 "";
}
}
这是上面列出的代码的详细说明：
索引视图定义了两个动作，其中之一在面板内部列出，这是blockUI组件的目标，而第二个动作则在面板外部。
这两个动作都将导致面板被阻止，但是这次，当外部动作被触发时，内部动作也将被阻止。
阻止操作意味着不再使用该操作，即用户将无法点击。对于长时间的阻止，我们添加了Thread.currentThread()。
sleep(4000)。
执行以上代码的结果如下：
您已经注意到，直到blockUI消失，内部动作源才被激活。
如果您激活了内部操作，则相同的blockUI也将显示。
Primefaces BlockUI自定义内容
如我们所承诺的，当显示BlockUI组件时，它也适用于您显示一些自定义内容。
诸如加载图像之类的自定义内容可能导致被阻止组件的内容不可见。
通过将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.theitroad.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 "";
}
}
执行结果如下：
您已经注意到：
将Ajax加载程序图像添加到项目中，以便与BlockUI组件结合使用。
一旦激活了阻止消息操作，BlockUI组件就会与关联的Ajax加载器图像一起显示，这将导致面板内容看不到。
我们使用了jsf 2框架已实现的资源概念。
资源变量引用位于webapp文件夹下面的resources文件夹。
下面是已开发项目的目录结构。
Primefaces BlockUI客户端API
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.theitroad.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 "";
}
}
执行以上代码的结果将是：
一旦激活了Show BlockUIHTML输入，面板组件将被阻止，其中Hide BlockUI将导致面板被阻止。
Primefaces BlockUI阻止的属性
还需要提及一个剩余的属性。
阻止属性使阻止行为直观地发生。
默认情况下为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.theitroad.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 "";
}
}
