Transcript interfases graficas - Docencia FCA-UNAM

UNIVERSIDAD LATINA (UNILA)
V.- INTERFASES GRAFICAS
LE, EI, Profesor Ramón Castro Liceaga
Introducción
• Esla interfaz gráfica de usuario, es el elemento tecnológico de
un sistema interactivo que posibilita, a través del uso y la
representación del lenguaje visual, una interacción amigable
con un sistema informático.
• La interfaz gráfica de usuario (Graphical User Interface, GUI)
es un tipo de interfaz de usuario que utiliza un conjunto de
imágenes y objetos gráficos.
• para representar la información y acciones disponibles en la
interfaz. En esta sesión nos referimos a estos objetos gráficos
en forma de ventas (Como funciona el Sistema Operativo de
Windows
AWT y Swing
• En la interfáz gráfica de Usuario existen dos
conjuntos basicos de componentes.
• Para crear aplicaciones graficas o GUI
• AWT abstract Window Toolkit
• Swing
AWT y Swing
•
•
•
En sus orígenes Java introdujo la AWT (Abstract
Window Toolkit). Ésta “creaba” los objetos
delegando su creación y comportamiento a
herramientas nativas de la plataforma donde corre la
Máquina Virtual Java.
Este esquema condujo a problemas por diferencias
en distintas plataformas y S.O.
La solución fue desarrollar todos los objetos de la
GUI basados sólo en elementos muy básicos y
comunes en todas las plataformas. Así surge Swing.
AWT
• Podemos realizar aplicaciones solas o applets
• Dependen del sistema nativo para manejar su
funcionalidad.
• Se les conoce como componentes pesados
Caracteristicas de AWT

Un gran conjunto de componentes de interfaz
de usuario
 Un robusto modelo de manejo de eventos
 Herramientas graficas y de imagen, incluyendo
forma, color y tipo de letra. Manejadores de
Layout, para un manejo de ventanas flexible que
no dependan de una tamaño o resolucion
especifico.
 Clases de transferencia de datos, para copiar y
pegar a traves de el clipboard de la plataforma en
donde ejecutamos nuestra aplicación.
Swing
• Estan construidos sobre la tecnologia AWT
• Proveen de apariencia de acuerdo al sistema
donde se ejecuta la aplicacion
• Esta completamente implementada en java
• Estos componentes no dependen del sistema
donde se ejecuta para manejar su
fincionalidad
• Se les conoce como componentes ligeros.
Caracteristicas de Swing
• Tiene todas las caracteristicas de AWT
• Versiones del conjunto de componentes 100%
en java.
• Una gran conjunto de componentes de alto
nivel ( vista de arbol, caja de lista, etc)
• Diseño de java puro.
• Apariencia modificable.
Componentes
Componentes equivalentes en AWT y
swing
Applet
Japplet
Button
Jbutton
Canvas
Jpanel
Checkbox
Choice
JCheckBox o
JRadioButton
JComboBox
Component
Jcomponent
Frame
Jframe
Label
Jlabel
List
Jlist
Panel
Jpanel
TextArea
JTextArea
TextField
JTextField
Window
JWindow
Creación de ventanas con Java Swing
• Aplicaciones con ventanas Swing es la
biblioteca para la interfaz gráfica de usuario
avanzada de la plataforma Java SE.
La clase JFrame proporciona operaciones para manipular ventanas.
-> Constructores:
● JFrame()
● JFrame(String titulo)
-> Una vez creado el objeto de ventana, hay que:
● Establecer su tamaño.
● Establecer la acción de cierre.
● Hacerla visible.
Practica V01
import javax.swing.*;
public class VentanaTest {
public static void main(String[] args) {
JFrame f = new JFrame(“Registro de Clientes");
f.setSize(400, 300);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
Ventana de Menús
•
Algunos elementos de un menú
JMenuBar
JMenu
JMenuItem
JMenu
JMenuItem
Practica V02
JFrame f = new JFrame("Servicios al Cliente");
JMenuBar mb = new JMenuBar();
JMenu menu = new JMenu("Directorio");
JMenuItem item1, item2;
item1 = new JMenuItem("Clientes Nuevos");
item2 = new JMenuItem("Referencias");
menu.add(item1);
menu.add(item2);
mb.add( menu );
f.setJMenuBar( mb );
// Con los objetos anteriores intégralo en una clase llamada ventaMenu en
NetBeans.
Salida en la práctica V02
Construye una nueva ventana de Menú para un
sistema de biblioteca…
Extendiendo la clase JFrame
Es usual extender la clase JFrame, y realizar las operaciones de
inicializacion en su constructor.
public class MiVentana extends JFrame {
public MiVentana() {
super(“Servicios al Cliente");
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
public class VentanaTest {
public static void main(String[] args) {
MiVentana v = new MiVentana();
v.setVisible(true);
}
}
Componentes
•
•
•
•
•
JButton
JLabel
JTextField
JCheckBox
JRadioButton
• Una vez que se crean estos objetos o
componentes con new, se añaden al
contentPane de la ventana correspondiente
mediante su método add.
Ejemplo de componentes
• Agregar tres componentes a la clase
MiVentana (etiqueta, texto y botón).
setSize(600, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = getContentPane();
cp.setLayout(new FlowLayout());
JLabel etiqueta = new JLabel("Nombre del Cliente: ");
JTextField texto = new JTextField(20);
JButton boton = new JButton("Buscar");
cp.add(etiqueta);
cp.add(texto);
cp.add(boton);
Salida de la práctica V03
Construye una nueva ventana con diversos
componentes para un sistema de control escolar…
Construcción de un método para componentes
• Practica V04
• Construye la clase verLogin
- Dentro del método main….
// Crear el objeto frame
JFrame frame = new JFrame("Acceso al Sistema");
frame.setSize(300, 150);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
frame.add(panel);
placeComponents(panel);
frame.setVisible(true);
//Después del método main …
private static void placeComponents(JPanel panel){
panel.setLayout(null);
// Crea la etiqueta del usuario
JLabel userLabel = new JLabel("Usuario: ");
userLabel.setBounds(10, 10, 80, 25);
panel.add(userLabel);
// Crea el Texbox del usuario
JTextField userText = new JTextField(20);
userText.setBounds(100, 10, 160,25);
panel.add(userText);
// Crea la etiqueta del password
JLabel passwordLabel = new JLabel("Password: ");
passwordLabel.setBounds(10, 40, 80, 25);
panel.add(passwordLabel);
// Crea el Texbox del password
JPasswordField passwordText = new JPasswordField();
passwordText.setBounds(100, 40, 160, 25);
panel.add(passwordText);
// Crea el boton del Login del usuario
JButton loginButton = new JButton("login");
loginButton.setBounds(10, 80, 80, 25);
panel.add(loginButton);
// Crea el boton para registro del usuario
JButton registerButton = new JButton("Registro");
registerButton.setBounds(180, 80, 90, 25);
panel.add(registerButton);
}
//Después del método main …
private static void placeComponents(JPanel panel){
panel.setLayout(null);
// Crea la etiqueta del usuario
JLabel userLabel = new JLabel("Usuario: ");
userLabel.setBounds(10, 10, 80, 25);
panel.add(userLabel);
// Crea el Texbox del usuario
JTextField userText = new JTextField(20);
userText.setBounds(100, 10, 160,25);
panel.add(userText);
// Crea el Texbox del password
JPasswordField passwordText = new
JPasswordField();
passwordText.setBounds(100, 40, 160, 25);
panel.add(passwordText);
// Crea el boton del Login del usuario
JButton loginButton = new JButton("login");
loginButton.setBounds(10, 80, 80, 25);
panel.add(loginButton);
// Crea la etiqueta del password
JLabel passwordLabel = new JLabel("Password: ");
passwordLabel.setBounds(10, 40, 80, 25);
panel.add(passwordLabel);
// Crea el boton para registro del usuario
JButton registerButton = new JButton("Registro");
registerButton.setBounds(180, 80, 90, 25);
panel.add(registerButton);
}
Salida de la práctica V04
Construye una nueva ventana con diversos
componentes para un sistema de control acceso…
Introducción al manejo de eventos
• El manejo de eventos es una función muy
importante en la programación orientada a
objetos ya que a través de esta podemos
programar las acciones que realizará nuestra
aplicación
Que son los eventos
• La interacción del usuario con un programa
GUI (graphical user interface) se efectúa a
través de eventos.
• Cada evento tiene una fuente, la cual es la
componente que lo produce.
• Sólo ciertas clases de objetos pueden atrapar
eventos: objetos que tienen implementado el
acceso a los métodos de ciertas clases
especiales que escuchan eventos (listener).
Ejemplo de un evento
• Cuando un usuario oprime un botón en una
GUI, el evento producido por el botón puede
ser atrapado (escuchado) por cualquier objeto
cuya clase tenga implementado acceso a
métodos ActionListener
ActionListener: Manejo de eventos
• Practica V05
• Modificando el proyecto anterior, clases VentanaTest y
MiVentana (en esta clase comenta el codigo anterior y
agrega el siguiente)
public MiVentana() {
super("Eventos de acción");
setSize(400,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container cp = getContentPane();
cp.setLayout(new FlowLayout());
JButton boton = new JButton("Acceso al Sistema");
boton.addActionListener(new EventoBotonPulsado());
cp.add(boton);
}
ActionListener: Manejo de eventos
• Practica V05
• Crea la clase : EventoBotonPulsado
• Con el siguiente código
public class EventoBotonPulsado implements ActionListener{
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null,"!! ERROR AL ABRIR EL
SISTEMA !!.. ");
}
}
ActionListener: Manejo de eventos e imagenes
• Practica V06: Crea una clase con método main : Gui12 extends Jframe.
//Ruta donde se encuentra el logo o la imagen
ImageIcon image = new ImageIcon("C:/Users/WIN7/Documents/mariposa.gif");
JLabel imagelabel = new JLabel(image);
//JLabel eti2 = new JLabel(new ImageIcon("mariposa.gif"));
JButton rojo = new JButton("Rojo");
public Gui12() {
JButton azul = new JButton("Azul");
super("Colores del fondo");
JButton verde = new JButton("Verde");
p = this.getContentPane();
Container p;
setLayout(new FlowLayout());
•
//Agrega los botones
add(rojo);
add(azul);
add(verde);
//Agrega un logo o la imagen
add(imagelabel);
rojo.addActionListener(new OyenteRojo());
azul.addActionListener(new OyenteAzul());
verde.addActionListener(new OyenteVerde());
setSize(500, 300);
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
ActionListener: Manejo de eventos e imagenes
public static void main(String[] args) {
Gui12 ventana = new Gui12();
}
class OyenteRojo implements ActionListener {
public void actionPerformed(ActionEvent evento) {
p.setBackground(Color.red);
}
}
class OyenteAzul implements ActionListener {
public void actionPerformed(ActionEvent evento) {
p.setBackground(Color.blue);
}
}
class OyenteVerde implements ActionListener {
public void actionPerformed(ActionEvent evento) {
p.setBackground(Color.green);
}
}
Grupos de eventos
• Los eventos se catalogan por su naturaleza, que se
indicará en el miembro id de su estructura. Los
grandes grupos de eventos son:
•
•
•
•
•
•
Eventos de Ventana
Eventos de Teclado
Eventos de Ratón
Eventos de Barras
Eventos de Lista
Eventos Varios
Gráficos
• La interfaz gráfica de usuario, es el elemento
tecnológico de un sistema interactivo que
posibilita, a través del uso y la representación
del lenguaje visual, una interacción amigable
con un sistema informático
Que es un API de Java
• El API Java es una Interfaz de Programación de
Aplicaciones (API: por sus siglas en inglés)
provista por los creadores del lenguaje Java, y
que da a los programadores los medios para
desarrollar aplicaciones Java
Que es GUI
• La interfaz gráfica de usuario (Graphical User
Interface, GUI) es un tipo de interfaz de
usuario que utiliza un conjunto de imágenes y
objetos gráficos para representar la
información y acciones disponibles en la
interfaz.
Objetos Gráficos
• Java proporciona la clase Graphics, que
permite mostrar texto a través del método
drawString(), pero también tiene muchos
otros métodos de dibujo.
Métodos para Dibujos
• Son métodos funcionan solamente cuando
son invocados por una instancia válida de
la clase Graphics, su ámbito de aplicación
se restringe a los componentes que se
utilicen en los métodos paint() y update().
Algunos de estos métodos son:
Métodos para Dibujos
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
drawLine( x1,y1,x2,y2 )
drawRect( x,y,ancho,alto )
fillRect( x,y,ancho,alto )
clearRect( x,y,ancho.alto )
drawRoundRect( x,y,ancho,alto,anchoArco,altoArco )
fillRoundRect( x,y,ancho,alto,anchoArco,altoArco )
draw3DRect( x,y,ancho,alto,boolean elevado )
fill3DRect( x,y,ancho,alto,boolean elevado )
drawOval( x,y,ancho,alto )
fillOval( x,y,ancho,alto )
drawArc( x,y,ancho,alto,anguloInicio,anguloArco )
fillArc( x,y,ancho,alto,anguloInicio,anguloArco )
drawPolygon( int[] puntosX,int[] puntosY[],numPuntos )
fillPolygon( int[] puntosX,int[] puntosY[],numPuntos )
drawString( string s,x,y )
drawChars( char data[],offset,longitud,x,y )
drawBytes( byte data[],offset,longitud,x,y )
copyArea( xSrc,ySrc,ancho,alto,xDest,yDest )
Practica V6: Clase que dibuja Lineas, Rectangulos y Ovalos
// Dibujo de líneas, rectángulos y óvalos.
import java.awt.*;
import javax.swing.*;
public class LineasRectsOvalos extends JFrame {
// establecer la cadena de la barra de título y dimensiones de la ventana
public LineasRectsOvalos()
{
super( "Dibujo de líneas, rectángulos y óvalos" );
setSize( 400, 165 );
setVisible( true );
g.setColor( Color.CYAN );
g.fillRoundRect( 195, 40, 90, 55, 50, 50 );
g.drawRoundRect( 290, 40, 90, 55, 20, 20 );
g.setColor( Color.YELLOW );
g.draw3DRect( 5, 100, 90, 55, true );
g.fill3DRect( 100, 100, 90, 55, false );
}
// mostrar varias líneas, rectángulos y óvalos
public void paint( Graphics g )
{
super.paint( g ); // llamar al método paint de la superclase
g.setColor( Color.RED );
g.drawLine( 5, 30, 350, 30 );
g.setColor( Color.BLUE );
g.drawRect( 5, 40, 90, 55 );
g.fillRect( 100, 40, 90, 55 );
g.setColor( Color.MAGENTA );
g.drawOval( 195, 100, 90, 55 );
g.fillOval( 290, 100, 90, 55 );
} // fin del método paint
// ejecutar la aplicación
public static void main( String args[] )
{
JFrame.setDefaultLookAndFeelDecorated(true);
LineasRectsOvalos aplicacion = new LineasRectsOvalos();
aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
}
} // fin de la clase
Gracias por tu atención…!