Skip to content

ATextField#

Editable field with text to receive a text input from the user.

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

Detailed Description#

Single-line text input. For multiple lines see ATextArea.

Reading and writing the text#

text() is a property; it can be read, assigned, observed, and bound to other properties with && (two-way) or connect. Whenever you change it from code, the field is updated.

1
2
3
4
_form({
  { "Name:", _new<ATextField>() && mEditedUser.name },
  { "Surname:", _new<ATextField>() && mEditedUser.surname },
}) AUI_OVERRIDE_STYLE { LayoutSpacing { 4_dp } },

Two signals report changes:

  • textChanging is emitted on every typed or removed symbol. This is what text().changed of the property refers to, and the signal that data bindings listen to;
  • textChanged is emitted when the user finishes editing (the field loses focus) and when the text is set with setText.

Validation#

The field itself accepts any text; to validate, observe the text and style the field accordingly. The example below parses the text as a date and paints the field red if parsing fails.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
auto dateTextField(_<DateTextFieldState> state) {
    return _new<ATextField>() AUI_LET {
        AObject::connect(
            state->parsed, it, [&it = *it, &state = *state](const AOptional<system_clock::time_point>& value) {
                if (!value) {
                    return;
                }
                if (state.userChangesText.is_locked()) {
                    return;
                }

                it.text() = formatDate(*value);
            });
        AObject::connect(it->text().changed, state->parsed, [&it = *it, &state = *state](const AString& s) {
            std::unique_lock lock(state.userChangesText);
            state.parsed = parseDate(s);
        });
        AObject::connect(
            AUI_REACT(ass::PropertyList { BackgroundSolid(!state->parsed->hasValue() ? AColor::RED : AColor::WHITE) }),
            AUI_SLOT(it)::setCustomStyle);
    };
}

Other options#

  • setPasswordMode(true) hides the typed symbols and disables copying;
  • setEditable(false) makes the field read-only;
  • setMaxTextLength(...) limits the length of the text;
  • setTextInputType(...) and setTextInputActionIcon(...) hint the touchscreen keyboard;
  • focus() (from AView) puts the cursor to the field, i.e., _new<ATextField>() AUI_LET { it->focus(); }.

Clipboard operations are available as copyToClipboard(), cutToClipboard() and pasteFromClipboard(); see also AClipboard.

Examples#

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

7GUIs Cells — Spreadsheet processor (Excel).

    void inflateEditor() {
        mState->currentExpression = mCell.expression;
        ALayoutInflater::inflate(
            this,
            _new<ATextField>() AUI_OVERRIDE_STYLE {
                  MinSize { 0 },
                  Margin { 0 },
                  BorderRadius { 0 },
                } AUI_LET {
                    it && mState->currentExpression;
examples/7guis/flight_booker/src/main.cpp

7GUIs Flight Booker — Flight Booker.

};

/// [date_field]
auto dateTextField(_<DateTextFieldState> state) {
    return _new<ATextField>() AUI_LET {
        AObject::connect(
            state->parsed, it, [&it = *it, &state = *state](const AOptional<system_clock::time_point>& value) {
                if (!value) {
                    return;
                }
examples/7guis/crud/src/main.cpp

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

          Horizontal::Expanding {
            Vertical::Expanding {
              Horizontal {
                Label { "Filter prefix:" },
                _new<ATextField>() AUI_OVERRIDE_STYLE { Expanding(1, 0) } && mFilterPrefix,
              } AUI_OVERRIDE_STYLE { LayoutSpacing { 4_dp } },
              AScrollArea::Builder().withExpanding().withContents(
                  AUI_DECLARATIVE_FOR(i, *mUsers | FILTER_VIEW, AVerticalLayout) {
                    auto view = _new<ALabel>();
                    view & i->displayName;
examples/app/fractal/src/JumpToCoordsWindow.cpp

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

using namespace declarative;

JumpToCoordsWindow::JumpToCoordsWindow(_<FractalView> fractalView, AWindow* parent)
  : AWindow("Jump to coords", 854_dp, 500_dp, parent, WindowStyle::NO_RESIZE) {
    auto re = _new<ATextField>();
    auto im = _new<ATextField>();
    auto scale = _new<ATextField>();

    auto pos = fractalView->getPlotPosition();
    re->setText(AString::number(pos.x));
examples/ui/contacts/src/main.cpp

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

              AScrollArea::Builder()
                      .withContents(
                          Vertical {
                            SpacerFixed(8_dp),
                            _new<ATextField>() && mSearchQuery,
                            SpacerFixed(8_dp),
                            AText::fromString(predefined::DISCLAIMER) AUI_OVERRIDE_STYLE { ATextAlign::CENTER },
                            SpacerFixed(8_dp),
                            experimental::Dynamic {
                                .content = AUI_REACT(mSearchQuery->empty() ? indexedList() : searchQueryList()),
examples/ui/views/src/ExampleWindow.cpp

Views Example — All-in-one views building example.

              .withContents(
                  Vertical {
                    Centered { _new<ALabel>("ALabel") },
                    Centered { _new<AButton>("AButton") },
                    Centered { _new<ATextField>() AUI_LET { it->setText("ATextField"); } },
                  }
                  << ".all_views_wrap")
              .withExpanding() });
    }
};
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.

_<AView> editor(AProperty<T>& property);

template <>
_<AView> editor(AProperty<AString>& property) {
    return _new<ATextField>() && property;
}
}   // namespace

template <typename T>
_<AView> ContactDetailsView::presentation(AProperty<T>& property) {