O Vraptor é capaz de gerar e consumir JSon, então é só você integrar isso com o plugin do JQuery/Dojo/etc ou com os componentes visuais do GWT
Lucas, eu faço as tags no js, mando elas ser recuperadas via JSON e mostro é isso ?
JSP <-------------------------json-------------------------xml---------------------------------java
OU eu estou errado !?
via ajax, você pode tanto pedir um pedaço de página, ou um JSON… vc nunca vai escrever JSP via javascript…
a sequência:
browser --> ajax --> java --> json --> javascript --> html
o browser manda uma requisição ajax pra sua aplicação, que vai retornar um json, que vc vai ler e gerar/modificar um pedaço da sua página usando javascript
ou:
browser --> ajax --> java --> html snippet --> javascript --> html
mesmo acima, só que vc recebe um pedaço de html e coloca direto na página
[]'s
lucascs Obrigado péla dica !
Agora Clareou a Dúvida !
browser --> ajax --> java --> json --> javascript --> html
browser --> ajax --> java --> html snippet --> javascript --> html
Mais não achei nem 1 exemplo usando isso ! acho que ninguém usa AJAX + Vraptor com essa finalidade !
Você tem alguma coisa feita ai ?
me fala o que vc quer fazer, que eu te dou um exemplo…
de qqer forma, esse projeto tem várias chamadas ajax e efeitos visuais, usando vários plugins do JQuery, se quiser dar uma olhada:
http://calopsita.caelum.com.br/ ==> em produção
http://github.com/caelum/calopsita ==> código fonte
Lucas, aqui somos 4 programadores, todos eles qurem fazer em php ou em jsf + myface, eu quero mostrar para eles um exemplo em VRaptor que seja todo em ajax…
Cadastrar Clientes
Autocompletar (sei fazer pelo mydvds)
Listar Usuario
Entendeu ?
Com este código da para entender muita coisa do VR3
http://github.com/caelum/calopsita ==> código fonte
Valeu Cara !
qualquer dúvida mais específica diga…
um exemplo completo do autocomplete (tirado da apostila do curso do VRaptor na caelum):
[section Melhorando a busca: Autocomplete]
Podemos ainda melhorar nossa busca, mostrando dicas de produtos já existentes enquanto o usuário
está digitando. Queremos um resultado parecido com este:
<>
Para isso vamos usar um plugin do JQuery chamado AutoComplete
(http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)
que faz ::autocomplete:: de campos de texto. Esse plugin faz uma requisição ajax para uma URL
que retorna um JSON com os dados que vão aparecer no autocomplete.
Por causa desse plugin, precisamos criar uma lógica que gere um JSON para nós. No VRaptor, gerar
JSON é bem simples:
import static br.com.caelum.vraptor.view.Results.*;
//...
@Get @Path("/produtos/busca.json")
public void buscaJson(String nome) {
result.use(json()).from(dao.busca(nome)).serialize();
}Ou seja, você passa para o método %%from()%% o que você quer serializar em JSON. Pode ser um objeto
qualquer, mas no nosso caso vai ser uma lista. Ao chamarmos a URI desse método no browser, passando
um nome qualquer, por exemplo %%http://localhost:8080/goodbuy/produtos/busca.json?nome=a%% é retornado
um JSON parecido com:
{"list": [
{
"id": 1,
"nome": "Sabonete",
"descricao": "Um sabonete com perfume de lavanda",
"preco": "3.53"
},
{
"id": 3,
"nome": "Sapato",
"descricao": "um sapato de couro",
"preco": "132.00"
}
]}Mas como vamos buscar os produtos apenas por nome, não precisamos de todas essas informações, só
precisamos de uma lista de nomes, talvez com o preço. Para isso podemos excluir as outras propriedades:
import static br.com.caelum.vraptor.view.Results.*;
//...
@Get @Path("/produtos/busca.json")
public void buscaJson(String nome) {
result.use(json()).from(dao.busca(nome))
.exclude("id", "descricao")
.serialize();
}Gerando o seguinte json:
{"list": [
{
"nome": "Sabonete",
"preco": "3.53"
},
{
"nome": "Sapato",
"preco": "132.00"
}
]}Agora estamos prontos para usar o plugin de ::autocomplete::. Para isso, abra o arquivo “header.jspf”,
e adicione o javascript e o css do plugin. Use o mesmo lugar do plugin Puts:
[code]
" rel="stylesheet" type="text/css" media="screen" /> ... [/xml]Isso deveria ser o suficiente, mas o plugin AutoComplete espera que você mande os dados separados por pipe(|)
ou um dado por linha. Como queremos usar JSON, precisamos configurar isso no plugin:
$("#busca").autocomplete('/goodbuy/produtos/busca.json', {
dataType: "json", // pra falar que vamos tratar um json
parse: function(json) { // para tratar o json
// a função map vai iterar por toda a lista,
// e transformar os dados usando a função passada
return $.map(json.list, function(produto) {
return {
data: produto, // todos os dados do produto
value: produto.nome, // o valor lógico do produto
result: produto.nome // o que vai aparecer ao selecionar
};
});
},
formatItem: function(produto) { // o que vai aparecer na lista de autocomplete
return produto.nome + "(" + produto.preco + ")";
}
});Além disso, o plugin passa como parâmetro da requisição o que você digitou no input, numa variável chamada %%q%%
então você precisa modicar a lógica de busca para o parâmetro se chamar %%q%%:
@Get @Path("/produtos/busca.json")
public void buscaJson(String q) {
result.use(json()).from(dao.busca(q))
.exclude("id", "descricao")
.serialize();
}Após o lançamento da versão o vraptor3 que faz a serialização transparente de XML/JSON vejo o vraptor como o melhor para trabalhar com Ajax.
Se você fazer um casamento com jquery ou prototype então nem se fala.
garcia-jj , então vale a pena ! Vou estudar bastante JSON.
valeu Galera !
Neste exemplo:
[code]
[/code]Funciona perfeitamente o autocomplete, mas como eu faria para retirar os scripts desta página jsp e colocar em um arquivo separado?
Eu criei um arquivo busca_autocomplete.js, removi as tags e chamei no head:
Porém, somente com o conteúdo dentro das tags no arquivo busca_autocomplete.js não funcionou.
É necessário criar alguma função?
lhtaconi, esse tópico é sobre a notícia de lançamento da versão 3.0.2. Se você tem dúvidas abra um tópico com sua dúvida para não misturar os assuntos.
Certo… é que a dúvida que eu tenho é exatamente neste exercício que foi utilizado como exemplo…
Vou postá-la em outro tópico.
Obrigado