O botão é o elemento mais simples do editor de Web Apps, mas desempenha uma das funções principais na interface do aplicativo concluído. Além disso, hoje oferecemos a você fazer um aplicativo que consistirá apenas de botões. A tarefa pode parecer um pouco estranha, mas se você fizer isso, vai aprender a customizar botões, entender o básico de trabalhar com o editor e a lógica de toda a plataforma.
Vamos fazer um pequeno teste baseado no livro Alice's Adventures in Wonderland. Vamos descobrir se os usuários se lembram de onde Alice conheceu o Gato de Cheshire.
Nosso aplicativo terá:
- Texto da pergunta: Onde Alice conheceu o Gato de Cheshire?
- Botões de escolha: Mad-Tea Party, Duchess 'House, Wood, Croquet-Ground. Se o usuário escolheu a resposta errada - o botão com ele desaparece, se o usuário escolheu a correta - todos os botões com as respostas erradas desaparecem de uma vez.
- Mensagens pop-up que informam se a resposta está correta ou não.
A propósito, você se lembra de qual opção é a correta?
Como criar um botão
Arraste o elemento "Botão" com o ponteiro do mouse (clicando e segurando a tecla esquerda) para a área onde deseja colocar o botão.
Você precisa adicionar quatro botões - de acordo com o número de respostas possíveis.
Personalização da aparência do botão
Clique no primeiro botão uma vez - a janela de configurações será aberta. Você se encontrará na guia "Look & Feel", que é responsável pela aparência dos botões.
1. Edite os seguintes campos:
- Etiqueta: texto do botão - digite a primeira resposta: "Mad-Tea Party";
- Ícone: ícone do botão - clique em "Selecionar ícone" e escolha o que você gosta (agora existem mais de 2500 deles);
- Tamanho: tamanho do botão - defina como “Grande” para tornar o botão grande;
- Nome: este é o nome pelo qual o botão é "visto" por outros elementos em seu aplicativo; cada botão precisa de um nome exclusivo - nomeie o botão "btn-mad_tea".
Quando você edita os campos, a imagem na parte superior da janela muda para mostrar como o botão ficará após as configurações terem sido aplicadas.
2. Ao preencher todos os campos - clique em "Salvar".
- Configure o resto dos botões por analogia com o primeiro, usando os nomes: btn-duchess_h, btn-wood, btn-croquet_g.
- Clique em "Salvar alterações" para salvar as alterações em seu aplicativo - caso contrário, os botões desaparecerão quando você atualizar a página ou fechar o editor.
Configurando gatilhos e eventos
Agora você precisa definir as ações dos botões. Vamos começar com aquele com a resposta correta - "Casa da Duquesa" . Sua tarefa é "explicar" para o editor de aplicativos da web:
- qual é o gatilho do botão - significa, a que exatamente ele deve reagir: ao pressionar;
- que evento ocorre neste caso: os botões desaparecem;
- onde este evento acontece, quais elementos mudam: outros botões.
Volte para as configurações do botão “Duchess 'House” e vá para a guia Triggers. Todos os gatilhos que foram adicionados para ele serão exibidos:
- Agora há apenas um - "OnClick". Ele é adicionado automaticamente e significa que o botão atuará quando você clicar nele (que é exatamente o que você precisa).
- Além de "OnClick", outros gatilhos são possíveis para o botão. Uma lista completa com uma descrição está na documentação da plataforma.
Agora você precisa especificar as informações sobre o evento (você terá três deles - um para cada botão). Clique no "+" próximo a "OnClick". A janela de configurações do evento será aberta.
No campo "Componente alvo", é necessário indicar onde o evento ocorrerá, no campo "Ação" - que tipo de evento será.
Esconda todas as respostas erradas
Adicione um evento que oculte o botão Mad-Tea Party:
- Clique no campo "Componente de destino" e encontre-o com o nome exclusivo btn-mad_tea. No campo Ação, selecione o evento apropriado, neste caso - “Ocultar Botão”.
- Clique em “Salvar”.
Configure o resto dos botões para que fiquem ocultos da mesma maneira.
- É assim que a lista de gatilhos para o botão “Casa da Duquesa” deve ficar quando você terminar.
- Clique em “Salvar” para salvar suas alterações.
Agora você precisa ter certeza de que tudo funciona.
- Salve suas alterações.
- Pressione o botão para publicar o aplicativo (colocando-o na Internet), selecione "Desenvolvimento".
- Clique em ir para o ícone do aplicativo - ele será aberto em uma nova guia.
Acesse o aplicativo e certifique-se de que, ao selecionar a opção correta, o restante dos botões desapareça.
Ocultar respostas incorretas ao clicar
Agora vamos fazer com que o botão com a resposta errada "Mad-Tea Party" desapareça quando o usuário clicar nele. Nesse caso, tanto o gatilho (pressionamento) quanto o evento (desaparecimento) pertencem ao mesmo botão - você só precisa trabalhar com ele.
Abra as configurações do botão, vá até a guia “Triggers”, adicione um novo evento ao gatilho “onClick”. No campo “Componente de destino”, selecione “Este componente (próprio)” para indicar que o botão ativa um evento para si mesmo. O valor do campo "Action" é o mesmo do exemplo anterior - "Hide Button".
Salve todas as alterações e publique o aplicativo, alterne para a guia do aplicativo e atualize-o. Verifique se tudo funciona conforme o esperado:
Agora ajuste a madeira e o solo do croquet. Salve, publique e teste novamente.
Tipos de botões
Ótimo, as respostas funcionam. É hora de adicionar uma pergunta. Claro, Appmaster.io tem elementos especiais para isso, mas você se lembra de nossa tarefa - botões e nada mais. Então, vamos adicionar mais um. Desta vez - não para a tela principal, mas para o topo da página:
Para torná-lo mais divertido, responda à pergunta como nesta captura de tela:
Agora "colorir" usando esquemas de cores para diferentes tipos de botões: vá para as configurações e troque o valor do campo "Tipo" para qualquer outro.
Fizemos assim, mas você pode escolher sua opção, o esquema de cores do botão não afeta seu funcionamento:
Agora, vamos passar para a última tarefa - configurar uma mensagem para o usuário.
Tarefa mais difícil
Você pode exibir uma mensagem na tela de diferentes maneiras. Escolhemos um dos mais incomuns:
- Primeiro, vamos certificar-nos de que os botões que contém a pergunta sejam automaticamente desativados quando o usuário der a resposta correta. Eles ficarão cinza e pararão de responder aos cliques. Para fazer isso, usamos a função Enable (Disable), que ainda não consideramos, e o já familiar "onClick".
- Em seguida, consideraremos um novo acionador - onStateChange, que é acionado quando o estado do botão muda. Vamos atribuir esse gatilho ao "?" - e a mensagem será exibida nele.
Botões de desativação
Você pode ativar ou desativar o botão manualmente em suas configurações, alternando o seletor de campo "Ativar":
Para configurar a comutação automática, abra as preferências do botão “Duchess 'House” e adicione um gatilho “onClick”. No campo "Componente alvo" selecione um dos botões de pergunta, nos campos "Ação" - "Botão Desativar". Repita para todos os botões que contêm uma pergunta. Deve ser assim:
Lembre-se de salvar todas as alterações, publicar e verificar se o aplicativo está funcionando corretamente.
Agora, vamos vincular o início da mensagem ao botão "?" (nós o chamamos de "btn_qqq"). Vamos adicionar o gatilho "onStateChange" a ele. Ele é ativado quando o estado do botão muda - por exemplo, quando ele é desligado.
No campo “Componente de destino”, selecione “Aplicativo” (a mensagem aparecerá na janela do aplicativo), no campo “Ação” - “Mostrar mensagem da IU” (mostrar uma mensagem ao usuário).
- No campo "Estilo da mensagem", escolha o que melhor se adapta à sua situação. Em nosso caso, isso é "Sucesso" - uma mensagem sobre a conclusão bem-sucedida.
- Preencha os campos "Título" e "Conteúdo" - informe ao usuário que a resposta está correta ou apenas escreva algo legal.
Salve, publique e teste.
Resultado
Escolhendo a opção correta, os botões com respostas incorretas devem ser ocultados, o texto da pergunta deve esmaecer e uma mensagem de confirmação deve aparecer.
Claro, era possível personalizar a mensagem mais facilmente vinculando-a ao botão de resposta correta. Embora hoje não estejamos procurando caminhos fáceis. Além disso, você já sabe o suficiente para fazer isso sem nossas instruções. Tente personalizar a mensagem de erro que aparecerá quando você escolher a resposta errada . Deve ser assim:
Temos certeza de que esta instrução o ajudou a conhecer melhor o Appmaster.io . Mas se não ficou claro (ou talvez, pelo contrário, simples demais), escreva para o canal de telegramas do nosso suporte técnico sobre as instruções de que necessita. Vamos escrevê-los!
Se você estiver procurando por informações mais detalhadas sobre Studio.appmaster.io , consulte nossa documentação .
