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.

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_OVERRIDE_STYLE { Margin { {}, 16_dp } },
            myPicker() AUI_LET { biConnect(it->value(), mFahrenheit); },
            Label { "°F" },
          } AUI_OVERRIDE_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):

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

static _<AView> link(const AString& url) {
    return Label { url } AUI_OVERRIDE_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:

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_OVERRIDE_STYLE { LayoutSpacing { 4_dp } },
        });
    }

private:
    AProperty<int> mCounter;
};

Full example

Examples

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/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*>(ASurface::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/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/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_OVERRIDE_STYLE { LayoutSpacing { 4_dp } },
        });
    }

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_OVERRIDE_STYLE { Margin { {}, 16_dp } },
            myPicker() AUI_LET { biConnect(it->value(), mFahrenheit); },
            Label { "°F" },
          } AUI_OVERRIDE_STYLE { LayoutSpacing { 4_dp } },
        });

examples/app/notes/src/main.cpp

Notes App — Note taking app that demonstrates usage of AListModel, AProperty, user data saving and loading.

        return s.restrictLength(100, "").replacedAll('\n', ' ');
    };

    return Vertical {
        Label {
          .text = AUI_REACT(stringOneLinePreview(note->title)),
        } AUI_OVERRIDE_STYLE { FontSize { 10_pt }, ATextOverflow::ELLIPSIS },
        Label {
          .text = AUI_REACT(stringOneLinePreview(note->content)),
        } AUI_OVERRIDE_STYLE {

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" } AUI_OVERRIDE_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/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/contacts/src/main.cpp

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

                            SpacerFixed(8_dp),
                            experimental::Dynamic {
                                .content = AUI_REACT(mSearchQuery->empty() ? indexedList() : searchQueryList()),
                            },
                            Label { AUI_REACT("{} contact(s)"_format(mContactCount)) } AUI_LET {
                                AObject::connect(AUI_REACT(ass::PropertyList{
                                    FontSize { 10_pt },
                                    ATextAlign::CENTER,
                                    Margin { 8_dp },
                                    mSearchQuery->empty() ? Visibility::VISIBLE : Visibility::GONE,

examples/ui/backdrop/src/main.cpp

Backdrop — Backdrop effects demo.

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

examples/ui/opengl_simple/src/main.cpp

OpenGL Example — Demonstrates how to integrate custom OpenGL rendering with AUI Framework.

          _new<MyRenderer>(state) AUI_OVERRIDE_STYLE { Expanding() },
          Horizontal::Expanding {
            Vertical {
              Vertical {
                Label { AUI_REACT(fmt::format("FPS: {:.1f}", *state->fps)) },
              } AUI_OVERRIDE_STYLE {
                    Padding(16_dp),
                    BackgroundSolid { AColor::WHITE.transparentize(0.5f) },
                    MinSize { 150_dp, {} },
                  },

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/ui/embedded_sdl/src/main.cpp

SDL3 — This code demonstrates how to integrate the AUI Framework with SDL3 to create a window with OpenGL rendering.

    /// [UI]
    window.setContainer(Centered {
        Vertical {
            Label { "Hello, World!" },
            _new<ATextField>(),
            Button {
                .content = Label { "Click me" },
                .onClick = [] {
                    ALogger::info("Test") << "Hello world!";

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_OVERRIDE_STYLE { Opacity(0.5f), FontSize { 32_dp } },
    } AUI_OVERRIDE_STYLE {
        FixedSize { 64_dp },
        BorderRadius { 32_dp },