A �rea de um ret�ngulo � o n�mero de unidades quadradas necess�rias para preencher um ret�ngulo completamente. A f�rmula para calcular a �rea de um ret�ngulo � a seguinte:

  �rea = l x a

  Onde:

  l = largura
  a = altura

  Exemplo:

  Supondo que um ret�ngulo qualquer tenha 5 cm de largura e 10 cm de altura. Calcule sua �rea:

  �rea do ret�ngulo = (5 x 10) = 50.

  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: CalculoAreaRetangulo.

  Agora vamos alterar algumas propriedades da Tela Principal:

  Alterando as propriedades da Tela Principal:

  � Clique em Screen1 na se��o Componentes.
  � AlinhamentoHorizontal: Centro: 3.
  � CorDeFundo: Amarelo.
  � PrimaryColor: Verde Escuro.
  � Theme: Dark.
  � T�tulo: �rea de um Ret�ngulo.

  Agora vamos inserir os componentes do nosso projeto na seguinte ordem:

  � 1 Legenda (mensagem).
  � 1 Legenda (f�rmula).
  � 1 Imagem (imagem do ret�ngulo).
  � 1 Legenda (solicita��o das informa��es).
  � 1 layout Organiza��oHorizontal.
  � 1 Legenda (Largura).
  � 1 Caixa de Texto (Largura).
  � 1 Legenda (Altura).
  � 1 Caixa de Texto (Altura).
  � 1 Bot�o.
  � 1 Legenda.

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades da primeira Legenda:

  � Nome: legMensagem.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Fam�liaDaFonte: sem serifa.
  � Texto: A F�rmula para calcular a �rea de um Ret�ngulo � a seguinte:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Alterando as propriedades da segunda Legenda:

  � Nome: legFormula.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Fam�liaDaFonte: sem serifa.
  � Texto: (l x a).
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Vermelho.

  Alterando as propriedades da Imagem:

  � Nome: imgRetangulo.
  � Imagem: fa�a o download da imagem do exemplo e coloque nesse componente.
  � RedimensionarParaCaber: clique nessa op��o para que a imagem caiba perfeitamente no componente Imagem.

  Alterando as propriedades da terceira Legenda:

  � Nome: legMensagem2.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Fam�liaDaFonte: sem serifa.
  � Texto: Informe a Largura e a Altura do Ret�ngulo:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Alterando as propriedades da quarta Legenda:

  � Nome: legLargura.
  � CorDeFundo: Vermelho.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Largura: 25 por cento.
  � Fam�liaDaFonte: sem serifa.
  � Texto: Largura.
  � AlinhamentoDoTexto: direita: 2.
  � CorDeTexto: Azul.

  Alterando as propriedades da primeira Caixa de Texto:

  � Nome: ctLargura.
  � CorDeFundo: Ciano.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Largura: 15 por cento.
  � SomenteN�meros: marque o checkbox para aceitar somente n�meros.
  � Texto: 0
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Cinza Escuro.

  Alterando as propriedades da quinta Legenda:

  � Nome: legAltura.
  � CorDeFundo: Vermelho.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Largura: 25 por cento.
  � Fam�liaDaFonte: sem serifa.
  � Texto: Altura.
  � AlinhamentoDoTexto: direita: 2.
  � CorDeTexto: Azul.

  Alterando as propriedades da segunda Caixa de Texto:

  � Nome: ctAltura.
  � CorDeFundo: Ciano.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Largura: 15 por cento.
  � SomenteN�meros: marque o checkbox para aceitar somente n�meros.
  � Texto: 0
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Cinza Escuro.

  Alterando as propriedades do Bot�o:

  � Nome: btnCalcular.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Imagem: fa�a o download da imagem do exemplo e coloque nesse componente.
  � TamanhoDaFonte: 16.
  � Texto: Calcular.
  � AlinhamentoDoTexto: centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades da sexta Legenda:

  � Nome: legResultado.
  � CorDeFundo: Vermelho.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhoDaFonte: 20.
  � Fam�liaDaFonte: sem serifa.
  � Largura: 25 por cento.
  � Texto: 0.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Feito isso, o seu projeto dever� ficar igual ao da Figura 27.1:

Figura 27.1 � Projeto com os componentes
inseridos e configurados.

  Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional.

  Mas antes de criarmos o c�digo propriamente dito, precisamos criar tr�s vari�veis globais para armazenar os valores da base, da altura (informados pelo usu�rio) e tamb�m do resultado.

  Vamos l� ent�o:

  C�digos para as vari�veis:

  Isso significa que quando o aplicativo for executado ser�o criadas essas vari�veis com o valor 0. Veja na Figura 27.2 como dever� ficar o seu c�digo:

Figura 27.2 � Vari�veis inicializadas.

  Agora vamos aos c�digos dos componentes:

  Apenas o componente Bot�o receber� c�digo. Os outros componentes ser�o apenas informativos.

  Ent�o vamos l�:

  C�digo para o Bot�o:

  Feito isso, o seu c�digo dever� ficar igual ao da Figura 27.3:

Figura 27.3 � C�digo final do Bot�o.

  Esse bloco nos diz o seguinte:

  Quando o bot�o for clicado, os valores informados nas caixas de texto pelo usu�rio ser�o armazenados nas vari�veis globais largura e altura, e em seguida, a vari�vel global resultado armazenar� o resultado da opera��o. Finalmente, o resultado ser� mostrado na legenda legResultado.

  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:

  CalculoAreaRetangulo.aia

  CalculoAreaRetangulo.apk