Title: Basic Graphical User Interface GUI Components
1Basic Graphical User Interface (GUI) Components
2Summary
- Java GUI Components
- Class Component
- Button
- Check Box
- Check Box Group (Radio Button)
- Choice
- List
- Label
- Text Components
- Layout Managers
3Graphical 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
4GUI Example
5GUI 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.
6Java AWT GUI Components
7Containers
- 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.
8GUI 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.
9Class 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
10Class Component (2)
- Color, Point, and Dimension are AWT classes.
- Class Dimension encapsulates width and height.
11Component 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
12Component 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
13Component 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
14Creating 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
15An 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 -).
16GUI Design - on Paper
17GUI Design - on Paper (2)
18Coding 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)
19Coding - 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 )
-
-
20Button
- 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()
21Check 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
22Check Box Example
23Check 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"))
-
24Check 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)
25Check Box Group (Radio Buttons) Example
26Check 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))
-
27Choice
- 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.
28Choice Example
29Choice 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)
-
30List
- 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
31List 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.
32List 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.
33List Example
34List 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)
-
35Label
- A label is a component that displays a line of
text - defined by the Label class
- no events associated with it
36Label 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
37Label Example
38Label 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 ) ) -
39Text 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
40TextField 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
41TextField Example
42TextField 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)
43TextArea 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
44Nested 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.)
45Nested Containers Example
46More 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
47Layout 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
48Layout 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())
50Flow 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
51Flow 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
52Flow 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 )
-
-
-
53Border 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
54Border 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
55Border 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" )
56Border 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 )
-
-
-
57Grid 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
58Grid 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 )
-
59Panel
- 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 ))
60Panel 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" )
-
61Panel 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 )
-
-