LCUI
Die C-Bibliothek zum Erstellen von Benutzeroberflächen
Inhaltsverzeichnis
- Inhaltsverzeichnis
- Einführung
- Hauptmerkmale
- Übersicht über die Funktionen
- Architektur
- Schnellstart
- Dokumentation
- Roadmap
- Beitrag
- FAQ
- Lizenz
Einführung
中文版说明文档
LCUI ist eine in C geschriebene Bibliothek zum Erstellen grafischer Benutzeroberflächen. Ziel ist es, neue Wege zur Entwicklung von Benutzeroberflächen zu erforschen und zu praktizieren. Diese zeichnen sich durch geringe Größe, Benutzerfreundlichkeit und die Bereitstellung praktischer Entwicklungstools aus, die Entwicklern dabei helfen, schnell Desktop-Anwendungen mit grafischen Benutzeroberflächen zu erstellen.
LC leitet sich von den Initialen des Autorennamens ab. Die Bibliothek war ursprünglich dazu gedacht, dem Autor bei der Entwicklung kleiner Projekte und beim Sammeln von Entwicklungserfahrungen zu helfen. Allerdings verschaffte sich der Autor keinen Wettbewerbsvorteil auf dem von C/C++-Experten überfüllten Arbeitsmarkt und musste daher in der Web-Frontend-Entwicklung arbeiten. Aus diesem Grund tendiert LCUI nun dazu, Technologien aus dem Web-Frontend-Bereich zu integrieren.
Hauptmerkmale
- Plattformübergreifend: Unterstützt Windows und Linux.
- Vollständig kundenspezifische Komponenten: Komponenten sorgen über mehrere Plattformen hinweg für ein einheitliches Erscheinungsbild und Verhalten.
- Integrierte CSS-Engine: Unterstützt die Verwendung von CSS zum Definieren des Stils und Layouts der Benutzeroberfläche und erleichtert so den Einstieg für diejenigen mit Erfahrung in der Webentwicklung.
- Bietet moderne Entwicklungstools: Mit den Tools können Sie die TypeScript-Sprache mit JSX-Syntax, die React-Bibliothek und andere Web-Front-End-Technologien zum Schreiben von Benutzeroberflächen verwenden.
Übersicht über die Funktionen
Im folgenden Screenshot erfahren Sie mehr über die Entwicklungserfahrung von LCUI-Anwendungen:
- Komponentenentwicklung im React-ähnlichen Stil: Schreiben von UI-Konfigurationsdateien mit TypeScript. Mit den kombinierten Vorteilen von TypeScript, JSX-Syntax und der LCUI React-Bibliothek können Sie Schnittstellenstruktur, Ressourcenabhängigkeiten, Komponentenzustände, Datenbindung und Ereignisbindung prägnant beschreiben.
- Verschiedene Stylesheet-Schreibmethoden: Tailwind CSS, CSS-Module, Sass und globales CSS.
- Dateisystembasierter Router: Organisieren Sie Anwendungsseiten in Verzeichnisform, wobei jede Seite einem Verzeichnis entspricht. Der Pfad des Verzeichnisses dient als Route für diese Seite. Mit dem integrierten Anwendungsrouter können Sie problemlos Seitenwechsel und Navigation ohne manuelle Routenkonfiguration implementieren.
- Benutzerfreundliche und moderne Symbolbibliothek: Die Symbole stammen aus der Fluentui-System-Icons-Bibliothek und sind teilweise an die Eigenschaften von LCUI angepasst und bieten ähnliche Nutzungsmuster.
- Befehlszeilen-Entwicklungstool: Führen Sie den Befehl
lcui build aus, um Konfigurationsdateien im App-Verzeichnis vorzuverarbeiten, und generieren Sie dann den entsprechenden C-Quellcode und die Ressourcendateien.
Architektur
Im Laufe der Zeit wurde LCUI so aufgebaut, dass es auf verschiedenen Bibliotheken basiert:
- lib/yutil: Hilfsbibliothek, die allgemeine Datenstrukturen und Funktionen bereitstellt.
- lib/pandagl: PandaGL (Panda Graphics Library) bietet Schriftartenverwaltung, Textlayout, Bild-E/A, Grafikverarbeitung und Rendering-Funktionen.
- lib/css: CSS-Parser und Selektor-Engine mit CSS-Analyse- und Auswahlfunktionen.
- lib/ptk: Platform Toolkit-Bibliothek, die plattformübergreifende einheitliche systembezogene APIs bietet, einschließlich Nachrichtenschleife, Fensterverwaltung, Eingabemethode usw.
- lib/thread: Thread-Bibliothek, die plattformübergreifende Multithreading-Funktionen bereitstellt.
- lib/timer: Timer-Bibliothek, die die Möglichkeit bietet, Aufgaben in regelmäßigen Abständen auszuführen.
- lib/ui: UI-Kernbibliothek, die wesentliche UI-Funktionen wie UI-Komponentenverwaltung, Ereigniswarteschlange, Stilberechnung und Zeichnen bereitstellt.
- lib/ui-xml: XML-Parsing-Bibliothek, die die Möglichkeit bietet, eine Benutzeroberfläche aus XML-Dateiinhalten zu erstellen.
- lib/ui-cursor: Cursor-Bibliothek mit Funktionen zum Zeichnen von Cursorn.
- lib/ui-server: UI-Server, der die Möglichkeit bietet, UI-Komponenten Systemfenstern zuzuordnen.
- lib/ui-router: Router-Manager mit Routenzuordnungs- und Navigationsfunktionen.
- lib/ui-widgets: Vordefinierte Basiskomponentenbibliothek, die grundlegende UI-Komponenten wie Text, Schaltfläche, Bildlaufleiste usw. bereitstellt.
- lib/worker: Worker-Thread-Bibliothek, die einfache Worker-Thread-Kommunikations- und Verwaltungsfunktionen bereitstellt.
Schnellstart
Bevor Sie beginnen, müssen Sie die folgende Software auf Ihrem Computer installieren:
- Git: Versionskontrolltool zum Herunterladen des Quellcodes des Beispielprojekts.
- XMake: Build-Tool zum Erstellen des Projekts.
- Node.js: JavaScript-Laufzeitumgebung, die zum Ausführen des LCUI-Befehlszeilen-Entwicklungstools verwendet wird.
Führen Sie dann die folgenden Befehle in einem Befehlszeilenfenster aus:
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
Befolgen Sie anschließend die Anweisungen der Befehle.
Dokumentation
- Online-Dokumentation
- Bitte um Kommentare (RFC)
- Änderungsprotokoll
- Beitragsrichtlinien
Tutorials
- Aufgabenliste: Lernen Sie die grundlegenden Konzepte und die Verwendung von LCUI kennen und erfahren Sie, wie Sie damit Schnittstellen erstellen und Statusverwaltung, Schnittstellenaktualisierungen und Interaktionen implementieren.
- Rendern von Stoffanimationen: Schreiben Sie den JavaScript-Quellcode des vorhandenen Stoffsimulationsprogramms in der Sprache C um und verwenden Sie die Grafikbibliothek von Cairo für das Stoffrendering. Wenden Sie dann LCUI an, um die Wiedergabe und Interaktion von Stoffanimationen zu implementieren.
- Browser: Verwenden Sie LCUI unter Bezugnahme auf einen Webbrowser, um ähnliche Schnittstellenstruktur, Layout, Stil und Verwaltungsfunktionen für mehrere Registerkarten zu implementieren. Nutzen Sie die Routing-Management-Funktionalität von LCUI, um eine Seitenstatusverwaltung und -navigation mit mehreren Registerkarten sowie eine einfache Seite zum Durchsuchen von Dateien zu implementieren. (Dieses Tutorial ist veraltet, Beiträge zur Aktualisierung sind willkommen)
Referenzen
Einige Funktionen von LCUI und verwandten Projekten sind von anderen Open-Source-Projekten inspiriert. Sie können sich auf die Dokumentation beziehen, um die grundlegenden Konzepte und die Verwendung zu verstehen.
- DirectXTK: Quellcode-Referenz für den Schritt-Timer.
- Vue Router: Referenz für den Router-Manager. Einige Funktionalitäten verweisen auch auf den Quellcode von Vue Router.
- Next.js: Referenz für Routendefinitionsmethoden.
Roadmap
Hier sind die kommenden Artikel:
- LCUI
- Verbessern Sie das API-Design.
- Erweitern Sie die CSS-Engine, um
inherit , !important und Escape-Zeichen zu unterstützen. - Fügen Sie ein SDL-Backend hinzu, um die lib/ptk-Bibliothek zu ersetzen.
- Passen Sie es an andere Open-Source-Grafikbibliotheken an, um eine bessere Rendering-Leistung zu erzielen.
- Befehlszeilentools
-
lcui build --watch : Dateiänderungen kontinuierlich überwachen und automatisch neu erstellen. -
lcui dev-server : Erstellt ähnlich wie webpack-dev-server die LCUI-Anwendung als Website, damit Entwickler eine Vorschau der Schnittstellen im Browser anzeigen können. - Fügen Sie den Build-Cache hinzu, um nur geänderte Dateien neu zu erstellen.
- React-Komponentenbibliothek: Entwickeln Sie unter Bezugnahme auf einige Web-Frontend-Komponentenbibliotheken (z. B. radix, shadcn/ui) eine TypeScript + React-Komponentenbibliothek, die für LCUI-Anwendungen geeignet ist, und verwenden Sie Komponenten aus der LC Design-Komponentenbibliothek wieder.
- Dokumentation
- Tutorials
- Bitte um Kommentare (RFC)
Beitrag
Denken Sie, dass die Aktualisierung von LCUI langsam ist? Es gibt viele Möglichkeiten, zu LCUI beizutragen.
- Reichen Sie Fehler ein und helfen Sie uns, die Korrekturen zu überprüfen, sobald sie eingecheckt werden.
- Teilen Sie auf der Themenseite einige interessante Ideen im Zusammenhang mit der GUI-Entwicklung.
- Suchen Sie im Quellcode nach FIXME-Kommentaren und versuchen Sie, diese zu beheben.
- Finanzieren Sie die Themen, die Sie interessieren, auf IssueHunt, um andere Entwickler für Beiträge zu gewinnen.
- Überprüfen Sie die Quellcodeänderungen.
- Tragen Sie zur Fehlerbehebung bei.
LCUI hat den im Contributor Covenant definierten Verhaltenskodex übernommen. Dieses Dokument wird in vielen Open-Source-Communities verwendet und wir glauben, dass es unsere Werte gut zum Ausdruck bringt. Weitere Informationen finden Sie im Verhaltenskodex.
FAQ
Ist das ein Browser-Kernel? Oder eine Entwicklungsbibliothek wie Electron, die die Browserumgebung integriert?
Nein, Sie können es sich als eine traditionelle GUI-Entwicklungsbibliothek vorstellen, die einige Webtechnologien anwendet.
Warum verwende ich nicht Electron, da es die Verwendung der TypeScript-Sprache unterstützt?
Ja, wenn Sie Erfahrung in der Webentwicklung haben und bereit sind, Electron zu erlernen, dann ist Electron offensichtlich die beste Wahl.
Angesichts der aktuellen Möglichkeiten von LCUI ist es vor allem dazu geeignet, die persönlichen Bedürfnisse des Autors zu erfüllen und einfache Werkzeuge zu entwickeln.
Warum sollte ich LCUI anderen GUI-Bibliotheken/Frameworks vorziehen?
Wir empfehlen Ihnen, anderen GUI-Bibliotheken/Frameworks Vorrang einzuräumen.
Wie wäre es mit CSS-Unterstützung?
Im Folgenden finden Sie eine Liste der unterstützten CSS-Funktionen. Markiert ist unterstützt (bedeutet jedoch nicht vollständige Unterstützung). Nicht aufgeführte Eigenschaften werden standardmäßig nicht unterstützt.
CSS-Funktionsabdeckung
- bei Regeln
- Schlüsselwörter
- Selektoren
- Einheiten
- Eigenschaften
Lizenz
Das LCUI-Projekt wird unter der MIT-Lizenz veröffentlicht.
