1. Jose Alberto Bentez Andradesjose@indipro.eswww.indipro.es@indiproweb@jabenitez88Jose Alberto Bentez Andrades jose@indipro.es -@jabenitez881Desarrollo de interfaces:1.Interfaces de Usuario (Componentes,Eventos, Escuchadores )

2. MVC (Modelo Vista Controlador) ( separa losdatos de una aplicacin, la interfaz de usuario yla lgica de control en tres capas distintas). el modelo (que contiene la gestin de los datos yla lgica de negocios), la vista (se ocupa de laaparicin de los componentes de la interfaz deusuario en pantalla) y el controlador (quegestiona los eventos de entrada generados en lavista).Jose Alberto Bentez jose@indipro.es -2 @indiproweb 3. Swing3Las interfaces grficas de usuario (GUI) ofrecen al usuarioventanas, cuadros de dilogo, barras de herramientas, botones,listas desplegables y muchos otros elementos con los que yaestamos muy acostumbrados a tratar.Las aplicaciones son conducidas por eventos y se desarrollanhaciendo uso de las clases que para ello nos ofrece la API de Java.La interfaz de usuario es la parte del programa que permite alusuario interaccionar con l.La API de Java proporciona una biblioteca de clases para eldesarrollo de Interfaces grficas de usuario (en realidad son dos). 4. Swing4La biblioteca proporciona un conjunto de herramientas parala construccin de interfaces grficas que tienen unaapariencia y se comportan de forma semejante en todas lasplataformas en las que se ejecuten.La estructura bsica de la biblioteca gira en torno acomponentesy contenedores. Los contenedores contienencomponentes yson componentes a su vez, de forma que loseventos pueden tratarse tanto en contenedores como encomponentes.La API est constituida por clases, interfaces yderivaciones.AWT y Swing 5. Componentes Swing5 6. Jerarqua de clases para las GUI6Component: superclase de todas las clases de interfaz grfica.Container: para agrupar componentes.JComponent: superclase de todos los componentes de Swing quese dibujan directamente en los lienzos (canvas).Sus subclases son los elementos bsicos de la GUI.JFrame: ventana que no est contenida en otras ventanas.JDialog: cuadro de dilogo.JApplet: subclase de Applet para crear applets tipo Swing.JPanel: contenedor invisible que mantiene componentes deinterfaz y que se puede anidar, colocndose en otros paneles o enventanas. Tambin sirve de lienzo.Graphics: clase abstracta que proporciona contextos grficosdonde dibujar cadenas de texto, lneas y otras formas sencillas. 7. Jerarqua de clases para las GUIJose Alberto Bentez Andrades jose@indipro.es -@jabenitez887Color: color de los componentes grficos.Font: aspecto de los caracteres.FontMetrics: clase abstracta para propiedades de lasfuentes.Categoras de clases: Contenedores: JFrame, JApplet, JWindow, JDialog Componentes intermedios: JPanel, JScrollPane Componentes: JLabel, JBbutton, JTextField, JTextArea, ... Clases de soporte: Graphics, Color, Font, ... 8. Jerarqua de clases para las GUI: JComponentJose Alberto Bentez Andrades jose@indipro.es -@jabenitez888 9. Jerarqua de clases para las GUI: JComponentJose Alberto Bentez Andrades jose@indipro.es -@jabenitez889 10. Jerarqua de componentesJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8810Graphics (java.awt)Component (funcionalidad bsica de componentes grficos)Button, Canvas, CheckBox, Choice, Label, List, ScrollBarTextComponentTextField, TextAreaContainer (permite agrupar, aadir y eliminar componentes)(tambin definir diseo o disposicin (layout managers))ScrollPanePanelApplet (java.applet)JApplet (javax.swing)WindowFrameJFrame (javax.swing)DialogFileDialogJDialog (javax.swing)JWindow (javax.swing)JComponent (javax.swing) 11. ContenedoresJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8811Contenedores de alto nivel:JFrameHabitualmente la clase JFrame se emplea para crearla ventana principal de una aplicacin en Swing.JDialogVentanas de interaccin con el usuario.Contenedores intermedios:JPanelAgrupa a otros componentes.JScrollPanelIncluye barras de desplazamiento. 12. ContenedoresJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8812 13. JerarquaJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8813Contenedoralto-nivelJFrameContentPaneJLabelMenu Bar 14. JerarquaJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8814 15. Jerarqua15 16. 16 17. 2. Con herencia de JFrame sin Container17 18. 3. Ejemplo sin herencia con ContainerJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8818 19. 4. Ejemplo sin herencia sin ContainerJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8819 20. Administradores de disposicinJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8820Los componentes se agregan al contenedor con el mtodo add().JButton unBoton = new JButton("Texto del botn");panel.add(unBoton);El efecto de add() depende del esquema de colocacin o disposicin (layout) del contenedor que se use.Existen diversos esquemas de disposicin: FlowLayout, BorderLayout, GridLayout, ...Los objetos contenedores se apoyan en objetos LayoutManager (administradores de disposicin).Clases ms usadas que implementa la interfaz LayoutManager:FlowLayout: un componente tras otro de izquierda a derecha.BorderLayout: 5 regiones en el contenedor (North, South, ...).GridLayout: contenedor en filas y columnas. 21. Administradores de disposicinJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8821Para organizar el contenedor se utiliza el mtodo setLayout():public void setLayout(LayoutManager mgr)setLayout(new BorderLayout());setLayout(new FlowLayout());setLayout(new GridLayout(3,4));El layout manager elige la mejor posicin y tamao de cada componentede acuerdo al espacio disponible. 22. Administradores de disposicinJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8822BorderLayout organiza elcontenedor en 5 zonas:FlowLayout coloca los componentes deizquierda a derecha y de arriba haciaabajo:Para distribuciones ms complejas podemos insertar paneles(JPanel) en los contenedores y obtener el tamao de uncomponente con el mtodo getSize(). 23. FlowLayoutJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8823 24. BorderLayoutJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8824 25. GridLayoutJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8825setLayout(new GridLayout(filas, columnas))Crea una zona de filas x columnas componentes y stos se van acomodando de izquierda a derecha y dearriba a abajo.GridLayout tiene otro constructor que permite establecer la separacin (en pixels) ente loscomponentes, que es cero con el primer constructor.As, por ejemplo:new GridLayout(3, 4, 2, 2)crea una organizacin de 3 filas y 4 columnas donde los componentes quedan a dos pixels deseparacin.Ejemplo:setLayout(new GridLayout(3, 4, 2, 2);for(int i = 0; i < 3 * 4; i++) {add(new JButton(Integer.toString(i + 1)));} 26. GridLayoutJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8826 27. Paneles como contenedoresJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8827Los paneles actan como pequeos contenedores paraagrupar componentes. Colocamos los componentes enpaneles y los paneles en el frame o incluso en otrospaneles. 28. Paneles como contenedoresJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8828 29. Paneles como contenedoresJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8829 30. Dibujo de grficos en panelesJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8830JPanel se puede usar para dibujar.Para dibujar en un panel se crea una clase derivada de Jpanel y seredefine el mtodo paintComponent() que le indica al panel comodibujar.La clase Graphics es una clase abstracta para todos los contextos grficos.Una vez obtenido el contexto grfico podemos llamar desde esteobjeto a las funciones grficas definidas en la clase Graphics.Graphics contiene informacin acerca de la zona que necesita serredibujada: el objeto donde dibujar, un origen de traslacin, el coloractual, la fuente actual, etctera. 31. Ejemplo de dibujoJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8831 32. Ejemplo de dibujoJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8832Cuando utilizamos el mtodo paintComponent() para dibujar en uncontexto grfico g, ese contexto es un ejemplar de una subclase concretade la clase Graphics para la plataforma especfica.El mtodo paintComponent() es llamado la primera vez y cada vez que esnecesario redibujar el componente.Al hacer super.paintComponent(g) nos aseguramos de que el reavisualizada se limpia antes de volver a dibujar. 33. Ejemplo de dibujoJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8833 Creacin de un color RGB 34. Algunos mtodos de GraphicsJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8834 35. Interaccin con el usuarioJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8835Al interactuar con la aplicacin, el usuario: Acciona componentes (ActionEvent). El usuario pulsa un botn. El usuario termina de introducir un texto en un campo ypresiona Intro. El usuario selecciona un elemento de una lista pulsando elpreferido (o de un men). Pulsa o suelta botones del ratn (MouseEvent). Minimiza, cierra o manipula una ventana (WindowEvent). Escribe con el teclado (KeyEvent). Descubre porciones de ventanas (PaintEvent) 36. Interaccin con el usuarioJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8836Cuando el usuario de un programa o applet mueve el ratn,presiona un pulsador o pulsa una tecla, genera un evento(actionEvent).Los eventos son objetos de ciertas clases. Normalmente unobjeto de alguna subclase de EventObject que indica: El elemento que accion el usuario. La identificacin del evento que indica la naturaleza delevento. La posicin del ratn en el momento de la interaccin. Teclas adicionales pulsadas por el usuario, como la tecla Control, la tecla de Cambio a maysculas, etctera. 37. Acciones del usuarioJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8837 38. Modelo para responder a eventosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8838Creamos un manejador de eventos en dos pasos: Definimos una clase especfica que haga de oyente deeventos y que implemente el mtodoactionPerformed(). Registramos un ejemplar como oyente decomponentes: 39. Modelo para responder a eventosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8839Se aade el oyente especificado (ejemplar de MiOyente) a lalista de oyentes para recibir eventos de accin (ActionEvent)desde ese componente. 40. Ejemplo: botn con pitidoJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8840 41. Ejemplo: reproducir un valorJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8841 42. Ejemplo: reproducir un valorJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8842 43. Ejemplo: contador de pulsacionesJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8843 44. Ejemplo: cambio de colorJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8844 45. Ejemplo: cambio de colorJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8845 46. ActionEventJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8846El objeto ActionEvent ofrece un mtodogetActionCommand() que devuelve un objeto con lainformacin sobre el origen del evento (el botn ennuestro caso).Con un botn, devuelve la etiqueta del botn.Para identificar botones individuales: 47. ActionEventJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8847El mtodo getSource() indica el objeto en el que se haoriginado el evento: 48. Un conversor Euros-PesetasJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8848 49. Un conversor Euros-PesetasJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8849La clase OyenteBoton esinterna y tiene acceso alos elementos de laclase Contenedora 50. Interfaces para procesar eventosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8850Para facilitar la tarea del programador se han creado una serie deinterfaces que deben implementarse cuando se quieren procesar algunosde estos eventos. Algunas interfaces y sus mtodos son: 51. Interfaces para procesar eventosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8851 JButton: Botn aislado. Puede pulsarse, pero su estado no cambia JToggleButton : Botn seleccionable. Cuando se pulsa el botn, suestado pasa a seleccionado, hasta que se pulsa de nuevo (entonces sedeselecciona) isSelected() permite chequear su estado JCheckBox : Especializacin de JToggleButton que implementa unacasilla de verificacin. Botn con estado interno, que cambia deapariencia de forma adecuada segn si est o no est seleccionado JRadioButton: Especializacin de JToggleButton que tiene sentidodentro de un mismo grupo de botones (ButtonGroup) que controlaque slamente uno de ellos est seleccionado 52. Componentes : JButtonJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8852 Constructores:JButton(String text)JButton(String text, Icon icon)JButton(Icon icon) Respuesta a botones: Implementar la interfaz ActionListener Implementar el mtodo actionPerformed(ActionEvent e) 53. EjemplosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8853boton1 = new JButton("A Euros ");boton1.setIcon(new ImageIcon("flag1.gif"));boton2 = new JButton(new ImageIcon("flag2.gif"));boton3 = new JButton("Botn",newImageIcon("flag8.gif")); 54. Componentes : JLabelJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8854Para texto, una imagen o ambos:JLabel(String text,int horizontalAlignment)JLabel(String text)JLabel(Icon icon)JLabel(Icon icon,int horizontalAlignment)eti1 = new JLabel("Etiqueta de texto...");eti2 = new JLabel(new ImageIcon("flag8.gif")); 55. Componentes : JTextFieldJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8855Campos de texto para introducir caracteres:JTextField(int columns)JTextField(String text)JTextField(String text, int columns)JTextField text1 = new JTextField("hola", 10);Poner texto: text1.setText("Adios");Obtener texto: String str = text1.getText();Agregar al Panel: p1.add(text1); 56. Componentes : JComboBoxJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8856Listas de elementos para seleccionar un solo valor:Creacin: JComboBox ch1 = new JComboBox();Agregar opciones: ch1.addItem(Object elemento);Registrar Evento: ch1.addItemListener( objeto);Obtener seleccin: val = ch1.getSelectedIndex();ch1.getItem()Implementar la interfaz ItemListenerImplementar el mtodo itemStateChanged(ItemEvent e)ch1.addItemListener(new OyenteItem());. . .class OyenteItem implements ItemListener {public void itemStateChanged(ItemEvent e) {...}} 57. Componentes : JListJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8857Listas de elementos para seleccionar uno o varios valores:JList l1 = new JList();JList l2 = new JList(Object[] elements);String[] cosas = {"Opcin 1", "Opcin 2", "Opcin 3"};Jlist l2 = new Jlist(cosas);Registrar evento: l2.addListSelectionListener(oyente);Obtener seleccin:int[] indices = l2.getSelectedIndices(); 58. Componentes : JListJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8858Implementar la interfaz ListSelectionListennerImplementar el mtodo valueChanged(ListSelectionEvent e)l.addListSelectionListener(new OyenteLista());...class OyenteLista implements ListSelectionListener {public void valueChanged(ListSelectionEvent e) {int[] indices = l.getSelectedIndices();int i;for(i = 0; i < indices.length; i++) {...}}} 59. Componentes : JScrollBarJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8859Creacin:bar1 = new Scrollbar(Scrollbar.HORIZONTAL,0,0,0,100);Registrar evento:bar1.addAdjustmentListener(oyente);Implementar la interfaz AdjustmentListenerImplementar el mtodoadjustmentValueChanged(AdjustmentEvent e)bar1.addAdjustmentListener(new OyenteBarra());...class OyenteBarra implements AdjustmentListener {public void adjustmentValueChanged(AdjustmentEvent e) {... }}Obtener valor:int val = bar1.getValue(); // val entre 0 y 100 60. Componentes: JScrollBar y JComboBoxJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8860 61. Componentes: JScrollBar y JComboBoxJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8861 62. Componentes: JScrollBar y JComboBoxJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8862 63. Movimientos de ratnJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8863 64. Pulsaciones de ratnJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8864 65. Ejemplo de cuadro de mensajeJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8865 66. Ejemplo de cuadro de opcionesJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8866 67. Ejemplo de cuadro de entrada de datosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8867 68. Ejemplo de cuadro de entrada de datosJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8868 69. MensJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8869Java ofrece varias clases para poner mens en una ventana:JMenuBarJMenuJMenuItemJCheckBoxMenuItemJRadioButtonMenuItemUn JFrame o JApplet puede guardar un barra de men donde se cuelgan mensdesplegables.Los mens tienen elementos de men que puede seleccionar el usuario.Las barras de mens se pueden contemplar como una estructura que soportamens. 70. MensJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8870Una ventana (frame) slo puede tener una barra demens (objeto MenuBar), que se sita en la parte dearriba del mismo.Los submens son botones JMenu.Los elementos de los mens son botones JMenuItem.Cuando se activa un men se desplieganautomticamente las opciones del men. 71. MensJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8871 72. Ejemplo de menJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8872 73. Ejemplo de menJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8873 74. Ejemplo de menJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8874 75. Otro ejemploJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8875Aplicacin que permite realizar operaciones aritmticas.La interfaz contiene etiquetas y campos de texto paralos operandos y el resultado. La operacin se seleccionaen el men: 76. Otro ejemploJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8876 77. Otro ejemploJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8877 78. Otro ejemploJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8878 79. Otro ejemploJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8879 80. Clases adaptadorasJose Alberto Bentez Andrades jose@indipro.es -@jabenitez8880 Poco eficiente, slo implementamos un mtodo ! 81. Clases adaptadoras81 82. Clases adaptadoras82 Si por ejemplo una de nuestras clases implementa la interfazWindowListener, deber implementar todos los mtodos sociados,an cuando slo utilicemos uno de ellos. Las clases adaptadoras se encargan de implementar todos los mtodosdel la clase de escucha. As slo necesitaremos redefinir aquellosmtodos que nos van a ser tiles para gestionar eventos , sinpreocuparnos del resto. Para ello dedemos indicar que nuestra clase es una subclase deladaptador:class UnaClase extends Adaptador{ ... } 83. Clases adaptadoras83class MiAdaptador extends WindowAdapter {public void windowClosing(windowEvent e) {System.exit(0);}}. . .this.addWindowListener(new MiAdaptador());. . . 84. Clases adaptadoras84Slo las clases que poseen ms de un mtodo tienen adaptador , y sonlas siguientes:ComponentListener posee ComponentAdapterContainerListener posee ContainerAdapterFocusListener posee FocusAdapterKeyListener posee KeyAdapterMouseListener posee MouseAdapterMouseMotionListener posee MouseMotionAdapterWindowListener posee WindowAdapter 85. Ejemplo85 86. Arquitectura MVC (Modelo-Vista-Controlador)86La arquitectura MVC es una arquitectura tpica de diseo de GUI. El modelo representa la estructura lgica de la GUI,independientemente de su representacin visual. La vista constituye la representacin visual de la GUI. El controlador constituye la lgica de interaccin con el usuario.El mejor modelo separa en las tres partes:public static void main(String args[]) {Modelo modelo = new Modelo();Controlador controlador = new Controlador(modelo);GUI gui = new GUI(controlador); } 87. Applet mnimo con Swing (JApplet)87 88. Esquema de applet con swing88 89. Ejemplo89