Vamos fazer um pequeno questionário baseado no livro "Alice's Adventures in Wonderland". Vamos descobrir se os utilizadores se lembram onde Alice se encontra pela primeira vez com o Cheshire Cat.
A nossa candidatura terá:
- Texto da pergunta: Onde é que Alice conheceu pela primeira vez o Gato de Cheshire?
- Botões de escolha: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground. Se o utilizador escolheu a resposta errada - o botão com ela desaparece, se o utilizador escolheu a correcta - todos os botões com as respostas erradas desaparecem de uma só vez.
- Mensagens pop-up que lhe dizem se a resposta estava correcta ou não.
Como criar um botão
Arraste o elemento "Botão" com o ponteiro do rato (clicando e segurando a tecla esquerda) para a área onde pretende colocar o botão.
É necessário adicionar quatro botões - de acordo com o número de respostas possíveis.
Personalização da aparência do botão
Clicar uma vez no primeiro botão - a janela de ajustes abrir-se-á. Encontrar-se-á no separador "Look&Feel", que é responsável pelo aparecimento dos botões.
1.edite os seguintes campos:
-
Etiqueta: texto do botão - introduzir a primeira resposta: "Mad-Tea Party";
-
Ícone: ícone do botão - clique no ícone "Pick" e escolha o que mais gostar (agora existem mais de 2500);
-
Tamanho: tamanho do botão - definir para "Grande" para tornar o botão grande;
-
Nome: Este é o nome pelo qual o botão é "visto" por outros elementos na sua aplicação; cada botão precisa de um nome único - nomear o botão "btn-mad_tea".
Quando editar os campos, a imagem na parte superior da janela mudará para mostrar como o botão irá ficar após as configurações terem sido aplicadas.
2. Quando preencher todos os campos - clique em "Guardar".
- Configure o resto dos botões por analogia com o primeiro, utilizando os nomes: btn-duchess_h, btn-wood, btn-croquet_g.
- Clique em "Guardar alterações" para guardar as alterações à sua aplicação - caso contrário, os botões desaparecerão uma vez que actualize a página ou feche o editor.
Configuração de gatilhos e eventos
Agora é necessário definir as acções dos botões. Comecemos pela que tem a resposta correcta - "Casa da Duquesa". A sua tarefa é "explicar" ao editor das aplicações Web:
- o que é o gatilho do botão - significa, ao que exactamente deve reagir: ao premir;
- qual o evento que ocorre neste caso: os botões desaparecem;
- onde este evento acontece, que elementos mudam: outros botões.
Voltar às definições dos botões "Duchess' House" e ir para o separador Triggers. Todos os gatilhos que foram adicionados para o mesmo serão exibidos:
- Agora só existe um - "OnClick". É adicionado automaticamente e significa que o botão actuará quando clicar nele (que é exactamente o que precisa).
- Para além de "OnClick", são possíveis outros gatilhos para o botão. Uma lista completa com uma descrição está na documentação da plataforma.
Agora precisa de especificar a informação sobre o evento (terá três deles - um para cada botão). Clique no "+" ao lado de "OnClick". A janela de configuração do evento abrir-se-á.
No campo "Componente alvo", precisa de indicar onde o evento irá ocorrer, no campo "Acção" - que tipo de evento irá ser.
Ocultar todas as respostas erradas
Adicionar um evento que irá esconder o botão "Mad-Tea Party":
- Clique no campo "Componente alvo" e encontre-o pelo nome único btn-mad_tea. No campo Acção, seleccionar o evento apropriado, neste caso - " Hide Button" (Esconder Botão).
- Clicar em " Guardar".
Configurar o resto dos botões para serem ocultados da mesma forma.
- É assim que deve ser a lista de gatilhos para o botão "Casa da Duquesa", quando terminar.
- Clique em " Guardar" para guardar as suas alterações.
Agora precisa de ter a certeza de que tudo funciona.
- Guarde as suas alterações.
- Carregue no botão para publicar a aplicação (colocando-a na Internet), seleccione "Desenvolvimento".
- Clique no ícone "go to your app icon" (ir para o ícone da sua aplicação) - ela irá abrir-se num novo separador.
Vá para a aplicação e certifique-se de que quando seleccionar a opção correcta, o resto dos botões desaparece.
Esconder respostas incorrectas no clique
Agora vamos fazer desaparecer o botão com a resposta errada "Mad-Tea Party" quando o utilizador clicar nele. Neste caso, tanto o gatilho (premir) como o evento (desaparecer) pertencem ao mesmo botão - só é preciso trabalhar com ele.
Abra as definições do botão, vá para o separador " Triggers", adicione um novo evento ao gatilho " onClick". No campo " Target component", seleccionar " This component (self)" para indicar que o botão activa um evento por si próprio. O valor do campo "Action" é o mesmo que no exemplo anterior - "Hide Button" (Esconder Botão). Guardar todas as alterações e publicar a aplicação, mudar para o separador da aplicação, e actualizá-lo. Verifique se tudo funciona como pretendido:
Agora ajustar a "Madeira" e o "Croquet-Ground". Guardar, publicar e testar novamente.
Tipos de botões
Óptimo, as respostas funcionam. É tempo de acrescentar uma pergunta. Claro, Appmaster.io tem elementos especiais para isto, mas lembra-se da nossa tarefa - botões e nada mais. Portanto, vamos acrescentar mais uma. Desta vez - não à tela principal, mas ao topo da página: Para o tornar mais divertido, preencha a pergunta como nesta imagem de ecrã:
Para o tornar mais divertido, preencha a pergunta como nesta imagem de ecrã:
Agora "colorir" usando esquemas de cores para diferentes tipos de botões: vá para as definições e mude o valor no campo "Tipo" para qualquer outro.
Conseguimo-lo assim, mas pode escolher a sua opção, o esquema de cores do botão não afecta o seu funcionamento:
Agora passemos à última tarefa - configurar uma mensagem para o utilizador.
Tarefa mais difícil
É possível exibir uma mensagem no ecrã de diferentes maneiras. Escolhemos uma das mais invulgares:
Primeiro, vamos certificar-nos de que os botões que contêm a pergunta são automaticamente desactivados quando o utilizador tiver dado a resposta correcta. Ficarão cinzentos e deixarão de responder aos cliques. Para tal, utilizamos a função Activar (Desactivar), que ainda não considerámos, e o já familiar "onClick". - Depois consideraremos um novo gatilho - onStateChange, que é accionado quando o estado do botão muda. Vamos atribuir este gatilho ao "?" - e a mensagem será exibida no mesmo.
Desactivação de botões
Pode activar ou desactivar manualmente o botão nas suas definições, alternando o selector de campo "Activar":
Para configurar a comutação automática, abra as preferências do botão " Duchess' House" e adicione um gatilho " onClick". No campo "Target component" seleccionar um dos botões de pergunta, nos campos "Action" - "Disable Button". Repetir para todos os botões que contenham uma pergunta. Deve ter o seguinte aspecto:
Lembre-se de guardar todas as alterações, publicar e verificar se a aplicação está a funcionar correctamente.
Agora, vamos ligar o início da mensagem ao botão "?" (chamamos-lhe "btn_qqq"). Vamos adicionar-lhe o gatilho "onStateChange". Activa-se quando o estado do botão muda - por exemplo, quando se desliga.No
Campo " Target component", seleccionar " Application" (a mensagem aparecerá na janela da aplicação), no campo " Action" - " Show UI Message" ( mostrar mensagem ao utilizador).
- No campo "estilo de mensagem", escolha a que melhor se adequa à sua situação. No nosso caso, isto é "Sucesso" - uma mensagem sobre a conclusão bem sucedida.
- Preencha os campos "Título" e "Conteúdo" - informe o utilizador de que a resposta está correcta ou escreva apenas algo bonito.
Guarde, publique e teste.
Resultado
Escolhendo a opção correcta, botões com respostas incorrectas devem ser ocultados, o texto da pergunta deve desvanecer-se e uma mensagem de confirmação deve aparecer.
Naturalmente, foi possível personalizar mais facilmente a mensagem, ligando-a ao botão de resposta correcta. Embora hoje em dia não estejamos à procura de formas fáceis. Além disso, já se sabe o suficiente para o fazer sem as nossas instruções. Tente personalizar a mensagem de erro que irá aparecer quando escolher a resposta errada. Deve ter este aspecto:
Estamos certos de que esta instrução o ajudou a conhecer melhor o Appmaster.io. Mas se não foi claro (ou talvez, pelo contrário, demasiado simples), escreva para o canal de telegramas do nosso apoio técnico sobre as instruções de que necessita. Iremos escrevê-las!