Interfaz gráfica de usuario
-
Upload
christian-a-chavez -
Category
Documents
-
view
5 -
download
0
Transcript of Interfaz gráfica de usuario
![Page 1: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/1.jpg)
Interfaz gráfica de usuarioDesarrolla software de aplicación .utilizando programación orientada.
07/10/2013CBTIS1282”R”Gabriela Staysy Pérez Chávez
![Page 2: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/2.jpg)
Introducción
![Page 3: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/3.jpg)
Interfaz gráfica usuario
Esta forma de interfaz de usuario es muy simple y nos ha permitido centrarnos en todo aquello que tiene que ver tan solo con la programación orientada a objetos con el lenguaje java sin tener que tratar al mismo tiempo con ventanas, botones y otros elementos similares .
Las interfaces graficas de usuario (GUI) ofrece al usuario , ventanas cuadros de dialogo , barras de herramientas, botones, listas despegables y muchos otros elementos con los que ya estamos muy acostumbrados a tratar.
Las aplicaciones son conducidas por eventos y se desarrollan haciendo uso de la clase que para ello nos ofrecen la API de Java.
La API de Java para desarrollo de GUI
La interfaz de usuario es la parte del programa que permite al usuario interaccionar con el .la API de Java proporciona una biblioteca que proporciona un conjunto de herramientas para la construcción de interfaces graficas que tienen una apariencia y se comportan de forma semejante en todas las plataformas en las que se ejecutan.
La estructura básica de la biblioteca gira entorno a componentes y contenedores. Los contenedores contienen componentes y son componentes a su vez, de forma que los eventos puedan tratarse tanto en contenedores como en componentes. La API está constituida por clases, interfaces y derivaciones AWT Y SWING.
Una aplicación Swing se construye mezclando componentes con las siguientes reglas. Debe existir, al menos, un contenedor de alto nivel (Top-Level Container), que provee el soporte que las componentes Swing necesitan para el pintado y el manejo de eventos. Otras componentes colgando del contenedor de alto nivel (éstas pueden ser contenedores o componentes simples). Un ejemplo:
Import javax.swing.*;
Import java.awt.*;
Import java.awt.event.*;
public class HolaMundoSwing {
public static void main(String[] args) {
JFrame frame = new JFrame("HolaMundoSwing");
final JLabel label = new JLabel("Hola Mundo");
![Page 4: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/4.jpg)
frame.getContentPane().add(label);
//frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
frame.addWindowListener(new java.awt.event.WindowAdapter(){
public void windowClosing(WindowEvent e){
System.exit(0);
}
}
);
frame.pack();
frame.setVisible(true);
}
}
import javax.swing.JOptionPane;
public class Addition {
public static void main( String args[] )
{
String firstNumber, secondNumber;
int number1, number2, sum;
// read in first number from user as a string
firstNumber = JOptionPane.showInputDialog( "Enter first integer" );
// read in second number from user as a string
![Page 5: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/5.jpg)
secondNumber = JOptionPane.showInputDialog( "Enter second integer" );
// convert numbers from type String to type int
number1 = Integer.parseInt( firstNumber );
number2 = Integer.parseInt( secondNumber );
sum = number1 + number2;
// display the results
JOptionPane.showMessageDialog( null, "The sum is " + sum, "Results", JOptionPane.PLAIN_MESSAGE );
System.exit( 0 ); // terminate the program
}
}
![Page 6: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/6.jpg)
Manejo de eventos
Cuando se realiza una interacción con el programa, se envía un evento,Es fundamental su comprensión para programar con GUI
La fuente del evento o Evento (event source)
El componente GUI con el cual interactúa el usuario.
La información sobre un evento esta encapsulada
Se deriva de java.util.EventObject hacia java.awt.AWTEvent
Por. Ejem. Teclas, movimiento click de mouse, manejo de una ventana.
Diferentes fuentes de eventos producen diferentes tipos de eventos
Un botón envía ActionEvent
Una ventana envía WindowEvent
El objeto evento (event object)
Encapsula información acerca del evento que ocurrió.
Incluye información que el que escucha el evento necesita para manejar el evento.
Cuando ocurre un evento, lo envía a escuchadores registrados
El que escucha el evento (event listener)
Implementa una interfase especial
Determina la reacción el un evento
![Page 7: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/7.jpg)
Librerias Java para diseñar GUI
AWT
" Primera librería gráfica
" Se usan llamadas a los sistemas de ventanas nativos (componentes
“pesados”)
" Intento de un API común mediante el “mínimo común
denominador” de todos los sistemas de ventanas
" Problemas: componentes escasos, aplicaciones dependientes del
entorno de ventanas.
Swing
" Evolución tras AWT
" Se usa código propio de Java que dibuja en una ventana
proporcionada por el sistema de ventanas (componentes “ligeros”).
" Mayor cantidad de componentes y uniformidad de las aplicaciones
gráficas en todos los entornos de ventanas
Pasos para definir una GUI con Swing
1. Crear los componentes
2. Definir las propiedades de los componentes
3. Crear los contenedores que almacenan los
componentes
4. Especificar los LayoutManagers para disponer los
componentes en los contenedores
5. Añadir los componentes en los contenedores
6. Definir la escucha de eventos
7. Mostrar la GUI al usuario
![Page 8: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/8.jpg)
Oyentes de eventos
Los eventos los generan los componentes y los procesan objetos que implementan la interfaz EventListener.
Pasos:
"1. Crear los componentes
"2. Crear los oyentes de los eventos que queremos tratar
"3. Asociar los oyentes a los componentes
"4. Cuando un evento se genera en un componente, la
aplicación llama al método correspondiente del oyente
asociado a ese componente
Objetos de la clase Event
Cuando se llama a una función que procesa un
evento, definida en una clase que implementa el
interfaz EventListener, se pasa como parámetro
información sobre el evento producido
public void actionPerformed(ActionEvent event) {
// código para tratar el evento
}
Tipos de oyentes
Para cada evento con nombre xxxEvent, se define una interfaz llamada xxxListener en la que se definen los métodos que van a manejarse relacionados con ese evento
ActionEvent -> ActionListener
MouseEvent -> MouseListener
![Page 9: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/9.jpg)
¿Dónde implementar la interfaz?
Dado que los oyentes deben ser objetos de una clase que implemente la interfaz, surge la cuestión de qué clase debe implementar la interfaz. Tres opciones:
Crear una clase que defina el componente e implemente ,el oyente, Crear una clase aparte,Crear una clase interna.
Clase que define el componente y la interfaz
class MiClase implements ActionListener{
public MiClase() {
Button btn = new Button("Boton");
btn.addActionListener(this);
}
public void actionPerformed(ActionEvent e) {
// Aqui va el codigo de la accion!!!
}
}
Clase aparte
class MiClase{
public MiClase()
{
Button btn = new Button("Boton");
btn.addActionListener(new MiOyente());
}
}
class MiOyente implements ActionListener{
public void actionPerformed(ActionEvent e)
{
![Page 10: Interfaz gráfica de usuario](https://reader035.fdocuments.mx/reader035/viewer/2022072014/55cf9ad6550346d033a3a490/html5/thumbnails/10.jpg)
}
}
Clase interna
Button btn = new Button("Boton");
btn.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEven e)
{
// Aqui va el codigo de la accion
}
}