1 / 68

Interfaz Gráfico de Usuario

Explore GUI components hierarchy, event handling, containers, and programming examples in Java, with annotations for easy learning.

lbonner
Download Presentation

Interfaz Gráfico de Usuario

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related