progressBar 进度条

progressBar 展示耗时任务的状态和完成情况。

XML Element

progressBar

Java Class

ProgressBar

基本用法

在线示例

一个标准的进度条通过 0.0 至 1.0 的值表示任务的进度从 0% 至 100%。

<progressBar id="progressBar" width="100%"/>

进度更新

在线示例

进度值通常在正在进行的任务的上下文环境中更新，以便进度条能精确反映任务的当前状态。

下面的示例是一个简单的 后台任务 更新进度条的值：

XML
<progressBar id="progressBar"/>
Java
protected static final int ITERATIONS = 20;

@ViewComponent
protected ProgressBar progressBar;
@ViewComponent
protected Span labelSpan;
@ViewComponent
protected Span percentSpan;
@ViewComponent
protected JmixButton controlButton;

@Autowired
protected BackgroundWorker backgroundWorker;

protected BackgroundTaskHandler<Void> taskHandler;

protected void runNewTask() {
    taskHandler = backgroundWorker.handle(createBackgroundTask());
    taskHandler.execute();
}

protected BackgroundTask<Integer, Void> createBackgroundTask() {
    return new BackgroundTask<>(100, TimeUnit.SECONDS) {

        @Override
        public Void run(TaskLifeCycle<Integer> taskLifeCycle) throws Exception {
            for (int i = 1; i <= ITERATIONS; i++) {
                TimeUnit.SECONDS.sleep(1);
                taskLifeCycle.publish(i);
            }

            return null;
        }

        @Override
        public void progress(List<Integer> changes) {
            double lastValue = changes.get(changes.size() - 1);
            double value = lastValue / ITERATIONS;

            if (value < 1) {
                labelSpan.setText("In progress");
            } else {
                labelSpan.setText("Done");
                controlButton.setIcon(VaadinIcon.REFRESH.create());
            }

            progressBar.setValue(value);
            percentSpan.setText(Double.valueOf(value * 100).intValue() + "%");
        }
    };
}

@Subscribe("controlButton")
protected void onControlButtonClick(ClickEvent<JmixButton> event) {
    if (taskHandler == null || taskHandler.isDone() || taskHandler.isCancelled()) {
        runNewTask();

        event.getSource().setIcon(VaadinIcon.STOP.create());
    } else if (taskHandler != null && taskHandler.isAlive()) {
        taskHandler.cancel();

        labelSpan.setText("Canceled");
        event.getSource().setIcon(VaadinIcon.REFRESH.create());
    }
}

模式

在线示例

进度条根据任务的不同或进度信息是否能获取可以支持 可确定 和 非确定 两种模式。

进度可确定

默认情况下，progressBar 以 可确定 的模式展示进度。可以给用户展示任务还需多少时间才能完成。

<progressBar id="progressBar" width="100%"/>

当任务完成时间可预计或能跟踪任务进度时，请使用可确定模式。

进度不确定

设置 indeterminate 属性为 true 可以将进度条改为 非确定 模式。该模式下会展示一个循环播放的进度条，而非一个特定的进度值。

<progressBar indeterminate="true" width="100%"/>

当无法获取任务进度或展示一个持续运行的任务时，请使用非确定模式。

值域

默认情况下，进度条的值必须在 0.0 和 1.0 之间，分别表示 0% 和 100% 的进度。但是这两个值也可以通过 min 和 max 属性修改。

例如，如果任务有 10 个步骤，可以设置 min="1"，max="10" 来匹配任务的进度。当任务完成 5 步时，进度值也达到了 5：

<progressBar min="0" max="10" value="5"/>

进度对话框

如果需要用户等待任务的完成，可以使用 后台任务对话框。

这个对话框可以禁止用户在任务执行期间的任何交互，直到任务结束或用户取消任务。

样式版本

在线示例

使用 themeNames 属性配置一个或多个样式。

样式 描述 支持的主题

success

表示进度令人满意或接近完成。

Aura, Lumo

error

表示进度不理想，或需要用户注意停滞或失败。

Aura, Lumo

contrast

提高可见性

Aura, Lumo

XML 属性

下面是 progressBar 的特殊属性：

名称 描述 默认值

indeterminate

启用或禁用 进度不确定 模式。

—

max

设置进度的最大值。默认值为 1.0。

—

min

设置进度的最小值。默认值为 0.0。

—

value

设置组件的值。

—

下面是 progressBar 支持的其他通用属性：

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

事件和处理器

下面是 progressBar 支持的通用事件：

AttachEvent - DetachEvent

参考