PrimeFaces 进度条

17 Mar 2025 | 阅读 2 分钟

它是一个进程状态指示器，可以纯粹在客户端工作，也可以使用 Ajax 与服务器端交互。它用于显示正在执行的进程的状态和进度。 ProgressBar 有两种模式：客户端和 Ajax。默认情况下，启用客户端模式。可以通过将 ajax 属性设置为 true 来启用 Ajax 模式。

<p:progressBar> 用于在 JSF 应用程序中创建进度条。它有各种属性，如下表所示。

进度条属性

属性	默认值	类型	描述
id	null	String	它是组件的唯一标识符。
rendered	true	Boolean	它用于指定组件的渲染。
widgetVar	null	String	它是客户端小部件的名称。
值	0	Integer	用于设置进度条的值。
disabled	false	Boolean	用于禁用或启用进度条。
ajax	false	Boolean	指定进度条的模式。
interval	3000	Integer	用于设置以秒为单位的间隔，以在 ajax 模式下执行定期请求。
style	null	String	用于设置主容器元素的内联样式。
styleClass	null	String	用于设置主容器元素的样式类。
labelTemplate	{value}	String	用于设置进度标签的模板。
displayOnly	false	Boolean	启用静态显示模式。
全局	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.javatpoint;
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;
}
}

输出

下一主题#

← 上一个下一个 →

PrimeFaces 进度条

进度条属性

示例

JSF 文件

ManagedBean

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PrimeFaces 教程

PrimeFaces Ajax

UI 组件

面试题

PrimeFaces 进度条

进度条属性

示例

JSF 文件

ManagedBean

相关帖子

PF InputSwitch

PF SelectManyButton

PF Dialog

PF BooleanCheckbox

PF Editor

PF SelectOneButton

PF Layout

PF Slider

PF BreadCrumb

PF CommandLink

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器