Construyendo Una Aplicación Con JavaFX y Java EE 777

Propsito
Este tutorial abarca el construir una aplicacin de escritorio con JavaFX 2.0 y Scene Builder. Adems de cmo construir un servicio web RESTful que provea la informacin a la aplicacin de escritorio.
Tiempo para completarlo
Aproximadamente 90 minutos
Introduccin
JavaFX es una herramienta que permite a los desarrolladores crear aplicaciones de las llamadas rich internet applications (RIAs). JavaFX est diseada para proveer una plataforma ligera y acelerada
de grficos para aplicaciones de negocio empresariales, al mismo tiempo que permite a los desarrolladores crear sus aplicaciones completamente en el lenguaje de programacin Java.
En este tutorial hars y aprenders lo siguiente:
Del lado del servidor:
Crear un servicio web RESTful que se conecta a una BD para extraer la informacin que publicar como servicio web. Para esto crears adems del servicio web una entidad Customer y un
EJB CustomerFacade para obtener los datos de la base de datos.
1.
Correr el servicio web localmente 2.
Del lado del cliente:
Crear la UI usando Scene Builder de la aplicacin 1.
Crear la lgica de la aplicacin al crear varias clases de ayuda como la clase Customer, la clase CustomerMessageBodyReader que har el parsing de la informacin JSON (utilizando la
nueva API en Java EE7) recibida del servicio web. Adems de la clase SampleController , clase que concentra la lgica de la aplicacin y que utiliza el nuevo cliente de REST de Java EE7
para comunicarse con el servicio web.
2.
Requerimientos de Software y Hardware
La siguiente es la lista de requerimientos de hardware y software:
JDK 7 (lo puedes obtener aqu)
JavaFX Scene Builder (lo puedes obtener aqu)
NetBeans 7.3, con Java EE 7 y GlassFish 4.0 (lo puedes obtener aqu. Asegrate de seleccionar la casilla de GlassFish durante la instalacin)
Prerrequisitos
Antes de iniciar este tutorial, tu deberas:
Tener JDK 7 instalado.
Tener JavaFX Scene Builder instalado.
Haber instalado NetBeans 7.3 con Java EE 7 incluyendo GlassFish 4.0 y asegurarse que est abierto y corriendo.
En esta seccin crears un servicio RESTful que provea la informacin a la aplicacin de escritorio.
Creando el Proyecto
En NetBeans, selecciona File > New Project. 1.
En la ventana New Project, realiza los siguientes pasos:
a. Selecciona Java Web en Categories.
b. Selecciona Web Application en Projects.
c. Haz click en Next.

2.
Introduccin
Creando el Servicio Web RESTful
Construyendo una Aplicacin con JavaFX y Java EE 7
Construyendo una Aplicacin con JavaFX y Java EE 7 http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/javaf...
1 de 19 15/05/2014 11:10 p.m.
En la ventana New Web Application, introduce ServerSide como el nombre del proyecto y haz click en Next. 3.
En la ventana New Web Application, haz click en Finish. 4.
Despus de este paso, el proyecto se crea en NetBeans.
Creando la Clase Entity
En esta seccin crears una clase Entity de la tabla Customers, que se encuentra en la base de datos de ejemplo que ya se encuentra en NetBeans.
Haz clic derecho en la carpeta Sources Packages y selecciona New > Other... 1.
2 de 19 15/05/2014 11:10 p.m.
En la ventana New File, realiza los siguientes pasos:
a. Selecciona Persistence en Categories.
b. Selecciona Entity Classes from Database en File Types.

2.
En la ventana New Entity Classes from Database, realiza los siguientes pasos:
a. Selecciona jdbc/sample en Data Source.
Esta es la BD de ejemplo que ya viene en NetBeans por default.
b. Selecciona la tabla CUSTOMER en Selected Tables.
Esta es la nica tabla de la BD que se usar.
c. Asegrate que la casilla Include Related Tables no est seleccionada.
CUSTOMER inicialmente est ligada con otras dos tablas: DISCOUNT_CODE y MICRO_MARKET, pero no las usaremos en este caso.
d. Haz click en Next.
3.
En la ventana New Entity Classes from Database, realiza los siguientes pasos:
a. Introduce com.samples.entity en Package.
b. Asegrate que las primeras dos casillas no esten seleccionadas.
No se usarn ni Named Queries ni JAXB en este caso.
d. Haz click en Finish.

4.
3 de 19 15/05/2014 11:10 p.m.
Despus de este paso NetBeans crea la clase entity Customer.java dentro de la carpeta com.samples.entity:
Creando el Servicio RESTful
En esta seccin crears el servicio web RESTful, que expone la infomacin de la tabla CUSTOMER en formato JSON.
Haz clic derecho en el proyecto y selecciona New > Other... 1.
a. Selecciona Web Services en Categories.
b. Selecciona RESTful Web Services from Patterns en File Types.

2.
En la ventana New RESTful Web Services from Patterns, haz click en Next.Vamos a utilizar la opcin por default: Simple Root Resource. 3.
En la ventana New RESTful Web Services from Patterns, realiza los siguientes pasos:
a. Introduce com.samples.rest en el campo Resource Package.
b. Introduce customer en el campo Path.
c. Introduce CustomerREST en el campo Class Name.
d. Selecciona application/json en MIME Type.
e. Haz click en Finish.

4.
4 de 19 15/05/2014 11:10 p.m.
Despus de este paso NetBeans crea la clase CustomerREST.java dentro de la carpeta com.samples.rest. Adems crea la clase ApplicationConfig.java, dentro de la misma carpeta.
En la clase CustomerREST introduce el siguiente cdigo:
@Inject
private CustomerFacade customerFacade;
Presiona Ctrl+Shift+I para resolver los imports que se necesitan. Sin embargo en este punto la clase CustomerFacade an no se puede resolver, ya que se crear en un paso mas
adelante.
5.
En la misma clase CustomerREST, realiza lo siguientes cambios al mtodo getJson, adems de agregar un nuevo mtodo llamado findByName:
@GET
@Produces({"application/json"})
public List<Customer> getJson() {
return customerFacade.findAll();
}
@GET
@Path("/search/{name}")
@Produces({"application/json"})
public List<Customer> findByName(@PathParam("name") String name) {
return customerFacade.findByName(name);
}
Presiona Ctrl+Shift+I para resolver los imports que se necesitan.
6.
Haz clic derecho en la carpeta com.samples.rest y selecciona New > Other... 7.
a. Selecciona Enterprise JavaBeans en Categories.
b. Selecciona Session Bean en File Types.
8.
5 de 19 15/05/2014 11:10 p.m.
En la ventana New Session Bean, introduce CustomerFacade en el campo EJB Name y haz click en Finish.
NetBeans crea un bean Stateless en el proyecto, es decir, un bean que no mantiene un estado. Este bean ser la interfaz con la base de datos y sus operaciones.
9.
Agrega el siguiente cdigo a CustomerFacade:
@PersistenceContext(unitName = "ServerSidePU")
private EntityManager em;

public List<Customer> findAll() {
return em.createQuery("select c from Customer c").getResultList();
}

public List<Customer> findByName(String name) {
return em.createQuery("select c from Customer c where UPPER(c.name) LIKE :custName").
setParameter("custName", "%" + name.toUpperCase() + "%").getResultList();
}
En este archivo, se crea un EntityManager que se asocia con un Persistence Context y un Persistence Unit (PU) denominado ServerSidePU. El PU est definido en el archivo
10.
6 de 19 15/05/2014 11:10 p.m.
Es momento de ejecutar el servicio web. Haz clic derecho en el proyecto y selecciona Run.
GlassFish empieza a correr y el proyecto es instalado en GlassFish. Una ventana del explorador se abre. con la direccin http://localhost:8080/ServerSide.
11.
Escribe la siguiente direccin en el explorador que se abri al correr en proyecto en el paso anterior:
http://localhost:8080/ServerSide/webresources/customer.
Al introducir esta URL en el explorador se invoca el mtodo getJson() de CustomerREST.
12.
Escribe la siguiente direccin en el explorador:
http://localhost:8080/ServerSide/webresources/customer/search/John.
Al introducir esta URL en el explorador se invoca el mtodo findByName() de CustomerREST, envindole como parmetro el nombre de John para su bsqueda.
13.
En esta seccin crears una aplicacin de escritorio de bsqueda de la informacin que provee el servicio web creado en la seccin anterior.
Creando el Proyecto de JavaFX
En NetBeans, selecciona File > New Project. 1.
En la ventana New Project, realiza los siguientes pasos:
a. Selecciona JavaFX en Categories.
b. Selecciona JavaFX FXML Application en Projects.

2.
Creando la Aplicacin con JavaFX
7 de 19 15/05/2014 11:10 p.m.
En la ventana New JavaFX Application, realiza los siguientes pasos:
a. Introduce JavaFXApplicationCustomerSearch en el campo Project Name.
b. Introduce CustomerSearch en el campo FXML name.
c. Haz click en Finish.

3.
Haz click derecho en el proyecto recin creado y selecciona Run.
Despus de este paso, el proyecto se compila y ejecuta mostrando una ventana con un botn. Esta interfaz es la que se crea por default al crear el proyecto:
4.
8 de 19 15/05/2014 11:10 p.m.
NetBeans ha creado tres archivos: CustomerSearch.fxml, que es la interfaz de usuario en lenguaje FXML, que est basado en XML; CustomerSearchController.java, que
est asociado con los elementos grficos del documento FXML y que coordina el comportamiento de estos elementos. Por ltimo, la clase
JavaFXApplicationCustomerSearch.java, que es el punto de entrada para la aplicacin:
Abre el archivo JavaFXApplicationCustomerSearch.java y agrega el siguiente cdigo:
stage.setTitle("Java Day Demo");
stage.setWidth(650);
stage.setHeight(650);
5.
Creando la Interfaz Grfica de la Aplicacin
En esta seccin crears la interfaz grfica de la aplicacin utlizando Scene Builder.
Haz clic derecho en el archivo FXML CustomerSearch.fxml y selecciona Open.
Al abrir un archivo FXML y al haber instalado Scene Builder previamente, NetBeans abre el archivo en Scene Builder:
1.
En Scene Builder, y tomando de una esquina el panel principal (AnchorPane), agranda el panel hasta un tamao de 620 pixeles de ancho por 600 pixeles de alto: 2.
9 de 19 15/05/2014 11:10 p.m.
Desplaza el botn a la esquina superior derecha del panel. Dale las dimensiones que sean de tu agrado haciendo click en l y arrastrando una esquina.
Tip: Presionando Ctrl + 7 ocultas y muestras el panel derecho.
3.
Haz click en el botn y presiona Ctrl + 7 para mostrar el panel derecho y realiza los siguientes pasos:
a. Introduce buttonSearch en el campo fx:id.
b. Introduce Buscar en el campo Text.
c. Presiona Enter.

4.
En el mismo panel derecho, ve a la seccin Code e introduce #handleSearchAction en el campo On Action.

5.
Presiona Ctrl + 6 para mostrar el panel izquierdo si no estuviera visible. Selecciona y arrastra un elemento Text Field del panel hacia la esquina superior izquierda. 6.
10 de 19 15/05/2014 11:10 p.m.

Haz click en el Text Field y presiona Ctrl + 7 para mostrar el panel derecho. En la seccin Properties introduce textFieldSearch en el campo fx:id y presiona Enter.

7.
En el mismo panel derecho, ve a la seccin Code e introduce #handleSearchAction en el campo On Action.

8.
Selecciona y arrastra hacia al panel principal un elemento Table View del panel izquierdo. 9.
11 de 19 15/05/2014 11:10 p.m.
Selecciona el Table View en el panel y arrastra una de sus esquinas para ajustar su tamao de tal manera que cubra la superficie sobrante del panel: 10.
Presiona Ctrl + 6 para mostrar el panel izquierdo si no estuviera visible. Selecciona y haz click derecho sobre una columna TableColumn. Selecciona Duplicate del men. 11.
12 de 19 15/05/2014 11:10 p.m.
Con esto se crea una columna extra en la tabla.
Para dar el tamao adecuado a las columnas realiza los siguientes pasos:
a. Selecciona la primer columna TableColumn del panel de la izquierda y presiona Ctrl + 7 para mostrar el panel izquierdo.
b. Introduce 170 en el campo Pref Width.
c. Presiona Enter.
d. Repite los pasos anteriores para la segunda y tercer columna, con un ancho de 190 y 210 respectivamente.
12.
Haz click sobre la tabla e introduce tableView en el campo fx:id. 13.
Para dar el nombre adecuado a las columnas ve al panel de la izquierda y edita los nombres de cada TableColumn de la siguiente manera: 14.
Presiona Ctrl+S para guardar el archivo o en el men selecciona File > Save. 15.
Por ltimo, agregars manualmente la etiqueta XML <cellValueFactory> a cada etiqueta <TableColumn> en el archivo CustomerSearch.fxml.
Selecciona el archivo CustomerSearch.fxml y haz click derecho sobre l. Selecciona Edit.
16.
Introduce el siguiente cdigo dentro del archivo.
<?import javafx.scene.control.cell.*?>
<cellValueFactory>
<PropertyValueFactory property="name" />
</cellValueFactory>
<cellValueFactory>
<PropertyValueFactory property="addressline1" />
</cellValueFactory>
<cellValueFactory>
<PropertyValueFactory property="email" />
</cellValueFactory>
Recuerda remover el fin de la marca (/) en los elementos <TableColumn> y agregar </TableColumn>, dado que agregars <cellValueFactory> como hijo de <TableColumn>.
Adems asegrate que el import vaya debajo del tag <xml>.
17.
13 de 19 15/05/2014 11:10 p.m.
El elemento <cellValueFactory> dentro de <TableColumn> nos permite "ligar" las columnas en la UI con las columnas de la tabla Customer, en la BD.
Desarrollando el Controlador
En esta seccin crearas la lgica de la clase CustomerSearchController.java, que entre otras cosas, instanciar la clase javax.ws.rs.client.Client para hacer llamadas al servicio
web RESTful .
De la siguiente liga, obtn el archivo zip, descomprmelo y guarda la carpeta en tu disco duro. La carpeta contiene las librerias necesarias para el cliente de JAX-RS 2.0. 1.
Haz click derecho sobre Libraries en el proyecto. Selecciona Add JAR/Folder: 2.
Selecciona todos los JARs de la carpeta que descomprimiste en el paso anterior. Haz click en Open. 3.
Abre el archivo CustomerSearchController.java y cambia el nombre del mtodo handleButtonAction por handleSearchAction. Borra el parmetro de entrada del mtodo. 4.
Reemplaza el cdigo existente en el mtodo handleSearchAction() por el siguiente:
WebTarget clientTarget;
ObservableList<Customer> data = tableView.getItems();
data.clear();
Client client = ClientBuilder.newClient();
client.register(CustomerMessageBodyReader.class);
if (textFieldSearch.getText().length() > 0) {
clientTarget = client.target("http://localhost:8080/ServerSide/webresources/customer/search/{beginBy}");
clientTarget = clientTarget.resolveTemplate("beginBy", textFieldSearch.getText());
} else {
clientTarget = client.target("http://localhost:8080/ServerSide/webresources/customer");
}
5.
14 de 19 15/05/2014 11:10 p.m.
for (Customer c : customers) {
data.add(c);
System.out.println(c.toString());
}
Presiona Ctrl+Shift+I para resolver los imports faltantes.No todas las clases sern resueltas hasta completar los siguientes pasos.
En el mismo archivo, agrega las siguientes lineas de cdigo:
@FXML
private TextField textFieldSearch;
@FXML
private Button buttonSearch;
@FXML
private TableView<Customer> tableView;
Presiona Ctrl+Shift+I para resolver los imports faltantes. La clase Customer no ser resuelta hasta completar los siguientes pasos.
6.
En la misma clase CustomerSearchController.java, agrega la siguiente linea de cdigo dentro del mtodo initialize:
handleSearchAction();
7.
La clase CustomerSearchController que se ha ido modificando en esta seccin an contiene dos clases desconocidas hasta ahora: Customer y CustomerMessageBodyReader. Estas dos
clases se construirn en la siguiente seccin.
Creando el Parser con JSON-P
En esta seccin crears la clase Customer y el JSON parser utlizando la nueva API de Java para JSON en Java EE 7.
Haz clic derecho en la carpeta javafxapplicationcustomersearch y selecciona New > Java Class... 1.
En la ventana New Java Class, introduce Customer en el campo Class Name y haz click en Finish. 2.
15 de 19 15/05/2014 11:10 p.m.

En el archivo Customer.java introduce el siguiente cdigo:
import java.io.Serializable;
private String name;
private String addressline1;
private String email;

3.
Coloca el cursor al final de la ltima declaracin de variable y presiona Alt + Insert. Selecciona Getter and Setter... 4.
Selecciona las tres casillas y haz click en Generate. 5.
16 de 19 15/05/2014 11:10 p.m.
Guarda el archivo. Con esto la clase Customer se habr creado.
Haz clic derecho en la carpeta javafxapplicationcustomersearch y selecciona New > Java Class... 6.
En la ventana New Java Class, introduce CustomerMessageBodyReader en el campo Class Name y haz click en Finish. 7.
Introduce el siguiente cdigo en la clase CustomerMessageBodyReader:
@Provider
@Consumes({"application/json"})
implements MessageBodyReader<List<Customer>>
@Override
public boolean isReadable(Class<?> type, Type type1, Annotation[] antns,
MediaType mt) {
return true;
}
8.
17 de 19 15/05/2014 11:10 p.m.
Despus de introducir el cdigo presiona Ctrl+Shift+I para arreglar los imports.
Asegrate de seleccionar la clase java.lang.reflect.Type al momento de seleccionar los imports.
Introduce el siguiente cdigo en la misma clase CustomerMessageBodyReader:
@Override
public List<Customer> readFrom(Class<List<Customer>> type, Type type1, Annotation[] antns, MediaType mt, MultivaluedMap<String, String>
mm, InputStream in) throws IOException, WebApplicationException {
if (mt.getType().equals("application") && mt.getSubtype().equals("json")) {
Customer customer = new Customer();
List<Customer> customers = new ArrayList();
JsonParser parser = Json.createParser(in);
while (parser.hasNext()) {
JsonParser.Event event = parser.next();
switch (event) {
case START_OBJECT:
customer = new Customer();
break;
case END_OBJECT:
customers.add(customer);
break;
case KEY_NAME:
String key = parser.getString();
parser.next();
switch (key) {
case "name":
customer.setName(parser.getString());
break;
case "addressline1":
customer.setAddressline1(parser.getString());
break;
case "email":
customer.setEmail(parser.getString());
break;
default:
break;
}
break;
default:
break;
}
}
return customers;
}
throw new UnsupportedOperationException("Not supported MediaType: " + mt);
}
Despus de introducir el cdigo presiona Ctrl+Shift+I para arreglar los imports.
9.
Haz terminado con la codificacin de la aplicacin. Haz click derecho sobre el proyecto y selecciona Build. 10.
18 de 19 15/05/2014 11:10 p.m.
Selecciona el archivo JavaFXApplicationCustomerSearch.java y haz click derecho. Selecciona Run File. 1.
La aplicacin al iniciar obtiene todos los datos del servicio web RESTful. Puedes introducir palabras de bsqueda por nombre en el campo de texto y presionando Enter o haciendo click el
botn Buscar.
2.
En este tutorial, has aprendido a:
Crear un servicio web RESTful, extrayendo informacin de una BD a travs una clase Facade con JPA.
Crear la interfaz de usuario de la aplicacin con JavaFX y Scene Builder.
Crear la lgica de la aplicacin utilizando el cliente de JAX-RS 2, la API de JSON 1.0 y una clase POJO.
Ligar la lgica de la aplicacin (controlador) con la interfaz de usuario (FXML).
Recursos
Tutorial de Java EE 7.
Documentacin de Java FX 2.
Gua de usuario de Scene Builder.
Noticias, demos y ms de JavaFX.
Crditos
Currculum Developer: Edgar Martinez
Conclusin
19 de 19 15/05/2014 11:10 p.m.

Construyendo Una Aplicación Con JavaFX y Java EE 777

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Construyendo Una Aplicación Con JavaFX y Java EE 777

Transféré par

Droits d'auteur :

Formats disponibles

Propsito

Vous aimerez peut-être aussi