Este artigo não estava previsto para esta série, porém considerei muito importante sua produção após um comentário muito relevante feito ainda no primeiro post da série pelo leitor Rafael.
Segue o comentário do Rafael:
“Mestre, MUITO BOM. Me tire uma dúvida. Não consegui fazer um botão chamar uma screen diferente daquela em que ele está presente. Sabe dizer como fazer?”
Em resposta a esta dúvida, que muitos outros também podem ter, vamos desenvolver um app Android simples, com duas telas usando o MIT App Inventor.
Para esse App iremos seguir 7 simples passos:
Passo 1: criar um novo App Android. Caso não saiba como, aconselho que acompanhe a série completa do início.
Passo 2: adicione um label em sua primeira tela para identificarmos que estamos na tela 1. Não renomeie a tela 1, pois esta é sua tela principal do app android. As demais telas que usar podem ser renomeadas a critério de cada desenvolvedor. Adicione também um botão na tela 1 que ao ser clicado irá seguir para a tela 2.
Passo 3: Adicione uma nova tela clicando no botão “Add Screen”, indicado pela seta vermelha na imagem acima. Nesta nova tela adicione um label para identificarmos que estamos na tela 2. Adicione também um botão na tela 2 que ao ser clicado irá retornar para a tela 1 do app.
Passo 4: abra o editor de blocos clicando no botão “Open the Blocks Editor”, indicado pela seta vermelha na imagem acima. Perceba que o editor de blocos abrirá de acordo com a tela em que você estiver trabalhando, e que quando selecionarmos a outra tela o editor de blocos irá atualizar-se.
Os procedimentos para cada uma de nossas duas telas serão quase idênticos, por isso vou exibir somente o processo realizado na tela do nosso app android.
Passo 5: No editor de blocos selecione a aba “My Blocks”, clique no “botão” e em seguida em seu evento “Click”, arrastando a “peça” para a área em branco. Como mostra a imagem abaixo:
Passo 6: No editor de blocos selecione a aba “Built-In”, clique em “Control”, encontre o comando “open another screen” e o arraste até encaixar no evento click do botão.
Como mostra a figura abaixo:
Passo 7: No editor de blocos selecione a aba “Built-In”, clique em “Text”, encontre o comando “text” e o arraste até encaixar no comando “open another screen”. Nesta bloco de texto informe o nome da tela que será chamada quando o botão em questão for clicado.
Como mostra a figura abaixo:
Pronto, agora é só repetir o procedimento para a outra tela selecionando a mesma no App Inventor Designer e encaixando as peças no Editor de Blocos.
Clique aqui para baixar o App Android criado neste exemplo.
Conclusão da criação de App Android com várias telas
Este app Android simples com apenas duas telas foi criado para exemplificar uma maneira de desenvolvimento de Apps com as ferramentas do Mit App Inventor.Não devemos alterar nunca o nome da primeira tela, pois esta será a tela principal do aplicativo.
Para realizar os testes é necessário empacotar o App Android criado para um celular, pois não é permitido testes durante o desenvolvimento de aplicativos com várias telas no App Inventor.
