Curso APP Inventor Brasil

APRIMORANDO NOSSA TELA DE

CADASTRO PARTE I

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

*nota: durante o desenvolvimento do curso, a plataforma foi atualizada, surgiram algumas novidades, como por
exemplo, na aba blocks agora possvel guardar blocos em uma mochila que aparece no canto superior direito da tela, entre
outras mudanas. Caso seja necessrio, sero comentadas no curso.

Nesta aula vamos finalizar a estrutura do nosso formulrio de cadastro, e conhecer mais um
componente do APP Inventor. Em muitos aplicativos voc encontra um menu que ao ser selecionado abre
uma lista com vrias opes para serem escolhidas, so as famosas listas suspensas. Vamos usar uma lista
dessas para selecionar qual a prioridade do nosso compromisso. Na aba designer, procure no palette o
componente Spinner. Coloque-o na tela de cadastro acima do boto salvar.

Figura 37: Spinner

O Spinner possui poucas propriedades, as novidades so Prompt e ElementsFromString. A primeira
define um ttulo para a caixa de dilogo do menu suspenso e a segunda define as opes que sua lista ter.
Nossa lista vai ter trs opes: baixa, mdia e alta, referentes prioridade do nosso compromisso.
Coloque esses valores em ElementsFromString separando-os por virgula, conforme a figura abaixo:

Figura 38: Elementos inseridos

Agora coloque no Prompt um ttulo, no meu coloquei prioridade. Vamos explorar um pouco os blocos

desse componente, v para aba blocks. O spinner possui apenas um evento, o

APP Inventor Brasil
Contato.appinventorbrasil@gmail.com

que

Curso APP Inventor Brasil

assim como outros que j vimos, executado aps uma opo ter sido selecionada, o selection dentro do
bloco a opo que foi selecionada. Caso voc selecione a opo baixa, o selection ter o valor baixa.
Vamos fazer um teste, dentro deste evento coloque os blocos necessrios para quando for
selecionada uma opo o texto da label do ttulo receber a opo selecionada. Tente fazer sozinho antes de
prosseguir.
Existem algumas maneiras de se fazer este teste, vou mostrar usando o selection do evento

AfterSelecting, ao colocar o mouse sobre o selection aparecero mais dois blocos:

O que possui o get(pegar) captura o valor que foi selecionado, e o set (configura) atribui um valor para a
opo selecionada. Como a opo j possui um valor, que foi definido na aba designer, vamos pegar esse
valor e atribu-lo ao texto da label ttulo.

Figura 39: Bloco de teste do spinner

Agora teste atravs do Al Companion.

Figura 40: Teste do spinner

Alm do evento AfterSelecting, o componente Spinner possui um mtodo chamado
. Ele serve para chamar a lista de opes, podemos testar este mtodo fazendo
com que quando o boto salvar for clicado ele chame a lista de opes do Spinner. Veja como fica os blocos
e teste para ver o funcionamento.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 42: DisplayDropdown

Bom pessoal, encerramos aqui a estrutura da nossa tela de cadastro. Com relao aparncia no se
preocupe, no Tpico 8 vamos modific-la e deixar nosso aplicativo mais bonito. No prximo tpico irei
apresentar alguns conceitos necessrios para continuar o desenvolvimento do curso, vamos aplicar esses
conceitos utilizando componentes do APP Inventor, porem precisamos entender a teoria primeiro.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com