Scribd
Upload
61 views

Computer Science 2: Java GUI Programming

a very nice book for java GUI programming which help the beginner to to arrive to his goal and beside this ,this book is very easy with his nice example , so i advice you to download it

Uploaded by

selmi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
61 views

Computer Science 2: Java GUI Programming

a very nice book for java GUI programming which help the beginner to to arrive to his goal and beside this ,this book is very easy with his nice example , so i advice you to download it

Uploaded by

selmi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 26

Computer Science 2

Java GUI Programming


Slides courtesy of Sean P. Strout
([email protected])

04/14/15

What is a GUI?

Java has standard packages for creating


custom Graphical User Interfaces
Some of the fundamental GUI components:

Button

Label

Text Field
Check Radio Buttons
Box

Combo
Box

/usr/local/pub/sps/courses/cs2/gui/ShowComponents/
04/14/15

What is AWT?

The Abstract Window Toolkit was a part of


Java from the beginning
import java.awt.*;

All AWT components must be mapped to


platform specific components using peers
The look and feel of these components is tied
to the native components of the window manager

AWT components are considered to be very


error prone and should not be used in
modern Java applications

04/14/15

What is AWT?

The same application using only AWT


components, running on X-Windows:

/usr/local/pub/sps/courses/cs2/gui/AWTComponents

04/14/15

What is Swing?

With the release of Java 2, the AWT user


interface components were replaced with
Swing
Swing is built on top of AWT to give a
more flexible, robust library
Lightweight components dont rely on the native
GUI
Heavyweight components do depend on the target
platform because they extend AWT components

Swing components are directly painted onto


the canvas using Java code

04/14/15

Java GUI API


AWT: java.awt
Dimensio
n
Font

Objec
t

FontMetri
cs
Colo
r
Graphics
Component

Heavyweight
LayoutManage
r
Pane
l
Contain
er

Window

Apple
t

JApple
t

Frame

JFrame

Dialo
g

JDial
og

JComponen
t

Swing: javax.swing

Lightweight
04/14/15

Java GUI API

AbstractBut
ton
JComponen
t
JTextCompone
nt

JMenuItem

JCheckBoxMenuIt
em

JButton

JMenu

JToggleButt
on

JRadioButtonMenuI
tem

JEditorPa
ne

JCheckBox

JTextFi
eld
JTextAr
ea

JRadioButton
JPasswordFie
ld

JLab
JLi
JComboBox JPan
JOptionPa
JScroll
JSlid
el
st
el
ne
Bar
er
JTabbedPan JSplitP
JLayeredPa JSeparat
JScrollP
JRootPa
e
ane
ne
or
ane
ne
JToolB JMenuBar JPopupMen
JFileChoo
JColorChoos JToolT
ar
u
ser
er
ip
JTre JTabl JTableHead JInternalFr
JProgress
JSpinn
e
e
er
ame
Bar
er
04/14/15

Container Classes

Container classes are GUI components that


are used as containers to contain other GUI
components
For Swing use: Component, Container, JFrame,
JDialog, JApplet, Jpanel
JFrame is a window not contained inside another
window
JDialog is a temporary popup window or message box
JApplet is an applet that can run in a web browser
JPanel is an invisible, nest-able container used
to hold UI components or canvases to draw graphics

A layout manager is used to position and


place components in a container

04/14/15

Frames

You need a frame to hold the UI components


(100, 100)
Title bar
Content
pane

300 pixels hi

400 pixels wide

/
usr/local/pub/sps/courses/cs2/gui/Frames/MyFrame.java
04/14/15

Content Pane
Layered pane
Glass pane
Menu bar

Content pane

The content pane is the part of the frame


where the UI components will be placed
It is a java.awt.Container object
04/14/15

10

Adding Components to a Frame

UI components can be added to the content pane


after they are created

Here, the OK button is centered in the frame


and occupies the whole frame, no matter how it
is resized
/
usr/local/pub/sps/courses/cs2/gui/Frames/MyFrameWithButton.jav
a
04/14/15

11

Layout Managers

There are three basic layout managers


which control how UI components are
organized on the frame
FlowLayout
GridLayout
BorderLayout

Once created, the layout can be set in the


content pane using setLayout
As the window is resized, the UI
components reorganize themselves based on
the rules of the layout

04/14/15

12

FlowLayout

With flow layout, the components arrange


themselves from left to right in the order they
were added
Rows/buttons are left
aligned using
FlowLayout.LEFT

Horizontal g
of 10 pixels

Vertical gap of 20 pixels

/
usr/local/pub/sps/courses/cs2/gui/Layout/ShowFlowLayout.j
ava
04/14/15

13

Extending JFrame
public class GUIMain extends JFrame {
// construct GUI interface with components
public GUIMain() {
// set the layout manager
Container container = getContentPane();
container.setLayout();
// create UI components and add
container.add()
} // GUIMain
// create instance of GUIMain and set
// frame behaviors
public static void main(String args[]) {
GUIMain frame = new GUIMain();
frame.setTitle();

} // main
} // GUIMain
04/14/15

14

GridLayout

With grid layout, the components arrange


themselves in a matrix formation (rows,
columns)
Either the row or column must be non-zero
The non-zero dimension is fixed and the
zero dimension is determined dynamically
The dominating parameter is the rows
/
usr/local/pub/sps/courses/cs2/gui/Layout/ShowGridL
ayout.java
04/14/15

15

GridLayout
2,4

10, 10
0,4

4,4

04/14/15

16

BorderLayout

With border layout, the window is divided


into five areas:
BorderLayout.NORTH

BorderLayout.WEST

BorderLayout.CENTER

BorderLayout.EAST

BorderLayout.SOUTH

Components are added to the frame using a


specified index:
container.add(new JButton(East), BorderLayout.EAST);

/
usr/local/pub/sps/courses/cs2/gui/Layout/ShowBorde
rLayout.java
04/14/15

17

BorderLayout

04/14/15

18

BorderLayout

The components stretch in this manner:


North and South stretch horizontally
East and West stretch vertically
Center can stretch in both directions to fill
space

The default location for a component is


BorderLayout.CENTER
If you add two components to the same
location, only the last one will be
displayed
It is unnecessary to place components to
occupy all areas
04/14/15

19

Color

The color of GUI components can be set


using the java.awt.Color class
Colors are made of red, green and blue
components which range from 0 (darkest
shade) to 255 (lightest shade)
Each UI component has a background and
foreground:
Color color = new Color(128, 0, 0);
JButton button = new JButton();
button.setBackground(color);
// reddish
button.setForeground(new Color(0, 0, 128));

04/14/15

// blueish

20

Color

There are 13 constant colors defined in Color:


BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY,
MAGENTA, ORANGE, PINK, RED, WHITE, YELLOW

/
usr/local/pub/sps/courses/cs2/gui/Color/ColorButtons.ja
va
04/14/15

21

Panels

Write a program to organize the components


for a microwave oven:

text
field
button

12 buttons

The problem is we want to use different


layouts for different components

04/14/15

22

Panels

The window can be subdivided into different


panels
The panels act as sub-containers for grouping
UI components

The content pane


uses a border
layout:
Panel2: East
Button: Center

text
field
button
12 buttons

Panel 2
uses a
border
layout:
text: North
Panel 1:
Center1
Panel
uses a
grid
layout

/
usr/local/pub/sps/courses/cs2/gui/Panels/MicrowaveUI.java
04/14/15

23

Fonts

You can create a font using the Font class


public Font(String name, int style, int size);

The standard fonts are SansSerif,


Serif, Monospaced, Dialog, or
DialogInput
The styles are Font.PLAIN, Font.BOLD,
Font.ITALIC, and Font.BOLD + Font.ITALIC
Font font1 = new Font(SansSerif, Font.BOLD, 16);
Font font2 = new Font(Serif, Font.ITALIC, 12);
JButton button = new JButton(OK);
button.setFont(font1);
04/14/15

24

Graphics

Graphics can be drawn using a class which


extends JPanel
Swing will call the paintComponent method to
draw:
protected void paintComponent(Graphics g);

There are a variety of drawing methods:


drawString(String string, int x, int y);
drawLine(int x1, int y1, int x2, int y2);
drawRect(int x, int y, int w, int h);
drawOval(int x, int y, int w, int h);
drawPolygon(int[] xpoints, int[] ypoints, int npoints);

/
usr/local/pub/sps/courses/cs2/gui/Graphics/DrawStuff.java
04/14/15

25

Graphics
line

filled
oval

filled
arc

filled rectangle

unfilled rectangle

filled
polygon

04/14/15

string

unfilled
oval

unfilled
arc

26

You might also like