TELA INICIAL

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Primeiramente vamos criar um novo projeto, acredito que seja seu primeiro contato com o APP
Inventor ento no haver nenhum projeto na sua lista. Clique em start new Project no canto superior
esquerdo da tela. Ir aparecer uma janela pedindo que voc coloque um nome em sua aplicao, no meu
caso coloquei AgendaCompromissos tudo junto pois ele no aceita espao ou caracteres especiais no nome.
Nessa segunda aula iremos conhecer dois componentes o Button (boto) e a Label (legenda). V na
coluna Pallete em User Interface (aqui esto os componentes de interface com o usurio), arraste o
componente Button para tela do nosso simulador. Repita o processo, e depois na coluna componets
renomeie os botes para identifica-los melhor. Os meus ficaram com os seguintes nomes: BTN_cadastro e
BTN_compromisso. Agora arraste mais um componente a Label, coloque-a logo acima dos dois botes e
tambm coloque um nome nela (a minha LB_titulo).
Nossa primeira alterao nas propriedades ser na nossa Screen (tela), procure-a e selecione-a na
coluna de componentes, veja as suas propriedades:

Figura 12: Propriedades da Screen

Vamos alterar as seguintes propriedade, coloque o valor que est em destaque nas imagens:

Alinhamento horizontal dos objetos que esto dentro da tela.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Produz um efeito de transio ao se fechar a tela.

Produz um efeito de transio ao se inicializar a tela.

Aplica a barra de rolagem na tela quando o contedo ultrapassa o tamanho.

Possibilita o teste, atravs do viewer, em um dispositivo de tamanho maior.

Exibe uma barra no incio da aplicao.

OBS: Depois falaremos sobre as demais propriedades.

Agora vamos configurar nossa Label: (onde tiver * significa que voc pode modificar a sua escolha)
Por enquanto s PROPRIEDADE DESCRIO
VALOR ALTERADO
faremos essas alteraes. FontBold
Deixa texto em negrito.
True (marcar caixa)
Provavelmente voc j FontSize
Tamanho da fonte.
*30
deve ter descoberto o que Text
Texto que voc desejar mostrar *AGENDA
a maioria das propriedades
na label.
fazem, mas para auxiliar seus estudos futuros ao final do curso eu deixarei um anexo descrevendo todas as
propriedades dos elementos utilizados neste projeto.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 13: Propriedades da label

As alteraes nos botes tambm sero simples, vamos alterar o FontSize, height, width e text que
so respectivamente tamanho da fonte, altura, largura e texto dentro do boto. Nas minhas configuraes
ficaram assim:

Figura 14: Propriedades do boto

APP Inventor Brasil
Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Voc pode alterar algumas propriedades para que se familiarize com elas. Faa as mesmas
configuraes para o segundo boto. At o momento nossa aplicao est assim:

Figura 15: Primeira interface

Bom pessoal o trabalho na aba designer acabou por enquanto, agora vamos a parte da programao.
Selecione a aba Blocks no canto superior direito. Do lado esquerdo temos uma coluna onde so mostrados
todos os blocos, separados por categorias, que podemos utilizar, e logo abaixo voc ver os componentes
de sua tela, ao clicar em um elemento ele mostrar os blocos de programao referentes as aes daquele
objeto, parece complicado, mas no . Acredite!
Vamos comear explicando o significado das cores dos blocos referentes aos elementos da sua
aplicao.
Blocos de cor amarela so eventos, tudo dentro de nossa aplicao deve acontecer dentro de um
bloco de evento, ou seja, para se ter alguma funcionalidade dentro do APP preciso utilizar eventos. Por
exemplo:

O bloco ao lado um evento do elemento boto,

when nome_do_botao .Click que significa: quando o boto x for clicado faa. Tudo que voc
colocar dentro desse bloco ser executado quando o usurio clicar no boto.
Lembre-se: sempre que selecionar um elemento na aba Blocks e ele tiver algum bloco de cor amarela,
eles podem executar alguma tarefa por meio de eventos. Com o decorrer do curso esses conceitos ficaro
mais intendidos.
Blocos de cor verde so as propriedades, sim aquelas mesmas que voc viu na aba designer. Vamos
precisar muitas vezes alterar as propriedades de um elemento atravs da programao.
APP Inventor Brasil
Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 16: Propriedades na aba Blocks

E ainda temos inmeros blocos que so a base da programao do APP Inventor.

Figura 17: blocks

Voltando ao projeto, a primeira coisa que vamos fazer ser modificar as cores dos botes para que
fiquem na mesma cor do layout do projeto, para isso clique na Screen1 na coluna Blocks e procure pelo bloco
que diz when Screen1 .initialize

Descrio: faz algo quando a tela inicializada, aberta de alguma maneira.

No APP Inventor no temos todas as cores e as que tem so muito fortes e no deixam o aplicativo
bonito, por isso vamos usar os blocos. Ns queremos que sempre que a tela inicial seja aberta os botes
apaream com uma determinada cor, v em colors nos blocos e procure pelo bloco:
APP Inventor Brasil
Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

make color este bloco constri uma cor, a partir do padro RGB. Para no
nos adentrarmos muito nessa questo de padres de cores, apenas saiba que as cores na programao so
apresentadas de diferentes maneiras e no somente por nomes. Uma das maneiras o padro RGB (RedGreen-Blue) cada letra pode receber valores inteiros que variam de 0 a 255. Caso queira saber mais sobre
cores vou deixar um link no contedo complementar para que possam ler um artigo sobre isso.

A cor que queremos tem os seguintes valores: RGB (91, 155, 213)
Agora basta escolher em qual elemento, e propriedade, voc deseja inserir esta cor, no nosso projeto
vamos aplicar esta cor nos botes, selecione o boto e procure a propriedade backgroundColor. Existem
dois blocos com essa propriedade, a diferena que o bloco com set configura e o outro captura o valor
daquela propriedade, como queremos configurar vamos usar o set, nosso bloco deve ficar assim:

Figura 18: bloco de cores

Ento vamos colocar essa instruo dentro do evento .initialize da nossa tela. Veja como tudo encaixa
como um quebra-cabea, bem divertido no !
Bom para que os dois botes tenham a mesma cor basta repetir o processo alterando apenas o boto.
A figura abaixo mostra o bloco completo.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 20: bloco de cores final

Para testar suas modificaes faa a conexo com o AI Companion.
Aconteceu algo chato! Os botes apareceram grudados e no possvel delimita-los. Para resolver
esse problema seria necessrio dar uma margem entre os botes, mas no existe essa propriedade nos
botes. Uma maneira criativa que encontrei de fazer essa margem foi utilizando uma label apenas para dar
um espao entre os botes. Arraste uma para o meio dos botes, limpe seu texto e modifique a altura
conforme a distncia que deseja deixar um boto do outro. Se achar necessrio coloque outra para dar um
espao entre o ttulo e o primeiro boto.
Explorando um pouco mais os blocos, agora queremos que ao clicar em um determinado boto ele
abra a tela correspondente ao seu texto. Procure evento .Click e arraste-o para nossa tela de
desenvolvimento. V at os blocos em Control (controle) e procure por open another screen (abra outra
tela) volte aos blocos e pegue o primeiro bloco na categoria text.

Escreva dentro bloco rosa o nome da tela que deseja abrir, vou colocar
compromisso. Repita a ao com o segundo boto. Porm, ainda no temos essas telas ento volte na aba
designer e na barra verde logo acima das colunas selecione Add Screen, coloque exatamente o mesmo nome
que colocou nos blocos. Em cada tela modifique a propriedade title colocando o nome da tela, para poder
testar e verificar se a tela foi aberta corretamente.
Tudo funciona bem? Legal! Estamos quase acabando a primeira tela, s vou explorar mais um evento
dos botes. Volte na aba designer e procure no Palette por notifier nos componentes de interface de
usurio, arraste-o para a tela do viewer. Veja que este elemento no fica visvel, ele serve para mandarmos
algum tipo de mensagem para usurio, como aquelas caixas de confirmao ou mensagens simples trazendo
informaes sobre algo. Vamos aos blocos, selecione o boto de compromisso e use o evento .LongClick,
como o prprio nome sugere, esse evento acionado quando voc pressiona um boto por algum tempo.
Quando isso ocorrer queremos que aparea uma mensagem para o usurio falando o que aquele
boto faz. Selecione o componente notifier.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 21: blocos do Notifier

Veja que agora temos blocos de cor roxa esses blocos so chamados de mtodos ou chamadas.
Imagine que o componente de notificaes uma caixa com vrios tipos de lembretes, esses blocos roxos
so usados para chamar um determinado tipo de lembrete. Por enquanto vamos usar um bem simples, o
.ShowAlert (mostra um alerta) encaixe esse bloco dentro do evento de clique longo do boto, escolha
novamente o bloco de texto, que voc usou para nomear as telas no outro evento, e escreva uma mensagem
pequena dizendo que ao clicar nesse boto voc ir preencher dados sobre um compromisso futuro. (caso
seja o boto de cadastro)

Figura 22: blocos do evento LongClick

Agora faa o teste utilizando o AI Companion. No prximo tpico vamos dar incio a tela de cadastro
da nossa agenda.
Exerccios:
Coloque 2 botes e 1 label na tela. Configure a tela para tamanho fixo (Fixed).
1- Faa com que, ao ser clicado o primeiro boto, a label ocupe todo o espao de tela (os botes
devem ficar visveis.
2- Agora, faa com que ela mude sua cor de fundo e de texto ( sua escolha, lembre-se de usar cores
diferentes para ambos), e apresente um texto (tambm sua escolha, usando o bloco de text).
3- Quando o segundo boto for clicado, a label deve se adaptar ao texto inserido, e deve ficar em 80%
de largura em relao tela, apenas usando os blocos.

APP Inventor Brasil

Contato.appinventorbrasil@gmail.com