MANUAL DE MANTENIMIENTO

(1)

MANUAL DE MANTENIMIENTO

CLUBMAT: GESTOR DE CLUBES DE MATEMÁTICAS CONSTRUIDO CON

TECNOLOGÍAS JAVA EE 6 Y JAVAFX 2

ANDRÉS EDUARDO SÁNCHEZ MENDIETA

PONTIFICIA UNIVERSIDAD JAVERIANA

FACULTAD DE INGENIERIA

CARRERA DE INGENIERIA DE SISTEMAS

BOGOTÁ, D.C.

(2)

2

Tabla de contenido

INTRODUCCIÓN ... 4 1. TECNOLOGÍAS INVOLUCRADAS ... 5 2. INSTALACIÓN DE HERRAMIENTAS ... 7 2.1. Instalación de JDK ...7

2.2. Instalación de Netbeans junto a Glassfish ...7

2.3. Instalación de PostgreSQL ...7

2.3.1. Inicio de sesión secundario en Windows 7 ...7

2.3.2. Instalación de PostgreSQL ...8

2.4. Instalación de JavaFX2 Scene Builder ...8

2.5. Librería para dialogoS flotantes en JavaFX 2 ...9

3. DESARROLLO BÁSICO DE UNA APLICACIÓN JAVAFX2 ACOPLADO A COMPONENTES DE JAVA EE 6 ... 10

3.1. Creación de una base de datos en PostgreSQL ...10

3.2. Conexión de Netbeans con PostgreSQL ...12

3.3. Creación en Netbeans de un proyecto Java EE ...14

3.3.1. Creación del proyecto ...14

3.3.2. Generación del descriptor de Persistencia en Netbeans ...15

3.3.3. Creando un proyecto Java EE 6 con una entidad y un EJB en Netbeans ...18

3.3.4. exponer el EJB como un Servicio Web SOAP en Netbeans ...24

3.3.5. Desplegar el proyecto Java EE en Netbeans ...25

3.4. Creación en Netbeans de un proyecto JavaFX 2 que invocará Servicios Web ...28

(3)

3 3.4.2. Generar métodos auxiliares que invocan Un Servicio Web desde el proyecto

JavaFX 2 ...30

3.4.3. Construir la interfaz gráfica usando JavaFX Scene Builder ...33

3.4.4. Inyección de elementos gráficos de Javafx Scene Builder e invocación del Servicio Web como reacción a eventos ...37

3.4.5. Invocación de la aplicación JavaFX 2 a través del navegador Web ...40

4. PONER EN EJECUCIÓN LA APLICACIÓN WEB CLUBMAT DESDE NETBEANS ... 42

4.1. Creación de base de datos en PostgreSQL ...42

4.2. Ejecucion de CLUBMAT desde la IDE Netbeans ...44

5. GESTIÓN DE VENTANAS CON JAVAFX 2 ... 48

6. MANEJO DE DIALOGOS CON JAVAFX 2 ... 51

7. ESQUEMA DE DESARROLLO DE UN CRUD EN JAVAFX 2 ... 53

7.1. Estructura de los proyectos que componen la aplicación web CLUBMAT ...53

7.2. Pasos generales para crear un CRUD en JavaFX 2...57

(4)

4

INTRODUCCIÓN

En el presente manual encontrará como realizar el acoplamiento entre JavaFX 2 y Java EE 6. También encontrará cómo desarrollar en ese ambiente combinado.

(5)

5

1. TECNOLOGÍAS INVOLUCRADAS

Antes de explicar cómo se realizó el acoplamiento de tecnologías es importante que se tenga claridad sobre que tecnologías se van a integrar y que herramientas se deben usar.



Java EE 6: es una plataforma de programación que se compone de varios framework,

utilizado para el desarrollo de aplicaciones empresariales distribuidas, empleando el lenguaje de programación Java.



JavaFX 2: JavaFX 2 [2] es el framework propuesto por Sun Microsystems, hoy Oracle,

para el desarrollo de aplicaciones RIA basadas en el lenguaje de programación Java. [3]

Las aplicaciones JavaFX 2 tienen una orientación hacia multimedia y pueden ser ejecutadas en el navegador, sin necesidad de cargar ningún plugin, gracias a que los navegadores soportan la máquina virtual Java. [3]



JavaFX Scene Builder: herramienta bastante útil para los programadores que

construyen aplicaciones en Java y necesitan crear interfaces gráficas complejas. Esta utilidad se puede usar para la construcción de la interfaz de una aplicación en forma visual, sin necesidad de escribir código.



Glassfish 3: es un servidor de aplicaciones de código abierto compatible con Java EE

6 [1], listo para funcionar en entornos de producción.

GlassFish 3 proporciona una pequeña base con todas las funciones para la implementación de Java EE 6. [1]



PostgreSQL 9: es un sistema de base de datos relacional basado en POSTGRES. Fue

(6)

6 su licencia libre, PostgreSQL puede ser utilizado, modificado, y distribuido gratuitamente para cualquier propósito, sea privado, comercial, o académico. [4]

(7)

7

2. INSTALACIÓN DE HERRAMIENTAS

Debe instalar las siguientes herramientas para poder realizar el acople entre el framework JavaFX 2 y la plataforma Java EE 6. Igualmente son necesarias para desarrollar y mantener la aplicación CLUBMAT: Gestor de clubes de matemáticas.

2.1. I

NSTALACIÓN DE

JDK



Descargue e instale Java SE Development Kit (JDK) en su última versión de la URL: http://www.oracle.com/technetwork/java/javase/downloads/index.html

La JDK usada al momento de realizar este manual fue la versión 7u25.

Nota:El JDK a partir de la versión 7 incluye las librerías de soporte para JavaFX 2.

2.2. I

NSTALACIÓN DE

N

ETBEANS JUNTO A

G

LASSFISH



Descargue e instale la IDE Netbeans con soporte para Java EE y en idioma ingles de la URL: http://www.netbeans.org/downloads.

Al momento de realizar este manual se usó la versión 7.3.0.

Esta IDE incluye:



Driver actualizado para PostgreSQL 9.



Servidor de aplicaciones Glassfish 3.1.2.



Soporte para trabajar con JavaFX 2.

2.3. I

NSTALACIÓN DE

P

OSTGRE

SQL

Debe realizar los siguientes pasos para instalar el motor de la base de datos PostgreSQL:

2.3.1. INICIO DE SESIÓN SECUNDARIO EN WINDOWS 7

1) Verifique que su sistema operativo tiene activo el servicio “Inicio de sesión secundario”. Para esto vaya a Inicio >> Panel de control >> Herramientas administrativas >> Servicios >> Inicio de sesión secundario.

(8)

8

3) Verifique que el estado de este servicio se encuentre en “Iniciado”. Si no es así, haga Click derecho sobre “Inicio de sesión secundario” >> Iniciar. El servicio debe mostrarse de la siguiente manera:

2.3.2. INSTALACIÓN DE POSTGRESQL

1) Ejecute el instalador de PostgreSQL, en el caso de la versión 9.2.4, el archivo es postgresql-9.2.4-1-windows.exe.

2) En el asistente de instalación de PostgreSQL llega un punto en que le dice: “Por favor, proporcione una contraseña para el superusuario base de datos postgres”. Establezca la contraseña: postgres.

3) Seleccione las opciones por defecto para las demás preguntas que le realice el asistente de instalación.

Al finalizar el asistente le pregunta si desea lanzar “Stack Builder”, diga que no y haga Click en terminar.

2.4. I

NSTALACIÓN DE

J

AVA

FX2

S

CENE

B

UILDER



Descargue e instale JavaFX Scene Builder de la URL: http://www.oracle.com/technetwork/java/javafx/downloads/index.html

(9)

9

2.5. L

IBRERÍA PARA DIALOGO

S

FLOTANTES EN

J

AVA

FX

2 

Descargue la librería javafx-dialogs-0.0.3.jar. La puede descargar de la URL: https://github.com/marcojakob/javafx-ui-sandbox/tree/master/javafx-dialogs/dist

(10)

10

3. DESARROLLO BÁSICO DE UNA APLICACIÓN JAVAFX2

ACOPLADO A COMPONENTES DE JAVA EE 6

En esta sección se explica paso a paso cómo realizar el acople entre el framework JavaFX 2 y la plataforma Java EE 6, desarrollando una aplicación sencilla que usa una base de datos PostgreSQL y el servidor de aplicaciones Glassfish 3.1.2.

Para lograr la integración de tecnologías mencionada realice los siguientes pasos:

3.1. C

REACIÓN DE UNA BASE DE DATOS EN

P

OSTGRE

SQL

1) Ejecute el software pgAdmin III y luego haga doble Click en el servidor. Ingrese la contraseña que ingreso en el proceso de instalación.

2) Vaya a Bases de datos >> postgres.

En la barra de herramientas haga Click en “Ejecutar consultas SQL arbitrarias.”

3) Copie y pegue el siguiente Script para crear el usuario "clubmat":

CREATE USER clubmat LOGIN

(11)

11 ENCRYPTED PASSWORD 'clubmat';

Ejecute el Script haciendo Click en “Ejecutar consulta”.

Nota: En el script remplace clubmat por el nombre de usuario que usted desee crear.

4) Para crear la base de datos vaya a “Ejecutar consultas SQL arbitrarias” y copie y pegue el siguiente script. Con el va crear una base de datos "clubmat" cuyo usuario dueño será "clubmat":

CREATE DATABASE clubmat WITH OWNER = clubmat ENCODING = 'UTF8';

5) Compruebe que la base de datos que acabo de crear salga listada como existente. En algunos casos pgAdmin III se demora en listar una base de datos recién creada. Espere un momento, haga Clickk en “Bases de Datos” y ejecute la opción refrescar hasta que salga listada la base de datos.

(12)

12

3.2. C

ONEXIÓN DE

N

ETBEANS CON

P

OSTGRE

SQL

1) Abra la IDE Netbeans, diríjase a la pestaña Services >> Databases >> Drivers.

2) La IDE Netbeans en su versión 7 o superior incluye el driver para PostgreSQL. Compruebe que sale listado.

(13)

13

3) Ahora cree la conexión que le servirá de referencia para la unidad de persistencia. Haga Click derecho sobre PostgreSQL y seleccione “Connect Ussing…” y aparecerá una ventana en la cual tiene que llenar todos los datos requeridos. Debe quedar algo como lo siguiente:

(14)

14 En el campo Database coloque el nombre de la base de datos que creó en PostgreSQL. Luego haga Click en “Test Connection” y si la conexión se realizó exitosamente le debe salir un aviso diciéndole “Connection Succeeded”. Después haga Click en “Next”.

4) En el campo “Select schema:” elija “public”. Haga Click en “Finish”.

3.3. C

REACIÓN EN

N

ETBEANS DE UN PROYECTO

J

AVA

EE

3.3.1. CREACIÓN DEL PROYECTO

1) Ahora lo que debe hacer es crear un proyecto para la aplicación empresarial Java EE 6. Vaya a “File” >> “New Project…” >> “Java EE” >> “Enterprise Aplication” y después haga Click en “Next”.

(15)

15

2) Elija el nombre de proyecto que desee, luego haga Click en el botón “Next”.

Desactive la opción “Create EJB Module”. Luego haga Click en “Finish”. Debe quedar algo como lo siguiente:

3.3.2. GENERACIÓN DEL DESCRIPTOR DE PERSISTENCIA EN NETBEANS

1) Ahora debe crear una unidad de persistencia. Para esto haga Click derecho sobre el modulo web de la aplicación y vaya a “New” >> “Other…” >> “Persistence” >> “Persistence Unit”. Haga Click en “Next”.

(16)

16

2) Seleccione “Eclipselink” como proveedor de persistencia. Puede dejar el nombre por defecto para la unidad de persistencia o colocar el que usted deseé.

En el campo “Data Source” seleccione “New Data Source”.

3) En “Database Connection” seleccione la conexión PostgreSQL a la base de datos que

usted creó. En “JNDI Name” coloque el nombre que desee. Haga Click en OK. Después haga Click en “Finish”, debe quedarle algo como en la siguiente ilustración:

(17)

17

4) Debe complementar el archivo persistence.xml que fue generado por Netbeans. Vaya al módulo web de la aplicación >> “Configuration Files” >> “persistence.xml” Haga Click en “Source”.

5) Después de la línea:

Agregue el siguiente código, editando los datos según el nombre de su base de datos, usuario y contraseña:

<property name="eclipselink.target-database" value="PostgreSQL"/> <property name="javax.persistence.jdbc.driver"

(18)

18 <property name="javax.persistence.jdbc.url"

value="jdbc:postgresql://localhost:5432/clubmat"/>

3.3.3. CREANDO UN PROYECTO

JAVA

EE

6 CON UNA ENTIDAD Y UN

EJB EN

NETBEANS

1) Primero que todo, debemos crear un paquete para colocar nuestra entidad persistente. Haga Click derecho sobre el modulo web de su proyecto >> “New” >> “Java Package”.

2) En el campo “Package Name” coloque “co.edu.javeriana.clubmat.ejb” y haga Click en

“Finish”.

3) Haga Click derecho sobre el modulo web de su proyecto >> “New” >> “Other…” >> “Persistence” >> “Entity Class”. Haga Click en Next.

(19)

19

4) En este ejemplo vamos a crear una entidad “Rol”. En package seleccione

(20)

20

5) La entidad Rol que usted va a crear tendrá dos atributos. Id (Long) y nombrerol (String).

Haga doble Click sobre Rol.java y reemplace todo el código generado por el siguiente:

package co.edu.javeriana.clubmat.jpa; import java.io.Serializable; import javax.persistence.*; import javax.validation.constraints.Size; @Entity @NamedQueries({

@NamedQuery(name = "Rol.existRol", query = "SELECT

(21)

21 public class Rol implements Serializable {

private static final long serialVersionUID = 1L; @Id

@GeneratedValue(strategy = GenerationType.AUTO) private Long id;

@Size(min = 3)

@Column(unique = true, nullable = false, length = 40) private String nombrerol;

public Rol() { }

public Rol( String rol ) { this.nombrerol = rol; }

public Long getId() { return id;

}

public void setId(Long id) { this.id = id;

}

public String getNombrerol() { return nombrerol;

}

public void setNombrerol(String nombrerol) { this.nombrerol = nombrerol;

}

@Override

public String toString() {

return "JPA.Rol[ id=" + id + " nombrerol=" + nombrerol + " ]"; }

(22)

22

6) Para la creación del EJB debe crear un nuevo paquete llamado “co.edu.javeriana.clubmat.ejb”. Use el método enseñado anteriormente. (Ver sección 3.3.3 Creando un proyecto Java EE 6 con una entidad y un EJB en Netbeans)

7) Haga Clickk derecho sobre el modulo web de su proyecto >> “New” >> “Other…” >> “Enterprise JavaBeans” >> “Sessions Beans for Entity Classes”. Haga Click en Next.

8) Haga Click en “Add all” y luego en “Next”. En la siguiente ventana en Package seleccione “co.edu.javeriana.clubmat.ejb” y haga Click en Finish.

(23)

23 En RolFacade es donde usted implementará los métodos de negocio para la entidad Rol. AbstractFacade es una clase abstracta que tiene métodos genéricos para soportar operaciones CRUD (crear, eliminar, buscar, etc.) para todas las entidades.

10) Agregue estos dos métodos:



existeRol: Método al cual se le envía el nombre de un rol y dice si este existe

en el sistema por medio de un booleano.



crearRol: Método al cual se le envía el nombre de un rol, lo crea y confirma

que la operación fue exitosa. Si el rol ya existe en el sistema, retorna una cadena advirtiendo que ya existe.

11) Edite RolFacade.java y copie y pegue los siguientes dos métodos:

public Boolean existeRol( String rol ) {

Query q = em.createNamedQuery( "Rol.existRol" ); q.setParameter( "nombrerol", rol );

Long exist = ( Long ) q.getSingleResult( ); if( exist > 0 ) return true; return false; }

public String crearRol( String rol ) {

if( existeRol( rol ) )

return "El rol ya existe en el sistema, elija otro";

Rol r = new Rol( rol ); em.persist( r );

return "exitoso"; }

(24)

24

3.3.4.

EXPONER EL EJB COMO UN SERVICIO WEB SOAP EN NETBEANS

1) Ahora debe exponer el EJB creado como un Servicio Web SOAP. Para ellos haga Click derecho sobre el modulo web de la aplicación >> “New” >> “Web Service”.

2) En “Web Service Name” coloque RolWS. En paquete coloque “co.edu.javeriana.clubmat.ws”.

Seleccione “Create Web Service from Existing Session Bean” y luego haga Click en Browse.

3) Seleccione el EJB al que desea generarle un Servicio Web. En este caso RolFacade. Haga Click en OK.

(25)

25

4) Haga Click en Finish. En el paquete WS de su proyecto debe aparecer una clase RolWS.java la cual implementa el Servicio Web.

3.3.5. DESPLEGAR EL PROYECTO JAVA EE EN NETBEANS

1) Click derecho sobre su proyecto empresarial Java EE >> “Clean and Build” Click derecho sobre su proyecto empresarial Java EE >> “Deploy”

Luego de estas dos acciones, se debe generar automáticamente la tabla en la base de datos PostgreSQL.

(26)

26 Verifique esto con pgAdmin III.

2) Ahora debe verificar que su servicio web realmente funciona, para ello abra el modulo web de su proyecto >> “Web Services” >> Click derecho a “RolWS” >> “Test Web Service”

(27)

27

3) Se abre el navegador web con una página web llamada “RolWS Web Service Tester”.

Allí podrá usar los dos métodos que implementados: existeRol y crearRol.

(28)

28

4) Debe obtener una página web donde dice que es falso que exista el rol “Lider.

5) Ahora cree el rol “Lider” usando el método crearRol, luego verifique que existe dicho rol con el método existeRol y obtendrá true.

La tabla “rol” de su base de datos tendrá un nuevo registro, con un id y un rol llamado “Lider”.

3.4. C

REACIÓN EN

N

ETBEANS DE UN PROYECTO

J

AVA

FX

2

QUE INVOCARÁ

S

ERVICIOS

W

EB

3.4.1. CREACIÓN DEL PROYECTO

1) Ahora debe crear un proyecto JavaFX 2 para que consuma el Servicio Web que construyo. Para ello vaya a: File >> New >> JavaFX >> JavaFX FXML Application

(29)

29

2) Elija el nombre de proyecto que deseé.

En el campo “FXML Name” coloque el nombre que quiere colocarle a la pantalla principal de su aplicación JavaFX2. Haga Click en Finish.

(30)

30



JavaFXApplication9.java (varía según el nombre que le haya dado al

proyecto): Esta clase es la encargada de ejecutar la aplicación. Carga el archivo “PantallaInicial.fxml”.



PantallaInicial.fxml: Archivo en lenguaje XML que contiene la descripción

de todo diseño gráfico de la pantalla inicial.



PantallaInicialController.java: Clase que controla los elementos gráficos

descritos en el archivo “PantallaInicial.fxml”. Acá también se implementan los métodos de negocio necesarios para la pantalla inicial.

Como puede observar se usa el Modelo Vista Controlador (MVC) para separar la interfaz gráfica de la lógica.

3.4.2. GENERAR MÉTODOS AUXILIARES QUE INVOCAN UN SERVICIO WEB DESDE

EL PROYECTO JAVAFX 2

1) Haga Click derecho sobre su proyecto JavaFX 2 >> New >> Web Service Client

2) Seleccione “WSDL URL:” y coloque la URL del WSDL del servicio web que desea

(31)

31 Para obtener la URL del WSDL fácilmente, vaya al testing de RolWS y haga Click en “WSDL File”.

3) Usted usará remotamente los métodos existeRol y crearRol que ofrece el Servicio Web. Para ello abra “PantallaInicialController.java” y haga Click derecho en el editor >> Insert code >> Call Web Service Operation…

(32)

32

4) En la ventana de Servicios Web disponibles, seleccione su proyecto JavaFX >> RolWS >> RolWSPort >> existeRol >> OK

(33)

33 Esto generará dos métodos que podrán invocar a existeRol y createRol de forma remota.

3.4.3. CONSTRUIR LA INTERFAZ GRÁFICA USANDO JAVAFX SCENE BUILDER

1) Haga doble Click sobre el archivo “PantallaInicial.fxml”. Se abrirá JavaFX Scene Builder así como lo muestra la siguiente ilustración:

(34)

34

2) Elimine el botón y el “Label” existente seleccionándolos y presionando la tecla “Supr”.

3) Amplíe el tamaño de la ventana situándose en una de las esquinas del rectángulo y moviendo el mouse.

4) Para invocar el Servicio Web y mostrar los resultados debe agregar los siguientes elementos gráficos:



Un “Label” con el texto “Nombre del rol:”



Un “Textfield” en donde se ingresara el nombre del rol



Un “Button” con el texto “Crear rol”



Un “Button” con el texto “Existe rol”



Un “Label” con el texto “Resultado:”



Un “Textfield” en donde se colocara el resultado obtenido luego de invocar a los métodos.

5) Use la opción “Search” del JavaFX Scene Builder para buscar los elementos gráficos

(35)

35

6) Luego de arrastrar y soltar debe obtener una interfaz gráfica así:

Nota: puede pre-visualizar la interfaz gráfica que está diseñando en Preview >> Show Preview in Window.

7) A los elementos gráficos que desee manipular dinamicamente desde el controlador debe darles un Id con nombre claro.

(36)

36 En este caso solo vale la pena realizar esa manipulación en los dos “Textfield”. Allí es donde usted va a hacer una lectura y escritura de información.

Para esto, debe hacer Click sobre cada “Textfield” y usar la herramienta “Inspector” para buscar la propiedad “id”.

En la propiedad “fx:id” coloque el nombre que deseé para cada elemento. El “Textfield” donde se ingresa el nombre del rol llámelo “textfieldNombrerol” y el “Textfield” donde muestra el resultado llámelo “textfieldResultado”.

8) Los dos botones disparan eventos. Para especificar la reacción a eventos debe hacer Click en cada botón y buscar “action” usando la herramienta Inspector.

En la propiedad “On Action”, nombre “crearRol” al evento de hacer Click en el botón “Crear Rol”. El evento del otro botón identifíquelo como “existeRol”.

(37)

37

3.4.4. INYECCIÓN DE ELEMENTOS GRÁFICOS DE

JAVAFX

SCENE

BUILDER E

INVOCACIÓN DEL SERVICIO WEB COMO REACCIÓN A EVENTOS

1) Ahora necesita inyectar los elementos gráficos que desea manipular en la clase controladora. Esto se hace con la anotación @FXML.

Abra “PantallaInicialController.java” y remplacé:

@FXML

private Label label;

Por:

@FXML

private TextField textfieldNombrerol; @FXML

private TextField textfieldResultado;

2) También necesita inyectar los eventos que nombro en JavaFX Scene Builder, indicando la invocación del Servicio Web como reacción a cada evento:

Reemplace:

@FXML

private void handleButtonAction(ActionEvent event) { System.out.println("You Clickked me!");

label.setText("Hello World!"); }

Por:

@FXML

(38)

38 String resultado = crearRol( this.textfieldNombrerol.getText( ) );

this.textfieldResultado.setText( resultado ); }

@FXML

private void existeRol(ActionEvent event) {

Boolean resultado = existeRol( this.textfieldNombrerol.getText( ) );

if( resultado )

this.textfieldResultado.setText( "El rol existe en el sistema" );

else this.textfieldResultado.setText( "El rol no existe en el sistema" );

}

3) Haga Click derecho sobre su proyecto JavaFX >> Clean and Build. Haga Click derecho sobre su proyecto JavaFX >> Run

Pruebe la aplicación con diversos datos:

(39)

(40)

40

3.4.5. INVOCACIÓN DE LA APLICACIÓN

JAVAFX

2 A TRAVÉS DEL NAVEGADOR

WEB

Para que la aplicación JavaFX 2 construida pueda ser ejecutada en el navegador web debe realizar los siguientes pasos:

1) Vaya a la carpeta de su proyecto JavaFX 2, dentro de ella hay una carpeta llamada “dist”. Cópiela.

2) Vaya a la carpeta de su proyecto empresarial Java EE y luego a la carpeta del módulo web de su proyecto. Dentro de esta última hay una carpeta llamada “web”. Ábrala.

3) Pegue la carpeta “dist” en la carpeta “web”.

4) Abra la carpeta “dist” que acabo de copiar en la carpeta “web”. Allí encontrará un único

archivo html. A ese archivo debe cambiarle el nombre a index.

5) Click derecho sobre su proyecto empresarial Java EE >> “Clean and Build” Click derecho sobre su proyecto empresarial Java EE >> “Deploy”

Click derecho sobre su proyecto empresarial Java EE >> “Run”

6) Se le abre el navegador web con una página que dice “Hello World!” Esa página web

corresponde al index.jsp que se encuentra en la carpeta “web” del módulo web de su proyecto.

7) En la barra de direcciones, conserve la dirección que se encuentra y añádale la palabra dist. Se le debe abrir una página web en donde sale cargándose una aplicación javaFX.

(41)

41

8) Diga que acepta los riesgos y que desea ejecutar la aplicación. Pruebe la aplicación con diversos datos.

(42)

42

4. PONER EN EJECUCIÓN LA APLICACIÓN WEB

CLUBMAT DESDE NETBEANS

Para ejecutar la aplicación web CLUBMAT desde la IDE Netbeans 7.3 realice los siguientes pasos:

4.1. C

REACIÓN DE BASE DE DATOS EN

P

OSTGRE

SQL

1) Abra el cliente de PostgreSQL ejecutando la aplicación pgAdmin III que se encuentra en el directorio donde se instaló el motor de base de datos.

2) Haga doble Click sobre el servidor “PostgreSQL 9.2”, allí la aplicación le pedirá una contraseña, ingrese la contraseña que estableció en el proceso de instalación de PostgreSQL.

3) Vaya a “Bases de Datos” >> “postgres”

En la barra de herramientas haga Click en “Ejecutar consultas SQL arbitrarias.”

4) En el editor copie y pegue el siguiente Script:

CREATE USER clubmat LOGIN

NOSUPERUSER INHERIT CREATEDB NOCREATEROLE ENCRYPTED PASSWORD 'clubmat';

(43)

43 Ejecute el Script haciendo Click en “Ejecutar consulta”.

5) Para crear la base de datos vaya a “Ejecutar consultas SQL arbitrarias” y copie y pegue

el siguiente script:

CREATE DATABASE gestorclubesm WITH OWNER = clubmat

ENCODING = 'UTF8';

6) Compruebe que la base de datos que acabo de crear salga listada como existente. En algunos casos pgAdmin III se demora en listar una base de datos recién creada. Espere un momento, haga Clickk en “Bases de Datos” y ejecute la opción refrescar hasta que salga listada la base de datos.

(44)

44

4.2. E

JECUCION DE

CLUBMAT

DESDE LA

IDE

N

ETBEANS

1) Abra la IDE Netbeans 7.3 y vaya a: File >> Open Project… Seleccione el proyecto

empresarial CLUBMAT >> Click en Open Project.

Nota: el proyecto empresarial CLUBMAT se encuentra en el archivo [CLUBMAT]ICodigo.zip disponible en la página web del presente proyecto. Debe descomprimirlo en su disco duro y obtendrá una carpeta “CLUBMAT”. Esa carpeta es un proyecto que puede abrir con la IDE Netbeans.

2) Es posible que cuando abra el módulo web del proyecto empresarial CLUBMAT tenga errores de advertencia acerca del “Data Source”.

(45)

45 Soluciónelo haciendo Clickk derecho sobre “CLUBMAT-war” >> “Resolver Data Source Problem…”. Seleccione “clubmatpool” y luego haga Clickk en “Add Connection…”.

Realice el “Test Conecction” con los datos por defecto. Netbeans debe indicarle que la conexión fue exitosa con el aviso “Connection Succeeded”. Después haga Clickk en Next y seleccione el esquema “public”. Haga Clickk en Finish.

3) Click derecho sobre el módulo web CLUBMAT-war >> “Clean and Build” Click derecho sobre el módulo web CLUBMAT-war >> “Deploy”

4) Click derecho sobre el proyecto empresarial CLUBMAT >> “Clean and Build” Click derecho sobre el proyecto empresarial CLUBMAT >> “Deploy”

Luego de estas dos acciones, se deben generar las tablas en la base de datos gestorclubesm de PostgreSQL.

Verifique esto con pgAdmin III.

1) En pgAdmin III elija la base de datos “gestorclubesm” y ejecute el script que está en el archivo Inserts_datosminimos.sql (carpeta [CLUBMAT]Instalación) usando la opción "consultas SQL arbitrarias":

(46)

46

Nota: Si desea que la aplicación web CLUBMAT inicie con más datos, pero todos ellos ficticios, no ejecute el anterior script. Vaya a la carpeta [CLUBMAT]Instalación, abra el archivo Inserts_datosficticios.sql y ejecute todo el script en “consultas SQL arbitrarias”.

Esto le ayudará a observar mejor la funcionalidad de la aplicación web cuando la ejecute.

5) Click derecho sobre el proyecto empresarial CLUBMAT >> “Run”.

Se le debe abrir el navegador web desplegándole la aplicación web: CLUBMAT.

6) Al ser la interfaz gráfica de la aplicación web construida con la tecnología JavaFX 2, debe aceptar los riesgos para ejecutar la aplicación y hacer Click en ejecutar.

(47)

47

7) Ingrese como nombre de usuario: “admin” y contraseña: “admin”. El sistema le dirá

que realizó login correctamente y que tiene rol de Lider.

Ya puede empezar a usar todas las acciones implementadas en CLUBMAT.

Nota: Vea el manual de usuario para conocer las opciones ofrecidas por el sistema.

8) Si desea editar la capa de presentación de la aplicación web CLUBMAT debe abrir el proyecto CLUBMATClient. Cuando lo abra importe la librería javafx-dialogs-0.0.3.jar

(48)

48

5. GESTIÓN DE VENTANAS CON JAVAFX 2

La gestión de ventanas en JavaFX 2 consiste en tener una estrategia fácil y clara que permita navegar de una pantalla a otra, usando el modelo vista controlador generado por la herramienta JavaFX Scene Builder. El ir de una pantalla a otra, devolverse, actualizarla o mantenerla desactualizada se convierte en un problema complejo en el framework JavaFX 2.

Para ello fue necesario usar un framework gratuito escrito por la Ingeniera Angela Caicedo, buscando simplificar este problema. [5]

Angela Caicedo es una “Java Evangelist” de Oracle, especialista en sistemas Java empresariales. Tiene amplia experiencia en: Java ME, Java SE, Java EE y JavaFX. Participo en varias conferencias de JavaOne.

COMO SE USÓ EL FRAMEWORK DE PANTALLAS EN LA APLICACIÓN

WEB CLUBMAT

Para utilizar el framework de pantallas en la aplicación web CLUBMAT, fue necesario seguir paso a paso el manual del mismo, publicado en el blog de la ingeniera Ángela Caicedo en: https://blogs.oracle.com/acaicedo/entry/manejando_multiples_pantallas_en_javafx.

También fue necesario ayudarse con un video tutorial sobre este framework, también realizado por la ingeniera Ángela Caicedo en la URL:

http://www.youtube.com/watch?v=5GsdaZWDcdY.

En la clase Club_MatematicasClient.java, la cual ejecuta la aplicación web CLUBMAT, fue necesario usar cadenas constantes estáticas. De esta manera las constantes pudieron ser accedidas por cualquier otra clase del proyecto JavaFX 2: CLUBMATClient.

Por cada pantalla de la aplicación web CLUBMAT se declararon dos cadenas constantes, una con el nombre de la pantalla y otra con el nombre de la vista FXML de esa pantalla.

En el siguiente código Java de la clase Club_MatematicasClient.java, puede observar cómo, por cada pantalla, fue necesario declarar dos cadenas constantes:

(49)

49 En cada clase controladora de una pantalla se realizó una implementación de una interface llamada ControlledScreen. ControlledScreen es una interface que hace parte del framework de pantallas.

De igual forma, por cada clase controladora fue necesario declarar un atributo myController de tipo ScreensController. ScreensController es una clase que hace parte del framework de pantallas.

Como en cada clase controladora se implementó la interfaz ControlledScreen, fue necesario implementar el método setScreenParent en cada una de ellas, de la siguiente manera:

El atributo myController es el que ayuda a realizar la navegación entre todas las pantallas, haciendo uso de las constantes declaradas en la clase Club_MatematicasClient.java y de ciertos métodos.

Por ejemplo, para ir desde la pantalla de listar roles hacia la pantalla de editar roles es necesario el siguiente código:

(50)

50 Como puede observar se hace siempre uso del atributo myController. Con el puede usar los métodos:



unloadScreen: destruye la pantalla que se le pase por parámetro.



loadScreen: carga una pantalla. Se le debe enviar el nombre de la pantalla y el archivo

FXML de la pantalla, por medio de las constantes.



setScreen: hace visible una pantalla. Se le debe enviar el nombre de la pantalla por

medio de la constante indicada.

Es importante decir que al usar loadScreen se refresca o se construye una pantalla, llamando al método Initialize de la misma. El método Initialize se encuentra en cada clase controladora.

Si no se destruye una pantalla, esta continua activa en segundo plano, con el mismo estado que tenía ante de ir a otra pantalla.

(51)

51

6. MANEJO DE DIALOGOS CON JAVAFX 2

En algunas aplicaciones se necesitan ventanas flotantes (popups) con los cuales se pueda interactuar con el usuario de una manera sencilla, informándole de algo o para recoger datos sin necesidad de usar una nueva pantalla.

En Java usando el framework Swing existía la clase JOptionPane, la cual permitía usar diálogos flotantes. Una clase similar no existe en el framework JavaFX 2.

Para solucionar este problema se usó la librería javafx-dialogs-0.0.3.jar, descargable desde la URL: https://github.com/marcojakob/javafx-ui-sandbox/tree/master/javafx-dialogs/dist

Esta librería permite usar diálogos flotantes por medio de la clase Dialogs, la cual contiene métodos estáticos que se pueden acceder desde cualquier otra clase.

En la aplicación web CLUBMAT, los diálogos flotantes se usaron para informar errores o para confirmar operaciones como la acción eliminar de un CRUD.

Por ejemplo, para iniciar sesión en la aplicación web se debe ingresar un nombre de usuario y contraseña válidos. El siguiente código de la clase InicioController.java le informa al usuario que no ingreso el usuario.

Para poder usar la clase Dialogs es necesario hacer un import en la clase controladora como el siguiente:

import javafx.scene.control.Dialogs; El resultado gráfico es el siguiente:

(52)

52 Si desea leer más sobre esta librería y sus distintas funcionalidades vaya a la URL: http://edu.makery.ch/blog/2012/10/30/javafx-2-dialogs/

(53)

53

7. ESQUEMA DE DESARROLLO DE UN CRUD EN JAVAFX

2

A continuación se explicara cual fue la organización y el esquema seguido para crear un CRUD para la aplicación CLUBMAT: Gestión de clubes de matemáticas.

Para facilitar ese objetivo, por favor siga los siguientes pasos:

7.1. E

STRUCTURA DE LOS PROYECTOS QUE COMPONEN LA APLICACIÓN

WEB

CLUBMAT

1) Abra la IDE Netbeans 7.3 y vaya a: File >> Open Project… Seleccione el proyecto

empresarial CLUBMAT >> Click en Open Project.

Nota: el proyecto empresarial CLUBMAT se encuentra publicado en la página web del presente proyecto. Debe descomprimirlo en su disco duro y obtendrá una carpeta “CLUBMAT”. Esa carpeta es un proyecto que puede abrir con la IDE Netbeans.

2) Para que pueda observar la implementación del módulo web vaya a: CLUBMAT >> Java EE Modules >> Doble Click en “CLUBMAT-war.war”.

(54)

54

3) Netbeans le mostrara el modulo web de la aplicación web CLUBMAT.

Vaya a CLUBMAT-war >> Source packages. Despliegue cada uno de los paquetes.



Paquete co.edu.javeriana.clubmat.ejb: Aquí se encuentran todos los EJBs

generados a partir de las entidades JPA.



Paquete co.edu.javeriana.clubmat.jpa: Aquí se encuentran todas las Entidades de

persistencia implementadas. Escritas manualmente.



co.edu.javeriana.clubmat.tipo: Aquí se encuentran las enumeraciones usada en este

proyecto.



Paquete co.edu.javeriana.clubmat.ws: Aquí se encuentran las clases que

implementan los Servicios Web SOAP. Son generadas a partir de los EJB.

(55)

55 Vaya a File >> Open Project… >> CLUBMATClient >> Click en Open Project.

Nota: El proyecto CLUBMATClient se encuentra en el archivo [CLUBMAT]ICodigo.zip disponible en la página web del presente proyecto.

5) Importe la librería javafx-dialogs-0.0.3.jar al proyecto CLUBMATClient

6) Vaya a CLUBMATClient >> Source Packages

Como puede observar por cada CRUD se creó un paquete.

(56)

56 Como puede observar el paquete “co.edu.javeriana.clubmat.ScreensManager” contiene todos los archivos .fxml que componen la vista de las pantallas de la aplicación web CLUBMAT.

Los archivos .fxml que inician con el verbo “Crear” corresponden al diseño de pantallas de la acción crear de algún CRUD.

En algunos CRUD se usó una misma pantalla para las acciones: ver y editar, las dos a la vez. Un ejemplo de este caso es “VerEditarInstitucion.fxml”

(57)

57 Para crear un CRUD en JavaFX 2 es necesario crear mínimo tres clases controladores, cada una de ellas controla una vista .fxml, ubicada en el paquete ScreensManager.

Esto quiere decir que por cada CRUD se deben diseñar mínimo tres vistas. Por ejemplo, en el caso del CRUD de clubes se diseñaron tres vistas, las cuales fueron las siguientes:



CrearClub.fxml: Vista para la acción de crear un nuevo club.



ListarClub.fxml: Vista para la acción de ver todos los clubes por medio de una tabla.



VerEditarClub.fxml: Vista para las acciones de ver y editar un club.

Como puede observar por cada vista siempre hay una clase controladora, la relación es uno a uno en todos los casos.

7.2. P

ASOS GENERALES PARA CREAR UN

CRUD

EN

J

AVA

FX

2

9) Cree una vista FXML vacía para la acción de Listar (Click derecho sobre CLUBMATClient >> New >> Empty FXML…)

10) Siempre debe usar una clase controladora por cada FXML que cree.

11) La clase controladora para la acción “Listar” de un CRUD es la más compleja, pues requiere usar múltiples atributos gráficos para manejar la tabla.

(58)

58 Como puede observar por cada atributo de una entidad se debe usar un “TableColumn”.

Igualmente, por cada CRUD siempre existirán cuatro botones. Con ellos el usuario podrá realizar las operaciones: ver, editar, eliminar o registrar.

ObservableList es una estructura grafica que ayuda a manejar todas las entidades desplegadas en una tabla.

Finalmente, es necesario crear un POJO por cada CRUD, es decir una clase que mapea uno a uno los atributos de una entidad y los relaciona con cada una de las columnas de la tabla.

(59)

59 Por ejemplo, el POJO para la entidad Rol tiene el siguiente aspecto:

Nota: para dominar la interfaz gráfica de la acción listar de un CRUD y su respectiva clase controladora, es recomendable que examine detenidamente el código del presente proyecto, realizando pruebas hasta que logre entender como es su funcionamiento.

12) Después de terminar la acción “Listar” de un CRUD, realice las acciones “Ver” y “Editar”, las cuales son dos operaciones diseñadas en una sola pantalla. Es decir, se usa un solo .fxml y una sola clase controladora en estos casos.

Para entender cómo realizar las acciones “Ver” y “Editar” examine a profundidad los archivos: VerEditarClub.fxml y VerEditarClubController.java.

(60)

60

13) Realice la acción “Crear” de su CRUD. Examine los archivos: CrearClub.fxml y

CrearClubController.java a profundidad para entender cómo construir esta acción. Después de terminar la operación “Crear” habrá terminado satisfactoriamente la construcción de su CRUD.

14) Para que un CRUD diseñado en el framework JavaFX 2 logre conectarse con componentes de la plataforma Java EE 6, deben usarse Servicios Web SOAP.

En cada clase controladora de un CRUD debe llamar remotamente los métodos de negocio implementados en un EJB que necesite.

Por ejemplo en la clase controladora para la pantalla de editar un Rol, solo debe llamar una operación de Servicio Web: editRol. Esto se realiza por medio de la herramienta “Call Web Service Operation” de Netbeans. Vea la sección 3.4.2 Generar métodos auxiliares que invocan Un Servicio Web desde el proyecto JavaFX 2

(61)

61

8. REFERENCIAS Y BIBLIOGRAFÍA

[1] Oracle Corporation, “The Java EE 6 Tutorial”, 2013. [En línea]. Available:

http://docs.oracle.com/javaee/6/tutorial/doc/javaeetutorial6.pdf

[2] Weaver, Weiqi Gao, Stephen Chin, “Pro JavaFX 2: A Definitive Guide to Rich Clients with Java Technology”.2012.

[3] J.M. Calvo, "Web 2.0: ¿algún avance tecnológico o sólo Web Social?" [En línea]. Available: http://www.acis.org.co/fileadmin/Revista_116/Cinco.pdf

[4] The PostgreSQL Global Development Group, "PostgreSQL 9.2.4 Documentation", 2013. [En línea]. Available:

http://www.postgresql.org/files/documentation/pdf/9.2/postgresql-9.2-US.pdf

[5] A. Caidedo, “Manejando Multiples Pantallas en JavaFX (Parte I)”, 2013. [En

línea]. Available: