Java - GUI and Graphics
Java GUI Basics
In this article, the framework of Java GUI API will be introduced. We can use the GUI components to develop user-friendly interfaces for Java applications.
What is Swing?
Swing is a GUI widget toolkit for Java. It is part of Oracle’s Java Foundation Classes – an API for providing a graphical user interface for Java programs. Swing was developed to provide a more sophisticated set of GUI components than the earlier Abstract Window Toolkit.
Common GUI Objects in Swing:
Swing vs. AWT
- So why do the GUI component classes have a prefix
J
?
Because there is already a old GUI class in java.awt
package.
What is AWT?
When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). For every platform on which Java runs, the AWT components are automatically mapped to the platform-specific components through their respective agents, known as peers.
- AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects.
- Besides, AWT is prone to platform-specific bugs because its peer-based approach relies heavily on the underlying platform.
To distinguish new Swing component classes from their AWT counterparts, Swing GUI component classes are named with a prefix J.
Why We are using Swing for GUI components?
With the release of Java 2, the AWT user-interface components were replaced by Swing components.
- Swing components are painted directly on canvases using Java code, except for components that are subclasses of
java.awt.Window
orjava.awt.Panel
, which must be drawn using native GUI on a specific platform. - Swing components are less dependent on the target platform and use less of the native GUI resource.
For this reason, Swing components that do not rely on native GUI are referred to as lightweight components, and AWT components are referred to as heavyweight components.
Note we will still be using both AWT and Swing.
Frames
Frames are under Swing.
Frame is a window that is not contained inside another window.
- the basis to contain other user interface components in Java GUI applications
- For Swing GUI programs, use
JFrame
class to create windows. - A container such as JFrame is also a component.
Code Example:
1 | import javax.swing.*; // * means import all |
- For components, the default Visible is true.
- For frames, the dafault Visible is false.
The setDefaultCloseOperation()
method is used to specify one of several options for the close button. Use one of the followinng constants to specify your choice:
JFrame.EXIT_ON_CLOSE
- Exit the application.JFrame.HIDE_ON_CLOSE
- Hide the frame, but keep the application running.JFrame.DISPOSE_ON_CLOSE
- Dispose of the frame object but keep the application runnning.JFrame.DO_NOTHING_ON_CLOSE
- Ignore the click
Note: If you forget to call
setDefaultCloseOperation()
you will getJFrame.HIDE_ON_CLOSE
by default. This can be frustrating, because it looks like you have “killed” the program, but it keeps on running, and you see no frame.
Adding Common GUI Objects into Frame
1 | import javax.swing.*; // * means import all |
Color and Fonts
Color and Fonts are under AWT.
We can use the java.awt.Color
class and java.awt.Font
class to set Color and Font of the Swing GUI Objects.
Color Class
- Colors are made of red, green, and blue components, each of which is represented by a byte value that describes its intensity, ranging from 0 (darkest shade) to 255 (lightest shade).
- We can use
RGB
to represent a color- e.g.
Color c = new Color(r, g, b)
where r g b are the r g b values
- e.g.
- 13 Standard colors are also provided
BLACK
orblack
BLUE
orblue
CYAN
orcyan
DARK_GRAY
ordarkGray
GRAY
orgray
GREEN
orgreen
LIGHT_GRAY
orlightGray
MAGENTA
ormagenta
ORANGE
ororange
PINK
orpink
RED
orred
WHITE
orwhite
YELLOW
oryellow
The standard color names are constants, but they are named like variables with lowercase for the first word and uppercase for the first letter of subsequent words. Thus the color names violate the Java naming convention. Since JDK 1.4, you can also use the new constants which are the uppercase version.
We can set the component’s background and foreground colors.
To create color: Color c = new Color(r, g, b);
1 | import javax.swing.*; // * means import all |
Font Class
- Standard font names that are supported in all platforms are:
- SansSerif
- Serif
- Monospaced
- Dialog
- DialogInput
- Font Style:
- Font.PLAIN (0)
- Font.BOLD (1)
- Font.ITALIC (2)
- Font.BOLD + Font.ITALIC (3)
To use the create the Font: Font myFont = new Font(name, style, size);
1 | import javax.swing.*; // * means import all |
Finding All available Font Names
The following statements print all the available font names in the system:
1 | import java.awt.GraphicsEnvironment; |
Borders
Border is also under Swing.
You can set a border on any object of the JComponent class.
import javax.swing.border.*
Titled Border
- To create a titled border, use:
new TitledBorder(String title)
1 | JPanel panel = new JPanel(); |
Line Border
- To create a line border, use:
new LineBorder(Color color, int width)
1 | JPanel panel = new JPanel(); |
Layout Managers
Layout Managers is under AWT.
Java’s layout managers provide a level of abstraction to automatically map your user interface on all window systems.
- The Java GUI components are placed in containers.
- Each container has a layout manager to arrange the Java GUI components within the container.
Types of Layout
Layout managers are set in containers using the setLayout(LayoutManager)
method in a container.
- FlowLayout
- GridLayout
- BorderLayout
FlowLayout Manager
- The components are arranged in the container from left to right in the order in which they were added.
- When one row is filled, a new row is started.
- The default layout of a JPanel is FlowLayout.
1 | import javax.swing.JLabel; |
You should use FlowLayout to position a Component within an application Frame if you want the size of the Component NOT affected by the Frame size.
GridLayout Manager
- components arranged in a grid (matrix) formation.
- The components are placed in the grid from left to right, starting from the first row, then the second, and so on, in the order in which they were added.
1 | import javax.swing.JLabel; |
Note
GridLayout(int rows, int cols)
GridLayout(int rows, int cols, int hgap, int vgap)
Rows or Cols can be 0. which means that any number of objects can be placed in a row or in a column.
However if you set both rows and cols as 0 there will be a runtime error.
If the components number is more than the grid itself can hold, It will expands the columns.
E.g. Suppose a JFrame uses the GridLayout(2, 2). If you add six buttons to the frame, 3 columns are displayed.
BorderLayout Manager
- BorderLayout manager divides the container into five areas: East, South, West, North, and Center.
- Components are added to a BorderLayout by using the
add
method. - The default layout of a contentPane in a JFrame is BorderLayout.
1 | import javax.swing.JButton; |
Using Panels as Sub-Containers
JPanel is under Swing.
Panels act as sub-containers for grouping user interface components.
- **It is recommended that you place the user interface components in panels and place the panels in a frame. **
You can also place panels in a panel.
- You can use
new JPanel()
to create a panel with a default FlowLayout manager ornew JPanel(LayoutManager)
to create a panel with the specified layout manager. - To add a component to a panel, you add it directly to the panel using the
add
method, just like what we did to the frame.
1 | JPanel p = new JPanel(); // default FlowLayout |
Example using Panels with LayoutManager
- This example uses panels to organize components.
- The program creates a user interface for a Microwave oven.
1 | import java.awt.*; |
Java Graphics
- You can draw graphics on any GUI components.
Unlike the Conventional Coordinate System, Java use this Coordinate System.
The coordinate of the upper-left corner of a frame is (0,0).
The Graphics Class
Graphics class is under AWT.
You can draw strings, lines, rectangles, ovals, arcs, polygons, and polylines, using the methods in the Graphics class.
To use the class, import java.awt.Graphics
As mentioned, you can just
import java.awt.*
.
Each GUI Component Has its Own Coordinate System
Drawing Strings / Lines
1 | drawString(String s, int x, int y); |
Drawing Rectangles
1 | drawRect(int x, int y, int w, int h); |
Drawing Rounded Rectangles
1 | drawRoundRect(int x, int y, int w, int h, int aw, int ah); |
Drawing Ovals
1 | drawOval(int x, int y, int w, int h); |
Drawing Arcs
1 | drawArc(int x, int y, int w, int h, int angle1, int angle2); |
Drawing Polygons and Polylines
1 | int[] x = {40, 70, 60, 45, 20}; |
Image Icons
Image Icon is under Swing.
Java uses the javax.swing.ImageIcon
class to represent an icon.
- An icon is a fixed-size picture; typically it is small and used to decorate components.
- You can display image icons in labels and buttons.
- Images are normally stored in image files.
- To construct an image icon:
new ImageIcon(filepath)
1 | ImageIcon icon = new ImageIcon("image/smiley.jpg"); |
Image Class
Image class is under AWT
To display an image in a flexible size, you need to use java.awt.Image
class.
- An image can be created from an image icon using the
getImage()
method as follows :
1 | Image image = imageIcon.getImage(); |
Using a label as an area for displaying images is simple and convenient, but you don’t have much control over how the image is displayed.
- A more flexible way to display images is to use the
drawImage
method of the Graphics class on a panel.
Note To paint something we first need a surface(canvas) where to paint on.
In the same way a canvas needs a frame to hold it, our JPanel will be framed in a window made by the JFrame class.
Full example of Graphic class
SwingPaintDemo.java
1 | import javax.swing.JFrame; |
MyPanel.java
- The paintComponent method is where all of your painting code should be placed.
- It is true that this method will be invoked when it is time to paint, but painting actually begins higher up the class heirarchy, with the paint method (defined by java.awt.Component.)
- This method will be executed by the painting subsystem whenever your component needs to be rendered. Its signature is:
public void paint(Graphics g)
1 | class MyPanel extends JPanel { |
For all practical purposes,
paintComponent
will be the only method that you will ever need to override.
Output:
Some Concept Questions
Association, Composition and Aggregation in Java
What is best to describe the relationship between a container and a Swing GUI object in the container?
Composition
a Swing GUI object in the container is a part of container
a Swing GUI object is in the container
- In composition, both the entities are dependent on each other.
What is best to describe the relationship between a container and a layout manager?
Aggregation
Container has a layout manager
- It is a unidirectional association i.e. a one way relationship.
What is best to describe the relationship between Component and Color?
Association
What is best to describe the relationship between Component and Font?
Association
What is best to describe the relationship between JComponent and JButton?
Inheritance
Given a Graphics object g, to draw a line from the upper left corner to the bottom right corner, you use ________.
g.drawLine(0, 0, getWidth(), getHeight())
Suppose a button jbt is placed in a frame, the coordinate of the button within the content pane of the frame is ________.
(jbt.getX(), jbt.getY())
To draw graphics, it is better to declare a class that extends ________ and override the paintComponent method.
JPanel
You should override the ________ method to draw things on a Swing component.
paintComponent()
Given a Graphics object g, to draw a polygon to connect points (3, 3), (4, 10), (10, 20), (2, 100), you use ________.
g.drawPolygon(new int[ ]{3, 4, 10, 2}, new int[ ]{3, 10, 20, 100}, 4)
Given a Graphics object g, to draw a filled oval with width 20 and height 30 centered at (50, 50), you use ________.
g.fillOval(40, 35, 20, 30)
Given a Graphics object g, to draw a filled arc with radius 20 centered at (50, 50) and start angle 0 and spanning angle 90, you use ________.
g.fillArc(30, 30, 40, 40, 0, 90)
To create a JPanel of the BorderLayout, use ________.
JPanel p = new JPanel(new BorderLayout());
Analyze the following code.
1 | import java.awt.*; |
Only button Cancel is shown.
To create an image icon for a file in c:\book\image\icon, use ________.
new ImageIcon(ʺc:\\book\\image\\iconʺ);
Note because
\
is a special character in String. we need to apply another\
.