本文概述
它是一个过程状态指示器, 可以完全在客户端上运行, 也可以使用Ajax与服务器端进行交互。用于显示执行过程的状态和进度。 ProgressBar有两种模式:客户端和Ajax。默认情况下, 启用客户端模式。通过将ajax属性设置为true可以启用Ajax模式。
<p:progressBar>用于在JSF应用程序中创建进度条。它具有下表列出的各种属性。
ProgressBar属性
Attribute | 默认值 | Type | Description |
---|---|---|---|
id | null | String | 它是组件的唯一标识符。 |
rendered | true | Boolean | 它用于指定组件的呈现。 |
widgetVar | null | String | 它是客户端小部件的名称。 |
value | 0 | Integer | 用于设置进度条的值。 |
disabled | false | Boolean | 用于禁用或启用进度条。 |
ajax | false | Boolean | 它指定progressBar的模式。 |
interval | 3000 | Integer | 它用于设置间隔(以秒为单位)以在ajax模式下进行定期请求。 |
style | null | String | 用于设置主容器元素的内联样式。 |
styleClass | null | String | 用于设置主容器元素的样式类。 |
labelTemplate | {value} | String | 用于设置进度标签的模板。 |
displayOnly | false | Boolean | 启用静态显示模式。 |
global | true | Boolean | 全局ajax请求由ajaxStatus组件侦听。 |
例子
在下面的示例中, 我们正在实现<p:progressBar>组件。本示例包含以下文件。
JSF文件
// progressBar.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>ProgressBar</title>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" />
<h3>Ajax ProgressBar Example</h3>
<p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();"
widgetVar="startButton2" />
<p:commandButton value="Cancel" actionListener="#{progressBar.cancel}"
oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
<br /><br />
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBar.progress}"
labelTemplate="{value}%" styleClass="animated" global="false">
<p:ajax event="complete" listener="#{progressBar.onComplete}" update="growl"
oncomplete="PF('startButton2').enable()"/>
</p:progressBar>
</h:form>
</h:body>
</html>
ManagedBean
// ProgressBar.java
package com.srcmini;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@ViewScoped
public class ProgressBar {
private Integer progress;
public Integer getProgress() {
if(progress == null) {
progress = 0;
}
else {
progress = progress + (int)(Math.random() * 15);
if(progress > 100)
progress = 100;
}
return progress;
}
public void setProgress(Integer progress) {
this.progress = progress;
}
public void onComplete() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Progress Completed"));
}
public void cancel() {
progress = null;
}
}
输出
评论前必须登录!
注册