CURSO-APP-INVENTOR-2-BASICO-TOPICO-3.pdf

Curso APP Inventor Brasil

TELA DE CADASTRO

APP Inventor Brasil [email protected]




Vamos dar início à nossa segunda tela, na qual serão inseridas as informações do compromisso que queremos cadastrar. Nesta aula não iremos nos preocupar em deixar o nosso APP bonito, teremos um tópico inteiro para fazermos isso. Vocês serão apresentados nesta aula a um novo componente: o textBox (caixa de texto). As caixas de texto são usadas geralmente em formulários, sempre que se precisa digitar algo dentro do nosso aplicativo é necessária uma caixa de texto. Este componente é o segundo na coluna do palette.

Figura 23: TextBox no palette Arraste para a tela de cadastro os seguintes componentes: três labels, duas caixas de texto e dois botões. Arrume-os para que fiquem nessa configuração de layout:

Figura 24: layout da tela de cadastro Com relação à label do título, só alteramos o texto dentro dela, o tamanho da fonte e a colocamos em negrito. Nas outras labels aumente o tamanho da fonte também, podem ficar à vontade com relação a essas alterações, coloquem da forma que acharem melhor. Assim como as alterações nos botões, aqui colocamos a fonte em negrito e com o mesmo tamanho das labels. Você já deve ter percebido que as propriedades das textBox não são muito diferentes das labels ou dos botões, as novidades são:

Faz com que o texto, após preencher toda a largura da caixa, pule para linha de baixo.

Ativa o teclado numérico, não deixando que letras sejam digitadas. APP Inventor Brasil [email protected]


Na primeira textBox ajuste somente sua largura (width) para que fique com 70%, e na segunda a mesma largura, também modifique sua altura (height) para 80 pixels e por último marque o multiLine. Não se esqueça de renomear todos os seus componentes para que fique mais fácil a programação na aba Blocks. Conecte o aiCompanion e acompanhe com está ficando o APP em seu dispositivo. Vamos programar agora! A primeira coisa que faremos, será configurar o botão de voltar para que quando ele seja clicado ele volte à tela anterior, porém não vamos mandá-lo abrir a tela inicial, por que não é legal para o desempenho do aplicativo que nós fiquemos abrindo telas demais. Então acostume-se a sempre que tiver um botão voltar, usar um bloco para fechar a tela atual, você irá encontrá-lo na categoria control.

Figura 25: Bloco para fechar a tela Agora basta colocá-lo dentro do evento de click do botão voltar. Nosso botão salvar ainda não irá guardar os dados digitados por nós, mas vamos fazer um teste para demonstrar como você pega o valor digitado dentro da caixa de texto e atribui a algum outro objeto. Faça o seguinte: coloque o evento de click do botão salvar, dentro dele coloque os seguintes blocos:

Isso fará com que a propriedade text da label receba o valor do text da caixa de texto. É bastante simples, sempre que desejar capturar o que está dentro de uma textBox você deve pegar o valor da propriedade text . Agora faça o teste digitando algo na caixa de texto e depois apertando o botão salvar. Legal! Os eventos e chamadas do componente são:

É acionado quando a caixa de texto está em foco, ou seja quando ela é clicada.

Faz o contrário da anterior, é acionado quando você clica em outro componente ou em uma área vazia da tela. Esta chamada esconde o teclado. Faz o componente ficar selecionado. Como a chamada ao teclado já é automático, e assim que você clica na caixa de texto o teclado aparece, vamos mexer apenas com o evento LostFocus e a chamada HideKeyboard. Coloque a chamada para esconder o teclado sempre que a caixa sair de foco. E nossos blocos devem ficar assim:

Figura 27: Configuração das caixas de texto APP Inventor Brasil [email protected]


Por enquanto nosso botão de salvar não fará nada, mas em breve ele será muito importante para nosso projeto. No material complementar você poderá encontrar mais informações sobre as caixas de texto assim como a apresentação de uma caixa que não foi falada aqui aula, que é a caixa de texto para senhas. No próximo tópico vamos conhecer alguns componentes muito interessantes, mas vamos focar no básico. Exercícios:

Utilizando a mesma tela e os mesmos componentes dessa aula, adicione um componente notifier (exibido na aula 2), e faça: 1- Faça com que, quando a 1ª textbox perder o foco, a 2ª textbox receba como dica o texto escrito na 1ª (dica: use o bloco Hint para isso). 2- Usando o notifier, quando a 2ª textbox perder o foco, um alerta deve ser mostrado com o texto inserido atualmente na mesma. 3- Desafio: Faça uma label receber um texto digitado no dispositivo, sem usar nenhuma textbox (dica: use os eventos do componente notifier)


CURSO-APP-INVENTOR-2-BASICO-TOPICO-3.pdf

Recommend Documents