gui en java

GUI en Java

GUI = Interfaz gráfica de usuario GUIs se construye a partir de componentes

Componente: objeto con el que interactúa el usuario Ejemplos: etiquetas, campos de texto, botones,

casillas de verificación Definidos en el paquete javax.swing Los componentes GUI original fueron los

contenidos en el Abstract Windowing Toolkit en el paquete java.awt

Componentes AWT

Componentes Swing

Elementos de Swing

Component Es una clase abstracta que representa a cualquier componente con representación gráfica

Container es un componente que puede contener otros componentes gráficos

JFrame permite representar ventanas

Estructura de una GUI

Objetos que debe contener toda aplicación GUI: contenedores (Containers): Elementos que se

emplean para colocar componentes en la ventana. La forma en la que se distribuyan estos objetos en el container, dependerá del Layout que se aplique al mismo. Un container que no posea un layout, sólo podrá colocar un componente sobre sí mismo. Tipos de container: Ventanas: Elemento donde se muestra cualquier

contenido visual. Paneles: Una ventana podrá contener tantos paneles

como le permita el layout. Un panel, a su vez, deberá aplicar un layout para agregar componentes.


Layout Manager Indican la forma de organizar los componentes dentro del

container. Determinan el tamaño y posición de los componentes. Pasos a dar:

1. Crear el container.2. Aplicar el tipo de Layout Manager.3. Agregar los componentes al container.

Tipos de Layout Manager más importantes (todos elllos heredan del interface LayoutManager): FlowLayout BorderLayout GridLayout. BoxLayout CardLayout


Componentes (Components):

Representan cada uno de los controles que aparecen en toda ventana (botones, cajas de texto, menús, ...)

Contenedores - Ventanas

La clase Window permite crear ventanas cualquier tipo. Subclases:

Frame: es la típica ventana de aplicación. Dialog: es la ventana que utilizan los cuadros de diálogo. Window: es una ventana sin marco ni barra de título.

Utlizada para las ventanas de presentación. Métodos:

void setVisible (boolean visible) void pack() void setSize (int width, int height) void setTitle (String title) void setMenuBar (MenuBar mb) void setResizable (boolean resizable) void setState (int state)

Contenedores – Cuadros de Diálogo

Son ventanas transitorias para mostrar advertencias, errores,información especifica, etc.

No tienen barra de menús. Pueden ser de tres tipos:

JDialog: proporciona un dialogo general. JFileChooser: dialogo especifico para escoger

archivos para guardar o abrir. JOptionPane: manera fácil y rápida de generar

diálogo personalizados

Contenedores

Ejemplo de creación de una ventana:public class MiFrame extends Frame{ Button boton; public static void main(String s[]) { new MiFrame(); } public MiFrame() { boton = new Button("Aceptar"); this.setLayout(new FlowLayout()); this.add(boton); this.setSize(250,250); this.setVisible(true); } }

Contenedores

Ejemplos:public MiFrame(){ boton = new JButton("Aceptar"); Panel panel= new Panel(new FlowLayout()); panel.add(boton); this.setLayout(new BorderLayout()); this.add(panel,BorderLayout.SOUTH); this.setSize(250,250); this.setVisible(true);}

public MiFrame(){ boton = new JButton("Aceptar"); this.setLayout(new FlowLayout()); this.add(boton); this.setSize(250,250); this.setVisible(true);}

public MiFrame(){ boton = new Button("Aceptar"); this.add(boton); this.setSize(250,250); this.setVisible(true);}

Contenedores - Container

Métodos importantes definidos en la clase Container: Component add(Component comp) void setLayout(LayoutManager mgr) void remove(Component comp) void remove(int index) void removeAll() void doLayout()

Distribución de espacio

Antes de construir una GUI es importante saber como se distribuyen espacialmente los componentes

Los layout managers controlan la forma como se colocan los componentes dentro del contenedor

FlowLayout Coloca los componentes de izquierda a derecha, de arriba hacia abajo.

BorderLayout permite dividir el espacio disponible en cinco paneles etiquetados como Center, North, West, South y East

LayoutManager

FlowLayout (java.awt) Permite una distribución lineal de los componentes. Crea nuevas líneas cuando así lo exige el ancho del

container.

this.setLayout (new FlowLayout());this.add(new Button(“Aceptar”));this.add(...);this.add(...);this.add(...);this.add(...);

LayoutManager

GridLayout (java.awt) Permite una distribución en regilla o tabla. Los componentes se situan en las celdas de forma secuencial de

arriba abajo y de izquierda a derecha. No se puede direccionar la posición de los componentes sobre

las celdas. El tamaño de las celdas es idéntico.

this.setLayout(new GridLayout(2,3));this.add(new Button(“Aceptar”));this.add(...);this.add(...);this.add(...);

LayoutManager

BorderLayout (java.awt) Proporciona cinco áreas para situar componentes. La ausencia de una de ellas produce la extensión

horizontal o vertical de las contiguas.

this.setLayout(new BorderLayout());this.add(new Button(“Aceptar”), BorderLayout.NORTH);this.add(..., BorderLayout.EAST);this.add(..., BorderLayout.WEST);this.add(..., BorderLayout.SOUTH);this.add(..., BorderLayout.CENTER);

LayoutManager

CardLayout (java.awt) Permite alternar el contenido de un container entre

varios paneles creados anteriormente. El cambio se puede producir en tiempo de ejecución. Cada panel deberá tener un identificador del tipo

String.

this.setLayout(new CardLayout());Panel panelA = new JPanel ();panelA.add(....);Panel panelB = new JPanel ();panelB.add(....);this.add(panelA, “A”);this.add(panelB, “B”);CardLayout cl = (CardLayout)this.getLayout();cl.show(c, “B");

LayoutManager

BoxLayout (javax.swing) Permite visualizar los componentes alineados

vertical u horizontalmente.

this.setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));Button boton1 = new Button(“Aceptar");boton1.setAlignmentX(Component.CENTER_ALIGNMENT);this.add(boton1);this.add(...);this.add(...);this.add(...);

Componentes (Component)

Como superclase de todos los componentes java (AWT y Swing), esta clase generaliza el comportamiento de todos ellos.

Todos los componentes AWT heredan de Component, mientras que los desarrollados en Swing lo hacen de JComponent.

Componentes

Las GUI se construyen con componentes, cada uno de los cuales está preparado para responder a distintos tipos de eventos. Algunos componentes son:

JLabel Etiqueta para mostrar texto JTextBox y JTextArea Cajas de texto para la entrada de datos JButton Botón JCheckBox Caja de comprobación para elegir opciones JRadioButton Para elegir opciones mutuamente excluyentes JList Lista de opciones JScrollBar Barra de Scroll JTree Arbol JTable Tabla JMenuBar, JMenu, JMenuItem Para elaborar menús JOprioPane Ventanas de diálogo JFileChooser, JColor Chooser Ventanas estándar

Componentes (Component)

Métodos importantes definidos en la clase Component: void setEnabled(boolean b) void setVisible(boolean b) void requestFocus() void setBounds(int x, int y, int width, int height) void setLocation(int x, int y) void setSize(int width, int height) void setCursor(Cursor cursor) void setFont(Font f) void setBackground(Color c) void setForeground(Color c) void setName(String name) void updateUI()

Componentes

Componentes (continuación…)

Componentes - Button

Button(): crea un botón vacio sin etiqueta Button(String): crea un botón con el

string como etiqueta String getLabel(): devuelve la etiqueta

del botón. void setLabel(String): pone como

etiqueta el String del parámetro.

Componentes - Label

Label(): Crea una etiqueta vacía con el texto alineado a la izquierda.

Label(String): Crea una etiqueta con la cadena de texto dada, alineada a la izquierda.

Label(String, int): Crea una etiqueta con la cadena de texto y la alineación dadas. La alineación disponible se almacena en variables de clase en Label; Label.RIGHT, Label.LEFT, Label.CENTER.

String getText(): Devuelve el texto de la etiqueta. void setText(String): Cambia el texto de la etiqueta. int getAlignment(): Devuelve un entero que representa la

alineación de la etiqueta:0 es Label.LEFT, 1 es Label.CENTER y 2 es Label.RIGHT.

void setAlignment(int): Cambia la alineación con la indicada..

Componentes - TextField

TextField(): Crea una caja de texto de 0 caracteres de amplitud. TextField(int): Crea un campo de texto vacío con la amplitud

dada. TextField(String): Crea una caja de texto con la longitud de la

cadena como amplitud, inicializado con la cadena dada. TextField (String,int): crea un campo de texto con la amplitud

dada y la cadena dada. String getText(): Devuelve el texto contenido en ese campo de

texto. void setText(String): Coloca la cadena dada en el campo de

texto. boolean isEditable(): Devuelve true o false basado en si el texto

es editable o no. void setEditable(boolean): true (valor predeterminado) permite

la edición del texto; false inmoviliza el texto. void setEchoCar(char): Pone el carácter dado en la entrada para

ocultar texto.

Componentes - Canvas

La clase Canvas permite representar elementos gráficos en pantalla.

A través de su método paint(Graphics g) se realizan todos los dibujos sobre el canvas.

Es la ocurrencia de la clase Graphics la que permite realmente pintar elementos gráficos, el canvas es el soporte.

Graphics2D hereda de Graphics, aportando una mayor funcionalidad. A través de un downcasting se puede utilizar este objeto más refinado.

Graphics2D g2d = (Graphics2D) g;


Clase Graphics Métodos:

drawString(String, int, int) drawOval(int, int, int, int) drawRect(int, int, int, int) drawArc(int, int, int, int, int, int) drawImage(Image, int, int, ImageObserver) drawLine(int, int, int, int) drawPolygon(int[], int[], int) setColor(Color) setFont(Font)


Crear un área de dibujo:class MiCanvas extends Canvas implements MouseListener{ int x=50;int y=50;int radioX=30;int radioY=30; MiCanvas() { this.setBackground(Color.white); this.addMouseListener(this); this.setFont(new Font("Courier", Font.BOLD, 24)); this.setCursor(new Cursor(Cursor.CROSSHAIR_CURSOR)); } public void paint(Graphics g) { g.setColor(Color.red); g.drawString("Dibuja Circunferencias",50,20); g.setColor(Color.blue); g.drawLine(50,40,340,40); g.setColor(Color.green); g.drawOval(x,y,radioX, radioY); }

Componentes – Canvas (continuación…)

public void mousePressed(MouseEvent e) { x=e.getX(); y=e.getY(); }

public void mouseReleased(MouseEvent e) { radioX=(e.getX()-x); radioY=(e.getY()-y); this.repaint(); }

public void mouseEntered(MouseEvent e) {}

public void mouseExited(MouseEvent e) {}

public void mouseClicked(MouseEvent e) {}}

Posteriormente se podrá añadir una ocurrencia de la claseMiCanvas a cualquier Frame como un componente más

Eventos – java.awt.event

Este paquete proporciona las clases e interfaces necesarias para gestionar los diferentes tipos de eventos de los componentes de AWT.

Los eventos más importantes que una aplicación gráfica puede registrar son: Ratón Ratón (Drag & Drop) Acción Teclado Ventana Un evento del tipo acción se produce cuando se

acciona algún control


Para que los componentes puedan recibir eventos deben registrarse previamente indicando qué clase va a

gestionarlos. Esta tarea se realiza a través de la invocación del método

addInterfaz(clase a gestionar el evento). Estas clases deben implementar los interfaces que se

correspondan con cada tipo de evento e indicar las acciones a ejecutar en el caso que se active el evento.

Los interfaces más utilizados son los siguientes: EventListener

MouseListener MouseMotionListener ActionListener KeyLIstener WindowListener

Componentes y sus Listeners


Estas interfaces definen una serie de métodos que se corresponden con las diferentes acciones asociadas a un tipo de evento determinado.

Por ejemplo, en un evento de teclado, el usuario puede presionar o soltar una tecla.

Por lo tanto, cuando definamos la clase implementando la interfaz correspondiente, se tendrán que implementar todos los métodos definidos en él.

Existen tres posibilidades para definir una clase que gestione los eventos de un componente: Crear una nueva clase. Utilizar la clase que define la ventana, como clase que

además gestionará los eventos. Definir una clase anónima dentro de la clase de ventana


Si se desea obtener información del evento producido, se puede hacer a través del argumento de cada método invocado.

Por ejemplo, si se desea saber la tecla que se ha pulsado sobre una caja de texto, deberemos operar de la siguiente manera: Aplicar un listener que gestione los eventos de tipo teclado

sobre la caja de texto: cajaTexto.addKeyListener(new A());

Implementar el interface KeyListener con todos sus métodos.

Identificar el método asociado al evento pulsar una tecla. Trabajar con el objeto que recibe el método en el

argumento, ya que es éste quién posee toda la información del evento producido

Jerarquía de Interfaces de Eventos

Jerarquía de Interfaces de Eventos

Clases que implementan los interfaces: java.awt.event.KeyAdapter (implements KeyListener) java.awt.event.MouseAdapter (implements

MouseListener) java.awt.event.MouseMotionAdapter (implements

MouseMotionListener) java.awt.event.WindowAdapter (implements

WindowListener) La ventaja que nos proporcionan las clases del

tipo Adapter es que realizan la implementación de todos los métodos de la interface. De esta manera, se puede heredar de ella, y sólo se redefinirá el método necesario.

Eventos de Ventana

Definidos en el interface WindowListener: Métodos:

public void windowClosed(WindowEvent event) public void windowDeiconified(WindowEvent

event) public void windowIconified(WindowEvent event) public void windowActivated(WindowEvent event) public void windowDeactivated(WindowEvent

event) public void windowOpened(WindowEvent event) public void windowClosing(WindowEvent event)

Ejemplo eventos de ventana (I)

Ejemplo de implementación del interface.class Ventana extends Frame implements WindowListener{ Ventana() { … ; this.addWindowListener(this); } //Hay que implementar todos los métodos public void windowClosed(WindowEvent event) { } public void windowDeiconified(WindowEvent event) { } public void windowIconified(WindowEvent event) { } public void windowActivated(WindowEvent event) { } public void windowDeactivated(WindowEvent event) { } public void windowOpened(WindowEvent event) { } public void windowClosing(WindowEvent event) {System.exit(0);}}

Ejemplo eventos de ventana (II)

Ejemplo sin implementación del interface, a través de la utilización de una clase anónima interna.

Implementación del interfaz a través de WindowAdapter. Únicamente se implementa el método deseado. De esta manera, no es nuestra clase la que gestiona el evento,

sino la clase anónima creada de dentro de ella.class Ventana extends Frame{ Ventana() { … this.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }; }}

Eventos de Teclado

Implementar el interface KeyListener: Métodos:

public void keyTyped(KeyEvent e) public void keyPressed(KeyEvent e) public void keyReleased(KeyEvent e)

Eventos de Teclado Ejemplo

Ejemplo de implementación del interface.public class ClienteWindow extends Applet implementsKeyListener{ … textoMensaje.addKeyListener(this); … public void keyTyped(KeyEvent e) {} public void keyReleased(KeyEvent e) {} public void keyPressed(KeyEvent e) { int code = e.getKeyCode(); if(KeyEvent.VK_ENTER == code) { … } }}

Eventos sobre Components

Implementar el interface ActionListener: Métodos:

public void actionPerformed(ActionEvent e)

Ejemplo de Eventos sobre componentes (I)

Ejemplo de implementación del interface.public class ClienteWindow extends Applet

implementsActionListener { … boton.addActionListener(this); … public void actionPerformed(ActionEvent event) { Object source = event.getSource(); if (source == boton) { … } }

Ejemplo de Eventos sobre componentes (II)

Ejemplo sin implementación del interface, a través de la utilización de una clase anónima.

boton.addActionListener(new ActionListener()

{

public void actionPerformed(ActionEvent e)

{

…

}

};

Eventos de Ratón

Implementar el interface MouseListener: Métodos:

public void mouseClicked(MouseEvent e) public void mouseEntered(MouseEvent e) public void mouseExited(MouseEvent e) public void mousePressed(MouseEvent e) public void mouseReleased(MouseEvent e

Como crear… usando Swing

JLabel

Crear una etiqueta:

JLabel etiq=new JLabel("Nombre: ");

/* En la siguiente sentencia se asigna un color a la

etiqueta utilizando el constructor Color(R,G,B) */

etiq.setForeground(new Color(255,0,0)); //Rojo

etiq.setFont(new Font("Times New Roman",Font.BOLD, 12));

JButton

Crear un botón:

JButton botonSalir = new JButton("Aceptar");

Gestión de eventos:botonSalir.addActionListener(new

ActionListener(){public void actionPerformed(ActionEvent e){dispose();System.exit(0);}});

JText

Crear una caja de texto:JTextField textNombre = new JTextField(10);

Gestión de eventos:textNombre.addKeyListener(new KeyAdapter()

{

public void keyTyped(KeyEvent e)

{

if ((int)e.getKeyChar()== KeyEvent.VK_ENTER)

System.out.println(textNombre.getText());

}

});

JComboBox

Crear una lista combinada:String datos[] = { “Uno”, “Dos”, “Tres”,

“Cuatro”, “Cinco”};JComboBox lista = new JComboBox (datos);lista.setBorder(BorderFactory.createLineBorder(C

olor.red,4));

Gestión de eventos:lista.addActionListener(new ActionListener(){public void actionPerformed(ActionEvent e){System.out.println(lista.getSelectedItem());}});

JCheckBox

Crear una casilla de verificación:JCheckBox ch=new JCheckBox("Estudiante", newImageIcon("images/off.gif"), false);ch.setRolloverSelectedIcon(new

ImageIcon("images/over.gif"));ch.setRolloverIcon(new ImageIcon("images/over.gif"));ch.setSelectedIcon(new ImageIcon("images/on.gif"));

Gestión de eventos:ch.addActionListener(new ActionListener(){public void actionPerformed(ActionEvent e){if(ch.isSelected())mostrarMensaje("Check Activado");}});

JRadioButton Crear una botón de opción:

ButtonGroup grupo = new ButtonGroup();rb1 = new JRadioButton("Hombre");rb2 = new JRadioButton("Mujer");rb1.setSelected(true);rb1.setMnemonic(KeyEvent.VK_H);rb2.setMnemonic(KeyEvent.VK_M);grupo.add(rb1);grupo.add(rb2); Gestión de eventos:

rb1.addActionListener(new ActionListener(){public void actionPerformed(ActionEvent e){if(rb1.isSelected())mostrarMensaje("Radio HombreActivado");}});

JOptionPane

Esta clase se utiliza para crear cualquier tipo de dialogo estándar para mostrar o recoger información.

Relación (Tipo de diálogo – Método estático): Diálogo de Confirmación (Si/No/Cancelar) –

showConfirmDialog Diálogo de Entrada - showInputDialog Diálogo de Mensaje - showMessageDialog Dialogo Personalizable - showOptionDialog

Ejemplo:String nombre = JOptionPane.showInputDialog(this,"<html>Introduzca su <u>nombre</u>, por favor:</html>");JOptionPane.showMessageDialog(this, "<html><H3>Procesofinalizado satisfactoriamente</H3></html>");

JFileChooser

Permite mostrar los diálogos de Abrir y Guardar como...

Relación (Tipo de diálogo – Método instancia): Diálogo de Abrir – showOpenDialog Diálogo de Guardar como... –

showSaveDialog Ejemplo:JFileChooser j = new JFileChooser();int rtn = j.showOpenDialog(this);if (rtn == JFileChooser.APPROVE_OPTION)System.out.println(j.getSelectedFile().getPath());

Look & Feel

Modifica la apariencia de nuestra ventana. Tipos:

Ejemplo:int i=1; //Apariencia MotifUIManager.LookAndFeelInfo looks[];looks = UIManager.getInstalledLookAndFeels();try{UIManager.setLookAndFeel(looks[i].getClassName());SwingUtilities.updateComponentTreeUI(this);}catch(Exception e) {}Metal (0) Motif (1) Windows (2) Windows Classic (3)

Look & Feel

También es posible pasar como parámetro el nombre de la clase del Look & Feel: Metal → javax.swing.plaf.metal.MetalLookAndFeel Motif → com.sun.java.swing.plaf.motif.MotifLookAndFeel Windows → com.sun.java.swing.plaf.windows.WindowsLookAndFeel Windows Classic → com.sun.java.swing.plaf.windows.WindowsClassicLookAndFeel

Ejemplo:try{UIManager.setLookAndFeel(“com.sun.java.swing.plaf.windows.WindowsLookAndFeel”)

;SwingUtilities.updateComponentTreeUI(this);}catch(Exception e) {}

Menús

Cada ventana puede tener su propia barra de menús.

AWT ofrece: JMenuBar: para crear la barra de menús JMenu: para los diferente menús de la barra Elementos del menú:

instancias de la clase JMenuItem para elementos normales.

instancias de la clase JCheckBoxMenuItem. otros menús. separadores, gracias al método addSeparator().

gui en java

Documents