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.

1. Eliminamos las funciones Column y Article, Así como la creación de los arreglos column y articles.
2. 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);
   	}
   }

3. 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