Interfaces gráficas en Java GUIs Graphical User Interface

Transcripción

1 Diseño Y Aplicaciones de Sistemas Distribuidos Interfaces gráficas en Java GUIs Graphical User Interface Joan Vila DISCA / UPV Departament d Informàtica de Sistemes i Computadors Universitat Politècnica de València

2 Java - GUI Indice Componentes del AWT Componentes básicos Containers Layout managers Un ejemplo Utilización de Frames Manejo de eventos Proceso de dibujo en AWT 73

3 Java - GUI Componetes del AWT (Abstract Window Toolkit) Componentes básicos Button Checkbox Choice List Label MenuItem TextField TextArea Canvas Containers Frame Dialog FileDialog Layout Managers Border Card Flow Grid GridBagLayout 74

4 Java AWT: componentes 75

5 Java AWT: componentes básicos 76

6 Java AWT: componentes básicos Uso de Button b1 = new Button(); b1.disable(); Uso de Choice choice = new Choice(); choice.additem("ichi"); choice.additem("ni"); choice.additem("san"); choice.additem("yon"); int i = choice.getselectedindex() String S = choice.getselecteditem()); Uso de textfield y textarea // En la inicialización TextField textfield; TextArea textarea; textfield = new TextField(20); textarea = new TextArea(5, 20); textarea.seteditable(false);... // En los manejadores de eventos String text = textfield.gettext(); textarea.appendtext(text + "\n"); textfield.selectall(); 77

7 Java AWT: componentes básicos Uso de CheckBox Checkbox cb1, cb2, cb3; //These are independent checkboxes. Checkbox cb4, cb5, cb6; //These checkboxes are part of a group. CheckboxGroup cbg; cb1 = new Checkbox(); //Default state is "off" (false). cb1.setlabel("checkbox 1"); cb2 = new Checkbox("Checkbox 2"); cb3 = new Checkbox("Checkbox 3"); cb3.setstate(true); //Set state to "on" (true).... cbg = new CheckboxGroup(); cb4 = new Checkbox("Checkbox 4", cbg, false); //initial state: off (false) cb5 = new Checkbox("Checkbox 5", cbg, false); //initial state: off cb6 = new Checkbox("Checkbox 6", cbg, false); //initial state: off 78

8 Java AWT: containers Containers Frame: proporciona ventanas para aplicaciones. Dialog: Ventanas dependientes de frame que se iconizan cuando el correspondiente Frame se iconiza. Se utilizan para formular preguntas FileDialog: Dialog para seleccionar un fichero. No puede visualizarse en un applet. Panel: sirven para agrupar componentes básicos Applet es subclase de Panel 79

9 Java AWT: layout managers También es posible trabajar con posicionamiento absoluto 80

10 Un ejemplo 81

11 Utilización de Frames public class UnFrame extends Frame implements WindowListener { // Declarar layout GridBagLayout gridbaglayout1 = new GridBagLayout(); // Declarar componentes Button botonenviar = new Button(); Label label1 = new Label(); TextField textohost = new TextField(); public UnFrame() { // Inicializar componentes botonenviar.setlabel("send");... // Establecer un Layout this.setlayout(gridbaglayout1); // Añadir componentes al Frame this.add(botonenviar,...); this.add(label1,...); this.add(textohost,...); 82

12 Utilización de Frames public class UnFrame extends Frame implements WindowListener {... public static void main(string[] args) { // Declarar un objeto de tipo Frame y visualizarlo UnFrame UnFrame1 = new UnFrame(); UnFrame1.addWindowListener(echoFrame1); UnFrame1.show(); // Define window listeners. public void windowclosing( WindowEvent event ) {dispose(); System.exit(1); public void windowopened( WindowEvent event ) {... 83

13 Manejo de eventos Eventos La pulsación de un botón, retorno de carro en un campo de texto, etc..., produce eventos asíncronos a los que se les puede declarar funciones para manejarlos. Estas funciones están definidas en una serie de interfaces y clases del paquete java.awt.event 84

14 Manejo de eventos Eventos Un componente, como p.e. un Button puede generar dos tipos de eventos Bajo nivel: eventos no específicos del componente, como p.e., MouseEvent al ser visitado, abandonado o presionado por el ratón, etc... Alto nivel: evento con acciones específicas del componente como p.e., ActionEvent al ser presionado, que evita procesar eventos poco relevantes (semánticamente) como movimientos o clicks del ratón El evento ActionEvent se propaga a cada objeto que implemente la interfaz ActionListener y que se haya registrado para recibir dicho evento, utilizando para ello el método AButton.addActionListener(ActionListener l) del correspondiente componente. La interfaz ActionListener obliga a implementar un método actionperformed(actionevent e) que sirve para manejar el evento. 85

15 Manejo de eventos Eventos: un ejemplo La pulsación de un botón. Button boton1 = new Button(); boton1.addactionlistener(new java.awt.event.actionlistener() { public void actionperformed(actionevent e) { boton_manejador(e); ); 86

16 Un ejemplo de GUI Un applet de echo 87

17 Un ejemplo de GUI Diseño visual de GUIs con Eclipse 88

18 Un ejemplo de GUI Código generado por Eclipse public class EchoApplet extends JApplet { private JPanel jcontentpane = null; private JButton botonenviar = null; private JLabel jlabel = null; private JLabel jlabel1 = null; private JLabel jlabel2 = null; private JTextField textohost = null; private JTextField textoenviar = null; private JTextPane textorecibido = null; private JLabel barraestado = null; 89

19 Un ejemplo de GUI Código generado por Eclipse /** * This method initializes jbutton * javax.swing.jbutton */ private JButton getbotonenviar() { if (jbutton == null) { botonenviar = new JButton(); botonenviar.setbounds(new java.awt.rectangle(16,16,75,26)); botonenviar.setname("botonenviar"); botonenviar.settext("send"); botonenviar.addactionlistener( new java.awt.event.actionlistener() { public void actionperformed(java.awt.event.actionevent e) { Manejador evento ); return botonenviar; System.out.println("actionPerformed()"); // TODO Auto-generated Event stub actionperformed() 90

20 Un ejemplo de GUI Código generado por Eclipse private JTextField gettextohost() { private JTextField gettextoenviar() { private JTextPane gettextorecibido() { public static void main(string[] args) { // TODO Auto-generated method stub /** * This is the default constructor */ public EchoApplet() { super(); public void init() { this.setsize(400, 200); this.setcontentpane(getjcontentpane()); 91

21 Un ejemplo de GUI Código generado por Eclipse /** * This method initializes jcontentpane javax.swing.jpanel */ private JPanel getjcontentpane() { if (jcontentpane == null) { barraestado = new JLabel(); barraestado.setbounds(new java.awt.rectangle(3,166,389,30)); barraestado.setbackground(java.awt.color.darkgray); jlabel2 = new JLabel(); jlabel2.setbounds(new java.awt.rectangle(14,93,102,27)); jlabel2.settext(" String received:"); 92

22 Un ejemplo de GUI Código generado por Eclipse /** * This method initializes jcontentpane javax.swing.jpanel */ private JPanel getjcontentpane() { if (jcontentpane == null) { jcontentpane = new JPanel(); jcontentpane.setlayout(null); jcontentpane.setpreferredsize(new java.awt.dimension(1,1)); jcontentpane.add(getjbutton(), null); jcontentpane.add(jlabel, null); jcontentpane.add(jlabel1, null); jcontentpane.add(jlabel2, null); jcontentpane.add(gettextohost(), null); jcontentpane.add(gettextoenviar(), null); jcontentpane.add(gettextorecibido(), null); jcontentpane.add(barraestado, null); return jcontentpane; 93

23 Proceso de dibujo en AWT Cómo dibuja el AWT? Los programas dibujan sólo cuando el AWT se lo permite. La razón es hacerlo de manera ininterrumpida. El AWT realiza los dibujos desde un único thread. La secuencia es: repaint(): método invocado por un componente para planificar una orden de dibujo update(): método de un componente que el AWT invoca cuando le llega el turno de dibujar. Por defecto, lo que hace es: Limpiar el hueco del componente Invocar el método paint() del componente. El método paint() no hace nada por defecto. 94

24 Proceso de dibujo en AWT El objeto Graphics El único argumento de los métodos paint() y update() es un objeto Graphics que representa el contexto en el que un componente puede dibujarse. La clase Graphics proporciona métodos para: Dibujar y rellenar rectángulos, arcos, líneas, óvalos, polígonos, texto e imágenes. Obtener o fijar el color o fuente actual Fijar el modo de dibujo. Cómo dibujar? La manera más fácil de dibujar es poner código (sobrecargar) el método paint(): public public void void paint(graphics g) g) { Dimension d = size(); size(); g.drawrect(0,0, d.width d.width -- 1, 1, d.height -- 1); 1); 95

25 Realización de un componente gráfico public class RobotGrafico extends Component{ public RobotGrafico(...) { super(); this.setbackground(new Color(124, 178, 193)); this.setforeground(color.gray);... public Dimension getminimumsize(){ return new Dimension(...); public Dimension getpreferredsize(){... public void paint(graphics g) { g.setcolor(color.blue); g.filloval(...); g.drawline(...);... 96

26 Realización de un componente gráfico public class Consola extends JApplet implements Runnable, WindowListener{ BevelPanel pnlescenario = new BevelPanel(); rbtg= new RobotGrafico(...); public Consola() { jbinit();... private void jbinit() throws Exception {... pnlescenario.add(rbtg,...); pnlescenario.validate(); this.getcontentpane().add(pnlescenario,...);... public void run(){ pnlescenario.repaint(); try{thread.sleep(400); catch(exception e){