4D Qodly Pro já oferece uma vasta gama de componentes nativos para o ajudar a desenhar as suas aplicações. Mas sabia que pode ir ainda mais longe? Graças aos Componentes Personalizados desenvolvidos pela comunidade, pode melhorar seus projetos com caraterísticas feitas sob medida!
Esses componentes personalizados permitem estender as capacidades de 4D Qodly Pro adicionando funcionalidades personalizadas, muito parecido com plugins e componentes em 4D.
Nesse artigo, vamos explorar como usar e integrar esses componentes, junto com vários casos reais de uso de nossa aplicação de Avaliação de Desempenho.
Aplicação de Avaliação de Desempenho
O que é um Componente Personalizado?
Componentes personalizados são blocos de construção criados por usuários para atender necessidades específicas ou adicionar funcionalidades não cobertas pelos componentes embutidos do 4D Qodly Pro. Desenvolvidos em React, eles fornecem uma base poderosa e flexível para desenvolvedores.
Integrar componentes personalizados em Qodly Studio oferece várias vantagens:
- Extensibilidade: Personalize suas páginas para corresponder precisamente aos requisitos de seu projeto.
- Reutilização: Partilhe os seus componentes em diferentes projectos ou com a comunidade Qodly.
- Eficiência: Poupe tempo utilizando componentes pré-construídos em vez de começar do zero.
Como utilizar um componente personalizado?
- Escolha o componente
- Navegue no repositório GitHub de componentes personalizados e selecione o que precisa.
- Baixe a versão mais recente
- Clique no componente escolhido.
- Vá para a secção Lançamentos.
- Baixe a versão mais recente (arquivo ZIP). Certifique-se de que está na secção Releases para obter a versão pré-compilada e não o código-fonte.
- Instalar no Qodly Studio
- Na secção Componentes, clique em Carregar componente.
- Arraste e largue ou selecione o ficheiro ZIP descarregado.
- Clique em Instalar componente e, em seguida, em Recarregar.
- O componente aparecerá agora na secção Personalizado dos componentes disponíveis.
- Pode agora arrastar e largar o componente diretamente numa página.
Para obter mais informações, consulte a documentação oficial: Carregar componente personalizado.
Como criar seu próprio componente personalizado?
Se não consegue encontrar um componente que atenda às suas necessidades, pode criar o seu próprio.
A API do 4D Qodly Pro simplifica a criação de Componentes Personalizados em React com sua ferramenta CLI dedicada, @qodly/cli. Essa ferramenta agiliza a inicialização de um projeto React, permitindo que os desenvolvedores projetem e compartilhem componentes reutilizáveis. Uma vez integrados, esses componentes podem ser adicionados às páginas com um simples arrastar e soltar.
Confira a documentação oficial para obter mais detalhes.
Como os componentes personalizados podem aprimorar seu aplicativo?
Na aplicação Performance Review, integrámos vários componentes personalizados para melhorar a experiência do utilizador. Aqui estão alguns exemplos concretos:
- Exibir um documento PDF com o componente pdfViewer.
- Descarregar um ficheiro utilizando o componente fileDownload.
- Criar um menu dinâmico com o componente Popover.
- Construir um seletor de ano combinando os componentes Popover e DatePicker.
Exibição de documentos: Integrar um PDF com o pdfViewer
Utilizamos o componente pdfViewer.
Passos para integrar um visualizador de PDF:
- Descarregue e instale o componente pdfViewer como descrito na secção anterior.
- Arraste o componente para a sua página e ligue-o à fonte de dados “selectedReview.DocumentPDF”, que contém o PDF.
- O documento é então apresentado dinamicamente na página.
Este componente é particularmente útil para mostrar documentos gerados dinamicamente a partir de um modelo 4D Write Pro e dados de base de dados.
Descarregar um ficheiro PDF com o componente fileDownload
O componente fileDownload permite fazer download de documentos.
Passos para criar uma opção de download de arquivo:
- Instale o componente fileDownload.
- Arraste o componente para a sua página e ligue a fonte de dados, que contém o ficheiro PDF a descarregar. Neste caso, a fonte de dados é “selectedReview.DocumentPDF”.
- Uma vez configurado, um simples clique permite aos utilizadores descarregar o ficheiro.
Criar um menu interativo com Popover
Na nossa aplicação Performance Review, integrámos um menu no topo da página, colocado por cima de um widget Page Loader. Este menu determina dinamicamente a página a ser carregada dentro do componente Carregador de páginas. Criámos o menu com o componente popover.
Passos para criar o menu:
- Instale o componente popover.
- Arraste e largue o componente popover na sua página.
- Na secção do menu, insira um texto estático com o nome Recursos Humanos.
- Na secção sobre, insira três botões denominados Colaborador, Revisões e Formações.
Com alguns ajustes de estilo, obtemos um menu funcional e ergonómico:
Ao aperfeiçoar o design, ajustando o espaçamento, as cores e os efeitos de foco, pode criar uma experiência de navegação simples e fácil de utilizar na sua aplicação Qodly.
Crie um DatePicker personalizado com Popover e DatePicker
4D Qodly Pro oferece um componente nativo para a seleção de datas. No entanto, na aplicação Performance Review, optámos por utilizar o componente DatePicker personalizado, uma vez que o seu design se adequava melhor às nossas necessidades. Isto também nos permitiu demonstrar a combinação de componentes personalizados.
Passos para criar uma entrada de ano personalizada:
- Arraste e solte uma caixa de estilo na sua página.
- Adicione um texto de entrada com formato numérico dentro da caixa de estilo.
- Insira um componente popover dentro da caixa de estilo.
- Na secção de menu do Popover, insira um ícone para abrir o seletor de datas.
- Na secção sobre, insira o componente DatePicker.
- Adicione a fonte de dados ao texto de entrada e ao DatePicker.
Com alguns ajustes de estilo (margens, cores, etc.), eis o resultado:
Esta abordagem combina flexibilidade e um design personalizado, melhorando a experiência do utilizador.
Próximos passos
Os componentes personalizados são uma solução poderosa para melhorar as suas aplicações Qodly e satisfazer necessidades específicas sem um desenvolvimento complexo. Explore o repositório GitHub de componentes para descobrir ainda mais possibilidades.
Se criou o seu próprio componente, partilhe-o com a comunidade Qodly!
Para ir mais longe, veja este vídeo tutorial: Como adicionar componentes personalizados à sua aplicação Qodly.