progressBar

progressBar показывает статус завершения длительной задачи.

XML-элемент

progressBar

Java-класс

ProgressBar

Основы

ДЕМО

Стандартный индикатор выполнения принимает значения от 0,0 до 1,0, что соответствует прогрессу задачи от 0 % до 100 %.

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

Обновление прогресса

ДЕМО

Значение прогресса обычно обновляется во время выполнения задачи, чтобы индикатор точно отражал её текущее состояние.

Рассмотрим пример простой фоновой задачи, которая обновляет значение progressBar:

XML
<hbox padding="false">
    <h4 text="ProgressBar with indicator"/>
    <button id="controlButton"
            icon="PLAY" classNames="link-button"/>
</hbox>
<hbox padding="false" justifyContent="BETWEEN" width="100%">
    <span id="labelSpan" text="Ready to start"/>
    <span id="percentSpan" text="0%"/>
</hbox>
<progressBar id="progressBar" width="100%"/>
<h4 text="Indeterminate ProgressBar"/>
<progressBar indeterminate="true" width="100%"/>
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 циклически анимируется по всей длине полосы, не отображая конкретного значения прогресса.

<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

Атрибуты

progressBar имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

indeterminate

Включает или отключает режим неопределённый прогресс.

—

max

Устанавливает максимальное значение прогресса.

—

min

Устанавливает минимальное значение прогресса.

—

value

Задаёт значение компонента.

—

progressBar имеет следующие общие атрибуты:

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

Обработчики

progressBar имеет следующие общие обработчики:

AttachEvent - DetachEvent

Смотрите также