Nesse artigo, criaremos uma aplicação web simples que mostrará um número aleatório com a hora atual. que será atualizado a cada 3 segundos.
Vamos começar:
Passo 1: Vamos criar um projeto que servirá de base para nossas alterações (acréscimo das chamadas AJAX). O texto desse passo tem como base o artigo: http://crunchify.com/hello-world-example-spring-mvc-3-2-1/.
Você possui alguma das questões a seguir?
- Desenvolvendo uma aplicação Spring Framework MVC passo a passo.
- Tutorial de Spring MVC do zero.
- Tutorial rápido do Spring MVC.
- Tutorial do Spring MVC Framework.
- First Spring MVC application tutorial
Então está no lugar certo. A seguir demonstramos como usar o framework Spring MVC3 para criar aplicações web:
Nesse artigo, detalharemos da forma mais simples como começar a desenvolver aplicações com o Spring MVC3. Mas primeiro, precisaremos das ferramentas abaixo:
- Tomcat 7.0.37 (Baixe nesse link)
- Eclipse IDE for Java EE Developers 4.2.1 (Baixe nesse link)
- Spring 3.2.1 (Baixe nesse link)
- JDK 1.7 (Baixe nesse link)
Os JARs do Spring MVC que iremos precisar para esse projeto são os seguintes:
- spring-aspects-3.2.1.RELEASE.jar
- spring-beans-3.2.1.RELEASE.jar
- spring-context-3.2.1.RELEASE.jar
- spring-core-3.2.1.RELEASE.jar
- spring-expression-3.2.1.RELEASE.jar
- spring-web-3.2.1.RELEASE.jar
- spring-webmvc-3.2.1.RELEASE.jar
O objetivo principal desse artigo é criar uma aplicação simples usando o Spring MVC em sua última versão (3.2.1). Abaixo segue como a aplicação deve parecer após todos os passos:
Vamos começar
1) Abra o Eclipse
2) Crie um Dynamic Web Project
3) Defina Target Runtime como Apache Tomcat
4) Adicione os JARs mencionados acima no diretório /WEB-INF/lib
5) Adicione os arquivos JARs nas dependências do projeto
6) Crie um arquivo de configuração para o Spring em /WEB-INF/crunchify-servlet.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="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"> <context:component-scan base-package="com.crunchify.controller" /> <bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean> </beans>
No arquivo de configuração acima, definimos a tag <context:component-scan> . Isso permitirá que o Spring carregue todos os componentes do pacote com.crunchify.controller e todos os seus pacotes filhos. Isso carregará nossa classe CrunchifyHelloWorld. Também definimos um bean viewResolver
. Esse bean determinará o view e adiciona o prefixo /WEB-INF/jsp/ e o sufixo .jsp ao view em ModelAndView. Note que em nossa classe CrunchifyHelloWorld, temos um objeto ModelAndView sendo retornado como o nome de view welcome. Isso será determinará o caminho /WEB-INF/jsp/welcome.jsp.
7) Mapeie o Spring MVC no arquivo WEB.xml.
<?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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>CrunchifySpringMVC</display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>crunchify</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>crunchify</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping> </web-app>
O código acima para o web.xml mapeará o DispatcherServlet com um padrão de URL *.html. Note também que definimos index.jsp como página de boas vindas.
Uma outra coisa a ser observada aqui é o nome do servlet na tag <servlet-name> do arquivo web.xml. Uma vez que o DispatcherServlet é inicializado, ele irá procurar por um arquivo como o nome [servlet-name]-servlet.xml no diretório WEB-INF da aplicação web. Nesse exemplo, o framework irá procurar por um arquivo chamado crunchify-servlet.xml
.
8) Crie a classe Controller.
- Pacote: com.crunchify.controller
- Nome do arquivo: CrunchifyHelloWorld.java
package com.crunchify.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; @Controller public class CrunchifyHelloWorld { @RequestMapping("/welcome") public ModelAndView helloWorld() { String message = "<br><div align='center'>" + "<h1>Hello World, Spring 3.2.1 Example by Crunchify.com<h1> <br>"; message += "<a href='http://crunchify.com/category/java-web-development-tutorial/'>More Examples</a>"; return new ModelAndView("welcome", "message", message); } }
Note que definimos anotações @Controller
and@RequestMapping("/welcome")
para a classe CrunchifyHelloWorld
. Quando o Spring pesquisa seu pacote, ele reconhece esse bean como sendo o Controller para processamento de requisições. A anotação @RequestMapping
diz ao Spring que esse Controller deve processar todas as requisições que sejam iniciadas com /welcome na URL. Isso inclui /welcome/*
e /welcome.html
.
O método helloWorld() retorna um objeto ModelAndView
. O objeto ModelAndView tenta determinar um view chamado “welcome” e o modelo de dados está sendo retornado para o navegador, de forma que podemos acessa-los de dentro do JSP. O nome do view será determinado como /WEB-INF/jsp/welcome.jsp .
O objeto ModelAndView tambpem contém uma mensagem com a chave “message” e o valor Detailed. Este é a informação que estamos passando para nosso view. Normalmente será um objeto na forma de um bean Java que conterá os dados a serem exibidos. No nosso exemplo, apenas passamos uma String.
9) Crie os views: /WebContent/index.jsp e /WebContent/jsp/welcome.jsp
index.jsp
<html> <head> <title>Spring 3.2.1 MVC Series: Index - Crunchify.com</title> </head> <body> <br> <div align='center'> <h2> Your 1st Spring MCV Example <br> <br> <a href="welcome.html">Click here to See Welcome Message...</a> </h2> <br> by <a href="http://crunchify.com">Crunchify.com</a> </div> </body> </html>
welcome.jsp
<html> <head> <title>Spring 3.2.1 MVC Example: Hello World - Crunchify.com</title> </head> <body> ${message} </body> </html>
Após tudo isso, seu projeto deve parecer com o seguinte:
10) Carregue o projeto no Apache Tomcat.
11) Visite: http://localhost:8080/CrunchifySpringMVC3.2.1/ para testar o projeto.
Link direto para o código fonte desse projeto -> CrunchifySpringMVC3.2.1
Passo 2: Vamos criar 2 arquivos: ajax.jsp e CrunchifySpringAjaxJQuery.java
package com.crunchify.controller; import java.util.Date; 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 java.util.Random; /** * @author Crunchify.com * */ @Controller public class CrunchifySpringAjaxJQuery { @RequestMapping("/ajax") public ModelAndView helloAjaxTest() { return new ModelAndView("ajax", "message", "Crunchify Spring MVC with Ajax and JQuery Demo.."); } @RequestMapping(value = "/ajaxtest", method = RequestMethod.GET) public @ResponseBody String getTime() { Random rand = new Random(); float r = rand.nextFloat() * 100; String result = "<br>Next Random # is <b>" + r + "</b>. Generated on <b>" + new Date().toString() + "</b>"; System.out.println("Debug Message from CrunchifySpringAjaxJQuery Controller.." + new Date().toString()); return result; } }
<html> <head> <TITLE>Crunchify - Spring MVC Example with AJAX call</TITLE> <style type="text/css"> body { background-image: url('http://cdn3.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png'); } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> function crunchifyAjax() { $.ajax({ url : 'ajaxtest.html', success : function(data) { $('#result').html(data); } }); } </script> <script type="text/javascript"> var intervalId = 0; intervalId = setInterval(crunchifyAjax, 3000); </script> </head> <body> <div align="center"> <br> <br> ${message} <br> <br> <div id="result"></div> <br> <p> by <a href="http://crunchify.com">Crunchify.com</a> </p> </div> </body> </html>
Passo 3: Abra o navegador e acesse essa URL:
http://localhost:8080/CrunchifySpringMVC3.2.1/ajax.html
Passo 4: Veja o resultado.
Passo 5: Vamos fazer um pouco de depuração. Você deve ser capaz de visualizar as sentenças de depuração a seguir no Console de Eclipse para verificar que sua chamada AJAX está funcionando.
E está tudo pronto. Se tiver alguma pergunta, use o espaço para comentários a seguir.
Traduzido de crunchify.com