� 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: LegendasComHtml.

  Agora vamos alterar algumas propriedades da tela principal (Screen1).

  Alterando as propriedades da Tela Principal:

  � Clique em Screen1 na se��o Componentes.
  � AlinhamentoHorizontal: Centro: 3.
  � CorDeFundo: Marrom.
  � PrimaryColor: Azul.
  � Theme: Dark.
  � T�tulo: Legendas Com HTML.

  Iremos agora inserir os componentes do nosso projeto na seguinte ordem:

  � 1 Legenda.
  � 1 Layout Organiza��oHorizontal (vai servir somente como separador).
  � 1 Layout Organiza��oEmTabela.
  � 6 Bot�es.
  � 6 Legendas.

  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.
  � TamanhDaFonte: 16.
  � Texto: Clique no bot�o apropriado para ver o resultado:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

  Alterando as propriedades do Layout Organiza��oHorizontal::

  � Nome: layoutOrgHorizontal.
  � AlinhamentoHorizontal: Centro: 3.
  � Altura: 10 pontos.
  � Largura: Preencher principal.

  Alterando as propriedades do Layout Organiza��oEmTabela:

  � Nome: layoutOrgEmTabela.
  � Colunas: 2.
  � Largura: selecione a op��o percentagem e digite: 90.
  � Linhas: 6.

  Alterando as propriedades dos Bot�es:

  Arraste seis bot�es e coloque-os na primeira coluna da tabela. Altere os nomes e as propriedades Texto de cada bot�o de acordo com a Tabela 1:

Tabela 1

  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 18.
  � Texto: Clique no bot�o apropriado para ver o resultado:
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Preto.

  Alterando as propriedades das Legendas:

  Arraste seis legendas e coloque-as na segunda coluna da tabela. Altere os nomes de cada legenda de acordo com a Tabela 2:

Tabela 2

  � CorDeFundo: Branco.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 18.
  � Texto: Deixe em branco.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Branco.

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

Figura 17.1 � 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. Somente os bot�es receber�o c�digos.

  Ent�o vejamos:

  Repita essa mesma opera��o para o restante dos bot�es. Preencha as lacunas desses bot�es com as express�es mostradas na Tabela 3:

Tabela 3

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

Figura 17.2 � C�digo finalizado da primeira Imagem.

  Esse bloco nos diz o seguinte:

  Quando cada bot�o for clicado, ser� mostrado na respectiva legenda o texto formatado em HTML de acordo com o r�tulo de cada um.

  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:

  LegendasComHtml.aia

  LegendasComHtml.apk