creating fixed headers with css

8/15/2019 Creating Fixed Headers With CSS

1/15

31/05/2016 C riando o C ar rinho de C om pr as - W eb ági l com VR aptor, H iber nate e AJAX

https://www.caelum.com.br/apostila-vraptor-hibernate/criando-o-carrinho-de-compras/#13-1-o-modelo-do-carrinho 1/15

CAPÍTULO 13

Criando o Carrinho de Compras

13.1 - O MODELO DO CARRINHO

Ainda não é possível comprar os produtos na nossa loja virtual. Precisamos de

algum jeito fazer com que o usuário selecione os produtos que deseja comprar. O

jeito mais comum de fazer isso é criar um carrinho de compras, guardando os

produtos que foram selecionados.

Vamos criar uma classe que representa o carrinho de compras. Essa classe vai

conter uma lista dos produtos escolhidos e o valor total:

Além disso precisamos criar uma classe que representa um item do carrinho:

um produto com a quantidade selecionada.

Pergunta importante: precisamos guardar esse carrinho no banco? O usuárionão comprou ainda os produtos, então não faz muito sentido guardar no banco de

dados. Esse carrinho precisa ficar disponível enquanto o usuário estiver

public class Carrinho {

private List itens = new ArrayList();

private Double total = 0.0;

// getters e setters

}

public class Item {

private Produto produto;

private Integer quantidade;

// getters e setters

}

APOSTILA WEB ÁGIL COM VRAPTOR, HIBERNATE E AJAX

https://www.caelum.com.br/apostila-vraptor-hibernate/https://www.caelum.com.br/apostila-vraptor-hibernate/https://www.caelum.com.br/apostila-vraptor-hibernate/https://www.caelum.com.br/apostila-vraptor-hibernate/http://www.caelum.com.br/?utm_source=Apostila_HTML&utm_campaign=FJ-28&utm_medium=referralhttp://www.caelum.com.br/?utm_source=Apostila_HTML&utm_campaign=FJ-28&utm_medium=referralhttp://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.caelum.com.br%2Fapostila-vraptor-hibernate%2Fhttp://www.caelum.com.br/?utm_source=Apostila_HTML&utm_campaign=FJ-28&utm_medium=referralhttps://www.caelum.com.br/apostila-vraptor-hibernate/


2/15



navegando no sistema, então podemos apenas colocar o carrinho na sessão. Como

vimos antes, para que um componente seja único durante a sessão do usuário

basta anotá-lo com @SessionScoped, então basta modificar a classe do carrinho

para incluir as anotações:

Agora podemos receber esse carrinho no construtor de algum controller, com a

certeza de que ele será único durante a sessão do usuário.

13.2 - CONTROLANDO O CARRINHO DE COMPRAS

Agora que temos o modelo do Carrinho, vamos criar uma maneira de adicionar

produtos. O jeito mais simples é modificar a listagem de produtos adicionando um

botão para comprar:

@Component

@SessionScoped public class Carrinho {



//getters e setters

}

...

Comprar

...

...

Comprar

...


3/15



O novo formulário vai adicionar um item ao carrinho, passando a quantidade e

o id do produto. Precisamos agora criar um controlador que trate das operações no

carrinho de compras, que seja capaz de adicionar um item ao carrinho. Esse

controlador vai se chamar CarrinhoController:

Vamos criar o método que responde à URI colocada no formulário de compra:

Para adicionar o item ao carrinho, temos que receber um Carrinho no

construtor, assim o VRaptor vai passar para o CarrinhoController o carrinho da

sessão do usuário:

package br.com.caelum.goodbuy.controller;

import br.com.caelum.vraptor.Resource;

@Resource

public class CarrinhoController {

}

@Resource


@Post("/carrinho")

public void adiciona(Item item) {

}

}

@Resource


private final Carrinho carrinho;

public CarrinhoController(Carrinho carrinho) {

this.carrinho = carrinho; }

@Post("/carrinho")



4/15



Não existe ainda o método adiciona no Carrinho, então use o Ctrl+1 para criar o

método. Ao adicionar um item no carrinho precisamos atualizar o total:

Repare que estamos usando o preço do produto para atualizar o total do

carrinho, mas no formulário só estamos passando o id do produto. Precisamos

carregar as outras informações do Produto no banco de dados, usando o

ProdutoDao:

Para implementar o método recarrega no ProdutoDao, vamos usar um método

da Session que busca as informações no banco e coloca no próprio objeto passado.

Esse método se chama refresh.

carrinho.adiciona(item);

}

}





itens.add(item);

total += item.getProduto().getPreco() * item.getQuantidade();

}

//...

}

@Resource public class CarrinhoController {


private final ProdutoDao dao;

public CarrinhoController(Carrinho carrinho, ProdutoDao dao) {

this.carrinho = carrinho;

this.dao = dao;

}

@Post @Path("/carrinho")


dao.recarrega(item.getProduto());


}

}

@Component

public class ProdutoDao {


5/15



Por último, precisamos ir para alguma página após adicionar algum item no

carrinho. Por ora, vamos voltar pra página de listagem de produtos. Repare que

como o redirecionamento é para uma lógica de outro controller, precisamos usar a

classe deste controller:

Você pode também fazer o curso FJ-28 dessa apostila na Caelum

Querendo aprender ainda mais sobre o framework VRaptor?

Esclarecer dúvidas dos exercícios? Ouvir explicações

detalhadas com um instrutor?

A Caelum oferece o curso FJ-28 presencial nas cidades de

São Paulo, Rio de Janeiro e Brasília, além de turmas

incompany.

Consulte as vantagens do curso Web ágil com VRaptor, Hibernate e AJAX .

//...

public void recarrega(Produto produto) {

session.refresh(produto);

}

}

@Resource




private final Result result;

public CarrinhoController(Carrinho carrinho,

ProdutoDao dao, Result result) {


this.dao = dao;

this.result = result;

}

@Post("/carrinho")

public void adiciona(Item item) { dao.recarrega(item.getProduto());


result.redirectTo(ProdutosController.class).lista();

}

}

http://www.caelum.com.br/curso-vraptor-hibernate/?utm_source=Apostila_HTML&utm_campaign=FJ-28&utm_medium=referral


6/15



13.3 - VISUALIZANDO OS ITENS DO CARRINHO

Já conseguimos adicionar itens no carrinho, mas não é possível ainda visualizar

o que tem dentro dele. Primeiro, vamos adicionar uma lugar em todas as páginas

que mostra o estado atual do carrinho: quantos itens ele tem e qual é o valor total.

Mas como vamos acessar o carrinho da sessão em todas as nossas páginas? Seráque precisamos incluir o carrinho no Result em todas as lógicas? Não, isso não é

necessário.

Quando criamos um componente SessionScoped, o VRaptor coloca a instância

desse componente como um atributo da sessão, usando a convenção de nomes

padrão. Ou seja, para o Carrinho, existirá um atributo da sessão chamado

carrinho, então você consegue acessar o carrinho nas suas jsps usando a variável

${carrinho}.

Vamos, então, abrir o arquivo header.jspf e adicionar dentro da div header uma

div do carrinho:

Estamos usando a expressão ${carrinho.totalDeItens} mas classe Carrinho

não possui um getter para esse total de itens. Então vamos adicionar:

Meu carrinho:

Você não possui itens no seu carrinho

Itens: ${carrinho.totalDeItens }

Total:


//...

public Integer getTotalDeItens() {

return itens.size();


7/15



Agora ao adicionar produtos ao carrinho, conseguimos ver a quantidade de

produtos adicionados e o valor total do carrinho nessa div que acabamos de criar:

Ainda não conseguimos visualizar os itens do carrinho, então vamos criar uma

lógica que liste os itens, no CarrinhoController.

Esse método vai atender à mesma URI que o método adiciona, mas com outro

verbo HTTP: o GET. Agora podemos criar a página que lista os itens. Crie essa

página em /WEB‐INF/jsp/carrinho/visualiza.jsp.

}

}

@Get @Path("/carrinho")

public void visualiza() {

}

Itens do seu carrinho de compras

Nome

Descrição

Preço

Qtde Total

${item.produto.nome }

${item.produto.descricao }

${item.quantidade }


8/15



Para acessar essa visualização, vamos criar um link na div do carrinho:

Agora que temos uma página de visualização, podemos redirecionar para ela

quando adicionamos algum produto ao carrinho.

13.4 - R EMOVENDO ITENS DO CARRINHO

Para completar as funcionalidades do carrinho de compras, vamos modificar avisualização do carrrinho para ser possível remover itens:

value="${item.quantidade * item.produto.preco }"/>

Total:

Meu carrinho:

@Resource


//...

@Post("/carrinho")




result.redirectTo(this).visualiza();

}

}

...


9/15



Vamos criar, também, o método que remove itens do carrinho no controller:

E implementar o método que remove o item do carrinho, atualizando o total:

13.5 - EXERCÍCIOS

1. Crie os modelos Carrinho e Item:

...

Remover

...


//...

@Delete("/carrinho/{indiceItem}")

public void remove(int indiceItem) {

carrinho.remove(indiceItem);

result.redirectTo(this).visualiza();

}

}


//...


Item removido = itens.remove(indiceItem);

total ‐= removido.getProduto().getPreco() * removido.getQuantidade();

}

}

package br.com.caelum.goodbuy.modelo;

@Component

@SessionScoped





10/15



2. Modifique a listagem de produtos para incluir um botão para comprar o

produto:

3. Adicione o div do carrinho no cabeçalho da página (arquivo header.jspf)

//getters e setters

}

package br.com.caelum.goodbuy.modelo;

public class Item {

private Produto produto;

private Integer quantidade;

//getters e setters

}

...

Comprar

...

...

Comprar

...

Meu carrinho:

Você não possui itens no seu carrinho


11/15



4. Crie o CarrinhoController, com um método para adicionar itens no carrinho.

Itens: ${carrinho.totalDeItens }

Total:

package br.com.caelum.goodbuy.controller;

@Resource




private final Result result;

public CarrinhoController(Carrinho carrinho,

ProdutoDao dao, Result result) {


this.dao = dao;

this.result = result;

}

@Post("/carrinho")




result.redirectTo(ProdutosController.class).lista();

}

}


//...

public void adiciona(Item item) { itens.add(item);

total += item.getProduto().getPreco() *

item.getQuantidade();

}

public Integer getTotalDeItens() {

return itens.size();

}

}

public class ProdutoDao { //...

public void recarrega(Produto produto) {

session.refresh(produto);

}


12/15



5. Compre alguns produtos e veja o carrinho sendo atualizado no header.

6. Crie a lógica e o jsp que visualiza os itens do carrinho. Mude também o

redirecionamento do método adiciona para a nova lógica.

/WEB‐INF/jsp/carrinho/visualiza.jsp

}

@Resource

public class CarrinhoController { //...

@Get("/carrinho")

public void visualiza() {

}

@Post("/carrinho")




result.redirectTo(this).visualiza(); }

}

Itens do seu carrinho de compras

Nome

Descrição

Preço

Qtde

Total

${item.produto.nome }

${item.produto.descricao }


13/15



7. Adicione mais produtos ao carrinho.

8. Crie a lógica de remover produtos do carrinho e adicione o botão de remoção na

visualização do carrinho.

/WEB‐INF/jsp/carrinho/visualiza.jsp

${item.quantidade }

Total:


//...

@Delete("/carrinho/{indiceItem}")


carrinho.remove(indiceItem);

result.redirectTo(this).visualiza(); }

}



Item removido = itens.remove(indiceItem);

total ‐= removido.getProduto().getPreco() * removido.getQuantidade();

}

}

...


14/15



CAPÍTULO ANTERIOR:

AJAX e efeitos visuais

PRÓXIMO CAPÍTULO:

Autenticação

9. Adicione e remova itens do carrinho.

Tire suas dúvidas no GUJ Respostas

O GUJ é um dos principais fóruns brasileiros de computação

e o maior em português sobre Java. A nova versão do GUJ é

baseada em uma ferramenta de perguntas e respostas (QA) e

tem uma comunidade muito forte. São mais de 150 mil

usuários pra ajudar você a esclarecer suas dúvidas.

Faça sua pergunta.

Você encontra a Caelum também em:

...

Remover

...

http://www.guj.com.br/https://www.caelum.com.br/apostila-vraptor-hibernate/autenticacao/https://www.caelum.com.br/apostila-vraptor-hibernate/ajax-e-efeitos-visuais/


15/15

creating fixed headers with css

Documents