Tutorial de

construccin de una
aplicacin Java EE6
con interfaz JavaFX2
que invoca
componentes EJB
expuestos como
servicios REST

POR: JULIAN CAMILO ORTEGA MUOZ

2013

INTRODUCCION

Este tutorial tiene como propsito ensear el acoplamiento entre las tecnologas JavaFX2
y JavaEE6 con servicios web basados en REST.

Se mostrara el proceso de acoplamiento desde la misma instalacin de programas hasta la
interaccin del usuario con el programa y los componentes adicionales que se necesitan
para realizar una aplicacin empresarial en estas tecnologas.

Es importante tener un estndar en la realizacin de este tipo de aplicaciones y entender
como funcionan estos protocolos de comunicacin con estas tecnologas.

Espero sea de gran ayuda y funcione para realizar grandes aplicaciones empresariales en
estas tecnologas.

2
 TUTORIAL JAVAFX2-JAVA
EE6- REST


Tabla de contenido
INTRODUCCION .............................................................................................................. 2
1. INSTALACION Y CONFIGURACIN DE HERRAMIENTAS DE SOFTWARE ......................... 4
1.1 NETBEANS 7.3.1 + JDK 7u25 ............................................................................................................................. 4
1.2 PostGreSQL 9.2.4 ..................................................................................................................................................... 5
1.3 CONFIGURACION PARA WINDOWS 7 ........................................................................................................... 6
1.4 JAVAFX SCENE BUILDER 1.1 ............................................................................................................................. 7
1.5 ACOMPLAMIENTO JAVAFX SCENE BUILDER Y NETBEANS ................................................................ 8
1.6 LIBRERA PARA DIALOGOS FLOTANTES EN JAVAFX 2 ......................................................................... 9
2. REALIZACIN DEL DEMO JAVA EE6 CON INTERFAZ JAVAFX2 WEB SERVICES CON
PROTOCOLO DE COMUNICACIN REST ......................................................................... 10
2.1 CREACIN DE LA BASE DE DATOS, DE SUS TABLAS Y REGISTRO DE SU CONEXIN EN
NetBeans. ........................................................................................................................................................................ 10
2.2 CREACION DE TABLAS CON DATOS ............................................................................................................ 11
2.3 CONEXIN CON LA BASE DE DATOS POSTGRESQL DESDE NETBEANS ..................................... 12
2. 4 CREACION DEL PROYECTO EN NETBEANS ............................................................................................ 14
2.5 GENERACION DEL DESCRIPTOR DE PERSISTENCIA EN NETBEANS ........................................... 15
2.6 CREAR ENTIDADES A PARTIR DE LA BASE DE DATOS ...................................................................... 17
2.7 CREAR EJB A PARTIR DE ENTIDADES ....................................................................................................... 19
3. EXPONER EL EJB COMO UN SERVICIO WEB REST EN NETBEANS ................................. 20
3.1 PROBAR SERVICIO WEB REST ...................................................................................................................... 23
4. CREACIN EN NETBEANS DE UN PROYECTO JAVAFX 2 QUE INVOCAR SERVICIOS WEB
..................................................................................................................................... 25
4.1 CREACIN DEL PROYECTO ............................................................................................................................. 26
5. CONSUMIR SERVICIO WEB REST DESDE JAVA FX ....................................................... 27
5.1 CREAR CLIENTE DEL SERVICIO WEB REST DESDE LA APLICACIN JAVA FX2 ...................... 27
6. CONSUMIR SERVICIO DESDE INTERFAZ GRAFICA JAVA FX2 ....................................... 29
6.1 CREAR ENTIDAD TEAM EN LA APLICACIN JAVA FX2 ..................................................................... 29
6.2 VER DATOS JAVAFX2 UTILIZANDO WEB SERVICES REST ............................................................... 30
6.3 CREAR INSTANCIA UTILIZANDO SERVICIOS WEB REST .................................................................. 35
6.4 ACTUALIZAR INSTANCIA UTILIZANDO SERVICIOS WEB REST ..................................................... 37
6.5 ELIMINAR INSTANCIA UTILIZANDO SERVICIOS WEB REST ........................................................... 39
7. METODOS DE NEGOCIO JAVAFX2 Y JAVAEE6 CON SERVICIOS REST ........................... 41
8. NAVEGACIN ENTRE ESCENAS JAVAFX2 ................................................................... 43
9. INVOCACIN DE LA APLICACIN JAVAFX 2 A TRAVS DEL NAVEGADOR WEB ............ 43
10. CALENDARIO, SELECCIONADOR DE ARCHIVOS CON JAVAFX2 Y MANEJO DE
IMGENES Y DOCUMENTOS. ........................................................................................ 45
CALENDARIO ................................................................................................................................................................ 45
SELECCIONADOR DE ARCHIVOS (FILE CHOOSER) ...................................................................................... 47
MANEJO DE DOCUMENTOS E IMGENES ........................................................................................................ 48

1. INSTALACION Y CONFIGURACIN DE HERRAMIENTAS DE

SOFTWARE

Para poder desarrollar aplicaciones empresariales web con tecnologas JavaFX2 y JavaEE6
se necesita un software respectivo para cada tecnologa, estas se integran para realizar las
aplicaciones. A continuacin se presentaran las herramientas de software necesarias y su
configuracin.

1.1 NETBEANS 7.3.1 + JDK 7u25

Primero se necesita la instalacin del IDE (Netbeans) para realizar el programa y el JDK
(Java Development Kit) que provee las herramientas de desarrollo para la creacin de
programas Java.

Ingresar a la siguiente direccin para descargar las dos herramientas.

http://www.oracle.com/technetwork/java/javase/downloads/index.html

4
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Descargar el kit para el tipo de sistema operativo en el que se este trabajando (Windows,
Mac OS, Linux).

La versin del JDK en el momento de escribir este tutorial es la 7u25 y el NetBeans es
7.3.1.

NetBeans incluye:

Driver actualizado para PostgreSQL 9.
Servidor de aplicaciones Glassfish 4.
Soporte para trabajar con JavaFX 2.

Luego de estos pasos instalar los programas con los instaladores que se descargaron
siguiendo los pasos que se indiquen.

1.2 PostGreSQL 9.2.4

PostGreSql es el manejador de base de datos que se utilizara para manejar los datos del
programa. Para descargarlo ir a la siguiente direccin web.

http://www.enterprisedb.com/products-services-training/pgdownload

5


Descargar la versin 9.2.4 del sistema operativo que se este utilizando actualmente
(Windows, Mac OS, Linux).

Ejecute el instalador y siga los pasos del Wizard para completar la instalacin. Recuerde
proporcionar una contrasea para el superusuario de Postgres.

Recomendacin:
Usuario: postgres
Contrasean: postgres

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

1.3 CONFIGURACION PARA WINDOWS 7

1. Verifique que su sistema operativo tiene activo el servicio Inicio de sesin
secundario. Para esto vaya a Inicio >> Panel de control >> Herramientas
administrativas >> Servicios >> Inicio de sesin secundario.
2. En el campo Tipo de inicio elija Automtico. Haga Click en aceptar.
3. Verifique que el estado de este servicio se encuentre en Iniciado. Si no es as ,
haga Click derecho sobre Inicio de sesin secundario >> Iniciar. El servicio debe
mostrarse de la siguiente manera:

6
 TUTORIAL JAVAFX2-JAVA
EE6- REST

1.4 JAVAFX SCENE BUILDER 1.1

Este programa funciona para editar manualmente los componentes grficos de usuario
para JavaFX 2. Es muy importante para editar las pantallas de usuario con facilidad.

Para descargar este programa dirigirse a la siguiente direccin:

http://www.oracle.com/technetwork/java/javafx/downloads/index.html

7


Descargar el programa para el sistema operativo con el cual se este trabajando (Windows,
Mac OS, Linux).

1.5 ACOMPLAMIENTO JAVAFX SCENE BUILDER Y NETBEANS

Es importante que estos programas estn acoplados para poder utilizarlos
simultneamente. En el momento de la instalacin esto se realiza automticamente.
Para asegurarse que NetBeans conoce la herramienta JavaFX Scene Builder es necesario
que se tenga instalado el Plugin de la herramienta.

Para saber esto se realiza lo siguiente:

1. Se abre NetBeans una vez instalado y se va a la pestaa Tools (Herramientas) y se
escoge la opcin plugins.

8
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Luego se verifica si esta instalado el plugin de la herramienta JavaFX Scene Builder, si no se
encuentra instalado revisar en los plugins disponibles (Available Plugins), buscarlo e
instalarlo.

1.6 LIBRERA PARA DIALOGOS FLOTANTES EN JAVAFX 2

Esta librera sirve para soportar las ventanas instantneas que se quieran implementar en
el programa.
Descargue la librera javafx-dialogs-0.0.3.jar. La puede descargar de la URL:

https://github.com/marcojakob/javafx-ui-sandbox/tree/master/javafx-dialogs/dist

Esta librera se importa desde la aplicacin CLIENTE de javaFX2 en el folder de libreras.
(Ver seccin: Consumir servicios desde interfaz grafica Javafx2).

9
2. REALIZACIN DEL DEMO JAVA EE6 CON INTERFAZ JAVAFX2
WEB SERVICES CON PROTOCOLO DE COMUNICACIN REST

2.1 CREACIN DE LA BASE DE DATOS, DE SUS TABLAS Y REGISTRO DE SU

CONEXIN EN NetBeans.

El primer paso es crear la base de datos en Postgresql y la tabla con los datos que se van a
manejar.

Se conecta la base de datos de Postgresql local con la contrasea proporcionada en la
instalacin.
Vaya a Bases de datos >> postgres.
En la barra de herramientas haga Click en Ejecutar consultas SQL arbitrarias.

Copie y pegue el siguiente Script para crear el usuario "usuariodemo":


CREATE USER usuariodemo LOGIN
NOSUPERUSER INHERIT CREATEDB NOCREATEROLE
ENCRYPTED PASSWORD 'usuariodemo';

Ejecute el Script haciendo Click en Ejecutar consulta.

10
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Nota: En el script reemplace usuariodemo por el nombre de usuario que usted desee
crear.

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 "demo" cuyo usuario dueo ser
"usuariodemo":


CREATE DATABASE demo
WITH OWNER = usuariodemo
ENCODING = 'UTF8';


Ejecute el Script haciendo Click en Ejecutar consulta.

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 recin creada. Espere
un momento, haga Click en Bases de Datos y ejecute la opcin refrescar hasta que
salga listada la base de datos.

2.2 CREACION DE TABLAS CON DATOS

Para este demo vamos a crear una tabla TEAM con unos atributos y le vamos insertar
unos valores. Esto es solo para la demostracin.

Primero deber crear en PG Admin II un nuevo server para la base de datos demo;

11
Luego debe usar ese nuevo server para conectarse a la base de datos demo y luego abrir
el editor de consultas SQL. De esta manera las tablas que se creen quedarn a nombre del
usuario dueo de la base de datos demo.

Ejecutar el siguiente Script en la base de datos demo para crear la tabla TEAM

CREATE TABLE TEAM(

TEAM_ID INTEGER NOT NULL,
TEAMNAME VARCHAR(15),
COUNTRY VARCHAR(15),
PRIMARY KEY (TEAM_ID)
);

Ejecutar el siguiente Script en la base de datos demo para insertar valores a la tabla
TEAM.

INSERT INTO TEAM VALUES (1, 'Barcelona', 'Espana');
INSERT INTO TEAM VALUES (2,'Real Madrid', 'Espana');
INSERT INTO TEAM VALUES (3,'Milan', 'Italia');

2.3 CONEXIN CON LA BASE DE DATOS POSTGRESQL DESDE NETBEANS

Abra la IDE Netbeans, dirjase a la pestaa Services >> Databases >> Drivers.
La IDE Netbeans en su versin 7 o superior incluye el driver para PostgreSQL.
Compruebe que sale listado.

12
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Haga Click derecho sobre PostgreSQL y seleccione Connect Using... y aparecer una
ventana en la cual tiene que llenar todos los datos requeridos. Debe quedar algo como
lo siguiente:

13

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 conexin se realiz exitosamente le debe
salir un aviso dicindole Connection Succeeded. Despus haga Click en Next.

En el campo Select schema: elija public. Haga Click en Finish.

Aqu puede comprobar que desde NetBeans puede ver la tabla TEAM de la base de datos
demo y tambin puede ver su contenido.

2. 4 CREACION DEL PROYECTO EN NETBEANS

Ahora lo que debe hacer es crear un proyecto para la aplicacin empresarial Java EE 6.

Vaya a File >> New Project... >> Java EE >> Enterprise Aplication y despus
haga Click en Next.
Elija el nombre de proyecto que desee, luego haga Click en el botn Next.
Desactive la opcin Create EJB Module. (Esto debido a que en el modulo web se
creara el modulo de EJB dados expuestos como servicios web REST).
Luego haga Click en Finish. Debe quedar lo siguiente:

14
 TUTORIAL JAVAFX2-JAVA
EE6- REST

2.5 GENERACION DEL DESCRIPTOR DE PERSISTENCIA EN NETBEANS

Ahora debe crear una unidad de persistencia. Para esto haga Click derecho sobre el
modulo web de la aplicacin (proyecto EnterpriseApplication1-war) y vaya a New >>
Other... >> Persistence >> Persistence Unit.

15
 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.
En Database Connection seleccione la conexin PostgreSQL a la base de datos que
usted cre. En JNDI Name coloque el nombre que desee.
Haga Click en OK. Debe quedarle algo como en la siguiente ilustracin:

Debe complementar el archivo persistence.xml que fue generado por Netbeans.
Vaya al mdulo web de la aplicacin >> Configuration Files >> persistence.xml
Haga Click en Source.

Despus de la lnea:

<property name="eclipselink.ddl-generation" value="create-tables"/>

Agregue el siguiente cdigo, editando los datos segn el nombre de su base de datos,
usuario y contrasea:

<property name="eclipselink.target-database" value="PostgreSQL"/>
<property name="javax.persistence.jdbc.driver" value="org.postgresql.Driver"/>
<property name="javax.persistence.jdbc.url"
value="jdbc:postgresql://localhost:5432/demo"/>
<property name="javax.persistence.jdbc.user" value="usuariodemo"/>
<property name="javax.persistence.jdbc.password" value="usuariodemo"/>
<property name="eclipselink.logging.level" value="INFO"/>

16
 TUTORIAL JAVAFX2-JAVA
EE6- REST

2.6 CREAR ENTIDADES A PARTIR DE LA BASE DE DATOS

Vamos a crear la entidad TEAM a partir de la base de datos. Para esto haga Click
derecho sobre el modulo web de la aplicacin (proyecto EnterpriseApplication1-
war) y vaya a New >> Other... >> Persistence >> Entity Classes from Database.

17
 Luego seleccionar la base de datos del proyecto y elegir la tabla Team para generar la
entidad a partir de la tabla.

18
 TUTORIAL JAVAFX2-JAVA
EE6- REST


NOTA: En la siguiente ventana es recomendable cambiar el tipo de coleccin por List,
ya que es mas fcil manejar informacin en listas. Tambin es importante trabajar con
paquetes estndares, por ejemplo: co.edu.javeriana.miproyecto.entities.

2.7 CREAR EJB A PARTIR DE ENTIDADES

Haga Click derecho sobre el modulo web de su proyecto >> New >> Other... >>
Enterprise JavaBeans >> Session Beans for Entity Classes. Haga Click en Next.

Luego adicione las entidades para crear los EJB a partir de ellas

19


Active las interfaces que necesite para su proyecto (local, remota).

Finalmente, dele un nombre al package donde quiere que se almacenen los EJB y de Click
en Finish.

Se generan dos archivos, un AbstractFacade.java y un TeamFacade.java.

En RolFacade es donde usted implementar los mtodos de negocio para la entidad Rol.
AbstractFacade es una clase abstracta que tiene mtodos genricos para soportar
operaciones CRUD (crear, eliminar, buscar, etc.) para cualquier entidad.

3. EXPONER EL EJB COMO UN SERVICIO WEB REST EN NETBEANS

20
 TUTORIAL JAVAFX2-JAVA
EE6- REST


El servicio Rest servir para invocar operaciones CRUD sobre una entitad, para lo cual
generar un EJB con anotaciones REST con mtodos para operar sobre la entidad.

Para exponer el EJB como un servicio web REST haremos los siguiente:

Hacer Click derecho sobre el modulo web de su proyecto >> New >> Other >> Web
Services >> RESTful Web Services from Entity Classes.

Luego seleccionar la entidad Team para generar un servicio REST a partir de esta.

21


Finalmente darle un nombre al paquete de los Web Services para guardar las clases
que va a generar el servicio dar Finish.

22
 TUTORIAL JAVAFX2-JAVA
EE6- REST


El archivo genera el Servicio Web con todos sus http methods. Tambin genera 3 archivos
Java dentro del paquete que se indic para los servicios que son los siguientes:

AbstractFacade: Sirve como una clase padre para todos los dems Facade Clases.
TeamFacadeREST: Es una clase Facade que extiende de la clase AbstractFacade y los
mtodos que esta implementa de crear, borrar, actualizar, contar, etc. Esta clase tiene las
anotaciones http de los mtodos que se utilizan para estos llamados a mtodos http y
reciben los formatos XML Y JSON.

GET: Peticiones de lectura (Read)
POST: Crea un nuevo recurso (Create)
PUT: Actualiza el estado de un recurso (Update)
DELETE: Elimina el recurso.

ApplicationConfig: Esta clase es generada por el IDE Netbeans, y registra todos los
recursos fundamentales REST creados en el proyecto. Por favor, NO EDITAR esta clase a
menos que usted realmente necesita entender los resultados de los cambios.

3.1 PROBAR SERVICIO WEB REST

Para probar que es servicio web generado funciona correctamente se realiza lo siguiente:

Dar Click derecho en el modulo web de la aplicacin (EnterpriseApplication1-war)
seleccionar CLEAN AND BUILD, luego seleccionar DEPLOY para exponer los servicios al
servidor.

23
 En modulo web del proyecto buscar el folder RESTful Web Services y hacer Click
derecho en el. Luego hacer Click en Test RESTful Web Services, tal como muestra la
imagen.
En la configuracin de la prueba elegir que sea local y luego dar ok.

Luego la aplicacin va a abrir un browser para realizar las pruebas del Servicio Web.
Elegir el servicio web elegido, en este caso entities.team y probar los mtodos http
mencionados anteriormente en el formato elegido (XML, JSON) para probar que
efectivamente funciona con la base de datos.
En la siguiente ventana se muestra un ejemplo de la prueba al Servicio Web

24
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Para probar un mtodo PUT para editar o POST para crear alguna instancia, seleccionar el
mtodo de la lista y en el campo para ingresar la informacin copiar una instancia
obtenido con un mtodo GET y editarla en el formato XML o JSON para crear o editar.

4. CREACIN EN NETBEANS DE UN PROYECTO JAVAFX 2 QUE

INVOCAR SERVICIOS WEB

25
4.1 CREACIN DEL PROYECTO

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.

Elija el nombre de proyecto que desee.
En el campo FXML Name coloque el nombre que quiere colocarle a la pantalla
principal de su aplicacin JavaFX2. Haga Click en Finish.

Netbeans genera tres archivos en su proyecto.

26
 TUTORIAL JAVAFX2-JAVA
EE6- REST



JavaFXApplication9.java (vara segn el nombre que le haya dado al proyecto): Esta
clase es la encargada de ejecutar la aplicacin. Carga el archivo PantallaInicial.fxml.
PantallaInicial.fxml: Archivo en lenguaje XML que contiene la descripcin de todo
diseo grfico de la pantalla inicial. Este archivo al hacer doble Click automticamente
abrir el programa de edicin instalado previamente JavaFX Scene Builder para editar
la parte grafica con facilidad.
PantallaInicialController.java: Clase que controla los elementos grficos descritos en
el archivo PantallaInicial.fxml. Ac tambin se implementan los mtodos de negocio
necesarios para la pantalla inicial.

5. CONSUMIR SERVICIO WEB REST DESDE JAVA FX

5.1 CREAR CLIENTE DEL SERVICIO WEB REST DESDE LA APLICACIN JAVA
FX2

Para consumir el servicio web creado previamente debemos crear un cliente de ese
servicio en la aplicacin JavaFX2.

Hacer Click derecho en el proyecto JavaFX2 >> New >> Other >> Web Services >>
RESTful Java Client.

27


Dele un nombre a la clase y al paquete donde se va a encontrar la clase. Luego buscar
el servicio web creado en el modulo web de la aplicacin tal como muestra la siguiente
imagen y dar Finish. Tambin es importante trabajar con paquetes estndares, por
ejemplo: co.edu.javeriana.miproyecto.webservices.

28
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Se genera una clase ClienteRest.java con los mtodos que presta el servicio web REST
creado. Para hacer uso de la clase en nuestra aplicacin JavaFX2, es necesario nicamente
crear una instancia de esta clase y llamar a los mtodos que necesitemos.

6. CONSUMIR SERVICIO DESDE INTERFAZ GRAFICA JAVA FX2

A continuacin vamos a hacer una tabla en JavaFX2 para mostrar los datos contenidos en
la base de datos haciendo uso de los servicios web REST creados anteriormente.

6.1 CREAR ENTIDAD TEAM EN LA APLICACIN JAVA FX2

Antes de empezar es importante crear la entidad TEAM en el proyecto de JavaFX2, para
que se reconozca el tipo de dato en memoria con los cuales vamos a interactuar en el
demo.

Para esto hacemos Click derecho en la aplicacin JavaFX2 >> New >> Other >> Persistence
>> Entity Classes from Database.

29
Luego seguimos los pasos anteriormente descritos (Ver seccin: Crear entidades a partir
de la base de datos) y creamos la entidad Team.

NOTA: Recuerde quitar la opcin de Create Persistance Unit al crear la entidad. Tal como
muestra la imagen. Esto debido a que la unidad de persistencia ser creada y configurada
en el modulo web de la aplicacin.

6.2 VER DATOS JAVAFX2 UTILIZANDO WEB SERVICES REST

En la aplicacin JavaFX2 creada, en la carpeta javafxapplication3, buscamos el archivo
PantallaInicial.fxml. Esta ser nuestra pantalla inicial y vamos a hacer doble Click en
ella.

Esta pantalla nos abrir automticamente el programa JavaFX Scene Builder para
poder editarla.

30
 TUTORIAL JAVAFX2-JAVA
EE6- REST


Vamos a eliminar el botn que se encuentra actualmente en la pantalla y haciendo uso
de la paleta de componentes al lado izquierdo, vamos a arrastrar a la pantalla 3
botones (Button) para hacer las acciones de crear, actualizar y borrar team.
Tambien vamos a arrastrar el componente Table View para mostrar en pantalla los
datos de los teams.
En este caso, la tabla team tiene 3 atributos, por lo cual si hace falta alguna columna
en la tabla, arrastrar el componente Table Column y soltarla sobre la tabla
previamente creada.
Finalmente se guardara en File >> Save.
La pantalla quedara de este modo.

Luego de este proceso vamos a mostrar los datos de la tabla nicamente.

Nos dirigimos al controlador de la pantalla PantallaInicialController.java y vamos a
declarar los componentes creados en el editor visual. Copiamos y pegamos el siguiente
cdigo.

@FXML
private TableView< Team > tablaTeams;
@FXML
private TableColumn columnaId;
@FXML

31
 private TableColumn columnaNombre;
@FXML
private TableColumn columnaPais;

public static ObservableList< Team> teams; //Guarda los teams

Los nombres de los atributos salen de los atributos de la entidad TEAM que vamos a
mostrar en la tabla.

ES IMPORTANTE QUE LOS COMPONENTES EN EL EDITOR VISUAL TENGAN EL MISMO
ID QUE EN EL CONTROLADOR. DE OTRO MODO EL CONTROLADOR NO RECONOCERIA
LOS COMPONENTES.
ES RECOMENDABLE DECLARAR LAS VARIABLES EN EL CONTROLADOR PRIMERO Y
GUARDAR, LUEGO EL EDITOR VISUAL RECONOCERA LAS VARIABLES Y SE LE PUEDE
ASIGNAR AL COMPONENTE.

32
 TUTORIAL JAVAFX2-JAVA
EE6- REST

Eliminar elementos que no se van a usar como el label y el mtodo
handleButtonAction.
Luego en la clase PantallaInicialController.java existe el mtodo initialize que va a
realizar la accin que se quiere al iniciar la pantalla, en este mtodo vamos a realizar el
llamado al web service para que cargue los datos al iniciar.

33
 En ese mtodo copiar y pegar el siguiente cdigo:

this.columnaId.setCellValueFactory( new PropertyValueFactory< Team, Integer >( "teamId" ) );
this.columnaNombre.setCellValueFactory( new PropertyValueFactory< Team, String >( "teamname" ) );
this.columnaPais.setCellValueFactory( new PropertyValueFactory< Team, String >( "country" ) );

ClienteRest teamClient = new ClienteRest();
ClientResponse response = teamClient.findAll_XML(ClientResponse.class);

GenericType<List<Team>> genericType = new GenericType<List<Team>>() {};
// Returns an ArrayList of Players from the web service
List<Team> data = new ArrayList<Team>();
data = (response.getEntity(genericType));
teams = FXCollections.observableArrayList( );
teams.addAll(data);
System.out.println("TEAMS : "+teams.size());
tablaTeams.setItems(teams);


Este cdigo declara las columnas de la tabla y crea una instancia del cliente REST a travs
del cual se llama al mtodo findAll_XML. Este retorna la informacin en un XML de los
Teams y se transforma en una lista de Team para hacer mas fcil la manipulacin de la
informacin. Finalmente se agregan los datos a la tablaTeams.

Para comprobar el cdigo se Invocan las tareas (ANT) Clean and Build en la aplicacin
JavaFX2 y se selecciona Run posteriormente y veremos la siguiente pantalla.

34
 TUTORIAL JAVAFX2-JAVA
EE6- REST

6.3 CREAR INSTANCIA UTILIZANDO SERVICIOS WEB REST

El siguiente paso ser crear una instancia de un TEAM y almacenarla en la base de datos.

En la clase controlador PantallaInicialController.java vamos a crear un mtodo que
ser llamado al accionar el botn Crear, que fue previamente creado en el editor
visual.
En la clase PantallaInicialController.java copiar y pegar el siguiente cdigo:



@FXML
private void crearTeam(ActionEvent event){

ClienteRest teamClient = new ClienteRest();

Team miTeam = new Team();
miTeam.setTeamId(teams.size()+10);
miTeam.setTeamname("Chelsea");
miTeam.setCountry("Inglaterra");
teamClient.create_JSON(miTeam);
System.out.println("Se ha agregado el TEAM Satisfactoriamente);
}

35

Ahora en el editor PantallaInicial.fxml hay que decirle al botn crear que ejecute ese
mtodo cuando se ejecute la accin de presionar el botn. Esto se hace de la siguiente
forma.

Se da doble Click en PantallaInicial.fxml y se abre el editor Scene Builder
Se hace Click en el botn Agregar y se le adiciona el mtodo crearTeam tal como
muestra la imagen.

Finalmente se da guarda el archivo, se ejecuta el proyecto y se da la opcin de agregar en
la pantalla. El resultado ser el siguiente.

36
 TUTORIAL JAVAFX2-JAVA
EE6- REST

NOTA: Para refrescar los datos de la pantalla se realiza con la navegacin de las
pantallas (Ver seccin Navegacin de Pantallas JavaFX2 mas adelante).

6.4 ACTUALIZAR INSTANCIA UTILIZANDO SERVICIOS WEB REST

Copiar y pegar el siguiente cdigo en la clase controladora.

@FXML
private void editarTeam(ActionEvent event) {

ClienteRest teamClient = new ClienteRest();
ClientResponse response = teamClient.find_XML(ClientResponse.class, "2");
GenericType<Team> genericType = new GenericType<Team>() {};

Team team = response.getEntity(genericType);
team.setTeamname("Valencia");

teamClient.edit_XML(team);
System.out.println("Se ha editado el TEAM Satisfactoriamente);

}

37


Este mtodo actualizara la instancia con el Id = 2 y actualizara en la base de datos el
valor del nombre del equipo por Valencia.
Realizar los pasos anteriores (Vistos en la seccin de Crear instancia) para adicionar
este mtodo a la accin del botn Editar para que se ejecute cuando se haga Click en
el botn.
Haga Clean and Build en el proyecto y ejectelo, accione el botn editar y verifique en
la base de datos el cambio O volviendo a ejecutar la aplicacin para ver el cambio.

El resultado ser el siguiente:

38
 TUTORIAL JAVAFX2-JAVA
EE6- REST

6.5 ELIMINAR INSTANCIA UTILIZANDO SERVICIOS WEB REST

Para eliminar se realizan los mismos procedimientos que se realizaron para crear y editar
pero en el mtodo de eliminar se pega el siguiente cdigo.

@FXML
private void eliminarTeam(ActionEvent event) {

ClienteRest teamClient = new ClienteRest();
teamClient.remove("1");

}

39

Este mtodo eliminara el team con el ID = 1.
Recuerde adicionar el mtodo al botn que hace la accin en el editor visual.
Limpie y ejecute la aplicacin y dele la accin Eliminar.

El resultado ser el siguiente:

40
 TUTORIAL JAVAFX2-JAVA
EE6- REST

7. METODOS DE NEGOCIO JAVAFX2 Y JAVAEE6 CON SERVICIOS

REST

Los servicios REST que vimos anteriormente son generados automticamente a partir de
nuestras entidades. Es importante saber como se pueden crear mtodos de negocio por
nuestra cuenta.
Los Servicios REST en el servidor son los mismos EJB se la aplicacin, por lo tanto, se
crea una clase Java normal y se copia la siguiente informacin para convertirlo en un
EJB REST.

@Stateless
@Path("co.edu.javeriana.clubmat.jpa.team")
public class ServicioRestNegocio {

@PersistenceContext(unitName = "Demo-warPU")
private EntityManager em;

}

Cuando se da la anotacin @Stateless se determina que es un EJB, Cuando se da la
anotacin @Path se determina que es un servicio REST ya que el path determina la
ruta o URI del recurso y es un paradigma propio de estos servicios REST.
Luego se adicionan los mtodos que el servicio REST va a tener como servicios. Entre
las anotaciones importantes para crear los mtodos se encuentran las siguientes

41

@POST: Para crear instancias
@PUT: Para editar instancias
@GET: Para obtener instancias
@DELETE: Para borrar instancias

Tomando como ejemplo los servicios REST creados a partir de las entidades, vamos a
crear un mtodo para obtener los equipos a partir del pais de acuerdo a nuestra tabla
de ejemplo.
En nuestra clase ServicioRestNegocio vamos a pegar el siguiente cdigo e importar las
respectivas libreras REST:

@GET
@Path("{country}")
@Produces("application/xml")
public List<Team> getTeamsCountry(@PathParam("country ") String country) {
Query query = em.createNamedQuery("Team.findByCountry");
query.setParameter("country ", country);
List resultList = query.getResultList();
return resultList;
}

Este mtodo recibe por parmetro el nombre del pas y produce un XML con la lista
de TEAMS que pertenecen a este nombre de pas.
El Query que se llama esta en la entidad TEAM contiene la siguiente informacin:

@NamedQuery(name = "Team.findByCountry ", query = "SELECT t FROM Team t WHERE t.
country = :country")})

Este Query va a traer los TEAM que tengan el country igual al parmetro que entra.
Con este mtodo ya se ha creado nuestro mtodo de negocio REST.

La anotacin @Path en el mtodo significa el parmetro que entra por la URI cuando
se realiza la peticin de ese mtodo.

La anotacin @Produces significa que ese mtodo producir un resultado en el
formato XML, existe la anotacin @Consumes donde es lo contrario, consume una
informacin en el formato XML o JSON que son los formatos que utilizan estos
servicios REST.

Posterior a esto el uso de estos mtodos de negocios se consumen de
igual forma que los generados a partir de las entidades. Solo es
necesario crear los clientes REST a partir de los nuevos EJB e invocar los

42
 TUTORIAL JAVAFX2-JAVA
EE6- REST


servicios que nos presta. (Ver Seccin: CONSUMIR SERVICIO WEB
REST DESDE JAVA FX).

8. NAVEGACIN ENTRE ESCENAS JAVAFX2

El concepto de JavaFX2 es de escenas (SCENE) y escenario (STAGE).
Uno crea escenas y las pone en el escenario.

Respecto al proyecto que se esta realizando, cuando se quiere navegar entre paginas se
llaman los siguientes mtodos.

Funciona con una estructura MAP donde almacena un ndice para la pagina y el archivo
.fxml.

En el caso particular de la imagen, se quite del escenario la escena Sample
(UNLOADSCREEN), se vuelve a cargar nuevamente asignando un ndice para la pagina
(LOADSCREEN) y finalmente la pone en el escenario (SETSCREEN).

Este procedimiento se utiliza para refrescar la pagina o poder navegar a otras paginas.

En el siguiente link explican la mejor forma de realizar la navegacin entre escenas en
JavaFX2 y como funciona teniendo en cuenta esta idea.
https://blogs.oracle.com/acaicedo/entry/manejando_multiples_pantallas_en_javafx

Este blog contiene la explicacin detallada de la navegacin, como se pueden refrescar los
datos de una escena y el cdigo fuente de cada cdigo que se necesita.
Tambin se encuentra el tutorial en video y el cdigo fuente de la informacin.

9. INVOCACIN DE LA APLICACIN JAVAFX 2 A TRAVS DEL

NAVEGADOR WEB

43
Para que la aplicacin JavaFX 2 construida pueda ser ejecutada en el navegador web debe
realizar los siguientes pasos:

Vaya a la carpeta de su proyecto JavaFX 2, dentro de ella hay una carpeta llamada
dist. Cpiela.

Vaya a la carpeta de su proyecto empresarial Java EE y luego a la carpeta del mdulo
web de su proyecto. Dentro de esta ltima hay una carpeta llamada web. brala.

Pegue la carpeta dist en la carpeta web.

Abra la carpeta dist que acab de copiar en la carpeta web. All encontrar un
nico archivo html. A ese archivo debe cambiarle el nombre a index.html.

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

Se le abre el navegador web con una pgina que dice Hello World! Esa pgina web
corresponde al index.jsp que se encuentra en la carpeta web del mdulo web de su
proyecto.

En la barra de direcciones, conserve la direccin que se encuentra y adale la palabra
dist. Se le debe abrir una pgina web en donde sale cargndose una aplicacin javaFX.

Diga que acepta los riesgos y que desea ejecutar la aplicacin. Pruebe la aplicacin con
diversos datos.

Si no se muestra la interfaz grfica por problemas de firmas de las libreras, pruebe a
despublicar la aplicacin Java EE (con undeploy en services/Glassfish/applications), y
luego reinicie el servidor Glassfish, y vuelva a construir el dist de la aplicacin Java FX 2
(con Clean & Build) y repetir los pasos aqu descritos.


NOTA: index.jsp debe redirigir el control al dist/index.html o sea que su
contenido debe ser el siguiente:

44
 TUTORIAL JAVAFX2-JAVA
EE6- REST



<html>
<head>
<meta http-equiv="Refresh" content="0; URL=dist/index.html" />
</head>
</html>

10. CALENDARIO, SELECCIONADOR DE ARCHIVOS CON JAVAFX2 Y

MANEJO DE IMGENES Y DOCUMENTOS.

Dos componentes importantes para cualquier aplicacin son el calendario para
seleccionar fechas con rapidez sin preocuparse por el formato y el seleccionador de
archivos del computador.

Estos componentes bsicos no se encuentran en la paleta de opciones de JavaFX Scene
Builder que es nuestro editor de JavaFX2. Por este motivo mostrare como se pueden
adquirir estos componentes para tenerlos en cualquier aplicacin.

CALENDARIO

Descargar la librera que contiene la informacin del calendario y la hoja de estilos del
calendario para que tenga la siguiente apariencia.

45
Sitio Descarga:
http://edu.makery.ch/blog/2013/01/07/javafx-date-picker/

Archivos:
schudt-javafx-datepicker-0.0.2.jar
DatePicker.css

Luego agregar la librera (.jar) al proyecto y adicionar en nuestra carpeta de proyecto
nuestra hoja de estilos.

En nuestro archivo .FXML donde se quiera agregar un calendario, seleccionamos de la
paleta de componentes el componente GRIDPANE y lo arrastramos hasta nuestra
pantalla.

Como vimos anteriormente se le da un ID al componente y se crea el mismo
componente en nuestro controlador.

@FXML
private GridPane gridPane;

Luego en nuestro controlador creamos una instancia del DatePicker que referencia a la
lireria que agregamos anteriormente

private DatePicker fechaDatePicker;

En el mtodo initialize de nuestro controlador copiar y pegar el siguiente cdigo:

46
 TUTORIAL JAVAFX2-JAVA
EE6- REST


//CALENDARIO

fechaDatePicker = new DatePicker(Locale.ENGLISH);
fechaDatePicker.setDateFormat(new SimpleDateFormat("yyyy-MM-dd"));
fechaDatePicker.getCalendarView().todayButtonTextProperty().set("Today");
fechaDatePicker.getCalendarView().setShowWeeks(false);
fechaDatePicker.getStylesheets().add("rutaHojaEstilos/DatePicker.css");
gridPane.add(fechaDatePicker, 1, 5);

Ten en cuenta la ruta donde agregaste la hoja de estilos .

Cuando corras tu programa al inicializar esa escena tu GRIDPANE ser un calendario
donde podrs elegir la fecha.

SELECCIONADOR DE ARCHIVOS (FILE CHOOSER)

Este componente sirve para capturar archivos de nuestro computador y utilizarlos en
nuestra aplicacin. Para tener un seleccionador de archivos realizar lo siguiente:

Agregar un botn normal de nuestra paleta de Javafx Scene Builder a la pantalla.
Copiar y pegar el siguiente cdigo en el controlador de esa pantalla.

@FXML
private void cargarArchivo(ActionEvent event) {
FileChooser fileChooser = new FileChooser();
fileChooser.setTitle("Open Resource File");
File file;
file = fileChooser.showOpenDialog(STAGE);
System.out.println("FILE : "+file);
textFoto.setText(file.toString());

}

En la 6ta lnea del cdigo se tiene que pasar nuestro STAGE que esta en nuestro
mtodo START de la aplicacin. Por esto es recomendable dejar la instancia STATIC
para poder acceder a ella en cualquier controlador de nuestra aplicacin.

public static Stage stage;

Al botn agregado al inicio se le da la accin de ejecutar el mtodo de cargar el archivo
que vimos anteriormente y al ejecutar el programa se vera la siguiente pantalla.

47


MANEJO DE DOCUMENTOS E IMGENES

JavaFX2 tiene una librera especial para el manejo de imgenes y documentos cuando
quieren ser mostrados o publicados en algn componente de JavaFX2.

La clase utilizada es: HostServices

En la clase de inicio declarar una instancia esttica para utilizarla en cualquier parte
del proyecto:

public static HostServices hostServices;

Luego a la instancia se debe asociar todos los componentes y mtodos de la clase con
la siguiente instruccin:

hostServices = getHostServices();

Luego en cualquier parte del documento se llama la instancia estatica y se
llama al mtodo para escribir y mostrar documentos.

hostServices.showDocument("https://www.google.com.co");

48
 TUTORIAL JAVAFX2-JAVA
EE6- REST


String myImage =
hostServices.resolveURI(hostServices.getDocumentBase(),"HV.pdf");
ClubmatCliente.hostServices.showDocument(myImage);

NOTA: Por cuestiones de seguridad es mejor manejar un directorio web de
documentos e imgenes y solo utilizar la URL para referenciar.

49