Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Java – Criando uma agenda de eventos com Spring MVC e Jquery fullCalendar.

Java – Criando uma agenda de eventos com Spring MVC e Jquery fullCalendar.

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Nesse tutorial vamos aprender a criar uma agenda de eventos com Spring MVC e fullCalendar que é um plugin Jquery muito legal e fácil de usar, vamos passar por alguns erros durante a configuração do projeto, mas isso é para sabermos como temos que resolver certas situações durante essa configuração.

Você pode querer ler também:

Configurando um projeto Java com Spring MVC e Maven.

 

Para começar esse tutorial vamos acessar a página http://fullcalendar.io/  e vamos clicar no menu Download, e depois vamos clicar em fullcalendar-2.4.0.zip que é a versão atual na data desse tutorial.

atenção: a página do plugin pode estar diferente da que estamos vendo atualmente.  

1

Enquanto estamos realizando o download vamos abrir o Eclipse para dar inicio no nosso projeto.

2

Vamos no campo Quick Access e vamos digitar new ma, e o Eclipse vai mostrar as opções do Maven, então vamos escolher Maven Project como mostra a imagem abaixo.

3

Na tela que foi aberta vamos apenas clicar em Next.

4

Agora vamos selecionar a opção maven-archetype-webapp como mostra a imagem abaixo, depois vamos clicar em Next.

5

Agora na tela de especificação de parâmetros vou deixar como mostra a tela abaixo, depois basta clicar em Finish.

6

Podemos ver que nosso projeto foi criado e está com erro.

7

Para resolver o problema vamos clicar com o botão direito sobre o nosso projeto e vamos selecionar a opção Properties ou dar Alt + Enter, depois vamos selecionar a opção JRE System Libray[J2SE-1.5] e clicar em Remove.

8

Agora vamos clicar no botão Add Library…

9

Na tela que foi aberta vamos selecionar JRE System Library e clicar em Next.

10

Aqui eu já tenho o meu JDK 8 configurado no Eclipse, se você não tiver basta selecionar Alternate JRE e depois clicar em Installed JREs… para procurar o seu diretório.

11

Na tela que foi aberta vamos clicar no botão Add…

12

Vamos selecionar Standard VM e clicar em Next.

13

Agora vamos clicar no botão Directory… para selecionarmos o o caminho do nosso JDK.

14

Depois que selecionarmos o JDK 8 vamos clicar em Finish.

28

Vamos deixar selecionado o nosso JDK e clicar em OK novamente.

29

Agora vamos clicar em Finish.

30

Nossas bibliotecas devem ficar como mostra a imagem abaixo, vamos clicar novamente no botão Add Library…

32

Vamos selecionar a opção Server Runtime e clicar em Next.

19

Vamos selecionar o nosso Tomcat e clicar em Finish.

20

Nossas bibliotecas devem ficar como mostra a imagem abaixo.

33

Agora vamos clicar na opção Java Compiler e vai aparecer a mensagem abaixo, basta clicar em Apply para aplicar as nossas alterações.

22

Em Java Compiler vamos selecionar a opção 1.8 e clicar em Apply.

34

Vai aparecer a mensagem abaixo, então vamos clicar em Yes, depois podemos clicar em OK na tela do Java Compiler.

24

Agora vamos selecionar a opção Project Facets e depois em Java vamos selecionar a versão 1.8, depois podemos clicar em OK.

35

Agora vamos clicar com o botão direito sobre o nosso projeto e vamos até Maven -> Update Project…

25

Na tela que foi aberta vamos apenas clicar em OK para realizar a atualização.

26

Depois podemos clicar no menu Project -> Clean... e selecionar o nosso projeto e clicar em OK, após essas configurações não devemos ver mais nenhum erro no nosso projeto.

27

Agora vamos abrir nosso arquivo pom.xml e vamos deixar ele com o código abaixo.

<project xmlns=”http://maven.apache.org/POM/4.0.0″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd”>
<modelVersion>4.0.0</modelVersion>
<groupId>br.com.ednilson.cicero.controller</groupId>
<artifactId>MinhaAgenda</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>MinhaAgenda Maven Webapp</name>
<url>http://maven.apache.org</url>

<properties>
<spring.version>4.2.1.RELEASE</spring.version>
<jackson.version>1.9.13</jackson.version>
</properties>

<dependencies>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>1.2.1.RELEASE</version>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<version>1.2.1.RELEASE</version>
<scope>provided</scope>
</dependency>
</dependencies>

<build>
<finalName>MinhaAgenda</finalName>
</build>
</project>

Aqui adicionamos apenas as dependências que precisamos em nosso projeto.

36

 

Agora dentro da pasta WEB-INF vamos criar um arquivo xml com o nome de dispatcher-servlet.xml e vamos colar o código abaixo.

<beans xmlns=”http://www.springframework.org/schema/beans”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns:context=”http://www.springframework.org/schema/context”
xmlns:tx=”http://www.springframework.org/schema/tx”
xmlns:mvc=”http://www.springframework.org/schema/mvc”
xsi:schemaLocation=”http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
“>

<!– ONDE ESTÃO OS COMPONENTES DO SPRING (EX:@Controller, @Repository, @Service e @Component )–>
<context:component-scan base-package=”br.com.ednilson.cicero” />

<!– SEM ESSA TAG ELE NÃO RETORNA O JSON –>
<mvc:annotation-driven />

<!– SEM ESSA TAG NÃO CARREGA OS CSS/JS –>
<mvc:default-servlet-handler/>

<bean
class=”org.springframework.web.servlet.view.InternalResourceViewResolver”>
<property name=”prefix”>
<value>/WEB-INF/views/</value>
</property>
<property name=”suffix”>
<value>.jsp</value>
</property>
</bean>
</beans>

Abaixo podemos ver o nosso arquivo dispatcher-servlet.xml criado em nosso projeto.

37

Agora vamos abrir nosso arquivo web.xml e vamos substituir o código que veio  nele pelo código abaixo.

<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns=”http://java.sun.com/xml/ns/javaee”
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd”
id=”WebApp_ID” version=”3.0″>

<display-name>Aplicação Spring MVC</display-name>

<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
</context-param>

<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>

</web-app>

Veja abaixo como o arquivo ficou em nosso projeto.

38

Podemos ver que no projeto ficou com um erro (Cannot change version of project facet Dynamic Web Module to 3.0).

39

Para corrigirmos esse erro vamos clicar com o botão direito sobre o nosso projeto e vamos até Properties, e na tela que abriu vamos em Project Facets e vamos desmar a opção Dynamic Web Module e clicar em Apply.

40

Agora vamos selecionar novamente Dynamic Web Module e vamos mudar a versão para 3.0, depois em Java vamos colocar a versão 1.8 e podemos clicar no botão Apply e depois em OK.

41

Agora vamos abrir novamente o nosso arquivo pom.xml e vamos até a tag build e vamos adicionar o código abaixo, depois vamos dar um Ctrl + S para salvar as nossas alterações.

<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>

Veja a imagem abaixo do nosso arquivo alterado.

42

Vamos clicar com o botão direito sobre o nosso projeto e vamos até Maven -> Update Project…

43

Na tela que foi aberta basta clicar em OK.

44

Quando mudamos a versão no nosso Dynamic Web Project ele criou o diretório WebContent que não vamos usar, pois nesse tutorial vamos usar os diretórios criados pelo Maven, então vamos deletar esse diretório.

45

Agora sobre o src/main/java vamos adicionar um pacote com o nome de br.com.ednilson.cicero.entity.

46

Na tela que foi aberta vamos colocar o valor br.com.ednilson.cicero.entity no campo Name e clicar em OK.

47

Agora sobre o nosso pacote vamos adicionar uma classe com o nome de EventosEntity.

48

Na tela que foi aberta vamos colocar no  campo Name o valor EventosEntity e clicar em OK.

49

Agora vamos abrir a nossa classe EventosEntity e vamos adicionar o código abaixo.



package br.com.ednilson.cicero.entity;

public class EventosEntity {

	private String title;
	private String start;
	private String end;
	private String url;
	
	public EventosEntity(){
		
	}	
	
	public EventosEntity(String title, String start, String end, String url) {
		super();
		this.title = title;
		this.start = start;
		this.end = end;
		this.url = url;
	}

	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getStart() {
		return start;
	}
	public void setStart(String start) {
		this.start = start;
	}
	public String getEnd() {
		return end;
	}
	public void setEnd(String end) {
		this.end = end;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	
}

Abaixo podemos ver nossa classe como ficou.

50

Agora vamos criar um pacote em src/main/java com o nome de br.com.ednilson.cicero.controller e vamos adicionar a classe AgendaController e na nossa classe vamos adicionar o código abaixo.



package br.com.ednilson.cicero.controller;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import br.com.ednilson.cicero.entity.EventosEntity;

@Controller
@RequestMapping("/agenda")
public class AgendaController {

	
	@RequestMapping(value = "/montaAgenda", method = RequestMethod.GET)
	public ModelAndView MontaAgenda() {
		 
		ModelAndView mv = new ModelAndView("AgendaEventos");
		
		return mv;
	}
	
	@RequestMapping(value = "/getEventos.json", method = RequestMethod.GET)	
	public @ResponseBody List<EventosEntity> GetEventos(){

		List<EventosEntity> eventos = new ArrayList();
				
		String mesAtual = String.valueOf(Calendar.getInstance().get(Calendar.MONTH)+ 1);
		
		if(mesAtual.length() <2)
			mesAtual = "0" + mesAtual;
		
		String anoAtual = String.valueOf(Calendar.getInstance().get(Calendar.YEAR));
				
		/*ADICIONANDO OS EVENTOS*/
		eventos.add(new EventosEntity("Estudar Linux",     anoAtual+"-"+mesAtual+"-02T12:00:00",anoAtual+"-"+mesAtual+"-02T13:30:00", null));
		eventos.add(new EventosEntity("Estudar Java", 	   anoAtual+"-"+mesAtual+"-02T14:00:00",anoAtual+"-"+mesAtual+"-02T14:30:00", null));
		eventos.add(new EventosEntity("Estudar C#", 	   anoAtual+"-"+mesAtual+"-02T15:00:00",anoAtual+"-"+mesAtual+"-02T15:30:00", null));
		eventos.add(new EventosEntity("Estudar SOA Suite", anoAtual+"-"+mesAtual+"-02T16:00:00",anoAtual+"-"+mesAtual+"-02T17:30:00", null));
		eventos.add(new EventosEntity("Estudar Jquery",    anoAtual+"-"+mesAtual+"-02T19:00:00",anoAtual+"-"+mesAtual+"-02T20:30:00", null));		
		eventos.add(new EventosEntity("Correr",     	   anoAtual+"-"+mesAtual+"-03T13:00:00",anoAtual+"-"+mesAtual+"-03T13:30:00", null));
		eventos.add(new EventosEntity("Reunião",	       anoAtual+"-"+mesAtual+"-05T12:00:00",anoAtual+"-"+mesAtual+"-05T13:30:00", null));		
		eventos.add(new EventosEntity("Dois dias de evento", anoAtual+"-"+mesAtual+"-07T12:00:00",anoAtual+"-"+mesAtual+"-08T12:00:00", null));
		
		eventos.add(new EventosEntity("Publicar Artigo",   anoAtual+"-"+mesAtual+"-10T12:00:00",anoAtual+"-"+mesAtual+"-10T13:30:00", null));
		eventos.add(new EventosEntity("Reunião",	       anoAtual+"-"+mesAtual+"-10T15:00:00",anoAtual+"-"+mesAtual+"-10T18:30:00", null));		
		
		eventos.add(new EventosEntity("Festa",  		   anoAtual+"-"+mesAtual+"-13T12:00:00",anoAtual+"-"+mesAtual+"-13T13:30:00", null));
		eventos.add(new EventosEntity("Festa 2",	       anoAtual+"-"+mesAtual+"-13T15:00:00",anoAtual+"-"+mesAtual+"-13T18:30:00", null));		
		eventos.add(new EventosEntity("Curso de Inglês",   anoAtual+"-"+mesAtual+"-15",null, null));				
		eventos.add(new EventosEntity("Blog Cícero",       anoAtual+"-"+mesAtual+"-23",null, "http://www.ciceroednilson.com.br"));
				
		return eventos;
		
	}
	
}


Abaixo podemos ver nossa classe com o código que adicionamos.

51

Agora sobre a pasta webapp vamos criar uma pasta com o nome de resources e dentro dessa pasta vamos  criar outras duas pastas, uma com o nome de javascript e outra com o nome de css.

52

Agora vamos acessar a pasta onde fizemos o download do fullCalendar e em fullcalendar-2.4.0\lib vamos copiar o arquivo jquery.min.js e moment.min.js para a pasta javascript do nosso projeto, depois na pasta fullcalendar-2.4.0 também vamos copiar os arquivos fullcalendar.min.jslang-all.js para a pasta javascript.

53

Agora na pasta fullcalendar-2.4.0 vamos copiar  o arquivo fullcalendar.min.css e vamos adicionar na pasta css do nosso projeto.

000055

Agora na nossa pasta WEB-INF vamos criar uma pasta com o nome de views e nessa pasta vamos adicionar um página jsp com o nome de AgendaEventos.jsp

56

Agora na nossa pasta javascript vamos adicionar o arquivo js com o nome de agendaEventos.js, e vamos adicionar o código abaixo, esse código vai montar o nosso calendário e vai buscar as informações no Java atráves da chamada getEventos.json.

 


$(document).ready(function() {
	
	var data = new Date();
	/*PEGA O DIA*/
	var dia  = data.getDate();	
	/*PEGA O MÊS E SOMA MAIS UM PARA CHEGAR NO MÊS ATUAL(JAVASCRIPT O MÊS COMEÇA EM 0(iNDEX DO MÊS))*/
	var mes  = (data.getMonth() + 1);
	/*PEGA O ANO*/
	var ano  = data.getFullYear();
	
	/*MONTA A DATA*/
	var dataAtual = ano +'-'+mes+'-'+dia;
	
	$('#div-agenda-eventos').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		defaultDate: dataAtual,		
		editable: true,
		eventLimit: true,
		lang:'pt-br',
		buttonText: {
		    today: 'Hoje',
		    month: 'Mês',
		    week: 'Semana',
		    day: 'Dia'
		},
		events: {
			url: 'getEventos.json'
		}
	});
	
});

Veja como ficou o nosso arquivo.

57

Agora vamos voltar a nossa página AgendaEventos.jsp e vamos adicionar o código abaixo.

<%@ page language=”java” contentType=”text/html; charset=utf-8″ pageEncoding=”utf-8″%>
<html>

<head>

<style>

body {
margin: 40px 10px;
padding: 0;
font-family: “Lucida Grande”,Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

#div-agenda-eventos {
max-width: 900px;
margin: 0 auto;
}

</style>

<link href=”../resources/css/fullcalendar.min.css” rel=”stylesheet” />
<script src=”../resources/javascript/jquery.min.js”></script>
<script src=”../resources/javascript/moment.min.js”></script>
<script src=”../resources/javascript/fullcalendar.min.js”></script>
<script src=”../resources/javascript/lang-all.js”></script>
<script src=”../resources/javascript/agendaEventos.js”></script>

</head>
<body>
<h2>www.ciceroednilson.com.br</h2>

<div id=’div-agenda-eventos’></div>
</body>
</html>

Abaixo a imagem de como ficou nossa página AgendaEventos.jsp.

58

Agora vamos acessar nossa página index.jsp e vamos adicionar o código abaixo.

<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Agenda</title>
</head>
<body>

<center>
<h2>www.ciceroednilson.com.br</h2>
<h3>
<a href=”agenda/montaAgenda”>Visualizar Agenda de eventos</a>
</h3>
</center>
</body>
</html>

Veja como ficou o código da nossa página index.jsp.

59

Agora vamos clicar com o botão direito sobre o nosso projeto e vamos até Run As -> Run on Server.

60

Na tela que foi aberta basta clicar em Finish, lembrando que você já deve ter o Tomcat configurado no seu Eclipse.

61

Agora vamos abrir o browser e acessar a nossa aplicação através da url http://localhost:8080/MinhaAgenda/ e vamos ver a página abaixo, vamos clicar no link Visualizar Agenda de eventos.

64

Depois que clicarmos no link vamos ser direcionado para a nossa agenda com a visão do Mês, podemos ver que no dia dois existe um “mais +2″, isso é por que tem mais eventos que não da para mostrar na agenda, se você clicar nesse link ai ele mostra todos eventos em uma popup.

65

Vamos clicar no botão semana para ver os eventos de uma determinada Semana.

66

Agora vamos ver a visão de um determinado dia.

67

 

É isso ai amigos, nesse tutorial aprendemos a criar uma agenda de eventos com Spring MVC e o plugin Jquery fullCalendar, você pode pegar o projeto completo aqui, até a próxima.

 

 

Comentários

Name of author

Name: ciceroednilson@gmail.com

3 thoughts on “Java – Criando uma agenda de eventos com Spring MVC e Jquery fullCalendar.

  • Olá,
    Em primeiro lugar muito obrigado para este exemplo interessante.
    Eu tenho um problema ao testar este exemplo, uma vez que eu clicar em visualize eu recebo este erro: Erro 404, O recurso solicitado não está disponível.
    Eu estou usando Spring MVC com annotations.
    Eu não entendo português, estou usando ferramentas de tradução.

    Reply
    • ciceroednilson@gmail.com Post author

      Muito obrigado por visitar o blog.

      Erro 404 diz que não foi localizado o recurso, você teria como postar a parte do código onde você clica e a parte da classe onde é feito a request.

      Pode me enviar por email se quiser.

      Abraços.

      Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×