Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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