LCUI
La bibliothèque C pour créer des interfaces utilisateur
Table des matières
- Table des matières
- Introduction
- Principales caractéristiques
- Présentation des fonctionnalités
- Architecture
- Démarrage rapide
- Documentation
- Feuille de route
- Contribution
- FAQ
- Licence
Introduction
中文版说明文档
LCUI est une bibliothèque écrite en C pour créer des interfaces utilisateur graphiques. Son objectif est d'explorer et de mettre en pratique de nouvelles façons de développer des interfaces utilisateur, caractérisées par sa petite taille, sa facilité d'utilisation et la fourniture d'outils de développement pratiques pour aider les développeurs à créer rapidement des applications de bureau avec des interfaces utilisateur graphiques.
LC provient des initiales du nom de l'auteur. La bibliothèque a été initialement conçue pour aider l'auteur à développer de petits projets et à acquérir une expérience en développement. Cependant, l’auteur n’a pas obtenu d’avantage concurrentiel sur le marché du travail, qui regorge d’experts en C/C++, et a donc dû travailler dans le développement web front-end. En conséquence, LCUI s’oriente désormais vers l’intégration des technologies du domaine web front-end.
Principales caractéristiques
- Multiplateforme : prend en charge Windows et Linux.
- Composants entièrement personnalisés : les composants conservent une apparence et un comportement cohérents sur plusieurs plates-formes.
- Moteur CSS intégré : prend en charge l'utilisation de CSS pour définir le style et la présentation de l'interface utilisateur, ce qui facilite le démarrage pour ceux qui ont une expérience en développement Web.
- Fournit des outils de développement modernes : les outils vous permettent d'utiliser le langage TypeScript avec la syntaxe JSX, la bibliothèque React et d'autres technologies Web frontales pour écrire des interfaces utilisateur.
Présentation des fonctionnalités
Vous pouvez en apprendre davantage sur l'expérience de développement des applications LCUI à partir de la capture d'écran suivante :
- Développement de composants dans un style de type React : écriture de fichiers de configuration d'interface utilisateur à l'aide de TypeScript. Grâce aux avantages combinés de TypeScript, de la syntaxe JSX et de la bibliothèque LCUI React, vous pouvez décrire succinctement la structure de l'interface, les dépendances des ressources, les états des composants, la liaison de données et la liaison d'événements.
- Diverses méthodes d'écriture de feuilles de style : Tailwind CSS, modules CSS, Sass et CSS global.
- Routeur basé sur le système de fichiers : organisez les pages d'application sous forme de répertoire, chaque page correspondant à un répertoire. Le chemin du répertoire sert de route pour cette page. Avec le routeur d'application intégré, vous pouvez facilement mettre en œuvre le changement de page et la navigation sans configuration manuelle de l'itinéraire.
- Bibliothèque d'icônes conviviale et moderne : les icônes proviennent de la bibliothèque fluentui-system-icons, avec une personnalisation partielle pour s'adapter aux caractéristiques de LCUI, offrant des modèles d'utilisation similaires.
- Outil de développement en ligne de commande : exécutez la commande
lcui build pour prétraiter les fichiers de configuration dans le répertoire de l'application, puis générez le code source C et les fichiers de ressources correspondants.
Architecture
Au fil du temps, LCUI a été construit pour s'appuyer sur diverses bibliothèques :
- lib/yutil : bibliothèque d'utilitaires fournissant des structures de données et des fonctions communes.
- lib/pandagl : PandaGL (Panda Graphics Library), offrant des capacités de gestion des polices, de mise en page du texte, d'E/S d'image, de traitement graphique et de rendu.
- lib/css : analyseur CSS et moteur de sélection fournissant des capacités d'analyse et de sélection CSS.
- lib/ptk : bibliothèque Platform Toolkit offrant des API multiplateformes unifiées liées au système, y compris la boucle de messages, la gestion des fenêtres, la méthode de saisie, etc.
- lib/thread : bibliothèque de threads offrant des fonctionnalités multithread multiplateformes.
- lib/timer : Bibliothèque de minuterie offrant la possibilité d'exécuter des tâches à intervalles réguliers.
- lib/ui : bibliothèque principale de l'interface utilisateur fournissant des fonctionnalités essentielles de l'interface utilisateur telles que la gestion des composants de l'interface utilisateur, la file d'attente des événements, le calcul de style et le dessin.
- lib/ui-xml : bibliothèque d'analyse XML offrant la possibilité de créer une interface utilisateur à partir du contenu d'un fichier XML.
- lib/ui-cursor : Bibliothèque de curseurs offrant des capacités de dessin de curseur.
- lib/ui-server : serveur d'interface utilisateur offrant la possibilité de mapper les composants de l'interface utilisateur aux fenêtres du système.
- lib/ui-router : gestionnaire de routeur offrant des capacités de cartographie d'itinéraire et de navigation.
- lib/ui-widgets : bibliothèque de composants de base prédéfinis fournissant des composants de base de l'interface utilisateur tels que du texte, un bouton, une barre de défilement, etc.
- lib/worker : bibliothèque de threads de travail offrant des capacités simples de communication et de gestion des threads de travail.
Démarrage rapide
Avant de commencer, vous devez installer les logiciels suivants sur votre ordinateur :
- Git : outil de contrôle de version utilisé pour télécharger le code source de l'exemple de projet.
- XMake : outil de build utilisé pour construire le projet.
- Node.js : environnement d'exécution JavaScript utilisé pour exécuter l'outil de développement en ligne de commande LCUI.
Ensuite, exécutez les commandes suivantes dans une fenêtre de ligne de commande :
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
Suivez ensuite les invites fournies par les commandes.
Documentation
- Documentation en ligne
- Demande de commentaires (RFC)
- Journal des modifications
- Directives de contribution
Tutoriels
- Liste de tâches : découvrez les concepts de base et l'utilisation de LCUI, ainsi que comment l'utiliser pour créer des interfaces et implémenter la gestion des états, les mises à jour d'interface et les interactions.
- Animation de rendu de tissu : réécrivez le code source JavaScript du programme de simulation de tissu existant en langage C et utilisez la bibliothèque graphique du Caire pour le rendu de tissu. Ensuite, appliquez LCUI pour implémenter la lecture et l’interaction des animations Fabric.
- Navigateur : en faisant référence à un navigateur Web, utilisez LCUI pour implémenter une structure d'interface, une mise en page, un style et des fonctionnalités de gestion multi-onglets similaires. Utilisez la fonctionnalité de gestion de routage de LCUI pour implémenter la gestion et la navigation de l'état des pages multi-onglets, ainsi qu'une simple page de navigation dans les fichiers. (Ce tutoriel est obsolète, les contributions pour le mettre à jour sont les bienvenues)
Références
Certaines fonctionnalités de LCUI et des projets associés sont inspirées d'autres projets open source. Vous pouvez vous référer à leur documentation pour comprendre les concepts de base et l'utilisation.
- DirectXTK : référence du code source pour le minuteur pas à pas.
- Vue Router : Référence pour le gestionnaire de routeur. Certaines fonctionnalités font également référence au code source de Vue Router.
- Next.js : référence pour les méthodes de définition d'itinéraire.
Feuille de route
Voici les articles à venir :
- LCUI
- Améliorez la conception des API.
- Améliorez le moteur CSS pour prendre en charge les caractères
inherit , !important et d'échappement. - Ajoutez le backend SDL pour remplacer la bibliothèque lib/ptk.
- Adaptez-vous à d'autres bibliothèques graphiques open source pour de meilleures performances de rendu.
- Outils de ligne de commande
-
lcui build --watch : Surveillez en permanence les modifications des fichiers et reconstruisez automatiquement. -
lcui dev-server : similaire à webpack-dev-server, construit l'application LCUI en tant que site Web permettant aux développeurs de prévisualiser les interfaces dans le navigateur. - Ajoutez un cache de build pour reconstruire uniquement les fichiers qui ont été modifiés.
- Bibliothèque de composants React : en référençant certaines bibliothèques de composants frontend Web (par exemple, radix, shadcn/ui), développer une bibliothèque de composants TypeScript + React adaptée aux applications LCUI, en réutilisant les composants de la bibliothèque de composants LC Design.
- Documentation
- Tutoriels
- Demande de commentaires (RFC)
Contribution
Vous pensez que la mise à jour de LCUI est lente ? il existe de nombreuses façons de contribuer à LCUI.
- Soumettez les bogues et aidez-nous à vérifier les correctifs au fur et à mesure de leur enregistrement.
- Partagez quelques idées intéressantes liées au développement de l’interface graphique dans la page des problèmes.
- Recherchez les commentaires FIXME dans le code source et essayez de les corriger.
- Financez les problèmes qui vous intéressent sur IssueHunt pour inciter d'autres développeurs à contribuer.
- Passez en revue les modifications du code source.
- Contribuer aux corrections de bugs.
LCUI a adopté le code de conduite défini par le Contributor Covenant. Ce document est utilisé dans de nombreuses communautés open source et nous pensons qu'il exprime bien nos valeurs. Pour en savoir plus, consultez le Code de conduite.
FAQ
Est-ce un noyau de navigateur ? Ou une bibliothèque de développement comme Electron qui intègre l'environnement du navigateur ?
Non, vous pouvez le considérer comme une bibliothèque de développement d'interface graphique traditionnelle appliquant certaines technologies Web.
Puisqu'il prend en charge l'utilisation du langage TypeScript, pourquoi n'utilise-je pas Electron ?
Oui, si vous avez une expérience en développement Web et que vous souhaitez apprendre Electron, alors Electron est évidemment le meilleur choix.
Compte tenu des capacités actuelles de LCUI, il convient avant tout pour répondre aux besoins personnels de l'auteur et développer des outils simples.
Pourquoi devrais-je choisir LCUI plutôt que d’autres bibliothèques/frameworks GUI ?
Nous vous suggérons de donner la priorité aux autres bibliothèques/frameworks GUI.
Qu'en est-il du support CSS ?
Voici une liste des fonctionnalités CSS prises en charge. La case cochée est prise en charge (mais ne signifie pas une prise en charge complète). Les propriétés non répertoriées ne sont pas prises en charge par défaut.
Couverture des fonctionnalités CSS
- aux règles
- mots-clés
- sélecteurs
- unités
- propriétés
Licence
Le projet LCUI est publié sous la licence MIT.
