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.
ui.element
: Basisklasse für alle UI-Elemente
- Anpassung:
- Interaktion:
.on()
: füge Python- und JavaScript-Eventhandler hinzu
.update()
: sende ein Update an den Client (geschieht meist automatisch)
. run_method()
: eine Methode auf der Client-Seite ausführen
.get_computed_prop()
: den Wert einer Eigenschaft holen, die auf der Client-Seite berechnet wird
- hierarchy:
mit ...:
Elemente deklarativ verschachteln
__iter__
: ein Iterator über alle Kind-Elemente
Vorfahren
: ein Iterator über die Eltern, Großeltern, etc.
Nachfahren
: ein Iterator über alle Kind-Elemente, Enkel, etc.
Slots
: ein Wörterbuch von benannten Slots
add_slot
: füllt einen neuen Slot mit NiceGUI Elementen oder einen scoped Slot mit Template Strings
clear
: entfernt alle Kindelemente
move
: ein Element zu einem neuen Elternteil verschieben
remove
: ein Kindelement entfernen
delete
: ein Element und alle seine Kinder löschen
is_deleted
: ob ein Element gelöscht wurde
- splitter
ui.stepper
, ui.step
, ui.stepper_navigation
ui. sub_pages
ui.switch
ui.tabs
, ui. tab
, ui.tab_panels
, ui.tab_panel
ui.table
ui. textarea
ui.time
ui.timeline
, ui. timeline_entry
ui.toggle
ui.tooltip
ui. tree
ui.upload
ui.video
- spezielle Layout Elemente:
ui.header
ui.footer
ui.drawer
, ui.left_drawer
, ui.right_drawer
ui.page_sticky
- spezielle Funktionen und Objekte:
ui.add_body_html
und ui.add_head_html
: fügen HTML in den Body und Head der Seite ein
ui.add_css
, ui.add_sass
und ui. add_scss
: fügen CSS, SASS und SCSS zur Seite hinzu
ui.clipboard
: interagieren mit der Zwischenablage des Browsers
ui.colors
: definieren das Hauptfarbschema für eine Seite
ui. context
: holt den aktuellen UI Kontext inklusive der client
und request
Objekte
ui.dark_mode
: holt und setzt den Dark Mode auf einer Seite
ui. download
: lädt eine Datei auf den Client herunter
ui.fullscreen
: betritt, verlässt und schaltet den Vollbildmodus um
ui.keyboard
: definiert Tastatur-Event-Handler
ui. navigate
: lässt den Browser zu einer anderen Stelle navigieren
ui.notify
: zeigt eine Benachrichtigung
ui.on
: registriert einen Event Handler
ui. page_title
: ändert den aktuellen Seitentitel
ui.query
: fragt HTML-Elemente auf der Client-Seite ab, um Props, Klassen und Style-Definitionen zu ändern
ui.run
und ui. run_with
: führen die App aus (eigenständig oder an eine FastAPI-App angehängt)
ui.run_javascript
: führen benutzerdefiniertes JavaScript auf der Client-Seite aus (kann getElement()
, getHtmlElement()
und emitEvent()
verwenden)
ui. teleport
: teleportiert ein Element an eine andere Stelle im HTML DOM
ui.timer
: führt eine Funktion periodisch oder einmalig nach einer Verzögerung aus
ui.update
: sendet Aktualisierungen von mehreren Elementen an den Client
- Dekorateure:
ui.page
: eine Seite definieren (im Gegensatz zur automatisch generierten „Auto-Index-Seite“)
ui.refreshable
, ui.refreshable_method
: aktualisierbare UI-Container definieren (kann ui.state
verwenden)
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
Neueste Kommentare