Crear proyecto Maven
Hay varias formas de crear el proyecto pero lo mas recomendable es utilizar el asistente en linea de Spring.
Vamos a la ruta https://start.spring.io/ Escribimos el Group y el Artifact. En la sección de Search for dependencies agregamos las dependencias Web, Thymeleaf y DevTools. Clic en Generate Project y guardar el archivo en una ruta local.
Descomprimir el archivo y copiarlo al workspace de Eclipse. Abrir eclipse, Clic derecho en el Explorador de Proyectos.
Import -> Import… -> Maven -> Existing Maven Projects
Clic en el botón Next.
Seleccionamos el proyecto kanban con el botón Browse… Clic en Finish.
Se muestra el proyecto en el Explorador de Proyectos.
Archivo pom.xml
Se agregan automáticamente las dependencias:
| spring-boot-starter-web | Indica que es una aplicación Web. Agrega la funcionalidad de @Controller, @RequestMapping, etc |
| spring-boot-starter-thymeleaf | Plantillas de servidor para Web. |
| spring-boot-devtools | Elimina la necesidad de reiniciar cada que se hace un cambio. Se recomienda solo para ambientes de desarrollo. |
<?xml version="1.0" encoding="UTF-8"?> <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/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.proyecto</groupId> <artifactId>kanban</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>kanban</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.8.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
Clase principal
Es necesario una clase main como punto de inicio de la aplicación. Esta es com.proyecto.KanbanApplication. La anotación @SpringBootApplication indica en donde inicia la aplicación.
package com.proyecto;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class KanbanApplication {
public static void main(String[] args) {
SpringApplication.run(KanbanApplication.class, args);
}
}
Controladores
Para manejar peticiones Web es necesario crear controladores, los cuales manejan la solicitud a partir de una ruta de acceso. Creamos la clase ControllerIndex en el paquete com.proyecto.controller. Agregamos las anotaciones @Controller y @RequestMapping.
| @Controller | Indica que es un controlador |
| @RequestMapping | Indica que Controller o método de un Controller tiene que direccionar cada llamada del cliente |
package com.proyecto.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class ControllerIndex {
@RequestMapping(value = "/",method = RequestMethod.GET)
public String index(){
return "kanban";
}
}
Copiar archivos del proyecto anterior
Tomamos los archivos del proyecto anterior y los copiamos al proyecto de SpringBoot. Copiamos las carpetas css y js en la ruta scr/main/resource/static y el archivo kanban.html en scr/main/resource/templates.
Configurar application.properties
En este archivo application.properties que se encuentra en src/main/resource se pueden configurar muchos parámetros. Puede consultarlos en http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html. Solo vamos a agregar,
| server.contextPath=/kanba | Contexto de la aplicación |
| server.port=8090 | Puerto de la aplicación |
# Server server.contextPath=/kanban server.port=8090
Ejecutar aplicación
Para ejecutar la aplicación abrimos la clase com.proyecto.KanbanApplication. Clic con el botón derecho.
Run As -> Java Application.
Se inicia la aplicación.
El siguiente mensaje indica que la aplicación se levanto correctamente, además muestra el puerto.
Abrimos un explorador de Internet y tecleamos http://localhost:8090/kanban.
Json desde el Servidor
Creamos el Controller ControllerColumn. Este mostrara todas las columnas en formato Json. Los datos de retorno están hardcore, posteriormente veremos como extraerlos de una Base de Datos.
package com.proyecto.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class ControllerColumn {
@RequestMapping("/column")
@ResponseBody
public String index(){
return "{\"columns\":[{\"titulo\":\"Backlog\",\"article\":[{\"nombre\":\"Nombre\",\"titulo\":\"Titulo\",\"descripcion\":\"Descripcion\"},{\"nombre\":\"Sistema Kanban\",\"titulo\":\"FrontEnd\",\"descripcion\":\"Construir un sistema Kanbad de forma dinamica con json, javascript y jquery\"}]},{\"titulo\":\"Proceso\",\"article\":[]},{\"titulo\":\"Terminado\",\"article\":[]}]}";
}
}
Si tecleamos en el explorador http://localhost:8090/kanban/column se muestra los datos en json.
/ 20170412164443
// http://localhost:8090/kanban/column
{
"columns": [
{
"titulo": "Backlog",
"article": [
{
"nombre": "Nombre",
"titulo": "Titulo",
"descripcion": "Descripcion"
},
{
"nombre": "Sistema Kanban",
"titulo": "FrontEnd",
"descripcion": "Construir un sistema Kanbad de forma dinamica con json, javascript y jquery"
}
]
},
{
"titulo": "Proceso",
"article": [
]
},
{
"titulo": "Terminado",
"article": [
]
}
]
}
Creamos el Controller ControllerKanbanWeb. Este llama a kanbanWeb.xml con el mapeo /Web.
package com.proyecto.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class ControllerKanbanWeb {
@RequestMapping(value = "/Web",method = RequestMethod.GET)
public String index(){
return "kanbanWeb";
}
}
Duplicamos el archivo kanban.html en la ruta src/main/resource/ y lo nombramos kanbanWeb.html
Abrimos el archivo kanbanWeb.html y cambiamos la ruta del archivo kanban.js a kanbanWeb.js.
<!-- kanban --> <script type="text/javascript" src="js/kanbanWeb.js" charset="UTF-8"></script>
Duplicamos el archivo kanban.js en la ruta src/main/resource/static y lo nombramos kanbanWeb.js
Abrimos el archivo kanbanWeb.js y realizamos los siguientes cambios.
- Eliminamos las funciones Column y Article, Así como la creación de los arreglos column y articles.
- Crear la función buildsKanban que construye las columnas y los articulos de kanban.
function buildsKanban(data){ var columns = data.columns; var varArticle = null; for(var i=0;i<columns.length;i++){ varColumna ="<div class=\"panel panel-primary kanban-col\">"; varColumna+=" <div class=\"panel-heading\">"+columns[i].titulo+" <i class=\"fa fa-2x fa-plus-circle pull-right\"></i></div>"; varColumna+=" <div class=\"panel-body\">"; varColumna+=" <div id=\""+columns[i].titulo+"\" class=\"kanban-centered\">"; varColumna+=" </div>"; varColumna+=" </div>"; varColumna+=" <div class=\"panel-footer\">"; varColumna+=" <a href=\"#\">Add a card...</a>"; varColumna+=" </div>"; varColumna+="</div>"; $("#sortableKanbanBoards").append(varColumna); varArticle = ""; for(var j=0;j<columns[i].article.length;j++){ varArticle += "<article class=\"kanban-entry grab\" id=\"item"+String(i)+String(j)+"\" draggable=\"true\">"; varArticle += " <div class=\"kanban-entry-inner\">"; varArticle += " <div class=\"kanban-label\">"; varArticle += " <h2><a href=\"#\">"+columns[i].article[j].nombre+"</a> <span>"+columns[i].article[j].titulo+"</span></h2>"; varArticle += " <p>"+columns[i].article[j].descripcion+"</p>"; varArticle += " </div>"; varArticle += "</div>"; varArticle += "</article>"; } $("#"+columns[i].titulo).append(varArticle); } } - Hacer una llamada ajax para consumir el controller column y llame a la funcion buildsKanban.
$.ajax({ async: false, url: "column", type: 'GET', dataType: 'json', contentType:'application/json', mimeType: 'application/json', success: function(data, textStatus, jqXHR) { buildsKanban(data); },error: function(jqXHR, textStatus, errorThrown){ } });
Abrimos un explorador de Internet y tecleamos http://localhost:8090/kanban/Web. Nos muestra la aplicación Kanban pero consumiendo los datos desde un servidor.
Se puede descargar el proyecto completo de https://github.com/arielolivagh/kanbanWeb