Skip to content

ALabel#

Represents a simple single-line text display view.

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

Detailed Description#

Label is a basic UI component designed primarily for displaying text in a single line. While you can add line breaks using \n to create multi-line text, it's better to use AText instead, which has proper line-breaking capabilities.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class TemperatureConverterWindow : public AWindow {
public:
    TemperatureConverterWindow() : AWindow("AUI - 7GUIs - TempConv", 300_dp, 50_dp) {
        setContents(Centered {
          Horizontal {
            myPicker() AUI_LET {
                biConnect(it->value(), mCelsius);
                it->focus();
            },
            Label { "°C" },
            Label { "=" } AUI_WITH_STYLE { Margin { {}, 16_dp } },
            myPicker() AUI_LET { biConnect(it->value(), mFahrenheit); },
            Label { "°F" },
          } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
        });

        connect(mFahrenheit.changed, [&] { mCelsius = (*mFahrenheit - 32.f) * (5.f / 9.f); });
        connect(mCelsius.changed, [&] { mFahrenheit = *mCelsius * (9.f / 5.f) + 32.f; });
    }

private:
    AProperty<int> mCelsius, mFahrenheit;
};

Labels can be used to populate AButton (which is a bare container):

1
2
3
4
5
6
7
8
9
Button {
  .content =
      Horizontal {
        Icon { ":img/save.svg" },
        SpacerFixed { 2_dp },
        Label { "Button with icon" },
      },
  .onClick = { me::onClick },
},

API surface#

struct declarative::Label

AOptional<contract::In<AString>> text
Text to display.

Coloring a label#

1
2
3
4
5
6
7
static _<AView> link(const AString& url) {
    return Label { url } AUI_WITH_STYLE {
               TextColor { AColor::BLUE },
               BorderBottom { 1_px, AColor::BLUE },
               ACursor::POINTER,
           } AUI_LET { AObject::connect(it->clicked, AObject::GENERIC_OBSERVER, [url] { APlatform::openUrl(url); }); };
}

Dynamic text in a label#

You can use property-system to bind a label to a variable:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
class CounterWindow : public AWindow {
public:
    CounterWindow() : AWindow("AUI - 7GUIs - Counter", 200_dp, 100_dp) {
        setContents(Centered {
          Horizontal {
            Label { AUI_REACT("Count: {}"_format(mCounter)) },
            Button { Label { "Count" }, [this] { mCounter += 1; } },
          } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
        });
    }

private:
    AProperty<int> mCounter;
};

Full example

Examples#

examples/ui/minimal_ui_assets_xmake/src/MainWindow.cpp

Minimal UI Template XMake with Assets - Minimal UI boilerplate template XMake with AUI Assets. 

    setContents(
        Centered{
            Vertical{
                Centered { Icon { ":img/logo.svg" } with_style { FixedSize(64_dp) } },
                Centered { Label { "Hello world from AUI!" } },
                _new<AButton>("Visit GitHub repo").connect(&AView::clicked, this, [] {
                    APlatform::openUrl("https://github.com/aui-framework/aui");
                }),
                _new<AButton>("Visit docs").connect(&AView::clicked, this, [] {
                    APlatform::openUrl("https://aui-framework.github.io/");

examples/ui/backdrop/src/main.cpp

Backdrop - Backdrop effects demo. 

                     ); },
        Vertical::Expanding {
          Centered {
            Horizontal {
                  Label { "boll" } AUI_WITH_STYLE {
                      FixedSize { 60_dp },
                      BorderRadius { 60_dp / 2.f },
                      Padding { 0 },
                      ATextAlign::CENTER,
                      Backdrop {

examples/ui/minimal_ui_xmake/src/MainWindow.cpp

Minimal UI Template XMake - Minimal UI boilerplate template XMake. 

MainWindow::MainWindow(): AWindow("Project template app", 300_dp, 200_dp) {
    setContents(
        Centered{
            Vertical{
                Centered { Label { "Hello world from AUI!" } },
                _new<AButton>("Visit GitHub repo").connect(&AView::clicked, this, [] {
                    APlatform::openUrl("https://github.com/aui-framework/aui");
                }),
                _new<AButton>("Visit docs").connect(&AView::clicked, this, [] {
                    APlatform::openUrl("https://aui-framework.github.io/");

examples/ui/infinite_lazy_list/src/main.cpp

Infinite Lazy List - Usage of AUI_DECLARATIVE_FOR to make an infinite lazy list. 

        };
    });

    return Vertical {
        AUI_DECLARATIVE_FOR(i, *state->items, AVerticalLayout) { return Label{} & i->value; },
        Centered {
          _new<ASpinnerV2>() AUI_LET {
                  AObject::connect(it->redrawn, AObject::GENERIC_OBSERVER, [state] {
                      // when a spinner appears, we indicate that we need more items.
                      state->needMore = true;

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

7GUIs CRUD - Create/Read/Update/Delete example. 

                Label { "Filter prefix:" },
                _new<ATextField>() AUI_WITH_STYLE { Expanding(1, 0) } && mFilterPrefix,
              } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
              AScrollArea::Builder().withExpanding().withContents(
                  AUI_DECLARATIVE_FOR(i, *mUsers | FILTER_VIEW, AVerticalLayout) {
                    auto view = _new<ALabel>();
                    view & i->displayName;
                    connect(mSelectedUser, view, [this, &view = *view, i] {
                        view.setAssName("selected", mSelectedUser == i);
                    });

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

7GUIs Counter - Simple counter. 

public:
    CounterWindow() : AWindow("AUI - 7GUIs - Counter", 200_dp, 100_dp) {
        setContents(Centered {
          Horizontal {
            Label { AUI_REACT("Count: {}"_format(mCounter)) },
            Button { Label { "Count" }, [this] { mCounter += 1; } },
          } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
        });
    }

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

7GUIs Flight Booker - Flight Booker. 

        dateTextField(AUI_PTR_ALIAS(state, departureDate)),
        dateTextField(AUI_PTR_ALIAS(state, returnDate))
            AUI_LET { AObject::connect(state->isReturnFlight, AUI_SLOT(it)::setEnabled); },
        Button {
          .content = Label { "Book" },
          .onClick =
              [=] {
                  AString msg = "Departure - {}"_format(formatDate(state->departureDate.parsed->value()));
                  if (state->isReturnFlight) {
                      msg += "\nReturn - {}"_format(formatDate(state->returnDate.parsed->value()));

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

7GUIs Timer - Timer example. 

    TimerWindow() : AWindow("AUI - 7GUIs - Timer", 300_dp, 50_dp) {
        setContents(Centered {
          Vertical::Expanding {
            Horizontal {
              Label { "Elapsed Time:" },
              Centered::Expanding {
                _new<AProgressBar>() AUI_LET {
                        it & mElapsedTimeRatio;
                        it->setCustomStyle({ Expanding { 1, 0 } });
                    },

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

7GUIs Circle Drawer - Undo, redo, dialog control. 

                  [this, circle] {
                      auto radiusPopup = _new<AWindow>(
                          "", 200_dp, 50_dp, dynamic_cast<AWindow*>(AWindow::current()), WindowStyle::MODAL);
                      radiusPopup->setContents(Vertical {
                        Label { "Adjust diameter of circle at {}."_format(circle->position) },
                        Slider {
                          .value = AUI_REACT(circle->radius / MAX_RADIUS),
                          .onValueChanged =
                              [this, circle](aui::float_within_0_1 s) {
                                  circle->radius = s * MAX_RADIUS;

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

7GUIs Cells - Spreadsheet processor (Excel). 

                this,
                std::visit(
                    aui::lambda_overloaded {
                      [](std::nullopt_t) -> _<AView> { return _new<AView>(); },
                      [](double v) -> _<AView> { return Label { "{}"_format(v) } AUI_WITH_STYLE { ATextAlign::RIGHT }; },
                      [](const AString& v) -> _<AView> { return Label { "{}"_format(v) }; },
                      [](const formula::Range& v) -> _<AView> { return Label { "#RANGE?" }; },
                    },
                    v));
            connect(getViews().first()->clicked, me::inflateEditor);

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

7GUIs Temperature Converter - Fahrenheit to Celsius and vice versa. 

            myPicker() AUI_LET {
                biConnect(it->value(), mCelsius);
                it->focus();
            },
            Label { "°C" },
            Label { "=" } AUI_WITH_STYLE { Margin { {}, 16_dp } },
            myPicker() AUI_LET { biConnect(it->value(), mFahrenheit); },
            Label { "°F" },
          } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
        });

examples/ui/contacts/src/view/ContactDetailsView.cpp

AUI Contacts - Usage of AUI_DECLARATIVE_FOR to make a contacts-like application. 

namespace {
_<AView> profilePhoto(const _<Contact>& contact) {
    return Centered {
        Label {
          AUI_REACT(contact->displayName->empty() ? "?" : AString(1, contact->displayName->first()).uppercase())
        } AUI_WITH_STYLE { Opacity(0.5f), FontSize { 32_dp } },
    } AUI_WITH_STYLE {
        FixedSize { 64_dp },
        BorderRadius { 32_dp },