Introdução
Continuação da aula 08.
Na aula passada, aprendemos trabalhar com o EditText. Criamos uma formulário de Login e aplicamos uma validação para o mesmo, de forma que somente após a digitação dos dados, o usuário poderia prosseguir.
Na aula passada, aprendemos trabalhar com o EditText. Criamos uma formulário de Login e aplicamos uma validação para o mesmo, de forma que somente após a digitação dos dados, o usuário poderia prosseguir.
Nesta aula, iremos criar uma segunda tela para o projeto anterior, e sofisticar a validação dos campos da tela de login de forma que para acessar a segunda tela, todos os campos deveram atender uma regra de validação.
Objetivo
O objetivo desta aula é ensina-lo como trocar de tela usando a classe Intent do SDK Android. Nossa aplicação terá duas telas, a primeira tela foi criada na aula anterior e se você não implementou o exercício da aula 08 do curso, sugiro que implemente-o para poder acompanhar esta aula. A segunda tela chamaremos de Dashboard.
A nova tela que será criada, conterá várias funcionalidades que serão temas das próximas aulas. Iniciaremos adicionando duas funcionalidades, um será um botão para sair da aplicação com confirmação via AlertDialog. A segunda funcionalidade será um botão para abrir um endereço URL qualquer.
Video demonstrativo da aplicação rodando no emulador
Protótipo da tela Dashboard.
A tela abaixo será nosso Dashboard para esta aula. Nas próximas aulas, iremos evoluir esta Dashboard, portanto é muito importante que você acompanhe e implemente todos os exercícios.
Imagens para os componentes ImageView
Salve este arquivo com o nome ic_google_play.png
Salve este arquivo com o nome ic_sing_out.png
Especificação da tela Dashboard
Estas duas funcionalidades, podem ser facilmente modificadas para outros cenários conforme as necessidades do aplicativo.
Para apresentar as imagens na tela Dashboard, será utilizado o Widget ImageView.
Widget ImageView
Assim como fizemos para adicionar os Widgets TextView, EditText e Button nas aulas anteriores, que consiste em selecionar o modo de visualização Design do Layout da tela, em seguida clicar no grupo Widgets, selecionaremos o ImageView e posicionaremos o mesmo no layout conforme o protótipo apresentado nesta aula.
Observe que o layout padrão é o RelativeLayout, somente com este layout será possível posicionar os Widgets onde desejarmos no Layout.
Para o sucesso desta aula, garanta que você está trabalhando com o layout RelativeLayout, conforme o exemplo abaixo.
Regras de Validação da tela de Login
Nossa tela de Login é a primeira Activity a ser carregada, basicamente tem a finalidade de validar os campos digitados, permitindo o acesso à Dashboard apenas se todos os dados forem informados corretamente.
Estamos trabalhando com dois campos apenas e um botão nesta tela conforme podemos ver abaixo:
Nossa tela de Login é a primeira Activity a ser carregada, basicamente tem a finalidade de validar os campos digitados, permitindo o acesso à Dashboard apenas se todos os dados forem informados corretamente.
O código responsável pela validação é muito simples, toda a regra está centrada em uma variável booleana setada inicialmente como true, e caso algum dos campos esteja sem informação, a variável é setada como false.
A chamada da tela Dashboard testa se a variável é verdadeira, o que significa que todos os campos foram informados pelo usuário na rela de Login.
Observe que na linha 23, declaramos a variável camposValidados mas não atribuimos valor algum para ela.
Observe agora que na linha 40, atribuimos para a variável camposValidados o valor true. Com isso estamos assumindo que todos os dados foram informados pelo usuário. Mas iremos validar esta hipotese, campo por campo.
Validação do campo e-mail.
Validação do campo senha.
Com esta verificação estamos testando se o senha informado no campo Senha do formulário é android, e caso negativo, notificamos o usuário com uma mensagem via Toast e ainda setamos a variável camposValidados como falsa, o que também elimina a possibilidade de acesso à nossa tela Dashboard.
Trocando de tela - Intent
A troca de telas programaticamente no Android, é feita utilizando a classe Intent.
Neste exemplo, estamos criando um objeto do tipo Intent chamado dashboard, e para cria-lo é necessário fornecer dois parâmetros para o construtor da classe. O primeiro é a a activity atual (MainActivity.this), e o segundo é a activity de destino. Note que para a activity de destino, somos obrigados informar a extensão .class (DashboardActivity.class).
Para efetivamente trocar de tela, utilizamos o método startActivity(dashboard), linha 73 do código acima.
Teste final para trocar de tela
Tela Dashboard
Iremos fazer uso do Widget ImageView da mesma forma que os demais Widgets utilizados nas aulas anteriores do curso.
Temos duas imagens disponíveis em nossa tela, ambos ImageView. Basicamente via método setOnClickListener() iremos adicionar comportamento para as duas imagens.
Acessando um endereço Web
Nesta aula, vamos aprender como carregar uma página web programaticamente. Esta tarefa será efetuada utilizando um objeto Intent, porém já pré-definido. O que teremos que informar é o endereço web desejado.
O trecho de código abaixo, é referente a primeira Imagem do nosso Dashboard, que quando clicado, irá abrir a loja Google Play do Professor Marco Maddo.
Diferentemente da forma que trocamos de tela na MainActivity, para acessar um endereço URL, passamos como parâmetro para o construtor da classe Intent, duas informações. A primeira é Intent.ACTION_VIEW, responsável em chamar o browse para carregar a página web informada no segundo parâmetro, via Uri.parse("endereço").
Evento sair da aplicação com diálogo
Para a segunda imagem da tela Dashboard, iremos adicionar um diálogo para o usuário. Permitindo o mesmo, confirmar se realmente desejar finalizar a aplicação ou não. Isso será feito utilizando a classe AlertDialog do Android.
AlertDialog
O código completo utilizado para criar o diálogo é apresentado abaixo e comentado em seguida.
Podemos observar que o evento setOnClickListner(), contém toda a regra de negócio para decidir se a aplicação será finalizada ou não. Tudo depende da opção escolhida pelo usuário.
Na linha 46 estamos criando um objeto alertDialog, e apartir disso podemos customizar a tela de Diálogo.
Na linha 49, customizamos o título da tela.
Na linha 51, definimos a mensagem para o usuário.
Na linha 53, definimos o ícone para a tela.
Nas linhas 55 à 60, definimos a regra de negócio para o método setPositiveButton(), ou seja, o que será feito caso o usuário confirme sua decisão.
Nas linhas 63 à 68, definimos o que será feito caso o usuário escolha por não sair.
Na linha 71, apresentamos o diálogo para o usuário definamente customizado.
AndroidManivest.xml
Quando trabalhamos com mais de uma tela, ou várias Activities, é necessário adiciona-las ao arquivo AndroidManivest.xml. Nesta aula, nós utilizamos duas Activities e o arquivo AndroidManivest ficou conforme mostrada abaixo.
O Android Studio faz a inclusão das alterações necessárias de forma automática no arquivo AndroidManivest. Mas observe que nas linhas 19 à 22, encontramos a entrada para a Activity Dashboard.
Conclusão
Nesta aula, foi apresentado como trabalhar com mais de uma tela, além de adicionar regras de validação de formulários. Também vimos como trabalhar com o Widget ImageView e a Classe AlertDialog.
Com isso duas novas funcionalidades foram adicionadas na aplicação exemplo desta aula, permitindo acessar um endereço Web qualquer, e oferecer a opção de diálogo entre a aplicação e o usuário para tomar uma decisão se realmente deseja finalizar ou não o uso do aplicativo.
Na próxima aula, iremos adicionar um banco de dados o que irá permitir a busca dos dados para validação do formulário.
Nenhum comentário:
Postar um comentário