Binghamton

University

CS-140

Fall 2019

Graphical User Interface(GUI)

An example of Inheritance

and Sub-Typing

1

Chapter 20

Binghamton

University

CS-140

Fall 2019

Java GUI Portability Problem

• Java loves the idea that your code produces the same results on any machine

• The underlying hardware and software of different machines has different GUI capabilities

• Different operating systems implement the same GUI concepts differently

2

Binghamton

University

CS-140

Fall 2019

Abstract Window Toolkit (AWT)

• First released in 1995 with Sun’s first Java release

• Thin abstract layer between the Java view of a user interface and the underlying hardware/software

• For instance AWT checkbox: • maps to Windows checkbox on a Windows machine,

• maps to X checkbox on Unix machine

• Simple, but not hardware independent

3

Binghamton

University

CS-140

Fall 2019

Swing

• Built on top of AWT

• Coded in 1997 (Released Java 1.2)

• Name derived from code name because Sun programmers liked swing music

• Deeper interface… less dependent on machine / operating system• More complicated – (18 packages, 737 classes as of JDK 8)

4

Binghamton

University

CS-140

Fall 2019

Example of Swing Class Hierarchy

5

Binghamton

University

CS-140

Fall 2019

JavaFX

• Enhancement(?) / Replacement for Swing

• Makes the creation of a GUI “simpler”

• Requires a GUI building tool• Installation of a 3rd party tool with different release levels, interactions with

Eclipse, etc.• Hides the details of the GUI from the coder

• “Removes” capability • Can override the GUI builder with Swing to get that capability back… if you know

Swing

• No longer packages with JDK

• Use if you want, but we teach Swing

6

Binghamton

University

CS-140

Fall 2019

Graphics Basics

• Your screen is a two dimensional array of pixels

• Think of each pixel as having an (x,y) coordinate

• The upper left hand side of the screen is (0,0)

• The X axis increases from left to right

• The Y axis increases from top to bottom

7

Binghamton

University

CS-140

Fall 2019

8

X

Y

(0,0) (1920,0)

(0,1080)

Binghamton

University

CS-140

Fall 2019

Single Pixel

• Each pixel is described by three numbers 0-255• Amount of Red

• Amount of Green

• Amount of Blue

• Higher numbers are brighter

• Black is 0,0,0

• White is 255,255,255

9

Binghamton

University

CS-140

Fall 2019

Swing’s Job

• Enable the programmer to describe what should go on the screen• In some relatively high level, abstract way

• Translate the programmer description to pixels (render)

• Enable the user to interact with the screen• Select an active window• Move the graphical (mouse) cursor in that window• Mouse button clicks and wheel motion• Touch screen motions• Keyboard key-press

• Enable the programmer to define responses to user actions

10

Binghamton

University

CS-140

Fall 2019

Swing Strategy – Divide and Conquer

Everything on the screen can be thought of as a rectangular area on the screen called a Component

• JComponent is an abstract class in Swing

• JComponent class manages things like:• rendering the component

• Handle drag/drop

• Support key bindings

• Manage the application wide look and feel of the component

• Components may contain sub-components!

11

Binghamton

University

CS-140

Fall 2019

Swing Components in Containers

• Container is an abstract class which extends Component• You can add or remove components to/from a container• You can find the parent of a component (direct container)• Components know how to render themselves• Container's job is to tell the components where they belong… "lay out"• Containers have “layout managers” (more later)• Components can give containers hints about lay out

• preferred, minimum, maximum size• Alignment vs other in the X and Y directions• Orientation• See: http://docs.oracle.com/javase/tutorial/uiswing/layout/index.html

12

Binghamton

University

CS-140

Fall 2019

Top Level Components

• Designed to interact with underlying hardware, operating system, graphics packages, and application software

• Top level components are sub-classes of Container

• To create a new application window, use Jframe• Has title bar and things like minimize, maximize and X to close

• To create a sub-window (e.g. popup), use JDialog

• To create a sub-window within (say) a browser, use Japplet• No border or title bar

13

Binghamton

University

CS-140

Fall 2019

Example Java GUI

14

My GUI X

Name: _____________Jframe

(container)

Jframetitle bar

Jpanel(component & container)

JLabel(component)

JText(component)

Jpanel(component & container)

Binghamton

University

CS-140

Fall 2019

Class Hierarchy

15

swing.JFrame swing.JDialog swing.JApplet

awt.Container

awt.Component

awt.Frame awt.Dialog applet.Applet

awt.Window awt.Panel

Binghamton

University

CS-140

Fall 2019

Text Based Components

• Like JLabel (simplest)• String text field

• Rendered by bitmapping each character

• A “font” is an array of bitmaps - one for each Unicode character

• Different fonts look different• Includes letter size and style… e.g. italic, bold, etc.

• Fonts do not specify color of background or foreground• Bit on implies foreground• Bit off implies background

16

Binghamton

University

CS-140

Fall 2019

Investigating Rendering

• Swing renders or “paints” a component when requested to• System Requests

• When the component is first made visible on the screen

• When the component is resized

• When the component was “damaged” and needs repair – e.g. uncovered

• Program Requests• The program changed the component and wants the user to see the change

• The component has a “paint(graphics g)” method • This is invoked by swing whenever rendering is required

• Override the “paint” method to change how a component is rendered

• Don’t invoke the paint method! Swing does that for you (repaint instead)

17

Binghamton

University

CS-140

Fall 2019

What’s in a paint method?

• Paint uses the Graphics object passed as a parameter

• Graphics has methods to draw and fill things on the screen• void drawLine(int x1,int y1,int x2, int y2)

• void fillRect(int x,int y,int width, int height)

• void drawString(String str, int x, int y)

• void drawImage(Image img, int x, int y, …)

• Most of the time, we don’t need to override paint… the Swing classes already do that for us

18

Binghamton

University

CS-140

Fall 2019

Common Look and Feel

Common “look and feel” information kept in the “Graphics” object

• Transform from “user coordinates” to pixel X and Y

• Clipping coordinates – Boundaries

• Background/Foreground Colors

• Font

• Component has methods to modify this state information

• Unless you change something, you get your Container’s state

19

Binghamton

University

CS-140

Fall 2019

The Event Loop

• GUI’s are managed by an endless loop called the event loop

• Within this loop, Swing checks for user input

• If an event occurs, tasks are dispatched

• Events are user input, timer events, system events, etc

• The dispatched tasks can:• Read the user input• Update the screen• Do calculations• Dispatch future events• Optionally exit the loop

20

Binghamton

University

CS-140

Fall 2019

Runnable Interface

• Requires a single method… void run();

• Used to indicate a class than can be “run”… i.e. that has a run method that can be invoked

• Note that run takes no arguments, and returns no result. We don’t care how run works, what it does, or whether it worked… we just know we can run it until it finishes.

21

Binghamton

University

CS-140

Fall 2019

Conceptual View of the Event Loop

while(1) {

if (eventQue.hasData()) {

newEvent=eventQue.getFirst();

newEvent.run();

if (eventRequestedExit) break;

}

if (newEvent=getEvent()) eventQue.addLast(newEvent);

}

22

Binghamton

University

CS-140

Fall 2019

BootStrapping the event loop… class MyGui implements Runnable {

public void run() {

// Create and show GUI

}

public static void main(String[] args) {

MyGui gui = new MyGui();

javax.swing.SwingUtilities.invokeLater(gui));

}

}

23

Binghamton

University

CS-140

Fall 2019

invokeLater

• invokeLater is a static method in the SwingUtilities class

• Adds it’s argument to the end of the AWT event list

• Starts the AWT event loop

• All events in the AWT event loop must be Runnable

• When the AWT event handler finds an object on its event list, it invokes object.run()

24

Binghamton

University

CS-140

Fall 2019

Using Swing directly

• If a Swing component does everything you want it to, use it as it stands

• For instance, in helloWorld, all we want to do is put up a window that says “hello”.

• We can use JFrame to create a frame, and Jlabel to create a label

• No extra work required

25

Binghamton

University

CS-140

Fall 2019

Common Swing “Widgets”

• JFrame – top level frame

• JPanel – A rectangular container used for separate parts of a frame

• JButton – a push button

• JCheckBox – On/Off check box

• JRadioButton – one of a set of buttons in which only one is on

• JComboBox – Text field with choice pull-down

• JDialog – Ask a pop-up question, get an answer and pop-down

• JTextField – User editable text field

• … and many more

26

Binghamton

University

CS-140

Fall 2019

Common Swing Widgets

27

JFrame

JPanel

JButton

JCheckBox

JRadioButton

JTextField

Binghamton

University

CS-140

Fall 2019

Extending Swing

• If we want to extend the capabilities of Swing components, we can create child classes

• Override the methods we want to change

• For instance, add a shape to a label

• See MyCircle.java

• See CircleDemo.java

28

Binghamton

University

CS-140

Fall 2019

Dynamic GUI’s

29

Binghamton

University

CS-140

Fall 2019

Dynamic GUIs

• So far, our GUI’s have been pretty static

• How do we• React to a keypress or button press?

• Alter the GUI?

• Do more stuff?

• How do we prevent getting inundated by actions?• Moving a cursor may generate thousands of (x,y) cursor positions

• Just grabbing a window and moving it can alter • The window that’s moving

• Each window it moves over

30

Binghamton

University

CS-140

Fall 2019

The CallBack Concept

• Joe: Hi there Jim

• Jim: Hi Joe

• Joe: How is the beach today… seen any dolphins yet?

• Jim: Not yet… but the sun is out and they should be here soon

• Joe: Hey, give me a call back when you see a dolphin!

• Jim: Sure thing… talk later! [Click]

[ Some time goes by ]

• [Rrring] Jim: Hey Joe, I just saw three dolphins swim by!

31

Binghamton

University

CS-140

Fall 2019

Callbacks

• Tell a library function you want a callback• Terminology: Registering a callback

• Agreement on what triggers invocation of a callback function

• Agreement on what arguments are passed to the callback function

• Agreement on interpretation of returned value from callback

32

Binghamton

University

CS-140

Fall 2019

Swing Callback Implementation

• Components with actions have an “ActionListener” list

• “ActionListener”: an object which implements ActionListener• requires the void actionPerformed(ActionEvent e) method

• addActionListenter(x) adds x to the ActionListener list• x must implement ActionListener• Registers a callback to x when an action occurs

• When an action occurs x.actionPerformed(event) is invoked for each x in the ActionListener list

33

Binghamton

University

CS-140

Fall 2019

The ActionEvent Class

• Whenever an action (like a button press) occurs, Swing generates an ActionEvent

• The ActionEvent has information about what action occurred, and at what time

• An ActionEvent object is passed to an action listener via an argument to the actionPerformed method

• Use this argument to determine which action occurred• So a single actionPerformed method can handle multiple buttons

34

Binghamton

University

CS-140

Fall 2019

The ActionCommand String

• Each action object has an Action Command String

• The Action Command String defaults to something useful• E.g. for buttons, defaults to the label of the button

• Change the action command string using setActionCommand(x)

• The action command string is copied to an actionEvent

• In your actionPerformed method, manage actions by checking e.getActionCommand()

• Enables mapping buttons to actions (1->many or many->1)

35

Binghamton

University

CS-140

Fall 2019

Managing Actions from a Class

• Add implements ActionListener to your class

• Add actionPerformed method to your classpublic void actionPerformed(ActionEvent e) {…}

• For each button:• Invoke button.setActionCommand(“<commandString>”)

• Invoke button.addActionListener(this)

• For each action command string:• Add: if (e.getActionCommand().equals(“commandString”)) { … }

to your actionPerformed method

36

Binghamton

University

CS-140

Fall 2019

Action Processing

1. User clicks on button

2. Triggers an event in the event loop

3. Event triggers event processing code in Swing library

4. For each actionListener, invoke listener.actionPerformed(event)

5. You registered as a listener, so your actionPerformed method is invoked

6. You check the actionCommand associated with the event to figure out which button called you

7. You perform whatever action is required in response to the button push

37

Binghamton

University

CS-140

Fall 2019

Example Button Managment

• See example code in Swing Tutorial under CircleDemo2.java

38

Binghamton

University

CS-140

Fall 2019

Much More

• We have barely scratched the surface

• Many sophisticated “widgets” in the Swing library• Radio Buttons

• Combo Box

• Text

• File Select

• Menu Bar

• Popup Menu

• Progress Bar

• Scroll bar

39