SpringBoot 8. Kanban con JPA

Clase DatabaseConfig.java

Es necesario agregar las clase DatabaseConfig.java en el paquete com.proyecto.config para el acceso a la Base de Datos. Su contenido es:

package com.proyecto.config;

import java.util.Properties;

import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.env.Environment;
import org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.jpa.JpaTransactionManager;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter;
import org.springframework.transaction.annotation.EnableTransactionManagement;

/**
 * Contains database configurations.
 */
@Configuration
@EnableTransactionManagement
public class DatabaseConfig {

  // ------------------------
  // PUBLIC METHODS
  // ------------------------

  /**
   * DataSource definition for database connection. Settings are read from
   * the application.properties file (using the env object).
   */
  @Bean
  public DataSource dataSource() {
    DriverManagerDataSource dataSource = new DriverManagerDataSource();
    dataSource.setDriverClassName(env.getProperty("db.driver"));
    dataSource.setUrl(env.getProperty("db.url"));
    dataSource.setUsername(env.getProperty("db.username"));
    dataSource.setPassword(env.getProperty("db.password"));
    return dataSource;
  }

  /**
   * Declare the JPA entity manager factory.
   */
  @Bean
  public LocalContainerEntityManagerFactoryBean entityManagerFactory() {
    LocalContainerEntityManagerFactoryBean entityManagerFactory =
        new LocalContainerEntityManagerFactoryBean();
    
    entityManagerFactory.setDataSource(dataSource);
    
    // Classpath scanning of @Component, @Service, etc annotated class
    entityManagerFactory.setPackagesToScan(
        env.getProperty("entitymanager.packagesToScan"));
    
    // Vendor adapter
    HibernateJpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter();
    entityManagerFactory.setJpaVendorAdapter(vendorAdapter);
    
    // Hibernate properties
    Properties additionalProperties = new Properties();
    additionalProperties.put(
        "hibernate.dialect", 
        env.getProperty("hibernate.dialect"));
    additionalProperties.put(
        "hibernate.show_sql", 
        env.getProperty("hibernate.show_sql"));
    additionalProperties.put(
        "hibernate.hbm2ddl.auto", 
        env.getProperty("hibernate.hbm2ddl.auto"));
    entityManagerFactory.setJpaProperties(additionalProperties);
    
    return entityManagerFactory;
  }

  /**
   * Declare the transaction manager.
   */
  @Bean
  public JpaTransactionManager transactionManager() {
    JpaTransactionManager transactionManager = 
        new JpaTransactionManager();
    transactionManager.setEntityManagerFactory(
        entityManagerFactory.getObject());
    return transactionManager;
  }
  
  /**
   * PersistenceExceptionTranslationPostProcessor is a bean post processor
   * which adds an advisor to any bean annotated with Repository so that any
   * platform-specific exceptions are caught and then rethrown as one
   * Spring's unchecked data access exceptions (i.e. a subclass of 
   * DataAccessException).
   */
  @Bean
  public PersistenceExceptionTranslationPostProcessor exceptionTranslation() {
    return new PersistenceExceptionTranslationPostProcessor();
  }


  // ------------------------
  // PRIVATE FIELDS
  // ------------------------
  
  @Autowired
  private Environment env;

  @Autowired
  private DataSource dataSource;

  @Autowired
  private LocalContainerEntityManagerFactoryBean entityManagerFactory;


} // class DatabaseConfig

Agregamos la dependencia del conector mysql en el archivo pom.xml.

    	<dependency>
      		<groupId>mysql</groupId>
      		<artifactId>mysql-connector-java</artifactId>
    	</dependency>

Y agregamos los datos de conexión en application.properties.

# Database
db.driver: com.mysql.jdbc.Driver
db.url: jdbc:mysql://localhost:3306/kanban?zeroDateTimeBehavior=convertToNull
db.username: root
db.password: root

# Hibernate
hibernate.dialect: org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql: true
hibernate.hbm2ddl.auto: update
entitymanager.packagesToScan:com.proyecto

Crear repositorios

Los repositorios (Repository) son interfaces que contienen los métodos necesarios para el acceso a Base de Datos.

Vamos a generar las clases RepositoryArticle y RepositoryColumn en el paquete com.proyecto.repository.

Clase RepositoryArticle:

package com.proyecto.repository;

import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import com.proyecto.model.Article;

@Repository
@Transactional
public class RepositoryArticle {

	public List<Article> getList(){
		return  entityManager.createQuery("from Article").getResultList();
	}
	
	@PersistenceContext
	private EntityManager entityManager; 

}

Clase RepositoryColumn:

package com.proyecto.repository;

import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import com.proyecto.model.Column;

@Repository
@Transactional
public class RepositorioColumn {

	public List<Column> getList(){
		return  entityManager.createQuery("from Column").getResultList();
	}
	
	@PersistenceContext
	private EntityManager entityManager; 

}

Crear dominios

Los dominios son clases que implementan los conceptos del problema que estamos resolviendo. En este caso es el modelado de las tablas Article y Column.

Vamos a generar las clases DomainArticle y DomainColumn en el paquete com.proyecto.domain.

Clase DomainArticle:

package com.proyecto.domain;

import java.io.Serializable;

import com.proyecto.model.Column;

public class DomainArticle implements Serializable {
	private static final long serialVersionUID = 1L;
	private int id;
	private String descripcion;
	private String nombre;
	private String titulo;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getDescripcion() {
		return descripcion;
	}
	public void setDescripcion(String descripcion) {
		this.descripcion = descripcion;
	}
	public String getNombre() {
		return nombre;
	}
	public void setNombre(String nombre) {
		this.nombre = nombre;
	}
	public String getTitulo() {
		return titulo;
	}
	public void setTitulo(String titulo) {
		this.titulo = titulo;
	}

}

Clase DomainColumn:

package com.proyecto.domain;

import java.io.Serializable;
import java.util.List;

public class DomainColumn implements Serializable {

	private static final long serialVersionUID = 1L;
	private int id;
	private String titulo;
	private List<DomainArticle> article;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getTitulo() {
		return titulo;
	}
	public void setTitulo(String titulo) {
		this.titulo = titulo;
	}
	public List<DomainArticle> getArticle() {
		return article;
	}
	public void setArticle(List<DomainArticle> article) {
		this.article = article;
	}
	
}

Modificar Controller

Vamos a modificar los controller para accesar a los datos de las tablas correspondientes.

Clase ControllerArticle

Agregamos

@Autowired
private RepositoryArticle repositoryArticle;

Con esta anotación autoconectamos con el repositorio de Articles.

Creamos el método getList()

@RequestMapping(value="/articulos", method=RequestMethod.GET)
	@ResponseBody
	public List<DomainArticle> getList(){
		List<DomainArticle> articulos = new ArrayList<DomainArticle>();
		List<Article> listArticle = repositoryArticle.getList();
		for (Article article : listArticle) {
			DomainArticle domainArticle = new DomainArticle();
			domainArticle.setId(article.getId());
			domainArticle.setDescripcion(article.getDescripcion());
			domainArticle.setNombre(article.getNombre());
			domainArticle.setTitulo(article.getTitulo());
			
			articulos.add(domainArticle);
		}
		return articulos;
	}
  1. Se conecta al repositorio de Articles y extrae en un List todos los Articles.
  2. Recorremos el arreglo y lo cargamos en su respectivo domain.
  3. Al ejecutar http://localhost:8090/kanban/articulos

Clase ControllerColumn

Agregamos

@Autowired
private RepositoryColumn repositoryColumn;

Con esta anotación autoconectamos con el repositorio de Column.

Creamos el método getList()

@RequestMapping(value="/columnas", method=RequestMethod.GET)
	@ResponseBody
	public List<DomainColumn> getList(){
		List<DomainColumn> columnas = new ArrayList<DomainColumn>();
		List<Column> listColumn = repositoryColumn.getList();
		for (Column colum : listColumn) {
			DomainColumn domainColumn = new DomainColumn();
			domainColumn.setId(colum.getId());
			domainColumn.setTitulo(colum.getTitulo());
			
			List<DomainArticle> articulos = new ArrayList<DomainArticle>();
			for (Article articulo : colum.getArticles()) {
				DomainArticle domainArticle = new DomainArticle();
				domainArticle.setId(articulo.getId());
				domainArticle.setDescripcion(articulo.getDescripcion());
				domainArticle.setNombre(articulo.getNombre());
				domainArticle.setTitulo(articulo.getTitulo());
				articulos.add(domainArticle);
			}
			domainColumn.setArticle(articulos);
			columnas.add(domainColumn);
		}
		return columnas;
	}
  1. Se conecta al repositorio de Column y extrae en un List todos las columnas.
  2. Recorremos el arreglo y lo cargamos en su respectivo domain.
  3. Se extraen los Articles de cada columna y lo agrega a los articulos del dominio.
  4. Al ejecutar http://localhost:8090/kanban/columnas

 

Kanban con JPA

Nuevos archivos js y html

En resources/static/js duplicamos kanbanWeb.js. Le cambiamos el nombre a kanbanjpa.js. Cambiamos  la url a:

url:		"columnas",

y en el método buildsKanban cambiamos la variable columns a:

var columns = data;

En resources/templates duplicamos kanbanWeb.html. Le cambiamos el nombre a kanbanjpa.html. Cambiamos la referencia al script de kanban:

<!-- kanban  -->
<script type="text/javascript" src="js/kanbanjpa.js"	charset="UTF-8"></script>

Crear nuevo Controller

Creamos un nuevo controller en el paquete com.proyecto.controller llamado ControllerKanbanjpa.

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 ControllerKanbanjpa {
	@RequestMapping(value = "/jpa",method = RequestMethod.GET)
	public String index(){
		return "kanbanjpa";
	}
}

Al ejecutar http://localhost:8090/kanban/jpa. Tenemos las columnas y artículos de Kanban cargados desde la Base de Datos por medio de JPA.

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

 

SpringBoot 6. Configurar JPA y la Base de Datos en Eclipse

Configurar JPA

En http://arieloliva.com/crearbasededatos/ creamos la Base de Datos Kanban. Vamos a conectar eclipse con está para habilitar JPA y crear los modelos.

Agregamos la dependencia JPA en el archivo pom.xml del proyecto.

	<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-data-jpa</artifactId>
    	</dependency>

Después habilitamos JPA.

Clic derecho sobre el proyecto -> Propiedades -> Project Facets

Clic en Convert to faceted form…

Habilitar JPA con la versión 2.1. Clic en ApplyOK.

Crear conexión a MySQL

Para crear la conexión a MySQL,

Clic derecho sobre el proyecto -> Propiedades -> JPA -> Connection -> Add connection…

Seleccionar MySQL, elegir un nombre para la conexión y clic en Next.

Clic en el icono New Driver Definition  Elegir el driver 5.1.

Pasarse a la pestaña JAR List, seleccionar el driver mysql-connector-java-5.1.0-bin.jar y clic en Remove JAR/Zip para eliminarlo.

Selección_158
Clic en Add JAR/Zip… Ir a la ruta …/developer/db y seleccionar el archivo mysql-connector-java-5.1.41.jar (Se puede descargar de http://mvnrepository.com/artifact/mysql/mysql-connector-java/5.1.41 ). Clic en OK.

Escribir los datos de la Base de Datos MySQL.

Database kanban
URL jdbc:mysql://localhost:3306/kanban
User name root
Password El seleccionado en la instalación

Clic en Test Connection para validar que la conexión es correcta. Clic en OK.

Selección_161
Clic en Next >,  en Finish y en OK.

Validar la conexión a MySQL

Sobre Eclipse en la pestaña Data Source Explorer se muestra la conexión recién creada. Clic con el botón derecho y Connect.

Introducir la contraseña y OK.


Podemos ver las tablas de la Base de Datos de MySQL.

 

 

SpringBoot 5. Crear proyecto SpringBoot en Eclipse

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

 

 

 

SpringBoot 4. Crear Base de Datos

La Base de Datos la vamos a crear en MySQL. Si no tiene instalado MySQL se puede apoyar en la liga http://arieloliva.com/java-ee-3-instalar-base-de-datos-mysql . Aquí también se explica como instalar MySQL Workbench. Con MySQL Workbench podemos generar una Base de Datos mediante un modelo. Se puede utilizar cualquier otra herramienta para crear la Base de Datos en MySQL o solo ejecutar el script al final de esta entrada.

Crear modelo en MySQL Workbench

Abrimos MySQL Workbench y seleccionamos la instancia local.

Selección_153

Pedirá la contraseña de root.

Selección_154

Entramos a la pantalla principal. Clic en File -> New Model.

Selección_155

Con + crea un nuevo esquema y con lo eliminamos. Creamos el esquema kanban. Sólo escribimos el Name, los demás parámetros se dejan predeterminados. Doble Clic en Add Diagram.

Crear las tablas y sus relaciones

Aquí ya podemos agregar las tablas de la Base de Datos. Damos clic en Place a New Table. y con otro clic sobre el espacio de trabajo se creara la tabla.

Selección_175

Doble clic en la tabla y se mostraran su propiedades en la parte inferior. Seleccionamos el nombre Columns. (Lo mas recomendable es que el nombre de una tabla sea en singular, pero Column es una palabra reservada de la Base de Datos)

Y en la pestaña Columns agregamos los campos id y titulo.

Nombre Tipo de dato PK(Primary Key) NN (No Null) UQ (Unique Key) AI(Autoincrementar)
id INT Si Si Si Si
titulo VARCHAR(100) No Si No No

 

Ahora creamos la tabla Article  con los campos id, nombre, titulo y descripcion.

Nombre Tipo de dato PK NN UQ AI
id INT Si Si Si Si
nombre VARCHAR(100) No Si No No
titulo VARCHAR(100) No Si No No
descripcion VARCHAR(250) No No No No

Relacionamos la tablas de 1 a muchos. Damos clic en Place a New 1:n Non-Identifying.

Selección_167

Clic en la tabla Article y luego clic en la tabla Columns.

Generar Base de Datos

Ya tenemos nuestro modelo ahora vamos a crear la Base de Datos; Database -> Forward Engineer… Seleccionamos la instancia Local y la contraseña. Clic en Next.

Selección_169

Todo predeterminado y clic en Next.

Selección_170

Debe estar habilitado Export MySQL Table Object. Clic en Next.

Selección_171

Se muestra el script de creación. Clic en Next.

Clic en Close.

Selección_173

Desde la pestaña de la instancia actualizamos los esquemas, seleccionamos kanban  y ejecutamos los querys:

select * from Columns;
select * from Article;

En la parte inferior se debe mostrar que las consultas fueron exitosas, indicando que las tablas ya existen.

Introducir datos

Introducimos datos en las tablas. Doble clic en la celda -> Teclear datos-> Clic en Apply -> Confirmar consultas. El id es unico no se puede repetir.

Para el caso de la tabla Article. El campo Columns_id debe coincidir con un id de un Columns, si no es así se muestra un error de foreign key.

Script para crear la Base de Datos

Por si solo quieres ejecutar el script y ahorrarte toda las creación del modelo.

-- MySQL Workbench Forward Engineering

SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0;
SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL,ALLOW_INVALID_DATES';

-- -----------------------------------------------------
-- Schema kanban
-- -----------------------------------------------------
CREATE SCHEMA IF NOT EXISTS `kanban` DEFAULT CHARACTER SET latin1 ;
USE `kanban` ;

-- -----------------------------------------------------
-- Table `kanban`.`Columns`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `kanban`.`Columns` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `titulo` VARCHAR(100) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE INDEX `id_UNIQUE` (`id` ASC))
ENGINE = InnoDB
DEFAULT CHARACTER SET = latin1;


-- -----------------------------------------------------
-- Table `kanban`.`Article`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `kanban`.`Article` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `nombre` VARCHAR(100) NOT NULL,
  `titulo` VARCHAR(100) NOT NULL,
  `descripcion` VARCHAR(250) NULL DEFAULT NULL,
  `ColumnId` INT(11) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE INDEX `id_UNIQUE` (`id` ASC),
  INDEX `fk_Article_Column_idx` (`ColumnId` ASC),
  CONSTRAINT `fk_Article_Column`
    FOREIGN KEY (`ColumnId`)
    REFERENCES `kanban`.`Columns` (`id`))
ENGINE = InnoDB
DEFAULT CHARACTER SET = latin1;


SET SQL_MODE=@OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;
SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;

 

SpringBoot 3. Clonar proyecto de GitHub en Eclipse

Instalar EGit

Vamos a clonar el proyecto https://github.com/arielolivagh/kanbanDinamico en Eclipse. Necesitamos instalar EGit. Desde Eclipse:

Help -> Install New Software…

Clic en Add… y escribir EGit en name: y http://download.eclipse.org/egit/updates en Location: Clic en OK.

Esperamos un momento a que se carguen todos los resultados. Seleccionamos todas las opciones y Next.

Next.

Aceptar licencia y Finish.

Después de unos minutos acepte reiniciar Eclipse para que tome los cambios.

Para ver la ventana de repositorios de Git:

Window->Show View -> Other…

Seleccionamos Git y luego Git Repositories.

Se muestran los repositorios.

Importar proyecto

En el explorador de proyectos de Eclipse

Import ->Import… -> Projects from Git

Clic en Next.

Seleccionar Clone URI, Next.

Poner en URI: https://github.com/arielolivagh/kanbanDinamico y automáticamente se llenar los datos de Host y Repository path. Seleccionar protocolo https, teclear User y Password de su cuenta de GitHub. Clic en Next.

Seleccionar master. Next.

Seleccionar la ruta …/developer/git. Clic en Next.

Seleccionar import as general project. Clic en Next.

Escribir Project name y confirmar Directory. Clic en Finish.

En el explorador de proyectos se muestra el proyecto kanbanDinamico.

Y en la ventana de repositorios de Git.

 

SpringBoot 2. Kanban-Board

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:

var varColumna="";
varColumna ="<div class=\"panel panel-primary kanban-col\">";
varColumna+="	<div class=\"panel-heading\">"+titulo+" <i class=\"fa fa-2x fa-plus-circle pull-right\"></i></div>";
varColumna+="   <div class=\"panel-body\">";
varColumna+="   	<div id=\""+titulo+"\" class=\"kanban-centered\">";
varColumna+="		</div>";
varColumna+="   </div>";
varColumna+="   <div class=\"panel-footer\">";
varColumna+="   	<a href=\"#\">Add a card...</a>";
varColumna+="   </div>";
varColumna+="</div>";

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:

varArticle = "";
varArticle	=  "<article class=\"kanban-entry grab\" id=\"+id+"\" draggable=\"true\">";
varArticle	+=  "  <div class=\"kanban-entry-inner\">";
varArticle	+=  "      <div class=\"kanban-label\">";
varArticle	+=  "          <h2><a href=\"#\">"+nombre+"</a> <span>"+titulo+"</span></h2>";
varArticle	+=  "          <p>"+descripcion+"</p>";
varArticle	+=  "      </div>";
varArticle	+=  "</div>";
varArticle	+=  "</article>";

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:

var varColumna = null;
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);
}

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

function Column(titulo,article) {
	this.titulo	= titulo;
	this.article= article;
}
	
function Article(nombre,titulo,descripcion) {
	this.nombre		=nombre;
	this.titulo		=titulo;
	this.descripcion=descripcion;
}

Creamos objetos Article y los asignamos a un arreglo

var articleBacklog=[];
var article1 = new Article("Nombre","Titulo","Descripcion");
var article2 = new Article("Sistema Kanban","FrontEnd","Construir un sistema Kanbad de forma dinamica con json, javascript y jquery ");
articleBacklog.push(article1,article2);

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

var columns=[];
var column1= new Column("Backlog",articleBacklog);
var column2= new Column("Proceso",[]);
var column3= new Column("Terminado",[]);
columns.push(column1,column2,column3);

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

El equivalente el Json es:

{
	"columns": [{
		"column1": {
			"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"
			}]
		}
	}, {
		"column2": [{
			"titulo": "Proceso",
			"Article": []
		}]
	}, {
		"column3": [{
			"titulo": "Terminado",
			"Article": []
		} ]
	}]
}

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.

 

SpringBoot 1. Crear ambiente

Antecedentes

Vamos a desarrollar un proyecto completo en framework Spring Boot https://projects.spring.io/spring-boot/. Las tecnologías que vamos a utilizar son:

  1. JEE
  2. Maven
  3. JPA
  4. MySQL
  5. Jquery
  6. Json
  7. Ajax
  8. Bootstrap
  9. GitHub

Generar ambiente

Se puede trabajar sobre Linux, Windows o Mac, en lo personal me gusta mas Linux (Ubuntu), pero hay que considerar las versiones de las herramientas, así como los detalles específicos; manejo de rutas, tipos de ejecutables  .sh para Linux, .exe para Windows, etc.

Para generar el ambiente de trabajo requerimos lo siguiente.

Estructura de carpetas

Lo más conveniente es generar una estructura de trabajo como la siguiente:

Nivel 1 Nivel 2 Nivel 3 Descripción
developer Carpeta raíz
db Base de Datos y los drivers de conexión.
git Repositorio para GitHub
ide
eclipse Instalación de Eclipse
workspace Espacio de trabajo de Eclipse
seguridad Certificados para conectarse a GitHub

Por ejemplo:

Esta nos permite tener completamente organizado todo el ambiente de trabajo y ubicar perfectamente donde esta cada componente. Por ejemplo si quisiéramos pasarlo a otra maquina bastaría con copiar toda la estructura de carpetas.

Descargar las siguientes herramientas

  1. Eclipse.
  2. JDK 8 de Java.
  3. MySQL Community Server.
    • Link. http://dev.mysql.com/downloads/mysql/
    • Versión. Dependiendo de su Sistema Operativo.
    • Instalación. Descargar el archivo y ejecutarlo. Solo solicita la contraseña del usuario root.
  4. MySQL Workbench.
  5. Driver MySQL

Crear las siguientes cuentas

  1. GitHub.
    • Link. https://github.com/
    • Observaciones. Crear una cuenta. Para proyectos públicos es gratis.

 

 

Java EE 8. Componentes de la capa de datos, entitys, dao e interfaces

Crear entitys de las tablas

Primero se debe verificar en la ventana Data Source Explorer que la conexión a las Base de Datos esta activa.

Coneccion activa

Clic derecho sobre el proyecto -> New -> Other… -> JPA -> JPA Entities from Tables.

JPA Entities from Tables

Seleccionar la conexión, el esquema y las tablas. También debemos asegurarnos que la opción List generated classes in persistence.xml este habilitado. En nuestro caso seleccionamos las tablas Logins_users y Users y clic en Next >.

Seleccionar tablas

Muestra la relaciones entre las tablas. Clic en Next.

Relaciones entre las tablas

En el campo Package: de la sección Domain java class elegimos el paquete donde se generaran los entitys. en nuestro caso com.aor.test.entity. Clic en Next >.

Seleccionar paquete

Aquí podemos editar cualquier campo de la tabla de forma individual desplegando la tabla y seleccionando el campo.

editar de forma individual

Lo recomendable es dejar todo como esta y clic en Finish.

Editar de forma individual

Nos vamos al paquete de com.aor.test.entity y podemos ver las clases entity que se generaron.

Entity generados


 

Descripción de entity

Los entity son JavaBean con anotaciones

  1. @Entity. Anotación que indica que es un entity
  2. @Table(name=»Users»). Anotación que indica que hace referencia a la tabla correspondiente.
  3. @NamedQuery(name=»User.findAll», query=»SELECT u FROM User u»). Anotación que muestra los querys que podemos utilizar en la aplicación.
  4. @OneToMany(mappedBy=»user»). Anotación que indica las relaciones con otras tablas.
  5. Cuenta con los métodos get y set como un JavaBean.

entity


 

Crear interfaces

Clic derecho sobre el paquete com.aor.test.entityinterface  -> New -> Interface. Escribir en el campo Name: IDaoLogins_user. Clic en Finish.

Crear interface

Abrimos la interfaz y escribimos todos los métodos que vamos a ocupar sobre la tabla. Los más comunes son: insert, update, delete.  Para el caso de los select es más recomendable poner una descripción más precisa por ejemplo, logins_userFindAll, el cual indica que obtenemos todos los datos de la tabla logins_user. Siempre ponemos primero el nombre de la tabla en minúsculas y posteriormente la acción. Otro ejemplo, logins_userById significa que queremos obtener los registros de la tabla logins_user por el campo id.

Tecleamos los métodos de la interfaz.

public boolean insert(EntityManager em,Logins_user logins_user) throws Exception;
public boolean update(EntityManager em,Logins_user logins_user) throws Exception;
public boolean delete(EntityManager em,Logins_user logins_user) throws Exception;
public List<Logins_user> logins_userFindAll(EntityManager em) throws Exception;
  • EntityManager em, es parte de la API de JPA para gestionar los entitys.
  • Logins_user logins_user, entity correspondiente.
  • logins_userFindAll. Regresa un lista de Logins_user.

El resultado será.

Metodos de la interfaz

Creamos la interfaz para users.

  • Nombre de la interfaz: IDaoUser
  • Métodos:
    public boolean insert(EntityManager em,User user) throws Exception;
    public boolean update(EntityManager em,User user) throws Exception;
    public boolean delete(EntityManager em,User user) throws Exception;
    public List<User> userfindAll(EntityManager em) throws Exception;
    

El resultado será:

metodo de la interfaz de user


 

Crear DAO

Son la implementación de la interfaz.

Clic derecho sobre el paquete com.aor.test.dao -> New -> Class. Escribir en el campo Name: DaoLogins_user. Clic en Add…, seleccionar la interfaz IDaoLogins_user y Clic en Finish.

implementar interfaz Logins_user

Tecleamos los métodos de la clase.

        @Override
	public boolean insert(EntityManager em, Logins_user logins_user) throws Exception {
		em.persist(logins_user);
		return true;
	}

	@Override
	public boolean update(EntityManager em, Logins_user logins_user) throws Exception {
		em.merge(logins_user);
		return true;
	}

	@Override
	public boolean delete(EntityManager em, Logins_user logins_user) throws Exception {
		em.remove(logins_user);
		return true;
	}

	@Override
	public List<Logins_user> logins_userFindAll(EntityManager em) throws Exception {
		TypedQuery<Logins_user> query = em.createNamedQuery("Logins_user.findAll", Logins_user.class);
		List<Logins_user> logins_user = query.getResultList();
		return logins_user;
	}
  • persist, merge, remove y createNamedQuery son métodos que proporciona la API de JPA.
  • El método createNamedQuery toma como parámetro el nombre de la anotación @NamedQuery del entity User.

El resultado será.

metodo de la clase

Creamos la clase para users.

  • Nombre de la clase: DaoUser
  • Métodos:
    	@Override
    	public boolean insert(EntityManager em, User user) throws Exception {
    		em.persist(user);
    		return true;
    	}
    	@Override
    	public boolean update(EntityManager em, User user) throws Exception {
    		em.merge(user);
    		return true;
    	}
    	@Override
    	public boolean delete(EntityManager em, User user) throws Exception {
    		em.remove(user);
    		return true;
    	}
    	@Override
    	public List<User> userfindAll(EntityManager em) throws Exception {
    		TypedQuery<User> query = em.createNamedQuery("User.findAll", User.class);
    		List<User> user = query.getResultList();
    		return user;
    	}
    

El resultado será:

Metodos de la clase

 


Resultado final

Finalmente tenemos para user y logins_user los entity, interfaz de entity, dao e interfaz de dao.

finalmente

 

Java EE 7. Crear estructura del proyecto

Vamos a crear la estructura del proyecto en Eclipse para que cumpla con las capas que propone la arquitectura JEE de java.

Crear paquetes

Para crear los paquetes en el proyecto, nos posicionamos en appWeb -> Java Resources -> src/main/java, clic con el botón derecho del mouse ->New -> Package. Escribir Name: y clic en Finish.

new package

Los nombres de los paquetes deben estar en minúsculas.

Crear carpetas

Para crear las carpetas en el proyecto, nos posicionamos en appWeb -> src -> main -> webapp. clic con el botón derecho del mouse ->New -> Folder. Escribir Folder name: y clic en Finish.

Crear Folder


Capa de datos

Parte del back-end

Paquete com.aor.test.entity

  1. Modela las tablas de la Base de Datos en objetos Java.
  2. Contiene todos los entity de las tablas.
  3. Apoyo para el API jpa.

Paquete com.aor.test.entityinterface

  1. Expone los métodos para la comunicación con otras capas.
  2. Cada una de las capas solo se debe de comunicar por interfaces.

Paquete com.aor.test.dao

  1. Todos los métodos para persistir la información.
  2. Toda interacción con la Base de Datos.
  3. Interactúan directamente con los entitys..

Paquete com.aor.test.daointerface

  1. Expone los métodos para la comunicación con otras capas.
  2. Cada una de las capas solo se debe de comunicar por interfaces.

Capa de negocio

Parte del back-end

Paquete com.aor.test.ejb

  1. Se agrega toda la lógica de negocio.
  2. Todos los métodos transaccionales.

Paquete com.aor.test.ejbinterface

  1. Expone los métodos para la comunicación con otras capas.
  2. Cada una de las capas solo se debe de comunicar por interfaces.

Capa de dominio

Parte del back-end

Paquete com.aor.test.jb

  1. JavaBean
  2. Se ocupa para enviar objetos hacia las vistas
  3. Modela una tabla para enviarla a la capa de presentación, por que los entitys son exclusivos para la capa de datos. Esto para evitar problemas de seguridad.

Capa de otros

Parte del back-end

Paquete com.aor.test.appWeb

  1. Tiene el nombre de la aplicación.
  2. Se ocupa para métodos auxiliares o genéricos que se ocuparan en toda la aplicación.
  3. Por ejemplo la encriptación de la contraseña de los usuarios.

Capa de presentación

A excepción del paquete de servlet que es parte del back-end, las carpetas son parte del front-end.

Paquete com.aor.test.servlet

  1. Es el controller
  2. Solo envían y reciben información.
  3. No debe haber ninguna lógica de negocio.

Carpeta por cada tabla de la Base de Datos

  1. El nombre de la carpeta es igual al nombre de la tabla en minúsculas.
  2. Por cada tabla crear una carpeta
  3. En nuestro caso crearíamos las carpetas users y logins_users.
  4. En estas agregaremos todas las acciones, por ejemplo insert, update, delete y select.

Carpeta js/controllers

  1. Para cumplir con el MVC.
  2. Acciones sobre el formulario.
  3. Todos los eventos relacionados con el formulario.

Carpeta js/models

  1. Para cumplir con el MVC.
  2. Modelan un formulario.
  3. Es una analogía de un JavaBean.

Carpeta css

  1. Hojas de estilos particulares.

Carpeta img

  1. Cualquier imagen que se utilice en la aplicación.

Carpeta library

  1. Plug-ins, librerías externas o framework para la vista. Por ejemplo bootstrap.

Resultado

El resultado final es.

Para los paquetes:

Paquetes

Para las carpetas:

Carpetas


NOTAS

  1. La capa de presentación es el conjunto de Servlet’s y JSP’s.
  2. La arquitectura de JEE propone JavaServer Faces, pero tiene los siguiente inconvenientes:
    1. Se pierden las ventajas del HTML5.
    2. El diseñador no puede trabajar de forma paralela, ya que es código del lado del servidor.
    3. No es posible enfocarse cada quien en una capa.
    4. Por esta razón se propone trabajar con Servlet’s y JSP’s.
  3. En el caso de que se necesitara agregar servicios para ser consumidos por otros sistemas, se puede agregar una nueva capa de servicios por encima de la capa EJB. La capa de servicios interactuara con la capa de EJB. Este caso se vera posteriormente.

 

Java EE 6. Conectar Eclipse con MySQL

Configurar JPA

Clic con el botón derecho sobre el proyecto y seleccionar Propiedades. Clic en Project Facets. Asegurarse que este habilitado JPA y tiene seleccionado la versión 2.1.

Selección_154

Conectar con MySQL

En la misma ventana de propiedades, seleccionar JPA y en la sección de Connection clic en Add connection..
Selección_153
Seleccionar MySQL, elegir un nombre para la conección y clic en Next >.

Selección_155
Clic en el icono New Driver Definition.

Selección_156Elegir el driver 5.1.

Selección_157

Pasarse a la pestaña JAR List, seleccionar el driver mysql-connector-java-5.1.0-bin.jar y clic en Remove JAR/Zip para eliminarlo.

Selección_158
Clic en Add JAR/Zip... Ir a la ruta …/developer/db y seleccionar el archivo mysql-connector-java-5.1.38.jar (Se descargo el jar en el articulo http://arieloliva.com/configurar_proyecto/ en la sección «Dependencia para MySQL»). Clic en OK.

Selección_159
Escribir los datos de la Base de Datos MySQL.

Database mydb
URL jdbc:mysql://localhost:3306/mydb
User name root
Password El seleccionado en la instalación

Selección_160

Clic en Test Connection para validar que la conección es correcta.

Selección_161
Clic en Next > y  en Finish.

Validar la conección a MySQL

Sobre Eclipse en la pestaña Data Source Explorer se muestra la conección recién creada. Clic con el botón derecho y Connect.

Selección_163

Introducir la contraseña y OK.

Selección_164
Podemos ver las tablas de la Base de Datos de MySQL.

Selección_165