Skip to content

AProgressBar#

Progress bars show the progress of an operation.

Header:#include <AUI/View/AProgressBar.h>
CMake:aui_link(my_target PUBLIC aui::views)

Detailed Description#

Progress bars are visual indicators that show the completion progress of an operation, process, or task. Progress bars provide users with real-time feedback on progress of a defined operation.

Consider these three use cases where you might use a progress indicator:

  • Loading content: While fetching content from a network, such as loading an image or data for a user profile.
  • File upload: Give the user feedback on how long the upload might take.
  • Long processing: While an app is processing a large amount of data, convey to the user how much of the total is complete.

Creating a basic progress bar#

The following code snippet shows a minimal progress bar implementation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#include <AUI/Platform/Entry.h>
#include <AUI/Platform/AWindow.h>
#include <AUI/Util/UIBuildingHelpers.h>
#include "AUI/View/AProgressBar.h"

using namespace ass;
using namespace declarative;

struct State {
    AProperty<aui::float_within_0_1> progress = 0.42f;
};

_<AView> minimalProgress(_<State> state) {
    return Vertical {
        ProgressBar {
            .progress = AUI_REACT(state->progress),
        },
    };
}

AUI_ENTRY {
    auto window = _new<AWindow>("Checkbox", 300_dp, 100_dp);
    auto state = _new<State>();
    window->setContents(
        Vertical {
          minimalProgress(state),
          Label { AUI_REACT("Progress: {}%"_format(int(state->progress * 100))) },
        }
    );
    window->show();
    return 0;
}

Key points about this code#

  • struct State holds a reactive property progress representing the progress bar's value. When progress changes, the UI updates reactively.
  • The ProgressBar view binds .value to the state's property, so the progress is kept in sync with the data.
  • Value ranges from 0.0f (0%) to 1.0f (100%).
  • The UI updates automatically based on the state because of AUI's reactive system.

Styling#

Both AProgressBar and AProgressBar::Inner are exposed for styling purposes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
    t<AProgressBar>(),
    BackgroundSolid { 0xd0d0d0_rgb },
    BorderRadius { 4_dp },
    MinSize { 40_dp, 8_dp },
},
{
    t<AProgressBar::Inner>(),
    BackgroundSolid { getOsThemeColor() },
    BorderRadius { 4_dp },
},

Examples#

examples/7guis/timer/src/main.cpp

7GUIs Timer - Timer example. 

          Vertical::Expanding {
            Horizontal {
              Label { "Elapsed Time:" },
              Centered::Expanding {
                _new<AProgressBar>() AUI_LET {
                        it & mElapsedTimeRatio;
                        it->setCustomStyle({ Expanding { 1, 0 } });
                    },
              },
            } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },

Public Types#

Inner#

class AProgressBar::Inner

Empty structure.

Public Methods#

setValue#

void AProgressBar::setValue(aui::float_within_0_1 value)
Arguments
value
progress value, where `0.0f` = 0%, `1.0f` = 100%

Set progress bar value.

Examples:

examples/app/minesweeper/src/NewGameWindow.cpp

Minesweeper Game - Minesweeper game implementation driven by ass.

        _new<AButton>("Cancel").connect(&AButton::clicked, me::close),
      } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
    } AUI_WITH_STYLE { LayoutSpacing { 4_dp } });

    mWidth->setValue(gWidth);
    mHeight->setValue(gHeight);

    updateMinesMax();

    mMines->setValue(gMines);
examples/app/fractal/src/FractalWindow.cpp

Fractal Example - Fractal viewer application demonstrating usage of custom shaders.

        _new<ALabel>("Iterations:"),
        _new<ANumberPicker>().connect(
            &ANumberPicker::valueChanged, this, [fractal](int v) { fractal->setIterations(v); }) AUI_LET {
                it->setMax(1000);
                it->setValue(350);
            },
      } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
    } AUI_WITH_STYLE { LayoutSpacing { 4_dp } });

    fractal->focus();