Building GUI
GUI Class Hierarchy (Swing)
GUI Class Hierarchy Frames
Dimension
FontMetrics Object
Layout Managers
Color
FlowLayout, GridLayout, BorderLayout
Panel
Applet
JApplet
Window
Frame
JFrame
Dialog
JDialog
Graphics
Drawing on Panels
Component
The paintComponent method
Heavyweight
1
Font
Creating frames, centering frames, adding components to frames
Classes in the java.awt package
LayoutManager
Container
*
Using Colors, Fonts, and Font Metrics Drawing Geometric Figures
Swing Components in the javax.swing package
JComponent
Lines, Rectangles, Ovals, Arcs, and Polygons Lightweight
Page: 1 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
JComponent AbstractButton
JCheckBoxMenuItem JMenuItem
JTextComponent
Font
JCheckBox
FontMetrics
JRadioButton
JEditorPane
JComponent
JTextField
Object
JPasswordField
JList
JTabbedPane
JComboBox
JOptionPane
JFileChooser
Color Graphics
JTextArea JLabel
AWTEvent
JRadioButtonMenuItem
JToggleButton
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
AWT (Optional)
JMenu
JButton
Page: 2 Monday, September 01, 2003
JScrollPane
JPanel
JMenuBar
Component
Container
Panel
Applet
Button
Window
Frame
Label
FileDialog
TextComponent
TextArea
List Choice
CheckBoxGroup
JPopupMenu
JSeparator
JSlider
JRootPane
JPane
Canvas
JProgressBar
JToolBar
JSplitPane
JTable
JTree
MenuComponent
JInternalFrame
JToolTip
JLayeredPane JTableHeader JColorChooser Scrollbar
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Dialog
CheckBox
JScrollBar LayoutManager
Page: 3 Monday, September 01, 2003
TextField
Page: 4 Monday, September 01, 2003
MenuItem
Menu
MenuBar
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications. The Frame class can be used to create windows. For Swing GUI programs, use JFrame class to create widows.
Page: 5 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } }
Page: 7 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Frame
Pull-down Menus
Applet
Panel User Interface Components (UI)
Panel Panel
Panel
Panel
UI
UI
UI
Page: 6 Monday, September 01, 2003
Pull-down Menus
Panel
Panel
User Interface Components
User Interface Components
Panel
Panel
User Interface Components
User Interface Components
panel
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
By default, a frame is displayed in the upper-left corner of the screen. To display a frame at a specified location, you can use the setLocation(x, y) method in the JFrame class. This method places the upper-left corner of a frame at location (x, y).
Page: 8 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
(0, 0)
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Screen (x, y) Frame
int screenWidth = screenSize.width; int screenHeight = screenSize.height; getHeight()
screenHeight // Get the dimension of the frame Dimension frameSize = frame.getSize(); int x = (screenWidth - frameSize.width)/2; int y = (screenHeight - frameSize.height)/2;
getWidth()
screenWidth
Page: 9 Monday, September 01, 2003
frame.setLocation(x, y);
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 10 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Adding Components into a Frame
// Add a button into the frame frame.getContentPane().add( new JButton("OK"));
Container container = frame.getContentPane(); container.add(new JButton("OK"));
JButton jbtn = new JButton(“Close”); frame.getContentPane().add(jbtn);
Page: 11 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
The content pane is a subclass of Container. The statement in the preceding slide can be replaced by the following two lines:
You may wonder how a Container object is created. It is created when a JFrame object is created. A JFrame object uses the content pane to hold components in the frame.
Page: 12 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Java’s layout managers provide a level of abstraction to automatically map your user interface on all window systems. The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container.
Page: 13 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Example-10a Testing the FlowLayout Manager The components are arranged in the container from left to right in the order in which they were added. When one row becomes filled, a new row is started.
Page: 15 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
FlowLayout GridLayout BorderLayout CardLayout GridBagLayout
Page: 14 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
FlowLayout Constructors
public FlowLayout(int align, int hGap, int vGap) Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components.
public FlowLayout(int alignment) Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical.
public FlowLayout() Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical.
Page: 16 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Example 10b Testing the GridLayout Manager
The GridLayout manager arranges components in a grid (matrix) formation with the number of rows and columns defined by the constructor. The components are placed in the grid from left to right starting with the first row, then the second, and so on.
Page: 17 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Example 10c Testing the BorderLayout Manager The 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.
Page: 19 Monday, September 01, 2003
GridLayout
public GridLayout(int rows, int columns) Constructs a new GridLayout with the specified number of rows and columns.
public GridLayout(int rows, int columns,int hGap,int vGap) Constructs a new GridLayout with the specified number of rows and columns, along with specified horizontal and vertical gaps between components.
Page: 18 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Example 10c, cont.
add(Component, constraint) where constraint is
BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER.
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 20 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Using Panels as Containers
Panels act as smaller 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.
Page: 21 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Drawing on Panels
This example uses panels to organize components. The program creates a user interface for a Microwave oven. frame A textfield
A button
p2 12 buttons
p1
Page: 22 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Drawing on Panels, cont.
JPanel can be used to draw graphics (including text) and enable user interaction. To draw in a panel, you create a new class that extends JPanel and override the paintComponent method to tell the panel how to draw things. You can then display strings, draw geometric shapes, and view images on the panel.
Page: 23 Monday, September 01, 2003
Example 10d: Testing Panel
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
public class DrawMessage extends JPanel { public static void main(String[] args) { JFrame frame = new JFrame("DrawMessage"); frame.getContentPane().add(new DrawMessage()); frame.setSize(300, 200); frame.setVisible(true); } /** paint the message */ public void paintComponent(Graphics g) { super.paintComponent(g); g.drawString("Welcome to Java!", 40, 40); }
} Page: 24 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
NOTE
NOTE
The Graphics class is an abstract class for displaying figures and images on the screen on different platforms. The Graphics class is implemented on the native platform in the JVM. When you use the paintComponent method to draw things on a graphics context g, this g is an instance of a concrete subclass of the abstract Graphics class for the specific platform. The Graphics class encapsulates the platform details and enables you to draw things uniformly without concerning specific platforms.
Page: 25 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Whenever a component is displayed, a Graphics object is created for the component. The Swing components use the paintComponent method to draw things. The paintComponent method is automatically invoked to paint the graphics context when the component is first displayed or whenever the component needs to be redisplayed. Invoking super.paintComponent(g) is necessary to ensure that the viewing area is cleared before a new drawing is displayed.
Page: 26 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
The Color Class Color c = new Color(r, g, b); r, g, and b specify a color by its red, green, and blue components.
You can use the following methods to set the component’s background and foreground colors: setBackground(Color c) setForeground(Color c)
Example: setBackground(Color.yellow); setForeground(Color.red);
Example: Color c = new Color(128,100,100);
Page: 27 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 28 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Font
Example:
GraphicsEnvironment e = GraphicsEnvironment. getLocalGraphicsEnvironment(); String[] fnts = e.getAvailableFontFamilyNames();
Font myFont = new Font("SansSerif ", Font.BOLD, 16);
for (int i = 0; i < fnts.length; i++) System.out.println(fnts[i]);
Font myFont = new Font(name, style, size);
Font myFont = new Font("Serif", Font.BOLD + Font.ITALIC, 12);
Page: 29 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 30 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
The FontMetrics Class public void paint(Graphics g) { Font myFont = new Font("Times", Font.BOLD, 16); g.setFont(myFont); g.drawString("Welcome to Java", 20, 40); //set a new font g.setFont(new Font("Courier", Font.BOLD+Font.ITALIC, 12)); g.drawString("Welcome to Java", 20, 70);
public void paint(Graphics g) {
g.getFontMetrics(Font f);
or g.getFontMetrics(); }
}
Page: 31 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 32 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Get FontMetrics
Example 10e Using FontMetrics
public int getAscent()
public int getDescent()
public int getLeading()
public int getHeight()
public int stringWidth(String str)
Page: 33 Monday, September 01, 2003
Objective: Display “Welcome to Java” in SansSerif 20point bold, centered in the frame.
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 34 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Drawing Geometric Figures JPanel
MessagePanel
JFrame 1
TestFontMetrics
xCoordinate: int yCoordinate: int centered: boolean message: String
+getMessage(): String +getXCoordinate(): int +getYCoordinate(): int +isCentered(): boolean +setMessage(message: String): void +setXCoordinate(x: int): voi +setYCoordinate(y: int): void +setCentered(centered: boolean): void +paintComponent(g: Graphics): void +getPerferredSize(): Dimension +getMinimumSize(): Dimension Page: 35 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Drawing Lines Drawing Rectangles Drawing Ovals Drawing Arcs Drawing Polygons
Page: 36 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Drawing Lines drawLine(x1, y1, x2, y2); (x1 , y1)
drawRect(x, y, w, h);
fillRect(x, y, w, h); (x, y) h
(x 2 , y 2)
Page: 37 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
drawRoundRect(x,y,w,h,aw,ah); fillRoundRect(x,y,w,h,aw,ah);
(x, y)
w
Page: 38 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
drawOval(x, y, w, h);
fillOval(x, y, w, h);
(x, y) a h /2 a w /2
h
h
w
Page: 39 Monday, September 01, 2003
w
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 40 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
drawArc(x, y, w, h, angle1, angle2);
fillArc(x, y, w, h, angle1, angle2);
int[] x = {40, 70, 60, 45, 20}; int[] y = {20, 40, 80, 45, 60}; g.drawPolygon(x, y, x.length); g.fillPolygon(x, y, x.length); (x[0], y[0]) (x[1], y[1]) (x[3], y[3])
(x[4], y[4]) (x[2], y[2]) Page: 41 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Example 10f Drawing a Clock
Page: 42 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
xEnd = xCenter + handLength × sin(θ)
Objective: Use drawing and trigonometric methods to draw a clock showing the specified hour, minute, and second in a frame.
yEnd = yCenter - handLength × cos(θ) Since there are sixty seconds in one minute, the angle for the second hand is second × (2π/60)
Page: 43 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Page: 44 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
xEnd = xCenter + handLength × sin(θ) yEnd = yCenter - handLength × cos(θ) The position of the minute hand is determined by the minute and second. The exact minute value comined with seconds is minute + second/60. For example, if the time is 3 minutes and 30 seconds. The total minutes are 3.5. Since there are sixty minutes in one hour, the angle for the minute hand is (minute + second/60) × (2π/60) Page: 45 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
Since one circle is divided into twelve hours, the angle for the hour hand is (hour + minute/60 + second/(60 × 60))) × (2π/12)
Page: 46 Monday, September 01, 2003
Khaitong-2-5-0-9 INT304-Programming Syntax & Semantics: 1/2546
