255 x 256 x 256 = 16.777.216 cores diferentes.

  Ent�o vamos ver como fazer isso:

  � Abra o App Inventor acessando o link:

  App Inventor 2

  � Na tela principal selecione a op��o: Iniciar novo projeto do menu superior Projetos, conforme mostra a Figura 4.1:

Figura 4.1 � Menu para criar um novo Projeto.

  � Feito isso, ser� mostrada uma pequena janela para nomear o projeto, conforme mostra a Figura 4.2:

Figura 4.2 � Janela para nomear o Projeto.

  � Digite o nome que consta da caixa de texto e clique em OK para confirmar.

  Agora vamos alterar algumas propriedades da Tela Principal (Screen1):

  Alterando as propriedades da Tela Principal:

  Na tela principal (Screen1), vamos alterar apenas o Alinhamento Horizontal, o T�tulo e o Tema.

  Para isso:

  � Clique na tela principal (Screen1) na se��o Componentes.
  � Na propriedade AlinhamentoHorizontal clique na op��o: Centro: 3.
  � No combobox Theme selecione a op��o Dark.
  � Na caixa de texto T�tulo, digite: Altera a Cor de Fundo RGB, e tecle Enter para confirmar.

  Iremos agora inserir o componente do nosso projeto, ou seja, o bot�o:

  � Clique no componente Bot�o na Paleta e insira no emulador.
  � Feito isso, o seu projeto dever� ficar igual ao da Figura 4.3:

Figura 4.3 � Projeto com o componente inserido.

  Alterando as propriedades do Bot�o:

  Agora vamos alterar algumas propriedades do bot�o. Primeiramente vamos criar um nome mais apropriado para o bot�o para utilizarmos no c�digo.

  Para isso:

  � Clique no bot�o, na tela do emulador ou na se��o Componentes.
  � Logo abaixo, na se��o Componentes, clique no bot�o Renomear.
  � Ser� mostrada uma pequena janela para criarmos um novo nome para o bot�o. Digite o nome que se encontra na caixa de texto, conforme mostra a Figura 4.4:

Figura 4.4� Janela para nomear o bot�o.

  Esse nome ser� utilizado para identificar o bot�o no c�digo, portanto, n�o utilize espa�os, caracteres especiais nem comece com um n�mero. Al�m disso, crie um nome compat�vel com sua fun��o, assim ser� mais f�cil identific�-lo no c�digo e saber o que ele faz.

  Agora vamos alterar algumas propriedades dele.

  Para isso:

  Na se��o Propriedades, altere as seguintes:

  � CorDeFundo: Vermelho.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � Forma: arredondado.
  � Texto: Cor de Fundo RGB.
  � CorDeTexto: Branco.

  Depois disso, o seu projeto dever� ficar igual ao da Figura 4.5:

Figura 5.5� Design do Projeto finalizado.

  Agora vamos criar os c�digos do componente e tornar nosso projeto funcional executando a tarefa para o qual foi designado.

  C�digo para o Bot�o:

  Agora que terminamos a parte visual do nosso projeto, vejamos como criar o nosso c�digo.

  Para isso:

  � Clique no bot�o Blocos, no canto superior direito da tela.
  � Feito isso, ser� mostrada a tela da Figura 4.6:

Figura 4.6� Tela Blocos.

  O que vamos fazer agora � arrastar os blocos que queremos e montar o c�digo do nosso aplicativo.

  Ent�o vamos l�:

  � Na se��o Blocos, clique no bot�o btnCorDeFundoRGB.
  � Feito isso, ser�o apresentados todos os blocos de c�digo referente a esse bot�o, conforme mostra a Figura 4.7:

Figura 4.7 � Blocos de c�digo para o bot�o btnCorDeFundoRGB.

  Para ver mais op��es gire o bot�o central do mouse para baixo ou arraste a barra de rolagem vertical.

  � Agora, clique no primeiro bloco e arraste para a �rea em branco. Veja na Figura 4.8:

Figura 4.8 � C�digo utilizado para o bot�o btnEnviaMensagem.

  Esse c�digo est� dizendo o seguinte:

  Sempre que o bot�o btnCorDeFundoRGB for clicado, fa�a alguma coisa. E essa alguma coisa � alterar a cor de fundo da tela com cores aleat�rias (RGB).

  Para isso, vamos criar o c�digo para cumprir essa tarefa:

  � Na se��o Blocos, clique na tela principal (Screen1), e arraste o bloco marcado na Figura 4.9 para a �rea branca:

Figura 4.9 � C�digo utilizado para a tela principal.

  � Em seguida, encaixe esse bloco na lacuna fazer do bloco j� existente.

  Veja na Figura 4.10 como seu c�digo dever� ficar:

Figura 4.10 � Inser��o do c�digo para alterar a cor de fundo da tela.

  Esse c�digo nos diz que, toda vez que o bot�o btnCorDeFundoRGB for clicado, altere a cor de fundo da tela para uma cor RGB qualquer. Agora vamos criar o c�digo para cumprir essa tarefa.

  Para isso:

  � Na se��o Blocos, clique na categoria Cores, arraste o bloco criar cor e encaixe no final do bloco verde, conforme mostra a Figura 4.11:

border="1"   Seu c�digo dever� ficar igual ao da Figura 4.11:

Figura 4.11 � Bloco para gerar as cores.

  Agora vamos selecionar as cores RGB para encerrar o nosso projeto.

  Para isso:

  � Clique na categoria Matem�tica, clique no bloco inteiro aleat�rio de e encaixe na primeira lacuna do bloco azul criar lista.
  � Altere a primeira lacuna para 0 e a segunda lacuna para 255, conforme mostra a Figura 4.12:

Figura 4.12 � C�digo para gerar a primeira cor.

  � Clique novamente na categoria Matem�tica, clique no bloco inteiro aleat�rio de e encaixe na segunda lacuna do bloco azul criar lista.
  � Altere a primeira lacuna para 0 e a segunda lacuna para 255:

  Repita esse mesmo processo para a terceira cor.

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

Figura 5.13 � Projeto finalizado.

  Feito isso, terminamos o nosso projeto. Para execut�-lo consulte o tutorial: Como Executar seu Aplicativo em um Dispositivo Real no App Inventor 2. L� voc� encontrar� todas as instru��es necess�rias.

  Voc� pode baixar o c�digo completo desse projeto acessando os links:

  AlteraCorDeFundoRGB.aia

  AlteraCorDeFundoRGB.apk