Week6: Graphical User Interface

Pre-lab
●
●
Create a new project in Eclipse
Load the Point, PointBuffer, Polyline, MinimalDrawingGUI,
MinimalListenerGUI, and AffineTransformGUI into your project
(You can use your own code, or you can download all these
from GauchoSpace! We have two Polyline on GauchoSpace,
download the one on this week!)
Rui Zhu
GEOG 178/258
Winter 2016
1
GEOG 178/258:
Conceptual Modeling and Programming for
the Geo-Sciences
TA: Rui Zhu
Rui Zhu
GEOG 178/258
Winter 2016
2
Happy Lunar New Year
The Year of Monkey
(...1980, 1992, 2004, 2016...)
Rui Zhu
GEOG 178/258
Winter 2016
3
Week 6: Graphical User Interface
(GUI)
Rui Zhu
GEOG 178/258
Winter 2016
4
Outline
●
●
●
●
Rui Zhu
1. Examples on GUI:
MinimalDrawingGUI
MinimalListenerGUI (a little practice)
AffineTransformGUI
2. Practice:
HW6: OpenPolygon
GEOG 178/258
Winter 2016
5
Review on the MinimalDrawingGUI
●
●
●
●
●
Rui Zhu
What do you need?
A frame to held the panel
A panel to held everything else
A line
A circle → buffer
A moving circle (i.e. animation)
GEOG 178/258
Winter 2016
6
Review on the MinimalDrawingGUI
(cont.)
public class MinimalDrawingGUI extends JPanel {
1. Define the member variable: PointBuffer
2. Constructor of MinimalDrawingGUI: super, setPreferredSize()
3. Getters and Setters
4. Inheritate and override paintComponent(Graphics g) of super-class JPanel:
–
super.paintComponent(g)
–
draw a line: g2d.drawLine(...)
–
draw a circle: g2d.drawOval(...)
5. Main method in which the animation is implemented:
create an instance of the JPanal → create an instance of JFrame → add the panel to the frame → arrange components in the
frame → implement and run animation
}
Rui Zhu
GEOG 178/258
Winter 2016
7
drawoval()
●
drawOval( int X, int Y, int width, int height )
Rui Zhu
GEOG 178/258
Winter 2016
8
Review on the MinimalListenerGUI
What do you need?
Rui Zhu
●
A frame to held the panel
●
A panel to held everything else
●
One text and one button
●
A circle → buffer
●
A moving points (i.e. animation)
●
An action listener for the button
GEOG 178/258
Winter 2016
9
Review on the MinimalListenerGUI
(cont.)
public class MinimalListenerGUI extends JPanel implements ActionListener {
1. define member variables: Pointbuffer, Point, JtextField
2. Constructor of MinimalListenerGUI: super, setPreferredSize()
3. Getters and Setters
4. Implement ActionListener interface actionPerformed(): when the button is clicked
–
the radius of the buffer set to the one from the text field.
–
repaint()
5. Inheritate and override paintComponent(Graphics g) of super-class JPanel:
–
super.paintComponent(g)
–
draw the circle: g.drawOval()
–
draw the point: g.stColor() and g.fillOval()
6. Make the point moving: animation() + repaint()
7. Main method: create an instance of the JPanal → create an instance of JFrame → create and put components to the panel (i.e. text field,
button and actionlistener) → add the panel to the frame → arrange components in the frame → run animation
}
Rui Zhu
GEOG 178/258
Winter 2016
10
Interface-- ActionListener
(https://docs.oracle.com/javase/7/docs/api/java/awt/event/ActionListener.html)
Rui Zhu
GEOG 178/258
Winter 2016
11
Superclass--Jpanal
(https://docs.oracle.com/javase/7/docs/api/javax/swing/JPanel.html)
Rui Zhu
GEOG 178/258
Winter 2016
12
repaint()
●
If you have done anything to change the look of the component,
then call this method!
Rui Zhu
GEOG 178/258
Winter 2016
13
Practice: try to change the center of the buffer
Rui Zhu
GEOG 178/258
Winter 2016
14
AffineTransformGUI
What do you need?
●
A frame to held the frame
●
A panel to held everything else
●
One button
●
An action listener for the button
●
●
Rui Zhu
Two polygons: triangles in this case
(duplicated at initial)
Affine transform the polygon when the
button is triggered
GEOG 178/258
Winter 2016
15
AffineTransformGUI (cont.)
public class MinimalListenerGUI extends JPanel implements ActionListener {
1. define member variables: AffineTransform
2. Constructor of AffineTransformGUI: super, instantiate the AffineTransform, setPreferredSize()
3. Getters and Setters (we do not need this in this case)
4. Implement ActionListener interface actionPerformed(): when the button is clicked three actions are done:
–
translate the polygon
–
scale the polygon
–
repaint()
5. Inheritate and override paintComponent(Graphics g) of super-class JPanel:
–
super.paintComponent(g)
–
draw one polygon: g2d.draw(at.createTransformedShape(poly));
–
draw one polygon: g.drawPolygon(poly2);
6. Make the point moving: animation() + repaint()
7. Main method: create an instance of the JPanal → create an instance of JFrame → create and put components to the panel (i.e. text field, button and
actionlistener) → add the panel to the frame → arrange components in the frame
}
Rui Zhu
GEOG 178/258
Winter 2016
16
Practice: Hints to your HW6
●
●
●
●
●
●
Rui Zhu
What do you need?
A frame to held the panel
A panel to held everything else
One text and one button
An open polygon = a polyline
A PointBuffer at the start point
Check whether the end point is within the
buffer
GEOG 178/258
Winter 2016
17
Hints for your HW6 (cont.)
public class OpenPolygon extends JPanel implements ActionListener {
1. define member variable: Polyline, PointBuffer, JtextField
2. Constructor of OpenPolygon: super, setPreferredSize()
3. Getters and Setters: for Polyline and PointBuffer
4. Implement ActionListener interface actionPerformed(): when the button is clicked three actions are done:
–
assign the input from the Field Text to the radius of the PointBuffer;
–
Instantiate the PointBuffer using the start point of Polyline and the radius;
–
Check whether the end point of the Polyline is within the PointBuffer → if so, add the start point to Polyline in order to make it closed!
–
repaint()
5. Inheritate and override paintComponent(Graphics g) of super-class JPanel:
–
super.paintComponent(g)
–
draw the polyline: g.drawPolyline
7. Main method: instantiate a polyline → instantiate a JPanal →instantiate a JFrame → create and put components to the panel (i.e. text field, button
and actionlistener) → add the panel to the frame → arrange components in the frame
}
Rui Zhu
GEOG 178/258
Winter 2016
18
Rui Zhu
GEOG 178/258
Winter 2016
19