03-modulo 3 - Blocos 2023

Prévia do material em texto

Módulo 03 - blocos
PDM
Pauta
 Apresentação dos componentes dos Blocos
 Controle, Lógica, Variáveis, Textos e Cores
 Criação de app para demonstração dos componentes
 Teste de app
 Exercício
2
COMPONENTES DO EDITOR DE BLOCOS
3
 A montagem dos blocos determina o comportamento de um componente.
Editor de Blocos
Fonte: autoria própria.
Encaixes:
Editor de Blocos
Fonte: autoria própria.
Blocos mutáveis:
Editor de Blocos
Fonte: autoria própria.
 O App Inventor é, muitas vezes, chamado de programação dirigida por em eventos. 
(WOLBER; ABELSON; SPERTUS; LOONEY, 2011).
 O que isto significa é que a execução dos aplicativos e funções é baseada em reações a 
eventos.
 Quando você clica em um botão, iniciar o aplicativo, agitar o telefone, entrar em 
uma CaixaDeTexto.
 Os eventos precisam acontecer para causar o acontecimento de outra coisa.
Fonte: autoria própria.
Satélite
GPS
Sensores
Usuário
Relógio
Outros
dispositivos
WEB
APP
Conceitos de programação-Eventos
Conceitos de programação - Comportamento 
O comportamento define como o aplicativo deve responder a eventos
8
aplicativo
Conceitos de programação – Tipos de evento
9
tipo de evento Exemplo
evento iniciado pelo 
usuário
Quando o usuário clicar o 
Botão_1 faça,...
evento na 
Inicialização
Quando o aplicativo é iniciado 
faça ...
evento do timer Após 20 milissegundos, faça ...
evento de 
animação
Quando dois objetos colidirem,
faça ...
evento externo Quando o telefone recebe um 
texto, faça ...
Conceitos de programação Evento iniciado pelo usuário
Eventos iniciados pelo usuário são os tipos mais comuns de evento.
10
Conceitos de programação – Evento na Inicialização
 Às vezes, o aplicativo precisa para executar determinadas funções automáticamente quando 
o aplicativo começa utiliza-se os eventos de inicialização.
11
Conceitos de programação Evento do timer
12
Alguma atividade em um aplicativo é acionado pela passagem do tempo.
Conceitos de programação : eventos de animação
 Atividade envolvendo objetos gráficos (sprites) dentro de telas irá acionar eventos
13
Janelas
 É composta por três janelas:
 Multimídia
 Blocos
 Visualizador
14
Blocos Internos - Controle
 Blocos que alteram o fluxo 
do programa
15
Blocos Internos - Variáveis
 Define-se uma variável quando seu aplicativo precisa lembrar algo que não está sendo 
armazenado dentro de uma propriedade de componente. 
16
Blocos Internos - Lógica
 Fazem a comparação resultando em falso ou verdadeiro.
17
Blocos Internos - Lógica
 Exemplo
18
Alterar os valores de Tiro e 
Facada
Blocos Internos - Cor
 Faz a manipulação de cores
19
Atividade – Criação do aplicativo
20
 Módulo 9 – jogo
Atividade – Criação do aplicativo 2 (Extra)
21
 iniciar um novo projeto (modulo0301)
 Abrir um novo projeto no AppInventor
22
23
Passo Objeto Propriedade Valor
1 Screen1 ImagemDeFundo pdm0004.jpg
2 Screen1 Título As 4 operações
Imagem de fundo e título
 Desenvolver o 
layout: inserção da 
imagem do 
arquivo: 
“pdm004.jpg” e 
formatação do 
plano de fundo do 
Screen1.
1
2
3
4
24
Passo Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoHorizontal1
Arrastar para o
visualizador
2 Propriedade OrganizaçãoHorizontal1 AlinhamentoHorizontal Centro:3
3 Propriedade OrganizaçãoHorizontal1 AlinhamentoVertical Base:3
4 Propriedade OrganizaçãoHorizontal1 CorDeFundo
nenhum (Altera a cor de
fundo para transparente)
5 Propriedade OrganizaçãoHorizontal1 Altura 80 pontos
6 Propriedade OrganizaçãoHorizontal1 Largura Preencher principal
7 Paleta Interface Usuário Legenda1
Arrastar para a
Organização Horizontal
8 Propriedade Legenda1 FonteNegrito Marcar
9 Propriedade Legenda1 TamanhoDaFonte 25
10 Propriedade Legenda1 Largura Preencher principal
11 Propriedade Legenda1 Texto AS 4 OPERAÇÕES
12 Propriedade Legenda1 AlinhamentoDoTexto Centro 1
13 Propriedade Legenda1 CorDeTexto Branco
25
Legenda
 Componentes de Design:
 Clique em OrganizaçãoHorizontal e 
arraste para a área do Visualizador.
 Altere as propriedades do componente:
 AlinhamentoHorizontal  para Centro:3 
(Indica que todos os componentes serão 
centralizados
 AlinhamentoVertical  para Base:3 
(Indica que todos os componentes serão 
posicionados na parte inferior.
 CorDeFundo  nenhum (Altera a cor de 
fundo para transparente)
 Altura  80 pontos (Ajusta a altura do 
componente
 Largura  Preencher principal (Ajusta a 
largura do componente a do dispositivo)
26
 Clique na Paleta e em Interface de Usuário;
 Clique e arraste um componente Legenda para dentro da área (ou componente de Designer)
OrganizaçãoHorizontal.
27
Altere as propriedades do Legenda conforme segue:
• Marcar FonteNegrito;
• TamanhoDaFonte  25
• Largura  Preencher principal
• Texto  AS 4 OPERAÇÕES
• AlinhamentoDoTexto  centro:1
• CorDeTexto Branco
Pass
o
Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoHorizontal2 Arrastar para o visualizador
2 Propriedade OrganizaçãoHorizontal2 AlinhamentoHorizontal Centro 3
3 Propriedade OrganizaçãoHorizontal2 AlinhamentoVertical Centro 2
4 Propriedade OrganizaçãoHorizontal2 CorDeFundo
nenhum (Altera a cor de fundo para
transparente)
5 Propriedade OrganizaçãoHorizontal2 Largura Preencher principal
6 Paleta Interface Usuário Legenda2
Arrastar para a Organização
Horizontal2
7 Propriedade Legenda2 FonteNegrito Marcar
8 Propriedade Legenda2 TamanhoDaFonte 16
9 Propriedade Legenda2 Largura Preencher principal
10 Propriedade Legenda2 Texto Número
11 Propriedade Legenda2 CorDeTexto Branco
12 Paleta Interface Usuário CaixaDeTexto1
Arrastar para a Organização
Horizontal2 a direita de Legenda2
13 Propriedade CaixaDeTexto1 Dica Apagar o texto
14 Propriedade CaixaDeTexto1 SomenteNúmeros Marcar
15 Propriedade CaixaDeTexto1 Texto Número
16 Componentes Renomear CaixaDeTexto1 Txt_n1
28
Abaixo do cabeçalho será colocado
o campo para a leitura do primeiro
número.
29
Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoHorizontal3 Arrastar para o visualizador
2 Propriedade OrganizaçãoHorizontal3 AlinhamentoHorizontal Centro 3
3 Propriedade OrganizaçãoHorizontal3 AlinhamentoVertical Centro 2
4 Propriedade OrganizaçãoHorizontal3 CorDeFundo
nenhum (Altera a cor de fundo
para transparente)
5 Propriedade OrganizaçãoHorizontal2 Largura Preencher principal
6 Paleta Interface Usuário Legenda3
Arrastar para a Organização
Horizontal3
7 Propriedade Legenda3 FonteNegrito Marcar
8 Propriedade Legenda3 TamanhoDaFonte 16
9 Propriedade Legenda3 Largura Preencher principal
10 Propriedade Legenda3 Texto Número 2
11 Propriedade Legenda3 CorDeTexto Branco
12 Paleta Interface Usuário CaixaDeTexto2
Arrastar para a Organização
Horizontal3 a direita de Legenda3
13 Propriedade CaixaDeTexto2 Dica Apagar o texto
14 Propriedade CaixaDeTexto2 SomenteNúmeros Marcar
15 Propriedade CaixaDeTexto2 Texto Número
16 Componentes Renomear CaixaDeTexto2 Txt_n2
31
Repita o procedimento para a criação de outro Legenda para 
entrada de outro número (Tabela 32). Renomear a segunda 
CaixaDeTexto de Txt_N2
Janela Componente Propriedade Operação
1 Paleta Organização OrganizaçãoHorizontal4 Arrastar para o visualizador
2 Propriedade OrganizaçãoHorizontal4 Altura Preencher principal
3 Propriedade OrganizaçãoHorizontal4 Largura Centro 2
4 Paleta Organização OrganizaçãoHorizontal5 Arrastar para o visualizador
5 Propriedade OrganizaçãoHorizontal5 AlinhamentoHorizontal Centro 3
6 Propriedade OrganizaçãoHorizontal5 Largura Preencher principal
7 Paleta Interface Usuário Botão1 Arrastar para a Organização Horizontal5
8 Propriedade Botão1 TamanhoDaFonte 30
9 Propriedade Botão1 Altura 50
10 Propriedade Botão1 Largura 40
11 Propriedade Botão1 Texto +
12 Componentes Renomear Botão1 Btn_Soma
13 Paleta Interface Usuário Botão1
Arrastar para a Organização Horizontal5 a direita
de Btn_Soma
14 Propriedade Botão1 TamanhoDaFonte 30
15Propriedade Botão1 Altura 50
16 Propriedade Botão1 Largura 40
17 Propriedade Botão1 Texto -
18 Componentes Renomear Botão1 Btn_Sub
19 Paleta Interface Usuário Botão1
Arrastar para a Organização Horizontal5 a direita
de Btn_Sub
20 Propriedade Botão1 TamanhoDaFonte 30
21 Propriedade Botão1 Altura 50
22 Propriedade Botão1 Largura 40
23 Propriedade Botão1 Texto x
24 Componentes Renomear Botão1 Btn_Mult
25 Paleta Interface Usuário Botão1
Arrastar para a Organização Horizontal5 a direita
de Btn_Mult
26 Propriedade Botão1 TamanhoDaFonte 30
27 Propriedade Botão1 Altura 50
28Propriedade Botão1 Largura 40
29Propriedade Botão1 Texto /
32
33
Janela Componente Propriedade Operação
1 Paleta Organização
OrganizaçãoHorizontal
6
Arrastar para o
visualizador
2 Propriedade
OrganizaçãoHorizonta
l2
AlinhamentoHorizontal Centro 3
3 Propriedade
OrganizaçãoHorizonta
l2
AlinhamentoVertical Centro 2
4 Propriedade
OrganizaçãoHorizonta
l2
Altura 50
5 Propriedade
OrganizaçãoHorizonta
l2
Largura Preencher principal
6 Paleta Interface Usuário Legenda4
Arrastar para a
Organização
Horizontal6
7 Propriedade Legenda4 TamanhoDaFonte 20
8 Propriedade Legenda4 Texto Resultado
9 Paleta Interface Usuário Legenda5
Arrastar para a
Organização
Horizontal6 a direita
de Legenda4
10 Propriedade Legenda5 TamanhoDaFonte 20
11 Propriedade Legenda5 Texto Resultado
12 Componentes Renomear CaixaDeTexo1 Lbl_Resultado
37
Programação
A área de programação do App Inventor é acessada e conhecida pela área dos blocos.
Nela são atribuídas as funções para cada componente bem como as modificações nas propriedades dos
componentes.
Seu acesso ocorre via botão de acesso aos Blocos.
39
Variáveis
 Trata-se de uma entidade para armazenamento de conteúdo na memória do computador.
 As variáveis são constituídas de um identificador, um tipo de conteúdo e um endereço de memória.
 Necessitamos criar duas variáveis, cada uma para receber o valor (conteúdo) de cada número.
40
Paleta componente Operação
1 Variável Iniciar global Colocar o nome numero1
2 Matemática Valor 0 Encaixar em iniciar numero1
3 Variável Iniciar global Colocar o nome numero2
4 Matemática Valor 0 Encaixar em iniciar numero2
 Como se tratam de variáveis numéricas é necessária a conexão de um bloco
(Matemática) com valor zero.
 Arraste o bloco com a indicação do valor numérico zero e encaixe no bloco
indicativo da variável
 Ao fazer esta referência a variável passa a ser considerada numérica.
 Altere o identificador da variável clicando sobre o nome e modificando para
numero1.
 Repita o procedimento sobre a variável nome1, alterando-a para numero2.
41
Paleta componente Operação
1 Variável Iniciar global Colocar o nome numero1
2 Matemática Valor 0 Encaixar em iniciar numero1
3 Variável Iniciar global Colocar o nome numero2
4 Matemática Valor 0 Encaixar em iniciar numero2
PROGRAMANDO AS OPERAÇÕES SOBRE OS BOTÕES (+ ; - ; X e /)
 Localize na tela de Blocos o Botão relacionado a operação Soma: Btn_Soma
 Ao clicar sobre este botão irá aparecer todas os blocos pertinentes à eventos sobre
este botão.
 Arraste para a área de Visualizador a operação relacionada ao evento de clicar sobre
este botão.
42
Paleta componente Operação
Btn_Soma Btn_Soma.clique Colocar o Visualizador
Variável Ajustar para Numero1
Encaixar em fazer
Btn_Soma.clique
Txt_n1 Txt_n1.Texto Encaixar em ajustar numero1
Variável Ajustar para Numero2
Encaixar abaixo de
ajustar numero1
Txt_n2 Txt_n2.Texto Encaixar em ajustar numero2
Lbl_Resultado Lbl_Resultado. Texto Encaixar abaixo de ajustar numero2
Matemática Soma Encaixar em Lbl_Resultado. Texto
Variável Obter 1º operador da soma Numero1
Variável Obter 2º operador da soma Numero2
43
Simplificando a edição
44
45
Execute o emulador e faça testes com as quatro operações definidas na calculadora.
46
ATÉ A PRÓXIMA!
.