7GUIs Counter

Note

This page describes an example listed in 7GUIs.

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.

/*
 * AUI Framework - Declarative UI toolkit for modern C++20
 * Copyright (C) 2020-2024 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>() 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 Files#

• Repository
• src/main.cpp

© 2025 AUI Framework Contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. All trademarks are property of their respective owners.

Contents

Comparison to Jetpack Compose

Source Files

View Page SourceEdit Page Source