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

5 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

  3. Luis · janeiro 21, 2016

    Olá Pedro, sou novo em vraptor e em programação java pra web. Você poderia dizer como faz pra cadastrar os contatos que você fala no final?

  4. antonioluis23 · janeiro 21, 2016

    Olá Pedro, Sou novo em vraptor e programação java pra web. Você poderia dizer como fazer pra cadastrar os contatos que tu fala no final? obrigado.

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