1 TEMA 1. Diseño de interfaces gráficas 1.Introducción. Ejemplos. 2.Componentes de la interfaz...

11

TEMA 1.TEMA 1.Diseño de interfaces Diseño de interfaces gráficasgráficas

1.1. Introducción. Ejemplos.Introducción. Ejemplos.

2.2. Componentes de la interfazComponentes de la interfaz

3.3. Programación dirigida por eventosProgramación dirigida por eventos

4.4. Gestores de ubicaciónGestores de ubicación

5.5. La librería SwingLa librería Swing

6.6. Primitivas gráficas de pantalla.Primitivas gráficas de pantalla.

7.7. Diseño de interfaces gráficas de Diseño de interfaces gráficas de usuariousuario

22

Bibliografía Bibliografía

http://java.sun.com/docs/books/http://java.sun.com/docs/books/tutorial/uiswing/tutorial/uiswing/

Kathy Walrath, et all. “The JFC Swing Kathy Walrath, et all. “The JFC Swing Tutorial”. Ed. Addison Wesley. 2004.Tutorial”. Ed. Addison Wesley. 2004.

33

Práctica 1Práctica 1

El desarrollo de la aplicación se descompone en dos El desarrollo de la aplicación se descompone en dos partes diferenciadas:partes diferenciadas:

– Diseño de la interfaz gráficaDiseño de la interfaz gráfica

– Diseño de las clases para el funcionamiento de la Diseño de las clases para el funcionamiento de la calculadora, que supone la definición de un autómata de calculadora, que supone la definición de un autómata de estados.estados.

–

1 . Introducción. Ejemplos

44


55


Definición de un marco, componente JFrame, Definición de un marco, componente JFrame, que alberga todos las demás componentes. Se que alberga todos las demás componentes. Se trata del contenedor principal de la aplicación.trata del contenedor principal de la aplicación.

class GUICalculadora extends JFrameclass GUICalculadora extends JFrame{{

public GUICalculadora()public GUICalculadora()//obtenemos el contendor para colocar las componentes//obtenemos el contendor para colocar las componentesContainer marco=getContentPane();Container marco=getContentPane();

// Asignamos un gestor de ubicación de las componentes// Asignamos un gestor de ubicación de las componentesBorderLayout planificadorCalculadora = new BorderLayout planificadorCalculadora = new BorderLayout();BorderLayout();marco.setLayout(planificadorCalculadora);marco.setLayout(planificadorCalculadora);


66

BorderLayoutBorderLayout


77


Guardamos en la clase Contexto Guardamos en la clase Contexto el marco principal para poder el marco principal para poder acceder a el desde cualquier acceder a el desde cualquier parte de la interfazparte de la interfaz

Contexto.marco=this;Contexto.marco=this;


88


En la parte Norte colocaremos el campo En la parte Norte colocaremos el campo de texto para visualizar los operadores y de texto para visualizar los operadores y el botón CE para el borrado y comienzo el botón CE para el borrado y comienzo de una nueva operación. Ambas de una nueva operación. Ambas componentes están agrupadas en una componentes están agrupadas en una clase denominada clase denominada GUIResultCE.GUIResultCE.

GUIResultCE instResultCE = new GUIResultCE(Color.white, GUIResultCE instResultCE = new GUIResultCE(Color.white, Color.red);Color.red);

marco.add(instResultCE,BorderLayout.NORTH);marco.add(instResultCE,BorderLayout.NORTH);Contexto. barraVisor=instResultCE;Contexto. barraVisor=instResultCE;


99


En la parte Centro el juego de En la parte Centro el juego de botones de los dígitos, todos ellos botones de los dígitos, todos ellos están agrupados en la clase están agrupados en la clase GUIDigitosGUIDigitos..

GUIDigitos instGUIDigitos = new GUIDigitos instGUIDigitos = new GUIDigitos(Color.orange);GUIDigitos(Color.orange);

marco.add(instGUIDigitos,BorderLayout.CENTER);marco.add(instGUIDigitos,BorderLayout.CENTER);

Contexto. barraDigitos=instGUIDigitos;Contexto. barraDigitos=instGUIDigitos;


1010


En la parte Este colocamos el juego de operacionesEn la parte Este colocamos el juego de operaciones

GUIOperadores instGUIOperadores = new GUIOperadores instGUIOperadores = new GUIOperadores(Color.magenta);GUIOperadores(Color.magenta);

marco.add(instGUIOperadores,BorderLayout.EAST);marco.add(instGUIOperadores,BorderLayout.EAST);

Contexto. barraOperadores=instGUIOperadoresContexto. barraOperadores=instGUIOperadores;;


1111


Por último en el Sur colocamos la barra de Por último en el Sur colocamos la barra de estadoestado

GUIBarraEstado instGUIBarraEstado = new GUIBarraEstado(Color.grey);GUIBarraEstado instGUIBarraEstado = new GUIBarraEstado(Color.grey); marco.add(instGUIBarraEstado,BorderLayout.SOUTH)marco.add(instGUIBarraEstado,BorderLayout.SOUTH)

Contexto. barraEstado=instGUIBarraEstado;Contexto. barraEstado=instGUIBarraEstado;


1212


Al final colocamos las propiedades del marco y Al final colocamos las propiedades del marco y creamos y guardamos el oyente de todos los botones creamos y guardamos el oyente de todos los botones en la clase Contexto. en la clase Contexto. setSize(200,200);setSize(200,200);

//Para centrar la ventana en la pantalla//Para centrar la ventana en la pantalla setLocationRelativeTo(null);setLocationRelativeTo(null);

setTitle("Calculadora1");setTitle("Calculadora1"); setResizable(false);setResizable(false);

setVisible(true);setVisible(true); Contexto.oy=new Oyente();Contexto.oy=new Oyente();


1313

Práctica 1Práctica 1class GUIBarraEstado extends JPanelclass GUIBarraEstado extends JPanel{{ JLabel etiquetaEstado = new JLabel();JLabel etiquetaEstado = new JLabel(); public GUIBarraEstado(Color colorFondo)public GUIBarraEstado(Color colorFondo) {etiquetaEstado = new JLabel(“Leyendo Operando1");{etiquetaEstado = new JLabel(“Leyendo Operando1");

//indica alineación a la izquierda y número de espacios horizontales y //indica alineación a la izquierda y número de espacios horizontales y verticalesverticales

FlowLayout planificadorBarraEstado = new FlowLayout planificadorBarraEstado = new FlowLayout(FlowLayout.LEFT,10, 5);FlowLayout(FlowLayout.LEFT,10, 5);

setLayout(planificadorBarraEstado);setLayout(planificadorBarraEstado); setBackground(colorFondo);setBackground(colorFondo);

add(etiquetaEstado);add(etiquetaEstado);

}//Fin del constructor GUIBarraEstado(Color,Color)}//Fin del constructor GUIBarraEstado(Color,Color)


1414

PanelPanel Un Panel es un contenedor de Un Panel es un contenedor de

componentes que no tiene ningún componentes que no tiene ningún elemento predefinido.elemento predefinido.

El gestor de ubicación empleado es el El gestor de ubicación empleado es el FlowLayout que añade los componentes FlowLayout que añade los componentes de izquierda a derecha y de arriba de izquierda a derecha y de arriba abajo.abajo.


1515


public void actualizaBarraEstado(String public void actualizaBarraEstado(String mensaje)mensaje)

{etiquetaEstado.setText(mensaje);{etiquetaEstado.setText(mensaje);

}//Fin de actualizaMensaje}//Fin de actualizaMensaje


1616


public class GUIResultCE extends JPanelpublic class GUIResultCE extends JPanel{{ JTextField visor = new JTextField("",10);JTextField visor = new JTextField("",10); JButton botonCE = new JButton("CE");JButton botonCE = new JButton("CE"); public GUIResultCE(Color colorFondo, Color colorBoton)public GUIResultCE(Color colorFondo, Color colorBoton) {visor.setHorizontalAlignment(JTextField.RIGHT);{visor.setHorizontalAlignment(JTextField.RIGHT); // Color cuando el campo de texto es sólo de salida// Color cuando el campo de texto es sólo de salida visor.setDisabledTextColor(Color.black);visor.setDisabledTextColor(Color.black); FlowLayout planificadorResultCE = new FlowLayout planificadorResultCE = new

FlowLayout(FlowLayout.LEFT,10, 5);FlowLayout(FlowLayout.LEFT,10, 5); setLayout(planificadorResultCE);setLayout(planificadorResultCE);


1717


public class GUIResultCE extends JPanelpublic class GUIResultCE extends JPanel

{{

… …

visor.setBackground(colorFondo);visor.setBackground(colorFondo);

visor.setEnabled(false);visor.setEnabled(false);

add(visor);add(visor);

botonCEbotonCE.addMouseListener(Contexto.oy); .addMouseListener(Contexto.oy);

botonCE.setForeground(colorBoton);botonCE.setForeground(colorBoton);

add(botonCE);add(botonCE);

}//Fin del constructor GUIResultCE(Color,Color)}//Fin del constructor GUIResultCE(Color,Color)


1818

Práctica 1Práctica 1 public void actualizaVisor(String texto)public void actualizaVisor(String texto) {visor.setText(texto);{visor.setText(texto); }//Fin de actualizaVisor}//Fin de actualizaVisor public String dameVisor()public String dameVisor() {return visor.getText();{return visor.getText(); }//Fin de dameVisor}//Fin de dameVisor


1919

Práctica 1Práctica 1 public class GUIOperadores extends JPanelpublic class GUIOperadores extends JPanel{{ private final int NUM_OPERADORES = 4;private final int NUM_OPERADORES = 4; JButton [] botonOperador = new JButton [] botonOperador = new

JButton[NUM_OPERADORES];JButton[NUM_OPERADORES]; public GUIOperadores(Color colorBotones)public GUIOperadores(Color colorBotones)

{GridLayout PlanificadorOperadores = new {GridLayout PlanificadorOperadores = new GridLayout(NUM_OPERADORES,1);GridLayout(NUM_OPERADORES,1);

setLayout(PlanificadorOperadores);setLayout(PlanificadorOperadores);

botonOperador[0] = new JButton("+");botonOperador[0] = new JButton("+"); botonOperador[1] = new JButton("-");botonOperador[1] = new JButton("-"); botonOperador[2] = new JButton("*");botonOperador[2] = new JButton("*"); botonOperador[3] = new JButton("/");botonOperador[3] = new JButton("/");


2020

Práctica 1Práctica 1 public class GUIOperadores extends JPanelpublic class GUIOperadores extends JPanel

{{

……

for(int i = 0; i < NUM_OPERADORES; i++)for(int i = 0; i < NUM_OPERADORES; i++)

{{

botonOperador[i].setBackground(colorBotones);botonOperador[i].setBackground(colorBotones);

add(botonOperador[i]);add(botonOperador[i]);

obotonOperador[i].addMouseListener(Contexto.oy); obotonOperador[i].addMouseListener(Contexto.oy);

}}}}}}


2121

Práctica 1Práctica 1public class GUIDigitos extends JPanelpublic class GUIDigitos extends JPanel{{ private final int NUM_DIGITOS = 12;private final int NUM_DIGITOS = 12; JButton [] botonDigito = new JButton[NUM_DIGITOS];JButton [] botonDigito = new JButton[NUM_DIGITOS]; public GUIDigitos (Color colorBotones)public GUIDigitos (Color colorBotones)

{GridLayout PlanificadorBotones = new GridLayout(4,3);{GridLayout PlanificadorBotones = new GridLayout(4,3); setLayout(PlanificadorBotones);setLayout(PlanificadorBotones);

for(int fila = 0; fila < 3; fila ++)for(int fila = 0; fila < 3; fila ++) for(int columna = 0; columna < 3; columna ++)for(int columna = 0; columna < 3; columna ++) botonDigito[fila*3+columna] = new botonDigito[fila*3+columna] = new

JButton(String.valueOf(fila*3+columna));JButton(String.valueOf(fila*3+columna));

botonDigito[9] = new JButton("9");botonDigito[9] = new JButton("9"); botonDigito[10] = new JButton(".");botonDigito[10] = new JButton("."); botonDigito[11] = new JButton("=");botonDigito[11] = new JButton("=");


2222


for(int i = 0; i < NUM_DIGITOS; i++)for(int i = 0; i < NUM_DIGITOS; i++)

{botonDigito[i].setBackground(colorBoto{botonDigito[i].setBackground(colorBotones);nes);

add(botonDigito[i]);add(botonDigito[i]);

botonDigito[i].addMouseListener(ContextbotonDigito[i].addMouseListener(Contexto.oy); }}o.oy); }}


2323


El gestor de ubicación GridLayout define una retícula El gestor de ubicación GridLayout define una retícula

de componentes, indicando el número de filas y de componentes, indicando el número de filas y columnas.columnas.

Las componentes se colocan de izquierda a derecha y Las componentes se colocan de izquierda a derecha y de arriba abajo.de arriba abajo.


2424

Práctica 1Práctica 1 public class OyenteBoton extends MouseAdapterpublic class OyenteBoton extends MouseAdapter {public void mouseClicked(MouseEvent eventoEntrante){public void mouseClicked(MouseEvent eventoEntrante)

{ { JButton boton = (JButton)eventoEntrante.getSource();JButton boton = (JButton)eventoEntrante.getSource(); char ch = boton.getText().charAt(0);char ch = boton.getText().charAt(0); Automata.CaracterIntroducido(ch);Automata.CaracterIntroducido(ch);}//Fin de mouseClicked}//Fin de mouseClicked

public void mouseExited(MouseEvent eventoEntrante){;}public void mouseExited(MouseEvent eventoEntrante){;}public void mouseReleased(MouseEvent eventoEntrante)public void mouseReleased(MouseEvent eventoEntrante){;}{;}public void mousePressed(MouseEvent eventoEntrante){;}public void mousePressed(MouseEvent eventoEntrante){;}public void mouseEntered(MouseEvent eventoEntrante){;}public void mouseEntered(MouseEvent eventoEntrante){;}{ {

}//Fin de la clase ControlRaton}//Fin de la clase ControlRaton


2525

Práctica 1Práctica 1 class Contextoclass Contexto{ public static GUIResultCE barraVisor = { public static GUIResultCE barraVisor =

null;null; public static GUIBarraEstado public static GUIBarraEstado

barraEstado = null;barraEstado = null; //public static GUIDigitos botoneraDigitos //public static GUIDigitos botoneraDigitos

= null;= null; //public static GUIOperadores //public static GUIOperadores

botoneraOperadores = nullbotoneraOperadores = null

public static Oyente oy=null;public static Oyente oy=null;


2626


import javax.swing.*;import javax.swing.*;

class Principalclass Principal

{{

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

{{ GUICalculadora calculadora = new GUICalculadora calculadora = new GUICalculadora();GUICalculadora();

}//Fin de main}//Fin de main

}}


2727


2828

Componentes de la interfazComponentes de la interfaz Los controles de una interfaz Los controles de una interfaz

poseen una representación poseen una representación gráfica, un conjunto de campos gráfica, un conjunto de campos y un conjunto de métodos. y un conjunto de métodos.

Distinguimos entre dos tipos de Distinguimos entre dos tipos de controles, los contenedores y controles, los contenedores y las componentes básicas que las componentes básicas que se ubican en los contenedores.se ubican en los contenedores.

2 . Componentes de interfaz

2929

Índice visual de controlesÍndice visual de controles


Top-Level Containers

Applet

Dialog

Frame

General-Purpose Containers

Panel

Scroll pane

Split pane

Tabbed pane

Tool bar

Special-Purpose Containers

3030



3131



Uneditable Information Displays

Label

Progress bar

Tool tip

Interactive Displays of Highly Formatted Information

Color chooser

File chooser

Table

Text

Tree

3232

HTML en componentesHTML en componentes

Muchas componentes que usan texto como parte de su visualización, pueden Muchas componentes que usan texto como parte de su visualización, pueden determinar su apariencia a través de etiquetas Html de formateo.determinar su apariencia a través de etiquetas Html de formateo.

Ejemplo:Ejemplo:

– Label=new Jlabel(“<html><b>hola</b></html>”);Label=new Jlabel(“<html><b>hola</b></html>”);


3333

Contenedores de nivel Contenedores de nivel superiorsuperior

Swing proporciona tres clases de contenedores de nivel superior: Swing proporciona tres clases de contenedores de nivel superior: JFrame, JDialog y JApplet.JFrame, JDialog y JApplet.

Cualquier control de interfaz forma parte de una jerarquía de contenedores.Cualquier control de interfaz forma parte de una jerarquía de contenedores.

Cada componente solo puede estar contenida en una.Cada componente solo puede estar contenida en una.

Cada contenedor de nivel superior tiene un Content Pane sobre el que se ubican las componentes. Se obtiene con Cada contenedor de nivel superior tiene un Content Pane sobre el que se ubican las componentes. Se obtiene con getContentPanegetContentPane..

Se pueden añadir barras de menú en los contenedores de nivel superior, mediante el método Se pueden añadir barras de menú en los contenedores de nivel superior, mediante el método setJMenuBarsetJMenuBar. .


3434



3535


Cada contenedor de nivel superior mantiene un contenedor intermediario Cada contenedor de nivel superior mantiene un contenedor intermediario denominado root pane, que contiene a Content Pane y al Menu Bar.denominado root pane, que contiene a Content Pane y al Menu Bar.

Normalmente no es necesaria la gestión del root pane salvo que se quieran Normalmente no es necesaria la gestión del root pane salvo que se quieran interceptar clicks de ratón o dibujos sobre varios componentes.interceptar clicks de ratón o dibujos sobre varios componentes.


3636



3737


El Panel de CristalEl Panel de Cristal – Oculto, por defecto. Si se hace visible, es como si se pusiera una Oculto, por defecto. Si se hace visible, es como si se pusiera una

hoja de cristal sobre las otras partes del panel raiz. Es hoja de cristal sobre las otras partes del panel raiz. Es completamente transparente (a menos que hagamos que el completamente transparente (a menos que hagamos que el método método paintpaint haga algo) e intercepta los eventos de entrada haga algo) e intercepta los eventos de entrada para el panel raíz. para el panel raíz.

El panel de capasEl panel de capas – Sirve para posicionar sus contenidos, que consisten en el panel Sirve para posicionar sus contenidos, que consisten en el panel

de contenido y la barra de menú opcional. También puede de contenido y la barra de menú opcional. También puede contener otros componentes en un orden Z especificado. contener otros componentes en un orden Z especificado.

El Panel de ContenidoEl Panel de Contenido – El contenedor de los componentes visibles del panel raíz, El contenedor de los componentes visibles del panel raíz,

excluyendo la barra de menú. excluyendo la barra de menú. La barra de menú opcionalLa barra de menú opcional

– El hogar para los menús del panel de contenido. Si el El hogar para los menús del panel de contenido. Si el contenedor tiene una barra de menús, generalmente se utilizan contenedor tiene una barra de menús, generalmente se utilizan los métodos los métodos setMenuBarsetMenuBar o o setJMenuBarsetJMenuBar del contenedor para del contenedor para poner la barra de menú en el lugar apropiado. poner la barra de menú en el lugar apropiado.


3838

La clase JComponent La clase JComponent

Salvo los contenedores de nivel superior todos las Salvo los contenedores de nivel superior todos las demás componentes de interfaz descienden de la demás componentes de interfaz descienden de la clase JComponent.clase JComponent.

La clase JComponent, desciende de Container que a La clase JComponent, desciende de Container que a su vez desciende de Component.su vez desciende de Component.

Tiene muchas características:Tiene muchas características:– Tool tips (setToolTipText)Tool tips (setToolTipText)– BordesBordes– Doble BufferingDoble Buffering– Propiedades a la cartaPropiedades a la carta

Ver en la documentación algunos de sus métodosVer en la documentación algunos de sus métodos


3939

Componentes de textoComponentes de texto


4040

Componentes de textoComponentes de texto


4141

TextField TextField import java.awt.*;import java.awt.*;import java.awt.event.*;import java.awt.event.*;Import java.swing.*;Import java.swing.*;public class Camposdetexto extends JFrame {public class Camposdetexto extends JFrame {

TextField t;TextField t;public Camposdetexto() {public Camposdetexto() {

Container marco=getContentPane();Container marco=getContentPane();marco.setLayout(new FlowLayout());marco.setLayout(new FlowLayout());t= new JTextField("valor por defecto");t= new JTextField("valor por defecto");marco.add(t);marco.add(t);

Oyente oy=new Oyente();Oyente oy=new Oyente(); t.addActionListener( oy) }t.addActionListener( oy) } // se implementa como una clase interna// se implementa como una clase interna // El ActionEvent se produce cuando se inserta el salto de línea// El ActionEvent se produce cuando se inserta el salto de línea class Oyente implements ActionListener class Oyente implements ActionListener {{ public void actionPerformed(ActionEvent e) {public void actionPerformed(ActionEvent e) { … … ;}};}}


4242

JTextArea JTextArea public public classclass AreaTexto extends JFrame{ AreaTexto extends JFrame{

TextArea ta;TextArea ta;public AreaTexto() {public AreaTexto() {

Container marco=getContentPane();Container marco=getContentPane();marco.setLayout(new FlowLayout());marco.setLayout(new FlowLayout());ta = new JTextArea("tira \n char",3,10);ta = new JTextArea("tira \n char",3,10);marco.add(ta);marco.add(ta);

Oyente Oy=new Oyente();Oyente Oy=new Oyente(); ta.addTextListener(Oy);}ta.addTextListener(Oy);}

class Oyente implements TextListener{class Oyente implements TextListener{public void textValueChanged(TextEvent e)public void textValueChanged(TextEvent e) {escribe();} {escribe();}

public void escribe() {public void escribe() { …….}.}


4343

Menús Menús


4444

Menús Menús


4545

Menús Menús //Donde se cree el menu//Donde se cree el menuJMenuBar menuBar;JMenuBar menuBar;JMenu menu, submenu;JMenu menu, submenu;JMenuItem menuItem;JMenuItem menuItem;JRadioButtonMenuItem rbMenuItem;JRadioButtonMenuItem rbMenuItem;JCheckBoxMenuItem cbMenuItem;JCheckBoxMenuItem cbMenuItem;

//Creamos el menu bar.//Creamos el menu bar.menuBar = new JMenuBar();menuBar = new JMenuBar();

//Construimos el primer menu.//Construimos el primer menu.menu = new JMenu("A Menu");menu = new JMenu("A Menu");menu.setMnemonic(KeyEvent.VK_A);menu.setMnemonic(KeyEvent.VK_A);menuBar.add(menu);menuBar.add(menu);


4646

Menús Menús

//un grupo de JMenuItems//un grupo de JMenuItemsmenuItem = new JMenuItem("A text-only menu item",menuItem = new JMenuItem("A text-only menu item", KeyEvent.VK_T);KeyEvent.VK_T);menuItem.setAccelerator(KeyStroke.getKeyStroke(menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_1, ActionEvent.ALT_MASK));KeyEvent.VK_1, ActionEvent.ALT_MASK));menu.add(menuItem);menu.add(menuItem);

menuItem1 = new JMenuItem("Both text and icon",menuItem1 = new JMenuItem("Both text and icon", new ImageIcon("images/middle.gif"));new ImageIcon("images/middle.gif"));menuItem1.setMnemonic(KeyEvent.VK_B);menuItem1.setMnemonic(KeyEvent.VK_B);menu.add(menuItem1);menu.add(menuItem1);


4747

Menús Menús

//Un grupo de radio button menu items//Un grupo de radio button menu items

menu.addSeparator();menu.addSeparator();

ButtonGroup group = new ButtonGroup();ButtonGroup group = new ButtonGroup();

rbMenuItem = new rbMenuItem = new JRadioButtonMenuItem("A radio button JRadioButtonMenuItem("A radio button menu item");menu item");

rbMenuItem.setSelected(true);rbMenuItem.setSelected(true);

rbMenuItem.setMnemonic(KeyEvent.VK_R);rbMenuItem.setMnemonic(KeyEvent.VK_R);

group.add(rbMenuItem);group.add(rbMenuItem);

menu.add(rbMenuItem);menu.add(rbMenuItem);


4848

Menús Menús

//un check box menu items//un check box menu items

menu.addSeparator();menu.addSeparator();

cbMenuItem = new cbMenuItem = new JCheckBoxMenuItem("A check box JCheckBoxMenuItem("A check box menu item");menu item");

cbMenuItem.setMnemonic(KeyEvent.VKcbMenuItem.setMnemonic(KeyEvent.VK_C);_C);

menu.add(cbMenuItem);menu.add(cbMenuItem);


4949

Menús Menús //a submenu//a submenumenu.addSeparator();menu.addSeparator();submenu = new JMenu("A submenu");submenu = new JMenu("A submenu");submenu.setMnemonic(KeyEvent.VK_S);submenu.setMnemonic(KeyEvent.VK_S);

menuItem = new JMenuItem("An item in the submenu");menuItem = new JMenuItem("An item in the submenu");menuItem.setAccelerator(KeyStroke.getKeyStroke(menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_2, ActionEvent.ALT_MASK));KeyEvent.VK_2, ActionEvent.ALT_MASK));submenu.add(menuItem);submenu.add(menuItem);

menuItem = new JMenuItem("Another item");menuItem = new JMenuItem("Another item");submenu.add(menuItem);submenu.add(menuItem);menu.add(submenu);menu.add(submenu);


5050

Menús Menús

//Construyendo el segundo menu en el menu //Construyendo el segundo menu en el menu bar.bar.

menu = new JMenu("Another Menu");menu = new JMenu("Another Menu");menu.setMnemonic(KeyEvent.VK_N);menu.setMnemonic(KeyEvent.VK_N);menu.getAccessibleContext().setAccessibleDesmenu.getAccessibleContext().setAccessibleDes

cription(cription( "This menu does nothing");"This menu does nothing");menuBar.add(menu);menuBar.add(menu);

......frame.setJMenuBar(theJMenuBar);frame.setJMenuBar(theJMenuBar);


5151

Menú Popup Menú Popup

//Crear un popup menu.//Crear un popup menu.

popup = new JPopupMenu(); popup = new JPopupMenu(); menuItem = new JMenuItem("A popup menu item");menuItem = new JMenuItem("A popup menu item"); menuItem.addActionListener(this);menuItem.addActionListener(this); popup.add(menuItem);popup.add(menuItem); menuItem = new JMenuItem("Another popup menu menuItem = new JMenuItem("Another popup menu

item");item"); menuItem.addActionListener(this); menuItem.addActionListener(this); popup.add(menuItem); popup.add(menuItem);

//Añadir oyentes que puedan manejar popup menus. //Añadir oyentes que puedan manejar popup menus.

MouseListener popupoyente = new OyentePopup(); MouseListener popupoyente = new OyentePopup(); output.addMouseListener(popupoyente); output.addMouseListener(popupoyente);


5252

Menú Popup Menú Popup

class OyentePopup extends class OyentePopup extends MouseAdapter { public void MouseAdapter { public void mouseClicked(MouseEvent e) { mouseClicked(MouseEvent e) {

maybeShowPopup(e); } maybeShowPopup(e); } private void private void

maybeShowPopup(MouseEvent e) maybeShowPopup(MouseEvent e) { if (e.isPopupTrigger()) { if (e.isPopupTrigger()) { popup.show(e.getComponent(), { popup.show(e.getComponent(), e.getX(), e.getY()); } } } e.getX(), e.getY()); } } }


5353

DialogDialog La forma más sencilla de definir una caja de La forma más sencilla de definir una caja de

diálogo es mediante la clase diálogo es mediante la clase JOptionPaneJOptionPane . .

La clase La clase ProgressMonitorProgressMonitor muestra el progreso de muestra el progreso de una operación. una operación.

Las clases Las clases JColorChooserJColorChooser y y JFileChooserJFileChooser, son , son casos especiales orientados a la selección de casos especiales orientados a la selección de color y ficheros. color y ficheros.

Para usar una caja de diálogo para imprimir usar Para usar una caja de diálogo para imprimir usar PrintPrint API. API.

Para crear una caja de diálogo a la carta debemos Para crear una caja de diálogo a la carta debemos usar la clase usar la clase JDialogJDialog directamente. directamente.


5454

DialogDialog

Normalmente una caja de diálogo es Normalmente una caja de diálogo es dependiente de un marco. Cuando el marco dependiente de un marco. Cuando el marco es destruido el cuadro también. Si el marco es destruido el cuadro también. Si el marco se minimiza también lo hará el cuadro. se minimiza también lo hará el cuadro.

Un cuadro puede ser modal de forma que Un cuadro puede ser modal de forma que cuando es visible bloquea todas las cuando es visible bloquea todas las componentes de la interfaz. componentes de la interfaz.

La clase JDialog, tiene un root pane igual que La clase JDialog, tiene un root pane igual que la clase JFrame y su funcionamiento es la clase JFrame y su funcionamiento es similar. similar.


5555

JOptionPaneJOptionPane

Con esta clase se pueden crear Con esta clase se pueden crear diferentes tipos de cajas de diálogo. diferentes tipos de cajas de diálogo.

//título e icono por defecto //título e icono por defecto JOptionPane.showMessageDialog(fraJOptionPane.showMessageDialog(frame, "Eggs aren't supposed to be me, "Eggs aren't supposed to be green."); green.");


5656


//icono de advertencia //icono de advertencia JOptionPane.showMessageDialog(fraJOptionPane.showMessageDialog(frame, "Eggs aren't supposed to be me, "Eggs aren't supposed to be green.", "Inane warning", green.", "Inane warning", JOptionPane.WARNING_MESSAGE); JOptionPane.WARNING_MESSAGE);


5757


//Custom button text //Custom button text

Object[] options = {"Yes, please", "No, thanks", "No Object[] options = {"Yes, please", "No, thanks", "No eggs, no ham!"}; eggs, no ham!"};

int n = JOptionPane.showOptionDialog(frame, int n = JOptionPane.showOptionDialog(frame, "Would you like some green eggs to go " + "with "Would you like some green eggs to go " + "with that ham?", "A Silly Question", that ham?", "A Silly Question", JOptionPane.YES_NO_CANCEL_OPTION, JOptionPane.YES_NO_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE, null, options, JOptionPane.QUESTION_MESSAGE, null, options, options[2]); options[2]);


5858

Color chooserColor chooser

El ColorChooser es un control para El ColorChooser es un control para seleccionar colores: seleccionar colores:


5959

Color chooserColor chooserpublic class ColorChooserDemo extends JPanel ... public class ColorChooserDemo extends JPanel ...

{ public ColorChooserDemo() {{ public ColorChooserDemo() {

super(new BorderLayout());super(new BorderLayout());

banner = new JLabel("Welcome to the Tutorial Zone!", banner = new JLabel("Welcome to the Tutorial Zone!", JLabel.CENTER); JLabel.CENTER);

banner.setForeground(Color.yellow); . . .banner.setForeground(Color.yellow); . . .

tcc = new JColorChooser(banner.getForeground()); . .tcc = new JColorChooser(banner.getForeground()); . . . . add(tcc, BorderLayout.PAGE_END); } add(tcc, BorderLayout.PAGE_END); }


6060

Color chooserColor chooser Un JColorChooser utiliza una instancia de un Un JColorChooser utiliza una instancia de un

ColorSelectionModelColorSelectionModel que contiene y maneja la que contiene y maneja la selección actual del color. selección actual del color.

El modelo recoge un cambio de color cuando el El modelo recoge un cambio de color cuando el usuario cambia el color de JColorChooser. usuario cambia el color de JColorChooser.

Cuando se coloca un oyente de este tipo de Cuando se coloca un oyente de este tipo de eventos hay que tener cuidado ya que el oyente eventos hay que tener cuidado ya que el oyente se tiene que colocar sobre el modelo:se tiene que colocar sobre el modelo:

tcc.getSelectionModel().addChangeListener(this); tcc.getSelectionModel().addChangeListener(this); . . . . . . public void stateChanged(ChangeEvent e) { public void stateChanged(ChangeEvent e) { Color newColor = tcc.getColor(); Color newColor = tcc.getColor();

banner.setForeground(newColor); } banner.setForeground(newColor); }


6161

ModelosModelos

Como ocurre con el JColorChooser Como ocurre con el JColorChooser muchas componentes de swing tiene muchas componentes de swing tiene modelos que almacenan el estado de modelos que almacenan el estado de la componente. la componente.

Por ejemplo en un JButton se Por ejemplo en un JButton se almacena si esta seleccionado, almacena si esta seleccionado, activo, presionado o cuál es la tecla activo, presionado o cuál es la tecla que lo acciona.que lo acciona.


6262

Color chooserColor chooser

Para mostrar un JColorChooser en un Para mostrar un JColorChooser en un cuadro de diálogo tendremos que cuadro de diálogo tendremos que invocar el método showDialog, invocar el método showDialog, indicando el padre del Dialog, el indicando el padre del Dialog, el texto del cuadro y el color inicial que texto del cuadro y el color inicial que debe estar seleccionado. debe estar seleccionado.

Color newColor = Color newColor = JColorChooser.showDialog( ColorChooserDemo2.this, "Choose JColorChooser.showDialog( ColorChooserDemo2.this, "Choose Background Color", banner.getBackground()); Background Color", banner.getBackground());


6363

File ChooserFile Chooser

File choosers proporciona una componente File choosers proporciona una componente para acceder al sistema de ficheros de para acceder al sistema de ficheros de forma que se pueda seleccionar un fichero forma que se pueda seleccionar un fichero o directorio.o directorio.

Para visualizar un file chooser se usa la Para visualizar un file chooser se usa la clases JFileChooser API que muestra un clases JFileChooser API que muestra un diálogo modal que contiene el selector de diálogo modal que contiene el selector de ficheros. ficheros.

Una caja de diálogo modal es aquella que Una caja de diálogo modal es aquella que mientras esta activada anula el resto de la mientras esta activada anula el resto de la igu.igu.


6464



6565


Para crear un selector de fichero es Para crear un selector de fichero es similar al selector de color:similar al selector de color:

JFileChooser fc = new JFileChooser(); ...JFileChooser fc = new JFileChooser(); ...

//Como respuesta a un click de ratón//Como respuesta a un click de ratón

int returnVal = fc.showOpenDialog(int returnVal = fc.showOpenDialog(aComponentaComponent); );

El argumento aComponent especifica El argumento aComponent especifica el padre de la caja de diálogo.el padre de la caja de diálogo.


6666


public void actionPerformed(ActionEvent e) public void actionPerformed(ActionEvent e)

{ {

if (e.getSource() == openButton) if (e.getSource() == openButton)

{ int returnVal = { int returnVal = fc.showOpenDialog(FileChooserDemo.this); fc.showOpenDialog(FileChooserDemo.this);

if (returnVal if (returnVal =JFileChooser.APPROVE_OPTION)=JFileChooser.APPROVE_OPTION)

{ File file = fc.getSelectedFile(); { File file = fc.getSelectedFile();

} } ... } } } ... }


6767

ListaLista

Una lista presenta al usuario un grupo de Una lista presenta al usuario un grupo de items, visualizados en una o mas items, visualizados en una o mas columnas para seleccionar.columnas para seleccionar.

Dentro de Swing existen otras Dentro de Swing existen otras componentes orientadas al mismo fin componentes orientadas al mismo fin como son el Combo box, menús y los como son el Combo box, menús y los botones de radio.botones de radio.


6868

ListaLista

Inicializar una lista directamente con un Inicializar una lista directamente con un vector de Objects:vector de Objects:

// // Crear una lista con Crear una lista con

String[] data = {"one", "two", "three", "four"}; String[] data = {"one", "two", "three", "four"};

JList dataList = new JList(data); JList dataList = new JList(data);

Inicializar una lista a través de un Inicializar una lista a través de un ListModel, en particular se puede utilizar el ListModel, en particular se puede utilizar el DefaultListModel.DefaultListModel.


6969

ListaLista

Inicializar una lista a través de un ListModel, en Inicializar una lista a través de un ListModel, en particular se puede utilizar el DefaultListModel.particular se puede utilizar el DefaultListModel.

listModel = new DefaultListModel(); listModel = new DefaultListModel(); listModel.addElement(“primero"); listModel.addElement(“primero"); listModel.addElement(“segundo"); listModel.addElement(“segundo"); listModel.addElement(“tercero"); listModel.addElement(“tercero"); listModel.addElement(“cuarto"); listModel.addElement(“cuarto"); listModel.addElement(“quinto"); listModel.addElement(“quinto"); listModel.addElement(“sexto"); listModel.addElement(“sexto");

list = new JList(listModel); list = new JList(listModel);


7070

ListaLista

Para seleccionar un elemento de la lista:Para seleccionar un elemento de la lista:

String[] data = {"one", "two", "three", String[] data = {"one", "two", "three", "four"}; "four"};

JList dataList = new JList(data); JList dataList = new JList(data); dataList.setSelectedIndex(1); dataList.setSelectedIndex(1); dataList.getSelectedValue(); dataList.getSelectedValue();


7171

ListaLista

El evento que se genera cuando se realiza El evento que se genera cuando se realiza una selección del item es una selección del item es ListSelecctionEvent.ListSelecctionEvent.


1 TEMA 1. Diseño de interfaces gráficas 1.Introducción. Ejemplos. 2.Componentes de la interfaz...

Documents

Transcript of 1 TEMA 1. Diseño de interfaces gráficas 1.Introducción. Ejemplos. 2.Componentes de la interfaz...