F27SB2 Software Development 2 Lecture 8: State Diagram & GUI Example.
F27SB2 Software Development 2 Lecture 2: Java GUIs 1.
-
Upload
poppy-bishop -
Category
Documents
-
view
231 -
download
1
Transcript of F27SB2 Software Development 2 Lecture 2: Java GUIs 1.
![Page 1: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/1.jpg)
F27SB2 Software Development 2
Lecture 2: Java GUIs 1
![Page 2: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/2.jpg)
Overview
• Java GUIs based on 2 main class libraries• AWT - Abstract Windowing Toolkit– original Java GUI classes
• Swing– subset of JFC - Java Foundation Classes– extends AWT– subtle but crucial differences with AWT...
• we will use Swing but need to be aware of AWT concepts
![Page 3: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/3.jpg)
AWT
import java.awt.*;• contains original AWT GUI classes • Component– main AWT class of GUI elements• e.g Label, Button, TextField
![Page 4: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/4.jpg)
Container
• class of Components that can have other Components inside them
• e.g. Frame – top-level displayable window
• e.g. Panel – Container with no display
• LayoutManager– interface class– control positions of nested Components
![Page 5: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/5.jpg)
Container methods
• all Containers have rectangular size • smallest enclosing rectangle– width– height
public void setSize(int width,int height)
• width and height are in pixels• pixel – one point on screen
![Page 6: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/6.jpg)
Container methods
• size of pixel depends on– screen’s physical size• diagonal in inches e.g. 15”; 17”; 21”
– screen resolution• number of columns/rows in pixels e.g. 1680*1050
• NB make sure Container is big enough to hold everything!
• NB size of Container will change depending on properties of LayoutManager - more later
![Page 7: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/7.jpg)
Container methods
• Containers may be visible or invisiblepublic void setVisible(boolean b)
• make visiblesetVisible(true)
• make invisiblesetVisible(false)
• use to change Component availability • e.g. turn available buttons on/off
![Page 8: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/8.jpg)
Container methods
Containers have:– background• what things are drawn on e.g. paper
– foreground• what things are drawn in e.g pen
• e.g. Label
![Page 9: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/9.jpg)
Container methods
public void setBackground(Color c)
• set Container’s background colour to cpublic void setForeground(Color c)
• set Container’s foreground colour to c • use these to change foreground/background
dynamically at run-time
![Page 10: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/10.jpg)
Container methods
public class Colorpublic static final Color black, blue, cyan, darkGrey, gray, green lightGray, magenta, orange, pink, red, white,yellow
• must preface colour identifier with Color • e.g. Color.blue• NB to make things in foreground disappear– set foreground to same colour as background
![Page 11: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/11.jpg)
Basic Swing classes
import javax.swing.*; • many Swing classes extend AWT classes public class JComponent extends Container
• main Swing GUI class NB JComponents may be:• opaque – can’t see through background• transparent – can see through background
![Page 12: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/12.jpg)
Basic Swing classes
• opacity depends on look and feel• change opacity with:public void setOpaque(Boolean isOpaque)
• may need to setOpaque(true)
![Page 13: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/13.jpg)
Frames
public class JFrame extends Frame
• top-level window• with: title-bar; menu-bar; cursor; icon; etc• NB not a JComponentpublic void setTitle(String title)
• set title on Frame’s title bar to title
![Page 14: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/14.jpg)
Frames
• to create and open a simple JFrame:class class-name extends JFrame{ ... public class-name(...){ ... }}
• frame is set up in a class called class-name which is an extended JFrame
• need an constructor for a class-name to– initialise an instance of the JFrame– hold JComponents that make up the JFrame
![Page 15: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/15.jpg)
Frames
class program-name{ ... class-name frame-name; ...}
• in the class for the main program • need an instance of class-name called frame-name
![Page 16: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/16.jpg)
Frames
public static void main(String [] args){ frame-name = new class-Name(); frame-name.setTitle(“title”); frame-name.setSize(width,height); frame-name.setVisible(true);}
• call the constructor to instantiate frame-name to an instance of class-name
• give JFrame an appropriate title
![Page 17: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/17.jpg)
Frames
public static void main(String [] args){ frame-name = new class-Name(); frame-name.setTitle(“title”); frame-name.setSize(width,height); frame-name.setVisible(true);}
• set the JFrame’s size to width and height– NB must allow size for title bar when specifying
Frame height e.g. 20 pixels• make the JFrame visible
![Page 18: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/18.jpg)
Frames
• in general, cannot work directly on JFrame• must manipulate the JFrame’s ContentPane• ContentPane is a Container • has BorderLayout as default– more later
• to access ContentPane use:public Container getContentPane()
![Page 19: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/19.jpg)
Frames
• e.g. 200*220 white windowimport java.awt.*;import javax.swing.*;class White extends JFrame{ public White() { getContentPane(). setBackground(Color.white); } }
• constructor explicitly locates ContentPane and sets background to white
• however, many methods will work implicitly on ContentPane e.g. add,setLayout
![Page 20: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/20.jpg)
Frames
class TestWhite{ static White w; public static void main(String [] args) { w = new White(); w.setTitle(“White”); w.setSize(200,220); w.setVisible(true); }}
• main constructs instance of White and sets up title, size and visibility
![Page 21: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/21.jpg)
Events and listeners
• not yet enough to display window...• need to provide further details for the
operating system– what to do when window is opened or closed or
iconified etc• event– something that happens outside of a program
• listener– code that responds to an event
![Page 22: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/22.jpg)
Events and listeners
• selecting window menu bar icons causes events
• events are detected by the Java system• Java system:– stops our program– calls the appropriate listener
![Page 23: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/23.jpg)
Events and listeners
• we need to...– import AWT Java event classesimport java.awt.event.*;
– tell the system that we have a listener for window events
public void addWindowListener(WindowListener l)
– build a WindowListener to respond to events
![Page 24: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/24.jpg)
Events and listeners
interface WindowListener
• package provides framework for building a WindowListener– abstract method• defined by method signature • type + name + parameters
– no method body
![Page 25: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/25.jpg)
Events and listeners
• interface– specification of abstract methods that
implementation class will provide• implementation class must provide method
details
![Page 26: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/26.jpg)
Events and listenerspublic interface WindowListener extends EvenListener{ public void windowActivated(WindowEvent e); public void windowClosed(WindowEvent e); public void windowClosing(WindowEvent e); public void windowDeactivated(WindowEvent e); public void windowDeiconified(WindowEvent e); public void windowIconified (WindowEvent e); public void windowOpened(WindowEvent e);}
![Page 27: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/27.jpg)
Events and listeners
• specific events when window is:– activated/deactivated or opened/closed or
iconified/deiconified• system:– calls the appropriate method from interface– provides a WindowEvent parameter to provide
details of the event
![Page 28: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/28.jpg)
Events and listeners
• all methods in WindowListener are abstract• our class must – implement WindowListener– provide details for all methods
• we could implement details of all the interface methods ourselves...
![Page 29: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/29.jpg)
Events and listeners
• better to:– subclass a supplied implementation of the interface– override methods we are concerned about
public class WindowAdapter implements WindowListener
• provides empty versions of all above methods• call WindowAdapter constructor– with body that defines our versions of methods– to return a WindowListener
![Page 30: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/30.jpg)
Example
• e.g. 200*220 window with white background import java.awt.*;import java.awt.event.*;import javax.swing.*; class White extends JFrame{ public White() { setBackground(Color.white); }}
![Page 31: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/31.jpg)
Exampleclass testWhite{ public static void main(String [] args) { White w; w = new White(); w.setTitle(“White”); w.setSize(200,220); w.setVisible(true); ...
![Page 32: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/32.jpg)
Example ... w.addWindowListener (new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }); } }
• call addWindowListener – with a new WindowListener• built from WindowAdapter–with a new windowClosing to exit from White
![Page 33: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/33.jpg)
Example
![Page 34: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/34.jpg)
Example: flashing window
• window flashes black to white and back every 0.5 sec
• repeatedly change background• need some way of pausingimport java.util.*;
• Calendar classCalendar Calendar.getInstance()
• returns a Calendar object which holds a snapshot of the current date and time
![Page 35: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/35.jpg)
Example: flashing window
long getTimeInMillis()
• returns time in milliseconds from Calendar object
• NB to update time, must create new Calendar object
• to pause: – find start time– repeatedly • compare current time with start time
– until required time has passed
![Page 36: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/36.jpg)
Example: flashing window
void pause(long millisecs){ long startTime = Calendar.getInstance(). getTimeInMillis(); while(Calendar. getInstance(). getTimeInMillis()- startTime<millisecs);}
![Page 37: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/37.jpg)
Example: flashing window
import java.awt.*; import java.awt.event.*;import javax.swing.*; import java.util.*; class Blackwhite extends JFrame{ public Blackwhite() { getContentPane(). setBackground(Color.black); } private void pause(long millisecs){...}
![Page 38: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/38.jpg)
Example: flashing window
public void flash() { while(true) { pause(500); getContentPane(). setBackground(Color.white); pause(500); getContentPane(). setBackground(Color.black); } }}
![Page 39: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/39.jpg)
Example: flashing window
class TestBlackwhite{ public static void main(String [] args) { static Blackwhite b; b = new Blackwhite(); b.setTitle(“Black and white”); b.setSize(200,220); b.setVisible(true);
![Page 40: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/40.jpg)
Example: flashing window
b.addWindowListener (new WindowAdapter() { public void windowClosing (WindowEvent e) { System.exit(0); } }); b.flash(); }}
![Page 41: F27SB2 Software Development 2 Lecture 2: Java GUIs 1.](https://reader030.fdocuments.in/reader030/viewer/2022032723/56649d005503460f949d2e72/html5/thumbnails/41.jpg)
Example: flashing window