10.4 Aplicação Web com VRaptor 4 – Voltando ao Controller: Listando Contatos

Olá, vamos listar os contatos? Bora? Bora? Bora?

Mas antes de começarmos, vamos aos recadinhos e patrocinadores. Já estamos trabalhando no nosso projeto, caso tenha caído neste tutorial acidentalmente, pode ver a lista dos episódios anteriores na introdução que fiz para estes posts. E lembre-se, você pode e deve acompanhar os códigos pelo meu github, segue o link ai em baixo:

https://github.com/pedro-hos/aprendendo-vraptor

Vamos nessa então, abra o main.js, vamos editá-lo agora. Dentro da function vamos criar uma outra function, chamada buscarTodos(), ela será responsável em acessar o service ContatoService e também inseri-los em uma variável.

Você deve então, inserir o código, e deve ficar parecido com o que vem a seguir.

angular.module('meus-contatos')
    .controller('MainController', function ($scope, contatoService, telefoneService) {

        $scope.contatos = [];

        function buscarTodos() {
            contatoService.query(
                function (contatos) {
                   $scope.contatos = contatos; 
                },

                function (erro) {
                    console.log(erro);
                }
            );
        }

        buscarTodos();

    });

O que fazemos ali é criar uma variável, que é uma lista de contatos vazia, logo no início. Depois criamos a função buscarTodos, e fazemos a chamada para a função query(), que já vem pré-definido no $resource, dentro da query(), passamos duas funções callback, em caso de sucesso ele seta os contatos e em caso de erro/problema ele faz um log no console.

Pronto, agora podemos partir para view \o

Abra o main.html ai jow, e insira o código a seguir nele, e já já eu explico

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Contatos</h3>
    </div>
    <div class="panel-body">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>Nome</th>
                <th>Email</th>
                <th>Tipo Contato</th>
                <th>Telefones</th>
                <th>Ação</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="contato in contatos" id="_contato">
                <th scope="row">{{contato.id}}</th>
                <td>{{contato.nome}}</td>
                <td>{{contato.email}}</td>
                <td>{{contato.tipoContato}}</td>
                <td>
                    <ol>
                        <li ng-repeat="telefone in contato.telefones">
                            ({{telefone.ddd}}) {{telefone.telefone}} [{{telefone.tipoTelefone}}]
                        </li>
                    </ol>
                </td>
                <td>
                    <a id="_editar" ng-click="edit(contato)" class="btn btn-default" role="button">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                        Editar
                    </a>
                    <a id="_remover" ng-click="remove(contato)" class="btn btn-default" role="button">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        Remover
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

O que fazemos ali é montar uma lista, a primeira coisa que temos que notar é o uso da diretiva ng-repeat, usamos ela para iterar as listas de telefone e contatos, que criamos no e passamos pelo $scope para a view no controller. Na interação pegamos, por exemplo o contato e mostramos ele na tela passando o valor entre {{ }} chaves duplas, como em: {{contato.nome}}

Outro detalhar são as diretivas ng-click, com elas chamamos dois métodos no controller, o remove e o edit, ambos passando o contato como parâmetro. Esses métodos não estão implementados, mas serão feitos em breve.

Mas para não dar nenhum erro coloque estes trechos de código dentro do main.js

$scope.edit = function (contato) { // vamos editar };
$scope.remove = function (contato) { // vamos remover };

Vamos testar então, a primeira coisa que temos que fazer é subir o servidor Wildfly e também o servidor python, em seguida cadastrar alguns contatos e então acessar http://localhost:9001/#/ com isso você devera ver a listagem dos contatos como mostra a imagem abaixo

contatos_listaEntão era isso cara, qualquer dúvida/sugestão/indagação só falar. Estamos aqui para servir, e servimos bem para servir sempre 😉

Anúncios

3 comentários

  1. Pingback: 01 Aplicação Web com VRaptor 4 – Introdução | Pedro Hos
  2. Tiago Cássio · dezembro 8, 2015

    Olá amigo, estou seguindo os seus artigos em um projeto usando Vraptor e estou realmente impressionado com o poder desse Framework. Obrigado por tudo!

    • Pedro Henrique de Oliveira Silva · dezembro 8, 2015

      Obrigado Cássio

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s