Clase7 AYP II2012

INTERFACES
GRFICAS
Algoritmia y Programacin (Agosto-Diciembre de 2012)
CONTENIDO
GUIs (Graphic User Interfaces) Qu son?
Componentes
Layouts Eventos GUIs en Netbeans Editor Componentes Layouts Eventos
EISC
Universidad del Valle - Algoritmia y Programacin
Slide 2
INTERFACES GRFICAS
Qu son?
Una interfaz grfica de usuario (GUI) presenta un modo amigable al usuario para interactuar con un programa
u@algoritmia:~$ mkdir documentos u@algoritmia:~$ cd documentos u@algoritmia:~/documentos$
EISC
Slide 3
INTERFACES GRFICAS
Qu son?
Una interfaz grfica de usuario (GUI) presenta un modo amigable al usuario para interactuar con un programa
EISC
Slide 4
INTERFACES GRFICAS
Componentes
Las GUIs se crean a partir de componentes, stos permiten que el usuario interacte mediante el ratn, el teclado y otras formas de entrada
EISC
Slide 5
INTERFACES GRFICAS
Componentes
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 JLabel JTextField
JButton
JTextArea
JPanel (3 botones)
EISC
Slide 6
INTERFACES GRFICAS
Componentes
Ejercicio: Qu componentes identifica en la siguiente interfaz grfica?
EISC
Slide 7
INTERFACES GRFICAS
Componentes
JFrame JTextField JButton
JPanel (16 botones)
EISC
Slide 8
INTERFACES GRFICAS
Componentes
EISC
Slide 9
INTERFACES GRFICAS
Componentes
JFrame
JLabel
JButton JLabel JPanel (3 botones)
EISC
Slide 10
INTERFACES GRFICAS
Componentes
Las GUIs se crean a partir de componentes, stos permiten que el usuario interacte mediante el ratn, el teclado y otras formas de entrada
EISC
Slide 11
INTERFACES GRFICAS
Componentes
JTabbedPane : Permite distribuir varios JPanel en pestaas JRadioButton : Botn de seleccin para informacin excluyente JCheckBox : Casilla de seleccin JSpinner : Componente para especificar un nmero (dos botones) JComboBox : Componente para desplegar una lista de opciones
JMenu JMenuBar JTabbedPane
JComboBox
JSpinner
JCheckBox JRadioButton
EISC
Slide 12
INTERFACES GRFICAS
Componentes
EISC
Slide 13
INTERFACES GRFICAS
Componentes
JFrame JLabel JLabel JTextField
JRadioButton JSpinner JCheckBox
JButton
JLabel
EISC
Slide 14
INTERFACES GRFICAS
Componentes
JPanel (4 elementos) JPanel (2 elementos) JPanel (3 elementos)
JPanel (2 elementos)
EISC
Slide 15
INTERFACES GRFICAS
Componentes y sus mtodos
De acuerdo al tipo de componente es posible realizar operaciones de lectura de su contenido o modificacin de su contenido
EISC
Slide 16
INTERFACES GRFICAS
Componentes y sus mtodos
Es conveniente para la lectura o modificacin de contenido, identificar cada componente por medio de un nombre nico
EISC
Slide 17
INTERFACES GRFICAS
Jlabel
La etiqueta provee informacin textual en la interface grfica. Muestra una linea simple donde se presenta un texto de solo lectura. Una vez creada, el contenido de la etiqueta rara vez se modifica en el programa.
Mtodo void setText(String) void setIcon( Icon) Establece etiqueta. el Propsito texto a mostrar en la
Establece la imagen mostrada por el botn cuando no est seleccionado o pulsado.
import javax.swing.Icon; import javax.swing.ImageIcon; Icon icono = new ImageIcon(getClass().getResource(rutaIcono")));

EISC
Slide 18
INTERFACES GRFICAS
JButton
Un boton es un componente con el cual el usuario dispara una accin especfica. Existen varios tipos de botones: de comando, cajas de chequeo, interruptores y de radio. Un boton de comando genera un ActionEvent cuando el usuario hace click sobre el botn con el mouse.
Mtodo void setText(String)
Propsito Establece el texto a mostrar en el botn.
String getText()
void setIcon( Icon)
Obtiene el texto mostrado por el botn.

Establece la imagen mostrada por el botn cuando no est seleccionado o pulsado.
EISC
Slide 19
INTERFACES GRFICAS
JTextField
JTextField es un rea simples en la cual se puede ingresar texto o mostrar un literal por el usuario. Cuando el usuario digita datos en un JTextField y presiona enter debe ocurrir un evento. Si se registra un evento escuchador, el evento ser procesado y los datos en estos campos podrn usarse.
Mtodo void setText(String) String getText() Propsito Establece el texto a mostrar en el campo de texto. Obtiene el texto campo de texto. mostrado por el
EISC
Slide 20
INTERFACES GRFICAS
Layouts
Para organizar los componentes en una interfaz se utilizan administradores de diseo o gestores de distribucin (Layouts)
EISC
Slide 21
INTERFACES GRFICAS
Layouts
Los gestores de distribucin (Layouts) permiten ordenar los componentes de una interfaz de distintas formas
En el diseo de flujo (FlowLayout) a medida que se aaden componentes se ubican de izquierda a derecha
Diseo de flujo (FlowLayout)
EISC
Slide 22
INTERFACES GRFICAS
Layouts
Los gestores de distribucin (Layouts) permiten ordenar los componentes de una interfaz de distintas formas En el diseo de rejilla (GridLayout) se especifican el nmero de columnas y filas en que se divide un panel para ubicar componentes
Los componentes que se agregan se ubican de izquierda a derecha y de arriba hacia abajo
Diseo de rejilla (GridLayout)
EISC
Slide 23
INTERFACES GRFICAS
Layouts
El diseo de borde (BorderLayout) permite ubicar componentes en las direcciones: norte , centro, sur, este y oeste de una interfaz grfica
NORTH
CENTER SOUTH
EAST
CENTER WEST
Diseo de borde (BorderLayout)

EISC
Slide 24
INTERFACES GRFICAS
Layouts
En una interfaz es posible combinar paneles con distintos tipos de gestores de distribucin
Diseo de borde y Diseo de rejilla

EISC
Slide 25
INTERFACES GRFICAS
Layouts
Ejemplo: La grfica muestra el empleo de gestores de distribucin
JFrame (Diseo de flujo)
JPanel (Diseo de rejilla) JPanel (Diseo de rejilla) JPanel (Diseo de rejilla)
JPanel (Diseo de rejilla)
EISC
Slide 26
INTERFACES GRFICAS
Layouts
Ejemplo: La grfica muestra el empleo de gestores de distribucin
JFrame (Diseo de flujo)
EISC
Slide 27
INTERFACES GRFICAS
Layouts
Ejercicio: Identifique los tipos de gestores de distribucin en la siguiente interfaz grfica:
EISC
Slide 28
INTERFACES GRFICAS
Layouts
JFrame (Diseo de borde) JPanel (Diseo de rejilla)
EISC
Slide 29
INTERFACES GRFICAS
Layouts
EISC
Slide 30
INTERFACES GRFICAS
Layouts
JFrame (Diseo de borde)
EISC
Slide 31
INTERFACES GRFICAS
Layouts
EISC
Slide 32
INTERFACES GRFICAS
Layouts
JFrame (Diseo de rejilla 7x1)
JPanel (Diseo de rejilla 1x5)
JPanel (Diseo de rejilla 1x4)
EISC
Slide 33
INTERFACES GRFICAS
Eventos
Java utiliza una metfora llamada oyente para hacer que la GUI escuche continuamente los eventos que pueden suceder sobre sus componentes.
Algunos de los eventos que pueden ocurrir son: Clic sobre los botones Llenar campos de texto y oprimir la tecla Enter Hacer clic sobre alguna opcin de un men
Ejecutar un comando con el teclado

Seguir el rastro del ratn Entre otros.
EISC
Slide 34
INTERFACES GRFICAS
Eventos
Cada vez que el usuario interacta con la aplicacin se dispara un evento. Para que un componente determinado reaccione frente a un evento, debe poseer un "escuchador" con, al menos, un mtodo determinado que se ejecutar al escuchar un evento en particular. Cada evento tiene relacionado un mtodo o funcin cuyo nombre est conformado por el nombre del componente y el nombre del evento. Las instrucciones a ejecutar se ubican dentro del mtodo donde se requiera. 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
EISC
Slide 35
GUIS
Netbeans
INTERFACES GRFICAS
GUIs en Netbeans
Netbeans cuenta con un asistente para la creacin de interfaces grficas
EISC
Slide 37
INTERFACES GRFICAS
GUIs en Netbeans
Para emplear el asistente de creacin de interfaces grficas debe seguir los siguientes pasos:
EISC
Slide 38
INTERFACES GRFICAS
GUIs en Netbeans
Paso 1: Crear un proyecto nuevo sin fuentes
EISC
Slide 39
INTERFACES GRFICAS
GUIs en Netbeans
Paso 2: Hacer clic derecho sobre la carpeta paquete de fuentes, seleccionar Nuevo y luego Formulario JFrame
EISC
Slide 40
INTERFACES GRFICAS
GUIs en Netbeans
Paso 3: Colocar como nombre Interfaz1 y hacer clic en Terminar
EISC
Slide 41
INTERFACES GRFICAS
GUIs en Netbeans
Paso 3: En la pestaa fuente se muestra el cdigo fuente en Java para la interfaz, en la pestaa diseo se muestra la interfaz como tal
EISC
Slide 42
INTERFACES GRFICAS
GUIs en Netbeans
El asistente para la creacin de interfaces grficas esta compuesto por distintas subventanas
Ventana de Componentes Ventana de Previsualizacin Ventana de Organizacin de Componentes Ventana de Propiedades
EISC
Slide 43
INTERFACES GRFICAS
GUIs en Netbeans
Botn de ejecucin Ventana de componentes
Ventana de previsualizacin
Ventana de organizacin de componentes Ventana de propiedades
EISC
Slide 44
INTERFACES GRFICAS
GUIs en Netbeans
Ejemplo: Por medio del asistente para la creacin de interfaces grficas realizar la siguiente interfaz
EISC
Slide 45
INTERFACES GRFICAS
GUIs en Netbeans
Paso 4: Arrastrar desde la ventana de componentes los siguientes elementos a la ventana de previsualizacin
1 Panel 1 Etiqueta 1 Botn 1 Campo de texto
EISC
Slide 46
INTERFACES GRFICAS
GUIs en Netbeans
Paso 4: Verificar que los componentes se encuentren en la ventana de organizacin de componentes. Verifique adems que se encuentren dentro del componente JFrame
EISC
Slide 47
INTERFACES GRFICAS
GUIs en Netbeans
Paso 5: Hacer clic derecho y seleccionar cambiar nombre de variable. Cambie el nombre de cada componente de acuerdo a como aparece en la grfica
EISC
Slide 48
INTERFACES GRFICAS
GUIs en Netbeans
Paso 6: Hacer clic derecho en JFrame y seleccionar Activar gestor de distribucin y luego seleccionar Diseo de Borde
EISC
Slide 49
INTERFACES GRFICAS
GUIs en Netbeans
Paso 7: El JFrame tiene ahora un diseo de borde, a continuacin ubicaremos el panel en el centro del JFrame
EISC
Slide 50
INTERFACES GRFICAS
GUIs en Netbeans
Paso 7: En la ventana de organizacin de componentes seleccionar panel y en la ventana de propiedades seleccionar como Direccin: Center
EISC
Slide 51
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: Hacer clic derecho en panel y seleccionar Activar gestor de distribucin y luego seleccionar Diseo de Rejilla
EISC
Slide 52
INTERFACES GRFICAS
GUIs en Netbeans
Paso 9: Hacer clic (izquierdo) en GridLayout en la ventana de organizacin de componentes, luego en la ventana de propiedades digite en Columnas 1 y en Filas 3
EISC
Slide 53
INTERFACES GRFICAS
GUIs en Netbeans
Paso 10: Mueva los componentes etiqueta, campoDeTexto dentro del componente panel botn y
EISC
Slide 54
INTERFACES GRFICAS
GUIs en Netbeans
Paso 10:La ventana de previsualizacin debe quedar de la forma que indica la figura
EISC
Slide 55
INTERFACES GRFICAS
GUIs en Netbeans
Paso 11: Disminuya el tamao del JFrame, haciendo clic sostenido y arrastrando desde la esquina hasta alcanzar el tamao de la figura de la derecha
EISC
Slide 56
INTERFACES GRFICAS
GUIs en Netbeans
Paso 12: Hacer clic derecho en etiqueta en la ventana de previsualizacin y seleccionar Editar texto. Escribir Bienvenido como nuevo texto
EISC
Slide 57
INTERFACES GRFICAS
GUIs en Netbeans
Paso 12: Repita el proceso para modificar los otros textos, hasta obtener la figura que se muestra a continuacin
EISC
Slide 58
INTERFACES GRFICAS
GUIs en Netbeans
Paso 13: En la ventana de organizacin de componentes seleccionar etiqueta y en la ventana de propiedades, ajustar las propiedades de la etiqueta de acuerdo con la figura
EISC
Slide 59
INTERFACES GRFICAS
GUIs en Netbeans
Paso 13: En la ventana de previsualizacin, el resultado debe ser la interfaz grfica que muestra la figura
EISC
Slide 60
INTERFACES GRFICAS
GUIs en Netbeans
Paso 14: Hacer doble clic en el boton saludos en la ventana de previsualizacin. En el mtodo botonActionPerformed digite las lneas de cdigo que aparecen a continuacin
private void botonActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: String nombre = campoTexto.getText(); JOptionPane.showMessageDialog(null, Hola + nombre); }
Nota: No olvide agregar la lnea de cdigo.

import javax.swing.JOptionPane;
EISC
Slide 61
INTERFACES GRFICAS
GUIs en Netbeans
Paso 14: Ejecute la aplicacin. Digite su nombre en el campo de texto y haga clic en el botn.
EISC
Slide 62
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 63
INTERFACES GRFICAS
GUIs en Netbeans
Repita los pasos: Paso 1, Paso 2 y Paso 3 , para crear un nuevo proyecto sin fuentes y con un formulario JFrame
EISC
Slide 64
INTERFACES GRFICAS
GUIs en Netbeans
Paso 4: Arrastrar desde la ventana de componentes los siguientes elementos a la ventana de previsualizacin 1 Panel 2 Etiquetas 3 Botones
EISC
Slide 65
INTERFACES GRFICAS
GUIs en Netbeans
Paso 4: Verificar que los componentes se encuentren en la ventana de organizacin de componentes. Verifique adems que los componentes se encuentren organizados como muestra la figura
Los botones se encuentra dentro del JPanel Las etiquetas se encuentra por fuera del JPanel pero dentro del JFrame
EISC
Slide 66
INTERFACES GRFICAS
GUIs en Netbeans
Paso 5: Hacer clic derecho y seleccionar cambiar nombre de variable. Cambie el nombre de cada componente de acuerdo a como aparece en la grfica
EISC
Slide 67
INTERFACES GRFICAS
GUIs en Netbeans
Paso 6: Hacer clic derecho en JFrame y seleccionar Activar gestor de distribucin y luego seleccionar Diseo de Borde
EISC
Slide 68
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 69
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: En la ventana de organizacin de componentes seleccionar etiquetaGanador y en la ventana de propiedades seleccionar como Direccin: South
EISC
Slide 70
INTERFACES GRFICAS
GUIs en Netbeans
Paso 9: En la ventana de organizacin de componentes seleccionar etiquetaJugadas y en la ventana de propiedades seleccionar como Direccin: North
EISC
Slide 71
INTERFACES GRFICAS
GUIs en Netbeans
Paso 10: Hacer clic derecho en panel y seleccionar Activar gestor de distribucin y luego seleccionar Diseo de Rejilla
EISC
Slide 72
INTERFACES GRFICAS
GUIs en Netbeans
Paso 11: Hacer clic (izquierdo) en GridLayout en la ventana de organizacin de componentes, luego en la ventana de propiedades digite en Columnas 3 y en Filas 1
EISC
Slide 73
INTERFACES GRFICAS
GUIs en Netbeans
Paso 12:La ventana de previsualizacin debe quedar de la forma que indica la figura
EISC
Slide 74
INTERFACES GRFICAS
GUIs en Netbeans
Paso 13:Modifique los textos de los componentes para obtener la interfaz grfica de la figura. Elimine los textos de los botones
EISC
Slide 75
INTERFACES GRFICAS
GUIs en Netbeans
Paso 14:Para cada uno de los botones, modifique la propiedad preferredSize, a un valor de [103, 103]
EISC
Slide 76
INTERFACES GRFICAS
GUIs en Netbeans
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 a continuacin
Imgenes de los botones (icon)
Imgenes al pasar el mouse encima de los botones (icon over)
EISC
Slide 77
INTERFACES GRFICAS
GUIs en Netbeans
Paso 16: En la ventana de organizacin de componentes seleccionar el botonPiedra, en la ventana de propiedades hacer clic en icon
EISC
Slide 78
INTERFACES GRFICAS
GUIs en Netbeans
Paso 17: En la ventana de seleccin de icono, en paquete seleccionar la carpeta imgenes, en archivo seleccionar piedra.png
EISC
Slide 79
INTERFACES GRFICAS
GUIs en Netbeans
Paso 17: Repetir el proceso para asignar iconos a los otros botones
EISC
Slide 80
INTERFACES GRFICAS
GUIs en Netbeans
Paso 18: En la ventana de organizacin de componentes seleccionar el botonPiedra, en la ventana de propiedades hacer clic en rollovericon
EISC
Slide 81
INTERFACES GRFICAS
GUIs en Netbeans
Paso 19: En la ventana de seleccin de icono, en paquete seleccionar la carpeta imgenes, en archivo seleccionar piedraover.png
EISC
Slide 82
INTERFACES GRFICAS
GUIs en Netbeans
Paso 20: Repetir el proceso para asignar iconos a los otros botones
EISC
Slide 83
INTERFACES GRFICAS
GUIs en Netbeans
Paso 21: Reduzca el tamao del JFrame
EISC
Slide 84
INTERFACES GRFICAS
GUIs en Netbeans
Paso 22: Hacer doble clic en el botonPiedra en la ventana de previsualizacin. En el mtodo botonPiedraActionPerformed digite 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) { 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"); } if (pcJugada == 3) { etiquetaJugadas.setText("La PC juega Tijera, Usted juega Piedra"); etiquetaGanador.setText("El ganador es usted"); } }
EISC
Slide 85
INTERFACES GRFICAS
GUIs en Netbeans
Paso 23: Hacer doble clic en el botonPapel en la ventana de previsualizacin. En el mtodo botonPapelActionPerformed digite 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"); } if (pcJugada == 2) { etiquetaJugadas.setText("La PC juega Papel, Usted juega Papel"); etiquetaGanador.setText("Empate"); } if (pcJugada == 3) { etiquetaJugadas.setText("La PC juega Tijera, Usted juega Papel"); etiquetaGanador.setText("La PC gana"); } }
EISC
Slide 86
INTERFACES GRFICAS
GUIs en Netbeans
Paso 24: Hacer doble clic en el botonTijera en la ventana de previsualizacin. En el mtodo botonTijeraActionPerformed digite 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"); } if (pcJugada == 2) { etiquetaJugadas.setText("La PC juega Papel, Usted juega Tijera"); etiquetaGanador.setText("El usuario gana"); } if (pcJugada == 3) { etiquetaJugadas.setText("La PC juega Tijera, Usted juega Tijera"); etiquetaGanador.setText("Empate"); } }
EISC
Slide 87
INTERFACES GRFICAS
GUIs en Netbeans
Paso 25: Al ejecutar la aplicacin deber observar la interfaz grfica que se muestra a continuacin
EISC
Slide 88
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 89
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 90
INTERFACES GRFICAS
GUIs en Netbeans

EISC
Slide 91
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
INTERFACES GRFICAS
GUIs en Netbeans
Paso 5: De acuerdo a la figura:
Organizar los componentes
Ajustar los gestores de distribucin para el JFrame (BorderLayout) y el panel (GridLayout)

Cambiar los componentes nombres de los
EISC
Slide 92
INTERFACES GRFICAS
GUIs en Netbeans
Paso 6: Hacer clic (izquierdo) en GridLayout en la ventana de organizacin de componentes, luego en la ventana de propiedades digite en Columnas 2, en Filas 5, en Surco Horizontal 2 y en Surco Vertical 2
EISC
Slide 93
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 94
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: En la ventana de organizacin de componentes seleccionar radioVIP y en la ventana de propiedades, en buttonGroup, seleccionar grupoCategoria. Repetir el procedimiento para el componente radioGeneral
EISC
Slide 95
INTERFACES GRFICAS
GUIs en Netbeans
Paso 9: Cambie los textos de cada componente de acuerdo a como se observa en la figura. Cambie el tamao del JFrame para ajustarlo a los componentes de la interfaz
EISC
Slide 96
INTERFACES GRFICAS
private 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()) { 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"); } }
EISC
Slide 97
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 98
INTERFACES GRFICAS
GUIs en Netbeans
EISC
Slide 99
INTERFACES GRFICAS
GUIs en Netbeans
4 Paneles 17 Etiquetas 1 Campo de texto 4 Botones
EISC
Slide 100
INTERFACES GRFICAS
GUIs en Netbeans
Paso 5: De acuerdo a la figura:
Organizar los componentes Ajustar los gestores de distribucin para el JFrame (GridLayout) y los paneles (GridLayout) Cambiar los componentes nombres de los
EISC
Slide 101
INTERFACES GRFICAS
GUIs en Netbeans
Paso 5: El resto de las etiquetas se deben ubicar en cada uno de los paneles
EISC
Slide 102
INTERFACES GRFICAS
GUIs en Netbeans
Paso 6: Hacer clic (izquierdo) en GridLayout debajo de JFrame en la ventana de organizacin de componentes, luego en la ventana de propiedades digite en Columnas 1, en Filas 7, en Surco Horizontal 0 y en Surco Vertical 0
EISC
Slide 103
INTERFACES GRFICAS
GUIs en Netbeans
Paso 6: Hacer clic (izquierdo) en GridLayout debajo de panelDescripcion en la ventana de organizacin de componentes, luego en la ventana de propiedades digite en Columnas 5, en Filas 1, en Surco Horizontal 0 y en Surco Vertical 0 (Repetir el proceso para el panelValores y el panelUnidades)
EISC
Slide 104
INTERFACES GRFICAS
GUIs en Netbeans
Paso 6: Hacer clic (izquierdo) en GridLayout debajo de panelBuscar en la ventana de organizacin de componentes, luego en la ventana de propiedades digite en Columnas 4, en Filas 1, en Surco Horizontal 0 y en Surco Vertical 0
EISC
Slide 105
INTERFACES GRFICAS
GUIs en Netbeans
Paso 7: Cambie los textos de cada componente de acuerdo a como se observa en la figura. Cambie el tamao del JFrame para ajustarlo a los componentes de la interfaz
EISC
Slide 106
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: Declara las siguientes variables globales en el cdigo de la Interfaz:
String descripcion[] = new String[4]; int valores[] = new int[4]; int unidades[] = new int[4];
EISC
Slide 107
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: Hacer doble clic en el botonDescripcion en la ventana de previsualizacin. En el mtodo botonDescripcionActionPerformed digite las lneas de cdigo que aparecen en la siguiente diapositiva
EISC
Slide 108
INTERFACES GRFICAS
private 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]); }
EISC
Slide 109
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: Hacer doble clic en el botonValores en la ventana de previsualizacin. En el mtodo botonValoresActionPerformed digite las lneas de cdigo que aparecen en la siguiente diapositiva
EISC
Slide 110
INTERFACES GRFICAS
private 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]); }
EISC
Slide 111
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: Hacer doble clic en el botonUnidades en la ventana de previsualizacin. En el mtodo botonUnidadesActionPerformed digite las lneas de cdigo que aparecen en la siguiente diapositiva
EISC
Slide 112
INTERFACES GRFICAS
private 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]); etiquetaU4.setText("" + unidades[3]); }
EISC
Slide 113
INTERFACES GRFICAS
GUIs en Netbeans
Paso 8: Hacer doble clic en el botonAceptar en la ventana de previsualizacin. En el mtodo botonAceptarActionPerformed digite las lneas de cdigo que aparecen en la siguiente diapositiva
EISC
Slide 114
INTERFACES GRFICAS
private 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]); }
EISC
Slide 115
INTERFACES GRFICAS
Ejercicio: El usuario digita un nmero en el cuadro de texto Digite un valor una vez pulsado el botn Actualizar, se actualiza el cono del campo Icono, escriba el cdigo que permita actualizar la informacin de los componentes: Cree los conos que requiera en un editor de imgenes. Ejemplos:
1
EISC
Slide 116
INTERFACES GRFICAS
Ejercicio: Realice los cambios necesarios para que al no escribir un valor, se limpien todos los campos. Nota: para quitar un icono se emplea el mtodo setIcon con parmetro de entrada null
EISC
Slide 117
INTERFACES GRFICAS
Sugerencias
Para facilitar la construccin de una interfaz grfica se recomienda realizar inicialmente un boceto de la interfaz donde se definan los elementos que la conforman y su distribucin. En la construccin de la interfaz se recomienda primero agregar los paneles que la conforman y ajustar su respectiva distribucin (BorderLayout, GridLayout, etc) junto con sus propiedades (dimensiones de la grilla, separacin, etc). Posteriormente se recomienda agregar cada elemento grfico ( campos de texto, etiquetas, botones, etc) a su respectivo panel y en la posicin deseada. Repita los ejercicios de esta clase tomando como referencia nicamente la interfaz en su apariencia final.
EISC
Slide 118
INTERFACES GRFICAS
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 oundation_classes_94
EISC
Slide 119

Clase7 AYP II2012

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Clase7 AYP II2012

Загружено:

Авторское право:

Доступные форматы

INTERFACES

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

JFrame JTextField JButton

JPanel (16 botones)

JButton JLabel JPanel (3 botones)

JMenu JMenuBar JTabbedPane

JRadioButton JSpinner JCheckBox

JPanel (4 elementos) JPanel (2 elementos) JPanel (3 elementos)

Establece la imagen mostrada por el botn cuando no est seleccionado o pulsado.

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

Mtodo void setText(String)

Propsito Establece el texto a mostrar en el botn.

Obtiene el texto mostrado por el botn.

Diseo de flujo (FlowLayout)

Diseo de rejilla (GridLayout)

Diseo de borde (BorderLayout)

Diseo de borde y Diseo de rejilla

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

JPanel (Diseo de rejilla)

JFrame (Diseo de flujo)

JPanel (Diseo de rejilla)

JFrame (Diseo de borde) JPanel (Diseo de rejilla)

JPanel (Diseo de rejilla)

JFrame (Diseo de rejilla 7x1)

JPanel (Diseo de rejilla 1x5)

JPanel (Diseo de rejilla 1x4)

Ejecutar un comando con el teclado

Ventana de organizacin de componentes Ventana de propiedades

1 Panel 1 Etiqueta 1 Botn 1 Campo de texto

Nota: No olvide agregar la lnea de cdigo.

Imgenes de los botones (icon)

Imgenes al pasar el mouse encima de los botones (icon over)

Ajustar los gestores de distribucin para el JFrame (BorderLayout) y el panel (GridLayout)

Вам также может понравиться