LCUI
A biblioteca C para construir interfaces de usuário
Índice
- Índice
- Introdução
- Principais recursos
- Visão geral dos recursos
- Arquitetura
- Início rápido
- Documentação
- Roteiro
- Contribuição
- Perguntas frequentes
- Licença
Introdução
中文版说明文档
LCUI é uma biblioteca escrita em C para construção de interfaces gráficas de usuário. Seu objetivo é explorar e praticar novas maneiras de desenvolver interfaces de usuário, caracterizadas por seu pequeno tamanho, facilidade de uso e fornecimento de ferramentas de desenvolvimento convenientes para ajudar os desenvolvedores a criar rapidamente aplicativos de desktop com interfaces gráficas de usuário.
LC tem origem nas iniciais do nome do autor. A biblioteca foi inicialmente projetada para ajudar o autor a desenvolver pequenos projetos e ganhar experiência em desenvolvimento. Porém, o autor não obteve vantagem competitiva no mercado de trabalho, que está lotado de especialistas em C/C++, e por isso teve que trabalhar no desenvolvimento de front-end web. Como resultado, a LCUI agora se inclina para a integração de tecnologias do domínio front-end da web.
Principais recursos
- Plataforma cruzada: suporta Windows e Linux.
- Componentes totalmente personalizados: os componentes mantêm aparência e comportamento consistentes em diversas plataformas.
- Mecanismo CSS integrado: suporta o uso de CSS para definir o estilo e o layout da interface do usuário, facilitando o início para aqueles com experiência em desenvolvimento web.
- Fornece ferramentas de desenvolvimento modernas: as ferramentas permitem que você use a linguagem TypeScript com sintaxe JSX, a biblioteca React e outras tecnologias de front-end da web para escrever interfaces de usuário.
Visão geral dos recursos
Você pode aprender sobre a experiência de desenvolvimento de aplicativos LCUI na captura de tela a seguir:
- Desenvolvimento de componentes no estilo React: Escrevendo arquivos de configuração de UI usando TypeScript. Com as vantagens combinadas do TypeScript, da sintaxe JSX e da biblioteca LCUI React, você pode descrever sucintamente a estrutura da interface, dependências de recursos, estados de componentes, vinculação de dados e vinculação de eventos.
- Vários métodos de escrita de folhas de estilo: Tailwind CSS, módulos CSS, Sass e CSS global.
- Roteador baseado em sistema de arquivos: Organize as páginas do aplicativo em formato de diretório, com cada página correspondendo a um diretório. O caminho do diretório serve como rota para essa página. Com o roteador de aplicativo integrado, você pode implementar facilmente a alternância de páginas e a navegação sem configuração manual de rotas.
- Biblioteca de ícones modernos e fáceis de usar: Os ícones são provenientes da biblioteca fluentui-system-icons, com personalização parcial para se adequar às características da LCUI, oferecendo padrões de uso semelhantes.
- Ferramenta de desenvolvimento de linha de comando: execute o comando
lcui build para pré-processar os arquivos de configuração no diretório do aplicativo e, em seguida, gere o código-fonte C correspondente e os arquivos de recursos.
Arquitetura
Com o tempo, a LCUI foi construída para se basear em várias bibliotecas:
- lib/yutil: Biblioteca de utilitários que fornece estruturas e funções de dados comuns.
- lib/pandagl: PandaGL (Panda Graphics Library), que oferece gerenciamento de fontes, layout de texto, E/S de imagens, processamento gráfico e recursos de renderização.
- lib/css: analisador CSS e mecanismo seletor que fornece recursos de análise e seleção CSS.
- lib/ptk: Biblioteca Platform Toolkit que oferece APIs relacionadas a sistemas unificados de plataforma cruzada, incluindo loop de mensagens, gerenciamento de janelas, método de entrada, etc.
- lib/thread: biblioteca de threads que fornece recursos multithreading entre plataformas.
- lib/timer: Biblioteca de timer que fornece a capacidade de executar tarefas em intervalos regulares.
- lib/ui: biblioteca principal da UI que fornece recursos essenciais da UI, como gerenciamento de componentes da UI, fila de eventos, cálculo de estilo e desenho.
- lib/ui-xml: biblioteca de análise XML que fornece a capacidade de criar UI a partir do conteúdo do arquivo XML.
- lib/ui-cursor: Biblioteca de cursores que oferece recursos de desenho de cursor.
- lib/ui-server: servidor de UI que fornece a capacidade de mapear componentes de UI para janelas do sistema.
- lib/ui-router: Gerenciador de roteador que oferece mapeamento de rotas e recursos de navegação.
- lib/ui-widgets: Biblioteca de componentes básicos predefinidos que fornece componentes básicos de UI, como texto, botão, barra de rolagem, etc.
- lib/worker: biblioteca de threads de trabalho que fornece recursos simples de comunicação e gerenciamento de threads de trabalho.
Início rápido
Antes de começar, você precisa instalar o seguinte software em seu computador:
- Git: ferramenta de controle de versão usada para baixar o código-fonte do projeto de exemplo.
- XMake: Ferramenta de construção usada para construir o projeto.
- Node.js: ambiente de tempo de execução JavaScript usado para executar a ferramenta de desenvolvimento de linha de comando LCUI.
Em seguida, execute os seguintes comandos em uma janela de linha de comando:
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
Siga as instruções fornecidas pelos comandos posteriormente.
Documentação
- Documentação on-line
- Solicitação de comentários (RFC)
- Registro de alterações
- Diretrizes de Contribuição
Tutoriais
- Lista de tarefas: Aprenda os conceitos básicos e o uso da LCUI, bem como como usá-la para construir interfaces e implementar gerenciamento de estado, atualizações de interface e interações.
- Renderizando animação de tecido: reescreva o código-fonte JavaScript do programa de simulação de tecido existente em linguagem C e use a biblioteca gráfica cairo para renderização de tecido. Em seguida, aplique LCUI para implementar a reprodução e interação da animação de estrutura.
- Navegador: referenciando um navegador da web, use LCUI para implementar estrutura de interface, layout, estilo e recursos de gerenciamento de múltiplas guias semelhantes. Utilize a funcionalidade de gerenciamento de roteamento do LCUI para implementar gerenciamento e navegação de estado de página com várias guias, bem como uma página simples de navegação de arquivos. (Este tutorial está desatualizado, contribuições para atualizá-lo são bem-vindas)
Referências
Alguns recursos do LCUI e projetos relacionados são inspirados em outros projetos de código aberto. Você pode consultar a documentação para entender os conceitos básicos e o uso.
- DirectXTK: referência de código-fonte para o temporizador de etapas.
- Vue Router: Referência para o gerenciador do roteador. Algumas funcionalidades também fazem referência ao código fonte do Vue Router.
- Next.js: Referência para métodos de definição de rota.
Roteiro
Aqui estão os próximos itens:
- LCUI
- Melhore o design da API.
- Aprimore o mecanismo CSS para suportar caracteres
inherit , !important e de escape. - Adicione back-end SDL para substituir a biblioteca lib/ptk.
- Adapte-se a outras bibliotecas gráficas de código aberto para obter melhor desempenho de renderização.
- Ferramentas de linha de comando
-
lcui build --watch : Monitore continuamente as alterações do arquivo e reconstrua automaticamente. -
lcui dev-server : semelhante ao webpack-dev-server, cria o aplicativo LCUI como um site para desenvolvedores visualizarem interfaces no navegador. - Adicione cache de compilação para reconstruir apenas os arquivos que foram alterados.
- Biblioteca de componentes React: referenciando algumas bibliotecas de componentes frontend da web (por exemplo, radix, shadcn/ui), desenvolva uma biblioteca de componentes TypeScript + React adequada para aplicativos LCUI, reutilizando componentes da biblioteca de componentes LC Design.
- Documentação
- Tutoriais
- Solicitação de comentários (RFC)
Contribuição
Você acha que a atualização do LCUI demora? há muitas maneiras de contribuir com a LCUI.
- Envie bugs e ajude-nos a verificar as correções à medida que são verificadas.
- Compartilhe algumas ideias interessantes relacionadas ao desenvolvimento de GUI na página de problemas.
- Procure comentários FIXME no código-fonte e tente corrigi-los.
- Financie as questões de seu interesse no IssueHunt para atrair outros desenvolvedores para contribuir.
- Revise as alterações no código-fonte.
- Contribua com correções de bugs.
A LCUI adotou o código de conduta definido pelo Contributor Covenant. Este documento é usado em muitas comunidades de código aberto e acreditamos que ele articula bem nossos valores. Para mais informações, consulte o Código de Conduta.
Perguntas frequentes
Este é um kernel do navegador? Ou uma biblioteca de desenvolvimento como a Electron que integra o ambiente do navegador?
Não, você pode pensar nisso como uma biblioteca tradicional de desenvolvimento de GUI que aplica algumas tecnologias da Web.
Como ele suporta o uso da linguagem TypeScript, por que não uso o Electron?
Sim, se você tem experiência em desenvolvimento web e está disposto a aprender Electron, então Electron é obviamente a melhor escolha.
Dadas as capacidades atuais da LCUI, ela é principalmente adequada para atender às necessidades pessoais do autor e desenvolver ferramentas simples.
Por que devo escolher LCUI em vez de outras bibliotecas/estruturas GUI?
Sugerimos que você priorize outras bibliotecas/estruturas GUI.
Que tal suporte CSS?
A seguir está uma lista de recursos CSS suportados. Marcado é compatível (mas não significa suporte total). Propriedades não listadas não são suportadas por padrão.
Cobertura de recursos CSS
- nas regras
- palavras-chave
- seletores
- unidades
- propriedades
Licença
O Projeto LCUI é lançado sob a licença do MIT.
