Embed Size (px)
Citation preview
csc 2310 1
Basic Graphical User Interface (GUI) Components
csc 2310 2
Summary
• Java GUI Components• Class Component• Button• Check Box• Check Box Group (Radio Button)• Choice• List• Label• Text Components• Layout Managers
csc 2310 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
csc 2310 4
GUI Examplemenusmenus
buttonbutton
labellabel
text fieldtext field
csc 2310 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.
csc 2310 6
Java AWT GUI ComponentsComponent Descpition
Label An component where un editable text can be displayed. You can use it to display simple information to the user.
Button A button that can be pushed with a mouse click. The user clicks on the button to get something to be done.
TextField An area where the user enters a single line of text. Choice A drop-down list of items. The user can make a selection
by clicking an item in the list. Checkbox The user might either select it or not select it. It is a
boolean GUI component. List A list of item is displayed. The user can make a selection
by clicking once on any item in the list. User can generate an action event by double-clicking an item in the list.
Panel You can place components in a panel.
csc 2310 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.
csc 2310 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.
csc 2310 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
csc 2310 10
Class Component (2)
• Color, Point, and Dimension are AWT classes.
• Class Dimension encapsulates width and height. h
eigh
t
width
Dimesion(width,height)
(0, 0)
Y axis
X axis
Point (x, y)
y
x
csc 2310 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
csc 2310 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
csc 2310 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
csc 2310 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
csc 2310 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 ‘-’).
csc 2310 16
GUI Design - on Paper
csc 2310 17
GUI Design - on Paper (2)
csc 2310 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);
csc 2310 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 );
}
}
csc 2310 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();
csc 2310 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
csc 2310 22
Check Box Example
csc 2310 23
Check Box Example Codeimport 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"));
}
}
csc 2310 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”)
csc 2310 25
Check Box Group (Radio Buttons) Example
csc 2310 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)); }}
csc 2310 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.
csc 2310 28
Choice Example
csc 2310 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); }}
csc 2310 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
csc 2310 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.
csc 2310 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.
csc 2310 33
List Example
csc 2310 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);
}
}
csc 2310 35
Label
• A label is a component that displays a line of text– defined by the Label class– no events associated with it
csc 2310 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
csc 2310 37
Label Example
csc 2310 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 ) ); }}
csc 2310 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
csc 2310 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
csc 2310 41
TextField Example
csc 2310 42
TextField Example Codeimport 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); add( txtField3 ); }}
csc 2310 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
csc 2310 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.)
csc 2310 45
Nested Containers Example
csc 2310 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
csc 2310 47
Layout Manager Descpition
FlowLayout Default for Applet and Panel. Places components sequentially (left to right, top to bottom) in the order they were added.
BorderLayout Arranges the components into five areas: North, South, East, West and Center.
GridLayout Arranges the components into rows and columns using a arranges the components in a two-dimensional grid
GridBagLayout Arranges the components vertically and horizontally according to constraints
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
csc 2310 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
csc 2310 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());
csc 2310 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
csc 2310 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
csc 2310 52
Flow Layout Examplepublic 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 );
}
}
csc 2310 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
csc 2310 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
csc 2310 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" );
csc 2310 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 );
}
}
csc 2310 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
csc 2310 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 );
}
}
csc 2310 59
Panel
• A panel is used as a place to put a collection of other components.
• Complex GUIs consist of multiple panels with each panel’s 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 ));
csc 2310 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" );
csc 2310 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 );
}
}
