Download Tutorial de construcción de una aplicación Java EE6 con interfaz

Tutorial de
construcción de una
aplicación Java EE6
con interfaz JavaFX2
que invoca
componentes EJB
expuestos como
servicios REST
POR: JULIAN CAMILO ORTEGA MUÑOZ 2013 INTRODUCCION Este tutorial tiene como propósito enseñar el acoplamiento entre las tecnologías JavaFX2 y JavaEE6 con servicios web basados en REST. Se mostrara el proceso de acoplamiento desde la misma instalación de programas hasta la interacción del usuario con el programa y los componentes adicionales que se necesitan para realizar una aplicación empresarial en estas tecnologías. Es importante tener un estándar en la realización de este tipo de aplicaciones y entender como funcionan estos protocolos de comunicación con estas tecnologías. Espero sea de gran ayuda y funcione para realizar grandes aplicaciones empresariales en estas tecnologías. 2 TUTORIAL JAVAFX2-JAVA
EE6- REST
Tabla de contenido INTRODUCCION .............................................................................................................. 2 1. INSTALACION Y CONFIGURACIÓN 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 LIBRERÍA PARA DIALOGOS FLOTANTES EN JAVAFX 2 ......................................................................... 9 2. REALIZACIÓN DEL DEMO JAVA EE6 CON INTERFAZ JAVAFX2 WEB SERVICES CON PROTOCOLO DE COMUNICACIÓN REST ......................................................................... 10 2.1 CREACIÓN DE LA BASE DE DATOS, DE SUS TABLAS Y REGISTRO DE SU CONEXIÓN EN NetBeans. ........................................................................................................................................................................ 10 2.2 CREACION DE TABLAS CON DATOS ............................................................................................................ 11 2.3 CONEXIÓN 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. CREACIÓN EN NETBEANS DE UN PROYECTO JAVAFX 2 QUE INVOCARÁ SERVICIOS WEB
..................................................................................................................................... 25 4.1 CREACIÓN DEL PROYECTO ............................................................................................................................. 26 5. CONSUMIR SERVICIO WEB REST DESDE JAVA FX ....................................................... 27 5.1 CREAR CLIENTE DEL SERVICIO WEB REST DESDE LA APLICACIÓN JAVA FX2 ...................... 27 6. CONSUMIR SERVICIO DESDE INTERFAZ GRAFICA JAVA FX2 ....................................... 29 6.1 CREAR ENTIDAD TEAM EN LA APLICACIÓN 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. NAVEGACIÓN ENTRE ESCENAS JAVAFX2 ................................................................... 43 9. INVOCACIÓN DE LA APLICACIÓN JAVAFX 2 A TRAVÉS DEL NAVEGADOR WEB ............ 43 10. CALENDARIO, SELECCIONADOR DE ARCHIVOS CON JAVAFX2 Y MANEJO DE IMÁGENES Y DOCUMENTOS. ........................................................................................ 45 CALENDARIO ................................................................................................................................................................ 45 SELECCIONADOR DE ARCHIVOS (FILE CHOOSER) ...................................................................................... 47 MANEJO DE DOCUMENTOS E IMÁGENES ........................................................................................................ 48 3 1. INSTALACION Y CONFIGURACIÓN DE HERRAMIENTAS DE SOFTWARE Para poder desarrollar aplicaciones empresariales web con tecnologías JavaFX2 y JavaEE6 se necesita un software respectivo para cada tecnología, estas se integran para realizar las aplicaciones. A continuación se presentaran las herramientas de software necesarias y su configuración. 1.1 NETBEANS 7.3.1 + JDK 7u25 Primero se necesita la instalación del IDE (Netbeans) para realizar el programa y el JDK (Java Development Kit) que provee las herramientas de desarrollo para la creación de programas Java. Ingresar a la siguiente dirección 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 versión 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 dirección web. http://www.enterprisedb.com/products-­‐services-­‐training/pgdownload 5 Descargar la versión 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 instalación. Recuerde proporcionar una contraseña para el superusuario de Postgres. Recomendación: Usuario: “postgres” Contraseñan: “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 sesión secundario”. Para esto vaya a Inicio >> Panel de control >> Herramientas administrativas >> Servicios >> Inicio de sesión secundario. 2. En el campo “Tipo de inicio” elija “Automático”. 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 sesión 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 gráficos de usuario para JavaFX 2. Es muy importante para editar las pantallas de usuario con facilidad. Para descargar este programa dirigirse a la siguiente dirección: 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 estén acoplados para poder utilizarlos simultáneamente. En el momento de la instalación esto se realiza automáticamente. 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 pestaña Tools (Herramientas) y se escoge la opción 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 LIBRERÍA PARA DIALOGOS FLOTANTES EN JAVAFX 2 Esta librería sirve para soportar las ventanas instantáneas que se quieran implementar en el programa. 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 Esta librería se importa desde la aplicación CLIENTE de javaFX2 en el folder de librerías. (Ver sección: Consumir servicios desde interfaz grafica Javafx2). 9 2. REALIZACIÓN DEL DEMO JAVA EE6 CON INTERFAZ JAVAFX2 WEB SERVICES CON PROTOCOLO DE COMUNICACIÓN REST 2.1 CREACIÓN DE LA BASE DE DATOS, DE SUS TABLAS Y REGISTRO DE SU CONEXIÓN 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 contraseña proporcionada en la instalación. • 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 dueño 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 recién creada. Espere un momento, haga Click en “Bases de Datos” y ejecute la opción 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 demostración. 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 quedarán a nombre del usuario dueño 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 CONEXIÓN CON LA BASE DE DATOS POSTGRESQL DESDE NETBEANS •
•
Abra la IDE Netbeans, diríjase a la pestaña Services >> Databases >> Drivers. La IDE Netbeans en su versión 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 conexión se realizó exitosamente le debe salir un aviso diciéndole “Connection Succeeded”. Después 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 también puede ver su contenido. 2. 4 CREACION DEL PROYECTO EN NETBEANS 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”. • Elija el nombre de proyecto que desee, luego haga Click en el botón “Next”. • Desactive la opción “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 aplicación (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 conexión 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 ilustración: 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”. • Después de la línea: <property name="eclipselink.ddl-­‐generation" value="create-­‐tables"/> 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" 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 aplicación (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 colección por List, ya que es mas fácil manejar información en listas. También es importante trabajar con paquetes estándares, 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 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 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 métodos 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. También 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 demás Facade Clases. TeamFacadeREST: Es una clase Facade que extiende de la clase AbstractFacade y los métodos que esta implementa de crear, borrar, actualizar, contar, etc. Esta clase tiene las anotaciones http de los métodos que se utilizan para estos llamados a métodos 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 aplicación (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 configuración de la prueba elegir que sea local y luego dar ok. Luego la aplicación 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 métodos 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 método PUT para editar o POST para crear alguna instancia, seleccionar el método de la lista y en el campo para ingresar la información copiar una instancia obtenido con un método GET y editarla en el formato XML o JSON para crear o editar. 4. CREACIÓN EN NETBEANS DE UN PROYECTO JAVAFX 2 QUE INVOCARÁ SERVICIOS WEB 25 4.1 CREACIÓN 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 aplicación JavaFX2. Haga Click en Finish. Netbeans genera tres archivos en su proyecto. 26 TUTORIAL JAVAFX2-JAVA
EE6- REST
•
•
•
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. Este archivo al hacer doble Click automáticamente abrirá el programa de edición instalado previamente JavaFX Scene Builder para editar la parte grafica con facilidad. 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. 5. CONSUMIR SERVICIO WEB REST DESDE JAVA FX 5.1 CREAR CLIENTE DEL SERVICIO WEB REST DESDE LA APLICACIÓN JAVA FX2 Para consumir el servicio web creado previamente debemos crear un cliente de ese servicio en la aplicación 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 aplicación tal como muestra la siguiente imagen y dar Finish. También es importante trabajar con paquetes estándares, por ejemplo: co.edu.javeriana.miproyecto.webservices. 28 TUTORIAL JAVAFX2-JAVA
EE6- REST
Se genera una clase ClienteRest.java con los métodos que presta el servicio web REST creado. Para hacer uso de la clase en nuestra aplicación JavaFX2, es necesario únicamente crear una instancia de esta clase y llamar a los métodos que necesitemos. 6. CONSUMIR SERVICIO DESDE INTERFAZ GRAFICA JAVA FX2 A continuación 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 APLICACIÓN 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 aplicación JavaFX2 >> New >> Other >> Persistence >> Entity Classes from Database. 29 Luego seguimos los pasos anteriormente descritos (Ver sección: Crear entidades a partir de la base de datos) y creamos la entidad Team. NOTA: Recuerde quitar la opción 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 aplicación. 6.2 VER DATOS JAVAFX2 UTILIZANDO WEB SERVICES REST •
•
En la aplicación 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á automáticamente el programa JavaFX Scene Builder para poder editarla. 30 •
•
•
•
•
TUTORIAL JAVAFX2-JAVA
EE6- REST
Vamos a eliminar el botón 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 quedaría 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 código. @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 método handleButtonAction. Luego en la clase PantallaInicialController.java existe el método initialize que va a realizar la acción que se quiere al iniciar la pantalla, en este método vamos a realizar el llamado al web service para que cargue los datos al iniciar. 33 •
En ese método copiar y pegar el siguiente código: 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 código declara las columnas de la tabla y crea una instancia del cliente REST a través del cual se llama al método findAll_XML. Este retorna la información en un XML de los Teams y se transforma en una lista de Team para hacer mas fácil la manipulación de la información. Finalmente se agregan los datos a la tablaTeams. • Para comprobar el código se Invocan las tareas (ANT) Clean and Build en la aplicación 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 método que será llamado al accionar el botón Crear, que fue previamente creado en el editor visual. • En la clase PantallaInicialController.java copiar y pegar el siguiente código: @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 botón crear que ejecute ese método cuando se ejecute la acción de presionar el botón. 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 botón “Agregar” y se le adiciona el método crearTeam tal como muestra la imagen. Finalmente se da guarda el archivo, se ejecuta el proyecto y se da la opción 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 navegación de las pantallas (Ver sección Navegación de Pantallas JavaFX2 mas adelante). 6.4 ACTUALIZAR INSTANCIA UTILIZANDO SERVICIOS WEB REST • Copiar y pegar el siguiente código 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 método 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 sección de Crear instancia) para adicionar este método a la acción del botón Editar para que se ejecute cuando se haga Click en el botón. Haga Clean and Build en el proyecto y ejecútelo, accione el botón editar y verifique en la base de datos el cambio O volviendo a ejecutar la aplicación 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 método de eliminar se pega el siguiente código. @FXML private void eliminarTeam(ActionEvent event) { ClienteRest teamClient = new ClienteRest(); teamClient.remove("1"); } 39 •
•
•
•
Este método eliminara el team con el ID = 1. Recuerde adicionar el método al botón que hace la acción en el editor visual. Limpie y ejecute la aplicación y dele la acción 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 automáticamente a partir de nuestras entidades. Es importante saber como se pueden crear métodos de negocio por nuestra cuenta. • Los Servicios REST en el servidor son los mismos EJB se la aplicación, por lo tanto, se crea una clase Java normal y se copia la siguiente información 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 anotación @Stateless se determina que es un EJB, Cuando se da la anotación @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 métodos que el servicio REST va a tener como servicios. Entre las anotaciones importantes para crear los métodos 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 método para obtener los equipos a partir del pais de acuerdo a nuestra tabla de ejemplo. • En nuestra clase ServicioRestNegocio vamos a pegar el siguiente código e importar las respectivas librerías 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 método recibe por parámetro el nombre del país y produce un XML con la lista de TEAMS que pertenecen a este nombre de país. • El Query que se llama esta en la entidad TEAM contiene la siguiente información: @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 parámetro que entra. • Con este método ya se ha creado nuestro método de negocio REST. • La anotación @Path en el método significa el parámetro que entra por la URI cuando se realiza la petición de ese método. • La anotación @Produces significa que ese método producirá un resultado en el formato XML, existe la anotación @Consumes donde es lo contrario, consume una información en el formato XML o JSON que son los formatos que utilizan estos servicios REST. • Posterior a esto el uso de estos métodos 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 Sección: CONSUMIR SERVICIO WEB REST DESDE JAVA FX). 8. NAVEGACIÓN 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 métodos. 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 navegación 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 explicación detallada de la navegación, como se pueden refrescar los datos de una escena y el código fuente de cada código que se necesita. También se encuentra el tutorial en video y el código fuente de la información. 9. INVOCACIÓN DE LA APLICACIÓN JAVAFX 2 A TRAVÉS DEL NAVEGADOR WEB 43 Para que la aplicación 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”. Cópiela. • 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. • 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 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. •
•
•
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. Diga que acepta los riesgos y que desea ejecutar la aplicación. Pruebe la aplicación con diversos datos. Si no se muestra la interfaz gráfica por problemas de firmas de las librerías, pruebe a despublicar la aplicación Java EE (con undeploy en services/Glassfish/applications), y luego reinicie el servidor Glassfish, y vuelva a construir el dist de la aplicación 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 IMÁGENES Y DOCUMENTOS. Dos componentes importantes para cualquier aplicación son el calendario para seleccionar fechas con rapidez sin preocuparse por el formato y el seleccionador de archivos del computador. Estos componentes básicos 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 aplicación. CALENDARIO •
Descargar la librería que contiene la información 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 librería (.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 método initialize de nuestro controlador copiar y pegar el siguiente código: 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 podrás elegir la fecha. SELECCIONADOR DE ARCHIVOS (FILE CHOOSER) Este componente sirve para capturar archivos de nuestro computador y utilizarlos en nuestra aplicación. Para tener un seleccionador de archivos realizar lo siguiente: • Agregar un botón normal de nuestra paleta de Javafx Scene Builder a la pantalla. • Copiar y pegar el siguiente código 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 línea del código se tiene que pasar nuestro STAGE que esta en nuestro método START de la aplicación. Por esto es recomendable dejar la instancia STATIC para poder acceder a ella en cualquier controlador de nuestra aplicación. public static Stage stage; • Al botón agregado al inicio se le da la acción de ejecutar el método de cargar el archivo que vimos anteriormente y al ejecutar el programa se vera la siguiente pantalla. 47 MANEJO DE DOCUMENTOS E IMÁGENES JavaFX2 tiene una librería especial para el manejo de imágenes y documentos cuando quieren ser mostrados o publicados en algún componente de JavaFX2. La clase utilizada es: HostServices En la clase de inicio declarar una instancia estática para utilizarla en cualquier parte del proyecto: public static HostServices hostServices; Luego a la instancia se debe asociar todos los componentes y métodos de la clase con la siguiente instrucción: hostServices = getHostServices(); Luego en cualquier parte del documento se llama la instancia estatica y se llama al método 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 imágenes y solo utilizar la URL para referenciar. 49