LCUI
La biblioteca C para crear interfaces de usuario.
Tabla de contenido
- Tabla de contenido
- Introducción
- Características principales
- Descripción general de las funciones
- Arquitectura
- Inicio rápido
- Documentación
- Hoja de ruta
- Contribución
- Preguntas frecuentes
- Licencia
Introducción
中文版说明文档
LCUI es una biblioteca escrita en C para crear interfaces gráficas de usuario. Su objetivo es explorar y practicar nuevas formas de desarrollar interfaces de usuario, caracterizadas por su pequeño tamaño, facilidad de uso y provisión de herramientas de desarrollo convenientes para ayudar a los desarrolladores a crear rápidamente aplicaciones de escritorio con interfaces gráficas de usuario.
LC tiene su origen en las iniciales del nombre del autor. La biblioteca fue diseñada inicialmente para ayudar al autor a desarrollar pequeños proyectos y adquirir experiencia en desarrollo. Sin embargo, el autor no obtuvo ninguna ventaja competitiva en el mercado laboral, que está repleto de expertos en C/C++, y por eso tuvo que trabajar en el desarrollo web front-end. Como resultado, LCUI ahora se inclina hacia la integración de tecnologías desde el dominio web front-end.
Características principales
- Multiplataforma: soporta Windows y Linux.
- Componentes totalmente personalizados: los componentes mantienen una apariencia y un comportamiento consistentes en múltiples plataformas.
- Motor CSS integrado: admite el uso de CSS para definir el estilo y el diseño de la interfaz de usuario, lo que facilita el inicio para quienes tienen experiencia en desarrollo web.
- Proporciona herramientas de desarrollo modernas: las herramientas le permiten utilizar el lenguaje TypeScript con sintaxis JSX, la biblioteca React y otras tecnologías web front-end para escribir interfaces de usuario.
Descripción general de las funciones
Puede conocer la experiencia de desarrollo de aplicaciones LCUI en la siguiente captura de pantalla:
- Desarrollo de componentes en estilo similar a React: escritura de archivos de configuración de interfaz de usuario usando TypeScript. Con las ventajas combinadas de TypeScript, la sintaxis JSX y la biblioteca LCUI React, puede describir de manera sucinta la estructura de la interfaz, las dependencias de recursos, los estados de los componentes, el enlace de datos y el enlace de eventos.
- Varios métodos de escritura de hojas de estilo: Tailwind CSS, módulos CSS, Sass y CSS global.
- Enrutador basado en sistema de archivos: organice las páginas de la aplicación en forma de directorio, correspondiendo cada página a un directorio. La ruta del directorio sirve como ruta para esa página. Con el enrutador de aplicaciones incorporado, puede implementar fácilmente el cambio de página y la navegación sin configuración de ruta manual.
- Biblioteca de íconos moderna y fácil de usar: los íconos provienen de la biblioteca fluentui-system-icons, con personalización parcial para adaptarse a las características de LCUI, ofreciendo patrones de uso similares.
- Herramienta de desarrollo de línea de comandos: ejecute el comando
lcui build para preprocesar los archivos de configuración dentro del directorio de la aplicación y luego genere el código fuente C y los archivos de recursos correspondientes.
Arquitectura
Con el tiempo, LCUI se ha desarrollado para basarse en varias bibliotecas:
- lib/yutil: biblioteca de utilidades que proporciona estructuras de datos y funciones comunes.
- lib/pandagl: PandaGL (Panda Graphics Library), que ofrece gestión de fuentes, diseño de texto, E/S de imágenes, procesamiento de gráficos y capacidades de renderizado.
- lib/css: analizador y motor de selección de CSS que proporciona capacidades de análisis y selección de CSS.
- lib/ptk: biblioteca Platform Toolkit que ofrece API relacionadas con sistemas unificados multiplataforma, incluido bucle de mensajes, gestión de ventanas, método de entrada, etc.
- lib/thread: biblioteca de subprocesos que proporciona capacidades de subprocesos múltiples multiplataforma.
- lib/timer: biblioteca de temporizadores que proporciona la capacidad de ejecutar tareas a intervalos regulares.
- lib/ui: biblioteca central de UI que proporciona capacidades esenciales de UI, como administración de componentes de UI, cola de eventos, cálculo de estilos y dibujo.
- lib/ui-xml: biblioteca de análisis XML que proporciona la capacidad de crear una interfaz de usuario a partir del contenido de un archivo XML.
- lib/ui-cursor: biblioteca de cursores que ofrece capacidades de dibujo del cursor.
- lib/ui-server: servidor de interfaz de usuario que proporciona la capacidad de asignar componentes de interfaz de usuario a las ventanas del sistema.
- lib/ui-router: administrador de enrutadores que ofrece capacidades de navegación y mapeo de rutas.
- lib/ui-widgets: biblioteca de componentes básicos predefinidos que proporciona componentes básicos de la interfaz de usuario, como texto, botones, barra de desplazamiento, etc.
- lib/worker: biblioteca de subprocesos de trabajo que proporciona capacidades simples de gestión y comunicación de subprocesos de trabajo.
Inicio rápido
Antes de comenzar, debe instalar el siguiente software en su computadora:
- Git: herramienta de control de versiones utilizada para descargar el código fuente del proyecto de ejemplo.
- XMake: herramienta de compilación utilizada para construir el proyecto.
- Node.js: entorno de ejecución de JavaScript utilizado para ejecutar la herramienta de desarrollo de línea de comandos LCUI.
Luego, ejecute los siguientes comandos en una ventana de línea de comandos:
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
Siga las indicaciones proporcionadas por los comandos después.
Documentación
- Documentación en línea
- Solicitud de comentarios (RFC)
- Registro de cambios
- Pautas de contribución
Tutoriales
- Lista de tareas pendientes: aprenda los conceptos básicos y el uso de LCUI, así como también cómo usarlo para crear interfaces e implementar administración de estado, actualizaciones de interfaces e interacciones.
- Representación de animación de tela: reescriba el código fuente JavaScript del programa de simulación de tela existente en lenguaje C y use la biblioteca de gráficos de cairo para la renderización de tela. Luego, aplique LCUI para implementar la reproducción e interacción de la animación de la tela.
- Navegador: haciendo referencia a un navegador web, utilice LCUI para implementar una estructura de interfaz, diseño, estilo y funciones de administración de múltiples pestañas similares. Utilice la funcionalidad de administración de enrutamiento de LCUI para implementar la administración y navegación del estado de la página con múltiples pestañas, así como una página de exploración de archivos simple. (Este tutorial está desactualizado, se aceptan contribuciones para actualizarlo)
Referencias
Algunas características de LCUI y proyectos relacionados están inspiradas en otros proyectos de código abierto. Puede consultar su documentación para comprender los conceptos básicos y el uso.
- DirectXTK: referencia del código fuente para el temporizador de pasos.
- Vue Router: Referencia para el administrador de enrutadores. Algunas funcionalidades también hacen referencia al código fuente de Vue Router.
- Next.js: Referencia para métodos de definición de rutas.
Hoja de ruta
Aquí están los próximos artículos:
- LCUI
- Mejorar el diseño de API.
- Mejore el motor CSS para admitir caracteres
inherit , !important y de escape. - Agregue el backend de SDL para reemplazar la biblioteca lib/ptk.
- Adáptese a otras bibliotecas de gráficos de código abierto para obtener un mejor rendimiento de renderizado.
- Herramientas de línea de comandos
-
lcui build --watch : monitorea continuamente los cambios de archivos y los reconstruye automáticamente. -
lcui dev-server : similar a webpack-dev-server, crea la aplicación LCUI como un sitio web para que los desarrolladores obtengan una vista previa de las interfaces en el navegador. - Agregue caché de compilación para reconstruir solo los archivos que han cambiado.
- Biblioteca de componentes de React: haciendo referencia a algunas bibliotecas de componentes de interfaz web (por ejemplo, radix, shadcn/ui), desarrolle una biblioteca de componentes TypeScript + React adecuada para aplicaciones LCUI, reutilizando componentes de la biblioteca de componentes de LC Design.
- Documentación
- Tutoriales
- Solicitud de comentarios (RFC)
Contribución
¿Crees que LCUI tarda en actualizarse? Hay muchas maneras de contribuir a LCUI.
- Envíe errores y ayúdenos a verificar las correcciones a medida que se registran.
- Comparta algunas ideas interesantes relacionadas con el desarrollo de GUI en la página de problemas.
- Busque comentarios FIXME en el código fuente e intente solucionarlos.
- Financia los problemas que te interesan en IssueHunt para atraer a otros desarrolladores a contribuir.
- Revise los cambios del código fuente.
- Contribuir con correcciones de errores.
LCUI ha adoptado el código de conducta definido por el Pacto del Contribuidor. Este documento se utiliza en muchas comunidades de código abierto y creemos que articula bien nuestros valores. Para obtener más información, consulte el Código de conducta.
Preguntas frecuentes
¿Es este un núcleo de navegador? ¿O una biblioteca de desarrollo como Electron que integra el entorno del navegador?
No, puedes considerarlo como una biblioteca de desarrollo de GUI tradicional que aplica algunas tecnologías web.
Dado que admite el uso del lenguaje TypeScript, ¿por qué no uso Electron?
Sí, si tiene experiencia en desarrollo web y está dispuesto a aprender Electron, Electron es obviamente la mejor opción.
Dadas las capacidades actuales de LCUI, es principalmente adecuado para satisfacer las necesidades personales del autor y desarrollar herramientas simples.
¿Por qué debería elegir LCUI en lugar de otras bibliotecas/marcos de GUI?
Le sugerimos que dé prioridad a otras bibliotecas/marcos de GUI.
¿Qué tal la compatibilidad con CSS?
La siguiente es una lista de funciones CSS compatibles. Marcado es compatible (pero no significa soporte total). Las propiedades no listadas no se admiten de forma predeterminada.
Cobertura de funciones CSS
- en las reglas
- palabras clave
- selectores
- unidades
- propiedades
Licencia
El proyecto LCUI se publica bajo la licencia MIT.
