Vraptor 3 + Jquery FullCalendar

Programação Java
#1

Caros, boa noite!
Novamente estou com uma dúvida de iniciante…rs
Estou tentando utilizar o plugin Jquery FullCalendar, mas simplesmente não sei nem por onde começar…rs
Fiz uns testes e tenho o seguinte trecho do código do jsp:

<script type='text/javascript'>

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,basicWeek,basicDay'
			},
			editable: true,
				eventClick: function(event) {
				// opens events in a popup window
				window.open(event.url, 'gcalevent', 'width=700,height=600');
				return false;
			},
				loading: function(bool) {
				if (bool) {
					$('#loading').show();
				}else{
					$('#loading').hide();
				}
			},
			monthNames:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
			monthNamesShort:['jan.','fev.','mar','abr','mai','jun','jul.','ago','set','out','nov','dez'],
			dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
			dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
			buttonText: {
			today: 'Hoje',
			day: 'dia',
			week:'Semana',
			month:'Mês'
			},
			events: [
				 
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+1, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			]
		});
		
	});

</script>

E no meu body tenho a chamada:

<div id='calendar'></div>

Pois bem, se os eventos são adicionados por instruções fora do meu body, como vou adicionar meus próprios eventos aqui em tempo de execução usando o vraptor?

Desculpe-me pela dúvida básica, mas travei msm e ainda não encontrei algum exemplo que me ajudasse.

Abs a todos!

#2

ronnie, quando o javascript executa, o html já está na máquina do usuário (no browser), o VRaptor já não pode fazer nada a respeito.

o que vc pode fazer é usar o javascript para fazer requisições ajax no servidor para puxar as informações do servidor. Por exemplo usando o $.get do jquery

#3

Lucas, valeu pela resposta!

Deixa eu ver se entendi…terei que gerar um bean com os mesmos atributos que a vaiavel do meu javascritp:

title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)

E depois irei chamar via ajax e jogar esse bean na sessao…
Correto?
abs

#4

não precisa necessariamente jogar isso na sessão… vc pode passar como parametro na requisição e atualizar na resposta do ajax.

#5

Valeu Lucas! Ainda to viajando…meu atributo ta chamando o seguinte:

 events: 'logica/buscaeventos'

e qdo acesso:
http://127.0.0.1:8081/meuprograma/logica/buscaeventos
recebo o seguinte conteúdo no browser:
{“eventos”: [{“id”: 1,“title”: “Teste”,“start”: “2012-07-05 21:00:00”,“end”: “2012-07-05 22:00:00”,“allDay”: “”}]}

Não entendi o lance de usar o $.get, pode me ajudar? acho que está serializando legal, mas não consegui fazer aind nao $.get do ajax via javascript q vc comentou…
abs e obrigado!

#6

se é um json, use o getJSON:

$.getJSON(url, function(json) {
    var eventos = json.eventos;
    // mude a página do jeito que vc quiser com isso
});

e mudar é tipo pegar um elemento pelo id, e mudar seu conteúdo, adicionar novos elementos, etc

#7

Valeu! Eu tava fazendo isso msm…mas ainda não rolou…
meu controller tá assim pra testar:

[code]public void buscaeventos(String start,String end) throws Exception{
//EstacaoDAO estacaodao = new EstacaoDAO();

List<Evento> lista= new ArrayList<Evento>();
Evento evret=new Evento();
evret.setAllDay("true");
evret.setStart("2012-07-10 21:00:00");

evret.setTitle("Teste");
evret.setEnd("2012-07-10 22:00:00");

evret.setId(30);
lista.add(evret);




result.use(Results.json()).from(lista, "events").serialize();

}[/code]
e retorna isso no browser:

{“events”: [{“id”: 30,“title”: “Teste”,“start”: “2012-07-10 21:00:00”,“end”: “2012-07-10 22:00:00”,“allDay”: “true”}]}

Será que esse retorno não está com nenhum problema? os parâmetros do Fullcalendar são, por exemplo:

events: [
			
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false

Fiz até um onclick pra testar…mas nao exibe…
abs

#8

talvez vc tenha que converter a data na mão… talvez seja esse o problema… ao invés de colocar a data formatada, tente usar o timestamp… tem que ver o que o fullcalendar aceita.

#9

Lucas, após alguns testes vi que o problema está no retorno do jSON…que deveria ser assim (conforme teste satisfatório via servlet, com objeto Hashmap sendo serializado pelo GSON):

[{“id”:2,“title”:" TESTE",“start”:“Jul 15, 2012 12:00:00 AM”},
{“id”:2,“title”:“TESTE”,“start”:“Jul 16, 2012 12:00:00 AM”}]

Mas está vindo assim:

{“event”: [[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-15 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-16 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-17 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-26 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-28 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-24 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-18 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-22 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-14 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-01 00:00:00.0 BRT”]],
[[“id”,2],[“title”,“TESTE”],[“start”,“2012-07-13 00:00:00.0 BRT”]]]}

Estou usando a classe:



@Component  
public class PlainJSONSerialization implements View {  
    private JSONSerialization serialization;
	private HttpServletResponse response;

	public PlainJSONSerialization(JSONSerialization serialization, HttpServletResponse response) {  
       this.serialization = serialization;  
       this.response = response;  
    }  
  
    public Serializer from(Object objeto, String alias) {  
          Serializer serializer = serialization.from(objeto, alias);  
          response.setHeader("Content-Type", "text/plain");  
          
          return serializer;  
    }

e no controller:

[code]

    result.use(PlainJSONSerialization.class).from(listamap,"event").recursive().serialize();
[/code]

Como faço para que o json seja “Formatado” como no primeiro exemplo? pois só assim o fullcalendar funfou…Ou ainda, como fazer o controller devolver meu GSON?

Valeu!

#10

use esse plugin:

#11

Valeu Lucas!
Mas consigo trabalhar com ele sem o Hibernate?
abs

#12

sim, qqer objeto

#13

Cara, desculpe pela ignorância…rs…mas juro que tentei!

Não consegui usar esse serializador, hoje só funciona assim pra mim com servlet:

Trecho do meu servlet que retorna o GSON

[code]
SimpleDateFormat sdf = new SimpleDateFormat( “yyyy-MM-dd”);
//Para converter de String para Date:

		    for(Evento evento : listaEvento ){  
		    	Map map = new HashMap();
		    	  
		    	 map.put("id", evento.getCodItem());
		    	 map.put("title","Aguardando  " + evento.getAgendaEvento().getTitle());
		    	 
		    	 try {
					java.util.Date dataevento = sdf.parse(evento.getAgendaEvento().getStart());
					// map.put("start", new SimpleDateFormat("yyyy-MM-10").format(new Date()));
					map.put("start",dataevento);
					map.put("allDay","true");
						} catch (ParseException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}  
		    	
		    	listamap.add((HashMap) map);
				}
		    	
		    //System.out.println(listamap);
		    
		    
		   
		
		
		    // Convert to JSON string.
		    String json = new Gson().toJson(listamap);
		
		    // Put json between [] to be formatted by Fullcalendar -- Ghazi
		  //  json = "[" + json + "]";
		
		    // Write JSON string.
		    response.setContentType("application/json");
		    response.setCharacterEncoding("UTF-8");
		    response.getWriter().write(json);
		    [/code]

Ele retorna assim, da forma que o Fullcalendar espera:

[{“id”:2,“title”:" TESTE",“start”:“Jul 15, 2012 12:00:00 AM”},
{“id”:2,“title”:“TESTE”,“start”:“Jul 16, 2012 12:00:00 AM”}]

Cara, como ficaria com o o plugin ??

Mais uma vez desculpe-me, mas ainda não consegui entender como usar esse plugin

Abs!

#14

pra usar o plugin:

-baixe o código
-mvn package
-copie o jar pro seu projeto
-registre o pacote dele no web.xml

#15

Dúvida: para isso preciso do Maven Instalado…correto? funciona normalmente com o tomcat né, não tem nada a ver uma coisa com a outra?

abs

#16

sim, precisa do maven… e funciona normal em qualquer servidor, teoricamente.

#17

Já isntalei o mave, gerei o jar, joguei na minha lib…e agora, serializo assim?

	 result.use(GsonJSONSerialization.class).from(listamap).recursive().serialize();

VAleu!!!

#18

se vc colocar o pacote do gson no web.xml, vc pode usar o result.use(Results.json())… mesmo

no parâmetro packages do vraptor no web.xml acrescente o pacote br.com.caelum.vraptor.deserialization.gson

[]'s

#19

estou pensando em usar o fullCalendar como uma agenda, porém preciso fazer um controle tipo o cara vai e cria um evento ele é salvo na base de dados(não pretendo a conexão do google calendar), só que só o cara que realizou este agendamento pode alterar ou deletar o mesmo, pois seria uma reserva de sala de reunião. eu vi que não existe uma função que faça isto, porém como posso chamar um bean no event, será que consigo tratar isso dentro do java, como por exemplo no servlet? este controle pode ser feito na hora que carrega os dados dos eventos esta seria minha ideia será que consigo faze isso?

#20

doslord, sugiro que vc abra um tópico novo pra sua dúvida…
aqui é sobre a integração com o vraptor, as pessoas que participaram desse tópico talvez não sejam de muita ajuda pra vc…