Kanban

En el link http://bootsnipp.com/snippets/0yDZy podemos ver el proyecto kanban-Board creada por bbilginn.

Esta desarrollado con html, css, jquery y booststrap. Vamos a tomar su código y modificarlo para hacerlo mas dinámico. Inicialmente crearemos las columnas y artículos (como los llama el autor) con Json. Json es creado con arreglos de javascript.

Identificar código HTML que se generara por javascript

Revisando el código HTML del proyecto podemos identificar que utiliza 2 objetos; columnas y artículos.

Y podemos construir estos objetos pasándole los siguientes datos.

Para Columna:

  1. Titulo
  2. id
  3. Artículos que contiene

Para Articulo:

  1. Nombre
  2. Titulo
  3. Descripción

Construir columnas y artículos con JavaScript

Podemos generar cada objeto con los siguientes códigos:

Para Columna:

Donde,

  • titulo = Nombre del titulo de la columna. Este mismo valor se puede usar como id ya que cada columna debe ser única.

Para Articulo:

Donde,

  • id = id del articulo
  • nombre =  Nombre del articulo
  •  titulo = Titulo del articulo
  • descripcion = Descripción del articulo

Puede haber muchas columnas y cada columna puede tener muchos artículos, por tanto, debemos almacenar los datos en arreglos y recorrerlos uno a uno para asignarlo a un div principal si es columna o a una columna si es articulo. Un arreglo de arreglos equivaldría a almacenar los datos en Json.

El código completo para construir columnas y artículos es:

Notas,

  • sortableKanbanBoards es el id del div principal
  • Cada articulo se puede asignar a su respectiva columna porque la columna ya fue creada.

Crear Json con arreglos de JavaScript

Inicialmente creamos las funciones que generan Column y Article

Creamos objetos Article y los asignamos a un arreglo

Creamos los objetos column con el arreglo de articulos. El objeto column se asigna a un arreglo de columnas.

Así obtenemos columns que es un arreglo de columnas y cada columna contiene sus articulos.

El equivalente el Json es:

Cambios al proyecto original

HTML

  • Borrar todos las columna y articulos, sólo dejar el div sortableKanbanBoards.
  • Dejar el div processing-modal ya que se usa cuando se arrastra los articulos de una columna a otra.

JS

  • Cambiar $(function () { por $(document).ready(function() { para asegurarnos que se ejecute hasta que la pagina este completamente cargada.
  • Poner funciones que generan Column y Article
  • Crear objetos Column y Article
  • Código completo para construir columnas y artículos

Se puede descargar el proyecto completo de https://github.com/arielolivagh/kanbanDinamico

En la entrada siguiente mostraremos el proceso para clonar un proyecto de GitHub en Eclipse.

 

Categories: Java, Programacion, SpringBoot

Leave a Reply


API REST 5. Hypermedia

Contenido1 Introducción2 Programar hypermedia2.1 Crear Entity2.1.1 PersonaHateoas2.1.2 GrupoHateoas2.1.3 PaisHateoas2.2 Crear […]

API REST 4. Calidad al implementar aplicacion Web

Contenido1 Introducción1.1 Nivel 1. Uso correcto de URIs1.2 Nivel 2. […]

API REST 3. Publicar y consumir

Contenido1 Descripción2 Publicar y Consumir2.1 Usando CRUD2.1.1 Crear Persona2.1.2 Consultar […]

API REST 2. Conectarse a Base de Datos MySQL

Contenido1 Descripción2 Crear la Base de Datos3 Agregar dependencias4 Crear […]

API REST 1. Spring

Contenido1 Descripción2 Pasos2.1 Instalar eclipse2.2 Instalar librerías de Spring2.3 Importar […]