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á:

  1. Texto da pergunta: Onde Alice conheceu o Gato de Cheshire?
  2. 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.
  3. 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".

  1. Configure o resto dos botões por analogia com o primeiro, usando os nomes: btn-duchess_h, btn-wood, btn-croquet_g.
  2. 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:

  1. 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).
  2. 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:

  1. 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”.
  2. Clique em “Salvar”.

Configure o resto dos botões para que fiquem ocultos da mesma maneira.

  1. É assim que a lista de gatilhos para o botão “Casa da Duquesa” deve ficar quando você terminar.
  2. Clique em “Salvar” para salvar suas alterações.

Agora você precisa ter certeza de que tudo funciona.

  1. Salve suas alterações.
  2. Pressione o botão para publicar o aplicativo (colocando-o na Internet), selecione "Desenvolvimento".
  3. 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).

  1. 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.
  2. 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 .