Introduction to GUI Programming (Part II)krunapon/courses/198130/lecs/gui2.pdf · 1 Introduction to...
84
1 Introduction to GUI Programming (Part II) 188230 Advanced Computer Programming Asst. Prof. Dr. Kanda Runapongsa Saikaew ([email protected]) Department of Computer Engineering Khon Kaen University
Transcript of Introduction to GUI Programming (Part II)krunapon/courses/198130/lecs/gui2.pdf · 1 Introduction to...
1
Introduction to GUI Programming(Part II)
188230 Advanced Computer Programming
Asst. Prof. Dr. Kanda Runapongsa Saikaew([email protected])
Department of Computer EngineeringKhon Kaen University
2
Agenda
JComponent Methods Graphics and Painting Applets and HTML
3
JComponent Class
The Swing components started with “J” are defined by subclasses of the class JComponent, which is itself a subclass of Component
Many useful methods are defined in the Component and JComponent classes and so can be used with any Swing component
4
getWidth() and getHeight()
comp.getWidth() and comp.getHeight() are functions that give the current size of the component, in pixels One warning: When a component is first created, its
size is zero The size will be set later, probably by a layout
manager A common mistake is to check the size of a
component before that size has been set, such as in a constructor
5
setEnable(true) and isEnable()
comp.setEnabled(true) and comp.setEnabled(false) can be used to enable and disable the component When a component is disabled, its appearance
might change, and the user cannot do anything with it
There is a booleanvalued function, comp.isEnabled() that you can call to discover whether the component is enabled
6
setVisible(true), setFont(font), set Color comp.setVisible(true) and
comp.setVisible(false) can be called to hide or show the component
comp.setFont(font) sets the font that is used for text displayed on the component
comp.setBackground(color) and comp.setForeground(color) set the background andforeground colors for the component
7
setOpaque(true)
comp.setOpaque(true) tells the component that the area occupied by the component should be filled with the component’s background color before the content of the component is painted
By default, only JLabels are nonopaque. A nonopaque, or “transparent”, component ignores its background color and simply paints its content over the content of its container
This usually means that it inherits the background color from its container
8
setToolTipText(string)
comp.setToolTipText(string) sets the specified string as a “tool tip” for the component.
The tool tip is displayed if the mouse cursor is in the component and the mouse is not moved for a few seconds
The tool tip should give some information about the meaning of the component or how to use it
9
setPreferredSize(size)
comp.setPreferredSize(size) sets the size at which the component should be displayed,
if possible The parameter is of type java.awt.Dimension,
where an object of type Dimension has two public integervalued instance variables, width and height
A call to this method usually looks something like “setPreferredSize( new Dimension(100,50) )”
10
setPreferredSize(size)
The preferred size is used as a hint by layout managers, but will not be respected in all
cases Standard components generally compute a
correct preferred size automatically, but it can be useful to set it in some cases
For example, if you use a JPanel as a drawing
surface, it might be a good idea to set a preferred size for it
11
JComponentMethodsDemo
JLabel fname = new JLabel("Firstname:");
fname.setPreferredSize(new Dimension(50,50));
JLabel lname = new JLabel("Lastname:");
JTextField fnameInput =
new JTextField(15);
fnameInput.setToolTipText("input your firstname");
12
Drawing on a Component
Sometimes, however, you do want to draw on a component
You have to define your own component class and provide a method in that class for drawing the component
A JPanel, like any JComponent, draws its content in the method
public void paintComponent(Graphics g) To create a drawing surface, you should define a
subclass of JPanel and provide a custom
paintComponent() method
13
Method paintComponent()
Note that the paintComponent() method has a parameter of type Graphics
The Graphics object will be provided by the system when it calls your method
You need this object to do the actual drawing. To do any drawing at all in Java, you need a
graphics context A graphics context is an object belonging to the
class java.awt.Graphics
14
Graphics Objects
Instance methods are provided in this class for drawing shapes, text, and images
Any given Graphics object can draw to only one location
The location will always be a GUI component
belonging to some subclass of JPanel The Graphics class is an abstract class, which
means that it is impossible to create a graphics context directly, with a constructor
15
Class Graphics
The Graphics class is an abstract class, which means that it is impossible to create a graphics context directly, with a constructor
When the paintComponent() method of a component is called by the system, the parameter to that method is a graphics context for drawing on the component
16
Drawing in Subclass of JPanel When defining a subclass of JPanel for use as a
drawing surface
You will almost always want to fill the panel with the background color before drawing other content onto the panel
This is traditionally done with a call to super.paintComponent(g)
public void paintComponent(g) {
super.paintComponent(g);
. . . // Draw the content of the component.
}
17
Redrawing a Component (1/2)
Most components do, in fact, do all drawing operations in their paintComponent() methods
What happens if, in the middle of some other method, you realize that the content of the
component needs to be changed? You should not call paintComponent() directly
to make the change; this method is meant to be called only by the system
18
Redrawing a Component (2/2)
Instead, you have to inform the system that the component needs to be redrawn, and let the system do its job by calling paintComponent()
You do this by calling the component’s repaint() method
The method public void repaint(); is defined in the Component class, and so can be used with any component
You should call repaint() to inform the system that the component needs to be redrawn
19
When paintComponent() is called
The component first appears on the screen The component is resized The component is covered up by another
window and then uncovered The method repaint() is called
20
Coordinates
The screen of a computer is a grid of little squares called pixels
The color of each pixel can be set individually, and drawing on the screen just means setting the colors of individual pixels
21
Graphics and Coordinates
A graphics context draws in a rectangle made up of pixels
A position in the rectangle is specified by a pair of integer coordinates, (x,y)
The upper left corner has coordinates (0,0) The x coordinate increases from left to right,
and the y coordinate increases from top to
bottom
22
CoordinateDemoPanel
23
serialVersionUID
Class JPanel implements interface Serializable
which has attribute serialVersionUID Thus class that its subclass of JPanel is also
recommended to set the value of that attribute a serialVersionUID is used during
deserialization to verify that the sender and receiver of a serialized object have loaded classes for that object that are compatible with respect to serialization
24
How to Generate serialVersionID
Using tool called “serialver” which comes with JDK
Syntax serialver <classname>
Example
25
CoordinateAppDemo
26
setDefaultCloseOperation
window.setDefaultCloseOperation( JFrame.EXITON CLOSE ); says that When the user closes the window by clicking the
close box in the title bar of the window, the program should be terminated
This is necessary because no other way is provided to end the program
Without this line, the default close operation of the window would simply hide the window when the user clicks the close box, leaving the program running
27
A Font A font represents a particular size and style of text The same character will appear different
in different fonts In Java, a font is characterized by a font name, a
style, and a size The available font names are system dependent,
but you can always use the following four strings as font names: “Serif”, “SansSerif”, “Monospaced”, and “Dialog”
28
Font Style
The style of a font is specified using named constants that are defined in the Font class.
You can specify the style as one of the four values: Font.PLAIN Font.ITALIC Font.BOLD, or Font.BOLD + Font.ITALIC
29
Font Size
The size of a font is an integer Size typically ranges from about 10 to 36,
although larger sizes can also be used The size of a font is usually about equal to the
height of the largest characters in the font, in pixels, but this is not an exact rule
The size of the default font is 12
30
Class java.awt.Font
Java uses java.awt.Font for representing fonts You can construct a new font by specifying its
font name, style, and size in a constructor: Font plainFont = new Font("Serif", Font.PLAIN, 12); Font bigBoldFont = new Font("SansSerif",
Font.BOLD, 24);
Every graphics context has a current font, which is used for drawing text You can change the current font with the setFont()
method
31
Font Setting Example
If g is a graphics context and bigBoldFont is a font, then the command g.setFont(bigBoldFont) will set the current font of g to bigBoldFont
The new font will be used for any text that is drawn after the setFont() command is given
You can find out the current font of g by calling the method g.getFont(), which returns an object of type Font
32
Color
You will probably want to use some color when you draw
Java is designed to work with the RGB color system
An RGB color is specified by three numbers that give the level of red, green, and blue, respectively, in the color
A color in Java is an object of the class java.awt.Color
33
Constructing a RGB Color
You can construct a new color by specifying its red, blue, and green components
Syntax: Color myColor =
new Color(r,g,b); While r, g, and b
are integers in
the range 0 to 255
34
Referring to Color Names
Color class defines several named constants representing common colors: Color.WHITE, Color.BLACK, Color.RED Color.GREEN, Color.BLUE, Color.CYAN Color.MAGENTA, Color.YELLOW, Color.PINK Color.ORANGE, Color.LIGHT_GRAY Color.GRAY,Color.DARK GRAY
35
Getting and Setting Color
One of the properties of a Graphics object is the current drawing color, which is used for all drawing of shapes and text
If g is a graphics context, you can change the current drawing color for g using the method g.setColor(c), where c is a Color g.setColor(Color.GREEN)
To know what the current drawing color is, you can call the function g.getColor(), which returns an object of type Color
36
A HSB Color System
In the HSB system, a color is specified by
three numbers called the hue, the saturation, and the brightness
The hue is the basic color, ranging from red through orange through all the other colors of the rainbow
The brightness is pretty much what it sounds like A fully saturated color is a pure color tone
In Java, the hue, saturation and brightness are always specified by values of type float in the range from 0.0F to 1.0F
Example: Color randomColor = Color.getHSBColor( (float)Math.random(), 1.0F, 1.0F );
37
Foreground & Background colors
Every component has an associated foreground color and background color
The component is filled with the background color before anything else is drawn Although some components are “transparent,”
meaning that the background color is ignored
When a new graphics context is created for a component, the current drawing color is set to the foreground color
38
Setting Foreground & Background Colors The foreground color and background color are
properties of the component, not of a graphics context
The foreground and background colors can be set by instance methods setForeground(c) setBackground(c)
This can be useful if you want them to use colors that are different from the defaults.
39
Graphics and Shapes
The Graphics class includes a large number of instance methods for drawing various shapes, such as lines, rectangles, and ovals
The shapes are specified using the (x,y) coordinate system
They are drawn in the current drawing color of the graphics context which you can set by calling method setColor(color)
40
Drawing String and Line
drawString(String str, int x, int y) Draws the text given by the string str The string is drawn using the current color and font
of the graphics context x specifies the position of the left end of the string y is the ycoordinate of the baseline of the string
drawLine(int x1, int y1, int x2, int y2) Draws a line from the point (x1,y1) to the point
(x2,y2)
41
Drawing Rectangle & Oval
drawRect(int x, int y, int width, int height) Draws the outline of a rectangle The upper left corner is at (x,y), and the width and
height of the rectangle are as specified.
drawOval(int x, int y, int width, int height) Draws the outline of an oval The oval is one that just fits inside the rectangle
specified by x, y, width, and height.
42
Drawing Round Rectangle
drawRoundRect(int x, int y, int width, int height, int xdiam, int ydiam) Draws the outline of a rectangle with rounded
corners The basic rectangle is specified by x, y, width, and
height, but the corners are rounded The degree of rounding is given by xdiam and
ydiam The corners are arcs of an ellipse with horizontal
diameter xdiam and vertical diameter ydiam which have typical values as 16
43
Drawing 3D Rectangle
draw3DRect(int x, int y, int width, int height, boolean raised) Draws the outline of a rectangle that is supposed to have
a threedimensional effect, as if it is raised from the screen or pushed into the screen
The basic rectangle is specified by x, y, width, and height The raised parameter tells whether the rectangle seems
to be raised from the screen or pushed into it The 3D effect is achieved by using brighter and darker
versions of the drawing color for different edges of the rectangle
44
Drawing Arc
drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) Draws part of the oval that just fits inside the
rectangle specified by x, y, width, and height
The part drawn is an arc that extends arcAngle degrees from a starting angle at startAngle degrees
Angles are measured with 0 degrees at the 3 o’clock position (the positive direction of the horizontal axis)
45
Filling Shapes
fillRect(int x, int y, int width, int height)
Draws a filledin rectangle
fillOval(int x, int y, int width, int height)
Draws a filledin oval.
fillRoundRect(int x, int y, int width, int height, int xdiam, int ydiam)
Draws a filledin rounded rectangle.
fill3DRect(int x, int y, int width, int height, boolean raised)
Draws a filledin threedimensional rectangle.
fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)
Draw a filledin arc.
46
Graphics2D
All drawing in Java is done through an object of type Graphics
The Graphics class provides basic commands for such things as drawing shapes and text and for selecting a drawing color
These commands are adequate in many cases, but they fall far short of what’s needed in a serious computer graphics program
Java has another class, Graphics2D, that provides a larger set of drawing operations
47
Drawings Using Graphics2D
Graphics2D is a subclass of Graphics, so all the methods from the Graphics class are also available in a Graphics2D
Drawing in Graphics2D is based on shapes, which are objects that implement an interface
named Shape
Shape classes include Line2D, Rectangle2D, Ellipse2D, Arc2D, and CubicCurve2D, among others
All these classes are defined in the package java.awt.geom
48
Shortcomings of the AWT
The capabilities of the Graphics object of the AWT are rather limited
Shortcomings of the AWT include Limited available fonts Lines drawn with a singlepixel width Shapes painted only in solid colors The inability to properly scale drawings prior to
printing
49
Java 2D
Java 2D is probably the second most significant addition to the Java 2 Platform surpassed only by the Swing GUI components
The Java 2D API provides a robust package of drawing and imaging tools to develop elegant, professional, highquality graphics
50
Java 2D Capabilities
Local fonts: all local fonts on the platform are available for drawing text
Explicit control of the drawing pen: thickness of lines, dashing patterns, and segment connection styles are available
Transformations of the coordinate system—translations, scaling, rotations, and shearing—are available
51
Java 2D Drawing Process: Step 1
Cast Graphics object to Graphics2Dpublic void paintComponent(Graphics g) {super.paintComponent(g); // Typical Swing Graphics2D g2d = (Graphics2D)g;
g2d.doSomeStuff(...);
...}
All methods that return Graphics in Java return Graphics2D in Java 2 and later
paint, paintComponent getGraphics
52
Java 2D Drawing Process: Step 2 Set pen parameters
g2d.setPaint(fillColorOrPattern); g2d.setStroke(penThicknessOrPattern); g2d.setComposite(someAlphaComposite); g2d.setFont(someFont); g2d.translate(...); g2d.rotate(...); g2d.scale(...); g2d.shear(...); g2d.setTransform(someAffineTransform);
53
Java 2D Drawing Process: Step 3
Create a Shape object
Rectangle2D.Double rect = ...; Ellipse2D.Double ellipse = ...; Polygon poly = ...; GeneralPath path = ...; // Satisfies Shape interface SomeShapeYouDefined shape = ...;
Most shapes are in the java.awt.geom package
There is a corresponding Shape class for most of the drawXxx methods of Graphics (see next slide)
54
Builtin Shape Classes Arc2D.Double, Arc2D.Float
Area (a shape built by union, intersection, subtraction and xor of other shapes)
CubicCurve2D.Double, CubicCurve2D.Float
Ellipse2D.Double, Ellipse2D.Float
GeneralPath (a series of connected shapes), Polygon
Line2D.Double, Line2D.Float
QuadCurve2D.Double, QuadCurve2D.Float (a spline curve)
Rectangle2D.Double, Rectangle2D.Float, Rectangle
RoundRectangle2D.Double, RoundRectangle2D.Float
55
Java 2D Drawing Process: Step 4
Draw an outlined or filled version of the Shape g2d.draw(someShape); g2d.fill(someShape);
The legacy methods are still supported drawString still commonly used drawLine, drawRect, fillRect still somewhat used
56
Drawing Shapes: Example Code
57
setPaint and getPaint Methods
Use setPaint and getPaint to change and retrieve the Paint settings.
When you fill a Shape, the current Paint attribute of the Graphics2D object is used.
Possible arguments to setPaint are:
A Color (solid colorColor implements Paint interface) A GradientPaint (graduallychanging color combination) A TexturePaint (tiled image) A new version of Paint that you write yourself.
58
Paint Classes: Details
Color Has the same constants (Color.RED,
Color.YELLOW) as the AWT version, plus some extra constructors
GradientPaint Constructors take two points, two colors, and
optionally a boolean flag that indicates that the color pattern should cycle
Colors fade from one color to the other
59
Paint Classes: Details TexturePaint
Constructor takes a BufferedImage and a Rectangle2D, maps the image to the rectangle, then tiles the rectangle
Creating a BufferedImage from a GIF or JPEG
First load an Image normally, get its size, create a BufferedImage that size with BufferedImage.TYPE_INT_ARGB as image type
Get the BufferedImage's Graphics object via createGraphics
Draw the Image into the BufferedImage using drawImage
60
Gradient Fills: Example Code
61
Working with Images
There are a number of common tasks when working with images Loading an external GIF, PNG JPEG image format
file into Java 2D™'s internal image representation. Directly creating a Java 2D image and rendering to it Drawing the contents of a Java 2D image on to a
drawing surface. Saving the contents of a Java 2D image to an
external GIF, PNG, or JPEG image file.
62
Two Main Classes for Images The java.awt.Image class
Superclass that represents graphical images as rectangular arrays of pixels.
The java.awt.image.BufferedImage class Extends the Image class to allow the application to
operate directly with image data (for example, retrieving or setting up the pixel color).
Applications can directly construct instances of this class.
A cornerstone of the Java 2D immediatemode imaging API
63
Reading/Loading an Image
Java 2D™ supports loading these external image formats into its BufferedImage format using its Image I/O API which is in the javax.imageio package
Image I/O has builtin support for GIF, PNG, JPEG, BMP, and WBMP
Image I/O is also extensible so that developers or administrators can "plugin" support for additional formats.
64
Loading an Image File (1/2)
65
Loading an Image File (2/2)
66
Drawing an Image
boolean Graphics.drawImage(Image img, int x, int y, ImageObserver observer);
The x,y location specifies the position for the topleft of the image
The observer parameter notifies the application of updates to an image that is loaded asynchronously
The observer parameter is not frequently used directly and is not needed for the BufferedImage class, so it usually is null
67
Drawing an Image Demo
drawImage(Image img, int x, int y, ImageObserver observer) img the specified image to be drawn. x the x coordinate. y the y coordinate. observer object to be notified as more of the
image is converted. The image is drawn with its topleft corner at (x, y)
in this graphics context
Using setPaint method to set color Using fill method to fill the area with a shape
68
Drawing an Image Demo Result
69
Using Local (SystemSpecific) Fonts
Local fonts: Lookup Fonts First
Use the getAvailableFontFamilyNames or getAllFonts methods of GraphicsEnvironment. GraphicsEnvironment env = GraphicsEnvironment.getLocalGraphicsEnvironment();
env.getAvailableFontFamilyNames() ;
env.getAllFonts(); // Much slower than just getting names! Safest Option:
Supply list of preferred font names in order, loop down looking for first match
Supply standard font name as backup
70
Example: ListFonts
71
Drawing with Local Fonts
72
What is an Applet?
An applet is a program written in the Java programming language that can be included in an HTML page
When you use a Java technologyenabled browser to view a page that contains an applet The applet's code is transferred to your system and
executed by the browser's Java Virtual Machine (JVM).
73
Class Applet and JApplet
An applet must be a subclass of the java.applet.Applet class, which provides the standard interface between the applet and the browser environment
Swing provides a special subclass of Applet, called javax.swing.JApplet, which should be used for all applets that use Swing components to construct their GUIs.
74
Life Cycle of Applet (1/2)
init This method is intended for whatever initialization is
needed for your applet It is called after the param attributes of the applet
tag.
start This method is automatically called after init method It is also called whenever user returns to the page
containing the applet after visiting other pages.
75
Life Cycle of Applet (2/2)
stop This method is automatically called whenever the
user moves away from the page containing applets You can use this method to stop an animation.
destroy This method is only called when the browser shuts
down normally
Thus, the applet can be initialized only once, started and stopped one or more times in its life, and destroyed only once.
76
When to write Applets vs. Applications An applet runs in the context of a web browser, being
typically embedded within an html page
A Java application runs standalone, outside the browser
Applets are particularly well suited for providing functions in a web page which require more interactivity or animation than HTML
A graphical game, complex editing, or interactive data visualization
The end user is able to access the functionality without leaving the browser
77
Loading Applets in a Web Page
In order to load an applet in a web page, you must specify the applet class with appropriate applet tags. A simple example is below:
<applet code=HelloAppletWorld.class width="200" height="200"></applet>
For development and testing purposes, you can run your applet using appletviewer application
appletviewer HelloAppletWorld.html
78
How to convert an application program into an applet program You need to create a subclass of
java.applet.Applet in which you override the init method to initialize your applet's resources The same way the main method initializes the
application's resources.
init might be called more than once and should be designed accordingly Moreover, the toplevel Panel needs to be added to
the applet in init; usually it was added to a Frame in main.
79
HelloWorldApplet Demo
80
Applet Life Cycle Demo (1/2)
81
Applet Life Cycle Demo (2/2)
82
What Applets Can Do
Applets can usually make network connections to the host they came from.
Applets running within a Web browser can easily cause HTML documents to be displayed.
Applets can invoke public methods of other applets on the same page.
Applets that are loaded from the local file system (from a directory in the user's CLASSPATH) have none of the restrictions that applets loaded over the network do.
83
What Applets Cannot Do Current browsers impose the following
restrictions on any applet that is loaded over the network: An applet cannot load libraries or define native
methods It cannot ordinarily read or write files on the host
that's executing it It cannot make network connections except to the
host that it came from It cannot start any program on the host that's
executing it. It cannot read certain system properties.
84
References
David J. Eck, ”Introduction to Programming Using Java”, Version 5.0, December 2006 http://math.hws.edu/javanotes/
“Working with Images” from http://java.sun.com/docs/books/tutorial/2d/images/index.html
“Java Tutorials: Applets” from http://java.sun.com/docs/books/tutorial/deployment/applet/index.html
“2D Drawing” from http://courses.coreservlets.com/CourseMaterials/java5.html
