Documentos de Académico
Documentos de Profesional
Documentos de Cultura
JEE en espaol
Las guas y tutoriales estn desarrollados de manera muy prctica. Se dar
una breve descripcin del framework a usar, instalacin y configuracin de
los componentes y herramientas para desarrollar las aplicaciones. Al final lo
importante es que el lector aprenda y posteriormente sea capaz de
desarrollar aplicaciones utilizando los frameworks ya sea en un entorno
laboral o para asignaciones universitarias o de instituto.
lunes, 2 de diciembre de 2013
Primero que todo creamos un proyecto WEB en el eclipse: File -> New -> Dynamic
Web Project
y el siguiente nombre al proyecto ProyectoSpringTutorial y a continuacin Finish para
crear el proyecto tal como podemos verlo en la imagen:
Figura 1.2
1. com.victor.elliott.humala.controlador
2. com.victor.elliott.humala.formulario
3. com.victor.elliott.humala.servicios
Luego creamos las siguientes clases en los paquetes respectivos
1. com.victor.elliott.humala.controlador -> UsuarioController.java
2. com.victor.elliott.humala.controlador -> ComponenteController.java
3. com.victor.elliott.humala.formulario -> UsuarioForm.java
4. com.victor.elliott.humala.formulario -> ComponenteForm.java
5. com.victor.elliott.humala.servicios -> ComponenteService.java
6. com.victor.elliott.humala.servicios -> ComponenteServiceImpl
Una vez creadas las clases creamos las paginas y xml's respectivos.
1. Creamos primero que todo la carpeta jsp
en ProyectoSpringTutorial/WebContent/WEB-INF
2. Creamos index.jsp en ProyectoSpringTutorial/WebContent
3. Creamos login.jsp en ProyectoSpringTutorial/WebContent/WEB-INF/jsp
4. Creamos agregarComponentes.jsp
en ProyectoSpringTutorial/WebContent/WEB-INF/jsp
5. Creamos mostrarComponentes.jsp
en ProyectoSpringTutorial/WebContent/WEB-INF/jsp
6. Creamos web.xml en ProyectoSpringTutorial/WebContent/WEB-INF
7. Creamos proyectoSpring-servlet.xml
en ProyectoSpringTutorial/WebContent/WEB-INF
Una vez creadas nuestras clases, paginas y componentes que usaremos la estructura de
proyecto debe de quedar de la siguiente manera:
Figura 1.3
Ahora que ya tenemos casi todos los elementos necesarios para empezar a desarrollar
nuestro proyecto haremos la configuracin con Spring para empezar a usar el
framework sin errores y para esto primero bajemos las libreras necesarias que os la
podis descargar desde el siguiente link:
1. Librerias Spring 3.1.0.RELEASE
Una vez descargado lo descomprimimos y lo aadiremos a nuestro proyecto de la
siguiente manera:
Click derecho en ProyectoSpringTutorial -> Properties -> Java Build Path -> Libraries
-> Add Library -> User Library -> Next -> User Libraries -> New y a continuacin
Por ultimo tendremos que hacer que las libreras tengan efecto inmediato en todas las
clases de nuestro proyecto y que no haya problemas de compilacin ni de ejecucin:
Click derecho en ProyectoSpringTutorial -> Deployment Assembly -> Add
seleccionamos la librera Spring y OK y quedar tal como se muestra en la imagen.
Figura 1.5
1 package com.victor.elliott.humala.controlador;
2
3 import com.victor.elliott.humala.formulario.UsuarioForm;
4 import org.springframework.stereotype.Controller;
5 import org.springframework.web.bind.annotation.ModelAttribute;
6 import org.springframework.web.bind.annotation.RequestMapping;
7 import org.springframework.web.bind.annotation.RequestMethod;
8 import org.springframework.web.servlet.ModelAndView;
9
@Controller
1 public class UsuarioController {
0
11 //Con esto indicamos que nuestro Usuario y clave seran Usuario y Clave respectivament
1
private static UsuarioForm usuarioForm = new UsuarioForm("Victor","Elliott");
2
@RequestMapping(value = "/inicializarLogin.html", method = RequestMethod.GET)
1
public ModelAndView inicializarUsuario() {
3
1
System.out.println("Si hemos llegado aqui quiere decir que la pagina index.jsp ha
4 inicializarUsuario
View");
1
5
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
Ahora describo rpidamente el controlador:
1. Todos los import son importantes puesto que son las libreras de Spring que
necesitamos para desarrollarlo.
2. @Controller es esencial para indicar que la clase UsuarioController es un
controlador.
3. Definimos el atributo UsuarioForm usuarioForm para que guarde el usuario y
clave a validar en el login.
4. Definimos el @RequestMapping para indicar que ser el mtodo que se
ejecutar cuando se invoque desde una pagina con el nombre de
inicializarLogin.html. Para este caso la pagina que lo invoca es el index.jsp.
5. Inmediatamente se define el method = RequestMethod.GET ya que para este
caso no estaremos pasando ninguna informacin.
6. Una vez definido el tipo de mtodo definimos el mtodo en si donde solo
devolveremos el objeto UsuarioForm usuarioForm vaco para que lo tome en
cuenta el login.jsp definiendolo de la siguiente manera: return new
ModelAndView("login" , "usuarioForm", new UsuarioForm())
7. Luego definimos otro @RequestMapping que ser invocado desde
verificarLogin.html donde el method sera del tipo method =
RequestMethod.POST ya que en este caso si necesitaremos informacin de la
pagina que la invoca login.jsp.
8. Realizamos las validaciones respectivas donde la verificacin principal es el
else if ya que si el usuario y clave coinciden creamos un objeto del tipo
ModelAndView que me llevar a la pgina agregarComponentes.jsp con el
mensaje correcto y de paso envo la informacin del usuario que se logue
mediante modelo.addObject("usuarioForm", usuarioForm); caso contrario si
la validacin no resulto vuelvo a la pagina login.jsp con su mensaje
respectivo.
Ahora modificamos com.victor.elliott.humala.formulario.UsuarioForm que
bsicamente contendr los atributos nombre clave sus getter y setter respectivos y dos
constructores.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.victor.elliott.humala.formulario;
public class UsuarioForm {
private String nombre;
private String clave;
public UsuarioForm(){
this.nombre = "";
this.clave = "";
}
public UsuarioForm(String nombre, String clave){
this.nombre = nombre;
this.clave = clave;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getClave() {
return clave;
}
public void setClave(String clave) {
this.clave = clave;
}
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Proyecto Spring Tutorial by Victor Elliott Humala</title>
</head>
<body>
<c:if test="${mensaje !='Usuario Correcto'}">
<h4>${mensaje}</h4>
</c:if>
Aqu bsicamente definimos primero que todo el mensaje que se mostrar en caso de
algn error del login aunque inicialmente ese mensaje estar vaco, caso contrario
mostrar el mensaje respectivo. Luego definimos el @RequestMapping
verificarLogin.html al cual invocar nuestro jsp cuando se realice el submit mediante el
login a travs del atributo action. Luego definimos el form donde nuestro objeto sera
usuarioForm de method post ya que enviaremos informacin al servlet y la accin a
realizar con el submit action="${verificarLogin} que definimos en var="verificarLogin"
value="verificarLogin.html". Finalmente insertamos los input necesarios que son el
nombre y la clave, ojo que estos son atributos de la clase UsuarioForm tal como lo
definimos anteriormente.
Modificamos la pgina: ProyectoSpringTutorial\WebContent\WEBINF\jsp\agregarComponentes.jsp con el siguiente cdigo:
?
2
3
4
5
6
7
8
9
10
11
12
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Agregar Componentes</title>
</head>
<body>
<h4>${mensaje} : ${usuarioForm.nombre}</h4>
</body>
</html>
1
2
<?xml version="1.0" encoding="UTF-8"?>
3
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
4
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
5
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/n
6
id="WebApp_ID" version="2.5">
7
<display-name>ProyectoSpringTutorial</display-name>
8
<servlet>
<servlet-name>proyectoSpring</servlet-name>
9
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-c
10
<load-on-startup>1</load-on-startup>
11
</servlet>
12
<servlet-mapping>
<servlet-name>proyectoSpring</servlet-name>
13
<url-pattern>*.html</url-pattern>
14
</servlet-mapping>
15
</web-app>
16
17
Donde hay que percatarse que el nombre del servlet proyectoSpring tendr que ser
definido posteriormente como proyectoSpring-servlet.xml (agregandolo su sufijo
-servlet.xml) para que est correctamente configurado.
Ahora modificamos ProyectoSpringTutorial\WebContent\WEB-INF\proyectoSpringservlet.xml de la siguiente manera:
?
1
2
3
<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:mvc="http://www.springframework.org/schema/mvc"
4
5
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.spri
6
http://www.springframework.org/schema/context http://www.springframework.or
7
http://www.springframework.org/schema/mvc http://www.springframework.org/sc
8
<context:annotation-config />
9
<context:component-scan base-package="com.victor.elliott.humala.controlador" />
10
11
<bean id="jspViewResolver"
12
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
13
<property name="viewClass"
14
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
15
<property name="suffix" value=".jsp" />
16
</bean>
17
</beans>
18
19
Donde definimos el paquete donde se buscarn los controladores: basepackage="com.victor.elliott.humala.controlador , el tipo de Resolver
InternalResourceViewResolver y ponemos el prefijo y sufijo de nuestras paginas a
desplegar.
Ahora ya estamos listos para ejecutar nuestro proyecto en el servidor Tomcat, antes de
ello verificar que no haya ningn error de compilacin y una vez ejecutado en el
servidor ningn error de ejecucin. Si todo esta bien podrn visualizar las siguientes
pginas:
Figura 1.6
Figura 1.7
1
2
3
4
5
6
7
8
9
10
package com.victor.elliott.humala.servicios;
import com.victor.elliott.humala.formulario.ComponenteForm;
import java.util.List;
public interface ComponenteService {
public void addComponente(ComponenteForm componente);
public List<componenteform> getComponente();
}
</componenteform>
package com.victor.elliott.humala.servicios;
2
3
4
import java.util.ArrayList;
import java.util.List;
5
import org.springframework.stereotype.Service;
6
import com.victor.elliott.humala.formulario.ComponenteForm;
7
8
@Service
9
public class ComponenteServiceImpl implements ComponenteService {
private static List<ComponenteForm> listaComponentes=new ArrayList<ComponenteForm>(
10
11
public void addComponente(ComponenteForm componente) {
12
listaComponentes.add(componente);
13
}
14
15
public List<ComponenteForm> getComponente() {
16
return listaComponentes;
}
17
}
18
19
De esta forma implementamos los mtodos de la interface primero declarando un
atributo esttico List<ComponenteForm> listaComponentes que me guardar todos
los datos que ingrese en mi lista y no se perder y luego con los metodos
addComponente agrego un componente a la lista y con getComponente recupero toda
la lista esttica.
En consiguiente modificamos la clase:
ProyectoSpringTutorial\src\com\victor\elliott\humala\formulario\ComponenteForm.
java tal como sigue::
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.victor.elliott.humala.formulario;
public class ComponenteForm {
private String nombre;
private String version;
private String tipo;
private String extension;
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
public String getVersion() {
return version;
}
public void setVersion(String version) {
this.version = version;
}
public String getTipo() {
return tipo;
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
}
public void setTipo(String tipo) {
this.tipo = tipo;
}
public String getExtension() {
return extension;
}
public void setExtension(String extension) {
this.extension = extension;
}
}
Clase que contiene todos los datos que deseo guardar de un componente. Finalmente
modifico los controladores:
/ProyectoSpringTutorial/src/com/victor/elliott/humala/controlador/UsuarioControll
er.java
?
1 package com.victor.elliott.humala.controlador;
2
com.victor.elliott.humala.formulario.UsuarioForm;
3 import
import com.victor.elliott.humala.formulario.ComponenteForm;
4 import org.springframework.stereotype.Controller;
5 import org.springframework.web.bind.annotation.ModelAttribute;
6 import org.springframework.web.bind.annotation.RequestMapping;
7 import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
8
9 @Controller
1 public class UsuarioController {
0
11 //Con esto indicamos que nuestro Usuario y clave seran Usuario y Clave respectivament
private static UsuarioForm usuarioForm = new UsuarioForm("Victor","Elliott");
1
//private static ComponenteForm componenteForm = new ComponenteForm();
2
1
@RequestMapping(value = "/inicializarLogin.html", method = RequestMethod.GET)
3
public ModelAndView inicializarUsuario() {
1
4
System.out.println("Si hemos llegado aqui quiere decir que la pagina index.jsp ha
1 inicializarUsuario View");
5
return new ModelAndView("login" , "usuarioForm", new UsuarioForm());
1
}
6
1
@RequestMapping(value = "/verificarLogin.html", method = RequestMethod.POST)
7
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
Donde a diferencia del inicial agrego componenteForm al jsp haciendo
modelo.addObject("componenteForm", new ComponenteForm()); para que me cargue
el formulario vaco.
Luego modificamos:
\ProyectoSpringTutorial\src\com\victor\elliott\humala\controlador\ComponenteCon
troller.java de la siguiente forma:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.victor.elliott.humala.controlador;
import
import
import
import
import
org.springframework.stereotype.Controller;
org.springframework.web.bind.annotation.ModelAttribute;
org.springframework.web.bind.annotation.RequestMapping;
org.springframework.web.bind.annotation.RequestMethod;
org.springframework.web.servlet.ModelAndView;
import
import
import
import
com.victor.elliott.humala.formulario.ComponenteForm;
com.victor.elliott.humala.formulario.UsuarioForm;
com.victor.elliott.humala.servicios.ComponenteService;
com.victor.elliott.humala.servicios.ComponenteServiceImpl;
@Controller
public class ComponenteController {
private ComponenteService componenteService= new ComponenteServiceImpl();
24
25
26
@RequestMapping(value="/volverComponente.html", method = RequestMethod.GET)
public ModelAndView volverComponente() {
27
System.out.println("Volvemos a agregar componente");
28
System.out.println("Se coloco al usuario y clave correctamente y va a la pagina d
29
ModelAndView modelo= new ModelAndView("agregarComponentes" , "mensaje", "Usuario C
30
modelo.addObject("usuarioForm", new UsuarioForm("Victor","Elliott"));
31
modelo.addObject("componenteForm", new ComponenteForm());
return modelo;
32
}
33
34
}
35
36
37
la cual crea dos metodos POST y GET, tal como lo explicamos con el UsuarioController
guardarComponente que es de tipo POST obtendra el formulario de un componente
ComponenteForm enviado por agregarComponente.jsp y agregar el componente a la
lista esttica a traves del Service y nos mostrar la lista total de componentes
agregados a travs de mostrarComponentes.jsp. Por otro lado el mtodo
volverComponente que es de tipo GET ser invocado por mostrarComponentes.jsp
para poder volver a agregarComponentes.jsp, todos ellos a traves del RequestMapping
respectivo. Finalmente modificamos los jsp:
ProyectoSpringTutorial\WebContent\WEB-INF\jsp\agregarComponentes.jsp
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h4>Agregar Componente</h4>
<c:url var="agregarComponentes" value="agregarComponentes.html"/>
<form:form id="agregar" modelAttribute="componenteForm" method="post" action="${agre
<table width="400px" height="150px">
<tr>
<td><form:label path="nombre">Nombre</form:label></td>
<td><form:input path="nombre"/></td>
</tr>
<tr>
<td><form:label path="version">Versin</form:label></td>
<td><form:input path="version"/></td>
</tr>
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<tr>
<td><form:label path="tipo">Tipo</form:label></td>
<td><form:input path="tipo"/></td>
</tr>
<tr>
<td><form:label path="extension">Extensin</form:label></td>
<td><form:input path="extension"/></td>
</tr>
<tr><td></td><td>
<input type="submit" value="Agregar" />
</td></tr>
</table>
</form:form>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Que rellena una tabla con todos los componentes que hemos agregado a partir de la
lista listaComponentes que se lo hemos pasado en el mtodo guardarComponente del
ComponenteController. Por ltimo hacemos una referencia a volverComponente.html
que acceder a ComponenteController a traves de un mtodo GET para poder volver a
agregar mas componentes. Si has compilado todo bien y no hay problemas de
ejecucin te deberan salir la siguiente pgina despus del Login y despus de haber
agregado varios componentes:
Figura 1.8
Figura 1.9