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

  Vamos agora alterar algumas propriedades da Tela Principal (Screen1):

  Para isso:

  � 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: Verde escuro.
  � Na propriedade Theme selecione a op��o: Dark.
  � Na caixa de texto T�tulo, digite: Im�vel - Benfeitorias, 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 Layout Organiza��oEmTabela (2 colunas por 4 linhas).
  � 4 Legendas na primeira coluna e 4 na segunda.
  � 1 Layout Organiza��oHorizontal.
  � 2 Legendas. Uma ao lado da outra no mesmo layout.

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

Figura 12.1 � Projeto com os componentes inseridos.

  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 os Benef�cios do seu Im�vel.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Alterando as propriedades das Caixas de Sele��o:

  Como as propriedades das Caixas de Sele��o s�o as mesmas na sua maioria, vamos fazer um resumo para facilitar:

  Primeiramente vamos alterar o nome de todas elas para:

  1) csChurrasqueira.
  2) csGaragem.
  3) csPiscina
  4) csPortaoEletrico.
  5) csCercaEletrica.
  6) csSeguranca.
  7) csBar.
  8) csLareira.

  Agora vamos alterar a propriedade Texto, seguindo a mesma ordem:

  1) Churrasqueira.
  2) Garagem.
  3) Piscina
  4) Port�o El�trico.
  5) Cerca El�trica.
  6) Seguran�a.
  7) Bar.
  8) Lareira.

  Quanto ao resto das propriedades s�o iguais para todas as Caixas de Sele��o.

  Ent�o vejamos:

  � CorDeFundo: Amarelo.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 16.
  � Largura: selecione a op��o percentagem e digite: 45.
  � CorDeTexto: Custom. Selecione a cor: �005800ff� (verde escuro).

  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: 16.
  � Texto: digite: Quantidade de Itens Selecionados:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Alterando as propriedades da terceira Legenda:

  � Nome: legTotalItens. 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: 16.
  � Texto: digite: 0.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Amarelo.
  � AlinhamentoDoTexto: Centro: 1.

  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 12.2:

Figura 12.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 o qual foi designado.

  Mas antes de criarmos os blocos dos componentes, precisamos criar uma vari�vel global para armazenar o total de itens selecionados.

  Vamos l� ent�o:

  C�digo para a vari�vel:

  Veja na Figura 12.3 como dever� ficar o seu c�digo:

Figura 12.3 � Inicializa��o da vari�vel.

  Agora vamos criar os c�digos dos componentes:

  Dos componentes utilizados no projeto somente as Caixas de Sele��o receber�o c�digos, os outros s�o apenas informativos, n�o necessitando de nenhum c�digo.

  Ent�o vejamos:

  C�digo para a primeira Caixa de Sele��o:

  Segunda parte do c�digo:

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

Figura 12.4 � C�digo finalizado da primeira Caixa de Sele��o.

  Esse bloco nos diz o seguinte:

  Quando essa Caixa de Sele��o for alterada temos duas op��es:

  1) Se a caixa csChurrasqueira for marcada (ou clicada), ajuste o valor da vari�vel global totalItens para o valor atual adicionado de uma unidade (+1), e mostre na legenda legTotalItens o valor atualizado.

  2) Caso contr�rio, ou seja, se a caixa for desmarcada, ajuste o valor da vari�vel global totalItens para o valor atual subtra�do de uma unidade (-1), e mostre na legenda legTotalItens o valor atualizado.

  Para a cria��o do c�digo do restante das Caixas de Sele��o utilize o mesmo procedimento utilizado na caixa csChurrasqueira. Para isso, s� � necess�rio arrastar o bloco com o nome apropriado de cada caixa. O funcionamento de cada caixa tamb�m � igual � primeira sem nenhuma altera��o.

  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:

  SelecionaItensImovel.aia

  SelecionaItensImovel.apk