Criar um componente em Power Apps? O que é um componente e para que serve? É isso que vamos saber neste artigo!
Quando estamos a criar aplicações, muitas das tarefas que realizamos ao longo do desenvolvimento da aplicação é repetitiva, principalmente no que se trata do Design da aplicação.
Criamos componentes em Power Apps para reutilizar elementos ao longo da aplicação, sem termos a necessidade de copiá-los nos vários ecrãs. Um componente funciona como um modelo de objetos que podemos reutilizar ao longo dos vários ecrãs da nossa aplicação. Assim temos o benefício de não cometer erros ao copiar objetos, excluímos a necessidade de ter vários objetos na hierarquia da aplicação e simplificamos claramente o processo de desenvolvimento.
Neste artigo vamos ver os princípios básicos de criação de um componente, para obteres os fundamentos necessários, sabendo como se cria, colocam propriedades e aplica na aplicação.
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 cabeçalho de todos os ecrãs da aplicação. Este é um cenário comum no desenvolvimento de aplicações, uma vez que o cabeçalho reúne um conjunto de objetos que são comuns aos vários ecrãs.
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.
Na vista de árvore, onde temos os ecrãs, encontramos também a opção dos Componentes, que é uma área própria dentro da aplicação onde podemos estruturar o design dos nossos componentes.
Começamos por criar um componente e renomeá-lo.
Na zona central vemos a área do componente como vemos o ecrã da aplicação. As dimensões do componente base são 640 x 640 e vamos começar por alterar as propriedades da largura e altura do componente. Sendo um componente de cabeçalho, vamos definir a largura de acordo com a largura do ecrã e uma altura de cerca de 100 px.
Para a altura colocamos a propriedade Height com o valor 100.
De seguida vamos inserir um contentor, que vai ter os elementos do cabeçalho. O contentor vai ter as seguintes propriedades:
- Fill = ColorValue(“#185c37”) – Apenas uma cor aplicada para o componente
- Height = Parent.Height – A altura do seu parente principal, que neste caso é o componente
- Width = Parent.Width – A largura do seu parente principal, que neste caso é o componente
- X = 0 – Posição base horizontal
- Y = 0 – posição base vertical
Inserir os componentes do cabeçalho
Vamos começar por inserir um ícone, à escolha, que irá permitir voltar ao ecrã inicial da aplicação. Eu vou escolher o ícone da casa, mas poderás escolher qualquer outro ícone à escolha.
De seguida alteramos algumas propriedades do ícone.
- Definirmos a altura e largura para 65 px
- Posição vertival (Y): (Parent.Height – Self.Height)/2 para que o ícone fique sempre alinhado no centro do contentor.
- Color: ColorFade(ColorValue(“#185c37”);50%). Esta opção permite alterar a saturação de uma cor, neste caso com uma percentagem positiva tornando a cor mais clara. (P.S. podes definir este código com uma variável).
A seguir inserimos uma imagem, que vai ter a imagem do utilizador e 2 etiquetas de texto. Todos os objetos vão utilizar a potencialidade da função User() para obtermos dados do utilizador da aplicação.
No caso da imagem vamos utilizar a função User().Image para obtermos a imagem do utilizador guardada no office 365.
Definimos também as dimensões da imagem: 90 x 90 e ainda a posição vertical da imagem.
A seguir criamos 3 etiquetas de texto:
- Uma para o nome do utilizador: User().FullName
- A seguinte para o e-mail do utilizador: User().Email
- A última para colocar o nome do ecrã.
Exemplo para a etiqueta de texto com o e-mail…
Aplicar as propriedades para o componente
Quando aplicamos propriedades para o componente, estamos a aplicar propriedades como as de um objeto ou controlo normal. Por exemplo, a caixa de texto tem a propriedade “texto” ou a propriedade “cor”. Um componente é um controlo personalizado na aplicação e pode receber propriedades.
Podemos definir 2 tipos de propriedades:
- Propriedade de entrada é a forma como um componente recebe dados a serem utilizados no componente.
- Propriedade de saída é utilizada para emitir dados ou o estado do componente. Podemos determinar o que os outros controlos podem consultar no estado do componente.
Ao selecionarmos o componente podemos criar uma propriedade personalizada:
No artigo hoje vamos apenas criar propriedades de entrada, ou seja, valores que o componente “recebe” da aplicação.
Vamos criar uma propriedade de entrada em que o tipo de dados é ecrã, para receber o link para o ecrã quando pressionamos o botão Home.
A segunda propriedade que vamos criar é de texto que vai substituir o texto com o nome do ecrã.
Neste momento temos as 2 propriedades do componente definidas…
Só temos de definir os valores da propriedade e aplicá-los ao controlo pretendido.
Primeiro definimos os valores da propriedade LinkHOME:
A seguir definimos os valores da propriedade NomeDoEcrã:
Agora atribuímos os controlos as propriedades corretas. No ícone aplicamos a propriedade OnSelect.
E na etiqueta do nome do ecrã, atribuímos a nossa propriedade personalizada à propriedade de texto do controlo.
Aplicar as propriedades para o componente
Voltando à aplicação, vamos criar um alguns ecrãs para testar o componente e para percebermos o ecrã onde estamos, criei uma etiqueta com a informação do nome do ecrã numa etiqueta de texto.
Para inserir o componente, apenas temos que o inserir como um controlo normal.
E desta forma temos um componente, com os elementos próprios, que interage com a aplicação e qualquer alteração que tenha de ser feita de base, é feita no componente, e não em cada um dos ecrãs onde está aplicado! Seguramente vai facilitar a criação das tuas aplicações.
Leave a Reply