Interfaz Grfico de Usuario

1
Interfaz Gráfico de Usuario

• David Gil Sánchez

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)

3
Jerarquía GUI
4
Componentes GUI

• Label
• TextField
• TextArea
• List
• PushButton
• ChoiceButton
• CheckBoxButton
• RadioButton
• Scroll Bar
• Scroll Panel

• PullDownMenu
• PopUpMenu
• Canvas

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 //clas
s Mimic
6
Mimic Example (contd)
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
7
Mimic Example (contd)
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
8
Mimic Example (contd)
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_Listen
er
9
Mimic Example Output
10
Mimic Scenario Diagram
11
GUI Program Model
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

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

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
15
Rings_Display Example (contd)
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
16
Rings_Display Example (contd)
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 ()

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)

19
Text Fields y Text Areas

• Metodos de la clase padre TextComponent
• void setText (String text)
• String getText ()
• String getSelectedText ()
• void setEditable (boolean b)

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)
21
Fahrenheit Example (contd)
public void init() fahrenheit.addAction
Listener (listener) log.setEditable
(false) add (title) add
(question) add (fahrenheit) add
(answer) add (celsius) add
(log) resize (200,200) // method init
22
Fahrenheit Example (contd)
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
23
Fahrenheit Example (contd)
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
24
Salida Fahrenheit Example
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()

26
Listas

• Más metodos
• void clear()
• void delItem (int index)
• String getItem (int index)
• String getSelectedItem ()
• String getSelected Items ()

27
Push Buttons

• Push Button - botón para realizar una acción
• Button ()
• Button (String Label)

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)

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

30
Scrollbars

• Scrollbars se añaden automaticamente a text
  areas y list boxes

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.

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

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")
34
Flow Layout Example (contd)
public void init() setLayout (new
FlowLayout()) add (button1) add
(button2) add (button3) add
(button4) add (button5)
setVisible (true) // method init // class
Flow
35
Flow Layout Example Output
Original Screen
Resized
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))
37
Grid Layout Example Output
Original Screen
Resized
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

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
40
Border Layout Example Output
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)

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

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()
44
Card Layout Example (contd)
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
45
Card Layout Example (contd)
public void start () for (int cards
1 cards lt 50 cards) layout.next
(this) for (int pause 1 pause lt
40000000 pause) //method
start // class Card
46
Card Layout Example Output
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

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 (text0, Label.CENTER)
49
Quotes Example (contd)
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)
50
Quotes Example (contd)
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
51
Quotes Example (contd)
public void set_comedy () quote.setText
(text0) // method set_comedy
public void set_philosophy ()
quote.setText (text1) // method
set_philosophy public void set_carpentry
() quote.setText (text2)
52
Quotes Example (contd)
public void set_font (String font)
quote.setFont (new Font (font,
quote.getFont().getStyle(), 12))
public void set_italic (boolean on)
Font font quote.getFont() int style
font.getStyle() if (on)
if (! font.isItalic())
style Font.ITALIC else
if (font.isItalic()) style
- Font.ITALIC quote.setFont
(new Font (font.getName(),style,12))
53
Quotes Example (contd)
public void set_bold (boolean on) Font
font quote.getFont() int style
font.getStyle() if (on)
if (! font.isBold()) style
Font.BOLD else
if (font.isBold()) style -
Font.BOLD quote.setFont (new
Font(font.getName(),style,12)) //method set
bold //class Quotes
54
Quotes Example (contd)
class Quote_GUI private Quotes applet
private Panel letters new Panel()
private Panel domain new Panel() private
Panel style new Panel() private
Button uppercase new Button ("Uppercase")
private Button lowercase new Button
("Lowercase") private Choice font_choice
new Choice() private CheckboxGroup
topic new CheckboxGroup() private Checkbox
comedy new Checkbox ("Comedy", topic, true)
private Checkbox philosophy new Checkbox
("Philosophy", topic, false) private
Checkbox carpentry new Checkbox ("Carpentry",
topic, false)
55
Quotes Example (contd)
private Checkbox bold new Checkbox
("Bold") private Checkbox italic new
Checkbox ("Italic") private
Quote_Action_Listener uppercase_listener
private Quote_Action_Listener lowercase_listener
private Quote_Item_Listener bold_listener
private Quote_Item_Listener italic_listener
private Quote_Item_Listener font_listener
private Quote_Item_Listener comedy_listener
private Quote_Item_Listener philosophy_listener
private Quote_Item_Listener carpentry_listener
56
Quotes Example (contd)
public Quote_GUI (Quotes quote_applet)
applet quote_applet uppercase_listener
new Quote_Action_Listener (applet,
Quotes.UPPERCASE) lowercase_listener
new Quote_Action_Listener (applet,
Quotes.LOWERCASE)
57
Quotes Example (contd)
bold_listener new
Quote_Item_Listener (applet, Quotes.BOLD)
italic_listener new
Quote_Item_Listener (applet, Quotes.ITALIC)
font_listener new
Quote_Item_Listener (applet, Quotes.FONT)
comedy_listener new
Quote_Item_Listener (applet, Quotes.COMEDY)
philosophy_listener new
Quote_Item_Listener (applet, Quotes.PHILOSOPHY)
carpentry_listener new
Quote_Item_Listener (applet, Quotes.CARPENTRY)
// constructor
58
Quotes Example (contd)
public void init (Label quote)
font_choice.addItem ("Courier")
font_choice.addItem ("Times")
font_choice.addItem ("Serif")
letters.setLayout (new GridLayout(4,1,3,3))
letters.add (uppercase) letters.add
(lowercase) letters.add (font_choice)
domain.setLayout (new GridLayout
(4,1)) domain.add (comedy)
domain.add (philosophy) domain.add
(carpentry)
59
Quotes Example (contd)
style.setLayout (new GridLayout (4,1))
style.add (bold) style.add (italic)
applet.setLayout (new BorderLayout
(10,2)) applet.add ("North", quote)
applet.add ("West", letters)
applet.add ("Center", domain) applet.add
("East", style) applet.resize
(260, 150)
60
Quotes Example (contd)
uppercase.addActionListener (uppercase_listener)
lowercase.addActionListener
(lowercase_listener)
font_choice.addItemListener (font_listener)
comedy.addItemListener (comedy_listener)
philosophy.addItemListener (philosophy_listener
) carpentry.addItemListener
(carpentry_listener) bold.addItemListener
(bold_listener) italic.addItemListener
(italic_listener) //method
init // class Quote_GUI
61
Quotes Example (contd)
class Quote_Item_Listener implements ItemListener
private Quotes applet private int
command public Quote_Item_Listener
(Quotes listening_applet,
int listening_command) applet
listening_applet command
listening_command
// constructor
62
Quotes Example (contd)
public void itemStateChanged (ItemEvent event)
switch (command) case
Quotes.FONT applet.set_font
((String)(event.getItem()))
break case Quotes.COMEDY
applet.set_comedy() break
case Quotes.PHILOSOPHY
applet.set_philosophy() break
case Quotes.CARPENTRY
applet.set_carpentry() break
63
Quotes Example (contd)
case Quotes.BOLD
applet.set_bold(event.getStateChange()
ItemEvent.SELECTED) break
case Quotes.ITALIC
applet.set_italic(event.getStateChange()
ItemEvent.SELECTED) break
default System.out.println
("Illegal Item "
event.toString()) // method
itemStateChanged // class Quote_Item_Listener
64
Quotes Example (contd)
class Quote_Action_Listener implements
ActionListener private Quotes applet
private int command public
Quote_Action_Listener (Quotes listening_applet,
int listening_command)
applet listening_applet command
listening_command //
constructor
65
Quotes Example (contd)
public void actionPerformed (ActionEvent event)
switch (command) case
Quotes.UPPERCASE
applet.set_uppercase() break
case Quotes.LOWERCASE
applet.set_lowercase() break
default System.out.println
("Illegal Action "
event.toString()) // method
actionPerformed // class Quote_Action_Listener
66
Quotes Example Output
67
Quotes Example Output
68
Quotes Example Output