Skip to content

7GUIs Counter#

Example's page

This page describes an example listed in 7guis category.

Simple counter.

Challenge: Understanding the basic ideas of a language/toolkit.

The task is to build a frame containing a label or read-only textfield T and a button B. Initially, the value in T is “0” and each click of B increases the value in T by one.

Counter serves as a gentle introduction to the basics of the language, paradigm and toolkit for one of the simplest GUI applications imaginable. Thus, Counter reveals the required scaffolding and how the very basic features work together to build a GUI application. A good solution will have almost no scaffolding.

 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
33
34
35
36
37
38
39
40
41
/*
 * AUI Framework - Declarative UI toolkit for modern C++20
 * Copyright (C) 2020-2025 Alex2772 and Contributors
 *
 * SPDX-License-Identifier: MPL-2.0
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

#include <AUI/Platform/Entry.h>
#include <AUI/Platform/AWindow.h>
#include <AUI/Util/UIBuildingHelpers.h>
#include <AUI/View/AButton.h>
#include "AUI/View/ATextField.h"

using namespace declarative;

class CounterWindow: public AWindow {
public:
    CounterWindow(): AWindow("AUI - 7GUIs - Counter", 200_dp, 100_dp) {
        setContents(Centered {
          Horizontal {
            _new<ATextField>() AUI_LET {
                AObject::connect(mCounter.readProjected(AString::number<int>), it->text());
                it->setEditable(false);
            },
            Button { "Count" }.connect(&AView::clicked, [&] { mCounter += 1; }),
          },
        });
    }

private:
    AProperty<int> mCounter;
};

AUI_ENTRY {
    _new<CounterWindow>()->show();
    return 0;
}

Comparison to Jetpack Compose#

Here's implementation of the same app with Jetpack Compose:

package ...

import ...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CounterTheme {
                Counter()
            }
        }
    }
}

@Composable
fun Counter() {
    var counter by remember { mutableIntStateOf(0) }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        Text(text = "Counter $counter"),
        Button(onClick = { counter++ }) {
            Text(text = "Click to increment")
        }
    }
}

AUI Kotlin
State Inside class Local variable (remember)
Vertical Column
Horizontal Row
Display AObject::connect(mCounter.readProjected(AString::number<int>), it->text()); Text(text = "Counter $counter")
Increment Button { "Count" }.connect(&AView::clicked, [&] { mCounter += 1; }) Button(onClick = { counter++ })

AUI tend to have longer expressions but does not differ that much. Jetpack Compose is an immediate mode UI, whereas AUI is a retained mode UI.

Source Code#

Repository

CMakeLists.txt#

1
2
aui_executable(aui.example.counter)
aui_link(aui.example.counter PRIVATE aui::views)

src/main.cpp#

 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
#include <AUI/Platform/Entry.h>
#include <AUI/Platform/AWindow.h>
#include <AUI/Util/UIBuildingHelpers.h>
#include <AUI/View/AButton.h>
#include "AUI/View/ATextField.h"

using namespace declarative;

class CounterWindow: public AWindow {
public:
    CounterWindow(): AWindow("AUI - 7GUIs - Counter", 200_dp, 100_dp) {
        setContents(Centered {
          Horizontal {
            _new<ATextField>() AUI_LET {
                AObject::connect(mCounter.readProjected(AString::number<int>), it->text());
                it->setEditable(false);
            },
            Button { "Count" }.connect(&AView::clicked, [&] { mCounter += 1; }),
          },
        });
    }

private:
    AProperty<int> mCounter;
};

AUI_ENTRY {
    _new<CounterWindow>()->show();
    return 0;
}