¿Qué es OpenXava?

Utilizando la definición de sus creadores:

OpenXava es un marco de trabajo AJAX para desarrollo rápido de aplicaciones web empresariales.

Con OpenXava sólo has de escribir las clases del dominio con Java para obtener una aplicación web lista para producción.

Vamos a probarlo y a desarrollar un ejemplo con las funcionalidades para probar OpenXava para el desarrollo de aplicaciones web empresariales.

Tutorial OpenXava

  1. DEFINICIÓN DEL PROYECTO
  2. CREACIÓN DE LA BASE DE DATOS
  3. CREACIÓN DEL PROYECTO Y CONFIGURACIÓN
  4. COMPROBACÍON DE INSTALACIÓN Y CONFIGURACIÓN
  5. EL RESULTADO FINAL


 

1. DEFINICIÓN DEL PROYECTO

Introducción

Vamos a crear un proyecto para comprobar el desarrollo de aplicaciones con OpenXava, no se pretende hacer una explicación exhaustiva del desarrollo de aplicaciones con OpenXava, sino simplemente desarrollar una aplicación con una funcionalidad y una presentación que nos permite ver hasta donde podemos llegar con OpenXava.

Se creará una base de datos propia para el proyecto y todo el desarrollo se hará desde cero, con la ayuda y documentación que se nos facilita desde OpenXava.

 

Definición del proyecto

El proyecto consiste en la administración de clientes para diferentes empresas, para ello se plantea la necesidad de tener la información de la empresa y de los clientes, cada empresa podrá tener múltiples clientes, para el caso de estudio se plantea que ambas entidades tengan los campos básicos y direcciones que podrán ser una o varias. Así mismo, y para completar el proyecto con el desarrollo que creemos necesario, se plantea que la tabla clientes tenga como tablas asociadas las tablas de: monedas, países e idiomas, que podrían ser tablas de uso general en la aplicación, y una tabla más específica como podría ser formas de pago.

Vamos a desarrollar una aplicación CRUD con la generación de código que nos proporciona OpenXava para la base de datos customerdb, también, vamos a darle a nuestra aplicación las siguientes características:

  • Seguridad: añadiremos control acceso.
  • Multiidioma: nuestra aplicación debe soportar varios idiomas.
  • Informes: inclusión de informes con JasperReports.
  • Look & Fell Web UI: veremos como podemos modificar la presentación web de nuestro proyecto.
  • Otras necesidades: según vayamos avanzando con el proyecto iremos profundizando en otras características.

Una forma fácil de extender el proyecto será relacionar las tablas generales de monedas, países e idiomas a las empresas.


 

2. CREACIÓN DE LA BASE DE DATOS

 

Esquema con draw.io

Para hacernos unas idea de las relaciones entre las tablas vamos a presentar el siguiente esquema.

Learning Project Customerdb Database Esquema Inicial

Esquema SQL

Para desarrollar este esquema vamos a necesitar las siguientes tablas, a continuación se explica su utilidad y algunas características básicas, el resto irá directamente sobre el código SQL:

Learning Project
TABLA
DESCRIPCIÓN
CARACTERÍSTICAS DE DISEÑO
cb_enterprise
Empresas de la aplicación, cada empresa tendrá sus clientes.
Las empresas tendrán definido inicialmente: idioma, país y moneda, así como otros campos básicos propios.
cb_customer
Tabla general de cliente, donde se almacenarán los clientes de las diferentes empresas.
Tendrán definido inicialmente: idioma, país, direcciones, empresas, métodos de pago y moneda, así como otros campos básicos propios.
cb_addresses
Tabla de registro de las direcciones, se asocian aquí las direcciones que tienen un cliente.
Registro para asociar las direcciones al cliente, cada cliente tendrá un número ilimitado de direcciones con cb_address relacionado mediante cb_addresses (es básicamente una tabla relacional)
cb_address
Tabla de dirección donde se guardan los datos de la dirección en sí.
Tabla de dirección que tendrá los campos generales de una dirección, así como números de teléfono, transportista y tipos de dirección.
cb_language
Tabla con los idiomas registrados en la aplicación, se podrá relacionar con múltiples tablas.
cb_currency
Tabla con las monedas registradas en la aplicación, se podrá relacionar con múltiples tablas.
cb_country
Tabla con los países registrados en la aplicación, se podrá relacionar con múltiples tablas.
Para cada país se especificará la moneda y el idioma utilizado por defecto.
cb_paymentmethod
Métodos de pago definidos para el cliente u otras entidades.

A continuación, una imagen con el el Esquema E-R de Customerdb donde se muestran las relaciones reales de la base de datos, con los nombres de las claves foráneas, …

Aquí solo voy publicar el script de la base de datos de PostgreSQL, para más información, así como para instalar PostgreSQL y como se crea la base de datos sobre PostgreSQL, la puedes obtener aquí: Learning Project Postgresql (1): Preparando el entorno, aquí y una serie de post que continúan a este, se explican en detalle la creación de las tablas en PostgreSQL, parándonos en la codificación SQL en PostgreSQL: Tutorial Postgresql (2): Creación de las tablas en SQL 

 

Sql de la base de datos

Si ya te has informado o si quieres descargarte ya el SQL desarrollado en PostgreSQL para este diseño aquí lo tienes:

Icono

PostgreSQL SQL - Creación de las tablas

1 archivo(s) 9.97 KB
Descargar

 

Esquema de customerdb

A continuación, una imagen donde se muestran las relaciones reales de la base de datos, con los nombres de las claves foráneas, …

Learning Project Customerdb Database Entity Relation

Esquema E-R de Customerdb propuesto en Learning Project


 

3. CREACIÓN DEL PROYECTO Y CONFIGURACIÓN

Instalación y configuración de Openxava

Desde OpenXava nos facilitan en su wiki una guía rápida para instalar y realizar la configuración del proyecto, no lo vamos a explicar mejor, así que te recomiendo que te leas este post para la instalación: Inicio rápido con OpenXava, y para realizar el primer ejemplo y ver que todo funciona correctamente.  Este sería el resumen:

Instala las herramientas necesarias

  1. Descarga e instala http://www.openxava.org/downloads, descarga la última distribución y descomprimela en donde quieras trabajar.
  2. Instala el jdk, por ejemplo, desde Oracle. http://www.oracle.com/technetwork/java/javase/downloads/index.html, OpenXava funciona con Java 8, 7 y 6.
  3. Descarga e instala Eclipse ya que este va a ser el IDE con el que vamos a trabajar:  http://www.eclipse.org/downloads, la versión que necesitamos es ‘Eclipse IDE for Java EE Developers’.

Configuramos Tomcat

Has de indicar al Tomcat donde has instalado el JDK en mi caso es Linux así que añado la siguiente línea al principio de catalina.sh en el directorio tomcat/bin:

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk

Probamos la instalación de OpenXava

  • Arrancamos apache para ello lanzamos startup.sh (en mi caso, ya que utilizo linux, consulta aquí para otros sistemas) que se encuentra la carpeta tomcat/bin de OpenXava.
  • Arrancamos Eclipse, te preguntará que escojas el workspace, escoge el que viene incluido con OpenXava, lo encontrarás dentro de la carpeta descomprimida.
  • La distribución de OpenXava viene con una aplicación de ejemplo llamada MySchool, para ejecutarla sigue los siguientes pasos:
    1.  Construye y despliega el proyecto: ejecuta MySchool.deployWar
    2. Ve a http://localhost:8080/MySchool/modules/Teacher usando tu navegador para ver la aplicación en acción:

quick-start_es050.png

  • Mi recomendación es que acabes el ejemplo en la página de inicio rápido con OpenXava antes de empezar con el proyecto de Customerdb.

Creación del proyecto

Para facilitarnos esta tarea cada vez que queremos crear un nuevo proyecto OpenXava usamos la utilidad: CrearNuevoProyecto.xml dentro del proyecto OpenXavaPlantilla, con lo que dando nombre a nuestro proyecto ya tenemos creada la estructura básica del proyecto y solo nos tenemos que dedicar a la configuración.

Configuración de context.xml

 

<Resource name="jdbc/CustomerdbDS" auth="Container"
        type="javax.sql.DataSource"  maxActive="20" maxIdle="5" maxWait="10000"
        username="xulescode" password="xulescode"
        driverClassName="org.postgresql.Driver"
        url="jdbc:postgresql://localhost/customerdb"/>

Configuración de persistence.xml

    <!-- JUnit PostgreSQL -->
    <persistence-unit name="junit">
        <properties>
            <!-- PostgreSQL driver class -->
            <property name="hibernate.connection.driver_class" value="org.postgresql.Driver" />
            <!-- PostgreSQL dialect -->
            <property name="hibernate.dialect" value="org.hibernate.dialect.PostgreSQLDialect" />
            <property name="hibernate.connection.url" value="jdbc:postgresql://localhost/customerdb" />
            <!-- The user of the database -->
            <property name="hibernate.connection.username" value="xulescode" />
            <!-- The password of the user of the database -->
            <property name="hibernate.connection.password" value="xulescode" />
        </properties>
    </persistence-unit>


 

4. COMPROBACIÓN DE INSTALACIÓN Y CONFIGURACIÓN

Para esto creamos la primera clase de nuestro proyecto y comprobamos que todo está funcionando correctamente.

Para hacerlo fácil y comprobar que tenemos todo bien configurado creamos la clase CbLanguage para la tabla cb_language.

Creamos la clase CbLanguage para la tabla cb_language

En esta primera aproximación lo único que haremos es hacer las definiciciones básicas:

  • Definir el nombre de la tabla:@Table(name=»cb_language»)
  • Definimos la clave primaria de la tabla: 
    	 @Id
	 @Required
	 @Column(name = "idlanguage", length = 6, nullable = true)
	 private String idlanguage;
  • El resto es la definición de las columnas indicando su nombre, tamaño y si pueden ser o no NULL.
  • Una vez escrito este código, generamos los getters y setters para todos los valores.
package org.xulescode.customerdb.model;

import javax.persistence.*;
import org.openxava.annotations.*;

@Entity
@Table(name="cb_language")
public class CbLanguage {

    @Id
    @Required
    @Column(name = "idlanguage", length = 6, nullable = true)
    private String idlanguage;

    @Required
    @Column(name = "namelanguage", length = 60, nullable = false)
    private String name;

    @Required
    @Column(name = "isactive", length = 1, nullable = false)
    private String isactive;

    @Column(name = "languageiso", length = 2, nullable = true)
    private String languageiso;

    @Column(name = "countrycode", length = 2, nullable = true)
    private String countrycode;

    @Required
    @Column(name = "isbaselanguage", length = 1, nullable = false)
    private String isbaselanguage;

    @Required
    @Column(name = "issystemlanguage", length = 1, nullable = false)
    private String issystemlanguage;

    // Generar getters y setters de todos los campos
    ...
}

 

Ahora usaremos las utilidades de OpenXava para actualizar el la configuración y hacer las pruebas:

    • En nuestro proyecto tenemos una fichero ant de ejecución build.xml con diferentes funcionalidades, nosotros usaremos ahora: desplegarWar.
    • Con esto actualizamos el war y podemos ejecutar la aplicación con las últimas actualizaciones.
    • El resultado:
      • Aplicación con acceso de usario y contraseña con acceso a los módulos creado en este caso el módulo CbLanguage correspondiente a nuestra clase.


 

5. EL RESULTADO FINAL

A continuación unas imágenes del resultado final:

  • En inicio podemos seleccionar fácilmente el nuevo módulo creado, más adelante veremos como cambiar el nombre al módulo y a todos los campos:

OpenXava Customerdb 01 acceso usuario

  • Seleccionamos el módulo creado como hicimos en el proyecto anterior de prueba en el menú Inicio, al seleccionarlo cargamos la lista de CbLanguage:

OpenXava Customerdb 02 Selección de módulo

  • Selección de la lista antes de crear ningún elemento:

OpenXava Customerdb 03 CbLanguage Lista

  • Creación de un nuevo elemento:

OpenXava Customerdb 04 CbLanguage Nuevo elemento

  • Rellenamos los campos de CbLanguage para crear el idioma Español con ES:

OpenXava Customerdb 06 CbLanguage Detalle

  • Listado en modo Lista y detalle de CbLanguage para el idioma creado:

OpenXava Customerdb 05 Lista mas detalle

Y hasta aquí la primera publicación del proyecto Learning Project OpenXava , en siguientes publicaciones veremos como crear los otros módulos para las otras tablas de la base de datos siguiendo el modelo: Model Driven de OpenXava, como modificar la presentación y la colocación de todos los elementos.

Tutorial OpenXava Empezando

Espero que te haya sido útil

 

Continúa con la guía de OpenXava con el siguiente capítulo:

Tutorial Openxava (2): Creación del resto de las clases para las tablas

Vamos a finalizar la creación de las clases para el resto de las tablas del proyecto, nuestro objetivo es finalizar todas las clases cumpliendo su funcionalidad de crear, eliminar y consultar sus datos, manejando todas las relaciones.

Aquí se explica como establecer las relaciones entre las clases usando JPA y también estableciendo un primer contacto con las anotaciones de OpenXava.

¿Qué es OpenXava?

Utilizando la definición de sus creadores:

OpenXava es un marco de trabajo AJAX para desarrollo rápido de aplicaciones web empresariales.

Con OpenXava sólo has de escribir las clases del dominio con Java para obtener una aplicación web lista para producción.

Vamos a probarlo y a desarrollar un ejemplo con las funcionalidades para probar OpenXava para el desarrollo de aplicaciones web empresariales.

Tutorial OpenXava

Introducción

Vamos a crear un proyecto para comprobar el desarrollo de aplicaciones con OpenXava, no se pretende hacer una explicación exhaustiva del desarrollo de aplicaciones con OpenXava, sino simplemente desarrollar una aplicación con una funcionalidad y una presentación que nos permite ver hasta donde podemos llegar con OpenXava. Se creará una base de datos propia para el proyecto y todo el desarrollo se hará desde cero, con la ayuda y documentación que se nos facilita desde OpenXava.

 

Definición del proyecto

El proyecto consiste en la administración de clientes para diferentes empresas, para ello se plantea la necesidad de tener la información de la empresa y de los clientes, cada empresa podrá tener múltiples clientes, para el caso de estudio se plantea que ambas entidades tengan los campos básicos y direcciones que podrán ser una o varias. Así mismo, y para completar el proyecto con el desarrollo que creemos necesario, se plantea que la tabla clientes tenga como tablas asociadas las tablas de: monedas, países e idiomas, que podrían ser tablas de uso general en la aplicación, y una tabla más específica como podría ser formas de pago.

Una forma fácil de extender el proyecto será relacionar las tablas generales de monedas, países e idiomas a las empresas.

Creación de la base de datos

 

Esquema con draw.io

Para hacernos unas idea de las relaciones entre las tablas vamos a presentar el siguiente esquema.

Learning Project Customerdb Database Esquema Inicial

Esquema SQL

Para desarrollar este esquema vamos a necesitar las siguientes tablas, a continuación se explica su utilidad y algunas características básicas, el resto irá directamente sobre el código SQL:

Learning Project
TABLA
DESCRIPCIÓN
CARACTERÍSTICAS DE DISEÑO

cb_enterprise

Empresas de la aplicación, cada empresa tendrá sus clientes.

Las empresas tendrán definido inicialmente: idioma, país y moneda, así como los campos básicos para hacer pruebas.

cb_customer

Tabla general de cliente,  donde se almacenarán los clientes de las diferentes empresas, se entiende cliente como aquel que compra a una empresa.

Los tendrán definido inicialmente: idioma, país, direcciones, empresas, métodos de pago y moneda, así como los campos básicos para hacer pruebas.

cb_addresses

Tabla de registro de las direcciones, se asocian aquí las direcciones que tienen un cliente, cada cliente tendrá un número ilimitado de direcciones con cb_address relacionado mediante cb_addresses (es básicamente una tabla relacional).

Registro para asociar las direcciones al cliente.

cb_address

Tabla de dirección donde se guardan los datos de la dirección en sí.

Tabla de dirección que tendrá los campos generales de una dirección, así como números de teléfono, transportista y tipos de dirección.

cb_language

Tabla con los idiomas registrados en la aplicación, se podrá relacionar con múltiples tablas.

cb_country

Tabla con los países registrados en la aplicación, se podrá relacionar con múltiples tablas.

Para cada país se especificará la moneda y el idioma utilizado por defecto.

cb_currency

Tabla con las monedas registradas en la aplicación, se podrá relacionar con múltiples tablas.

cb_paymentmethod

Métodos de pago definidos para el cliente u otras entidades.

Aquí solo voy publicar el script de la base de datos de Postgresql, para más información, así como para instalar Postgresql y como se crea la base de datos sobre Postgresql, la puedes obtener aquí: Learning Project Postgresql (1): Explicación, aquí y una serie de post que continúan a este, se explican en detalle la creación de las tablas en Postgresql, parándonos en la codificación sql en Postgresql, … 

 

Sql de la base de datos

Si ya te has informado o si quieres descargarte ya el sql desarrollado en Postgresql para este diseño aquí lo tienes: Script creación de tablas Customerdb.

Esquema de customerdb

A continuación, una imagen donde se muestran las relaciones reales de la base de datos, con los nombres de las claves foráneas, …

Learning Project Customerdb Database Entity Relation

Creación del proyecto y configuración

Instalación y configuración de Openxava.

Desde OpenXava nos facilitan en su wiki una guía rápida para instalar y realizar la configuración del proyecto, no lo vamos a explicar mejor, así que te recomiendo que te leas este post para la instalación: Inicio rápido con OpenXava, y para realizar el primer ejemplo y ver que todo funciona correctamente.  Este sería el resumen:

Instala las herramientas necesarias

  1. Descarga e instala http://www.openxava.org/downloads, descarga la última distribución y descomprimela en donde quieras trabajar.
  2. Instala el jdk, por ejemplo, desde Oracle. http://www.oracle.com/technetwork/java/javase/downloads/index.html, OpenXava funciona con Java 8, 7 y 6.
  3. Descarga e instala Eclipse ya que este va a ser el IDE con el que vamos a trabajar:  http://www.eclipse.org/downloads, la versión que necesitamos es ‘Eclipse IDE for Java EE Developers’.

Configuramos Tomcat

Has de indicar al Tomcat donde has instalado el JDK en mi caso es Linux así que añado la siguiente línea al principio de catalina.sh en el directorio tomcat/bin:

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk

Probamos la instalación de OpenXava

  • Arrancamos apache para ello lanzamos startup.sh (en mi caso, ya que utilizo linux, consulta aquí para otros sistemas) que se encuentra la carpeta tomcat/bin de OpenXava.
  • Arrancamos Eclipse, te preguntará que escojas el workspace, escoge el que viene incluido con OpenXava, lo encontrarás dentro de la carpeta descomprimida.
  • La distribución de OpenXava viene con una aplicación de ejemplo llamada MySchool, para ejecutarla sigue los siguientes pasos:
    1.  Construye y despliega el proyecto: ejecuta MySchool.deployWar
    2. Ve a http://localhost:8080/MySchool/modules/Teacher usando tu navegador para ver la aplicación en acción:

quick-start_es050.png

  • Mi recomendación es que acabes el ejemplo en la página de inicio rápido con OpenXava antes de empezar con el proyecto de Customerdb.

Creación del proyecto

Para facilitarnos esta tarea cada vez que queremos crear un nuevo proyecto OpenXava usamos la utilidad: CrearNuevoProyecto.xml dentro del proyecto OpenXavaPlantilla, con lo que dando nombre a nuestro proyecto ya tenemos creada la estructura básica del proyecto y solo nos tenemos que dedicar a la configuración.

Configuración de context.xml

 

<Resource name="jdbc/CustomerdbDS" auth="Container"
        type="javax.sql.DataSource"  maxActive="20" maxIdle="5" maxWait="10000"
        username="xulescode"                 
        password="xulescode"
        driverClassName="org.postgresql.Driver"
        url="jdbc:postgresql://localhost/customerdb"/>

Configuración de persistence.xml

    <!-- JUnit PostgreSQL -->
    <persistence-unit name="junit">
        <properties>
            <!-- PostgreSQL driver class -->
            <property name="hibernate.connection.driver_class" value="org.postgresql.Driver" />
            <!-- PostgreSQL dialect -->
            <property name="hibernate.dialect" value="org.hibernate.dialect.PostgreSQLDialect" />
            <property name="hibernate.connection.url" value="jdbc:postgresql://localhost/customerdb" />
            <!-- The user of the database -->
            <property name="hibernate.connection.username" value="xulescode" />
            <!-- The password of the user of the database -->
            <property name="hibernate.connection.password" value="xulescode" />
        </properties>
    </persistence-unit>

Comprobación de instalación y configuración

Para esto creamos la primera clase de nuestro proyecto y comprobamos que todo está funcionando correctamente.

Para hacerlo fácil y comprobar que tenemos todo bien configurado creamos la clase CbLanguage para la tabla cb_language.

Creamos la clase CbLanguage para la tabla cb_language

En esta primera aproximación lo único que haremos es hacer las definiciciones básicas:

  • Definir el nombre de la tabla:@Table(name=»cb_language»)
  • Definimos la clave primaria de la tabla: 
    	 @Id
	 @Required
	 @Column(name = "idlanguage", length = 6, nullable = true)
	 private String idlanguage;
  • El resto es la definición de las columnas indicando su nombre, tamaño y si pueden ser o no NULL.
  • Una vez escrito este código, generamos los getters y setters para todos los valores.
package org.xulescode.customerdb.model;

import javax.persistence.*;
import org.openxava.annotations.*;

@Entity
@Table(name="cb_language")
public class CbLanguage {

    @Id
    @Required
    @Column(name = "idlanguage", length = 6, nullable = true)
    private String idlanguage;

    @Required
    @Column(name = "namelanguage", length = 60, nullable = false)
    private String name;

    @Required
    @Column(name = "isactive", length = 1, nullable = false)
    private String isactive;

    @Column(name = "languageiso", length = 2, nullable = true)
    private String languageiso;

    @Column(name = "countrycode", length = 2, nullable = true)
    private String countrycode;

    @Required
    @Column(name = "isbaselanguage", length = 1, nullable = false)
    private String isbaselanguage;

    @Required
    @Column(name = "issystemlanguage", length = 1, nullable = false)
    private String issystemlanguage;

    // Generar getters y setters de todos los campos
    ...
}

 

Ahora usaremos las utilidades de OpenXava para actualizar el la configuración y hacer las pruebas:

    • En nuestro proyecto tenemos una fichero ant de ejecución build.xml con diferentes funcionalidades, nosotros usaremos ahora: desplegarWar.
    • Con esto actualizamos el war y podemos ejecutar la aplicación con las últimas actualizaciones.
    • El resultado:
      • Aplicación con acceso de usario y contraseña con acceso a los módulos creado en este caso el módulo CbLanguage correspondiente a nuestra clase.

A continuación unas imágenes del resultado final:

  • En inicio podemos seleccionar fácilmente el nuevo módulo creado, más adelante veremos como cambiar el nombre al módulo y a todos los campos:

OpenXava Customerdb 01 acceso usuario

  • Seleccionamos el módulo creado como hicimos en el proyecto anterior de prueba en el menú Inicio, al seleccionarlo cargamos la lista de CbLanguage:

OpenXava Customerdb 02 Selección de módulo

  • Selección de la lista antes de crear ningún elemento:

OpenXava Customerdb 03 CbLanguage Lista

  • Creación de un nuevo elemento:

OpenXava Customerdb 04 CbLanguage Nuevo elemento

  • Rellenamos los campos de CbLanguage para crear el idioma Español con ES:

OpenXava Customerdb 06 CbLanguage Detalle

  • Listado en modo Lista y detalle de CbLanguage para el idioma creado:

OpenXava Customerdb 05 Lista mas detalle

Y hasta aquí la primera publicación del proyecto Learning Project OpenXava , en siguientes publicaciones veremos como crear los otros módulos para las otras tablas de la base de datos siguiendo el modelo: Model Driven de OpenXava, como modificar la presentación y la colocación de todos los elementos.

Espero que te haya sido útil