Fala ai Radizeiros e Radizeiras, tudo bem com vocês?
Você gostaria de criar layout responsivos no seu sistema?
Você possui um PDV que gostaria muito de melhorar ele?
Irei mostrar aqui no blog umas das técnicas que ensino em um dos meus treinamentos, o de Design de Interfaces em Delphi.
Neste post iremos falar de contêiner na VCL, criaremos pacotes dos componentes.
Nosso principal contêiner na VCL é o TPanel.
Você pode observar na imagem que possuímos mais de um Panel, dentro do treinamento Design de Interfaces em Delphi é ensinado a utilização de cada um deles.
Com o TPanel nós conseguimos criar algumas estruturas dentro do nosso projeto.
Dentro do treinamento iremos produzir um PDV igual a esse, aqui no blog iremos trazer esse layout para dentro do VCL.
Primeiro vamos adicionar uma Panel em nosso Form VCL.
Nas propriedades do componente Panel, iremos retirar o Caption e em BevelOuter definimos como bvNone.
Dentro desse Panel iremos colocar outros Panels e posicionamos eles ao Top, Button, e um outro ao cliente que irá respeitar as margens, irei deixar eles de outras cores para distinguirmos.
Para que nossa aplicação venha tomar aparência do nosso PDV, e colocarmos para que tenhamos o local que irá as imagens e valores dos produtos que estão sendo passado no PDV.
Para isso iremos adicionar mais dois Panel, uma alinhado a esquerda e outro ao client.
Agora iremos adicionar mais um Panel no Panel que está alinhado a esquerda e iremos deixa-lo com a cor branca, iremos ajustar as bordas do contêiner, que é o Panel que está recebendo o Panel com a cor branca, para que fique bem parecido com a nossa imagem do PDV.
Na propriedade Padding do contêiner do Panel brando e alterar suas propriedades para que fiquem como a imagem a seguir.
Olha como está ficando nosso PDV.
Iremos fazer a mesma coisa para o lado direito, e na propriedade Padding do contêiner do Panel brando do lado direito e alterar suas propriedades para que fiquem como a imagem a seguir.
Veja como esta ficando nosso PDV.
Agora iremos adicionar um outro Panel que irá ter a aparência da imagem a baixo.
Iremos colo um outro Panel para que possamos deixar com essa aparência.
Viu como de forma simples e 100% nativa estamos desenvolvendo um layout bonito no Delphi.
No nosso Panel esquerdo ele também tem uma outra visão do nosso layout.
Assim como fizemos anteriormente, iremos colocar mais um Panel em cima do nosso Panel branco esquerdo.
Nós adicionamos e alinhamos ele ao button como o nosso panel anterior.
Aquela estrutura que temos na imagem do PDV foi toda criada usando Panels e totalmente responsivo.
Observe a imagem do projeto já compilado e maximizado.
Foi criado um PDV totalmente responsivo, e isso é a grande dificuldade que muita gente tem de trabalhar com a VCL é a responsividade, dessa forma nós conseguimos manter a responsividade do nosso projeto.
Viu como é simples termos um layout seguindo boas práticas de UI/UX?
Em poucas minutos você consegue ter um PDV que encante seus clientes.
VAMOS DAR INÍCIO A NOSSA 4º SEMANA DE INTERFACES!!!
Essa semana será para você, que está cansado daquelas telas cinzas, com cara de Windows 95 e está afim de descobrir como criar uma interface moderna no DELPHI!!
Quer assistir a 4 SUPER AULAS, com conteúdos TOP e o melhor disso tudo, GRÁTIS?
Então faça parte do nosso grupo no WhatsApp e tenha acesso exclusivo a essas aulas gratuitas.
CLIQUE AQUI PARA FAZER DESSE GRUPO VIP DO WHATSAPP.
