TEMA 1. Diseño de interfaces gráficas Introducción. Ejemplos. Componentes de la interfaz Programación dirigida por eventos Gestores de ubicación La librería Swing Primitivas gráficas de pantalla. Diseño de interfaces gráficas de usuario

Bibliografía http://java.sun.com/docs/books/tutorial/uiswing/ Kathy Walrath, et all. “The JFC Swing Tutorial”. Ed. Addison Wesley. 2004.

Práctica 1 1 . Introducción. Ejemplos El desarrollo de la aplicación se descompone en dos partes diferenciadas: Diseño de la interfaz gráfica Diseño de las clases para el funcionamiento de la calculadora, que supone la definición de un autómata de estados.

1 . Introducción. Ejemplos

Práctica 1 1 . Introducción. Ejemplos Definición de un marco, componente JFrame, que alberga todos las demás componentes. Se trata del contenedor principal de la aplicación. class GUICalculadora extends JFrame { public GUICalculadora() //obtenemos el contendor para colocar las componentes Container marco=getContentPane(); // Asignamos un gestor de ubicación de las componentes BorderLayout planificadorCalculadora = new BorderLayout(); marco.setLayout(planificadorCalculadora);

1 . Introducción. Ejemplos BorderLayout

1 . Introducción. Ejemplos Práctica 1 Guardamos en la clase Contexto el marco principal para poder acceder a el desde cualquier parte de la interfaz Contexto.marco=this;

1 . Introducción. Ejemplos Práctica 1 En la parte Norte colocaremos el campo de texto para visualizar los operadores y el botón CE para el borrado y comienzo de una nueva operación. Ambas componentes están agrupadas en una clase denominada GUIResultCE. GUIResultCE instResultCE = new GUIResultCE(Color.white, Color.red); marco.add(instResultCE,BorderLayout.NORTH); Contexto. barraVisor=instResultCE;

1 . Introducción. Ejemplos Práctica 1 En la parte Centro el juego de botones de los dígitos, todos ellos están agrupados en la clase GUIDigitos. GUIDigitos instGUIDigitos = new GUIDigitos(Color.orange); marco.add(instGUIDigitos,BorderLayout.CENTER); Contexto. barraDigitos=instGUIDigitos;

Práctica 1 1 . Introducción. Ejemplos En la parte Este colocamos el juego de operaciones GUIOperadores instGUIOperadores = new GUIOperadores(Color.magenta); marco.add(instGUIOperadores,BorderLayout.EAST); Contexto. barraOperadores=instGUIOperadores;

Práctica 1 1 . Introducción. Ejemplos Por último en el Sur colocamos la barra de estado GUIBarraEstado instGUIBarraEstado = new GUIBarraEstado(Color.grey); marco.add(instGUIBarraEstado,BorderLayout.SOUTH) Contexto. barraEstado=instGUIBarraEstado;

Práctica 1 1 . Introducción. Ejemplos Al final colocamos las propiedades del marco y creamos y guardamos el oyente de todos los botones en la clase Contexto. setSize(200,200); //Para centrar la ventana en la pantalla setLocationRelativeTo(null); setTitle("Calculadora1"); setResizable(false); setVisible(true); Contexto.oy=new Oyente();

Práctica 1 1 . Introducción. Ejemplos class GUIBarraEstado extends JPanel { JLabel etiquetaEstado = new JLabel(); public GUIBarraEstado(Color colorFondo) {etiquetaEstado = new JLabel(“Leyendo Operando1"); //indica alineación a la izquierda y número de espacios horizontales y verticales FlowLayout planificadorBarraEstado = new FlowLayout(FlowLayout.LEFT,10, 5); setLayout(planificadorBarraEstado); setBackground(colorFondo); add(etiquetaEstado); }//Fin del constructor GUIBarraEstado(Color,Color)

Panel 1 . Introducción. Ejemplos Un Panel es un contenedor de componentes que no tiene ningún elemento predefinido. El gestor de ubicación empleado es el FlowLayout que añade los componentes de izquierda a derecha y de arriba abajo.

Práctica 1 1 . Introducción. Ejemplos public void actualizaBarraEstado(String mensaje) {etiquetaEstado.setText(mensaje); }//Fin de actualizaMensaje

Práctica 1 1 . Introducción. Ejemplos public class GUIResultCE extends JPanel { JTextField visor = new JTextField("",10); JButton botonCE = new JButton("CE"); public GUIResultCE(Color colorFondo, Color colorBoton) {visor.setHorizontalAlignment(JTextField.RIGHT); // Color cuando el campo de texto es sólo de salida visor.setDisabledTextColor(Color.black); FlowLayout planificadorResultCE = new FlowLayout(FlowLayout.LEFT,10, 5); setLayout(planificadorResultCE);

Práctica 1 1 . Introducción. Ejemplos public class GUIResultCE extends JPanel { … visor.setBackground(colorFondo); visor.setEnabled(false); add(visor); botonCE.addMouseListener(Contexto.oy); botonCE.setForeground(colorBoton); add(botonCE); }//Fin del constructor GUIResultCE(Color,Color)

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

Práctica 1 1 . Introducción. Ejemplos public class GUIOperadores extends JPanel { private final int NUM_OPERADORES = 4; JButton [] botonOperador = new JButton[NUM_OPERADORES]; public GUIOperadores(Color colorBotones) {GridLayout PlanificadorOperadores = new GridLayout(NUM_OPERADORES,1); setLayout(PlanificadorOperadores); botonOperador[0] = new JButton("+"); botonOperador[1] = new JButton("-"); botonOperador[2] = new JButton("*"); botonOperador[3] = new JButton("/");

Práctica 1 1 . Introducción. Ejemplos public class GUIOperadores extends JPanel { … for(int i = 0; i < NUM_OPERADORES; i++) botonOperador[i].setBackground(colorBotones); add(botonOperador[i]); obotonOperador[i].addMouseListener(Contexto.oy); }}}

Práctica 1 1 . Introducción. Ejemplos public class GUIDigitos extends JPanel { private final int NUM_DIGITOS = 12; JButton [] botonDigito = new JButton[NUM_DIGITOS]; public GUIDigitos (Color colorBotones) {GridLayout PlanificadorBotones = new GridLayout(4,3); setLayout(PlanificadorBotones); for(int fila = 0; fila < 3; fila ++) for(int columna = 0; columna < 3; columna ++) botonDigito[fila*3+columna] = new JButton(String.valueOf(fila*3+columna)); botonDigito[9] = new JButton("9"); botonDigito[10] = new JButton("."); botonDigito[11] = new JButton("=");

Práctica 1 1 . Introducción. Ejemplos for(int i = 0; i < NUM_DIGITOS; i++) {botonDigito[i].setBackground(colorBotones); add(botonDigito[i]); botonDigito[i].addMouseListener(Contexto.oy); }}

Práctica 1 1 . Introducción. Ejemplos El gestor de ubicación GridLayout define una retícula de componentes, indicando el número de filas y columnas. Las componentes se colocan de izquierda a derecha y de arriba abajo.

Práctica 1 1 . Introducción. Ejemplos public class OyenteBoton extends MouseAdapter {public void mouseClicked(MouseEvent eventoEntrante) { JButton boton = (JButton)eventoEntrante.getSource(); char ch = boton.getText().charAt(0); Automata.CaracterIntroducido(ch); }//Fin de mouseClicked public void mouseExited(MouseEvent eventoEntrante){;} public void mouseReleased(MouseEvent eventoEntrante){;} public void mousePressed(MouseEvent eventoEntrante){;} public void mouseEntered(MouseEvent eventoEntrante){;} }//Fin de la clase ControlRaton

Práctica 1 1 . Introducción. Ejemplos class Contexto { public static GUIResultCE barraVisor = null; public static GUIBarraEstado barraEstado = null; //public static GUIDigitos botoneraDigitos = null; //public static GUIOperadores botoneraOperadores = null public static Oyente oy=null;

Práctica 1 1 . Introducción. Ejemplos import javax.swing.*; class Principal { public static void main(String args[]) { GUICalculadora calculadora = new GUICalculadora(); }//Fin de main }

1 . Introducción. Ejemplos

Componentes de la interfaz 2 . Componentes de interfaz Componentes de la interfaz Los controles de una interfaz poseen una representación gráfica, un conjunto de campos y un conjunto de métodos. Distinguimos entre dos tipos de controles, los contenedores y las componentes básicas que se ubican en los contenedores.

Índice visual de controles 2 . Componentes de interfaz Índice visual de controles

Índice visual de controles 2 . Componentes de interfaz Índice visual de controles

Índice visual de controles 2 . Componentes de interfaz Índice visual de controles

HTML en componentes 2 . Componentes de interfaz Muchas componentes que usan texto como parte de su visualización, pueden determinar su apariencia a través de etiquetas Html de formateo. Ejemplo: Label=new Jlabel(“<html><b>hola</b></html>”);

Contenedores de nivel superior 2 . Componentes de interfaz Contenedores de nivel superior Swing proporciona tres clases de contenedores de nivel superior: JFrame, JDialog y JApplet. Cualquier control de interfaz forma parte de una jerarquía de contenedores. 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 getContentPane. Se pueden añadir barras de menú en los contenedores de nivel superior, mediante el método setJMenuBar.

Contenedores de nivel superior 2 . Componentes de interfaz Contenedores de nivel superior

Contenedores de nivel superior 2 . Componentes de interfaz Contenedores de nivel superior Cada contenedor de nivel superior mantiene un contenedor intermediario 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 interceptar clicks de ratón o dibujos sobre varios componentes.

Contenedores de nivel superior 2 . Componentes de interfaz Contenedores de nivel superior

Contenedores de nivel superior 2 . Componentes de interfaz Contenedores de nivel superior El Panel de Cristal Oculto, por defecto. Si se hace visible, es como si se pusiera una hoja de cristal sobre las otras partes del panel raiz. Es completamente transparente (a menos que hagamos que el método paint haga algo) e intercepta los eventos de entrada para el panel raíz. El panel de capas Sirve para posicionar sus contenidos, que consisten en el panel de contenido y la barra de menú opcional. También puede contener otros componentes en un orden Z especificado. El Panel de Contenido El contenedor de los componentes visibles del panel raíz, excluyendo la barra de menú. La barra de menú opcional El hogar para los menús del panel de contenido. Si el contenedor tiene una barra de menús, generalmente se utilizan los métodos setMenuBar o setJMenuBar del contenedor para poner la barra de menú en el lugar apropiado.

La clase JComponent 2 . Componentes de interfaz Salvo los contenedores de nivel superior todos las demás componentes de interfaz descienden de la clase JComponent. La clase JComponent, desciende de Container que a su vez desciende de Component. Tiene muchas características: Tool tips (setToolTipText) Bordes Doble Buffering Propiedades a la carta Ver en la documentación algunos de sus métodos

2 . Componentes de interfaz Componentes de texto

2 . Componentes de interfaz Componentes de texto

TextField 2 . Componentes de interfaz import java.awt.*; import java.awt.event.*; Import java.swing.*; public class Camposdetexto extends JFrame { TextField t; public Camposdetexto() { Container marco=getContentPane(); marco.setLayout(new FlowLayout()); t= new JTextField("valor por defecto"); marco.add(t); Oyente oy=new Oyente(); t.addActionListener( oy) } // se implementa como una clase interna // El ActionEvent se produce cuando se inserta el salto de línea class Oyente implements ActionListener { public void actionPerformed(ActionEvent e) { … ;}}

JTextArea 2 . Componentes de interfaz public class AreaTexto extends JFrame{ TextArea ta; public AreaTexto() { Container marco=getContentPane(); marco.setLayout(new FlowLayout()); ta = new JTextArea("tira \n char",3,10); marco.add(ta); Oyente Oy=new Oyente(); ta.addTextListener(Oy);} class Oyente implements TextListener{ public void textValueChanged(TextEvent e) {escribe();} public void escribe() { ….}

2 . Componentes de interfaz Menús

2 . Componentes de interfaz Menús

Menús 2 . Componentes de interfaz //Donde se cree el menu JMenuBar menuBar; JMenu menu, submenu; JMenuItem menuItem; JRadioButtonMenuItem rbMenuItem; JCheckBoxMenuItem cbMenuItem; //Creamos el menu bar. menuBar = new JMenuBar(); //Construimos el primer menu. menu = new JMenu("A Menu"); menu.setMnemonic(KeyEvent.VK_A); menuBar.add(menu);

Menús 2 . Componentes de interfaz //un grupo de JMenuItems menuItem = new JMenuItem("A text-only menu item", KeyEvent.VK_T); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_1, ActionEvent.ALT_MASK)); menu.add(menuItem); menuItem1 = new JMenuItem("Both text and icon", new ImageIcon("images/middle.gif")); menuItem1.setMnemonic(KeyEvent.VK_B); menu.add(menuItem1);

Menús 2 . Componentes de interfaz //Un grupo de radio button menu items menu.addSeparator(); ButtonGroup group = new ButtonGroup(); rbMenuItem = new JRadioButtonMenuItem("A radio button menu item"); rbMenuItem.setSelected(true); rbMenuItem.setMnemonic(KeyEvent.VK_R); group.add(rbMenuItem); menu.add(rbMenuItem);

Menús //un check box menu items menu.addSeparator(); 2 . Componentes de interfaz Menús //un check box menu items menu.addSeparator(); cbMenuItem = new JCheckBoxMenuItem("A check box menu item"); cbMenuItem.setMnemonic(KeyEvent.VK_C); menu.add(cbMenuItem);

Menús 2 . Componentes de interfaz //a submenu menu.addSeparator(); submenu = new JMenu("A submenu"); submenu.setMnemonic(KeyEvent.VK_S); menuItem = new JMenuItem("An item in the submenu"); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_2, ActionEvent.ALT_MASK)); submenu.add(menuItem); menuItem = new JMenuItem("Another item"); menu.add(submenu);

Menús 2 . Componentes de interfaz //Construyendo el segundo menu en el menu bar. menu = new JMenu("Another Menu"); menu.setMnemonic(KeyEvent.VK_N); menu.getAccessibleContext().setAccessibleDescription( "This menu does nothing"); menuBar.add(menu); ... frame.setJMenuBar(theJMenuBar);

Menú Popup 2 . Componentes de interfaz //Crear un popup menu. popup = new JPopupMenu(); menuItem = new JMenuItem("A popup menu item"); menuItem.addActionListener(this); popup.add(menuItem); menuItem = new JMenuItem("Another popup menu item"); //Añadir oyentes que puedan manejar popup menus. MouseListener popupoyente = new OyentePopup(); output.addMouseListener(popupoyente);

2 . Componentes de interfaz Menú Popup class OyentePopup extends MouseAdapter { public void mouseClicked(MouseEvent e) { maybeShowPopup(e); } private void maybeShowPopup(MouseEvent e) { if (e.isPopupTrigger()) { popup.show(e.getComponent(), e.getX(), e.getY()); } } }

Dialog 2 . Componentes de interfaz La forma más sencilla de definir una caja de diálogo es mediante la clase JOptionPane . La clase ProgressMonitor muestra el progreso de una operación. Las clases JColorChooser y JFileChooser, son casos especiales orientados a la selección de color y ficheros. Para usar una caja de diálogo para imprimir usar Print API. Para crear una caja de diálogo a la carta debemos usar la clase JDialog directamente.

Dialog 2 . Componentes de interfaz Normalmente una caja de diálogo es dependiente de un marco. Cuando el marco es destruido el cuadro también. Si el marco se minimiza también lo hará el cuadro. Un cuadro puede ser modal de forma que cuando es visible bloquea todas las componentes de la interfaz. La clase JDialog, tiene un root pane igual que la clase JFrame y su funcionamiento es similar.

2 . Componentes de interfaz JOptionPane Con esta clase se pueden crear diferentes tipos de cajas de diálogo. //título e icono por defecto JOptionPane.showMessageDialog(frame, "Eggs aren't supposed to be green.");

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

JOptionPane 2 . Componentes de interfaz //Custom button text Object[] options = {"Yes, please", "No, thanks", "No eggs, no ham!"}; int n = JOptionPane.showOptionDialog(frame, "Would you like some green eggs to go " + "with that ham?", "A Silly Question", JOptionPane.YES_NO_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE, null, options, options[2]);

Color chooser El ColorChooser es un control para seleccionar colores: 2 . Componentes de interfaz Color chooser El ColorChooser es un control para seleccionar colores:

Color chooser 2 . Componentes de interfaz public class ColorChooserDemo extends JPanel ... { public ColorChooserDemo() { super(new BorderLayout()); banner = new JLabel("Welcome to the Tutorial Zone!", JLabel.CENTER); banner.setForeground(Color.yellow); . . . tcc = new JColorChooser(banner.getForeground()); . . . add(tcc, BorderLayout.PAGE_END); }

Color chooser 2 . Componentes de interfaz Un JColorChooser utiliza una instancia de un ColorSelectionModel que contiene y maneja la selección actual del color. El modelo recoge un cambio de color cuando el usuario cambia el color de JColorChooser. Cuando se coloca un oyente de este tipo de eventos hay que tener cuidado ya que el oyente se tiene que colocar sobre el modelo: tcc.getSelectionModel().addChangeListener(this); . . . public void stateChanged(ChangeEvent e) { Color newColor = tcc.getColor(); banner.setForeground(newColor); }

2 . Componentes de interfaz Modelos Como ocurre con el JColorChooser muchas componentes de swing tiene modelos que almacenan el estado de la componente. Por ejemplo en un JButton se almacena si esta seleccionado, activo, presionado o cuál es la tecla que lo acciona.

2 . Componentes de interfaz Color chooser Para mostrar un JColorChooser en un cuadro de diálogo tendremos que invocar el método showDialog, indicando el padre del Dialog, el texto del cuadro y el color inicial que debe estar seleccionado. Color newColor = JColorChooser.showDialog( ColorChooserDemo2.this, "Choose Background Color", banner.getBackground());

File Chooser 2 . Componentes de interfaz File choosers proporciona una componente para acceder al sistema de ficheros de forma que se pueda seleccionar un fichero o directorio. Para visualizar un file chooser se usa la clases JFileChooser API que muestra un diálogo modal que contiene el selector de ficheros. Una caja de diálogo modal es aquella que mientras esta activada anula el resto de la igu.

2 . Componentes de interfaz File Chooser

2 . Componentes de interfaz File Chooser Para crear un selector de fichero es similar al selector de color: JFileChooser fc = new JFileChooser(); ... //Como respuesta a un click de ratón int returnVal = fc.showOpenDialog(aComponent); El argumento aComponent especifica el padre de la caja de diálogo.

File Chooser 2 . Componentes de interfaz public void actionPerformed(ActionEvent e) { if (e.getSource() == openButton) { int returnVal = fc.showOpenDialog(FileChooserDemo.this); if (returnVal =JFileChooser.APPROVE_OPTION) { File file = fc.getSelectedFile(); } } ... }

Lista 2 . Componentes de interfaz Una lista presenta al usuario un grupo de items, visualizados en una o mas columnas para seleccionar. Dentro de Swing existen otras componentes orientadas al mismo fin como son el Combo box, menús y los botones de radio.

Lista // Crear una lista con 2 . Componentes de interfaz Inicializar una lista directamente con un vector de Objects: // Crear una lista con String[] data = {"one", "two", "three", "four"}; JList dataList = new JList(data); Inicializar una lista a través de un ListModel, en particular se puede utilizar el DefaultListModel.

Lista 2 . Componentes de interfaz Inicializar una lista a través de un ListModel, en particular se puede utilizar el DefaultListModel. listModel = new DefaultListModel(); listModel.addElement(“primero"); listModel.addElement(“segundo"); listModel.addElement(“tercero"); listModel.addElement(“cuarto"); listModel.addElement(“quinto"); listModel.addElement(“sexto"); list = new JList(listModel);

Lista String[] data = {"one", "two", "three", "four"}; 2 . Componentes de interfaz Lista Para seleccionar un elemento de la lista: String[] data = {"one", "two", "three", "four"}; JList dataList = new JList(data); dataList.setSelectedIndex(1); dataList.getSelectedValue();

Lista 2 . Componentes de interfaz El evento que se genera cuando se realiza una selección del item es ListSelecctionEvent.