TEMA 7: Entradas y salidas por ventanas emergentes.

1. Entrada y salida por ventanas emergentes.

Algo muy común a la hora de programar, es como avisar al usuario de ciertas actividades, o como hacerlo escoger para recapacitar o darle la oportunidad de elegir que es lo que se desea hacer, para esto, en Java tenemos elementos muy sencillos pero funcionales, que nos permiten mostrar mensajes de dialogo, o cuadros de dialogo, como los prefieran llamar, estos elementos son sumamente sencillos de utilizar con un poco de lectura al API de Java, sin embargo, como siempre, surgen las dudas, y para aclararlas dedicaré este post para mostrarles los diferentes tipos de diálogos que podemos utilizar en Swing, bien, para esto he preparado lo siguiente (Utilizando Netbeans como IDE):

Un proyecto con un nombre cualquiera (En este caso SerProgramador.es).
Un paquete donde iremos trabajando durante este post.

Y con esto, comencemos a trabajar, dado que existen varias formas de hacer distintos tipos de cuadros de diálogo, comenzaremos a verlos uno por uno para no romper con el esquema de trabajo, los cuadros de dialogo que veremos en este post estarán basados en el objeto JOptionPane, un objeto de java que nos permite precisamente trabajar con cuadros de dialog, los métodos de este objeto que veremos, serán los siguientes:

showMessageDialog
showInputDialog
showConfirmDialog
showOptionDialog

De antemano les comento que la entrada la irá actualizando hasta terminarla, pero por lo pronto ya tenemos algo con que comenzar:

showMessageDialog

Ok, para probar esté método, lo único que haremos será crear una clase con un método main, vamos a suponer que la clase se llama, MessageDialog:

1

2

3

4

5

6

public class MessageDialog {

    public static void main(String[] args) {

    }

}

Bien, fácil, ahora, vamos a jugar un poco con esto, para acceder a este método simplemente tenemos que importar la clase JOptionPane, aunque normalmente netbeans lo hace por nosotros pondré la línea de código por cualquier cosa:

1

import javax.swing.JOptionPane;

Una vez importado lo único que tenemos que hacer es teclear el nombre de la clase más el método que queremos utilizar, teniendo en cuenta una cosa, el método showMessageDialog tiene 3 sobrecargas del método, uno que recibe 2 parametros, otro de 4, y otro de 5, vamos a ver uno por uno para observar como vamos personalizando cada vez más nuestro mensaje, el primero que veremos es el de dos parametros:

1

2

3

4

5

6

7

public class MessageDialog {

    public static void main(String[] args) {

        JOptionPane.showMessageDialog(null, "Operación realizada correctamente");

    }

}

Bien, explicación rápida, el primer parámetro, representa el componente padre sobre el cual el mensaje se mostrará, si nosotros no le enviamos ninguno, como en este caso lo estamos haciendo, simplemente mostrará una ventana similiar a la siguiente:

Si nosotros le enviamos un componente, se colocará encima de el, sin ninguna variación en el funcionamiento, el segundo parámetro obviamente, es el mensaje que queremos observar, y listo, un mensaje fácil de hacer, bien, ahora veamos otra cosa, el anterior fue el método con dos parámetros, ahora bien, cuando utilizamos el método de cuatro parámetros tenemos un poco más de personalización, veamos:

1

JOptionPane.showMessageDialog(null, "Mensaje dentro de la ventana", "Mensaje en la barra de titulo", JOptionPane.WARNING_MESSAGE);

El funcionamiento de este método es un poco diferente, pero más útil:

Primer Parámetro: El componente padre sobre el cual se mostrará la ventana de dialogo.
Segundo Parámetro: El mensaje que se mostrará dentro de la ventana.
Tercer Parámetro: El mensaje que se mostrará en la barra de titulo.
Cuarto Parámetro: Una variable Int contenida por JOptionPane, que representa el icono que se mostrará en la ventana, algunos de los valores posibles son: INFORMATION_MESSAGE , WARNING_MESSAGE , QUESTION_MESSAGE , PLAIN_MESSAGE, ERROR_MESSAGE

En el caso anterior, el mensaje se vería de esta manera:

Como ven, los textos corresponden a los mensajes que se muestran, y al usar un WARNING_MESSAGE se presenta con un icono de alerta. Ahora bien, para el último método, vamos a necesitar crear un icono personalizado, para esto, yo me e descargado una imagen de 50×50 que se llama “icon-pencil-png.png” y la e colocado en un paquete llamado resources dentro de mi proyecto, lo siguiente, será crear un icono, para esto, vamos a crear una clase llamada MyIcon que implemente la interfaz Icon, el contenido de la clase será el siguiente:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

import java.awt.Component;

import java.awt.Graphics;

import java.awt.Image;

import javax.swing.Icon;

import javax.swing.ImageIcon;

public class MyIcon implements Icon{

    @Override

    public void paintIcon(Component c, Graphics g, int x, int y) {

        Image image = new ImageIcon(getClass().getResource("/resources/icon-pencil-png.png")).getImage();

        g.drawImage(image, x, y, c);

    }

    @Override

    public int getIconWidth() {

        return 50;

    }

    @Override

    public int getIconHeight() {

        return 50;

    }

}

Listo, con esto tendremos nuestro icono, ya se, tanto rollo para un icono, pero bueno, somos programadores, ahora bien, necesitaremos, antes de mostrar nuestro mensaje de dialogo, crear una instancia de esta clase, y posteriormente, podremos utilizar el método de 5 parametros:

1

2

MyIcon icon = new MyIcon();

        JOptionPane.showMessageDialog(null, "Mensaje dentro de la ventana", "Titulo", JOptionPane.DEFAULT_OPTION, icon);

Si se dan cuenta, los parámetros son idénticos a los parámetros que se la pasan al método de cuatro parámetros, solo que esta vez, existe un quinto parámetro, que nos permite enviar un icono, proporcionando un resultado similar al siguiente:

Y listo, tenemos una manera coqueta de hacer mensajes de alerta con el showMessageDialog 😉

showInputDialog

Bien, para trabajar con el showInputDialog, vamos a crear nuevamente una clase a la cual le llame InputDialog nuevamente con un método main:

1

2

3

4

5

public class InputDialog {

    public static void main(String[] args) {

    }

}

Bien, de antemano les digo que nuevamente necesitaremos el import, así que despues de agregarlo comenzaremos a trabajar, y esta vez lo haremos más rápido ya que despues de leer la primera parte, habrán comprendido como está la dinámica de los dialogos. El inputDialog contiene 6 sobrecargas del método, los cuales tienen los siguientes parametros y ojo, TODOS (Con excepción del ultimo) devuelven un String:

Método 1:

1

JOptionPane.showInputDialog(Mensaje);

Explicación: Bueno, este es el método más sencillo, sólo requiere de un parámetro, y este es el mensaje que va a mostrar, como les comente en un principio, la mayoria de los InputDialog devuelven un String, por consecuente, su utilización sería la siguiente:

1

String respuesta = JOptionPane.showInputDialog("Escribe tu nombre");

De esta manera, tendríamos un resultado como:

Método 2:

1

JOptionPane.showInputDialog(Mensaje, Texto Inicial);

Explicacion: Nuevamente el método es sumamente sencillo, dado que su utilización quedaría de esta manera:

1

String respuesta = JOptionPane.showInputDialog("¿Cual es su nombre?", "atxy2k");

Quedando el resultado de esta manera:

Método 3:

1

JOptionPane.showInputDialog(Componente padre, Mensaje);

Explicacion: Este método es muy similar al primero, la única diferencia es que este nos permite ubicar el InputDialog sobre un componente, en este caso su utilización sería solo remplazar el primer parametro por el componente o null si no existe un componente:

1

String respuesta = JOptionPane.showInputDialog(null, "Escribe tu nombre");

El resultado sería el mismo que el del método 1:

Método 4:

1

JOptionPane.showInputDialog(Componente padre, Mensaje, Texto Inicial);

Explicación: Este método es muy similar al anterior, muy sencillo de entender, el padre, el mensaje que dirá el cuadro de dialogo y por último, un texto por defecto, con un uso como el siguiente:

1

JOptionPane.showinputDialog(null, "¿Cual es su nombre?", "atxy2k");

Nos proporcionará un resultado similar al del método 2:

Método 5:

1

JOptionPane.showInputDialog(Componente padre, Mensaje, Titulo, Tipo De Mensaje (WARNING,ERROR,ETC.) );

Explicación: Este método es algo diferente a los anteriores, aunque también incluye el padre, el segundo parámetro representará el texto del cuadro de texto y el tercero el título de la ventana, por ultimo, tenemos la posibilidad de enviar un parámetro tal y como lo hicimos en el showMessageDialog para seleccionar un icono por defecto, un ejemplo de uso sería:

1

String respuesta = JOptionPane.showInputDialog(null, "Escriba nuevamente su nombre", "Error!", JOptionPane.ERROR_MESSAGE);

Dando un resultado como el siguiente:

Método 6:

1

JOptionPane.showInputDialog(Componente padre, Mensaje, Titulo, Tipo De Mensaje, Icono, Arreglo de opciones, Seleccion por defecto );

Explicación: Este es mi favorito, este método tiene algo en particular independientemente de las opciones por default, y es que, pasandole como parametro un arreglo de objetos, que también podemos hacer con los métodos anteriores, este método genera un JComboBox para mostrar las posibles selecciones, es algo que me gusta, y encima de todo, nos permite pasar un icono, por ejemplo, voy a utilizar el icono que hicimos anteriormente para el mismo ejemplo:

1

2

3

4

5

6

7

8

9

    String[] carreras = {

            "Ingeniería en sistemas computacionales",

            "Ingeniería industrial",

            "Ingeniería en mecatrónica",

            "Ingeniería en informatica",

            "Ingeniería petroquímica"

        };

        MyIcon icon = new MyIcon();

        String resp = (String) JOptionPane.showInputDialog(null, "Seleccione una carrera a cursar", "Carrera", JOptionPane.DEFAULT_OPTION, icon, carreras, carreras[0]);

Con este pequeño código, tendríamos un resultado muy similar al siguiente:

Excelente presentación para un cuadro de dialogo 🙂

showConfirmDialog

Una vez que hemos dominado los métodos anteriores, utilizar un showConfirmDialog es super sencillo, este, cuenta con cuatro sobrecargas del método, y los veremos de manera super rápida, para esto hagamos una clase con cualquier nombre (en mi caso showConfirmDialog) y pongamosle un método main para comenzar a trabajar, y veamos como funcionan estos métodos:

Método 1:

1

JOptionPane.showConfirmDialog(Componente padre, "Mensaje");

Este es muy sencillo, el componente padre pues como anteriormente mencionamos es aquel sobre el cual se mostrará el mensaje, y el mensaje es lo que dirá el mensaje, como es un dialogo de confirmación, este, por default mostrará las opciones si, no y cancelar, y devolverá un entero con la opción seleccionada como si estuvieramos en un vector, es decir, si seleccionamos si retornará un cero, si es no un 1 y si es cancelar un 2, por ejemplo:

1

int resp = JOptionPane.showConfirmDialog(null, "¿Está seguro?");

De esta manera tendríamos un resultado como el siguiente:

Método 2:

1

JOptionPane.showConfirmDialog(Componente padre, "Mensaje", "Titulo","Tipo de seleccion");

Este componente es un poco mas completo, las primeras dos opciones son las mismas que el método anterior, pero agregamos tal y como antes el titulo de la ventana, y un parámetro nuevo, el tipo de selección, es decir, que tipo de dialogo será, si es un dialogo de si y no, o si tiene las opciones si, no y cancelar por defecto, por ejemplo:

1

int resp = JOptionPane.showConfirmDialog(null, "¿Esta seguro?", "Alerta!", JOptionPane.YES_NO_OPTION);

Los posibles valores son YES_NO_OPTION o YES_NO_CANCEL_OPTION, sencillitos.

Método 3:

1

JOptionPane.showConfirmDialog(Componente padre, "Mensaje", "titulo", "tipo de seleccion", "tipo de mensaje");

Bueno, este método es identico al anterior, solo que se le agrega el tipo de mensaje para que nos reconozca un icono por defecto, tal y como lo hicimos con el InputDialog y el MessageDialog, por ejemplo:

1

int resp = JOptionPane.showConfirmDialog(null, "¿Esta seguro?", "Alerta!", JOptionPane.YES_NO_OPTION, JOptionPane.ERROR_MESSAGE);

Teniendo un resultado como el siguiente, como pueden ver, las variables que utilizamos en los métodos del JOptionPane siempre son casi las mismas, si estan siguiente este tutorial paso a paso, a este punto ya lo deben estar viendo super fácil, el código del método anterior sería el siguiente:

Método 4:

1

JOptionPane.showConfirmDialog(Componente padre, "Mensaje", "titulo", "tipo de seleccion", "tipo de mensaje");

Y el que nos faltaba, el método al cual podemos pasarle un icono personalizado simplemente por estética, veamos un ejemplo con el mismo icono que programamos al principio:

1

2

MyIcon icon = new MyIcon();

 int resp = JOptionPane.showConfirmDialog(null, "¿Esta seguro?", "Alerta!", JOptionPane.YES_NO_OPTION, JOptionPane.ERROR_MESSAGE, icon);

Teniendo un resultado muy similar a los anteriores y funcionando igual que todos los showConfirmDialog como pueden observar:

showOptionDialog

El método anterior, nos enseño una manera de darle a escoger al usuario mas de una opción en una ventana de dialogo, como una manera más personalizada de hacer esto, podemos utilizar el método showOptionDialog que nos proporciona JOptionPane, este método no tiene sobrecarga y cuenta con los siguientes parámetros.

1

JOptionPane.showOptionDialog(padre, mensaje, titulo, tipo de seleccion, tipo de mensaje, icono, opciones, valor inicial);

Los únicos que hay que dejar en claro después de leer este post son el tipo de selección, que utilizamos un tipo de seleccion como el del showConfirmDialog, el tipo de mensaje que ya sabemos cual es, y las opciones, que es un arreglo con las opciones que se le mostraran al usuario y por ultimo, el valor por default, cabe destacar, que este método, devuelve un valor en int del valor que haya seleccionado el usuario, veamos un ejemplo de esto:

1

2

3

MyIcon icon = new MyIcon();

String[] options = {"Opcion A", "Opcion B", "Opcion C", "Opcion D"};

int seleccion = JOptionPane.showOptionDialog(null, "Es necesario que seleccione una opcion", "Titulo", JOptionPane.DEFAULT_OPTION, JOptionPane.QUESTION_MESSAGE, icon, options, options[0]);

Ok explicación, el icono sabemos que es de la clase que anteriormente utilizamos, el arreglo de opciones son las que se van a mostrar en la ventana, el primer parametro que le mando es null, precisamente por que lo estoy corriendo en una clase con método main sin JFrame y no hay componente padre, posteriormente envío el mensaje que quiero que aparezca dentro del cuadro de dialogo, luego el titulo, luego le mando un DEFAULT_OPTION solo para que trate al cuadro de dialogo como un cuadro normal, un QUESTION_MESSAGE que en realidad no tiene sentido a menos que en el icono enviemos null, por tanto, no tiene caso el parámetro, luego paso el icono personalizado que quiero que tenga mi mensaje de dialogo, el arreglo de opciones y la opción por defecto, el cual, me daría un resultado como el siguiente:

Teniendo en cuenta lo anterior, esto significa, que si selecciono la opcion C por ejemplo, el valor entero que me devolverá el método será 2, por que es la posición 2 del arreglo que enviamos como parámetro, y lo mismo con las otras opciones. Como verán, es muy sencillo crear cuadros de dialogo en Java, solo hay que conocer esta pequeña clase, posteriormente, blogueare algo más llamativo, como crear cuadros de dialogo personalizados con la clase JDialog de Java, para esto, dedicaré una entrada completa, espero les sea de ayuda. Saludos.

Buscar este blog

Historia de Java