interfaces gráficas - departamento de ingeniería telemática
TRANSCRIPT
![Page 1: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/1.jpg)
Interfaces gráficas
Jose Jesus García Rueda
![Page 2: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/2.jpg)
Introducción
• ¿Qué son las interfaces gráficas?
• Ejemplos bien conocidos…• Ejemplos bien conocidos…
• Vamos a programar una:• Colores.java
![Page 3: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/3.jpg)
Conceptos básicos• Aplicación gráfica.
• Contenedores.
• Acciones.
• Eventos.
• Elementos gráficos:• Elementos gráficos:• Barra de menús.
• Barra de título.
• Botones de minimizar y maximizar.
• Botón de cerrar.
• Scroll.
• Marco de la ventana.
• Iconos.
• Botones.
• Áreas de texto...
![Page 4: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/4.jpg)
La metáfora de la pared
![Page 5: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/5.jpg)
La metáfora de la paredVentana
contentPanePanel
![Page 6: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/6.jpg)
Creando la pared
• ¿Cómo crear una ventana en Java?
Ventana
Una ventana es un contenedorde alto nivel
![Page 7: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/7.jpg)
¿Cómo se crea una ventana en Java?
import javax.swing.* ;
public class Ejemplo extends JFrame {
/* El método que lo pone todo en marcha */
Una ventana en Java no es más que una clase que hereda de Jframe, la
ventana genérica
Las clases
Jose Jesus García RuedaJose Jesus García Rueda
/* El método que lo pone todo en marcha */public static void main (String argv[]) {
Ejemplo ventana = new Ejemplo();
ventana.setSize (400, 400);ventana.show();
} // Fin del main
} // Fin de Ejemplo
Las clases necesarias para
construir interfaces gráficas pertenecen al paquete Swing
Hay que, explícitamente, hacer visible la
ventana
![Page 8: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/8.jpg)
Forrando la pared de corcho• Todo contenedor de alto nivel en Swing (como las
ventanas) estará “forrado” con un PANEL RAIZ (“content Pane”).
• Sobre él se colocarán el resto de componentes de la ventana.la ventana.• Incluidos otros contenedores.
Ventana
ventana.getContentPane()
![Page 9: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/9.jpg)
Añadiéndolo al códigoimport javax.swing.* ;
public class Ejemplo extends JFrame {
/* El método que lo pone todo en marcha */public static void main (String argv[]) {public static void main (String argv[]) {
Ejemplo ventana = new Ejemplo();
ventana.getContentPane().add(…);
ventana.setSize (400, 400);ventana.show();
} // Fin del main
} // Fin de Ejemplo
![Page 10: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/10.jpg)
¿Qué elementos puedo “colgar en el corcho”?• En el panel raíz podré colgar componentes del paquete Swing:• Etiquetas: JLabel
• Botones: JButton• Botones: JButton
• Cajas de texto: JTextField, JTextArea
• Casillas de verificación: JCheckBox
• Botones de opción: JRadioButton
• Listas: JList
• Barras de desplazamiento: JScrollBar
• Todos los componentes Swing heredan de JComponent.
![Page 11: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/11.jpg)
¿Y cómo los cuelgo?
JButton boton;JLabel etiqueta;
public Ejemplo() {public Ejemplo() {
etiqueta = new JLabel("Una etiqueta");boton = new JButton("Un botón");boton.setSize(100, 70);getContentPane().add(boton);getContentPane().add(etiqueta);
}
![Page 12: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/12.jpg)
PARADA TÉCNICA
• (Aprovecharemos para echarle un vistazo a la API de Java, para saber dónde encontrar para saber dónde encontrar información sobre los elementos gráficos y cómo usarlos ;-)
![Page 13: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/13.jpg)
¿Y cómo cuelgo “corchos dentro del corcho”?
• Emplearemos PANELES DE CONTENIDO: Jpanel
• Son contenedores de nivel • Son contenedores de nivel intermedio:• Simplifican la organización de la ventana.
• Un panel puede contener a otros paneles.
![Page 14: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/14.jpg)
Jerarquía de paneles
![Page 15: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/15.jpg)
Ejemplo de panel
JButton boton;JLabel etiqueta;JPanel panel;
public Ejemplo() {
panel = new JPanel();getContentPane().add(panel);
etiqueta = new JLabel("Una etiqueta");boton = new JButton("Un botón");boton.setSize(100, 70);panel.add(boton);panel.add(etiqueta);
}
![Page 16: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/16.jpg)
¿Cómo se coloca todo lo visto?• O bien por coordenadas…
• etiqueta.setBounds(100, 70, 50, 50);
• …o bien mediante ADMINISTRADORES DE DISEÑO:• Son como plantillas para colocar los elementos gráficos.gráficos.
• Se asocian a los paneles.
• Aquí veremos tres tipos.
• Para usar coordenadas hay primero que anular el layout:• panel.setLayout(null)
• ¡Para usar los layouts hay que importar java.awt.*!!
![Page 17: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/17.jpg)
Ejemplo con FlowLayoutJButton boton;JLabel etiqueta;JButton otroBoton;JPanel panel;
public Ejemplo() {
panel = new JPanel();
Coloca los elementosen línea, uno detrás de otro
panel = new JPanel();getContentPane().add(panel);
etiqueta = new JLabel("Una etiqueta");boton = new JButton("Un botón");otroBoton = new JButton("Otro Botón");panel.add(boton);panel.add(etiqueta);panel.add(otroBoton);
} ¡FlowLayout viene por defecto!(En los paneles)
![Page 18: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/18.jpg)
Ejemplo con GridLayout
public Ejemplo() {
panel = new JPanel();panel.setLayout(new GridLayout(2, 2));getContentPane().add(panel);
etiqueta = new JLabel("Una etiqueta");boton = new JButton("Un botón");otroBoton = new JButton("Otro Botón");panel.add(boton);panel.add(etiqueta);panel.add(otroBoton);
}Coloca los elementos en cuadrícula
![Page 19: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/19.jpg)
Ejemplo con BorderLayout
public Ejemplo() {
panel = new JPanel();panel.setLayout(new BorderLayout());getContentPane().add(panel);
Viene por defecto en los contenedores de nivel superior
etiqueta = new JLabel("Una etiqueta");boton = new JButton("Un botón");otroBoton = new JButton("Otro Botón");panel.add(boton, BorderLayout.SOUTH);panel.add(etiqueta, BorderLayout.WEST);panel.add(otroBoton, BorderLayout.NORTH);
}Divide el contenedor en 5 secciones:norte, sur, este, oeste y centro
![Page 20: Interfaces gráficas - Departamento de Ingeniería Telemática](https://reader036.vdocuments.co/reader036/viewer/2022071601/62d0934688f01202ac4028bf/html5/thumbnails/20.jpg)