Computing II Tutorial 3 Prepared by: Ng Mee Mee
Outlines
Key Concepts of Unit 4 Introduction Marking Scheme and TMA3 support
Key Concepts of Unit 4
Explain the problem of creating a crossplatform graphical user interface Describe the way of creating GUIs. Use different GUI components. Apply different layout managers Describe the concept of event handling. Apply event handling in GUIs. Develop java applets
Introduction
Two sets of packages for building GUIs
AWT (Abstract Window Toolkit)
1st generation of GUI package Use native window GUI components to construct the GUI, the appearance of the same GUI-based application varies on different platform ( refer Unit 4, page 4) import java.awt.*;
Swing
An improve version of GUI package Do not rely on the native window to construct the GUI, provide a consistent appearances across platform. ( refer Unit 4, page 6) Import javax.swing.*;
3 steps to create a GUI Creating a top-level container object
1.
Example: a standalone window (JFrame)
Creating GUI components and adding them to the top-level container object.
2.
Example: button, label, textfield checkbox
Adding the functionalities to the GUI components.
3.
Example: clicking a button to perform an action
Inheritance Hierarchy of GUI Classes
Java GUI Components
Frames
Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications.
The Frame class can be used to create windows.
For Swing GUI programs, use JFrame class to create widows.
Methods Provided by the class JFrame
Methods Provided by the class JFrame
Two Ways to Create a Window
First way:
Declare object of type JFrame. Instantiate object. Use various methods to manipulate window.
Second way:
Create class-containing application program by extending definition of class JFrame. Utilize mechanism of inheritance.
Sample Code
First way: TestJFrame1.java import javax.swing.*; public class TestJFrame1 { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }
Sample Code
Second way: TestJFrame2.java
import javax.swing.*; public class TestJFrame2 extends JFrame { public TestJFrame2(){ super("Test Frame"); setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { TestJFrame2 frame = new TestJFrame2(); } }
Content Pane
Inner area of GUI window (below title bar, inside border). To access content pane:
Declare reference variable of type Container. Use method getContentPane of class JFrame. Title bar
Content pane
Methods Provided by the class Container
class JButton
Provided to create buttons in Java. To create a button:
JButton btnOk = new JButton(“OK”);
Methods Provided by the class JButton
Methods Provided by the class JButton
Sample Code
FrameWithButton.java import javax.swing.*; import java.awt.*; public class FrameWithButton extends JFrame { private JButton btnOK; public FrameWithButton(){ super("Test Frame"); btnOK = new JButton("OK"); Container pane =getContentPane(); pane.add(btnOK); setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { FrameWithButton frame = new FrameWithButton(); } }
class JLabel
Labels: Objects of a particular class type. class JLabel: Used to create labels. Label attributes:
Title Width Height
To create a label:
Instantiate object of type JLabel. Modify attributes to control display of labels.
Methods Provided by the class JLabel
Methods Provided by the class JLabel
class JTextField
Text fields: Objects belonging to class JTextField. To create a text field:
Declare reference variable of type JTextField. Instantiate object.
Methods Provided by the class JTextField
Layout Managers
FlowLayout
Default layout manager. Places components from left to right until no more items can be placed. Can align each line left, center, or right. Default alignment: LEFT.
GridLayout
Similar to FlowLayout. All rows (columns) have same number of components. All components have the same size.
Layout Managers
BorderLayout
Items placed into one of five specific regions:
NORTH/SOUTH EAST/WEST CENTER
NORTH and SOUTH components extend horizontally (completely span one edge to the other). EAST and WEST components extend vertically between components in NORTH and SOUTH regions. CENTER component expands to occupy any unused regions.
Sample Code
FlowLayoutDemo.java
import javax.swing.*; import java.awt.*; public class FlowLayoutDemo extends JFrame { private JButton btnCalculate; private JLabel lengthL; public FlowLayoutDemo(){ super("Test Frame"); btnCalculate = new JButton("Calculate"); lengthL = new JLabel("Enter the length:"); Container pane =getContentPane(); pane.setLayout(new FlowLayout()); pane.add(lengthL); pane.add(btnCalculate); setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { FlowLayoutDemo frame = new FlowLayoutDemo(); } }
Sample Code
BorderLayoutDemo.java
import javax.swing.*; import java.awt.*; public class BorderLayoutDemo extends JFrame { private JButton btnCalculate, btnExit; private JLabel lengthL; public BorderLayoutDemo(){ super("Test Frame"); btnCalculate = new JButton("Calculate"); btnExit = new JButton("Exit"); lengthL = new JLabel("Enter the length:"); Container pane =getContentPane(); pane.setLayout(new BorderLayout()); pane.add(lengthL, BorderLayout.EAST); pane.add(btnCalculate, BorderLayout.SOUTH); pane.add(btnExit, BorderLayout.WEST); setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { BorderLayoutDemo frame = new BorderLayoutDemo();
Sample Code import javax.swing.*;
GridLayoutDemo.java
import java.awt.*; public class GridLayoutDemo extends JFrame { private JButton btnCalculate, btnExit; private JLabel lengthL; private JTextField lengthTF; public GridLayoutDemo(){ super("Test Frame"); btnCalculate = new JButton("Calculate"); btnExit = new JButton("Exit"); lengthL = new JLabel("Enter the length:"); lengthTF = new JTextField(10); Container pane =getContentPane(); pane.setLayout(new GridLayout(2,2)); pane.add(lengthL); pane.add(lengthTF); pane.add(btnCalculate); pane.add(btnExit); setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }
Handling an Event
Action event: An event created when JButton is clicked. Event listener: An object that receives a message when JButton is clicked. In Java, you must register the listener.
Handling an Event
class ActionListener
Handles action event. Part of package java.awt.Event. The class ActionListener is a special type of class (interface). Must contain the actionPerformed method.
Sample Code
EventDemo.java
import javax.swing.*; import java.awt.*; import java.awt.event.*; public class EventDemo extends JFrame { private JButton btnCalculate, btnExit; private JLabel lengthL,widthL, areaL; private JTextField lengthTF, widthTF, areaTF; private CalculateButtonHandler cbHandler; private ExitButtonHandler ebHandler; public EventDemo(){ super("Test Frame"); btnCalculate = new JButton("Calculate"); cbHandler = new CalculateButtonHandler(); btnCalculate.addActionListener(cbHandler); btnExit = new JButton("Exit"); ebHandler = new ExitButtonHandler(); btnExit.addActionListener(ebHandler); lengthL = new JLabel("Enter the length:"); lengthTF = new JTextField(10); widthL = new JLabel("Enter the width:"); widthTF = new JTextField(10);
Sample Code
}
EventDemo.java areaL = new JLabel("Area:"); areaTF = new JTextField(10); Container pane =getContentPane(); pane.setLayout(new GridLayout(4,2)); pane.add(lengthL); pane.add(lengthTF); pane.add(widthL); pane.add(widthTF); pane.add(areaL); pane.add(areaTF); pane.add(btnCalculate); pane.add(btnExit); setSize(400, 300); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Sample Code
EventDemo.java
private class CalculateButtonHandler implements ActionListener{ public void actionPerformed(ActionEvent e){ double length, width, area; length = Double.parseDouble(lengthTF.getText()); width = Double.parseDouble(widthTF.getText()); area = length * width; areaTF.setText(String.format("%.2f",area)); } } private class ExitButtonHandler implements ActionListener{ public void actionPerformed(ActionEvent e){ System.exit(0); } } public static void main(String[] args) { EventDemo frame = new EventDemo(); } }
Pseudocode for EventDem.java
//Use the import statement to access the content pane //Use the import statement to create GUI components //Use the import statement to create event handling objects //Define class EventDemo that extends JFrame //Declare variables for each label, button, textfield and event handler of the content pane //Write a default constructor which contain: //Create each label fields //Create each text fields //Create a calculate button //Register calculate button with event listener //Create an exit button //Register exit button with event listener //Get the container object //Set the pane layout //Add the components in the pane //Set the title for the window //Set the size for the window //Display the window //Set the close operation for the window
//End constructor //Define the main method which contain: //declare a EventDemo variable and create an instance of EventDemo object
//End method main //End class
TMA 3 (20%)
Individual Assignment Submit soft copy (virus free) and hard copy of the TMA3 in word processed (1.5 spacing). You may send your soft copy to me at
[email protected] Submission date 21/10/07 Late submission Over 7 days
Over 8 – 14 days
Contact tutor before or on the due date Course Coordinator
Up to 21 days
Dean
TMA3 – Question 1
A) Write a java class FixedDepositMemory to display a window screen to calculate Fixed Deposit Maturity in a Bank. B) write pseudocode for the program C) Write complete java code for the program.
Useful Reference for TMA3
Formatting output
LayoutManager
Malik textbook, page 888
Handling an Event
Malik textbook , page 142
Malik textbook, page 322
Complete study chapter 6, Malik textbook
Applets
A Java program that is embedded within a Web page and executed by a Web browser.
Create an applet by extending the class JApplet.
class JApplet is contained in package javax.swing.
Applets
Applets
No main method.
Methods init, start, and paint guaranteed to be invoked in sequence.
To develop an applet:
Override any/all of the methods above.
Applet Methods
init method:
Initializes variables.
Gets data from user.
Places various GUI components.
paint method:
Performs output.
Skeleton of a Java Applet import java.awt.Graphics; import javax.swing.JApplet; public class WelcomeApplet extends JApplet { }
Applet Displaying Welcome Message //Welcome Applet import java.awt.Graphics; import javax.swing.JApplet; public class WelcomeApplet extends JApplet { public void paint(Graphics g) { super.paint(g); //Line 1 g.drawString("Welcome to Java Programming" , 30, 30); //Line 2 } }
HTML to Run Applet
Differences Between Applets and GUI Applications
Applets
GUI applications
Derived from JApplet.
Class extends JFrame.
No main method.
Invokes main method.
Uses init method.
Uses constructors.
Displayed by HTML.
Uses method setVisible.
Sets title in HTML.
Uses setTitle method.
Size set in HTML.
Uses method setSize.
Applet closes when HTML doc closes.
Closes with Exit button.
Converting a GUI Application to an Applet
Change JFrame to JApplet.
Change constructor to method init.
Remove method calls such as setVisible, setTitle, setSize.
Remove the method main.
If applicable, remove Exit button and all code associated with it (for example, action listener).