Beleza então agora sim vamos pra aula bom meus amigos já tô aqui no power apps e para desenvolver esse componente que que eu vou fazer eu vou criar ele primeiramente aqui numa tela normal e depois transformar ele em componente né se você já viu eu desenvolvendo algum outro componente como esses que tem para baixar na nossa comunidade que é o máscara de entrada de número número é por extenso menu slide que que eu faço né eu faço ele primeiro na tela porque fica mais fácil de eu ver ele funcionando e depois eu movo ele para um.
Componente Tá mas não é errado montar direto no componente vai ter o mesmo resultado tudo bem bom qual que é a minha ideia então a minha ideia como vocês viram no começo do vídeo é poder ter esse pop-up então o que que eu vou utilizar aqui pensando que isso vai virar um componente já tem que tomar alguns cuidados tá primeira coisa que eu vou fazer é por exemplo colocar um rótulo de texto aqui tá vou fazer algo é mais tranquilo e depois vou melhorando então eu vou colocar um rótulo de texto e um ícone né Vamos colocar aqui um.
Ícone que vai ser alterado né então V colocar um ícone qualquer tá para depois eu ir alterando então eu vou ter um texto e um ícone quero que apareça né um verdinho quero que apareça o texto e posso também mudar por exemplo alguns outros parâmetros né Qual parâmetro a cor do fundo né então qual que vai ser o fundo pensando que o fundo pode ser tanto o texto quanto ícone eu vou juntar os dois né Eh em um contêiner então então vou criar um contêiner Zinho tá um coner Zinho contêiner aqui e dentro desse contêiner.
Eu vou colocar o que eu vou utilizar dentro para para ser né o nosso a nosso popup beleza bom está pronto aqui o nosso container Zinho e primeira coisa que eu vou fazer então é colocar um uma cor Fixa aqui que depois eu vou transformando tudo isso em variável então perceba por isso que eu vou criando aqui fora eu vou criando colocando depois eu vou transformando isso em componente o que que é parâmetro o que que é variável que que que que que que eu vou ter que entrar com cálculo aqui então depois eu vou fazendo isso.
Desliza né que é justamente esse aqui né galera que a gente tem aqui deixa eu ver até se ele ainda funciona faz tempo Nossa era só mato no power apps nessa época tá não tinha nada não tinha era bem difícil criar as coisas nessa época mas eu já tinha criado esse menu slide Então olha só como que ele funciona aqui vou colocar aqui rapidamente pra gente ver ó menu slide então ele funciona mais ou menos assim ó quando eu clico aqui né ele deslizava certo então V fazer no menu slide A ideia é a mesma então eu posso até reaproveitar essa lógica que a.
Gente já montou nesse outro componente Mas vamos criar aqui do zero primeira coisa que a gente fez foi a ideia né então beleza eu quero ter ã esse contêiner o Legal seria conseguir colocar uma borda mais um mais né mais de para ficar bem um um um um botãozinho né descendo assim então vou colocar uma um raio da borda maior aqui ó vou ir colocando aqui 10 vamos ver como é que vai ficar com 10 pouca coisa mas já começou a melhorar né colocar aqui 30 Ah beleza 30 ficou legal então ficou bacana aqui o o a ideia do.
Popup né Outra coisa tá que eu quero fazer é deixar bem no meio tá vendo que tá difícil deixar no meio aqui porque como tá com essa borda ó tá vendo que ele tá difícil uma uma coisa legal que vocês podem fazer para sempre estar no meio é usar um cálculo matemático ensino isso bastante no curso né galera Como que eu faço para colocar algo no meio aqui por exemplo essa essas esses dois objetos no meio eu vou vir aqui né e no na posição Y vai ser igual ao parent pon height né ou seja altura dividido por do.
Isso faz com que o objeto vá para o meio menos self ponto height menos self pon H dividido por 2 ou seja eu subo metade e depois metade da minha altura isso faz com que eu fique exatamente no meio tá então isso é uma forma de você sempre colocar o objeto no meio já a posição x aqui né eu vou deixar bem no bem no canto esquerdo mesmo porque como o texto pode crescer Então eu vou deixar no canto esquerdo o texto aqui tudo bem então beleza Tá bem no meinho e o texto.
Aqui pode ser variável a gente vai jogar lá no componente Show O que que tá faltando aqui tá faltando colocar o nosso timer né que é o que a gente vai utilizar para ele deslizar Afinal isso tem que subir e descer ou seja posão Y desse objeto né tem que justamente fazer ele ir descendo só que eu não não consigo galera colocar ele em cima da posição zero né ou seja o o menor posição É zero eu não consigo vir colocar menos 50 por exemplo ele sempre fica voltando ali para o zero Então qual.
VEJA MAIS AQUI:
- Aprimore suas Habilidades de Formatação no Excel: Dicas para um Visual Profissional
- Onde Não Há Conselhos os Projetos FRACASSAM - Paulo Junior
- Toda Minha Vida se Resume em uma Só Palavra: CRISTO! - Joel Beeke
Que é a minha ideia a minha ideia aqui é colocar um objeto para como se fosse eu
Vou fazer a quebra da tela aqui Como assim Ronan ó dentro desse contêiner né Ó que eu tenho aqui eu vou usar ele dentro de um outro contêiner tá ó preste atenção na ideia isso aqui eu tô pensando agora tá Galera tô pensando agora enquanto eu tô criando então eu vou ter isso tudo dentro de um outro contêiner que vai ser esse nesse contêiner aqui eu vou colocar meio que uma parede em branco para ele dar esse.Efeito de deslizar né para parecer que ele tá ele tá vindo lá da tela Como assim ó vai ficar muito claro isso aqui Quando eu colocar posso colocar até um retângulo aqui para ficar claro ó vou colocar um retângulo vou deixar azul mesmo pr pra gente enxergar ele por enquanto né eu consigo meio que depois eu vou pintar de de branco ou usar ou deixar transparente mas a ideia é o seguinte A ideia é fazer com que ó eu possa vir visualizando tá vendo ó aí vai dar a impressão que está vindo ali de uma saída da tela né mas na verdade.
Ele só tá descendo para cá assim ó beleza tá Então como que eu vou fazer agora para isso aqui funcionar né como é que eu vou fazer então para esse contêiner ã funcionar aqui bom primeiro eu vou colocar ele começando daqui assim mais ou menos né Não Preciso começar não preciso fazer ele sumir completamente eu quero descer ele um pouquinho então eu quero fazer com que o y des dele desça algumas posições alguns pixels aqui Inclusive eu consigo até para demonstrar o que eu tô querendo exatamente o seguinte vou colocar um.
Slide um deslizante aqui né ó colocar que o y disso aqui vai ser igual a slider 1 aqui ó então o y c igual slider 1 p value Então pensa aqui ó A ideia é fazer isso ó tá vendo ó e depois ir embora ou seja tem que ir até uma posição e depois voltar certo como que eu faço para esse slider né ir alterando o seu valor ou eu preciso necessariamente do Slider não né eu tô dando um exemplo aqui para ficar claro a ideia né Eu quero fazer isso.
Aqui ó como que eu faço para que ele deslize então né vá de zero a um valor e volte a um outro valor para isso eu posso utilizar o timer não é a o único recurso que a gente tem né mas eu posso colocar um timer então eu posso colocar aqui um temporizador né temporizador bom nesse temporizador eu posso entrar aqui então com o o tempo que eu quero que ele Rode né então eu quero que ele Rode mais ou menos 2 segundos né ã Então posso colocar de zero a dois ou eu posso só.
Usar uma posso deixar ele rodando de zer a 60 e falar ó do zero ao dois eu quero que desça do dois ao quatro eu quero Fi parado do quatro aos seis né suba ou seja do zero aos 2 segundos desse timer desce fica mais dois e sobe é uma possibilidade tô pensando agora em métodos que eu poderia utilizar tem 1 milhão de métodos que você pode fazer nos seus desenvolvimentos né então o que que eu vou fazer aqui eu vou colocar uma duração em vez de 60.000 né Vou colocar aqui 8.000 só para garantir que vai rodar é 8 segundos quando eu clico aqui.
Ele começa tá eu não consigo testar o timer clicando aqui tá Isso é uma algo que não dá para fazer eu tem que rodar o app para testar fica mais Claro ainda né Vou colocar até um campo de texto aqui ó nesse texto eu vou colocar aqui o timer 1. value né dessa maneira quando eu clico aqui ó eu vou ver os milissegundos mas não me interessa aqui os segundos com milissegundos né então o que que eu posso fazer posso dividir por 1000 né dessa maneira quando eu dividir aqui timer Val por 1000 eu vou ter só o segundo né também ele tá mostrando em.
Vírgula né Eu quero só inteiro então eu posso entrar aqui com int número dessa maneira ser z0 1 2 3 certo então eu tô pegando só o segundo dessa maneira eu consigo agora utilizar só os segundos ali do meu timer então eu já vi que eu tenho 1 2 3 tá vendo Então agora basta eu trabalhar com esse timer né basta eu trabalhar com o fato de que ele vai deslizar Ah até os 2 segundos tantos.
Pixels E como que eu vou fazer isso né poderia colocar direto aqui no Y do nosso contêiner e vou chamar isso de notificação tá notificação podia já fazer a notificação olhar para esse timer mas eu vou colocar no SL slider aqui para eu ir vendo com vocês para ficar mais legal pra gente conseguir entender o que tá acontecendo Então no default aqui eu vou colocar Justamente esse timer pval só que não vai ajudar quase nada um pixel Você concorda porque.
Vai ser um segundo então do segundo um ao segundo dois eu quero que ele vá
Descendo quantos pixels ali Hum eu posso utilizar Imaginem aqui o seguinte ó eu quero que ele esteja mais ou menos né posso usar como referência aqui né Ó y48 então eu posso até utilizar como referência aqui mexendo mesmo 50 vamos arredondar para ficar mais fácil esse cálculo Então qual que é a ideia quando eu clicar aqui ó no timer enquanto.Estiver indo do zero ao dois eu quero que Ele ande 50 pixels ou seja né vou até colocar outro campo de texto aqui ó timer 1. value certo novamente Qual que é o nosso desafio ó esse Zero ao 2000 eu quero que seja o zero indo a 50 ou seja né matematicamente se a gente parar para pensar né numa regnet 3 ó de 0 a 2000 Eu quero que vá de zero de um X né até 50.
Ou seja eu vou dividir aqui ã 50 por 2000 eu vou ter o valor né deixa eu jogar na calculadora aqui porque eu não sou tão bom assim né 50 di 2000 0,025 ou seja se eu multiplicar aqui vezes 0.025 né ó eu clicar aqui né A gente vai ver ó quando chegar no 1 vai ter dado ali 25 né quando chegar no dois vai ter dado 50 ou seja vai ser exatamente Em 2 segundos que ele vai fazer então.
Basicamente o que eu tenho que fazer é dividir a quantidade de segundos né ou seja 2000 Mundos no caso bastaria eu dividir quantos pixels né quantos pixels eu quero andar em determinado segundo Eu vou ter esse cálculo né reg de TR ali para utilizar no meu no meu na minha na hora que for deslizar Tudo bem então já Ten o meu cálculo porém eu vou ter que entrar com ifs né Então nesse Y aqui por exemplo o que que vai ser vou apontar agora direto pro timer pra gente não ficar mais precisando desse slider aqui tá acho.
Melhor vamos colocar direto no no direto ferença para o timer para ficar mais claro aqui o que a gente tá fazendo então isso aqui que tá no texto né é o que eu preciso eu vou vir aqui no meu y e vou falar o seguinte vai ser igual a isso porém eu tenho que colocar a cláusula que eu falei para vocês se passar de 2 segundos ele vai consir ele vai continuar deslizando para sempre né Ó olha o que vai acontecer vai deslizar e depois vai continuar tá vendo ó embora eu acho que 2 segundos ficou muito lento.
Eu vou mudar para um tá galera então o nosso cálculo agora vai ser diferente porque vocês viram que tá foi deslizou muito devagar foi é no teste que eu vi mesmo que eu não achei muito legal então seria 50 pixels que eu quero dividido por esses eh 1000 milissegundos vai dar 0,05 Então beleza vai ser então o cálculo 0,05 quando eu clicar aqui ó deslizou mais rápido um segundo porém ele tá indo embora eu não quero que ele vai embora né Eu quero que justamente ele pare ali na na posição que eu quiser Qual é a.
Posição que eu quero vai ser 50 não é então eu posso entrar assim ó if maior do que 50 que é o número que eu quero isso aqui você escolhe o número que você achar melhor né Eu quero que ele pare no 50 ali eu quero que ele pare no meio da tela né então se for maior que 50 dê 50 Opa tô usando vírgula aqui é ponto e vírgula se for maior que 50 D 50 certo sen não pode utilizar o pró PR cálculo Lembrando que aqui a gente pode anar com if para facilitar né então if.
Valor do Y vai ser igual a isso tudo e aí eu uso aqui né se o valor do Y for maior que 50 coloque 50 senão use o valor do Y beleza fechamos o nosso if aqui e agora sim né ó quando eu clicar ele vai rodar até o 50 parou e agora vem o ponto chave quantos segundos eu quero esperar para depois sumir subir né quantos segundos eu quero poderia ser um parâmetro no meu pop-up também tá mas.
Por enquanto não quero complicar aqui a nossa vida que que eu vou fazer vou colocar algo fixo então ã se o timer value se o valor do timer aqui for por exemplo 5 segundos quer dizer que desceu durante um ficou quatro Já pode subir né então agora a gente vai entrar com outro if aqui que é o seguinte se o timer timer 1. value for maior Ou seja passou dos 5000 msos então eu vou querer que ele volte né E a gente vai pensar.
Como fazer isso mas por enquanto é o seguinte se for maior do que 5000 posso até Colocar assim se for menor do que 5000 faça né o valor do Y justamente ser esse cálculo concorda ó perder esse cálculo senão senão né ó senão eu vou ter que fazer um outro cálculo concorda Então por enquanto eu vou colocar zero aqui ou seja eu vou voltar ele para para cima com tudo tudo bem então deixa eu arrumar aqui que eu tinha preenchido errado timer 1. Val se for menor que 5.000 vá.
Deslizando né certo senão simplesmente eh volte para o zero Então vamos ver o que que vai acontecer aqui ó ele vai deslizar até os 5.000 quando der 5000 msos aqui né ó ele voltou pro zero mas eu quero fazer deslizar de volta tudo bem se não tá ficando muito claro isso aqui galera eu vou voltar o timer Val aqui para milissegundos que eu tinha até dividido aqui por segundos mas na verdade a gente tá trabalhando com milissegundos mesmo né porque é até melhor para o deslizamento ali eu consigo usar os milisegundos Tudo bem então ó Vou clicar de novo ó tá vendo.
Chegou no um parou quando chegar no 5.000 ele vai botar zero então o nosso desafio agora é fazer subir né como que eu vou fazer então subir o nosso if já está pronto se for menor que 5.000 vai fazer isso então se ca aqui quer dizer que é maior ou igual a 5.000 Então eu tenho que começar a a a deslizar Mas como que eu vou fazer ir de 50 a zer né como que eu vou fazer ir de 50 a zer.
Depois que passar de 5.000 Então se passou de 5.000 né o timer 1. value né Por exemplo na primeira vez que entrar aqui vai ser por exemplo 5100 certo então o que que eu vou fazer eu vou fazer timer P value né 5100 né timer pon Vale Men 5000 vamos lá ó presta atenção que eu tô fazendo aqui galera até aqui todo mundo já deve ter entendido Qual que é a ideia aqui então que o valor do Y da volta por exemplo vou chamar valor do Y da volta vai ser.
Igual a timer 1 pon V Men 5000 ou seja ou seja tá quer dizer que já passou de 5000 Eu Voltei pro segundo um né Eu Voltei pro segundo um porque se eu tirar 5000 de 5000 vai dar zero beleza eu tenho aqui 50 pixels Eu quero que vá para o zero diferente do que a gente queria antes ir do zero ao 50 e eu quero fazer isso enquanto está indo do timer né 5000 para 6000 concorda só que como.
Eu falei aqui vai ser o timer pon Val e menos 5000 ou seja 5000 vai ser igual a z0 e o 6.000 na verdade é 1000 então eu quero fazer ir do 50 a 0 indo do 0 a 1000 o o a diferença aqui né vai ser a mesma do cálculo que a gente fez antes então eu já sei que vai dar 0,05 ou seja 50 di por 1000 eu sei que essa é a taxa que eu quero fazer essa movimentação 0,05 Afinal é o mesmo é o mesmo cálculo né É eu quero andar 50 pixels enquanto.
Vai de zero a 1 segundo então ficou até fácil eu quero andar de 50 a z0 Então qual que é a diferença aqui a diferença é que o timer aqui Vai somando né então se eu tentar fazer esse cálculo desse jeito que que eu falei para vocês Ele vai tentar ir de novo do zero ao 1000 Como assim Ronan se eu pegar aqui ó timer 1. Val - 5000 certo e multiplicar por 0,05 basicamente ele vai voltar pro zero e ó.
E descer de novo ele não vai ir de de baixo para cima quer ver ó vamos ver se Vocês entenderam isso aqui ó ele vai descer quando chegar lá exatamente no 5000 ele vai deslizar de novo para baixo porque ele fez a mesma coisa Ele usou a mesma lógica que a gente tinha criado antes certo só que que que a gente quer de fato a gente quer que em vez que ele vá e multiplicado por 0,05 indo do 0 a 50 eu quero que vá do agenta para o zero eu quero fazer o caminho oposto né Então como que eu faço isso antes de explicar.
Como que eu vou fazer isso eu quero deixar mais claro colocando todo esse cálculo num campo de texto tá eu acho que vai ficar visualmente para você que tá tentando entender ainda não pegou aqui a ideia é o seguinte ó vou colocar esse mesmo wif que a gente estava conversando e eu vou ter o todos esses valores de pixis no no num campo de texto certo então ó tá vendo ele foi descendo parou no 50 tá vendo ele chegar nos 5 segundos ele foi descendo não parou mais Então qual que é a ideia aqui.
Se o timer for menor que 5.000 ele vai ver já é maior que 50 se sim coloco 50 ou seja não continue descendo Beleza a gente já fez isso não continue descendo mantenha 50 senão coloque o valor do Y ou seja 0 1 2 3 até chegar no 50 faz TR chegou no 50 Beleza o valor Y da do volta tô falando o seguinte é menor que 5.000 beleza fez isso senão quer dizer que era maior ou igual a 5.000 então entrou aqui quando entrou aqui ó Onde tá a seta azul tá vendo que que aconteceu o.
Timer é maior que 5.000 então por exemplo ele é 5000 e 1 tá 5001 msos depois 5002 5003 vai beleza então ó 5001 quando é 5001 aqui que que é o valor Y da volta vai ser 51 - 5000 Vai dar quanto isso vai dar 001 ou seja vai dar 1 x 0,05 e isso vai ser colocado como o x como o Y né ali para mim ou seja ele vai voltar lá pro zero vai dar tipo 0,0.
Alguma coisa ou seja ele vai colocar zer pixels ou seja ele voltou pro início não é isso que eu quero eu quero que faça o quê 50 da onde eu tô menos esse esse valor calculado vocês não concordam ou seja o valor da volta vai ser 50 menos essa esse valor calculado Então pensa comigo ele não tá descendo assim ó zero pixels 1 pixels 2 pixels 3 10 pixels 20 40 50 né então ele vai ele tá lá em cima e vai descendo concorda vai descendo que.
Que eu vou fazer 50 menos esse valor então vai ser 50 Men 0 então meu objeto vai tá aqui e daí vai subtrair um vai subtrair vai subtrair ele vai começar a subir ao invés de descer certo agora eu vou pegar ó vou pegar isso aqui colocar lá né no Y do objeto porque a gente tava mexendo aqui concordam então Ó vou só trocar aqui 50 menos o valor do Y da Volta quando eu clicar aqui a gente vai ver ele vai descer quando chegar no 5.000 né vai ser ele vai começar eh.
Fazer o cálculo voltando tá vendo e aqui o y beleza ó - 100 por exemplo ele foi subindo Não tem problema né Afinal eh como tá dentro de um contêiner ali não tem problema n um então lembra que eu falei para vocês eu não consigo colocar aqui um Y tá ó não consigo colocar um Y aqui e negativo mas mas olha que interessante Vou colocar aqui um um retângulo Vou colocar aqui um slider tá ó.
Slider e nesse slider eu vou fazer o seguinte ó o y o y desse objeto desse retângulo aqui vai ser igual a slider pon value tá ó ã slider 1 2 pon value vezes -1 certo Então olha só que interessante eu consigo fazer ele ficar negativo usando variável tá vendo eu não preciso então daquele dessa quebra que eu tava.
Colocando só que vocês não iam entender muito bem por isso que eu coloquei ela ali então eu consigo assim usar ó negativo em objetos mas mas eu preciso utilizar variáveis para isso né não consigo vir aqui e colocar no objeto o valor - 50 né ele não deixa ó - 50 ele volta para zero Beleza então esse retângulo que a gente inventou aqui ó não precisa dele Certo não precisa a gente não precisa dele e agora sim ó ele.
Vai descer até ali e subir subir até ali tá porém essa eu posso fazer ele descer de um de um de um negativo vocês não concordam vocês não concordam comigo então o que que eu vou fazer aqui a solução aqui é tão simples e tão tranquila de entender que olha só eu vou fazer o seguinte eu quero que independente dos pixels que estão sendo movimentado eu quero subtrair a altura desse objeto Então olha só.
Independente desse 0 a 50 Ok e de 50 a z0 que a gente fez por todo esse cálculo que a gente fez eu quero fazer o seguinte tira a altura do objeto ou seja ele vai descer 50 pixels Ó daqui ó considerando que já tirou a altura desse objeto então ele vai descer dali entenderam Então dessa maneira agora quando eu clicar ó ele vai descer exatamente dali bom 50 pixels galera ficou não ficou tão legal agora descendo.
Dali Então esse 50 PI pixels ele tem que ser uma variável tá ele tem que ser uma variável que eu possa ficar testando então a ideia aqui seria colocar isso como um parâmetro no componente também então já tá pronto o nosso componente o que que eu preciso alterar agora bom Ó esse 50 vai ser a quantidade de pixels né então ã primeira coisa que a gente vai fazer é criar e esse parâmetro certo então eu vou ter um parâmetro de pixels eu vou ter um.
Parâmetro de quanto tempo eu poderia colar né quanto tempo eu quero que espere e tudo mais ou eu poderia só criar o componente com tudo isso fixo né sempre vai descer tantos pixels né o que eu acho melhor então sempre vai descer tantos pixels afinal não preciso ficar deixando isso dinâmico e depois vai ficar tantos segundos depois vai subir não necessariamente precisa ser um parâmetro pro usuário escolher pode ser algo que você criou e você ache melhor fixo tá então cada componente você escolhe o que que é parâmetro o que que não é mas vamos imaginar que são.
CLique no Link do Vídeo: https://www.youtube.com/watch?v=CMQ1udRqNZo
Postar um comentário