martes, 30 de abril de 2013

Introducción a Spring JDBC como solución a los problemas de uso e JDBC en proyectos productivos. (II)

En la primera parte de esta entrada vimos la teoría y diseño detrás del framework Spring JDBC. En esta entrada estaremos viendo cómo funciona en la práctica.

Estaremos usando la misma BD de la entrada "Uso de JDBC. Sus limitaciones."

Como IDE usaré el STS o SpringTollSuite

 

Fig.1. Imagen inicial de SpringIDE.

Lo que haremos será lo siguiente:

  1. Crearemos  un proyecto JAVA y le agregaremos las dependencias de Spring, esto lo pueden ver como se hace en esta entrada: http://www.giantflyingsaucer.com/blog/?p=1524  
  2. Crearemos los beans, uno por cada entidad de la BD, tal y como en la entrada anterior.
  3. Diseñaremos las interfaces DAO y realizaremos su implementación tal y como se expresa en la figura 1 de la entrada I. Es importante destacar que los métodos de la clase interface serán todas las operaciones que se quieran realizar sobre los DAO.
  4. En las implementaciones de las interfaces DAO estaremos usando la plantilla JdbcTemplate y veremos como esta se crea inyectándole la fuente de datos. Algo propio de Spring.
  5. Por ultimo veremos el fichero de configuración con una configuración mínima para la fuente de datos y la carga de los beans.

Empecemos.

La estructura del proyecto la pueden ver en esta imagen:


 Fig.2. Estructura del proyecto creado.

Como pueden ver creo una estructura de paquetes donde tengo los DAO que son los beans para cada entidad de la BD.

Tengo un paquete para las interfaces donde se declaran los métodos que representan las acciones sobre las tablas de la BD.

Tengo otro paquete para las implementaciones de estas interfaces y es en estas implementaciones donde usaremos la plantilla con el código nuevo a explicar, porque todo lo demás es lo mismo de siempre.

Finalmente tengo un paquete para las pruebas, como aún no hemos escrito nada sobre pruebas con JUnit pues las pruebas son muy burdas pero cumplen su objetivo.

Si se fijan también verán un fichero spring-config.xml que es donde almacenamos las configuraciones y pueden ver también algunas de las librerías que se necesitan para poder ejecutar el proyecto y que listamos a continuación. Esto cuando introduzcamos Maven pues no se gestionará automáticamente. De momento este es el listado:

commons-dbcp-1.2.2.jar

commons-logging-1.1.1.jar

commons-pool-1.5.6.jar

org.springframework.aop-3.1.0.RELEASE.jar

org.springframework.asm-3.1.0.RELEASE.jar

org.springframework.aspects-3.1.0.RELEASE.jar

org.springframework.beans-3.1.0.RELEASE.jar

org.springframework.context.support-3.1.0.RELEASE.jar

org.springframework.context-3.1.0.RELEASE.jar

org.springframework.core-3.1.0.RELEASE.jar

org.springframework.expression-3.1.0.RELEASE.jar

org.springframework.instrument.tomcat-3.1.0.RELEASE.jar

org.springframework.instrument-3.1.0.RELEASE.jar

org.springframework.jdbc-3.1.0.RELEASE.jar

org.springframework.jms-3.1.0.RELEASE.jar

org.springframework.orm-3.1.0.RELEASE.jar

org.springframework.oxm-3.1.0.RELEASE.jar

org.springframework.test-3.1.0.RELEASE.jar

org.springframework.transaction-3.1.0.RELEASE.jar

org.springframework.web.portlet-3.1.0.RELEASE.jar

org.springframework.web.servlet-3.1.0.RELEASE.jar

org.springframework.web.struts-3.1.0.RELEASE.jar

org.springframework.web-3.1.0.RELEASE.jar

postgresql-9.1-901.jdbc4.jar

Si se fijan  he puesto todas las librerías que vienen con la distribución de spring, aunque no las usemos todas pero en aras de ahorrar tiempo, también agregué la del driver de postgresql y algunas commons para manejar las conexiones.

Bien una vez creado el proyecto siguiendo el enlace que les compartí y añadidas estas clases a la carpeta lib, que tienen que crear, y puestas en el classpath les muestro la estructura de una clase que mapea a una entidad de la BD.



Fig.3. Clase que representa al bean para la entidad  capítulo.

Como pueden ver es muy básica, ya la habíamos visto en otra entrada, así que no comentaremos nada de aquí.

La declaración de su interface le sigue:

 

Fig.4. Interface para el DAO.

También muy básica, solo pondremos 2  métodos. Uno para listar todos los capítulos y otro para añadir un capitulo.

Su implementación es la que nos interesa, veamos cómo se hace.

 

Fig.5. Implementación del DAO que incluye el uso de la plantilla de spring para JDBC.

Como pueden ver comenzamos anotando, de momento no se preocupen por entender esto ya en otra entrada lo explicaré con detalle, la clase CapituloDAO con @Repository y diciendo que implementa la interface ICapitulo.

Luego declaramos las consultas en variables y una última variable de tipo la plantilla que usaremos.

Implementamos un método que recibe un Datasource y con este objeto crea una plantilla y se la asigna a la variable antes creada. Este método también está anotado con @Autowired.

Luego vienen los métodos para listar los capítulos, vean que poco de código hay que escribir. Es solo decirle al template que nos ejecute la consulta que tenemos en CAPITULO_SELECT y pasarle un objeto de tipo RowMapper y es aquí donde pasa la magia porque por cada tupla de la BD que represente un capitulo se llamará al método mapRow que se encarga de crear un objeto de tipo Capitulo y asignarle los valores que vienen en la tupla y devolver el objeto de tipo Capitulo ya creado. Luego de procesadas todas las tuplas pues se devuelve el listado de los capítulos.

En el caso de añadir un libro pues es más fácil aun.  Se llama al método update de la plantilla, se le pasa la consulta que se definió en CAPITULO_INSERT y se le pasa un arreglo de objetos que se corresponden con los valores de los atributos de la clase pasada al método y que se desea insertar en la BD.

Aquellos que quieran mejorar este paso de los parámetros a la consulta pueden usar la plantilla NamedParameterJdbcTemplate. Con esta plantilla le ponemos nombre a los parámetros y así no importa el orden en que los pasemos, algo muy importante por si se hacen cambios en la estructura de la BD y se altera el orden de los campos en la BD o en la consulta.

Ahora veremos cómo es que se especifica el fichero de configuración para spring, porque si recuerdan el código de la entrada de JDBC aún no he puedo cómo crear la conexión a la BD. Ahora lo veremos.


Fig.6. Contenido del fichero de configuración de Spring.

Como pueden ver solo creamos un bean con id=dataSource que es el que le inyectamos al método que se encarga de  crear el template, de esto se encarga Spring JDBC y creamos otro bean para el manejo de las transacciones para el método de insertar. No hay que crear más beans aquí porque estos son creados al vuelo por spring gracias a las anotaciones que les comentaba anteriormente y que les explicaré cómo funcionan en otra entrada.

Para comprobar que esto de verdad funciona pues haremos lo siguiente:

  1. Crearemos  una interface del objeto de negocio que debe interactuar con el DAO.
  2. Implementaremos esta interface.
  3. Usaremos una clase para cargar la configuración de spring y crear un objeto de negocio para acceder a la capa de persistencia.

Esta es la interface:


Fig.7. Interface de la clase del negocio que usará la capa de persistencia definida.

Y esta es su implementación:

 

Fig.8. Implementación de la clase de negocio.

Vean que sencillo es el código para interactuar con la BD. De ahí no sabemos cuál es el motor de persistencia que se está usando ni las complejidades del mismo.

Noten las anotaciones @Service, @Autowired y @Transactional.

La clase que consumirá esta implementación es la siguiente:

 

Fig.9. Clase de prueba para comprobar el funcionamiento de la capa de persistencia.

Y cuando la ejecutamos vemos lo siguiente:


Fig.10. Resultado en la consola.

Como pueden ver si listan todos los títulos existentes en la BD como pueden ver aquí:

 

Fig.11. datos en la BD antes de ejecutar las consultas a la BD.

Y se inserta un nuevo libro en la BD que podemos verlo a continuación:

 

Fig.12. Imagen que muestra el libro insertado luego de ejecutar el código de prueba.

Y bueno eso es todo. Quedan algunas cosas pendientes como:

  • Depurar un poco la implementación para mejorar el código. Es de ejemplo pero  siempre se puede mejorar.
  • Capturar información para hacer logging.
  • Revisar el trabajo con spring y con las anotaciones.
  • Ver el uso de otras plantillas para JDBC.
  • Ver como probar con JUnit.
  • Ver cómo se pueden gestionar las dependencias para no tener que agregarlas manualmente.

Son cosas que poco a poco iremos tocando en el blog porque son básicas para cualquier desarrollo serio.

Espero les haya resultado de utilidad y esperamos sus comentarios.

{ Leer Más }


lunes, 29 de abril de 2013

Introducción a Spring JDBC como solución a los problemas de uso e JDBC en proyectos productivos. (I)

En una entrada anterior les había comentado sobre JDBC y sus limitaciones que más que limitaciones eran problemas. Estos problemas se resumían en:

  • Se debe escribir demasiado código para cosas simples como operaciones CRUD.
  • Mucho del código a escribir es repetitivo lo que puede llevar a errores o inconsistencias.
  • Se debe manejar la creación de las conexiones, la preparación de las consultas su ejecución y el cierre de las conexiones.
  • Se debe manejar las excepciones, lo cual no vimos en la entrada, pero siempre es algo que hay que hacer con JDBC.

Pues bueno en esta entrada les traigo una solución para aquellos que quieren seguir usando JDBC, bien porque les gusta y no quieren aprender un nuevo framework o bien porque su proyecto es pequeño o mediano y no ven la necesidad de usar un cañón para matar un mosquito la solución es usar el framework "Spring JDBC".

Para comenzar en este framework quisiera comentarles primero sobre los DAO. Este es un acrónimo de  "Data Access Object" un patrón de diseño muy común que se usa para diseñar como los objetos de negocio de una aplicación deben usar los objetos encargados del acceso a los datos.

Lo pueden ver en esta imagen:


Fig.1. Esquema que ilustra el patrón DAO.

Como pueden ver los objetos del negocio acceden a los DAO a través de sus interfaces, de esta manera no dependen de una implementación en específico lo que hace que esta implementación se pueda cambiar fácilmente. También facilita las pruebas que se pueden realizar sobre esta implementación, ya que se pueden crear implementaciones falsas menos complejas que las implementaciones reales con fines de prueba.

Esta manera de separar la capa de acceso a datos y su implementación del resto del código de la aplicación es usada por Spring para entre otras muchas cosas manejar las excepciones. El argumento se basa en que casi todas las excepciones generadas por JDBC no se pueden recuperar por lo que Spring ha definido sus propias excepciones que se mapean de la siguiente manera:


Fig.2. Excepciones de JDBC y de Spring JDBC.

Lo importante de este mapeo es que no es específico para JDBC, si no para cualquier framework de persistencia como puede ser hibernate, lo que contribuye al uso del patrón DAO.

Hay que tener en cuenta que estas excepciones no necesitan de los bloques catch tan comunes ya que las excepciones no son chequeables. No necesitan serlo ya que no se puede hacer prácticamente nada con ellas.

Lo otro que hace Spring JDBC es crear una especie de plantillas para agrupar todas aquellas cosas que son repetitivas dentro del código para acceder a los datos. Recuerdan los problemas listados al inicio, pues estas plantillas resuelven si no todos la mayoría. Vean cómo funcionan.


Fig.3. Esquema de funcionamiento de las plantillas en Spring para el acceso a los datos.

La plantilla creada agrupa todas aquellas acciones que son repetitivas y nos las oculta, y solo nos deja encargarnos de lo que de verdad es útil. Ejecutar las consultas y retornar la información generada por estas consultas.

Spring ha definido numerosas plantillas para diferentes frameworks de persistencia como pueden ver en esta imagen.


Fig.4. Listado de las clases  y plantillas que soporta Spring para el acceso a datos.

Llegado a este punto vemos que es necesario crear un mecanismo de callback para poder usar la plantilla. O sea que nuestros DAO deben de tener una propiedad de tipo la plantilla que usaremos y debe definir los métodos get/set para manejar esta propiedad. Aunque esto no es incómodo de hacer si se repite bastante cuando tenemos muchos DAO y para cada uno de ellos puede debemos de incorporar la misma plantilla.

Spring también nos libera de esto a través del uso de métodos dentro de las plantillas que nos ayudan a no tener que implementar estos callback. De esta manera Spring define clases de soporte de las cuales podemos extender con nuestras propias implementaciones. Vean su diseño:


Fig.5. Esquema de diseño de los DAO de soporte en Spring.

De esta manera podemos tener una clase DAO support de la cual extendemos para crear nuestros DAO y de esta manera pues el manejo de la plantilla se hace de forma transparente para los desarrolladores.

Aquí les dejo el listado de DAO de soporte que da Spring y el acceso que proveen.


Fig.6. Listado de las clases de soporte DAO y el acceso que brindan.

Para terminar esta entrada solo comentarles que con el framework Spring JDBC y sus componentes que ya he identificado el código a escribir se reduce de forma significativa y lo podremos ver en la próxima entrada que será la parte práctica de esta introducción.

{ Leer Más }


domingo, 28 de abril de 2013

Introducción a la plataforma de educación a distancia Moodle


Los conceptos de educación a distancia, aulas virtuales, e-learning, entre otros, han adquirido nueva vigencia en los últimos años, por representar una eficiente y económica vía para la superación de directivos y ejecutivos de cualquier organización que precise de sus miembros una permanente actualización tecnológica y científica.
Para la educación a distancia, tienen gran importancia los Sistemas de Gestión de Aprendizaje (LMS por sus siglas en inglés: Learning Management System), pues constituyen una valiosa herramienta informática para la implementación de cursos virtuales.
Entre los LMS destaca, a nivel mundial, Moodle; su nombre es el acrónimo de Modular Object Oriented Dynamic Learning Environment (Entorno de Aprendizaje Modular Orientado a Objetos), por poseer las siguientes características: es software libre, muy efectivo para la creación de ambientes educativos virtuales pues  permite integrar herramientas de producción de recursos, comunicación, administración y gestión de cursos y usuarios, interacción en tiempo real y diferido y de creación de comunidades de usuarios y grupos específicos para desarrollo de una tarea concreta. 
Posee en este sentido, las siguientes ventajas:
  • Desarrollado en software libre, lo que evita conflictos de propiedad intelectual con relación a los cursos soportados sobre ella.
  • Su arquitectura y herramientas son apropiadas para clases en línea, así como también para complementar el aprendizaje presencial o semipresencial. 
  • Es una herramienta que permite crear y gestionar cursos, temas y/o contenidos con la inclusión de una gran cantidad de actividades y dar seguimiento exhaustivo del trabajo de los estudiantes. Permite además la comunicación a través de chat, correo electrónico  foros, potenciando el aprendizaje cooperativo.
  • Promueve una pedagogía constructivista social (colaboración, actividades, reflexión crítica, etc.). 
  • Integra en una única pantalla información completa, de manera útil y personalizada.
  • Permite colocar recursos variados para formar una unidad de contenidos.
  • Se pueden incorporar todas las actividades que se consideren necesarias en cada tema.
  • Admite variadas formas de evaluación de las tareas propuestas a los estudiantes.
  • Proporciona una información exhaustiva de la actividad de cada estudiante,  permite además el análisis de la información y la descarga de la misma a una hoja de cálculo o un documento de texto.
  • Posibilita que cada estudiante avance de acuerdo a su propio ritmo de aprendizaje.
  • Los estudiantes se familiarizan rápidamente con el entorno de la plataforma, pues su navegación resulta amigable; además es multiplataforma, por lo que corre en cualquier navegador.
  • Permite diferentes opciones de retroalimentación. 
  • Posee una sólida seguridad en toda la plataforma. 

Las características anteriormente señaladas resultan avaladas por estudios realizados por investigadores de diferentes países, así como por la significativa presencia de propuestas de cursos en línea dentro de Internet.
Un importante estudio realizado por la UDI (Universitaria de Investigación y Desarrollo, de Colombia), permitió constatar que al menos 35172 sitios de Internet emplean esta plataforma, ofertando estos 1 486 613 cursos con 14 927 351 usuarios. 
Las siguientes son algunas de las Universidades que utilizan Moodle como plataforma:

Los siguientes estudios, recomiendan el empleo de Moodle como plataforma de soporte de cursos a distancia:
  • GRAF, S. y LIST B. “An Evaluation of Open Source ELearning Platforms Stressing Adaptation Issues”. Universidad de tecnología de Viena.
  • COMEZAÑA P., Oscar y GARCÍA P., Francisco. “Plataformas para educación basada en web: Herramientas, procesos de evaluación y seguridad”.
  • “Selección de un entorno virtual de enseñanza/aprendizaje de código fuente abierto para la Universitat Jaume I”. Documento del Centro de educación y nuevas tecnologías -CENT- de la Universitat Jaume I.
  • DELGADO J., Julio y LEON A., Adolfo. “Propuesta para la creación de un centro para la Educación Virtual y desarrollo de Software”. Escuela de Ingeniería Mecánica de la Universidad Industrial de Santander.
  • http://www.edutools.info, sitio del WCET -The Western Cooperative for Educational Telecommunications-
  • http://www.gate.upm.es, Página del GATE -Gabinete de TeleEducación- de la Universidad Politécnica de Madrid.
  • http://www.ossite.org/join/sp/, JOIN proyecto europeo que busca evaluar la calidad de las plataformas de teleenseñanza (LMS).
  • http://www.elearningworkshops.com, Comunidad eLearning Workshops.
  • http://www.futureu.com, Sitio de Futureu que ofrece un informe comparativo de algunas plataformas de tipo comercial.

En resumen, Moodle, como plataforma LMS, contiene una estructura de soporte para la creación y organización pedagógica de diferentes tipos de materiales didácticos, que permite ejecutar administrar, distribuir y controlar las actividades de formación presenciales o a distancia, en función del aprendizaje en línea.

{ Leer Más }


miércoles, 24 de abril de 2013

Desarrollar una aplicación web usando el patrón MVC con ZK.

El presente artículo tiene el objetivo de iniciarle en el desarrollo de aplicaciones web, usando el patrón MVC (modelo-vista-controlador) con el framework ZK. Le permitirá aprender a manejar los componentes de la vista manualmente e implementar la lógica necesaria para que funcione nuestra aplicación.

Importar y ejecutar la aplicación de ejemplo.

Se provee un proyecto eclipse, en un fichero zip, que contiene el código fuente completo de la aplicación de ejemplo; usted puede descargar e importarlo para su Eclipse, para que no tenga que iniciar desde cero.

Para usar la aplicación de ejemplo, siga los siguientes pasos:

Declarando una Clase de Dominio

Lo siguiente es la clase de dominio que representa a un carro.

Extraído de Car.java:

public class Car {

   private Integer id;

   private String name;

   private String company;

   private String preview;

   private String description;

   private Integer price;

   //omit getter and setter for brevity

}

Para ver el código completo de la clase puedes ir a continuación, a la sección de referencias [3].

Ahora definimos una interfaz para implementarla en una clase de servicio que contendrá la lógica de negocio necesaria en el ejemplo, como buscar los carros.

Extraído de CarService.java:

public interface CarService {

   /**

    * Retrieve all cars in the catalog.

    * @return all cars

    */

   public List findAll();

   /**

    * search cars according to keyword in name and company.

    * @param keyword for search

    * @return list of car that match the keyword

    */

   public List search(String keyword);

}

En este ejemplo, hemos definido la clase CarServeImpl que implementa la interfaz anterior. Para simplificar, usamos una lista estática de objetos como modelo de datos. Puedes reescribirla para que se conecte a una base de datos en una aplicación real. Los detalles de la implementación no están cubiertos en el ámbito de este artículo, puedes echar una ojeada a continuación en la sección de referencias [4].

Creando la Interfaz de Usuario

Diseñar la interfaz de usuario es un buen comienzo para crear una aplicación, además de que te ayuda a definir el alcance de tu aplicación.

ZK nos provee de cientos de componentes, listos para ser usados en el interfaz del usuario, por lo tanto un desarrollador puede crear la interfaz de usuario que desee combinando y mezclando esos componentes sin tener que crearlos desde 0.

En ZK puedes usar el ZK Markup Language para la creación del Interfaz del usuario (ZUML) [5], que es un lenguaje estructurado como un XML, que te permite definir la Interfaz del Usuario.

La convención que se utiliza en ZK es que para los ficheros en formato ZUML utilicemos la extensión .zul como sufijo. En los ficheros zul, podemos representar un componente como un elemento del XML (tag) y configurarlo (estilo, comportamiento, funcionalidad) mediante los atributos del elemento XML. [6]

En el caso de esta aplicación de ejemplo, primero, queremos diseñar una ventana con un título específico y bordes normales, como si fuera el borde exterior (marco) de la aplicación.

Extraído de search.zul:

<window title="Search" width="600px" border="normal">
   <!-- put child components inside a tag's body -->
</window>

Como "window" es el componente que contiene al resto, lo llamamos componente raíz o "root". El componente "window" (ventana) normalmente se usa como contenedor de otros componentes, porque en esencia, simplemente muestra una ventana vacía como en una aplicación de escritorio tradicional, y en esta podemos añadir los componentes que queramos.

Los componentes dentro de la ventana los llamaremos hijos o "child", y deben estar dentro del cuerpo del elemento "window".

Por ejemplo, hacemos que aparezca el título de la ventana estableciendo texto en el atributo "title" del elemento "window", y hacemos visible el borde de la ventana estableciendo el atributo "border". En el caso del ancho, usaremos el atributo "width", pero en este caso estableceremos el valor de la propiedad CSS, es decir "800px" o "60%".

Básicamente, el interfaz de usuario de nuestra aplicación de ejemplo se divide en 3 áreas dentro de la ventana ("window"), que son (de arriba a abajo): área del buscador, área de listado de los carros y área de detalles del carro.


Área del buscador

Trabajar con los componentes de ZK es como trabajar construir bloques de código, puedes combinar y mezclar componentes que existan (incluso crear los tuyos propios) para crear la interfaz de usuario que desees.

Para permitir a los usuarios buscar, necesitamos un componente que les permita escribir el texto, es decir un "input", y un botón para lanzar la búsqueda.

A continuación vemos un ejemplo de cómo podemos usar algunos componentes simples para cubrir estos requisitos.

Extraído de search.zul:

<hbox align="center">
   Keyword:
   <textbox id="keywordBox" />
   <button id="searchButton" label="Search" image="/img/search.png" />
</hbox>

hbox es un componente contenedor, que ordena horizontalmente los componentes que contenga. Seguro que has adivinado, la "h" de "hbox" significa horizontal. Como los componentes hijos o "child", tienen diferentes tamaños, establecemos el atrubuto "align" con valor "center" para que se alineen, entre ellos sobre su línea central.

En algunos componentes del ejemplo también especificamos un atributo "id", esto nos permitirá referirnos a ellos y por lo tanto poder controlarlos usando el "id". Si quieres convertir el botón en un botón con imagen solo tienes que especificar el path de la imagen en el atributo "image" del mismo.

Área de listado de los coches

ZK dispone de muchos componentes para mostrar un conjunto de datos, como por ejemplo los componentes de lista "listbox", malla "grid" y árbol "tree". En este ejemplo, hemos elegido usar una lista "listbox" para mostrar un listado de coches, con tres columnas: Nombre, Compañía y Precio.

Establecemos el atributo "height", de forma que se mostrarán tantas filas como quepan; puedes navegar con la barra de scroll para ver el resto de filas.

El atributo "emptyMessage" se usa para mostrar un mensaje cuando la lista no contiene elementos.

Puesto que el componente de lista "listbox" también es un componente contenedor puedes añadirle un componente "listhead" para mostrar y definir los nombres de las columnas. También puedes añadirle un componente "listitem" para mostrar los datos, y dentro de este componente "listcell", tantos como columnas hayas definido (en el "listhead" por ejemplo).

En el siguiente código de ejemplo usamos "listcell" con contenido estático (3 listcells) para mostrar la estructura de un componente "listitem", pero a continuación, te mostramos cómo crear un listitem dinámicamente, de acuerdo a los datos que recibe.

Extraído de search.zul:

<listbox id="carListbox" height="160px" emptyMessage="No car found in the result">
   <listhead>
       <listheader label="Name" />
       <listheader label="Company" />
       <listheader label="Price" width="20%"/>
   </listhead>
   <listitem>
       <listcell label="product name"></listcell>
       <listcell label="company"></listcell>
       <listcell>$<label value="price" /></listcell>
   </listitem>
</listbox>

Área de detalles del coche

Al igual que el "hbox", "vbox" es un componente que distribuye los componentes hijos "child", pero en este caso en vertical. Combinando estos 2 componentes contenedores, podemos mostrar más información en la pantalla. El atributo "style" permite personalizar el estilo del componente escribiendo en él CSS directamente.

Extraído de search.zul

<hbox style="margin-top:20px">
   <image id="previewImage" width="250px" />
   <vbox>
       <label id="nameLabel" />
       <label id="companyLabel" />
       <label id="priceLabel" />
       <label id="descriptionLabel"/>
   </vbox>
</hbox>

Para ver el fichero search.zul diríjase a la sesión de referencias [7].

Manipulando la lógica de la UI.

El próximo paso después de construir una UI (Interfaz Gráfica de Usuario) es hacer que responda al usuario. A continuación realizaremos una aproximación al mecanismo para controlar los componentes de la UI por ti mismo. Este mecanismo puede ser clasificado en el patrón de diseño  Modelo-Vista-Controlador (MVC) [8]. Este patrón divide la aplicación en tres partes:

El Modelo consiste en los datos de la aplicación y las reglas del negocio. CarService y otras clases usadas por ella representan esta parte de la aplicación de ejemplo.

La Vista representa la interfaz de usuario. La página zul que contiene los componentes ZK representa esta parte. La interacción del usuario con los componentes genera eventos que son lanzados a los controladores.

El Controlador juega el papel de coordinador entre la Vista y el Modelo. Recibe los eventos desde la Vista para actualizar el Modelo y busca datos en el modelo para cambiar la presentación de la Vista.


Referencias:

{ Leer Más }


martes, 23 de abril de 2013

Configurar entorno de desarrollo para el Framework ZK.


Con la presente entrada aprenderás a preparar el entorno de desarrollo para la creación de aplicaciones web con el Framework ZK.
Configurar Eclipse
Para la realización de este tutorial usaremos Eclipse 3.7 Indigo, la distribución para Java EE.
Podemos descargarlo de: Eclipse 3.7 Indigo. Una vez descargado, extraemos el contenido del zip/tar.gz en una carpeta y lo ejecutamos (eclipse.exe o ./eclipse).
Las páginas de interfaz de usuario en ZK son ficheros xml que utilizan la extensión "zul". Para editar páginas de interfaz de usuario de ZK en Eclipse, añadimos "zul" a la lista de páginas de tipo XML dentro de las preferencias de Eclipse, para lo cual procedemos del siguiente modo:
  1. Seleccionamos el menú superior del Eclipse Window / Preferences para abrir la ventana de preferencias.
  2. En el panel de la izquierda, seleccionamos General y dentro de ella Content Types como muestra la imagen.
  3. En el panel de la derecha expandimos el nodo Text en la lista de Content types y finalmente seleccionamos XML.
  4. Hacemos clic en el botón Add y escribimos *.zul, y finalmente pulsamos el botón de OK.

Una vez hayamos hecho esto, Eclipse usará el editor XML para abrir los ficheros ZUL, y los reconocerá como tal.
Instalar ZK en un Proyecto Web de Eclipse
Descargamos ZK
Primero debemos descargar ZK, puedes hacerlo directamente del sitio oficial: ZK Community Edition.
Una vez descargado, reconocerás el fichero porque llevará por nombre algo parecido a zk-bin-[version].zip. Extraer su contenido en una carpeta.
Creamos un Proyecto en Eclipse
Para crear una aplicación web en Eclipse, primero, creamos un Dynamic Web Project:
  1. Seleccionamos File / New / Dynamic Web Project
  2. Escribimos como nombre del proyecto, por ejemplo warmup, o prueba, y dejamos el resto de configuraciones como están por defecto.

  • Puedes dejar configurada la opción Target runtime como None
  • Fíjate en la imagen que usamos Dynamic web module version, la versión 3.0. El motivo es que usando Servlet 3.0 aplicación web requiere menos configuración para funcionar.
Instalar el JAR de ZK en el Proyecto Web
Para usar ZK en un proyecto, tienes que copiar el JAR de ZK en tu carpeta de bibliotecas de la aplicación (library).
Los ficheros JAR de ZK están en la carpeta donde hemos extraído el zip de ZK, concretamente dentro de las subcarpetas WebContent/WEB-INF/lib.
  • {YOUR_ZK_UNZIP_FOLDER}\dist\lib
  • {YOUR_ZK_UNZIP_FOLDER}\dist\lib\ext
Es decir, uno a uno, todos los ficheros .jar que estén en esas carpetas, los copiamos a nuestra carpeta de bibliotecas del proyecto web.
Crear una página simple
Después de la instalación, puedes crear una simple página zul para verificar si ZK está funcionando o no.
Desde el eclipse:
  1. Para añadir un nuevo fichero seleccionamos File / New / File, o también File / New / Other / File. Lo llamaremos hello.zul y lo colocaremos en la carpeta WebContent de nuestro proyecto Web.
  2. Hacemos doble clic para editarlo y nos vamos a la pestaña de Source, para poder editar su contenido como texto.

  3. Copiamos y pegamos el siguiente código fuente de ejemplo dentro del fichero (hello.zul) y lo guardamos.
<window title="My First ZK Application" border="normal">
  Hello World!
</window>
Ahora, en la vista Project Explorer de Eclipse, nuestro proyecto será similar a:

Si no puedes encontrar en Eclipse la vista Project Explorer, puedes seleccionarla en el menú Window / Show View / Project Explorer para abrirla.
Configuramos el servidor
Antes de ejecutar una aplicación web, tenemos que configurar un servidor en Eclipse. Para ello seleccionamos Window / Preferences, y en la parte izquierda de la ventana de preferencias que nos ha aparecido seleccionamos Server / Runtime Environments. Pulsamos Add para añadir una configuración de ejecución de servidor.

Seleccionamos Apache / Tomcat v7.0 Server, puesto que soporta Servlet 3.0, y marcamos Create a new local server, a continuación hacemos clic en siguiente.

Si has instalado Tomcat 7 anteriormente, simplemente indica el directorio de instalación en "Tomcat installation directory".
Si no tienes instalado Tomcat 7 puedes descargarlo siguiendo estos pasos:
  1. Haz clic en Download and Install y elige la carpeta de destino.
Nota: La ruta del directorio de destino no debe contener caracteres que no sean ASCII (como por ejemplo acentos).

  1. Acepta la licencia y espera.
    Nota: Eclipse te mostrará un mensaje de error antes de que la instalación termine, simplemente ignóralo.

    Para garantizar que la instalación se realiza correctamente, no pares la descarga ni interrumpas la actividad del Eclipse hasta que termine.

    Eclipse terminara de descargar e instalar el Tomcat en la carpeta especificada.

    A partir de este momento podrás ver la nueva entrada en Server runtime environments en la pantalla de Preferences. Pulsamos OK.

    Ejecutamos la aplicación
    Ahora hacemos clic con el botón secundario del ratón sobre el fichero "hello.zul" y seleccionamos Run As / Run on Server para ejecutar el fichero en nuestro servidor de aplicaciones.

    Elegimos el servidor Tomcat v7.0 que nos aparece. Y podemos marcar la opción Always use this server when running this project para evitar que nos pregunte lo mismo cada vez que ejecutemos el fichero en el servidor de aplicaciones.
    Hacemos clic en Finish y esperamos a que el servidor arranque.

    Después de que el servidor arranque, Eclipse abrirá su navegador y conectará con el servidor de aplicaciones automáticamente: http://localhost:8080/hello.zul. Si lo que ves es muy similar a la siguiente imagen significa que tienes tu proyecto listo para usar ZK:

    Puedes volver y seguir estos mismos pasos para ejecutar cualquier fichero .zul de tu proyecto.
    Referencias:
{ Leer Más }


viernes, 19 de abril de 2013

Uso de JDBC. Sus limitaciones.

En esta entrada veremos de forma práctica algunas de las cosas que comentábamos en una de las entradas iniciales del blog relacionadas con el acceso a dato.

Estaremos haciendo lo siguiente:

  • Usaremos una BD en postgresql para almacenar información y consumirla.
  • Usaremos un driver de postgresql para conectarnos a esta BD desde JAVA.
  • Usaremos JDBC para conectarnos a la BD y ejecutar diferentes consultas contra la BD.

Empecemos:

Paso 1:


Lo primero es tener creada una BD en postgresql, yo uso pgadmin con editor. Estoy usando una versión no tan nueva de postgresql pero ustedes pueden usar la versión 9.x sin problema.

Mi BD es esta:


Y mis tablas son las siguientes:





Como ven un libro tiene una clave foránea de la editora que publica el libro y un capitulo tiene una clave foránea del libro al que pertenece. Una editora puede tener muchos libros y un libro puede tener muchos capítulos.

Paso 2: vamos a irnos al Eclipse, uso la versión JUNO, y comenzar a tirar el código para conectarnos a la BD y poder ejecutar consultas.

En este caso creamos un proyecto java bien básico y ejecutaremos en una consola nuestras clases.

Primero crearemos una clase para conectarnos a la BD. Como esta entrada es más educativa  que productiva nos saltaremos algunas consideraciones a tener en cuenta si esto fuera parte de un proyecto. La clase de conexión es la siguiente:


Esta clase será llamada desde otras clases y al método conectar cada vez que necesitemos de un objeto de tipo Connection para acceder a la BD, ya veremos cómo.

Veamos ahora las clases  POJO que hemos creado. Entiendan por POJO = Plain Old Java Objects

Paso 3: creamos las clases entidades que se mapearan contra nuestras tablas de la BD.

La primera clase es para la entidad Editora.


La segunda clase es para la entidad libro con sus setters y getter para acceder a los atributos privados, oculto estos métodos para poder ver toda la clase:


Y por último la clase capítulo, igual a las demás:


Paso 4: creamos algunas consultas simples.

Comencemos entonces viendo cómo usar el objeto de conexión y ejecutar consultas simples sobre la BD. Lo que veremos ahora es un método que obtiene el objeto conexión y con el prepara una consulta para obtener todos los libros de una editora, codificamos el código de la editora pero bien lo pueden pasar por parámetro al método.


En este caso los comentarios van dentro y el método es static para poder llamarlo sin instanciar a la clase que lo contiene, en este caso desde el Main de la clase.

Aquí pueden ver la ejecución de este método en el eclipse desde la consola.


Ahora veremos otro ejemplo donde actualizamos el nombre de un libro. Primero veamos los datos de los libros en la BD.


Luego de ejecutar este método:


Veremos lo siguiente:


Como ven en la segunda impresión ya el título "más allá de las estrellas" no aparece y en su lugar tenemos a "por quién doblan las campanas".


Paso 5: comenzamos el trabajo de hacer un ORM, algo que nos mapee de nuestras tablas de la BD a nuestras clases entidades del negocio.

Para finalizar esta entrada veremos cómo podemos a partir del trabajo con JDBC crear las entidades con los datos obtenidos de la BD.



Una vez creados estos objetos de las entidades los podemos usar para obtener la información de ellos y no de las consultas directamente de la BD. ¿Cuál es el problema con este enfoque?

El problema es que esto es el principio de cómo funciona un ORM que era algo de lo que hablábamos en una de las primeras entradas. Ver como mapear las tablas de la BD con las entidades del negocio y es algo de lo que hemos hecho aquí, pero aún nos queda mucho código por escribir y repetir y además es un código muy atado al diseño de la BD, debemos iterar manualmente sobre muchos resultados y es costoso en términos de rendimiento la preparación de las consultas. Es por eso que en proyectos productivos rara vez se usa JDBC y si se recurre a Hibernate como el mejor ORM para el trabajo con BD relacionales. Ya lo estaremos viendo en acción en posteriores entradas.

{ Leer Más }


IconIconIcon