|
Nesse tutorial vamos mostrar como utilizar o componente TextoParaFalar da categoria M�dia para falar uma mensagem qualquer.
Nesse projeto voc� vai poder digitar qualquer texto em uma caixa de texto, n�o importa o tamanho da mensagem.
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: TextoParaFalar2.
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: Marrom Claro.
� PrimaryColor: Marrom Escuro.
� Theme: Dark.
� T�tulo: Texto Para Falar 2.
Agora vamos inserir os componentes do nosso projeto na seguinte ordem:
� 1 layout Organiza��oHorizontal (somente como separador).
� 1 Bot�o.
� 1 layout Organiza��oHorizontal (somente como separador).
� 1 Caixa de Texto (para digita��o do texto desejado).
� 1 layout Organiza��oHorizontal (somente como separador).
� 1 Bot�o.
� 1 componente TextoParaFalar.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades do layout Organiza��oHorizontal1::
� Nome: layoutOrgHorizontal1.
� AlinhamentoHorizontal: Centro: 3.
� Altura: 10 pontos.
� Largura: Preencher principal.
Alterando as propriedades do Bot�o:
� Nome: btnFalar.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Largura: 40 por cento.
� Imagem: fa�a o download da imagem do exemplo e coloque nesse componente.
� Texto: Falar
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do layout Organiza��oHorizontal2:
� Nome: layoutOrgHorizontal2.
� AlinhamentoHorizontal: Centro: 3.
� Altura: 10 pontos.
� Largura: Preencher principal.
Alterando as propriedades da Caixa de Texto:
� Nome: ctTexto.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� CorDeFundo: Roxo.
� TamanhoDaFonte: 18.
� Largura: 90 por cento.
� Texto: Digite alguma coisa.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do layout Organiza��oHorizontal3:
� Nome: layoutOrgHorizontal3.
� AlinhamentoHorizontal: Centro: 3.
� Altura: 10 pontos.
� Largura: Preencher principal.
Alterando as propriedades do segundo Bot�o:
� Nome: btnLimpar.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Largura: 40 por cento.
� Imagem: fa�a o download da imagem do exemplo e coloque nesse componente.
� Texto: Limpar
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades do componente TextoParaFalar:
� Nome: tpfFalar.
Feito isso, o seu projeto dever� ficar igual ao da Figura 49.1:
Figura 49.1 � Projeto com os componentes
inseridos e configurados.
Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional. Mas antes precisamos
criar uma vari�vel para armazenar a mensagem que dever� ser falada pelo aplicativo.
Vamos l� ent�o:
C�digos para a vari�vel:
� Na tela Blocos, clique na categoria Vari�veis.
|
� Arraste o primeiro bloco para a �rea em branco. Altere o r�tulo nome para: texto (essa ser� a vari�vel utilizada
para armazenar a mensagem que ser� falada pelo aplicativo).
|
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do bloco existente.
|
Isso significa que quando o aplicativo for executado ser� criada essa vari�vel com a ex-press�o informada.
Veja na Figura 49.2 como dever� ficar o seu c�digo:
Figura 49.2 � Vari�vel inicializada.
C�digo para o Bot�o btnFalar:
� Na tela Blocos, clique no componente btnFalar e arraste o primeiro bloco para a �rea em branco.
|
� Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna �fazer� do bloco marrom. Clique na pequena seta e selecione a op��o: global texto.
|
� Clique no componente ctTexto, arraste o primeiro bloco verde e encaixe no final do bloco vermelho. Altere a op��o �CorDeFundo� por: �Texto�.
|
� Clique no componente tpfFalar, arraste o bloco roxo e encaixe logo abaixo do bloco vermelho.
|
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco roxo. Clique na pequena seta e selecione a op��o: global texto.
|
� Clique no componente btnLimpar, arraste o segundo bloco verde e encaixe logo abaixo do bloco roxo. Altere a op��o �CorDeFundo� por: �Ativado�.
|
� Clique na categoria L�gica, arraste o primeiro bloco e encaixe no final do bloco verde.
|
� Clique no componente ctTexto, arraste o primeiro bloco roxo e encaixe logo abaixo do bloco verde.
|
Feito isso, o seu c�digo dever� ficar igual ao da Figura 49.3:
Figura 49.3 � C�digo final do Bot�o btnFalar.
Esse bloco nos diz o seguinte:
Quando o bot�o for clicado, o componente txtFalar ser� solicitado e a mensagem informada na caixa de texto ser� armazenada na vari�vel texto e
em seguida ser� falada, o bot�o Limpar ficar� habilitado e o teclado ficar� oculto.
C�digo para a Caixa de Texto ctTexto:
� Na tela Blocos, clique no componente ctTexto e arraste o primeiro bloco para a �rea em branco.
|
� Clique no componente ctTexto, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o �CorDeFundo� por: �Texto�.
|
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do bloco verde.
|
� Clique no componente btnLimpar, arraste o segundo bloco verde e encaixe logo abaixo do bloco verde. Altere a op��o �CorDeFundo� por: �Ativado�.
|
� Clique na categoria L�gica, arraste o primeiro bloco e encaixe no final do bloco verde.
|
Feito isso, o seu c�digo dever� ficar igual ao da Figura 49.4:
Figura 49.4 � C�digo para a Caixa de Texto ctTexto.
Esse bloco nos diz o seguinte:
Quando a caixa de texto receber o foco, limpe a pr�pria caixa para nova informa��o, e habilite o bot�o Limpar.
C�digo para o Bot�o btnLimpar:
� Na tela Blocos, clique no componente btnLimpar e arraste o primeiro bloco para a �rea em branco.
|
� Clique no componente ctTexto, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o �CorDeFundo� por: �Texto�.
|
� Clique na categoria Texto, arraste o primeiro bloco e encaixe no final do bloco verde.
|
� Clique no componente btnLimpar, arraste o segundo bloco verde e encaixe logo abaixo do bloco verde. Altere a op��o �CorDeFundo� por: �Ativado�.
|
� Clique na categoria L�gica, arraste o segundo bloco e encaixe no final do bloco verde.
|
Feito isso, o seu c�digo dever� ficar igual ao da Figura 49.5:
Figura 49.5 � C�digo para a Caixa de Texto ctTexto.
Esse bloco nos diz o seguinte:
Quando o bot�o btnLimpar for clicado, a caixa de texto ficar� limpa para receber nova informa��o, e o bot�o btnLimpar ficar� desabilitado.
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:
TextoParaFalar2.aia
TextoParaFalar2.apk
|
