APP INVENTOR. APP INVENTOR Exercício 1

Transcrição

1 APP INVENTOR APP INVENTOR Exercício 1

2 Exercício 1 O Objetivo é entender com executar uma ação, sendo esta consequência de uma ação anterior, ou seja, quando um botão for carregado, o texto apresentado numa label vai alterar. A aplicação consiste em dois botões, botão A e botão B, e numa label, na qual, inicialmente vai estar o texto "Nenhum Botão Pressionado". Quando se pressionar o botão A, o texto da Label vai mudar para "Botão A pressionado" e no B "Botão B pressionado". Abra a ferramenta do App Inventor e crie um novo projeto. Nome do projeto PROJETO_1 Anotações: App Inventor Página 2

3 Na tela de Design, vamos iniciar alterando as propriedades da screen1 Parte 1 - devemos selecionar o "Screen1" na tabela de componentes para definirmos quais as suas propriedades. Inicialmente, remover, nas propriedades do Screen 1 a opção "Scrollable" (rolável) pois esta vai permitir colocar o alinhamento do ecrã centrado segundo a vertical. Seguidamente colocar as opções: PROPRIEDADES ALTERADAS: Alinhamento horizontal Alinhamento vertical Cor de fundo Cinza claro Orientação da tela Sensor Titulo PROJETO 1 NOTA: As demais propriedades devem ficar como estão por default (padrão), mas sendo que muitas são de personalização, fica ao critério de cada um. Ecrã - tela de display, monitor. App Inventor Página 3

4 IMPORTANTE: A propriedade Orientação da Tela = sensor, permite que quando o aplicativo seja instalado no celular/smartfhone, o movimento de retrato e paisagem feito no celular, o aplicativo acompanhe a orientação. Parte 2 Na guia paleta, na opção Organização (layout), adicione o componente Organização Vertical (VerticalArragement), a screen1 (a tela). Arraste para a tela Início. Anotações: App Inventor Página 4

5 Parte 3 Selecione o componente Organização Vertical e na guia de propriedades, faça as alterações abaixo: PROPRIEDADES ALTERADAS: Alinhamento horizontal Alinhamento vertical Altura Preencher principal Largura Preencher principal Tela com o componente organização Vertical Tela com o componente organização Vertical com as propriedades alteradas App Inventor Página 5

6 Parte 4 Agora vamos adicionar na tela de início os componentes Legenda (Label) e dois botões (button) que se encontram na guia Paleta em Interface do usuário. Anotações: Importante: Quanto um componente esta abaixo de outro com um pequeno avanço, significa que foi introduzido dentro deste, e que depende dele. App Inventor Página 6

7 Parte 5 Alterando as propriedades do objeto Legenda. PROPRIEDADES ALTERADAS: Fonte Negrito Selecionada Tamaho da Fonte 18.0 Texto Nenhum Botão Selecionado Alinhamento do Texto Resultado no Visualizador. App Inventor Página 7

8 Parte 6 Alterando as propriedades do objeto Botão1. PROPRIEDADES ALTERADAS: Cor de Fundo Vermelho Tamaho da Fonte 18.0 Forma Arredondado Texto Botão A Alinhamento do Texto Resultado no Visualizador. App Inventor Página 8

9 Parte 7 Alterando as propriedades do objeto Botão2. PROPRIEDADES ALTERADAS: Cor de Fundo Azul Tamaho da Fonte 18.0 Forma Arredondado Texto Botão B Alinhamento do Texto Cor do Texto Branco Resultado no Visualizador. App Inventor Página 9

10 Parte 8 Construção dos blocos de programação Para iniciarmos a programação dos blocos, vamos sair da tela Designer (desenho) para a tela Blocos. Vamos começar pelo botão1 (Botão A) Na guia Blocos, selecione o Botão 1, no visualizador, arraste o primeiro bloco para a área de programação. Anotações: App Inventor Página 10

11 Também Na guia Blocos, selecione a legenda1, no visualizador, arraste o sétimo bloco para a área de programação, encaixando na segunda linha. (observe a figura abaixo) Agora vamos utilizar um bloco de texto que está na guia Blocos / Texto / bloco de texto e arrastar para a área de programação, encaixando no final da segunda linha do bloco. (observe a figura abaixo) Digite neste último bloco inserido a mensagem: Botão A Pressionado Anotações: App Inventor Página 11

12 Repetindo a mesma operação do Botão 1 para o Botão 2, teremos então na área de programação o seguinte resultado. O resultado em nosso simulador. App Inventor Página 12