GUI

1
GUI

• Graphical User Interface

2
Outline

• Introduction
• Packages
• Components
• Layout Manager
• Events and Listeners
• Examples

3
Introduction
4
Definition

• Abbreviated GUI (pronounced GOO-ee).
• Program interface that takes advantage of the
  computer's graphics capabilities to make the
  program easier to use.
• User interface based on graphics (icons and
  pictures and menus) instead of text uses a mouse
  as well as a keyboard as an input device.
• Includes standard formats for representing text
  and graphics.

5
History

• Douglas Engelbart's Augmentation of Human
  Intellect project at SRI in the 1960s developed
  the On-Line System, which incorporated a
  mouse-driven cursor and multiple windows.
• The first GUI was designed by Xerox Corporation's
  Palo Alto Research Center in 1973.
• Features 3-button mouse, bit-mapped display,the
  use of graphical windows, ethernet network.
• Macintosh team at Apple Computer (included
  members of the Xerox PARC group) continued to
  develop such ideas in the first commercially
  successful product to use a GUI, the Apple
  Macintosh, released in January 1984.
• One reason for their slow acceptance require
  considerable CPU power and a high-quality monitor.

6
Java GUI

• GUI frameworks
• Part of Java Foundation Classes (JFC)
• Two important packages
• Abstract Window Toolkit (AWT). Provides the basic
  support for building GUIs.
• Swing. Extension of AWT, provides extensive
  support for building high-quality GUIs.
• Components, also known as widgets, are the
  building blocks of the visual aspect.
• Each GUI is characterized by its visual
  appearance and its behavior pattern in response
  to user input.

7
Packages
8
Abstract Window Toolkit
9
What is it?

• Is a GUI toolkit that is supplied with all Java
  systems.
• Provides the basic support for building graphical
  user interfaces using components
• Java.awt provides the classes for the interfaces
• AWT is designed to be portable and work across
  multiple platforms

10
Component Class

• Components represents something that has a
  position and size and can be painted on the
  screen and receive input events. 
• Component subclasses of the Component class.
• Two types
• Primitive components components that do not
  contain other components.
• Containers contain other primitive components
  and containers.

11
Container Class

• A container is a type of component that provides
  a rectangular area within which other components
  can be organized by a layout manager.
• Container IS-A Component so a Container can go
  inside another Container
• Some subclasses of container class are
• Dialog window that takes input from a user
• Window borderless and titleless top-level window
• Frame Top-level window with a title and a border.

12
Swing Package

• Built on top of Abstract Windows Toolkit (AWT)
• Subclass of the Component class
• Subclass of Container class

13
What does it do?

• Provides components to communicate with user
• Input from keyboard or mouse
• Output to console
• Similar to AWT but enhanced

14
Disadvantages of AWT

• Poor performance
• Lack of sophistication
• Heavyweight
• Looks determined by Platform

15
Benefits of Swing

• Pluggable look and feel
• Constant look and behavior
• Eliminates overhead
• Lightweight
• Improved components
• More robust

16
Components
17
AWT Components
18
Swing Components
19
Components

• Buttons
• Checkboxes
• Radio buttons
• Combo boxes (drop down menus)
• Textfields
• Labels

20

• The Button class creates pushbuttons with text
  labels.
• Button button new Button("...")
  add(button)
• A JButton can be instantiated and used in a GUI
  just like a java.awt.Button.
• JButton myButton new JButton("Tiger")
  add(myButton)

21
Checkboxes

• Checkboxes are toggle buttons that operate
  independently of other checkboxes or can be put
  into a group so that they operate like radio
  buttons.
• Checkbox cb new Checkbox("...")
  somePanel.add(cb)
• JCheckBox is similar to an AWT Checkbox that is
  not in a CheckboxGroup.
• JCheckBox cb1 new JCheckBox("Choose Me", true)

22
Radio Buttons

• In AWT, radio buttons are checkboxes that belong
  to the same CheckboxGroup which ensures that
  only one checkbox is selected at a time.
• CheckboxGroup cbGroup new CheckboxGroup()
  Checkbox cb1 new Checkbox("...", cbGroup,
  true)
• add(cb1)
• Each JRadioButton is added to a ButtonGroup so
  the group behaves as a set of radio buttons.
• ButtonGroup rbg new ButtonGroup()
• radioButton new JRadioButton("45,000")
• add (radioButton)

23
Combo Boxes

• Choice produces pull-down menus with a single
  selection showing, the other options get
  displayed when the user clicks with the mouse.
• Known as "combo boxes," "drop-down list boxes,"
  or "option menus.
• Choice choice new Choice()
• choice.addItem("...")
• choice.addItem("...") ...
• somePanel.add(choice)
• JComboBox works like AWT's Choice component
• JComboBox combo1 new JComboBox()
• combo1.addItem (Mercury)

24
TextFields

• Textfields create boxed areas to display and/or
  read a single line of text. (TextArea can display
  multiple lines, but no ActionEvent).
• Java textfields do not permit mixed fonts or
  colors within a single textfield.
• TextField lastNameField new TextField(15)
  add(lastNameField)
• JTextField behaves very similarly to AWT
  TextField.
• JTextField tf new JTextField()
  tf.setText("TextField")

25
Labels

• Simple textual displays, without any associated
  actions.
• Label label new Label("...") add(label)
• A JLabel is a single line label similar to
  java.awt.Label.
• Additional functionality that a JLabel has is the
  ability to
• Add an Icon
• Set the vertical and horizontal position of text
  relative to the Icon
• Set the relative position of contents within
  component
• JLabel plainLabel new JLabel("Plain Small
  Label")

26
Layout Manager
27
What it is

• It allows to format components on the screen in
  a platform-independent way.
• LayourtManager interface
• Programs with a consistent and reasonable
  appearance

28
Flow Layout

• Default layout for the Panel class.
• Components adjust to fit screen.
• Components flow change based upon the new width
  and height.

29
To create a Flow Layout

• Three constuctors
• FlowLayout(align, hGap,vGap) Creates a flow
  layout with the alignment set to align and the
  horizontal and vertical gaps.
• FlowLayout(align)- creates a flow layout with the
  given aligh and the horizontal and vertical gaps
  set to the default value
• FlowLayout() creates a flow layout with the
  align, horizontal and vertical gap set to the
  default value.

30
Example
31
Grid Layout

• What is it and what does it do
• Layout manager that arranges components in a
  rectangular grid
• All components given same size
• Components can be stretched vertically and
  horizontally

32
Implementation

• Constructors
• GridLayout (r,c,hGap,vGAp)
• Creates a grid layout manager with r rows and c
  columns and with the horizontal and vertical gaps
  set to hGap and vGAp
• GridLayout (r,c)
• Creates a grid layout manager with r rows and c
  columns and with the horizontal and vertical gaps
  set to 0
• GridLayout ()
• Creates a grid layout manager with a single row
  and with the horizontal gap set to 0

33
Examples
34
Border Layout

• What it is and what it does
• Layout manager that arranges as many as five
  components in five positions identified as
  North,South,East, and Center
• Can be stretched vertically or horizontally to
  fill the space between components

35
Constructors

• BorderLayout (hGap, vGap)
• Creates a border layout manager with the
  horizontal and vertical gaps set to hGap and vGap
• BorderLayout ()
• Creates a border layout manager with the
  horizontal and vertical gaps set to 0

36
Examples
37
Events and Listeners
38
Events and Listeners

• Events occur when the user interacts with the
  GUI.
• Listeners are used to respond to the event
• Each kind of Event is related to is own Listener

39
Events

• The user can interact with the Gui in some
  different ways
• with the mouse
• with the keyboard
• with a button
• others

40
Listeners

• Listen the information of the event and respond
  to it
• Different mechanisms of adding listeners
• part of the class defining Gui
• inner class
• separate class
• anonymous local class

41
Types of Events and Listeners

• ActionEvent ? ActionListener
• KeyEvent ? KeyListener
• MouseEvent ? MouseListener

42
ActionEvent

• ActionEvent occurs when the user clicks a button,
  choose a menu item or press Enter in a Text file.
• Methods
• String getActionCommand()
• Int getModifiers()
• Object getSource()

43
ActionListener

• ActionListener is used to respond to ActionEvent
• Methods
• actionPerformed(ActionEvent)

44
KeyEvent

• KeyEvents occur when the user type at the
  keyboard.
• Methods
• int getKeyChar()
• int getKeyCode()
• String getKeyText()
• others.

45
KeyListener

• KeyListener is used to respond KeyEvents
• Methods
• keyTyped(KeyEvent)
• keyPressed(KeyEvent)
• keyReleased(keyEvent)

46
MouseEvent

• MouseEvent occurs when the user uses the mouse to
  interact with a component.
• Methods
• getClickCount()
• getX()
• getY()
• Others.

47
MouseListener

• MouseListener is used to respond to MouseEvents
• Methods
• mouseClicked(MouseEvent)
• mousePressed(MouseEvent)
• mouseReleased(MouseEvent)
• mouseEntered(MouseEvent)
• mouseExited(MouseEvent)

48
Examples
49
Examples

• Bouncing Ball
• Ball (mouse)
• Digital Note
• Word Finder

50
Bouncing Ball (Framework)
51
Bouncing Ball (Code)
52
Ball (mouse)
53
Ball (mouse)

• public boolean mouseDown (Event e, int x, int y)
• x_speed - (x_speed)
• return true

54
Word Finder
55
Digital Note
56
Questions?