clase 7 - interfaces graficas

INTERFACES GRFICAS

Algoritmia y Programacin (Agosto-Diciembre de 2012)

INTERFACES GRFICAS

CONTENIDO

GUIs (Graphic User Interfaces)

Qu son?

Componentes

Layouts

Eventos

Slide 2EISCUniversidad del Valle - Algoritmia y Programacin

GUIs en Netbeans

Editor

Componentes

Layouts

Eventos

INTERFACES GRFICASQu son?

Una interfaz grfica de usuario (GUI) presenta un modo amigableal usuario para interactuar con un programa

u@algoritmia:~$ mkdir documentosu@algoritmia:~$ cd documentos


u@algoritmia:~$ cd documentosu@algoritmia:~/documentos$

INTERFACES GRFICASQu son?

Una interfaz grfica de usuario (GUI) presenta un modo amigableal usuario para interactuar con un programa


INTERFACES GRFICASComponentes

Las GUIs se crean a partir de componentes, stos permiten queel usuario interacte mediante el ratn, el teclado y otras formasde entrada



JFrame : Es la ventana sobre la que se construye la GUI.JLabel : Etiquetas para mostrar mensajes o indicaciones al usuario.JButton : Se asocia a una operacin que realizar el usuario.JTextField : Puede permitir tanto la entrada como la salida de datos.JPanel : Sirve como contenedor para: JLabel, JButton y JTextField.

JFrame


JFrame

JLabel

JButton

JTextField

JTextArea

JPanel(3 botones)


Ejercicio: Qu componentes identifica en la siguiente interfazgrfica?




JTextField

JFrame


JButton

JTextField

JPanel(16 botones)



JFrameJLabel


JButton

JLabelJPanel(3 botones)

JLabel


Las GUIs se crean a partir de componentes, stos permiten queel usuario interacte mediante el ratn, el teclado y otras formasde entrada


INTERFACES GRFICASComponentesJTabbedPane : Permite distribuir varios JPanel en pestaasJRadioButton : Botn de seleccin para informacin excluyenteJCheckBox : Casilla de seleccinJSpinner : Componente para especificar un nmero (dos botones)JComboBox : Componente para desplegar una lista de opciones


JTabbedPane

JMenu

JCheckBox

JMenuBar

JComboBoxJSpinner JRadioButton



JFrame

JLabelJTextField


JCheckBox

JSpinnerJRadioButton

JTextFieldJLabel

JButton

JLabel



JPanel


JPanel(4 elementos)JPanel(2 elementos)

JPanel(3 elementos)

JPanel(2 elementos)

INTERFACES GRFICASComponentes y sus mtodos

De acuerdo al tipo de componente es posible realizaroperaciones de lectura de su contenido o modificacin de sucontenido


INTERFACES GRFICASComponentes y sus mtodos

Es conveniente para la lectura o modificacin de contenido,identificar cada componente por medio de un nombre nico


INTERFACES GRFICAS JLabel

Mtodo Propsito

void setText(String) Establece el texto a mostrar en laetiqueta.

void setIcon( Icon) Establece la imagen mostrada por elbotn cuando no est seleccionado opulsado.


pulsado.

import javax.swing.Icon;import javax.swing.ImageIcon;

Icon icono = new ImageIcon(getClass().getResource(rutaIcono")));

INTERFACES GRFICAS JButton

Mtodo Propsito

void setText(String) Establece el texto a mostrar en elbotn.

String getText() Obtiene el texto mostrado por elbotn.


void setIcon( Icon) Establece la imagen mostrada por elbotn cuando no est seleccionado opulsado.

INTERFACES GRFICAS JTextField

Mtodo Propsito

void setText(String) Establece el texto a mostrar en elcampo de texto.

String getText() Obtiene el texto mostrado por elcampo de texto.


INTERFACES GRFICASLayouts

Los gestores de distribucin (Layouts) permiten ordenar loscomponentes de una interfaz de distintas formas




En el diseo de flujo a medida que se aaden componentes seubican de izquierda a derecha


Diseo de flujo (FlowLayout)



En el diseo de rejilla se especifican el nmero de columnas y filasen que se divide un panel para ubicar componentes


Diseo de rejilla (GridLayout)

Los componentes que se agregan se ubican de izquierda a derecha y de arriba hacia abajo



El diseo de borde permite ubicar componentes en lasdirecciones: norte , centro, sur, este y oeste de una interfazgrfica


grfica

Diseo de borde (BorderLayout)

CENTER

SOUTH

NORTH

WEST

EAST

CENTER



En una interfaz es posible combinar paneles con distintos tipos degestores de distribucin


Diseo de borde y Diseo de rejilla


Ejemplo: La grfica muestra el empleo de gestores de distribucin

JPanel

JFrame(Diseo de flujo)


JPanel(Diseo de rejilla)JPanel(Diseo de rejilla)

JPanel(Diseo de rejilla)



Ejemplo: La grfica muestra el empleo de gestores de distribucin

JFrame(Diseo de flujo)



(Diseo de flujo)


Ejercicio: Identifique los tipos de gestores de distribucin en lasiguiente interfaz grfica:




JFrame



JFrame(Diseo de borde)



JFrame(Diseo de borde)



(Diseo de borde)



JFrame(Diseo de rejilla 7x1)


(Diseo de rejilla 7x1)

JPanel(Diseo de rejilla 1x5)

JPanel(Diseo de rejilla 1x4)

INTERFACES GRFICASEventos

Java utiliza una metfora llamada oyente para hacer que la GUIescuche continuamente los eventos que pueden suceder sobre suscomponentes.

Algunos de los eventos que pueden ocurrir son:


Clic sobre los botones

Completar campos de texto y oprimir la tecla Enter

Hacer clic sobre alguna opcin de un men

Ejecutar un comando con el tecladoSeguir el rastro del ratn

Entre otros.

INTERFACES GRFICASEventos

Cada componente tiene eventos relacionados y a cada evento sele pueden asignar instrucciones que se ejecutarn cuando elevento ocurra.

Cada evento tiene relacionado un mtodo o funcin cuyo nombreest conformado por el nombre del componente y el nombre delevento.


evento. Las instrucciones a ejecutar se ubican dentro del mtodo donde serequiera.

Ejemplo de eventos generados por el mouse sobre un botn:

Evento Nombre en Java Componente Mtodo relacionado

Click de mouse sobre el botn MouseClicked boton1 boton1MouseClicked

El mouse ingresa al rea del botn MouseEntered boton1 boton1MouseEntered

El mouse sale del rea del botn MouseExited boton1 boton1MouseExited

GUIS

Netbeans

INTERFACES GRFICASGUIs en Netbeans

Netbeans cuenta con un asistente para la creacin de interfacesgrficas



Para emplear el asistente de creacin de interfaces grficas debeseguir los siguientes pasos:



Paso 1: Crear un proyecto nuevo sin fuentes



Paso 2: Hacer clic derecho sobre la carpeta paquete de fuentes,seleccionar Nuevo y luego Formulario JFrame



Paso 3: Colocar como nombre Interfaz y hacer clic en Terminar



Paso 3: En la pestaa fuente se muestra el cdigo fuente en Javapara la interfaz, en la pestaa diseo se muestra la interfaz comotal



El asistente para la creacin de interfaces grficas esta compuestopor distintas subventanas

Ventana de Componentes Ventana de Previsualizacin


Ventana de Organizacin de Componentes Ventana de Propiedades


Ventana deprevisualizacin

Ventana decomponentesBotn deejecucin


previsualizacin

Ventana deorganizacinde componentes

Ventana depropiedades


Ejemplo: Por medio del asistente para la creacin de interfacesgrficas realizar la siguiente interfaz



Paso 4: Arrastrar desde la ventana de componentes lossiguientes elementos a la ventana de previsualizacin

1 Panel 1 Etiqueta


1 Botn 1 Campo de texto


Paso 4: Verificar que los componentes se encuentren en laventana de organizacin de componentes. Verifique ademsque se encuentren dentro del componente JFrame



Paso 5: Hacer clic derecho y seleccionar cambiar nombre devariable. Cambie el nombre de cada componente de acuerdo acomo aparece en la grfica



Paso 6: Hacer clic derecho en JFrame y seleccionar Activargestor de distribucin y luego seleccionar Diseo de Borde



Paso 7: El JFrame tiene ahora un diseo de borde, a continuacinubicaremos el panel en el centro del JFrame



Paso 7: En la ventana de organizacin de componentesseleccionar panel y en la ventana de propiedades seleccionarcomo Direccin: Center



Paso 8: Hacer clic derecho en panel y seleccionar Activar gestorde distribucin y luego seleccionar Diseo de Rejilla



Paso 9: Hacer clic (izquierdo) en GridLayout en la ventana deorganizacin de componentes, luego en la ventana depropiedades digite en Columnas 1 y en Filas 3



Paso 10: Mueva los componentes etiqueta, botn ycampoDeTexto dentro del componente panel



Paso 10:La ventana de previsualizacin debe quedar de laforma que indica la figura



Paso 11: Disminuya el tamao del JFrame, haciendo clicsostenido y arrastrando desde la esquina hasta alcanzar eltamao de la figura de la derecha



Paso 12: Hacer clic derecho en etiqueta en la ventana deprevisualizacin y seleccionar Editar texto. Escribir Bienvenidocomo nuevo texto



Paso 12: Repita el proceso para modificar los otros textos, hastaobtener la figura que se muestra a continuacin



Paso 13: En la ventana de organizacin de componentesseleccionar etiqueta y en la ventana de propiedades, ajustarlas propiedades de la etiqueta de acuerdo con la figura



Paso 13: En la ventana de previsualizacin, el resultado debeser la interfaz grfica que muestra la figura



Paso 14: Hacer doble clic en el boton saludos en la ventana deprevisualizacin. En el mtodo botonActionPerformed digitelas lneas de cdigo que aparecen a continuacin

private void botonActionPerformed(java.awt.event.ActionEvent evt) {// TODO add your handling code here:


Nota: No olvide agregar la lnea de cdigo.

// TODO add your handling code here:String nombre = campoTexto.getText();JOptionPane.showMessageDialog(null, Hola + nombre);

}

import javax.swing.JOptionPane;


Paso 14: Ejecute la aplicacin. Digite su nombre en el campo detexto y haga clic en el botn.



Repita los pasos: Paso 1, Paso 2 y Paso 3 , para crear un nuevoproyecto sin fuentes y con un formulario JFrame



Paso 4: Arrastrar desde la ventana de componentes lossiguientes elementos a la ventana de previsualizacin

1 Panel 2 Etiquetas


3 Botones


Paso 4: Verificar que los componentes se encuentren en laventana de organizacin de componentes. Verifique ademsque los componentes se encuentren organizados como muestra lafigura


Las etiquetas se encuentra por fueradel JPanel pero dentro del JFrame

Los botones se encuentra dentrodel JPanel


Paso 5: Hacer clic derecho y seleccionar cambiar nombre devariable. Cambie el nombre de cada componente de acuerdo acomo aparece en la grfica



Paso 6: Hacer clic derecho en JFrame y seleccionar Activargestor de distribucin y luego seleccionar Diseo de Borde



Paso 8: En la ventana de organizacin de componentesseleccionar etiquetaGanador y en la ventana de propiedadesseleccionar como Direccin: South



Paso 9: En la ventana de organizacin de componentesseleccionar etiquetaJugadas y en la ventana de propiedadesseleccionar como Direccin: North



Paso 10: Hacer clic derecho en panel y seleccionar Activargestor de distribucin y luego seleccionar Diseo de Rejilla



Paso 11: Hacer clic (izquierdo) en GridLayout en la ventana deorganizacin de componentes, luego en la ventana depropiedades digite en Columnas 3 y en Filas 1



Paso 12:La ventana de previsualizacin debe quedar de laforma que indica la figura



Paso 13:Modifique los textos de los componentes para obtener lainterfaz grfica de la figura. Elimine los textos de los botones



Paso 14:Para cada uno de los botones, modifique la propiedadpreferredSize, a un valor de [103, 103]



Paso 15: Crear en la carpeta src del proyecto creado en Netbeans(Carpera Personal Netbeans Projects Carpeta de Proyecto src) una carpeta llamada imgenes con las imgenes acontinuacin


Imgenes de los botones (icon) Imgenes al pasar el mouseencima de los botones (icon over)


Paso 16: En la ventana de organizacin de componentesseleccionar el botonPiedra, en la ventana de propiedadeshacer clic en icon



Paso 17: En la ventana de seleccin de icono, en paqueteseleccionar la carpeta imgenes, en archivo seleccionarpiedra.png



Paso 17: Repetir el proceso para asignar iconos a los otrosbotones



Paso 18: En la ventana de organizacin de componentesseleccionar el botonPiedra, en la ventana de propiedadeshacer clic en rollovericon



Paso 19: En la ventana de seleccin de icono, en paqueteseleccionar la carpeta imgenes, en archivo seleccionarpiedraover.png



Paso 20: Repetir el proceso para asignar iconos a los otrosbotones



Paso 21: Reduzca el tamao del JFrame



Paso 22: Hacer doble clic en el botonPiedra en la ventana deprevisualizacin. En el mtodo botonPiedraActionPerformeddigite las lneas de cdigo que aparecen a continuacin

private void botonPiedraActionPerformed(java.awt.event.ActionEvent evt) {int pcJugada = (int) Math.round(Math.random() * 2) + 1;

if (pcJugada == 1) {


if (pcJugada == 1) {etiquetaJugadas.setText("La PC juega Piedra, Usted juega Piedra");etiquetaGanador.setText("Empate");

}if (pcJugada == 2) {

etiquetaJugadas.setText("La PC juega Papel, Usted juega Piedra");etiquetaGanador.setText("La PC gana");


etiquetaJugadas.setText("La PC juega Tijera, Usted juega Piedra");etiquetaGanador.setText("El ganador es usted");

}}


Paso 23: Hacer doble clic en el botonPapel en la ventana deprevisualizacin. En el mtodo botonPapelActionPerformeddigite las lneas de cdigo que aparecen a continuacin

private void botonPapelActionPerformed(java.awt.event.ActionEvent evt) {int pcJugada = (int) Math.round(Math.random() * 2) + 1;



if (pcJugada == 1) {etiquetaJugadas.setText("La PC juega Piedra, Usted juega Papel");etiquetaGanador.setText("El ganador es Usted");


etiquetaJugadas.setText("La PC juega Papel, Usted juega Papel");etiquetaGanador.setText("Empate");


etiquetaJugadas.setText("La PC juega Tijera, Usted juega Papel");etiquetaGanador.setText("La PC gana");

}}


Paso 24: Hacer doble clic en el botonTijera en la ventana deprevisualizacin. En el mtodo botonTijeraActionPerformeddigite las lneas de cdigo que aparecen a continuacin

private void botonTijeraActionPerformed(java.awt.event.ActionEvent evt) {int pcJugada = (int) Math.round(Math.random() * 2) + 1;



if (pcJugada == 1) {etiquetaJugadas.setText("La PC juega Piedra, Usted juega Tijera");etiquetaGanador.setText("La PC gana");


etiquetaJugadas.setText("La PC juega Papel, Usted juega Tijera");etiquetaGanador.setText("El usuario gana");


etiquetaJugadas.setText("La PC juega Tijera, Usted juega Tijera");etiquetaGanador.setText("Empate");

}}


Paso 25: Al ejecutar la aplicacin deber observar la interfazgrfica que se muestra a continuacin



Paso 4: Arrastrar desde laventana de componentes lossiguientes elementos a laventana de previsualizacin

1 Panel


1 Panel 4 Etiquetas 1 Campo de texto 1 Lista desplegable 1 Spinner 2 Botones de opcin 1 Grupo de botones 1 Botn 1 Cuadro de contrasea 1 Barra de men 1 Men 1 Elemento de Men


Paso 5: De acuerdo a la figura:

Organizar los componentes

Ajustar los gestores de distribucin


Ajustar los gestores de distribucinpara el JFrame (BorderLayout) y elpanel (GridLayout)

Cambiar los nombres de loscomponentes


Paso 6: Hacer clic (izquierdo) en GridLayout en la ventana deorganizacin de componentes, luego en la ventana depropiedades digite en Columnas 2, en Filas 5, en SurcoHorizontal 2 y en Surco Vertical 2



Paso 8: En la ventana de organizacin de componentesseleccionar radioVIP y en la ventana de propiedades, enbuttonGroup, seleccionar grupoCategoria. Repetir elprocedimiento para el componente radioGeneral



Paso 9: Cambie los textos de cada componente de acuerdo acomo se observa en la figura. Cambie el tamao del JFrame paraajustarlo a los componentes de la interfaz



Paso 10: Hacer doble clic en el botonReservar en la ventana deprevisualizacin. En el mtodo botonPiedraActionPerformeddigite las lneas de cdigo que aparecen en la siguiente diapositiva


INTERFACES GRFICASprivate void botonReservarActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:

String id = "", fila = "", categoria = "";int silla = 0;

id = campoTextoId.getText();fila = comboFila.getSelectedItem().toString();silla = Integer.parseInt(spinnerSilla.getValue().toString());if (radioGeneral.isSelected()) {

categoria = "VIP";} else if (radioVIP.isSelected()) {


} else if (radioVIP.isSelected()) {categoria = "General";

}

if (!id.equals("") && !fila.equals("") && silla != 0 && !categoria.equals("")) {JOptionPane.showMessageDialog(null, "La reserva fue exitosa"

+ "\nIdentificacion : " + id+ "\nFila : " + fila + " - Silla : " + silla+ "\nCategoria : " + categoria);

} else {JOptionPane.showMessageDialog(null, "Ingrese todos los campos");

}}


Paso 4: Arrastrar desde laventana de componentes lossiguientes elementos a laventana de previsualizacin

4 Paneles


4 Paneles 17 Etiquetas 1 Campo de texto 4 Botones


Paso 5: De acuerdo a la figura:

Organizar los componentes

Ajustar los gestores de distribucin


Ajustar los gestores de distribucinpara el JFrame (GridLayout) y lospaneles (GridLayout)

Cambiar los nombres de loscomponentes


Paso 5: El resto de las etiquetas se deben ubicar en cada uno de los paneles



Paso 6: Hacer clic (izquierdo) en GridLayout debajo de JFrameen la ventana de organizacin de componentes, luego en laventana de propiedades digite en Columnas 1, en Filas 7, enSurco Horizontal 0 y en Surco Vertical 0



Paso 6: Hacer clic (izquierdo) en GridLayout debajo depanelDescripcion en la ventana de organizacin decomponentes, luego en la ventana de propiedades digite enColumnas 5, en Filas 1, en Surco Horizontal 0 y en SurcoVertical 0 (Repetir el proceso para el panelValores y elpanelUnidades)


panelUnidades)


Paso 6: Hacer clic (izquierdo) en GridLayout debajo depanelBuscar en la ventana de organizacin decomponentes, luego en la ventana de propiedades digite enColumnas 4, en Filas 1, en Surco Horizontal 0 y en SurcoVertical 0



Paso 7: Cambie los textos de cada componente de acuerdo acomo se observa en la figura. Cambie el tamao del JFrame paraajustarlo a los componentes de la interfaz



Paso 8: Declara las siguientes variables globales en el cdigo de laInterfaz:

String descripcion[] = new String[4];int valores[] = new int[4];int unidades[] = new int[4];



Paso 8: Hacer doble clic en el botonDescripcion en la ventana deprevisualizacin. En el mtodo botonDescripcionActionPerformeddigite las lneas de cdigo que aparecen en la siguiente diapositiva


INTERFACES GRFICASprivate void botonDescripcionActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:

int tam = descripcion.length;for (int i = 0; i < tam; i++) {

descripcion[i] = JOptionPane.showInputDialog("Digite producto");}

etiquetaP1.setText(descripcion[0]);etiquetaP2.setText(descripcion[1]);etiquetaP3.setText(descripcion[2]);etiquetaP4.setText(descripcion[3]);


etiquetaP4.setText(descripcion[3]);}


Paso 8: Hacer doble clic en el botonValores en la ventana deprevisualizacin. En el mtodo botonValoresActionPerformed digitelas lneas de cdigo que aparecen en la siguiente diapositiva


INTERFACES GRFICASprivate void botonValoresActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:

int tam = valores.length;for (int i = 0; i < tam; i++) {

valores[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite valor"));}

etiquetaV1.setText("" + valores[0]);etiquetaV2.setText("" + valores[1]);etiquetaV3.setText("" + valores[2]);etiquetaV4.setText("" + valores[3]);


etiquetaV4.setText("" + valores[3]);}


Paso 8: Hacer doble clic en el botonUnidades en la ventana deprevisualizacin. En el mtodo botonUnidadesActionPerformed digitelas lneas de cdigo que aparecen en la siguiente diapositiva


INTERFACES GRFICASprivate void botonUnidadesActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:

int tam = unidades.length;for (int i = 0; i < tam; i++) {

unidades[i] = Integer.parseInt(JOptionPane.showInputDialog("Digite unidades"));}

etiquetaU1.setText("" + unidades[0]);etiquetaU2.setText("" + unidades[1]);etiquetaU3.setText("" + unidades[2]);


etiquetaU3.setText("" + unidades[2]);etiquetaU4.setText("" + unidades[3]);

}


Paso 8: Hacer doble clic en el botonAceptar en la ventana deprevisualizacin. En el mtodo botonAceptarActionPerformed digitelas lneas de cdigo que aparecen en la siguiente diapositiva


INTERFACES GRFICASprivate void botonAceptarActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:

etiquetaResultado.setText("");

int tam = descripcion.length;for (int i = 0; i < tam; i++) {

if (campoTextoComprar.getText().equalsIgnoreCase(descripcion[i])) {unidades[i] = unidades[i] - 1;etiquetaResultado.setText("Encontrado!");

}


}}

if (etiquetaResultado.getText().equals("")) {etiquetaResultado.setText("No encontrado!");

}

etiquetaU1.setText("" + unidades[0]);etiquetaU2.setText("" + unidades[1]);etiquetaU3.setText("" + unidades[2]);etiquetaU4.setText("" + unidades[3]);

}

INTERFACES GRFICAS Ejercicio: El usuario digita un nmero en el cuadro de textoDigite un valor una vez pulsado el botn Actualizar, seactualiza el cono del campo Icono, escriba el cdigo quepermita actualizar la informacin de los componentes:

Cree los conos que requiera en un editor de imgenes. Ejemplos:

1


1

INTERFACES GRFICAS

Ejercicio: Realice los cambios necesarios para que al no escribirun valor, se limpien todos los campos. Nota: para quitar un iconose emplea el mtodo setIcon con parmetro de entrada null


INTERFACES GRFICASSugerencias

Para facilitar la construccin de una interfaz grfica se recomienda realizarinicialmente un boceto de la interfaz donde se definan los elementos que laconforman y su distribucin.

En la construccin de la interfaz se recomienda primero agregar los panelesque la conforman y ajustar su respectiva distribucin (BorderLayout,GridLayout, etc) junto con sus propiedades (dimensiones de la grilla,


GridLayout, etc) junto con sus propiedades (dimensiones de la grilla,separacin, etc). Posteriormente se recomienda agregar cada elementogrfico ( campos de texto, etiquetas, botones, etc) a su respectivo panel y enla posicin deseada.

Repita los ejercicios de esta clase tomando como referencia nicamente lainterfaz en su apariencia final.

WEBGRAFIA

http://download.oracle.com/javase/7/docs/api/

http://java.sun.com/developer/onlineTraining/GUI/Swing1/shortcourse.html

http://www.programacion.com/articulo/swing_y_jfc_java_f


http://www.programacion.com/articulo/swing_y_jfc_java_foundation_classes_94

clase 7 - interfaces graficas

Documents

qu componentes

siguiente interfazgrfica

queel usuario interacte

modo amigableal usuario

interfaz grfica de usuario

formasde entradaslide

cd documentosu

interfaces grficasalgoritmia