Fala ai Radizeiros e Radizeiras, tudo bem com vocês?
Cansado de proporcionar aquela experiência de Déjà-vu para o cliente, com aquele MENU na parte SUPERIOR do seu sistema, aquela carinha de WIN 95?
Vamos começar a mudar isso?
É simples possuir um layout que tenha as disposições de cores, formatações de fontes, onde podemos ter usando a VCL do Delphi e ter um sistema com layout que encante seus clientes.
Presta atenção nesse post, vou te mostrar como desenvolver aquele menu lateral muito visto em sistemas feito para web.
Observe na imagem abaixo como irá ficar nosso layout usando a VCL.
O nosso menu global funciona só deixando os ícones aparecendo para que possamos acessar os menus de contexto
E para que possamos ter esse nosso menu global, iremos usar o TSplitView, ao adicionarmos em nosso projeto ele já se posiciona ao lado esquerdo do nosso formulário.
Dentro desse nosso TSplitView iremos colocar um TImage, alinhamos ele ao client.
Adicionamos a imagem com a cor para o nosso menu.
Com o TImage selecionado e com a imagem com a cor que estamos usando no layout do nosso sistema, damos um Stretch, fazendo com que a imagem seja redimensionada conforme o componente pai.
Ao usarmos o Stretch veja como nossa imagem ficou.
Vamos agora adicionar o componente TCategoryButtons para configurarmos os botões dentro desse componente.
Esse componente irá ficar em cima desse nosso TImage.
Vamos clicar com o botão direito do mouse em cima do TCategoryButtons e vamos criar uma nova categoria.
Categoria criada.
Com a nova categoria criada, vamos alterar a cor para clNone.
E iremos clicar na propriedade Itens para adicionarmos os itens, e iremos adicionar 5 itens.
E no TCategoryButton vamos na propriedade ButtonOptions e marcar boFullSize, e colocar o valor 60 na propriedade ButtonHeight.
Na propriedade RegularButtonColor iremos deixar como clNone, e SelectedButtonColor também definir como clNone.
Em HotButtonColor iremos colocar alterar a cor também.
Agora já temos nossos botões, e esses botões iremos colocar através de ActionList e ImageList.
No ImageList iremos definir o tamanho das imagens 48X48.
E iremos adicionar as imagens que vamos usar em nosso menu.
Com as imagens já adicionadas no ImageList, e vinculados com o ActionList teremos esse comportamento.
Compilando o nosso projeto veja como já está nosso menu.
Ao passar o mouse já temos as cores que nós definimos.
Agora temos que definir a ação de abrir e fechar o nosso menu, e será feito no botão da logo do nosso projeto.
procedure TForm1.Image2Click(Sender: TObject);
begin
if SplitView1.Opened then
SplitView1.Close
else
SplitView1.Open;
end;
No TSplitView vamos na propriedade DisplayMode e iremos deixar como svnDocked e na propriedade CloseStyle como svcCompact.
E vamos deixar a propriedade Opened como false.
Antes de clicar na logo.
Depois de clicar na logo.
Agora já temos criado nosso menu global no projeto.
Neste post você aprendeu como criar um menu global, e com esse pequeno exemplo você pode fazer em seus projetos deixando-os com um visual mais elegante.
Em falar de layout elegantes, estamos na 4ª semana de interfaces em Delphi, e nesta semana estarei disponibilizando 4 videos onde iremos mostrar na pratica como melhorar o visual do seu software e poder encantar seu clientes.
São 4 aulas totalmente grátis, ISSO MESMO 0800, basta clicar no link abaixo e fazer parte do grupo vip do WhatsApp e você receberá os links para as aulas que estão sendo disponibilizadas essa semana.
CLIQUE AQUI E FAÇA PARTE DO NOSSO GRUPO VIP DA SEMANA DE INTERFACES EM DELPHI.
