个性化阅读
专注于IT技术分析

PrimeFaces 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="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;
}
}

输出

PrimeFaces ProgressBar 1
PrimeFaces ProgressBar 2
赞(0)
未经允许不得转载:srcmini » PrimeFaces ProgressBar用法详解

评论 抢沙发

评论前必须登录!