el lenguaje de programación java1 diseño de la interfaz gráfica (javax.swing) –contenedores...

35
El lenguaje de programaci ón Java 1 • Diseño de la interfaz gráfica (javax.swing) – Contenedores – Componentes • Modelo de eventos • Diseño de aplicaciones – Modelo MVC (Modelo-Vista-Control) Programación gráfica

Upload: marcial-rufino

Post on 29-Jan-2016

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 1

• Diseño de la interfaz gráfica (javax.swing)– Contenedores– Componentes

• Modelo de eventos

• Diseño de aplicaciones– Modelo MVC (Modelo-Vista-Control)

Programación gráfica

Page 2: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 2

Interfaz gráfica de usuario• El interfaz de usuario es la parte del programa que permite a éste

interactuar con el usuario.

• AWT (Abstract Window Toolkit) biblioteca de clases Java para el

desarrollo de Interfaces de Usuario Gráficas.

• La estructura básica del AWT se basa en Componentes y

Contenedores

– Los Contenedores contienen Componentes, que son los controles básicos

– todos los Componentes clase Component o uno de sus subtipos.

– los Contenedores son instancias de la clase Container o uno de sus

subtipos.

• No se usan posiciones fijas de los Componentes, sino que están

situados a través de una disposición controlada (Layouts)

Page 3: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

Interfaz gráfica de usuario. AWT

Button

Component

Checkbox

Canvas

Choice

Label

List

ScrollBar

Panel

Container

WindowScrollPane

Dialog

FileDialog

TextArea

TextComponent

TextField

MenuComponent

MenuItemMenuBar

CheckBoxMenuItem Menu

PopupMenu

Frame

Page 4: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 4

Swing-JFC (Java Foundation Classes)• Extensión de AWT mejora la cosmética de las GUI’s.

•La apariencia de la aplicación se adapta al sistema operativo

y plataforma donde se está ejecutando.

•Garantizan que el aspecto es el mismo aunque se cambie de

plataforma.

−Look and Feel: Metal, Window, Motif

•La aplicación se puede utilizar sin ratón sin añadir código

•Las clases se llaman igual que las del paquete java.awt

pero con una J delante, esto es, JFrame, JButton, ...

Page 5: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 5

• Swing Containers: JPanel, JTabbedPane,

JScrollPane, JSplitPane,

JMenuBar, JPopupMenu, JToolBar

• Swing Components: JButton, JRadioButton, JChechBox,

JLabel, JTextArea,

JTextField, JPasswordField,

JComboBox, JList, JTree, JTable

Page 6: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 6

JFrame

• paquete javax.swing

• Por defecto se crea con tamaño 0x0– setSize(ancho, alto)

• Hay que indicar qué ocurrirá cuando el usuario cierre la ventana– setDefaultCloseOperation(cte)– cte = EXIT_ON_CLOSE/DO_NOTHING_ON_CLOSE/HIDE_ON_CLOSE/ DISPOSE_ON_CLOSE

• Al crear un frame no se visualiza automáticamente– setVisible(true)

• Para situar un frame en la ventana:– setLocation(x,y) //(x,y) es la esquina superior-izda

– setBounds(x, y, ancho, alto)

Page 7: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 7

Toolkit

• Permite obtener información dependiente del sistema.

• Ejemplo: Permite obtener las dimensiones de la pantalla para poder calcular el tamaño óptimo del tamaño de las ventanas de la aplicación.

class FrameCentrado extends JFrame{ public FrameCentrado() {

try { jbInit(); } catch(Exception e) { e.printStackTrace(); } } private void jbInit() throws Exception {

//siguiente transparencia}

}

Page 8: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 8

clase FrameCentrado (continuación)

private void jbInit() throws Exception {//obtener las dimensiones de la pantalla

Toolkit kit = Toolkit.getDefaultToolkit();Dimension tamañoVtna = kit.getScreenSize();int alto = tamañoVtna.height;int ancho = tamañoVtna.width;

//centrar la ventana en la pantalla

this.setSize(ancho/2, alto/2);setLocation(ancho/4, alto/4);

//Establecer título e icono

Image img = kit.getImage(“icon.gif”); //gif y jpegsetIconImage(img);setTitle(“Frame centrado”);

}

Page 9: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 9

• No se añaden directamente los componentes a un frame sino a un panel de contenido.

this.getContentPane().add(…);

• Los componentes en un contenedor se gestionan por un layout manager:

– FlowLayout: Alinea los componentes horizontalmente.• opción por defecto en JPanel• dentro de una fila se puede elegir la alineación (LEFT, RIGHT, CENTER)

– BorderLayout: opción por defecto del panel de contenido de un JFrame.• Puede elegir dónde colocar los componentes: NORTH, SOUTH, EAST, WEST, CENTER (por defecto)

Page 10: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 10

BorderLayout

setLayout(new BorderLayout());this.getContentPane(componente, “South”);

• Las constantes se han definido como String.• El componente tiende a ocupar todo el espacio disponible.•Solución: situar un panel (JPanel) en cada zona que necesitemos

Page 11: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 11

Etiquetas. JLabelJLabel etiq2 = new JLabel( "Etiqueta2" );

etiq2.setText(“Soy una etiqueta”);

etiq2.setFont( new Font("Helvetica", Font.BOLD, 18 ));

Icon imagen = new ImageIcon( "star0.gif" );

JLabel etiq3 = new JLabel( "Etiqueta3");

etiq3.setIcon(imagen);

Page 12: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

12

JTextField, JTextArea y JScrollPane

• Introducir texto en una línea o varias.

• Métodos heredados de JTextComponent:– void setText(String t)– String getText()– void setEditable(boolean b)

• El layout puede ajustar el tamaño del JTextField aunque se establezca un tamaño preferido (setColumns)

• JTextArea se pueden establecer las filas (rows) y columnas (columns)

• Se puede añadir una barra de scroll (JScrollPane).Aparecerá cuando el texto exceda el tamaño establecidotextArea = new JTextArea(8,40);

JScrollPane sp = new JScrollPane(textArea);

contentPane.add(scrollPane, BorederLayout.CENTER);

Page 13: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 13

Pestañas. JTabbedPane

• String informativo sobre los componentes:

boton1.setToolTipText( "Soy el JBoton 1" );

•Se pueden asignar imágenes (Icon) a los botones (JButton).

• Cada pestaña debe tener un JPanel para añadir los componentes

• Botón de dos estados• JRadioButton y JCheckBox son

subclases

ButtonGroup(exclusividad)

Page 14: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 14

JCheckBox y JRadioButton

• JCheckBox:– JCheckBox(String label)– JCheckBox(String label, boolean state)– JCheckBox(String label, Icon icon)– boolean isSelected()– void setSelected(boolean state)

• JRadioButton:– JRadioButton(String label, boolean state)– JRadioButton(String label, Icon icon)– Para una selección exclusiva se tienen que agrupar en ButtonGroup:

• add(AbstractButton b)• ButtonModel getSelection();

– ButtonModel• String getActionCommand()

Page 15: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 15

JComboBox

• Seleccionar entre muchas alternativas

• Métodos:– void setEditable(boolean b)– void addItem(Object item)– void insertItemAt(Object item, int index)– void removeItem(Object item)– void removeItemAt(int index)– void removeAllItems()– Object getSelectedItem()

Page 16: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 16

JOptionPane

• Ventanas de mensajes estándar que permiten mostrar un mensaje de información al usuario o capturar información.

• Casi todos los usos de esta clase son llamadas a uno de los métodos static showXxxDialog – JOptionPane.showMessageDialog();– JOptionPane.showConfirmDialog();– JOptionPane.showOptionDialog)();– JOptionPane.showInputDialog();

• Todos los diálogos son modales (no continúa la ejecución hasta que no se cierra).

• Se pueden configurar mediante parámetros: título, mensaje, icono, etc.

Page 17: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 17

Ejemplos JOptionPaneJOptionPane.showMessageDialog(null, "Cuidado con lo que haces", "Consejo", JOptionPane.ERROR_MESSAGE);

JOptionPane.showConfirmDialog(null, “Debes elegir uno", “Decide", JOptionPane.YES_NO_OPTION);

Page 18: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 18

Ejemplo JOptionDialog

Object[] opciones = { "Continuar", "Cancelar", "Guardar Estado" };

JOptionPane.showOptionDialog(null,

"Podemos estar en un estado inconsistente", "¡¡¡OJO!!!",JOptionPane.DEFAULT_OPTION, JOptionPane.WARNING_MESSAGE, null, opciones, opciones[0]);

Page 19: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 19

Ejemplo entrada de datos

Object [] valores = {"Libro","CD","DVD" };

String respuesta=(String) JOptionPane.showInputDialog(

null,

"Elija el tipo de producto", "Entrada de datos",

JOptionPane.QUESTION_MESSAGE, null, valores,

valores[0]);

Page 20: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 20

Ejemplo entrada de datos libreIcon icono = new ImageIcon("icons/Question.gif");

String respuesta = (String)JOptionPane.showInputDialog(

null,

"Introduzca el nombre que va a borrar",

"Eliminar contacto", JOptionPane.QUESTION_MESSAGE,

icono, null,null);

Page 21: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 21

Menús

JMenuBar JPopupMenu

1. Añadimos un menú

2. Haciendo doble click abrimos el diseñador de menús

Componente JFileChooser

Page 22: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 22

Diseñador de menús

Page 23: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 23

Asignación del menú al componente

• Una vez cerrado el diseñador de menús, asignamos el JMenuBar al componente que lo contendrá (JFrame o JDialog).

• Desde el diseñador

• El resultado es que en laen la definición de VentanaContadorse añada:

this.setJMenuBar(jMenuBar1);Propiedades del JFrame o JDialog

Page 24: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

24

Modelo de delegación de eventos• Los eventos se encapsulan en una jerarquía de clases donde la clase

raíz es java.util.EventObject

• Fuentes de eventos (Source):

– es un objeto que tiene la capacidad de detectar eventos y notificar a los receptores de eventos que se han producido esos eventos

– mantiene una lista de objetos receptores y los tipos de eventos a los que están suscritos. El programador crea esa lista utilizando llamadas a los métodos add<TipoEvento>Listener() (tb remove).

– Generalmente un componente del interfaz gráfico

• Receptores de eventos (Listener):

– es una clase (o una subclase de una clase) que implementa un interfaz receptor específico java.util.EventListener

– declara TODOS los métodos adecuados al tratamiento de los eventos de su clase

• Resultan de utilidad las clases internas

Page 25: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

25

Modelo de delegación de eventos

• Emparejamiento entre clases de eventos y definiciones de interfaces.

Por ejemplo:

– class MouseEvent

– interfaz MouseListener

– En java.awt.Component existe el método addMouseListener

• Adaptadores (Adapter):

– evita tener que escribir todos los métodos del interfaz

– implementa todos los métodos del interfaz con métodos vacíos

– una clase receptor puede definirse como una clase que extiende una clase Adapter (en lugar de una clase que implementa el interfaz) y sobreescribe los métodos que necesite

– Ejemplo:

public abstract class MouseAdapter implements MouseListener

Page 26: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

26

Interfaces Listener Métodos

ActionListener actionPerformed(ActionEvent)

KeyListener KeyAdapter

keyPressed(KeyEvent) keyReleased(KeyEvent) keyTyped(KeyEvent)

MouseListener MouseAdapter

mouseClicked(MouseEvent) mouseEntered(MouseEvent) mouseExited(MouseEvent) mousePressed(MouseEvent) mouseReleased(MouseEvent)

WindowListener WindowAdapter

windowOpened(WindowEvent) windowClosing(WindowEvent) windowClosed(WindowEvent) windowActivated(WindowEvent) windowDeactivated(WindowEvent) windowIconified(WindowEvent) windowDeiconified(WindowEvent)

ItemListener itemStateChanged(ItemEvent)

Page 27: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 27

Modelo de delegación de eventos. Ejemplo

import java.awt.*;class CierraVentanas implements WindowListener{public void windowClosing(WindowEvent we){

Window w = (Window)we.getSource();w.dispose();System.exit(0);

}public void windowOpened (WindowEvent we){}public void windowClosed (WindowEvent we){}public void windowActivated (WindowEvent we){}public void windowDeactivated (WindowEvent we){}public void windowIconified (WindowEvent we){}public void windowDeiconified (WindowEvent we){}}public class MiAplicacion extends JFrame{

...public MiAplicacion(){

...this.addWindowListener(new CierraVentanas());...

}}

Vacios!!extends WindowAdapter

Page 28: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 28

Ejemplo2: WindowAdapterimport java.awt.*;

class CierraVentanas extends WindowAdapter{

//Sólo implementamos el método que necesitamos

public void windowClosing(WindowEvent we){

Window w = (Window)we.getSource();

w.dispose();

System.exit(0);}

}

public class MiAplicacion extends JFrame{...public MiAplicacion(){

...this.addWindowListener(new CierraVentanas());...

}}

DefaultCloseOperations: EXIT_ON_CLOSE DO_NOTHING_ON_CLOSE HIDE_ON_CLOSE DISPOSE_ON_CLOSE

Page 29: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 29

Ejemplo: JFrameContador v.1

1) JButton jButtonDec;

2) jButtonDec.addActionListener(new BDListener());3) //Clase interna en JFrameContador class BDListener implements ActionListener{ public void actionPerformed(ActionEvent event){ miConta.decrementar(); imprimirValor(); } }

Page 30: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 30

Ejemplo: JFrameContador v.2

jButtonDec.addActionListener(new ActionListener(){public void actionPerformed(ActionEvent event){

miConta.decrementar(); imprimirValor(); } });

• Cualquiera de las clases listener pueden ser clases anónimas, que tiene la ventaja de no necesitar un nuevo nombre de clase

• Ningún otro componente podría invocar a este ActionListener

Page 31: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 31

En JBuilder se puede elegir el estilo

Page 32: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 32

Generar los métodos asociados a los eventos sobre los componentes, en el estilo seleccionado

void jButtonSumar_actionPerformed(ActionEvent e) { //acciones asociadas al evento (programador) conta.incrementar(); imprimirValor(); //rellena el JTextField }

Page 33: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 33

Diseñador de menús. Acciones asociadas

void jMenuItemSalir_actionPerformed(ActionEvent e) { //El cuerpo lo rellena el programador

System.exit(0); }

Page 34: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 34

Enlazar el menú Archivo con JFileChooser• JFileChooser es un cuadro de diálogo para archivos.• Acción asociada a la opción de menú abrir:

public class VentanaContador extends JFrame{

private JFileChooser explorador = new JFileChooser();

...

void jMenuItemAbrir_actionPerformed(ActionEvent e) {

if (JFileChooser.APPROVE_OPTION ==

explorador.showOpenDialog(this)){

File fichero = explorador.getSelectedFile();

recuperarDatos(fichero);

}

}

• También showSaveDialog

Page 35: El lenguaje de programación Java1 Diseño de la interfaz gráfica (javax.swing) –Contenedores –Componentes Modelo de eventos Diseño de aplicaciones –Modelo

El lenguaje de programación Java 35

JFileChooser.showOpenDialog