le, ei, profesor ramón castro liceaga universidad latina (unila) v.- interfases graficas

LE, EI, Profesor Ramón Castro Liceaga

UNIVERSIDAD LATINA (UNILA)

V.- INTERFASES GRAFICAS

http://java.sun.com/





IntroducciónIntroducció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.

ComponentesComponentes equivalentes en AWT y swing

Applet Japplet

Button Jbutton

Canvas Jpanel

Checkbox JCheckBox o JRadioButton

Choice 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

JMenuBar

JMenu

JMenu

JMenuItem

JMenuItem

• Algunos elementos de un menú

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 JFrameEs 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); }}

ComponentesComponentes• 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);

}

Salida de la práctica V04

Construye una nueva ventana con diversos componentes para un sistema de control acceso…

Introducción al manejo de Introducción al manejo de eventoseventos

• 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 eventosQue 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 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");

JButton azul = new JButton("Azul");

JButton verde = new JButton("Verde");

Container p;

public Gui12() {

super("Colores del fondo");

p = this.getContentPane();

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 {


p.setBackground(Color.blue);

}

}

class OyenteVerde implements ActionListener {


p.setBackground(Color.green);

}

}

Grupos de eventos 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 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 JavaQue 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 GUIQue 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áficosObjetos 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 DibujosMé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 DibujosMé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 OvalosPractica 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 );

}

// 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.CYAN ); g.setColor( Color.CYAN );

g.fillRoundRect( 195, 40, 90, 55, 50, 50 ); g.fillRoundRect( 195, 40, 90, 55, 50, 50 );

g.drawRoundRect( 290, 40, 90, 55, 20, 20 ); g.drawRoundRect( 290, 40, 90, 55, 20, 20 );

g.setColor( Color.YELLOW ); g.setColor( Color.YELLOW );

g.draw3DRect( 5, 100, 90, 55, true ); g.draw3DRect( 5, 100, 90, 55, true );

g.fill3DRect( 100, 100, 90, 55, false ); g.fill3DRect( 100, 100, 90, 55, false );

g.setColor( Color.MAGENTA ); g.setColor( Color.MAGENTA );

g.drawOval( 195, 100, 90, 55 ); g.drawOval( 195, 100, 90, 55 );

g.fillOval( 290, 100, 90, 55 ); g.fillOval( 290, 100, 90, 55 );

} // fin del método paint } // fin del método paint

// ejecutar la aplicación // ejecutar la aplicación

public static void main( String args[] ) public static void main( String args[] )

{ {

JFrame.setDefaultLookAndFeelDecorated(true); JFrame.setDefaultLookAndFeelDecorated(true);

LineasRectsOvalos aplicacion = new LineasRectsOvalos(); LineasRectsOvalos aplicacion = new LineasRectsOvalos();

aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

} }

} // fin de la clase} // fin de la clase

Gracias por tu atención…!Gracias por tu atención…!