Mudanças entre as edições de "Oficina 2 de App Inventor"

De MediaWiki do Campus São José
Ir para: navegação, pesquisa
(A Agenda Telefônica)
(A Agenda Telefônica)
Linha 10: Linha 10:
 
== A Agenda Telefônica ==
 
== A Agenda Telefônica ==
 
Usando o AppInventor construa uma agenda telefônica básica na qual você armazena o nome e telefone dos seus contatos.   
 
Usando o AppInventor construa uma agenda telefônica básica na qual você armazena o nome e telefone dos seus contatos.   
; Utilize o Designer:
+
=== Cria a interface gráfica utilizando o Designer===
Adicione a partir da "Palette" os componentes necessários para construir a agenda. Arraste para área do Screen, a partir da palette "Basic", 2 TextBox, 3 Buttons e 1 ListPicker.  Em seguida arraste da palette "Screen Arrangement" 1 HorizontalArrangement.  Ajuste os componentes para que fiquem na tela conforme a figura abaixo:
+
;Adicione a partir da "Palette" os componentes necessários para construir a agenda:
 +
Arraste para área do Screen, a partir da palette "Basic", 2 TextBox, 3 Buttons e 1 ListPicker.  Em seguida arraste da palette "Screen Arrangement" 1 HorizontalArrangement.  Ajuste os componentes para que fiquem na tela conforme a figura abaixo:
  
 
[[Arquivo:AppInventor_Design_AgTel1.png|400px]]<br>
 
[[Arquivo:AppInventor_Design_AgTel1.png|400px]]<br>
  
Modifique os nomes dos componentes conforme a figura abaixo:
+
;Modifique os nomes dos componentes conforme a figura abaixo:
  
 
[[Arquivo:AppInventor_Componentes_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_Componentes_AgTel1.png|400px]]
  
;Inicie a agenda com 3 contatos:
+
===Inicie a agenda com 3 contatos===
 
[[Arquivo:AppInventor_CreateVar_AgTel1.png|400px]] <br>
 
[[Arquivo:AppInventor_CreateVar_AgTel1.png|400px]] <br>
 
[[Arquivo:AppInventor_Iniciate_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_Iniciate_AgTel1.png|400px]]
;Crie o procedimento geral de limpeza dos campos de digitação da tela e índice da agenda:
+
===Crie o procedimento geral de limpeza dos campos de digitação da tela e índice da agenda===
 
[[Arquivo:AppInventor_LimpaTela_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_LimpaTela_AgTel1.png|400px]]
;Crie o procedimento para Inserir novos contatos:
+
===Crie o procedimento para Inserir novos contatos===
 
[[Arquivo:AppInventor_Inserir_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_Inserir_AgTel1.png|400px]]
;Crie o procedimento para Remover contatos:
+
===Crie o procedimento para Remover contatos===
 
[[Arquivo:AppInventor_Remover_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_Remover_AgTel1.png|400px]]
;Crie o procedimento para Apagar todos os contatos:
+
===Crie o procedimento para Apagar todos os contatos===
 
[[Arquivo:AppInventor_Limpar_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_Limpar_AgTel1.png|400px]]
;Crie o procedimento para Acessar os contatos:
+
===Crie o procedimento para Acessar os contatos===
 
[[Arquivo:AppInventor_Seleciona_AgTel1.png|400px]]
 
[[Arquivo:AppInventor_Seleciona_AgTel1.png|400px]]
 +
===Teste a agenda telefonica===
 +
Conecte o Emulador ou Celular Android e efetue os seguintes testes:
 +
#Consulte a agenda telefônica
 +
#Insira novos contatos
 +
#Apague alguns contatos
 +
#Limpa toda a agenda
  
 
== Exercícios a serem desenvolvidos na aula ==
 
== Exercícios a serem desenvolvidos na aula ==

Edição das 16h05min de 25 de abril de 2012

OBJETIVOS

Ao final da aula o aluno deverá ser capaz de:

  • Criar e operar sobre listas no app inventor;
  • Usar o componente ListPicker para visualização e operação sobre listas;
  • Usar o componente TextBox para entrada e visualização de dados.
  • usar a opção watch para acompanhar o valor de variáveis.

A Agenda Telefônica

Usando o AppInventor construa uma agenda telefônica básica na qual você armazena o nome e telefone dos seus contatos.

Cria a interface gráfica utilizando o Designer

Adicione a partir da "Palette" os componentes necessários para construir a agenda

Arraste para área do Screen, a partir da palette "Basic", 2 TextBox, 3 Buttons e 1 ListPicker. Em seguida arraste da palette "Screen Arrangement" 1 HorizontalArrangement. Ajuste os componentes para que fiquem na tela conforme a figura abaixo:

AppInventor Design AgTel1.png

Modifique os nomes dos componentes conforme a figura abaixo

AppInventor Componentes AgTel1.png

Inicie a agenda com 3 contatos

AppInventor CreateVar AgTel1.png
AppInventor Iniciate AgTel1.png

Crie o procedimento geral de limpeza dos campos de digitação da tela e índice da agenda

AppInventor LimpaTela AgTel1.png

Crie o procedimento para Inserir novos contatos

AppInventor Inserir AgTel1.png

Crie o procedimento para Remover contatos

AppInventor Remover AgTel1.png

Crie o procedimento para Apagar todos os contatos

AppInventor Limpar AgTel1.png

Crie o procedimento para Acessar os contatos

AppInventor Seleciona AgTel1.png

Teste a agenda telefonica

Conecte o Emulador ou Celular Android e efetue os seguintes testes:

  1. Consulte a agenda telefônica
  2. Insira novos contatos
  3. Apague alguns contatos
  4. Limpa toda a agenda

Exercícios a serem desenvolvidos na aula

  1. Modificar a função inserir para permitir a modificação de número telefônico de uma pessoa;
  2. Criar uma função para procurar um número na agenda, entrando com dados no textbox;
  3. Melhorar a função para que dado uma letra inicial no textbox, um listpicker mostre todos os nomes que comecem com aquela letra.
  4. Personalizar a interface da agenda (cores, texto, posição de botões etc).