Basic Graphical User Interface GUI Components

1
Basic Graphical User Interface (GUI) Components
2
Summary

• Java GUI Components
• Class Component
• Button
• Check Box
• Check Box Group (Radio Button)
• Choice
• List
• Label
• Text Components
• Layout Managers

3
Graphical User Interface (GUI)

• A GUI is made up of components
• A GUI component is a visual object with which the
  user interacts via the mouse or the keyboard
• Each component has attributes such as
• location
• size
• shape
• colour, etc.
• Example of GUI components
• Buttons
• Text Fields
• Windows
• Labels etc.
• Components are defined in a class library
  contained in the package java.awt

4
GUI Example
5
GUI Development

• To be able to create a Java GUI, you will need to
  understand
• components
• containers
• events
• listeners
• layout managers
• In this lecture we will cover components,
  containers and layout managers. There will be a
  separate lecture to cover events and listeners if
  time permits.

6
Java AWT GUI Components
7
Containers

• A GUI component is a distinct element of a GUI,
  such as a button, text field, etc.
• A container is a GUI component that can contain
  other components.
• Class Component is a subclass of the class
  Container.

8
GUI Containers Examples

• A frame is a container component used for
  stand-alone GUI-based applications
• A panel is a container that cannot be displayed
  on its own e.g. it must be added to another
  container
• A panel helps organize the components in a GUI
• Applets, windows, etc.

9
Class Component (1)

• All AWT GUI components (apart from Menu) are
  children (derived from) of the AWT Component
  Class
• Therefore all the buttons, lists, check boxes,
  choices, etc. inherit class Component methods and
  constants

10
Class Component (2)

• Color, Point, and Dimension are AWT classes.
• Class Dimension encapsulates width and height.

11
Component Methods (1)

• Background color
• public Color getBackground() - returns the
  background colour of the component
• public void setBackground(Color c) - sets the
  component background colour to the colour
  specified in c
• Foreground color
• public Color getForeground() - returns the
  colour of the component
• public void setForeground(Color c) - sets the
  component colour to the colour specified in c

12
Component Methods (2)

• Location
• public Point getLocation() - returns an object
  of type Point which specifies the component
  location
• public void setLocation(Point p) - sets the
  location of the component to Point p coordinates
• public void setLocation(int x, int y) - sets the
  location of the component to coordinates (x, y)
• Size
• public Dimension getSize() - returns an object
  of type Dimension specifying the width and the
  height of the component in pixels
• public void setSize(Dimension d) - sets the size
  of the component to the specified Dimension d
• public void setSize(int height,int width)- sets
  the size of the component to the specified height
  and width

13
Component Methods (3)

• Visible and Showing
• public boolean isVisible()- returns true if the
  component is visible and false otherwise
• public void setVisible(boolean visible) makes
  the component visible if the specified value is
  true and invisible if the specified value is
  false
• Font
• public Font getFont() returns the font used for
  the component
• public void setFont(Font f) sets the text font
  to f
• Graphics
• public Graphics getGraphics() returns the
  graphics context

14
Creating GUIs (1)

• To create a program with a GUI
• define and set up the components
• create listener objects
• set up the relationships between the listeners
  and the components which generate events of
  interest
• define what happens in response to each event
• The init method of an applet can be used to set
  up the GUI and add each component to the applet
  container

15
An Example Using GUI

• Design an applet using GUI components for user
  interface. Add two buttons to the applet with
  and - button labels and write the code to
  handle the push button event. When the user
  presses a button a message should appear on the
  status line You pressed followed by the button
  label ( or -).

16
GUI Design - on Paper
17
GUI Design - on Paper (2)
18
Coding Creating the Buttons

• Our example GUI needs to display two push buttons
  on the applet
• A button is a component that allows the user to
  initiate an action with the press of the mouse
  button
• defined by the Button class in the awt library
• generates an action event when pressed we will
  discuss events in more detail in the event
  lecture (two weeks time)
• First we declare the button component object
• Button buttonName
• Then we allocate memory to it and initialise it
  using the Button class constructor to create a
  new button (but not to display it!)
• buttonName new Button ( String buttonLabel)

19
Coding - Displaying the GUIs on the Screen

• import java.applet.Applet
• import java.awt.
• public class TwoButtons extends Applet
• Button addButton, subButton
• public void init()
• addButton new Button ( "" )
• add( addButton )
• subButton new Button ( "-" )
• add( subButton )

20
Button

• A button is a component that allows the user to
  initiate an action when pressing the mouse button
• defined by the Button class
• generates an action event
• Button constructors
• public Button ( ) - creates a button with no
  label
• public Button ( String label) creates a button
  with the specified label
• Button b1 new Button(Push me!)
• Button b2 new Button()

21
Check Box

• A check box allows the user to select it or
  unselect it by clicking on it thus specifying
  oneor more choices
• You can select more than one check box
• defined by the Checkbox class
• generates item events
• Check box constructors methods
• public Checkbox()- creates a check box with no
  label
• public Checkbox(String label)- creates a check
  box with the specified label
• public boolean getState() returns the state of
  the check box

22
Check Box Example
23
Check Box Example Code

• import java.awt.
• import java.applet.
• public class CheckboxApplet extends Applet
• public void init()
• setLayout(new GridLayout(5, 1))
• add(new Checkbox("first", true))
• add(new Checkbox("second"))
• add(new Checkbox("third"))
• add(new Checkbox("fourth"))
• add(new Checkbox("fifth"))

24
Check Box Group (Radio Buttons)

• A check box group is a group of check boxes
  (circles, not squares) that allows the user to
  select only one check box at a time by clicking
  on it
• defined by the CheckboxGroup class
• generates item events
• Check box group constructors
• public CheckboxGroup()- creates a check box group
  
• Individual check boxes in the check box group are
  created using Checkbox constructor with an extra
  parameter the check box group it belongs to
• public Checkbox(String label, CheckboxGroup g,
  boolean state)- creates a check box with the
  specified label within the CheckboxGroup g and
  sets the specified state (true on, false
  off)

25
Check Box Group (Radio Buttons) Example
26
Check Box Group (Radio Buttons) Example Code

• import java.awt.
• import java.applet.
• public class RadioButtonApplet extends Applet
• private CheckboxGroup c
• public void init()
• c new CheckboxGroup( )
• setLayout(new GridLayout(5, 1))
• add(new Checkbox("first", c, true))
• add(new Checkbox("second", c, false))
• add(new Checkbox("third", c, false))
• add(new Checkbox("fourth", c, false))
• add(new Checkbox("fifth", c, false))

27
Choice

• A choice is a component that allows the user to
  initiate an action with the press of the mouse
  button
• defined by the Choice class
• generates item events
• Choice Constructors Methods
• public Choice() - creates a new choice menu. The
  menu initially has no items in it. By default,
  the first item added to the choice menu becomes
  the selected item, until a different selection is
  made by the user by calling one of the select
  methods.
• public void add(String item) - adds an item to
  this Choice menu.

28
Choice Example
29
Choice Example Code

• import java.awt.
• import java.applet.
• public class ChoiceApplet extends Applet
• public void init()
• Choice chooseColour new Choice()
• chooseColour.add("White")
• chooseColour.add("Green")
• chooseColour.add("Red")
• add(chooseColour)

30
List

• A list is a component that allows the user to
  select either one item or multiple items. from a
  scrolling list of text items.
• defined by the List class
• generates action events and item events

31
List Constructors

• public List() - creates a new scrolling list.
• public List (int rows)- creates a new scrolling
  list initialized with the specified (in rows)
  number of visible lines.
• public List(int rows, boolean multipleMode) -
  creates a new scrolling list initialized to
  display the specified number of rows and the user
  can make a multiple choice from the list.

32
List Methods

• public void add(String item) - adds the specified
  item to the end of scrolling list. 
• public void add(String item, int index) - adds
  the specified item to the scrolling list at the
  position indicated by the index.

33
List Example
34
List Example Code

• import java.awt.
• import java.applet.
• public class ListApplet extends Applet
• public void init()
• List shapeList new List(3, false)
• shapeList.add("Line")
• shapeList.add("Oval")
• shapeList.add("Rectangle")
• add(shapeList)

35
Label

• A label is a component that displays a line of
  text
• defined by the Label class
• no events associated with it

36
Label Constructors Constants

• Label Constructors
• public Label() - constructs an empty label
• public Label(String text) - constructs a new
  label with the specified text, left justified
• public Label(String text, int alignment) -
  constructs a new label that displays the
  specified text with the specified alignment
• Label alignment constants
• static int CENTER - indicates that the label
  should be centered
• static int LEFT - indicates that the label should
  be left justified
• static int RIGHT - indicates that the label
  should be right justified

37
Label Example
38
Label Example Code

• import java.awt.
• import java.applet.
• public class LabelApplet extends Applet
• public void init()
• setLayout( new GridLayout( 3, 1 ) )
• add( new Label( "A label is non-editable!",
  Label.CENTER ) )
• add( new Label( "This is a default label" )
  )
• add( new Label( "This label is right
  justified", Label.RIGHT ) )

39
Text Components

• A text field is a component that displays a line
  of text (or an image, or both)
• defined by the TextField class
• generates key events and/or action events
• A text area is a component that displays multiple
  lines of text
• defined by the TextArea class
• generates mouse events and/or key events

40
TextField Constructors

• public TextField() - constructs a new text field
• public TextField(int columns) - constructs a new
  empty text field with the specified number of
  columns
• public TextField(String text) - constructs a new
  text field initialized with the specified text
• public TextField(String text, int columns) -
  constructs a new text field initialized with the
  specified text to be displayed, and as wide as
  the specified number of columns

41
TextField Example
42
TextField Example Code

• import java.awt.
• import java.applet.
• public class TextFieldApplet extends Applet
• private TextField txtField1, txtField2,
  txtField3
• public void init()
• // a blank text field
• txtField1 new TextField()
• add( txtField1 )
• // Hello displayed in the text field
• txtField2 new TextField("Hello!")
• add( txtField2 )
• // Hello, Friends! Displayed in a text field
  of 20 columns
• txtField3 new TextField("Hello, Friends!",
  20)

43
TextArea Constructors

• public TextArea() - constructs a new text area
  with the empty string as text
• public TextArea(int rows, int columns)
  -constructs a new text area with the specified
  number of rows and columns and the empty string
  as text
• public TextArea(String text) - constructs a new
  text area with the specified text
• public TextArea(String text, int rows,
  int columns) - constructs a new text area with
  the specified text, and with the specified number
  of rows and columns

44
Nested Containers

• The GUI components are grouped into containers
  (e.g. windows, panels, etc.)
• Containers can be nested within each other
• Each container can have its own layout manager
• The appearance of a GUI is determined by
• the way the separate components are grouped
  together in each container and the way the
  containers are nested
• the layout manager of each container
• the properties of individual components (e.g.
  size, placement, appearance, etc.)

45
Nested Containers Example
46
More About GUIs

• Apart from the components covered Java also
  supports menus and submenus, frames and dialogs
• A frame is a a window with a title and a border
• A dialog is a top-level window with a title and a
  border that is typically used to take some input
  from the user. The default layout for a dialog is
  Border layout.
• We will cover these components in more details in
  the Swing lecture

47
Layout Managers

• A LayoutManager is an object responsible for
  arranging and determining the exact position and
  size of every GUI component in a container
• We will be using the following layout managers

48
Layout Managers

• Every container has a default layout manager, but
  we can explicitly set the layout manager as well
• Each layout manager has its own rules on how the
  components will be arranged
• Some layout managers pay attention to a
  component's preferred size or alignment, while
  others do not
• A layout manager adjusts the layout as components
  are added and as containers are resized

49
Changing Layout Managers

• We can use the setLayout method of a container to
  change its layout manager
• To change the default layout manager (FlowLayout)
  we type in
• setLayout (new BorderLayout())

50
Flow Layout

• Flow layout puts as many components as possible
  on a row, then moves to the next row
• Rows are created as needed to accommodate all of
  the components and the components are displayed
  in the order they are added to the container
• Each row of components is centered horizontally
  in the window by default, but could also be
  aligned left or right
• The horizontal and vertical gaps between the
  components can be explicitly set also

51
Flow Layout Constructors

• public FlowLayout( )
• constructs a FlowLayout in which components are
  center aligned by default
• public FlowLayout( int alignment )
• alignment FlowLayout.RIGHT, FlowLayout.LEFT or
  FlowLayout.CENTER
• public FlowLayout( int alignment,
• int horizontal, int vertical
  )
• horizontal and vertical specify the distance in
  pixels between components

52
Flow Layout Example

• public class FlowLayoutDemo extends Applet
• private Button left, center, right
• public void init( )
• left new Button ( "left" )
• add( left )
• center new Button ( "center" )
• add( center )
• right new Button ( "right" )
• add( right )

53
Border Layout Constructors

• Arranges components into 5 regions - up to 5
  components can be used - one for each position
• public BorderLayout( )
• constructs a BorderLayout with no pixel gaps
  between the components
• public BoderLayout ( int horizontal,
• int vertical )
• horizontal and vertical specify the distance in
  pixels between components

54
Border Layout

• Each area displays one component (which could be
  another container such as a Panel)
• Each of the four areas enlarges as much as needed
  to accommodate the component added to it
• If nothing is added to a particular area, it
  takes up no space and other areas expand to fill
  up the space
• The center area expands to fill space as needed

55
Border Layout Example (1)

• public class BorderLayout extends Applet
• private Button b0,b1,b2,b3,b4
• public void init( )
• // set layout to border layout
• setLayout( new BorderLayout( 5, 5 ) )
• // instantiate button objects
• b0 new Button( "Hide North" )
• b1 new Button( "Hide South" )
• b2 new Button( "Hide East" )
• b3 new Button( "Hide West" )
• b4 new Button( "Hide Center" )

56
Border Layout Example (2)

• // order not important
• add( b0, BorderLayout.NORTH )
• add( b1, BorderLayout.SOUTH )
• add( b2, BorderLayout.EAST )
• add( b3, BorderLayout.WEST )
• add( b4, BorderLayout.CENTER )

57
Grid Layout

• A grid layout arranges the components in a
  rectangular grid of rows and columns
• One component is placed in each cell of the grid,
  and all cells have the same size
• As components are added to the container, they
  fill the grid from left-to-right and
  top-to-bottom (by default)
• The size of each cell is determined by the
  overall size of the container

58
Grid Layout Constructors

• public class GridLayout1 extends Applet
• private Button b0,b1,b2,b3,b4,b5
• public void init( )
• // set layout to grid layout
• setLayout( new GridLayout( 2,3,5,5 ) )
• // instantiate buttons
• b0 new Button("One") add( b0 )
• b1 new Button("Two") add( b1 )
• b2 new Button("Three") add( b2 )
• b3 new Button("Four") add( b3 )
• b4 new Button("Five") add( b4 )
• b5 new Button("Six") add( b5 )

59
Panel

• A panel is used as a place to put a collection of
  other components.
• Complex GUIs consist of multiple panels with each
  panels components arranged in a specific layout
• Panels are created with class Panel
• Each panel can have its own layout - example
• myPanel.setLayout( new BorderLayout (5, 5 ))

60
Panel Example (1)

• public class PanelDemo extends Applet
• private Panel buttonPanel
• private Button b0, b1, b2, b3, b4
• public void init( )
• buttonPanel new Panel( )
• // instantiate button objects
• b0 new Button( "One" )
• b1 new Button( "Two" )
• b2 new Button( "Three" )
• b3 new Button( "Four" )
• b4 new Button( "Five" )

61
Panel Example (2)

• // set the panel layout to grid layout
• buttonPanel.setLayout( new GridLayout ( 1, 5
  ) )
• // add the buttons to the panel
• buttonPanel.add( b0 )
• buttonPanel.add( b1 )
• buttonPanel.add( b2 )
• buttonPanel.add( b3 )
• buttonPanel.add( b4 )
• // set the applet layout to border layout
• setLayout( new BorderLayout( ) )
• // add the panel to the south of the applet
• add( buttonPanel, BorderLayout.SOUTH )