INTERFAZ

GRÁFICA
DE USUARI
O (GUI)
Clase JFrame
 Introducción
Una GUI proporciona a una aplicación una “apariencia visual” única,
al proporcionar distintas aplicaciones en las que los componentes de
la interfaz de usuario sean consistentes e intuitivos, los usuarios
pueden familiarizarse en cierto modo con una aplicación, de manera
que pueden aprender a utilizarla en menor tiempo y con mayor
productividad.

You can delete this slide when you’re done editing the presentation.
 Algunos componentes básicos de
GUI
JLabel 04 JCheckBox
01
Muestra texto que no puede editarse, o Especifica una opción que puede seleccionarse
iconos o no seleccionarse

02 JTextField
Permite al usuario introducir datos
mediante el teclado. También se puede
utilizar para mostrar texto que puede o
no editarse
05 JComboBox
Proporciona una lista desplegable de elementos, a partir
de los cuales el usuario puede realizar una selección,
haciendo clic en un elemento o posiblemente
escribiendo en el cuadro.

03 JButton 06 JList
Activa un evento cuando se oprime Proporciona una lista de elementos a partir de los
mediante el ratón. cuales el usuario puede realizar una
selección, haciendo clic en cualquier elemento en la
lista. Pueden seleccionarse varios elementos.
 JPanel
Proporciona un área en
la que pueden colocarse
y organizarse los
componentes.
También puede utilizars
e como un área
de dibujo para gráficos.
Los administradores de esquemas se
proporcionan para ordenar los componentes de
la GUI en un contenedor, para fines de
presentación. Los programadores pueden usar
los administradores de esquemas como
herramientas básicas de distribución visual, en
vez de determinar la posición y tamaño
exactos de cada componente de la GUI. Esta
funcionalidad permite al programador
concentrarse en la vista y sentido básicos, y
deja que el administrador de esquemas procese
la mayoría de los detalles de la distribución
visual.
 Tipos de Administradores de esquemas

FlowLayout BorderLayo
Es el predeterminado ut GridLayo
Es el predeterminado
para javax.swing.JPanel. Coloca
para los
ut
los componentes Ordena los
secuencialmente(de izquierda a objetos JFrame (y otras componentes en filas y
derecha) en el orden en que se ventanas). Ordena los columnas.
agregaron. componentes en cinco
También es posible especificar areas: NORTH, SOUTH,
el orden de los componentes EAST, WEST y CENTER
utilizando el método add de .
Container, el cual toma un
objeto Component y una GET IT!
posición de índice entero como GET IT!
argumentos
GET IT!
 CREAR LA VENTANA
La mayoría de las ventanas que creará son una instancia de la clase JFrame o
una subclase de JFrame. JFrame proporciona los atributos y comportamientos
básicos de una ventana: una barra de título en la parte superior, y botones para
minimizar, maximizar y cerrar la ventana.

La clase se debe crear como una extensión de la clase JFrame, por ejemplo:
pubic class NombreClaseObjeto extends JFrame
 CREAR LA VENTANA
Para trabajar las acciones de los botones la clase debe ser una implementación
de ActionListener, por ejemplo:
public class VentanFormulario implements ActionListener
Creación de ventana con el titulo, por ejemplo:
JFrame ventana = new JFrame(“TITULO DE LA VENTANA");
En el constructor de la clase, definir la ventana sin divisiones:
ventana.setLayout(null);
 Configurar la ventana
● Configurar la barra de título en la parte superior, y botones para minimizar,
maximizar y cerrar la ventana.
ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
● Configurar si el usuario puede cambiar el tamaño de la ventana, false si no se
permite y true si se permite
ventana.setResizable(false);
● Configurar posición donde aparecerá la ventana en la pantalla
Dimension d = new Dimension();
ventana.setLocation((int) ((d.getWidth()/2)+290), 50);//aparecerá centrada en X
● Configurar tamaño de la imagen
ventana.setSize(800, 550);
● Configurar que se pueda ver la ventana
ventana.setVisible(true);
 ALGUNAS LIBRERÍAS A USAR
PARA TRABAJAR CON LOS COMPONENTES
import javax.swin import javax.swin
g.JLabel g.SwingConstants;
muestra texto e constantes comunes utilizadas
imágenes con Swing

import javax.swing.Icon;
import java.awt.
interfaz utilizada para manipular
imágenes Dimension;
Manipular la dimensión de la
import javax.swing. ventana.
interfazImageIcon;
utilizada para cargar
imágenes
 Pasos para crear los componentes de las
1. Crear las variables de las ventanas
clases de los componentes a 4. Configurar
usar. (Atributos) posiciones de los
componentes en la
2. Crear las instancias de los
ventana.
componentes. (En el constructor)

5. Configurar acciones de
3. Diseñar los los componentes.
componentes.
6. Agregar el componente a
la ventana.

La definición o creación de las ventanas se realiza en el

constructor de la clase
 1. Crear las variables de las clases de los componentes a
usar.
SINTAXIS: nombreDeLaClase nombreVariable;

• Etiqueta:
• Radio Buttons:
JLabel etiqueta1
• Cuadros de texto:
JRadioButton opcion1
• Grupo de botones:
JTextField cuadroTex1
• Botones: ButtonGroup grupo1
• Check Buttons:
JButton boton1
• Imágenes: JCheckBox opcion1
• Menú desplegables:
Icon imagen1
JComboBox combo1
• Lista : Jlist lista1
Las variables de las clases son Atributos de la clase
2. Crear las instancias de los componentes.

Etiqueta: Radio Buttons:

eti1 = new JLabel (“TEXTO DE LA ETIQUETA”) opcion1= new JRadioButton (“OpcionAElegir”);

Cuadros de texto: Grupo de botones:

ButtonGroup grupo1;
cTex1 = new JTextField (NumeroDelAncho);

Check Buttons:
Botones: boton1 = new JButton(“TEXTO”); opcion1 = new JCheckBox(“OpcionAElegir”);
boton2 = new JButton(NombreICONO)
Lista :
Imágenes: lista = new JList(NombreDelArreglo);
imagen1 = new ImageIcon(getClass()
.getResource(“nombreImagen.jpg")) Menú desplegables :
combo1= new JComboBox();
3. Diseñar los componentes.
● Cambiar tipo de letra
etTitulo.setFont(new
java.awt.Font("Tahoma", 1, 20));

● Cambiar color de letra

etTitulo.setForeground(new
java.awt.Color(255, 69, 0));
 4. Configurar posiciones de los
componentes en la ventana.
Sintaxis:
variableComponente.setBounds(X,Y,Alto,Ancho);

Ejemplo:
etGrado.setBounds(30,120,50,25);
5. Configurar • Configurar elementos que integran el
acciones de los menú de JComboBox
Grupo.addItem("A t/M");
componentes - Grupo.addItem("B t/M");
Menu
desplegable CREDITS: Thiscuantos
• Configurar presentation template wasdebe
elementos created by
Slidesgo, including icons by Flaticon, infographics &
aparecer al Freepik
images by el menú and illustrations by Stories
Grupo.setMaximumRowCount( 4 );
• Configurar acciones a realizar cuando se seleciona un
Please
elemento del keep
menú this slide for attribution
Grupo.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
grupo.setText( Grupo.getSelectedItem().toString() );
}
} );
5. Configurar acciones de los componentes
– Botones de opciones
1. Después de definir las diferentes opciones hay que crear el grupo de
opciones, ejemplo:
nombreGrupoDeBotones= new ButtonGroup();

2. Agregar las opciones al grupo, ejemplo:

nombreGrupoDeBotones.add(NombreDeOpcion);

3. Registra eventos para los objetos JRadioButton

//instancia de la función manejador de eventos
ManejadorEventos variableManejador = new ManejadorCarrera();
NombreDeOpcion.addItemListener(VariableManejador );
5. Configurar acciones de los componentes
– Botones de opciones (cont.)
4. Crear la Clase interna privada para manejar eventos de botones de opción
private class ManejadorCarrera implements ItemListener {
// responde a los eventos de casilla de verificación
public void itemStateChanged( ItemEvent evento ){
// configurar las acciones de cada opcion
if ( evento.getSource() == opcion1 )
//acciones a ejecutar
posicion=0;
if ( evento.getSource() == opcion2 )
//acciones a ejecutar
posicion=1;
5. Configurar acciones de los componentes
– Cuadros de opciones
1. Después de definir las diferentes opciones, se realiza el registro de los componentes de escucha
para objetos JCheckBox:
ManejadorCheckBox variableManejador = new ManejadorCheckBox();
opcionDelCuadroDeOpciones.addItemListener( variableManejador );
2. Crear la Clase interna privada para manejar eventos de los cuadros de opciones
private class ManejadorCheckBox implements ItemListener
{ public void itemStateChanged( ItemEvent evento )
{// procesa los eventos de la casilla de verificación "negrita"
if ( evento.getSource( ) == opcionDelCuadroDeOpciones )
//acciones a ejecutar, por ejemplo
grado.setText("1") ;
if ( evento.getSource( ) == opcionDelCuadroDeOpciones )
//acciones a ejecutar, por ejemplo
grado.setText(“2") ;
}
5. Configurar acciones de los componentes
– Botones
Crea el nuevo Manejador para los Botones (JButton) para manejar los eventos
ManejadorBoton variableManejador = new ManejadorBoton();
nombreDelJButton.addActionListener(variableManejador );
Ejemplo: bAceptar.addActionListener(this);
Crear la Clase interna privada para manejar eventos de los Botones
private class ManejadorBoton implements ActionListener {
public void actionPerformed( ActionEvent evento ) {
if(ev.getSource( )==bAceptar) {
VentanaVerificarDatos vV = new VentanaVerificarDatos (Codigo,Nombre);
vV.VerificarGrado(Grado);
}
}
}
5. Configurar acciones de los componentes
– Botones(cont)

Configurar acciones para cerrar la ventana:

if(ev.getSource()==bCerrar){
ventana.setVisible(false);
ventana.dispose();
}
6. Agregar el componente a la ventana.

Sintaxis
variableClaseJFrame. add(NombreDelComponente)

Ejemplo:
ventana.add(etCodigo);
 MULTIMEDIA
CONTENT
You can replace the image on this
screen with your own work. Just
delete this one, add yours and center
it properly