Configuração dos Botões

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

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

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

1. Agora só existe um -"OnClick". É adicionado automaticamente e significa que o botão actuará quando clicar nele (que é exactamente o que precisa).
2. 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":

1. 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).
2. Clicar em "Guardar".

Configurar o resto dos botões para serem ocultados da mesma forma.

1. É assim que deve ser a lista de gatilhos para o botão "Casa daDuquesa", quando terminar.
2. Clique em "Guardar" para guardar as suas alterações.

Agora precisa de ter a certeza de que tudo funciona.

1. Guarde as suas alterações.
2. Carregue no botão para publicar a aplicação (colocando-a na Internet), seleccione "Desenvolvimento".
3. 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" (mostrarmensagem ao utilizador).

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