Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos,
Tutoriais, Simulados e Projetos.
Agradecemos a sua colabora��o.

Tutoriais App Inventor - 11
Como Criar uma Tabuada

Nesse projeto vamos criar uma tabuada com as quatro opera��es b�sicas (Adi��o, Subtra��o, Multiplica��o e Divis�o). Para isso, vamos utilizar dois Deslizadores, algumas Legendas e alguns Bot�es. Um Deslizador servir� para o usu�rio selecionar o valor do primeiro operando e o outro para o segundo operando. A faixa de valores dos Deslizadores ficar�o entre 1 e 10. Os operadores ser�o selecionados mediante quatro bot�es. As Legendas servir�o para mostrar o resultado das opera��es e as devidas mensagens.
Ent�o vejamos como desenvolver esse projeto:
� Abra o App Inventor acessando o link:
App Inventor 2
� Na tela apresentada, clique no Bot�o Create Apps!, em seguida entre com sua conta.
� Crie um novo projeto com o nome: TabuadaSimples.
Vamos agora alterar algumas propriedades da Tela Principal (Screen1):
� Clique em Screen1 na se��o Componentes.
� Altere a propriedade CorDeFundo para uma cor customizada qualquer clicando na op��o Custom.
� Altere a propriedade PrimaryColor para: Vermelho.
� Na propriedade Theme selecione a op��o: Dark.
� Na caixa de texto T�tulo, digite: Tabuada Simples, e tecle Enter para confirmar.
Iremos agora inserir os componentes do nosso projeto, ou seja, o bot�o, as legendas e o deslizador na seguinte ordem:
� 1 Legenda.
� 1 Deslizador.
� 1 Legenda.
� 1 Deslizador.
� 1 Layout Organiza��oHorizontal.
� + 5 Legendas (insira as legendas no layout).
� 1 Layout Organiza��oHorizontal.
� 4 Bot�es (insira os bot�es no layout).
Feito isso, o seu projeto dever� ficar igual ao da Figura 11.1:

Figura 11.1 � Componentes inseridos no projeto.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades da primeira Legenda:
� Nome: legMensagem1. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Texto: digite: Selecione o Primeiro Operando.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Azul.
Alterando as propriedades do primeiro Deslizador:
� Nome: desOperando1. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� Cor�Esquerda: Azul.
� Cor�Direita: Vermelho.
� Largura: selecione a op��o percentagem e digite: 90.
� ValorM�ximo: 10.
� ValorM�nimo: 1.
� Posi��oDoIndicador: 1.
Alterando as propriedades da segunda Legenda:
� Nome: legMensagem2. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Texto: digite: Selecione o Segundo Operando.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Azul.
Alterando as propriedades do segundo Deslizador:
� Nome: desOperando2. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� Cor�Esquerda: Azul.
� Cor�Direita: Vermelho.
� Largura: selecione a op��o percentagem e digite: 90.
� ValorM�ximo: 10.
� ValorM�nimo: 1.
� Posi��oDoIndicador: 1.
Alterando as propriedades da terceira Legenda:
� Nome: legPrimeiroOperando. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Azul.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Texto: digite: 1.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da quarta Legenda:
� Nome: legSinalOperacao. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Vermelho.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Texto: digite: �+�.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da quinta Legenda:
� Nome: legSegundoOperando. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Azul.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Texto: digite: 1.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da sexta Legenda:
� Nome: legIgual. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Vermelho.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Texto: digite: "=".
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da s�tima Legenda:
� Nome: legResultado. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Azul
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 20.
� Texto: digite: 2.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do primeiro Bot�o:
� Nome: btnAdicao. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Preto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Forma: arredondado.
� Texto: digite: �+�.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do segundo Bot�o:
� Nome: btnSubtracao. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Preto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Forma: arredondado.
� Texto: digite: �-�.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do terceiro Bot�o:
� Nome: btnMultiplicacao. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Preto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Forma: arredondado.
� Texto: digite: �x�.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do quarto Bot�o:
� Nome: btnDivisao. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Preto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 18.
� Largura: selecione a op��o percentagem e digite: 10.
� Forma: arredondado.
� Texto: digite: �:�.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Para que todos os componentes fiquem com uma apar�ncia mais profissional, vamos centraliz�-los na tela.
Para isso:
� Clique na tela principal (Screen1), selecione a op��o AlinhamentoHorizontal e clique em Centro: 3.
Feito isso, o seu projeto dever� ficar igual ao da Figura 11.2:

Figura 11.2 � Projeto com os componentes
inseridos e configurados.
Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional executando a tarefa para a qual foi designada.
Mas antes de criarmos os blocos dos componentes, precisamos criar duas vari�veis globais para armazenar os valores referentes aos dois operandos que ir�o fazer parte das opera��es. Esses dois valores ser�o gerados pelos Deslizadores.
Vamos l� ent�o:
C�digos para as vari�veis:
� Na tela Blocos, clique na categoria Vari�veis.
� Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: operando1 (essa ser� a vari�vel utilizada para armazenar o valor do primeiro operando selecionado pelo usu�rio no Deslizador).
� Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente. Na lacuna digite o valor: 1.
� Utilize o mesmo procedimento para criar a segunda vari�vel com o nome: operando2. Na lacuna do bloco azul digite tamb�m o valor: 1.
Isso significa que quando o aplicativo for executado ser�o criadas essas vari�veis com os valores iniciais de 1. Veja na Figura 11.3 como dever� ficar o seu c�digo:

Figura 11.3 � Inicializa��o das vari�veis.
Agora vamos criar os c�digos dos componentes:
Ent�o vejamos:
C�digo para o primeiro Deslizador:
� Na tela Blocos, clique no componente desOperando1 e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legPrimeiroOperando, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom.
� Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o bloco �arredondar� e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul.
� Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
� Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe abaixo do bloco verde.
� Clique na pequena seta e altere a op��o para: global operando1.
� Clique na categoria Matem�tica, arraste o bloco �arredondar� e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul.
� Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
Feito isso, seu projeto dever� ficar igual ao da Figura 11.4:

Figura 11.4 � C�digo finalizado do primeiro Deslizador.
Esse bloco nos diz o seguinte: mostre na legenda legPrimeiroOperando o valor inteiro (ou arredondado) selecionado no Deslizador pelo usu�rio. Em seguida, armazene na vari�vel global operando1 o valor inteiro (ou arredondado) da posi��o do Deslizador.
C�digo para o segundo Deslizador:
� Na tela Blocos, clique no componente desOperando2 e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legSegundoOperando, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom.
� Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o bloco �arredondar� e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul.
� Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
� Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe abaixo do bloco verde.
� Clique na pequena seta e altere a op��o para: global operando2.
� Clique na categoria Matem�tica, arraste o bloco �arredondar� e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul.
� Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
Feito isso, seu projeto dever� ficar igual ao da Figura 11.5:

Figura 11.5 � C�digo finalizado do segundo Deslizador.
Esse bloco nos diz o seguinte:
Mostre na legenda legSegundoOperando o valor inteiro (ou arredondado) selecionado no Deslizador pelo usu�rio. Em seguida, armazene na vari�vel global operando2 o valor inteiro (ou arredondado) da posi��o do Deslizador.
C�digo para o primeiro Bot�o:
� Na tela Blocos, clique no componente btnAdicao e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legSinalOperacao, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco colocado. Na lacuna desse bloco digite o sinal de adi��o (+).
� Clique no componente legResultado, arraste o segundo bloco e encaixe logo abaixo do bloco verde. Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o quarto bloco e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando1.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando2.
Feito isso, seu projeto dever� ficar igual ao da Figura 11.6:

Figura 11.6 � C�digo finalizado do primeiro Bot�o.
Esse bloco nos diz o seguinte:
Quando o bot�o btnAdicao for clicado, mostre na legenda legSinalOperacao o sinal de adi��o (+). Em seguida, mostre na legenda legResultado o resultado da opera��o de adi��o dos dois n�meros selecionados nos Deslizadores.
C�digo para o segundo Bot�o:
� Na tela Blocos, clique no componente btnSubtracao e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legSinalOperacao, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom.
� Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco colocado. Na lacuna desse bloco digite o sinal de subtra��o (-).
� Clique no componente legResultado, arraste o segundo bloco e encaixe logo abaixo do bloco verde. Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o quarto bloco e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando1.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando2.
Feito isso, seu projeto dever� ficar igual ao da Figura 11.7:

Figura 11.7 � C�digo finalizado do segundo Bot�o.
Esse bloco nos diz o seguinte:
Quando o bot�o btnSubtracao for clicado, mostre na legenda legSinalOperacao o sinal de subtra��o (-). Em seguida, mostre na legenda legResultado o resultado da opera��o de subtra��o dos dois n�meros selecionados nos Deslizadores.
C�digo para o terceiro Bot�o:
� Na tela Blocos, clique no componente btnMultiplicacao e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legSinalOperacao, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco colocado. Na lacuna desse bloco digite o sinal de multiplica��o (x).
� Clique no componente legResultado, arraste o segundo bloco e encaixe logo abaixo do bloco verde. Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o sexto bloco e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando1.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando2.
Feito isso, seu projeto dever� ficar igual ao da Figura 11.8:

Figura 11.8 � C�digo finalizado do terceiro Bot�o.
Esse bloco nos diz o seguinte:
Quando o bot�o btnMultiplicacao for clicado, mostre na legenda legSinalOperacao o sinal de multiplica��o (x). Em seguida, mostre na legenda legResultado o resultado da opera��o de multiplica��o dos dois n�meros selecionados nos Deslizadores.
C�digo para o quarto Bot�o:
� Na tela Blocos, clique no componente btnDivisao e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legSinalOperacao, arraste o segundo bloco e encaixe na lacuna �fazer� do bloco marrom.
� Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do �ltimo bloco colocado. Na lacuna desse bloco digite o sinal de divis�o (:).
� Clique no componente legResultado, arraste o segundo bloco e encaixe logo abaixo do bloco verde. Altere a op��o CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o s�timo bloco e encaixe no final do �ltimo bloco colocado.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando1.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na segunda lacuna do bloco azul. Clique na pequena seta e altere a op��o para: global operando2.
Feito isso, seu projeto dever� ficar igual ao da Figura 11.9:

Figura 11.9 � C�digo finalizado do quarto Bot�o.
Esse bloco nos diz o seguinte:
Quando o bot�o btnDivisao for clicado, mostre na legenda legSinalOperacao o sinal de divis�o (:). Em seguida, mostre na legenda legResultado o resultado da opera��o de divis�o dos dois n�meros selecionados nos Deslizadores.
Dessa forma, conclu�mos o nosso projeto. Teste seu projeto em um dispositivo real e confira o resultado.
Voc� pode baixar o c�digo completo desse projeto acessando os links:
TabuadaSimples.aia
TabuadaSimples.apk