Neste artigo vou mostrar-te como podes criar através de um componente um Menu Lateral com design e estrutura que podes reutilizar ao longo de uma aplicação ou em qualquer aplicação. Trata-se de um modelo de menu que tem a particularidade de ser interativo e reutilizável!
Iniciar a aplicação e o Design do Componente
Começamos por iniciar uma aplicação nova, onde vamos incluir um componente que será o menu lateral para todos os ecrãs da aplicação.
Começamos então por iniciar a aplicação que será uma aplicação de tela.
Damos o nome à aplicação, e pressionamos o botão Criar.
De seguida criamos o componente e damos o nome ao mesmo de “Menu”. Podes aplicar uma cor de fundo à escolha no menu e começa por definir a propriedade da altura do menu. A altura é dinâmica e definida em função da altura de um dos ecrãs da aplicação.
Height: Max(App.Height; App.MinScreenHeight)
Definir a primeira propriedade do componente
A primeira propriedade do menu vai ser a largura do mesmo. Vamos criar uma propriedade de Saída que emite dados do componente a serem utilizados pela aplicação.
De seguida inserimos um ícone que vai definir a variável para a propriedade de saída do componente.
No ícone, colocamos as seguintes propriedades:
- X: 0
- Y: 0
- Width: 70
- Height: 70
- PaddingTop; PaddingLeft; PaddingBottom; PaddingRight: 10
E na propriedade OnSelect definimos uma variável.
Set(varExpandir;!varExpandir)
Esta variável é uma variável Booleana, que significa que, ativa ou desativa ao pressionar o ícone. Esta opção é possível através do caracter “!”.
Agora acedemos ao nosso componente, e à propriedade LarguraMenu que foi criada. Esta propriedade vai receber a nossa variável.
E agora definimos a largura do componente…
Em resumo:
- Definimos uma propriedade de saída para o componente: LarguraMenu que é do tipo numérico.
- O valor da propriedade é definido por uma variável, que é um valor Booleano, mas cujo resultado é um número, de acordo com o tipo de dados da propriedade – 250 ou 80.
- A largura do componente (propriedade Width) recebe o valor que a variável tem definida.
Definir a segunda propriedade do componente
A segunda propriedade do componente será uma tabela com dados. Esta tabela vai conter a informação do menu, e por isso, idealmente é uma tabela com registos. A tabela será a propriedade Itens de uma Galeria, que de uma forma dinâmica vai apresentar os valores do menu. Vamos então definir esta propriedade.
Acedendo à propriedade do componente, podemos ver o código e a função Table, que tem um registo base.
Nesta propriedade aplicamos o seguinte código que define os registos da tabela.
- Um registo com o Nome do menu (NomeMenu) e o respetivo valor.
- Um registo com o ecrã para o menu, que no final do artigo vamos mudar para o ecrã específico, mas para já será o ecrã atual (ActiveScreen)
- Um registo que representa um ícone.
Table(
{
NomeMenu: “HOME”;
EcraMenu: App.ActiveScreen;
IconMenu: Icon.Home
};
{
NomeMenu: “CLIENTES”;
EcraMenu: App.ActiveScreen;
IconMenu: Icon.People
};
{
NomeMenu: “PROPOSTAS”;
EcraMenu: App.ActiveScreen;
IconMenu: Icon.Calculator
};
{
NomeMenu: “ADMINISTRAÇÃO”;
EcraMenu: App.ActiveScreen;
IconMenu: Icon.ToolsWrench
}
)
Vamos então agora inserir a Galeria que vai conter os dados:
Vamos personalizar a galeria com as seguintes propriedades:
- X = 0
- Y = 0
- Width = Parent.Width (que é a largura do componente)
- Height = Parent.Height – 70
- TemplateSize = 80
- Itens = Menu.ItensMenu
A propriedade Itens, vai receber a propriedade personalizada do componente.
Vamos agora colocar alguns controlos na Galeria, começando pelo ícone.
Inserimos um ícone à escolha e definirmos as seguintes propriedades:
- X = 5
- Y = (Parent.TemplateHeight – Self.Height) / 2
- Esta opção permite alinhar o ícone no centro da célula principal da galeria (template)
- Width: 60
- Height: 60
- PaddingTop; PaddingLeft; PaddingBottom; PaddingRight: 0
- Icon = ThisItem.IconMenu
- Esta opção irá obter o valor da tabela, que tem um registo que representa o ícone.
A seguir inserimos um uma Etiqueta de texto e definirmos as seguintes propriedades:
- X = icoMenu.X + icoMenu.Width + 10
- Y = (Parent.TemplateHeight – Self.Height)/2
- Width = Parent.Width – Self.X – 10
- Text = ThisItem.NomeMenu
E inserimos também um Retângulo, para selecionar os itens da galeria, com as seguintes propriedades:
- Fill = Color.Transparent
- Height = Parent.TemplateHeight
- Width = Parent.TemplateWidth
- OnSelect = Navigate(ThisItem.EcraMenu; ScreenTransition.Fade)
Adaptar o menu à aplicação
Agora que temos o design do menu e as propriedades definidas, vamos adaptar o menu à aplicação.
Acedemos aos ecrãs e começamos por adicionar 3 novos ecrãs.
Para cada 1 dos 4 ecrãs damos o nome:
- HOME
- CLIENTES
- PROPOSTAS
- ADMINISTRAÇÃO
Para identificarmos cada ecrã, vamos apenas colocar uma Etiqueta de Texto com o nome de cada ecrã.
Para cada um dos 4 ecrãs adicionamos agora também o controlo personalizado que será o nosso menu lateral.
E renomeamos o controlo para cada um dos ecrãs.
O menu está posicionado, mas ainda não está funcional, pois se bem nos recordamos, os itens da propriedade do menu apontam para o ecrã atual.
Table(
{
NomeMenu: “HOME”;
EcraMenu: App.ActiveScreen;
IconMenu: Icon.Home
};
Assim nas propriedades do componente, temos que definir agora o ecrã para onde aponta cada um dos menus.
E como podemos verificar, alterações feitas no componente, refletem-se no controlo inserido na aplicação!
Agora que temos o componente, podemos adicionar mais algumas alterações a gosto.
Podemos por exemplo colocar o retângulo por trás de todos os elementos e aplicar uma cor de acordo com o nome do menu selecionado.
If(App.ActiveScreen.Name = ThisItem.NomeMenu; ColorFade(Menu.Fill; 0,8); Color.Transparent)
Podemos também aplicar o link para o ecrã, clicando em qualquer um dos elementos da galeria (icon e texto)
Navigate(ThisItem.EcraMenu; ScreenTransition.Fade)
Leave a Reply