JavaFX: Lista de contactos

En esta nueva entrada os traigo una aplicación que hice hace poco, se trata de una lista de contactos, el cual se conecta a una base de datos mysql, en la base de datos se almacena la url de la foto, el nombre, el correo electrónico y el número telefónico del contacto, para mas detalles ver el video ;)

El rendimiento de la aplicación se vera afectada si usan imágenes grandes, el código fuente lo pueden descargar desde el siguiente enlace ContactosFX, espero os guste y nos vemos en el siguiente tutorial.

1. Layouts

Al momento de crear interfaces gráficas con JavaFX es necesario hacer uso de layouts, ya que estos permiten la forma en que colocaremos los diferentes controles/componentes o nodos en una ventana, empecemos con los principales layouts con el que trabajaremos en este tutorial.

1. VBox: Este layout ordena los componentes de manera vertical, uno debajo de otro, veamos unos ejemplos.

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//Creamos un contenedor VBox, le agregamos un
//espaciamiento y relleno de 10px, al final
//agregamos los controles al contenedor.

VBox vbox = new VBox();
vbox.setSpacing(10);
vbox.setPadding(new Insets(10));
vbox.getChildren().addAll(txtUser, txtPass, btnLog);

Fig. 01: VBox layout con relleno y espaciamiento de 10px.

Ahora veamos un ejemplo con relleno de distinta medida, esto también es posible aplicar a los demás contenedores

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//Creamos un contenedor VBox, a este le agregamos
// un espaciamiento y relleno de 10px, al
//final agregamos los controles al contenedor.

VBox vbox = new VBox();
vbox.setSpacing(10);
vbox.setPadding(new Insets(10,15,20,25));
vbox.getChildren().addAll(txtUser, txtPass, btnLog);

Fig. 02: VBox layout con relleno variado y espaciamiento de 10px.

2. HBox: Ordena los componentes en forma horizontal, uno a la derecha de otro.

Fig. 03 HBox layout con relleno y espaciamiento de 10 unidades

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//Creamos un contenedor HBox, a este le agregamos un
//espaciamiento y relleno de 10 unidades, al
//final agregamos los controles al contenedor.

HBox hbox = new HBox();
hbox.setSpacing(10);
hbox.setPadding(new Insets(10,10,10,10));
hbox.getChildren().addAll(txtUser, txtPass, btnLog);

3. FlowPane: Este layout permite agregar los componentes en filas, uno a la derecha de otro, si en el ancho del contenedor no hay suficiente espacio para agregar otro componente, el componente se agrega en la   siguiente fila.

Fig. 04: FlowPane con relleno de 15px, espaciamiento vertical y horizontal de 10px.

//Creamos un campo de texto, un campo de contraseña

//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//Creamos un contenedor FlowPane, le agregamos un
//espaciamiento vertical y horizontal de 10px, y un relleno
//de 15px, al final agregamos los controles al contenedor

FlowPane flow = new FlowPane();
flow.setVgap(10);
flow.setHgap(10);
flow.setPadding(new Insets(15));
flow.getChildren().addAll(txtUser, txtPass, btnLog);

4. StackPane: Con este layout podemos agregar componentes uno encima de otro, el orden en que se agrega los componentes al contenedor es importante, ya que el ultimo control en ser agregado es el que estará encima del resto.

Fig. 05: StackPane con relleno de 15px.

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//Creamos un contenedor StackPane, a este le agregamos un relleno
//de 15px, al final agregamos los controles al contenedor

StackPane stack = new StackPane();
stack.setPadding(new Insets(15));
stack.getChildren().addAll(txtUser, txtPass, btnLog);

Importante: Del ejemplo anterior, si deseamos que la caja de texto txtUser, este encima de los demás controles, entonces usamos el método toFront().

txtUser.toFront();

5. TilePane: Este layout acomoda los controles en una matriz, en filas y columnas, cuando creamos un TilePane este tendrá 5 columnas por defecto, pero eso se puede cambiar usando el método setPrefColumns(X), donde "X" es el número de columnas, también podemos asignar el número de filas deseado con el método setPrefRows(X), y si deseamos podemos cambiar el orden en el que se agregan los controles al TilePane con el método setOrientation(Orientation.VERTICAL) y setOrientation(Orientation.HORIZONTAL), por defecto los controles se agregan en forma horizontal, de izquierda a derecha, pero también podemos hacer que los controles se agreguen en forma vertical de arriba hacia abajo, veamos los constructores de este layout(contenedor).

TilePane tile = new TilePane();
//Crea un TilePane horizontal con 5 columnas con espaciamiento vertical y
//horizontal de 0px.

TilePane tile = new TilePane(double vgap, double hgap)
//Crea un TilePane horizontal con 5 columnas, los parámetros que recibe este
//constructor son del espaciamiento vertical(vgap) y horizontal(hgap).

TilePane tile = new TilePane(Orientation orientation)
//Este constructor  recibe como parámetro la orientación que tendrá el TilePane,
//pudiendo ser VERTICAL u HORIZONTAL, además este TilePane tendrá 5 columnas, con 
//espaciamiento vertical y horizontal de 0px.

TilePane(Orientation orientation, double hgap, double vgap)
//Este constructor tiene tres parámetros, el primero es la tipo de orientación que
//tendrá VERTICAL u HORIZONTAL, el segundo y tercer parámetro corresponde al
//espaciamiento horizontal(hgap) y vertical(vgap) que tendrá el TilePane.

Fig. 06: TilePane con orientación horizontal

Fig. 07: TilePane con orientación vertical

El código de la Fig. 06 y Fig. 07 es similar con la diferencia solo en la orientación.

TilePane tile = new TilePane();
tile.setOrientation(Orientation.VERTICAL);//pude ser HORIZONTAL
tile.setPrefColumns(2);
tile.setPrefRows(4);
tile.setPadding(new Insets(15));
tile.setVgap(10);
tile.setHgap(10);        
tile.getChildren().addAll(/*aqui agregamos los controles separado por comas*/);

Ahorraríamos algunas lineas de código si hacemos uso de los constructores del TilePane:

TilePane tile = new TilePane(Orientation.VERTICAL,10,10);
tile.setPrefColumns(2);
tile.setPrefRows(4);
tile.setPadding(new Insets(15));      
tile.getChildren().addAll(/*aqui agregamos los controles separado por comas*/);

6. GridPane: Este layout es similar al TilePane, pero con la diferencia de que los controles dentro del GridPane pueden ocupar mas de una columna o fila.

Fig. 08: GridPane con relleno de 15px, espaciamiento vertical y horizontal de 10px

TextField txtNom = new TextField();
PasswordField txtPass = new PasswordField();
PasswordField txtRepitePass = new PasswordField();
ComboBox cbPais = new ComboBox();
ComboBox cbGenero = new ComboBox();
TextField txtCorreo = new TextField();
Button btnReg = new Button("Regístrese");
Button btnLog = new Button("Login with Facebook");
        
GridPane grid = new GridPane();    
grid.setPadding(new Insets(15));
grid.setVgap(10);
grid.setHgap(10);
        
grid.add(txtNom, 0, 0, 2, 1);
//Agrego el txtNom al GridPane, en la columna 0
//fila 0, que ocupe 2 columnas y 1 fila

grid.add(txtPass, 0, 1);
//Agrego el txtPass al GridPane, en la columna 0 fila 1

grid.add(txtRepitePass, 1, 1);
//Agrego el txtRepitePass al GridPane, en la columna 1
//fila 1

grid.add(cbPais, 0, 2);
//Agrego el cbPais al GridPane, en la columna 0 fila 2

grid.add(cbGenero, 1, 2);
//Agrego el cbPais al GridPane, en la columna 1 fila 2

grid.add(txtCorreo, 0, 3, 2, 1);
//Agrego el txtCorreo al GridPane, en la columna 0 fila 3
//que ocupe 2 columnas y 1 fila

grid.add(btnReg, 0, 4, 1, 2);
//Agrego el btnReg al GridPane, en la columna 0 fila 4
//que ocupe 1 columna y 2 filas

grid.add(btnLog, 1, 4);
//Agrego el btnLog al GridPane, en la columna 1 fila 4

7. BorderPane: Este panel brinda 5 regiones, TOP, RIGHT, BOTTOM, LEFT y CENTER, en el cual podemos agregar paneles o controles, usualmente en la parte superior se ubica la barra de herramientas, en la parte inferior la barra de estado, en la parte izquierda el panel de navegación, en la parte derecha información adicional, y en la parte central va el área de trabajo.
Este layout posee solo un método constructor sin parámetros, para agregar un nodo(panel o control) a este contenedor usamos los siguientes métodos:

BorderPane border = new BorderPane();

border.setTop(nodo);// Agrega un nodo en la parte superior del BorderPane.
border.setRight(nodo);// Agrega un nodo en la parte derecha del BorderPane.
border.setBotton(nodo);// Agrega un nodo en la parte Inferior del BorderPane.
border.setLeft(nodo);// Agrega un nodo en la parte Izquierda del BorderPane.
border.setCenter(nodo);// Agrega un nodo en la parte central del BorderPane.

Fig. 09: BorderPane

Y por último, si no deseamos usar layouts, entonces se puede usar coordenadas, para ello hacemos uso del panel o contenedor Group. 

Button btnAcp = new Button("Aceptar");
Button btnCan = new Button("Cancelar");
        
Group group = new Group();
        
btnAcp.setLayoutX(50);
btnAcp.setLayoutY(50);
//colocamos el botón Aceptar en la coordenada (50,50)

btnCan.setLayoutX(50);
btnCan.setLayoutY(100);
//colocamos el botón Aceptar en la coordenada (50,100)

group.getChildren().addAll(btnAcp, btnCan);
//Agregamos los botones al contenedor.

Bueno, eso es todo por ahora, espero que sea de utilidad y desde este enlace pueden descargar un ejmplo: EjemploLayout

Conforme avancemos se hará uso de todos los layouts, hasta el próximo tutorial ;)

Temario JavaFX

Hola a todos, este será el temario a avanzar en este tutorial de JavaFX, semanalmente publicare cada uno de estos temas, y si cuento con algo de tiempo adicional, publicare 2 o hasta 3 temas por semana, pero eso sera dependiendo del tiempo que disponga. Primeramente tocaremos el tema de Layouts, estos nos ayudaran a como colocar los diferentes controles o componentes de JavaFX en una ventana, luego tocaremos el tema de Controles(Botones, Cajas de texto, etc.), seguidamente os enseñare a usar CSS en una aplicación de JavaFX, y al final, con todo lo aprendido, realizaremos una aplicación con acceso a base de datos.

1. Layout
2. Label
3. Button
4. Radio Button
5. Toggle Button
6. Checkbox
7. Choice Box
8. Combo Box
9. Text Field
10. Password Field
11. Scroll Bar
12. Scroll Pane
13. List View
14. Table View
15. Separator
16. Slider
17. Hyperlink
18. Tooltip
19. HTML Editor
20. Menu
21. Color Picker
22. Pagination Control
23. File Chooser
24. JavaFX CSS
25. JavaFX + JDBC

Por ahora ese seria el temario a avanzar, luego iré agregando otros temas relacionados con JavaFX y ejemplos con todo lo que se aprenderá:

Esas son algunas capturas de las aplicaciones que estoy haciendo, espero que sea de su agrado y nos vemos en el siguiente tutorial.

Introducción a JavaFX 2

JavaFX es una plataforma de desarrollo de RIAs(Rich Internet Applications, Aplicaciones Enriquecidas para Internet), pero también sirve para desarrollar aplicaciones de escritorio y para dispositivos móviles. En este tutorial daré a conocer el desarrollo de aplicaciones de escritorio con JavaFX, como también de CSS(Cascading Style Sheets), JavaFX usa hojas de estilo en cascada para dar una mejor apariencia a las aplicaciones a desarrollar.
Para empezar, primeramente necesitamos descargar el JDK 7 u9 de Java, en ese JDK ya viene incluido JavaFX, y como IDE de programación usaremos NetBeans 7.2, pero también podemos usar Eclipse Juno(previa instalación del plugin para JavaFX).

Ahora empecemos con un ejemplo, con el clásico hola mundo, pensaba omitir esto, pero veo que es necesario, ya que en el siguiente tutorial haré uso de este; ya instalado el JDK de Java y del IDE NetBeans procedemos a crear un nuevo proyecto en NetBeans, File->New Project->JavaFX->JavaFX Application

Como se puede ver en la Fig. 01, primeramente le damos un nombre al proyecto, luego la localización donde se guardara nuestro proyecto, seguidamente la carpeta que contendrá nuestro proyecto, seleccionamos la plataforma en que desarrollaremos nuestro proyecto, en este caso sera Default JavaFX Platforms, ya en la parte final Create Application Class damos el nombre de nuestro paquete que contendra nuestras clases, seguidamente un punto (.) , luego de este punto damos el nombre de nuestra clase  principal, bueno en este caso, yo asigne el nombre de paquete al nombre de mi paquete y Principal al nombre de mi clase principal, luego finalizamos. A continuación nuestro proyecto quedaría así:

package paquete;

import javafx.application.Application;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;
import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.StackPane;

import javafx.stage.Stage;

public class Principal extends Application {

    

    public void start(Stage primaryStage) {

        Button btn = new Button();

        btn.setText("Say 'Hello World'");

        btn.setOnAction(new EventHandler<ActionEvent>() {

            public void handle(ActionEvent event) {

                System.out.println("Hello World!");

            }

        });        

        StackPane root = new StackPane();

        root.getChildren().add(btn);        

        Scene scene = new Scene(root, 300, 250);        

        primaryStage.setTitle("Hello World!");

        primaryStage.setScene(scene);

        primaryStage.show();

    }

    public static void main(String[] args) {

        launch(args);

    }

}

Ahora explicare el código, en la parte superior podemos observar el nombre del paquete que creamos anteriormente, seguidamente se importa las librerías necesarias para el funcionamiento de este pequeño programa, luego se crea la clase pública Principal que esta a  la vez hereda de la clase Application, luego agregamos el método public void start(Stage primaryStage), ya que sino lo hacemos, nos marcaría un error, luego creamos e instanciamos un botón llamado btn, le damos un nombre con el método setText(), a continuación asignamos un evento al botón, que cuando se haga clic en el botón nos muestre por consola un mensaje, en este caso "Hello World". Luego creamos un objeto StackPane que tiene por nombre root este es un tipo de panel especial, que cuando agregamos los controles o componentes(Button, Label, TextField, etc), los agrega uno encima de otro en el orden que agregamos los controles o componentes a nuestro panel root, luego agregamos el botón al panel root, luego creamos un objeto del tipo Scene llamado scene, este es un escenario al cual agregamos nuestro panel root, y le asignamos un tamaño de 300x250 al momento de instanciarlo, seguidamente hacemos uso del objeto primaryStage del tipo Stage, asignando un nombre a nuestra ventana con el método setTitle(), luego asignamos el objeto scene a nuestro primaryStage con el método setScene(), luego mostramos nuestra venta ventana con el método show(), así se vera nuestro primer programa:

Bueno eso seria todo por este primer tutorial, si tienen alguna pregunta pueden hacerla, y para el próximo tutorial haremos una ventana de dialogo modal tipo JOptionPane de Java, ya que JavaFX no cuenta con una ventana de dialogo. aqui tienen una imagen, espero que sea de su agrado

Nos vemos en el próximo tutorial...