Interfaz Gráfico de Usuario

1. Interfaz Gráfico de Usuario David Gil Sánchez David Gil

2. Elementos de un GUI • Clases derivadas de la clase Component • Componentes pueden ser agrupados en contenedores • Layout manager coloca los componentes en un contenedor basandose en un determinado criterio • Determinados componentes producen eventos al manipularlos. (Programación orientada a Eventos) David Gil

3. Jerarquía GUI David Gil

4. Label TextField TextArea List PushButton ChoiceButton CheckBoxButton RadioButton Scroll Bar Scroll Panel PullDownMenu PopUpMenu Canvas Componentes GUI David Gil

5. Mimic Example import java.awt.*; import java.applet.*; import java.awt.event.*; public class Mimic extends Applet { Mimic_GUI gui = new Mimic_GUI (this); public void init() { gui.init(); }//method init public void update_label() { System.out.println ("Action"); gui.update_label (gui.get_quote()); }//method update_label }//class Mimic David Gil

6. Mimic Example (cont’d) class Mimic_GUI { private Label label = new Label ("No news is good news."); private TextField quote = new TextField(20); private Mimic applet; private Mimic_Action_Listener listener; public Mimic_GUI (Mimic mimic_applet){ applet = mimic_applet; listener = new Mimic_Action_Listener (applet); }// constructor David Gil

7. Mimic Example (cont’d) public void init(){ applet.add (quote); applet.add (label); applet.resize (250,100); quote.addActionListener (listener); }//method init public void update_label (String message){ label.setText (message); }// method update_label public String get_quote() { return quote.getText(); }// method get_quote }// class Mimic_GUI David Gil

8. Mimic Example (cont’d) class Mimic_Action_Listener implements ActionListener { private Mimic applet; public Mimic_Action_Listener (Mimic listening_applet){ applet = listening_applet; }// constructor public void actionPerformed (ActionEvent event) { applet.update_label(); }// method actionPerformed }// class Mimic_Action_Listener David Gil

9. Mimic Example Output After pressing Enter Before pressing Enter Original Screen David Gil

10. Mimic Scenario Diagram 1: actionPerformed() TextField Mimic_Action_Listener 4: getText() 2: update_label() 3: get_quote() Mimic_GUI 6: setText() 5: update_label() Mimic Label David Gil

11. GUI Program Model Listeners Add Listeners Handle Events Program-Specific GUI Event Effects David Gil

12. Events • ActionEvent - Button, List, TextField, MenuItem • WindowEvent - Window • ComponentEvent - Component • AdjustmentEvent - Scrollbar • ItemEvent - Checkbox, Choice, List • MouseEvent - Component • KeyEvent - Component • FocusEvent - Component • TextEvent - TextComponent David Gil

13. Containers • Usados para agrupar componentes (Container class) • Panel - padre de Applet (organizador) • Applet - Un Panel que sera mostrado por un browser • Window - movible por el usuario • Frame - Window con borde y barra de titulo • Dialog - Window para tratar con una situación especifica, bloquea otra actividad hasta que se cierra David Gil

14. Rings_Display Example import java.awt.*; import java.applet.*; public class Rings_Display extends Applet { private Panel group = new Panel(); private Rings rings1 = new Rings(); private Rings rings2 = new Rings(); private Rings rings3 = new Rings(); public void init() { add (rings1); group.add (rings2); group.add (rings3); add (group); resize (200,150); }// method init }// class Rings_Display David Gil

15. Rings_Display Example (cont’d) class Rings extends Canvas { private Dimension size = new Dimension (60,60); public void paint (Graphics page) { page.drawOval (30,30,8,8); page.drawOval (40,30,8,8); page.drawOval (50,30,8,8); page.drawOval (35,35,8,8); page.drawOval (45,35,8,8); }// method paint public Dimension minimumSize () { return size; }// method minimumSize public Dimension preferredSize () { return minimumSize(); }// method preferredSize }// class Rings David Gil

16. Rings_Display Example (cont’d) Narrowed Original Widened David Gil

17. Labels • Constructores: • Label () • Label (String label) • Label (String label, int alignment) • Metodos • void setText (String label) • void setAlignment (int Alignment) • String getText () • int getAlignment () David Gil

18. Text Fields and Text Areas • TextField linea de texto simple • TextField () • TextField (int columns) • TextField (String text) • TextField (String text, int columns) • TextArea area de texto con multiples lineas • TextArea () • TextArea (int rows, int columns) • TextArea (String text) • TextArea (String text, int rows, int columns) David Gil

19. Text Fields y Text Areas • Metodos de la clase padre TextComponent • void setText (String text) • String getText () • String getSelectedText () • void setEditable (boolean b) David Gil

20. Fahrenheit Example import java.awt.*; import java.applet.*; import java.awt.event.*; public class Fahrenheit extends Applet { private Label title = new Label ("Fahrenheit to Celsius converter"); private Label question = new Label ("Enter Fahrenheit: "); private Label answer = new Label ("Temperature in Celsius: "); private TextField fahrenheit = new TextField (5); private Label celsius = new Label ("N/A"); private TextArea log = new TextArea (5, 20); private Fahrenheit_Listener listener = new Fahrenheit_Listener (this); David Gil

21. Fahrenheit Example (cont’d) public void init() { fahrenheit.addActionListener (listener); log.setEditable (false); add (title); add (question); add (fahrenheit); add (answer); add (celsius); add (log); resize (200,200); }// method init David Gil

22. Fahrenheit Example (cont’d) public void convert () { int fahrenheit_temperature, celsius_temperature; String text = fahrenheit.getText(); fahrenheit_temperature = Integer.parseInt (text); celsius_temperature = (fahrenheit_temperature - 32) * 5 / 9; celsius.setText (Integer.toString (celsius_temperature)); log.append (text + " converts to " + celsius.getText() + "\n"); }// method convert }// class Fahrenheit David Gil

23. Fahrenheit Example (cont’d) class Fahrenheit_Listener implements ActionListener { private Fahrenheit applet; public Fahrenheit_Listener (Fahrenheit listening_applet) { applet = listening_applet; }//constructor public void actionPerformed (ActionEvent action){ applet.convert(); }// method actionPerformed }// class Fahrenheit_Listener David Gil

24. Salida Fahrenheit Example David Gil

25. Listas • Usadas para mostrar listas seleccionables • List () • List (int rows, boolean multipleSelections) • Metodos… • void addItem (String item) • void addItem (String item, int index) • boolean isMultipleMode() • void setMultipleMode (boolean b) • int countItems() David Gil

26. Listas • Más metodos… • void clear() • void delItem (int index) • String getItem (int index) • String getSelectedItem () • String[] getSelected Items () David Gil

27. Push Buttons • Push Button - botón para realizar una acción • Button () • Button (String Label) David Gil

28. Choice Button • Choice Button - muestra una lista de opciones • Choice () • void addItem (String item) • int getItemCount () • String getItem (int index) • int getSelectedItem () • String getSelectedItem () • void select (int index) • void select (String string) David Gil

29. Checkbox y Radio Buttons • Constructores • Checkbox () • Checkbox (String label) • Checkbox (String label, CheckboxGroup group, boolean state) • Radio buttons se construyen como parte CheckboxGroup, sólo uno puede ser seleccionado cada vez David Gil

30. Scrollbars • Scrollbars se añaden automaticamente a text areas y list boxes David Gil

31. Scrollbars • Metodos… • void setUnitIncrement (int increment) • void setBlockIncrement (int increment) • void setValue (int value) • void setValues (int value, int visible, int minimum, int maximum) • int getUnitIncrement () • int get BlockIncrement () • int getValue () • etc. David Gil

32. Flow Layout Manager • layout manager por defecto • Situa los items en una fila, de izd. A dcha. • Si no caben en una fila se crea otra • Se centran los componentes de cada fila David Gil

33. Flow Layout Example import java.awt.*; import java.applet.*; public class Flow extends Applet { Button button1 = new Button ("I"); Button button2 = new Button ("think"); Button button3 = new Button ("therefore"); Button button4 = new Button ("I"); Button button5 = new Button ("am"); David Gil

34. Flow Layout Example (cont’d) public void init() { setLayout (new FlowLayout()); add (button1); add (button2); add (button3); add (button4); add (button5); setVisible (true); }// method init }// class Flow David Gil

35. Flow Layout Example Output Original Screen Resized David Gil

36. Grid Layout Manager • Situa los componentes en una parrilla de celdas • Se debe especificar el número de celdas en la parrilla • Se hace un resize de las componentes a medida que se hace un resize de la ventana setLayout (new GridLayout(2,3)); David Gil

37. Grid Layout Example Output Original Screen Resized David Gil

38. Border Layout • Define 5 posiciones donde poner componentes • North -- arriba • South -- abajo • West -- izquierda • East -- derecha • Center -- centro • El espacio se reserva basandose en el tamaño de los componentes, el resto es para el espacio central David Gil

39. Border Layout Example public void init() { setLayout (new BorderLayout(5,5)); add (button1, "North"); add (button2, "South"); add (button3, "East"); add (button4, "West"); add (button5, "Center"); setVisible (true); }// method init David Gil

40. Border Layout Example Output David Gil

41. Card Layout Manager • Pilas de componentes una encima de otra • Solo se ve la última • El último elemento se agranda para tomar todo el espacio posible • Constructores • CardLayout () • CardLayout (int hgap, int vgap) David Gil

42. Card Layout Manager • Metodos… • void first (Container cont) • void last (Container cont) • void next (Container cont) • void previous (Container cont) • void show (Container cont, String name) • Se puede asignar un nombre a cada uno de los componentes al usar el metodo add David Gil

43. Card Layout Example import java.awt.*; import java.applet.*; public class Card extends Applet { Button button1 = new Button ("I"); Button button2 = new Button ("think"); Button button3 = new Button ("therefore"); Button button4 = new Button ("I"); Button button5 = new Button ("am"); CardLayout layout = new CardLayout(); David Gil

44. Card Layout Example (cont’d) public void init() { setLayout (layout); resize (200,200); add (button1, "One"); add (button2, "Two"); add (button3, "Three"); add (button4, "Four"); add (button5, "Five"); setVisible (true); }// method init David Gil

45. Card Layout Example (cont’d) public void start () { for (int cards = 1; cards < 50; cards++) { layout.next (this); for (int pause =1; pause < 40000000; pause++); } }//method start }// class Card David Gil

46. Card Layout Example Output David Gil

47. Grid Bag Layout Manager • Proporciona una gran flexibilidad para colocar las componentes • Básicamente es un grid layout (filas y columnas) pero con la posibilidad de: • cambiar el tamaño de cada celda • permitir a las componentes ocupar + de una celda David Gil

48. Quotes Example import java.awt.*; import java.applet.*; import java.awt.event.*; public class Quotes extends Applet { String[] text = {"Take my wife, please.", "We move our legs ourselves.", "Measure twice, cut once."}; Label quote = new Label (text[0], Label.CENTER); David Gil

49. Quotes Example (cont’d) final public static int UPPERCASE = 1; final public static int LOWERCASE = 2; final public static int FONT = 3; final public static int COMEDY = 4; final public static int PHILOSOPHY= 5; final public static int CARPENTRY = 6; final public static int BOLD = 7; final public static int ITALIC = 8; Quote_GUI gui = new Quote_GUI (this); David Gil

50. Quotes Example (cont’d) public void init () { quote.setFont (new Font ("Times", Font.PLAIN, 12)); gui.init (quote); }// method init public void set_lowercase () { quote.setText (quote.getText().toLowerCase()); }//method set_lowercase public void set_uppercase() { quote.setText (quote.getText().toUpperCase()); }//method set_uppercase David Gil