|
Esse projeto tem por finalidade calcular a raiz quadrada de qualquer n�mero informado pelo usu�rio em uma caixa de texto.
Para isso, vamos utilizar um bot�o, uma caixa de texto e duas legendas.
Vejamos como fazer isso:
� 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: CalcularRaizQuadrada.
Agora vamos alterar algumas propriedades da tela principal (Screen1):
� Clique na tela principal na se��o Componentes.
� Na propriedade AlinhamentoHorizontal selecione a op��o: Centro: 3.
� Na propriedade CorDeFundo: Laranja.
� Na propriedade Theme selecione a op��o: Device Default.
� Na caixa de texto T�tulo, digite: C�lculo da Raiz Quadrada e tecle Enter para confirmar.
Iremos agora inserir os componentes do nosso projeto, ou seja, o bot�o, a caixa de texto e as duas legendas. Para isso, insira
os componentes na seguinte ordem:
� 1 Legenda.
� 1 Caixa de Texto.
� 1 Bot�o.
� 1 Legenda.
Feito isso, seu projeto dever� ficar igual ao da Figura 9.1:

Figura 9.1 � Componentes inseridos no projeto.
Agora vamos alterar as propriedades dos componentes:
Alterando as propriedades da primeira Legenda:
� Nome: legDigitarNum. 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.
� Largura: selecione a op��o percentagem e digite: 70.
� Texto: digite: Digite um n�mero qualquer:.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da Caixa de Texto:
� Nome: ctNumDigitado. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Amarelo.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 16.
� Largura: selecione a op��o percentagem e digite: 20.
� Dica: Deixe em branco.
� SomenteN�meros: marque o checkbox para aceitar somente n�meros na caixa de texto.
� Texto: deixe em branco.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Azul.
Alterando as propriedades do Bot�o:
� Nome: btnCalcular. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Azul.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 16.
� Forma: arredondado.
� Texto: Calcular.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Branco.
Alterando as propriedades da segunda Legenda:
� Nome: legResultado. Clique no componente e utilize o bot�o Renomear na se��o Componentes.
� CorDeFundo: Amarelo.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhDaFonte: 16.
� Largura: selecione a op��o percentagem e digite: 20.
� Texto: 00.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Azul.
Feito isso, o seu projeto dever� ficar igual ao da Figura 9.2:

Figura 9.2 � Componentes configurados.
Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional executan-do a tarefa para o qual foi designado.
Mas antes de criarmos os blocos dos componentes propriamente ditos, precisamos criar uma vari�vel global para armazenar o n�mero
digitado pelo usu�rio.
Ent�o vamos l�:
C�digo 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: num1 (essa ser� a vari�vel utilizada para
armazenar o valor do n�mero digitado pelo usu�rio).
� Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente.
Isso significa que quando o aplicativo for executado essa vari�vel ser� criada essas assumindo o valor 0 (zero). Veja na
Figura 9.3 como dever� ficar o seu c�digo:

Figura 9.3 � Declara��o da vari�vel.
Agora que terminamos a parte visual e criamos a vari�vel necess�ria para o nosso projeto, vejamos ent�o como criar o c�digo
dos componentes.
Na verdade, somente o componente Bot�o receber� c�digo, os outros s�o apenas informa-tivos e para entrada de dados, n�o
necessitando de nenhum c�digo.
Ent�o vejamos o c�digo do bot�o passo a passo.
C�digo para o Bot�o:
� Na tela Blocos, clique no componente btnVerificar.
� Arraste o primeiro bloco para a �rea em branco.
� Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna do bloco j� existente.
� Clique na pequena seta e selecione a op��o: global num.
� Clique no componente ctNumDigitado, arraste o primeiro bloco verde e encaixe no final do �ltimo bloco (vermelho). Altere
a op��o CorDeFundo para: Texto.
Feito isso, seu projeto dever� ficar igual ao da Figura 9.4:

Figura 9.4 � Primeira etapa dos blocos do bot�o.
Isso quer dizer que, quando o bot�o btnCalcular for clicado, armazene na vari�vel global num o valor digitado pelo usu�rio
na caixa de texto ctNumDigitado.
E para finalizar o nosso c�digo:
� Clique no componente legResultado, arraste o segundo bloco e encaixe logo abaixo do �ltimo bloco vermelho. Altere a op��o
CorDeFundo para: Texto.
� Clique na categoria Matem�tica, arraste o bloco �raiz quadrada� e encaixe no final do bloco verde.
� Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul. Clique na pequena seta e selecione
a op��o: global num.
Feito isso, seu projeto dever� ficar igual ao da Figura 9.5:

Figura 9.5 � C�digo do projeto finalizado.
Esse bloco nos diz o seguinte:
Quando o bot�o btnCalcular for clicado, mostre na legenda legResultado o valor da raiz quadrada do n�mero digitado pelo usu�rio
na caixa de texto ctNumDigitado.
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:
CalcularRaizQuadrada.aia
CalcularRaizQuadrada.apk
|