Beispiele zum Anfassen

// The smallest AURA dialog (examples/hello): a text and a button that counts the taps.
Dialog Hello {
    signal countChanged(int value)
    property int count
    size: screen.width, screen.height

    Rect {
        id: background
        color: #dede97
        size: parent.width, parent.height
    }
    Text {
        id: title
        text: tr("hello_title", "Hallo AURA")
        pixelSize: 40
        place: centerX, top 120
    }
    Rect {
        id: button
        color: button.pressed ? #1d5bb0 : #246ccc
        radius: 8
        size: 260, 64
        place: centerX, below title 60
        onTap: countChanged(count + 1)
        Text {
            text: "Getippt: " + str(count)
            pixelSize: 24
            color: #ffffff
            place: center
        }
    }
}

// The smallest AURA program (docs/aura.md, "Hallo Welt"): hello.aura with the default context,
// written with aura.h (AURA without namespaces).
#include <aura.h>

#include "aura_ui.h"

#include <cstring>

int main(int argc, char** argv)
{
	AuraApplication app({.title = "Hello"});
	const bool render = argc == 3 && std::strcmp(argv[1], "--render") == 0;
	if (!render && !app.init()) {
		return 1;
	}
	AuraBasicContext<> ctx(app);
	auto ui = views::Hello::build(app.addFrame(), ctx);
	ui->countChanged = [&ui](double value) { ui->setCount(value); };
	if (render) {
		return AuraApplication::renderToPng(app.root(), app.options().width, app.options().height, argv[2]) ? 0 : 1;
	}
	return app.run();
}

# The smallest AURA program: one dialog, the default context, no kiosk.
#   hello                 a window
#   hello --render x.png  the dialog as PNG (no window; the ctest)
add_executable(aura-hello main.cpp)
aura_add_ui(aura-hello FILES hello.aura)
target_link_libraries(aura-hello PRIVATE aura::ui)
aura_set_warnings(aura-hello)
if(AURA_TESTS)
	add_test(NAME aura_hello COMMAND aura-hello --render ${CMAKE_CURRENT_BINARY_DIR}/hello.png)
endif()

Screen DemoControls {
    property int count
    property string status
    signal tapped
    signal changed(bool value)
    signal selected(int index)
    signal slid(real value)
    DemoTitle { x: 24; y: 18; label: tr("demo.ui.controls.hands_on_widgets", "Widgets zum Anfassen") }
    DemoLabel { x: 24; y: 62; label: tr("demo.ui.controls.tap_select_and_drag_values_are_bound_directly", "Tippen, auswählen und ziehen · Werte werden direkt weitergebunden") }
    Rect {
        color: #ffffff; radius: 14; border: 1, theme.line
        x: 24; y: 110; size: 490, 560
        DemoText { x: 24; y: 24; label: tr("demo.ui.controls.actions_and_selection", "Aktionen und Auswahl") }
        DemoButton { id: counter; name: "counter-button"; x: 24; y: 76; label: tr("demo.ui.controls.taps", "Getippt: ") + str(count); onTap: tapped; pressedColor: #004f54 }
        DemoButton { x: 244; y: 76; label: tr("demo.ui.controls.disabled", "Deaktiviert"); enabled: false }
        DemoLabel { x: 24; y: 140; label: tr("demo.ui.controls.press_and_hold_to_see_the_pressed_state", "Gedrückt halten zeigt den Druckzustand.") }
        CheckBox { id: check; x: 24; y: 194; size: 420, 44; text: tr("demo.ui.controls.enable_option", "Option aktivieren"); font: theme.font, 20; color: theme.accent; onToggle: changed }
        Switch { id: enabledSwitch; name: "enabled-switch"; x: 24; y: 258; size: 420, 44; text: tr("demo.ui.controls.enable_selection", "Auswahl freigeben"); checked: true; font: theme.font, 20; color: theme.accent }
        RadioButton { id: small; x: 24; y: 330; size: 200, 44; text: tr("demo.ui.controls.small", "Klein"); checked: true; group: "demo-size"; color: theme.accent; font: theme.font, 20; enabled: enabledSwitch.checked }
        RadioButton { id: large; x: 240; y: 330; size: 200, 44; text: tr("demo.ui.controls.large", "Groß"); group: "demo-size"; color: theme.accent; font: theme.font, 20; enabled: enabledSwitch.checked }
        ComboBox { id: choice; x: 24; y: 414; size: 420, 52; options: [tr("demo.ui.controls.10_15_cm", "10 × 15 cm"), tr("demo.ui.controls.13_18_cm", "13 × 18 cm"), tr("demo.ui.controls.20_30_cm", "20 × 30 cm")]; placeholder: tr("demo.ui.controls.select_format", "Format auswählen"); font: theme.font, 20; color: #eef4f5; textColor: theme.ink; enabled: enabledSwitch.checked; onSelect: selected }
    }
    Rect {
        color: #ffffff; radius: 14; border: 1, theme.line
        x: 538; y: 110; size: 514, 560
        DemoText { x: 24; y: 24; label: tr("demo.ui.controls.one_value_multiple_views", "Ein Wert, mehrere Ansichten") }
        DemoLabel { x: 24; y: 76; label: tr("demo.ui.controls.slider_range_0_100_steps_of_5", "Slider · Bereich 0–100, Schritte von 5") }
        Slider { id: level; x: 24; y: 130; size: 460, 48; from: 0; to: 100; step: 5; value: 40; color: theme.accent; onChange: slid }
        DemoTitle { x: 24; y: 204; label: str(level.value) + " %" }
        ProgressBar { x: 24; y: 270; size: 460, 24; from: 0; to: 100; value: level.value; color: theme.accent; trackColor: #e7eef0 }
        DemoLabel { x: 24; y: 326; label: tr("demo.ui.controls.progressbar_follows_the_slider_directly_without_c", "ProgressBar folgt dem Slider ohne C++-Umweg.") }
        Text { x: 24; y: 390; size: 460, 110; text: status; font: theme.font, 19; color: theme.ink; wrap: 460 }
    }
}

record DemoLayoutEntry { string title }
Screen DemoLayouts {
    property DemoLayoutEntry[] entries
    property DemoLayoutEntry[] many
    property bool footer
    signal toggleFooter
    DemoTitle { x: 28; y: 20; label: tr("demo.ui.layouts.layouts_and_data", "Layouts und Daten") }
    DemoLabel { x: 28; y: 63; label: tr("demo.ui.layouts.flexible_arrangement_data_lists_and_visible_cells_only", "Flexible Anordnung, Datenlisten und nur sichtbare Zellen.") }
    Rect { color: #ffffff; radius: 14; border: 1, theme.line; x: 28; y: 105; size: 490, 260
        DemoText { x: 20; y: 18; label: "Row · Column · grow · stretch" }
        Column { x: 20; y: 58; size: 450, 115; spacing: 10
            Row { stretch: true; height: 48; spacing: 10
                Rect { size: 70, 48; color: #c5eded; radius: 8 }
                Rect { size: 60, 48; grow: 1; color: theme.accent; radius: 8 }
                Rect { size: 90, 48; color: #94c9d0; radius: 8 }
            }
            Rect { stretch: true; grow: 1; color: #eaf4f5; radius: 8 }
        }
        DemoLabel { id: anchorLabel; x: 20; y: 191; label: tr("demo.ui.layouts.anchor", "Anker:") }
        DemoLabel { place: rightOf anchorLabel 14, centerYOn anchorLabel; label: tr("demo.ui.layouts.to_the_right_vertically_centered", "rechts daneben, vertikal zentriert") }
    }
    Rect { color: #ffffff; radius: 14; border: 1, theme.line; x: 538; y: 105; size: 510, 260
        DemoText { x: 20; y: 18; label: tr("demo.ui.layouts.rtl_and_automatic_wrapping", "RTL und automatischer Umbruch") }
        Row { x: 20; y: 64; size: 470, 45; direction: rightToLeft; spacing: 8
            repeat n in range(4) { Rect { size: 70, 40; color: theme.accent; radius: 7
                Text { text: str(n + 1); color: #ffffff; font: theme.font, 20; place: center }
            } }
        }
        Row { x: 20; y: 132; width: 360; wrap: true; spacing: 8
            repeat n in range(8) { Rect { size: 78, 32; color: #dceff0; radius: 7
                Text { text: tr("demo.ui.layouts.chip", "Chip ") + str(n + 1); font: theme.font, 14; color: theme.ink; place: center }
            } }
        }
    }
    Rect { color: #ffffff; radius: 14; border: 1, theme.line; x: 28; y: 385; size: 490, 330
        DemoText { x: 20; y: 18; label: tr("demo.ui.layouts.repeat_if_horizontal_scrolling", "repeat + if · horizontal scrollen") }
        DemoButton { x: 20; y: 58; width: 240; name: "layout-note-toggle"; label: tr("demo.ui.layouts.toggle_note", "Hinweis umschalten"); onTap: toggleFooter }
        Scroll { clip: true; x: 20; y: 125; size: 450, 95; direction: horizontal; contentWidth: records.width
            Row { id: records; spacing: 12
                repeat entry in entries { Rect { size: 160, 85; radius: 9; color: #eaf4f5
                    DemoText { label: entry.title; place: center }
                } }
            }
        }
        if footer { DemoLabel { name: "conditional-note"; x: 20; y: 253; label: tr("demo.ui.layouts.the_list_is_generated_from_typed_records", "Die Liste entsteht aus typisierten Records.") } }
    }
    Rect { color: #ffffff; radius: 14; border: 1, theme.line; x: 538; y: 385; size: 510, 330
        DemoText { x: 20; y: 18; label: tr("demo.ui.layouts.grid_lazy_repeat_2_000_entries", "Grid + lazy repeat · 2.000 Einträge") }
        Scroll { name: "lazy-scroll"; clip: true; x: 20; y: 62; size: 470, 245; contentHeight: cells.height
            Grid { id: cells; columns: 2; cell: 235, 46
                repeat entry in many lazy { Rect { stretch: true; size: 223, 38; color: #eaf4f5; radius: 6
                    DemoLabel { x: 12; y: 10; label: entry.title }
                } }
            }
        }
    }
}

Screen DemoMotion {
    const real popoverWidth: 205
    state mode: idle, active
    property bool moving
    signal changeState
    signal toggleMotion
    DemoTitle { x: 28; y: 20; label: tr("demo.ui.motion.animations_and_states", "Animationen und Zustände") }
    DemoLabel { x: 28; y: 63; label: tr("demo.ui.motion.tap_to_explore_transitions_feedback_and_elements_appearing_or_disappea", "Antippen: Übergänge, Rückmeldung und ein- oder ausblendende Elemente.") }
    DemoButton { x: 28; y: 105; name: "motion-state"; label: tr("demo.ui.motion.change_state", "Zustand wechseln"); onTap: changeState }
    DemoButton { x: 250; y: 105; width: 240; label: moving ? tr("demo.ui.motion.pause_motion", "Bewegung pausieren") : tr("demo.ui.motion.start_motion", "Bewegung starten"); onTap: toggleMotion }
    Rect { color: #ffffff; radius: 14; border: 1, theme.line; x: 28; y: 180; size: 1020, 235
        DemoText { x: 20; y: 18; label: "state / when · animate · enter / exit" }
        Rect { id: traveler; x: 30; y: 82; size: 120, 105; radius: 16; color: theme.accent
            animate: x 650 outBack, color 500 linear, rotation 650 outBack
            Text { text: "idle"; font: theme.font, 18; place: center; color: #ffffff
                when mode == active { text: "active" }
            }
            when mode == active { x: 600; color: #da733b; rotation: 8 }
        }
        if mode == active { Popover { name: "state-popover"; x: 780; y: 85; size: popoverWidth, 100; color: #dceff0; markerPos: popoverWidth / 2
            enter: unfold 0 350 outBack
            exit: opacity 0 250 linear
            DemoLabel { label: tr("demo.ui.motion.new_in_the_scene_graph", "Neu im Szenengraph"); place: center }
        } }
    }
    Rect { color: #ffffff; radius: 14; border: 1, theme.line; x: 28; y: 435; size: 1020, 280
        DemoText { x: 20; y: 18; label: "loop · spin · pressSink · glow · Ripple" }
        if moving {
            Rect { x: 70; y: 100; size: 85, 85; radius: 16; color: theme.accent; loop: rotation -18 18 1000 inOutQuad pause 150 }
            Rect { x: 255; y: 100; size: 85, 85; radius: 10; color: #da733b; spin: 3000 }
        }
        Rect { id: pressure; x: 490; y: 91; size: 225, 105; radius: 16; color: theme.accent; pressSink: 6, 170; glow: pressure.pressed; onTap: ignore
            Text { text: tr("demo.ui.motion.press_and_hold", "Gedrückt halten"); font: theme.font, 18; color: #ffffff; place: center }
            Ripple { color: #ffffff }
        }
        DemoLabel { x: 38; y: 225; label: tr("demo.ui.motion.pausing_removes_both_endless_animations_transitions_remain_interactive", "Pausieren entfernt die beiden endlosen Animationen. Übergänge bleiben bedienbar.") }
    }
}