Mudanças entre as edições de "Oficina 2 de App Inventor"
Ir para navegação
Ir para pesquisar
(11 revisões intermediárias por 2 usuários não estão sendo mostradas) | |||
Linha 9: | Linha 9: | ||
== 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. | ||
+ | === 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: | ||
− | == Exercícios a serem desenvolvidos | + | [[Arquivo:AppInventor_Design_AgTel1.png|400px]]<br> |
+ | |||
+ | ;Modifique os nomes dos componentes conforme a figura abaixo: | ||
+ | |||
+ | [[Arquivo:AppInventor_Componentes_AgTel1.png|400px]] | ||
+ | |||
+ | ===Inicie a agenda com 4 contatos=== | ||
+ | [[Arquivo:AppInventor_CreateVar_AgTel1.png|600px]] <br> | ||
+ | |||
+ | ===Crie o procedimento geral de limpeza dos campos de digitação da tela e índice da agenda=== | ||
+ | [[Arquivo:AppInventor_LimpaTela_AgTel1.png|600px]] | ||
+ | ===Crie o procedimento para Inserir novos contatos=== | ||
+ | [[Arquivo:AppInventor_Inserir_AgTel1.png|600px]] | ||
+ | ===Crie o procedimento para Acessar os contatos=== | ||
+ | [[Arquivo:AppInventor_Seleciona_AgTel1.png|600px]] | ||
+ | ===Crie o procedimento para Remover contatos=== | ||
+ | [[Arquivo:AppInventor_Remover_AgTel1.png|600px]] | ||
+ | ===Crie o procedimento para Apagar todos os contatos=== | ||
+ | [[Arquivo:AppInventor_Limpar_AgTel1.png|600px]] | ||
+ | ===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 | ||
+ | |||
+ | Utilize a função ''watch'' para verificar o funcionamento da agenda e para inspecionar o conteúdo das duas listas "AgTelNomes" e "AgTelNumeros" e das variáveis "Index" e "aux_index". | ||
+ | Clique sobre a variável com o botão direito do mouse e selecione watch | ||
+ | |||
+ | === Exercícios a serem desenvolvidos em casa === | ||
#Modificar a função inserir para permitir a modificação de número telefônico de uma pessoa; | #Modificar a função inserir para permitir a modificação de número telefônico de uma pessoa; | ||
+ | #Modificar a função inserir para evitar a inserção de contatos vazios | ||
#Criar uma função para procurar um número na agenda, entrando com dados no textbox; | #Criar uma função para procurar um número na agenda, entrando com dados no textbox; | ||
#Melhorar a função para que dado uma letra inicial no textbox, um listpicker mostre todos os nomes que comecem com aquela letra. | #Melhorar a função para que dado uma letra inicial no textbox, um listpicker mostre todos os nomes que comecem com aquela letra. | ||
#Personalizar a interface da agenda (cores, texto, posição de botões etc). | #Personalizar a interface da agenda (cores, texto, posição de botões etc). | ||
+ | |||
+ | {{ENGTELECO}} |
Edição atual tal como às 15h31min de 18 de setembro de 2014
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:
- Modifique os nomes dos componentes conforme a figura abaixo
Inicie a agenda com 4 contatos
Crie o procedimento geral de limpeza dos campos de digitação da tela e índice da agenda
Crie o procedimento para Inserir novos contatos
Crie o procedimento para Acessar os contatos
Crie o procedimento para Remover contatos
Crie o procedimento para Apagar todos os contatos
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
Utilize a função watch para verificar o funcionamento da agenda e para inspecionar o conteúdo das duas listas "AgTelNomes" e "AgTelNumeros" e das variáveis "Index" e "aux_index".
Clique sobre a variável com o botão direito do mouse e selecione watch
Exercícios a serem desenvolvidos em casa
- Modificar a função inserir para permitir a modificação de número telefônico de uma pessoa;
- Modificar a função inserir para evitar a inserção de contatos vazios
- Criar uma função para procurar um número na agenda, entrando com dados no textbox;
- Melhorar a função para que dado uma letra inicial no textbox, um listpicker mostre todos os nomes que comecem com aquela letra.
- Personalizar a interface da agenda (cores, texto, posição de botões etc).