NiceGUI – Versuch einer deutschen Dokumentation

24. September 2025 · Kommentieren · Kategorien: Allgemein · Tags: , ,

Da ich es mit dem Englischen nicht so habe versuche ich englische Texte mit DeepL.com zu übersetzen. Damit ich das nicht immer wieder machen muss, speichere ich die Übersetzungen auf meinen Webseiten. Hier versuche ich mich an NiceGUI. Hier folgt die erste Seite der offiziellen NiceGUI-Dokumentation:

https://nicegui.io/documentation

NiceGUI Dokumentation

Referenz, Demos und mehr

Übersicht

NiceGUI ist eine Open-Source-Python-Bibliothek zum Schreiben von grafischen Benutzeroberflächen, die im Browser laufen. Sie hat eine sehr leichte Lernkurve und bietet dennoch die Möglichkeit für fortgeschrittene Anpassungen. NiceGUI folgt einer Backend-First-Philosophie: Es kümmert sich um alle Details der Webentwicklung. Sie können sich auf das Schreiben von Python-Code konzentrieren. Dies macht es ideal für eine breite Palette von Projekten, einschließlich kurzer Skripte, Dashboards, Robotik-Projekte, IoT-Lösungen, Smart Home Automation und maschinelles Lernen.

Wie Sie diesen Leitfaden verwenden

Diese Dokumentation erklärt, wie man NiceGUI benutzt. Jede der Kacheln behandelt ein NiceGUI Thema im Detail. Es wird empfohlen, mit der Lektüre der gesamten Einführungsseite zu beginnen und sich dann bei Bedarf auf andere Abschnitte zu beziehen.

Grundlegende Konzepte

NiceGUI bietet UI Elemente wie Schaltflächen, Schieberegler, Text, Bilder, Diagramme und mehr. Ihre Anwendung fügt diese Komponenten zu Seiten zusammen. Wenn der Benutzer mit einem Element auf einer Seite interagiert, löst NiceGUI ein Ereignis (oder Aktion) aus. Sie definieren Code für die Behandlung jedes Ereignisses, z.B. was zu tun ist, wenn ein Benutzer auf eine Schaltfläche klickt, einen Wert ändert oder einen Schieberegler betätigt. Elemente können auch an ein Modell (Datenobjekt) gebunden werden, das die Benutzeroberfläche automatisch aktualisiert, wenn sich der Modellwert ändert.

Die Anordnung der Elemente auf einer Seite erfolgt über eine „deklarative Benutzeroberfläche“ oder „codebasierte Benutzeroberfläche“. Das bedeutet, dass Sie Strukturen wie Raster, Karten, Registerkarten, Karussells, Erweiterungen, Menüs und andere Layout-Elemente direkt in Code schreiben. Dieses Konzept wurde mit Flutter und SwiftUI populär gemacht. Zur besseren Lesbarkeit nutzt NiceGUI die with ...-Anweisung von Python. Dieser Kontextmanager bietet eine schöne Möglichkeit, den Code so einzurücken, dass er dem Layout der Benutzeroberfläche ähnelt.

Die Gestaltung und das Aussehen können auf verschiedene Weise gesteuert werden. Die meisten Elemente akzeptieren optionale Argumente für allgemeine Styling- und Verhaltensänderungen, wie z.B. Schaltflächensymbole oder Textfarbe. Da NiceGUI ein Web-Framework ist, können Sie fast jedes Aussehen eines Elements mit CSS ändern. Aber Elemente bieten auch .classes und .props Methoden, um Tailwind CSS und Quasar-Eigenschaften anzuwenden, die auf höherer Ebene angesiedelt und im Alltag einfacher zu benutzen sind, nachdem man den Dreh raus hat.

Aktionen, Ereignisse und Aufgaben

NiceGUI verwendet eine async/await-Ereignisschleife für die Gleichzeitigkeit, was ressourceneffizient ist und den großen Vorteil hat, dass man sich nicht um die Threadsicherheit kümmern muss. Dieser Abschnitt zeigt, wie man Benutzereingaben und andere Ereignisse wie Timer und Tastaturbindungen behandelt. Außerdem werden Hilfsfunktionen beschrieben, mit denen sich lang laufende Aufgaben in asynchrone Funktionen verpacken lassen, um die Benutzeroberfläche reaktionsfähig zu halten. Denken Sie daran, dass alle Aktualisierungen der Benutzeroberfläche auf dem Hauptthread mit seiner Ereignisschleife erfolgen müssen.

Umsetzung

NiceGUI ist mit HTML-Komponenten implementiert, die von einem HTTP-Server (FastAPI) bedient werden, auch für native Fenster. Wenn Sie HTML bereits kennen, wird Ihnen alles sehr vertraut vorkommen. Wenn Sie HTML nicht kennen, ist das auch in Ordnung! NiceGUI abstrahiert die Details, so dass Sie sich auf die Erstellung schöner Oberflächen konzentrieren können, ohne sich Gedanken darüber zu machen, wie diese implementiert werden.

NiceGUI Anwendungen ausführen

Es gibt mehrere Optionen für die Bereitstellung von NiceGUI. Standardmäßig läuft NiceGUI auf einem Server auf localhost und führt Ihre Anwendung als eine private Webseite auf dem lokalen Rechner aus. Auf diese Weise wird Ihre Anwendung in einem Webbrowser-Fenster angezeigt. Sie können NiceGUI auch in einem eigenen Fenster, getrennt von einem Webbrowser, laufen lassen. Oder Sie können NiceGUI auf einem Server laufen lassen, der viele Clients bedient – die Webseite, die Sie gerade lesen, wird von NiceGUI bedient.

Nachdem Sie Ihre Anwendungsseiten mit Komponenten erstellt haben, rufen Sie ui.run() auf, um den NiceGUI Server zu starten. Optionale Parameter für ui.run setzen Dinge wie die Netzwerkadresse und den Port an den sich der Server bindet, ob die Anwendung im nativen Modus läuft, die anfängliche Fenstergröße und viele andere Optionen. Der Abschnitt Konfiguration und Bereitstellung behandelt die Optionen der ui.run() Funktion und das FastAPI Framework auf dem sie basiert.

Personalisierung

Wenn Sie mehr Anpassungen in Ihrer Anwendung wünschen, können Sie die zugrunde liegenden Tailwind-Klassen und Quasar-Komponenten verwenden, um den Stil oder das Verhalten Ihrer Komponenten zu steuern. Sie können die verfügbaren Komponenten auch erweitern, indem Sie bestehende NiceGUI-Komponenten subklassifizieren oder neue Komponenten aus Quasar importieren. All dies ist optional. NiceGUI bietet von Haus aus alles, was Sie brauchen, um moderne, stilvolle und reaktionsfähige Benutzeroberflächen zu erstellen.

Prüfung

NiceGUI bietet ein umfassendes Test-Framework auf der Basis von pytest , mit dem Sie das Testen Ihrer Benutzeroberfläche automatisieren können. Sie können die screen fixture verwenden, die einen echten (headless) Browser startet, um mit Ihrer Anwendung zu interagieren. Dies ist ideal, wenn Sie browserspezifisches Verhalten testen möchten.

Aber die meiste Zeit ist das neu eingeführte Benutzer-Fixture von NiceGUI besser geeignet: Es simuliert die Benutzerinteraktion nur auf Python-Ebene und ist daher rasend schnell. Die klassische Testpyramide, in der UI-Tests als langsam und teuer gelten, gilt damit nicht mehr. Dies kann enorme Auswirkungen auf Ihre Entwicklungsgeschwindigkeit, Qualität und Ihr Vertrauen haben.

Karte von NiceGUI

Diese Übersicht zeigt die Struktur von NiceGUI. Es ist eine Karte des NiceGUI Namensraumes und dessen Inhalt. Sie ist nicht vollständig, aber sie gibt Ihnen eine gute Vorstellung von dem, was verfügbar ist. Ein laufendes Ziel ist es, diese Karte vollständiger zu machen und fehlende Links zur Dokumentation hinzuzufügen.

ui

UI-Elemente und andere wesentliche Elemente für den Betrieb einer NiceGUI-Anwendung.

app

App-weiter Speicher, Einhängepunkte und Lebenszyklus-Hooks.

  • app.storage:
    • app.storage.tab: im Speicher des Servers abgelegt, eindeutig pro Tab
    • app.storage.client: wird im Speicher des Servers gespeichert, einmalig für jeden mit einer Seite verbundenen Client
    • app.storage.user: in einer Datei auf dem Server gespeichert, eindeutig pro Browser
    • app.storage.general: in einer Datei auf dem Server gespeichert, die von der gesamten Anwendung genutzt wird
    • app.storage.browser: gespeichert im lokalen Speicher des Browsers, eindeutig pro Browser
  • Lebenszyklus-Haken:
    • app.on_connect(): wird aufgerufen, wenn ein Client eine Verbindung herstellt
    • app.on_disconnect(): wird aufgerufen, wenn ein Client die Verbindung trennt
    • app.on_startup(): wird aufgerufen, wenn die Anwendung startet
    • app.on_shutdown(): wird aufgerufen, wenn die Anwendung heruntergefahren wird
    • app.on_exception(): wird aufgerufen, wenn eine Ausnahme auftritt
    • app.on_page_exception(): wird aufgerufen, wenn beim Aufbau einer Seite eine Ausnahme auftritt
  • app.shutdown(): Beendet die Anwendung
  • statische Dateien:
  • app.native: konfiguriert die App, wenn sie im nativen Modus läuft

html

Reine HTML-Elemente:

a, abbr, acronym, address, area, article, aside, audio, b, basefont, bdi, bdo, big, blockquote, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del_, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, header, hgroup, hr, i, iframe, img, input_, ins, kbd, label, legend, li, main, map_, mark, menu, meter, nav, object_, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, search, section, select, small, source, span, strong, sub, summary, sup, svg, table, tbody, td, template, textarea, tfoot, th, thead, time, tr, track, u, ul, var, video, wbr

background_tasks

Führen Sie asynchrone Funktionen im Hintergrund aus.

  • create(): Erstellen einer Hintergrundaufgabe
  • create_lazy(): verhindert, dass zwei Aufgaben mit demselben Namen gleichzeitig laufen
  • await_on_shutdown: markiert eine Coroutine-Funktion, die beim Herunterfahren erwartet wird (standardmäßig werden alle Hintergrundaufgaben abgebrochen)

run

Führen Sie IO- und CPU-gebundene Funktionen in separaten Threads und Prozessen aus.

  • run.cpu_bound(): Ausführung einer CPU-gebundenen Funktion in einem separaten Prozess
  • run.io_bound(): Ausführung einer IO-gebundenen Funktion in einem separaten Thread

binding

Eigenschaften von Objekten aneinander binden.

observables

Beobachtbare Sammlungen, die Beobachter benachrichtigen, wenn sich ihr Inhalt ändert.

  • ObservableCollection: Basisklasse
  • ObservableDict: ein beobachtbares Wörterbuch
  • ObservableList: eine beobachtbare Liste
  • ObservableSet: eine beobachtbare Menge

testing

Schreiben Sie automatisierte UI-Tests, die in einem Headless-Browser (langsam) oder vollständig in Python simuliert (schnell) ablaufen.

  • Screen fixture: Start eines echten (headless) Browsers zur Interaktion mit Ihrer Anwendung
  • Benutzer fixture: Simulation der Benutzerinteraktion auf Python-Ebene (schnell)

Soweit die DeepL Übersetzung.

Die Links führen noch zu den englischen Originalseiten. Wenn ich mich mit einem Thema näher beschäfftige werde ich diese Seite auch auf deutsch übersetzen lassen.

Links zu den speziellen Themenbereichen:

Hier sind die Links aus der originalen ersten Seite der NiceGUI-Dokumentation zu speziellen Themenbereichen. Sie sind noch in der Bearbeitung. Es befinden sich aber die Links zu den Originalseiten darin.

NiceGUI – Doku: Text-Elemente

NiceGUI – Doku: Kontrollstrukturen

NiceGUI – Doku: Audiovisuelle Elemente

NiceGUI – Doku: Daten Elemente

NiceGUI – Doku: Bindung Eigenschaften

NiceGUI – Doku: Seiten Layout

NiceGUI – Doku: Styling & Erscheinungsbild

NiceGUI – Doku: Aktion & Ereignisse

NiceGUI – Doku: Seiten & Weiterleitung

NiceGUI – Doku: Konfiguration & Einsatz

NiceGUI – Doku: Prüfung

Zu den Beispielen geht es hier: https://nicegui.io/#examples

Auf Github befindet NiceGUI sich hier: https://github.com/zauberzeug/nicegui

NiceGUI – ein Mini-Manual von ChatGPT

24. September 2025 · Kommentieren · Kategorien: Allgemein · Tags: , ,

📘 Mini-Manual zu NiceGUI (Deutsch)

1. Einführung

NiceGUI ist ein Python-Framework zur schnellen Erstellung von Weboberflächen. Es basiert auf Vue.js und Quasar, erfordert aber nur Python-Kenntnisse. Damit lassen sich Dashboards, GUIs und interaktive Apps mit wenigen Zeilen Code erstellen.

2. Installation

pip install nicegui
python main.py

Standardmäßig ist die Oberfläche unter http://localhost:8080 erreichbar.

3. Erste Schritte

Beispiel: „Hello World“

from nicegui import ui

ui.label('Hallo Welt!')

ui.run()

Buttons und Aktionen

from nicegui import ui

def begruessung():
    ui.notify('Willkommen bei NiceGUI!')

ui.button('Klick mich', on_click=begruessung)
ui.run()

4. Wichtige UI-Elemente

  • Labels: ui.label('Text')
  • Buttons: ui.button('Titel', on_click=funktion)
  • Textfelder: ui.input('Name')
  • Checkboxen: ui.checkbox('Option')
  • Slider: ui.slider(min=0, max=100)
  • Diagramme: ui.line_chart(...)
  • Tabellen: ui.table(columns=[...], rows=[...])

5. Layouts

Spalten und Reihen

with ui.row():
    ui.label('Links')
    ui.label('Rechts')

with ui.column():
    ui.button('Oben')
    ui.button('Unten')

Karten

with ui.card():
    ui.label('Eine Karte')
    ui.button('Aktion')

6. Datenbindung

name = ui.input('Dein Name')
ui.label().bind_text_from(name, 'value')

Das Label zeigt immer den aktuellen Eingabewert.

7. Navigation

from nicegui import ui

@ui.page('/seite1')
def seite1():
    ui.label('Dies ist Seite 1')

ui.run()

Die Seite ist erreichbar unter http://localhost:8080/seite1.

8. Benachrichtigungen und Dialoge

ui.notify('Dies ist eine Nachricht')

with ui.dialog() as dialog, ui.card():
    ui.label('Bist du sicher?')
    ui.button('Ja', on_click=dialog.close)

ui.button('Dialog öffnen', on_click=dialog.open)

9. Integration mit Python

NiceGUI läuft vollständig in Python, sodass sich Daten aus Skripten, Datenbanken oder Sensoren direkt einbinden lassen.

Beispiel: Counter

counter = 0
label = ui.label(f'Zähler: {counter}')

def hochzaehlen():
    global counter
    counter += 1
    label.text = f'Zähler: {counter}'

ui.button('++', on_click=hochzaehlen)
ui.run()

10. Deployment

  • Lokal: Standardmäßig über ui.run()
  • Docker:
FROM python:3.11-slim
RUN pip install nicegui
COPY main.py .
CMD ["python", "main.py"]
  • Server: per uvicorn oder in Cloud-Diensten wie Heroku, Railway, Fly.io.

11. Nützliche Links

✅ Mit diesem Mini-Manual hast du die wichtigsten Grundlagen auf Deutsch. Du kannst direkt starten und GUIs mit Python entwickeln!