PrimeFaces ProgressBar用法详解 _ProgressBar

本文概述

ProgressBar属性
例子

它是一个过程状态指示器, 可以完全在客户端上运行, 也可以使用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="http://www.srcmini.com/Start" type="button" onclick="PF('pbAjax').start(); PF('startButton2').disable(); " widgetVar="startButton2" /> < p:commandButton value="http://www.srcmini.com/Cancel" actionListener="#{progressBar.cancel}" oncomplete="PF('pbAjax').cancel(); PF('startButton2').enable(); " /> < br /> < br /> < p:progressBar widgetVar="pbAjax" ajax="true" value="http://www.srcmini.com/#{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; } }

【PrimeFaces ProgressBar用法详解】输出