GUI Programming in Java Presented by Thanh Pham [email_address] 06/2007 B070038 – NIIT Quang Trung Because Learning Never Stop!

Contents Basic Concepts 1 AWT and Swing Control Components 2 Layout Manager 3 Event Handling 4 Other References 5

Basic Concepts Basic Concepts Exercises Demos AWT vs. Swing GUI?

GUI? Graphical User Interface (pronounced "GOO-ee“). Presents a user-friendly mechanism for interacting with an application. Users can learn how to use an app quickly and use it more productively. Ex: Internet Explorer, MS Word, JCreator… GUIs are built from GUI components (controls or widgets-window gadget). A GUI component is an object with which the user interacts via the mouse, the keyboard or another form of input, such as voice recognition.

Graphical User Interface (pronounced "GOO-ee“).

Presents a user-friendly mechanism for interacting with an application.

Users can learn how to use an app quickly and use it more productively.

Ex: Internet Explorer, MS Word, JCreator…

GUIs are built from GUI components (controls or widgets-window gadget).

A GUI component is an object with which the user interacts via the mouse, the keyboard or another form of input, such as voice recognition.

Abstract Window Toolkit (AWT) vs. Swing Similarities: Tools provided by Java for developing interactive GUI applications Provides GUI components that can be used in creating Java applications and applets

Similarities:

Tools provided by Java for developing interactive GUI applications

Provides GUI components that can be used in creating Java applications and applets

Abstract Window Toolkit (AWT) vs. Swing AWT (Abstract Window Toolkit) Some AWT components use native code Platform-dependent Ensure that the look and feel of an application run on different machines be comparable Swing Written entirely using the Java programming language Platform-independent Ensures applications deployed across different platforms have the same appearance Built around a number of APIs that implement various parts of the AWT Can be used with AWT

AWT (Abstract Window Toolkit)

Some AWT components use native code

Platform-dependent

Ensure that the look and feel of an application run on different machines be comparable

Swing

Written entirely using the Java programming language

Platform-independent

Ensures applications deployed across different platforms have the same appearance

Built around a number of APIs that implement various parts of the AWT

Can be used with AWT

Demo MessageBox InputBox Create Frame (AWT) Create Frame (Swing) CenterFrame

MessageBox

InputBox

Create Frame (AWT)

Create Frame (Swing)

CenterFrame

Exercises Display two input-boxes that accepts two numbers then shows the result. Accepts three numbers, displays the largest, smallest. (Assume that all input values are valid numbers) Create a simple frame

Display two input-boxes that accepts two numbers then shows the result.

Accepts three numbers, displays the largest, smallest.

(Assume that all input values are valid numbers)

Create a simple frame

AWT and Swing Control Components AWT and Swing Control Components Exercises Demos Swing AWT

AWT Control Components An AWT control is a component that enables end users to interact with applications created in Java. All AWT controls in Java are subclasses of the Component class. The Component class provides the add() method to add AWT components to containers, such as an applet or a window.

An AWT control is a component that enables end users to interact with applications created in Java.

All AWT controls in Java are subclasses of the Component class.

The Component class provides the add() method to add AWT components to containers, such as an applet or a window.

AWT Control Components TextField TextArea Button List CheckBox Choice Labels

TextField

TextArea

Button

List

CheckBox

Choice

Labels

Demo FrameWithControl

FrameWithControl

Swing Control Components Swing components contain the Pluggable Look and Feel (PL&F) feature that allows applications to have the same behavior on various platforms. Identifying the Swing Component Class Hierarchy The JComponent class is the root of the Swing hierarchy, which is an extension of the AWT container class. The class hierarchy of the Swing components is categorized into: Top-level Swing Containers: Acts as a container for placing the intermediate-level and atomic swing components, such as panels, frames, buttons, and check boxes. Intermediate-level Swing Containers: Placed on the top-level containers and contains atomic components. Atomic Components: Placed on the intermediate-level swing containers. Atomic components are used to accept input from a user.

Swing components contain the Pluggable Look and Feel (PL&F) feature that allows applications to have the same behavior on various platforms.

Identifying the Swing Component Class Hierarchy

The JComponent class is the root of the Swing hierarchy, which is an extension of the AWT container class.

The class hierarchy of the Swing components is categorized into:

Top-level Swing Containers: Acts as a container for placing the intermediate-level and atomic swing components, such as panels, frames, buttons, and check boxes.

Intermediate-level Swing Containers: Placed on the top-level containers and contains atomic components.

Atomic Components: Placed on the intermediate-level swing containers. Atomic components are used to accept input from a user.

Swing Control Components Using the Top-level Swing Containers JApplet The JApplet class is an extension of the AWT applet class. The Swing components that contain an applet need to extend the JApplet class. The JApplet() constructor enables you to create a swing applet instance when you create an instance of the JApplet class. JFrame: The JFrame class is an extension of the AWT Frame class. You cannot add components directly to JFrame.

Using the Top-level Swing Containers

JApplet

The JApplet class is an extension of the AWT applet class.

The Swing components that contain an applet need to extend the JApplet class.

The JApplet() constructor enables you to create a swing applet instance when you create an instance of the JApplet class.

JFrame:

The JFrame class is an extension of the AWT Frame class.

You cannot add components directly to JFrame.

Swing Control Components Using the Top-level Swing Containers (Cont.) JDialog The JDialog class is an extension of the AWT java.awt.Dialog class. Using the Intermediate Level Swing Containers JPanel JPanel class is an extension of the JComponent class that provides a replacement for the AWT Panel class. You create a panel and add various components to it. The panel is further added to the content pane, which represents the display area of a window, a dialog, or a frame. JPanel supports all layout managers of AWT. By default, JPanel applies the flow layout manager.

Using the Top-level Swing Containers (Cont.)

JDialog

The JDialog class is an extension of the AWT java.awt.Dialog class.

Using the Intermediate Level Swing Containers

JPanel

JPanel class is an extension of the JComponent class that provides a replacement for the AWT Panel class.

You create a panel and add various components to it.

The panel is further added to the content pane, which represents the display area of a window, a dialog, or a frame.

JPanel supports all layout managers of AWT.

By default, JPanel applies the flow layout manager.

Swing Control Components Using the Intermediate Level Swing Containers (Contd.) JTabbedPane: The JTabbedPane class is used to create a tabbed pane component that enables you to switch between groups of components by clicking a tab with a given label. Tabs are added to the JTabbedPane object by using the addTab() method. The JTabbedPane class enables you to add multiple components but it displays only a single component at a time. Using the Atomic Components JButton JTextField JCheckBox JComboBox JLabel JRadioButton

Using the Intermediate Level Swing Containers (Contd.)

JTabbedPane:

The JTabbedPane class is used to create a tabbed pane component that enables you to switch between groups of components by clicking a tab with a given label.

Tabs are added to the JTabbedPane object by using the addTab() method.

The JTabbedPane class enables you to add multiple components but it displays only a single component at a time.

Using the Atomic Components

JButton

JTextField

JCheckBox

JComboBox

JLabel

JRadioButton

Demo JFrameWithControl

JFrameWithControl

Exercises

Layout Managers Layout Managers Demo Grid Layout Border Layout Flow Layout

Layout Managers The layout managers are used to position the components, such as an applet, a panel, or a frame in a container. The layout managers implement the java.awt.LayoutManager interface. A layout manager is an instance of the LayoutManager interface in Java. You can use the following method to apply the desired layout to the components: void setLayout(layoutManager obj) In the preceding syntax, obj is the reference to the desired layout manager. Java has various predefined classes of layout managers. All layout managers make use of the setLayout() method to set the layout of a container. If the setLayout() method is not used, then the default layout of the container is set.

The layout managers are used to position the components, such as an applet, a panel, or a frame in a container.

The layout managers implement the java.awt.LayoutManager interface.

A layout manager is an instance of the LayoutManager interface in Java.

You can use the following method to apply the desired layout to the components:

void setLayout(layoutManager obj)

In the preceding syntax, obj is the reference to the desired layout manager.

Java has various predefined classes of layout managers.

All layout managers make use of the setLayout() method to set the layout of a container.

If the setLayout() method is not used, then the default layout of the container is set.

Layout Managers The different types of layout managers are: FlowLayout Manager The flow layout is the default layout manager used for the Applet class. In the flow layout manager, the components are placed in a container window in a sequence one after the other in rows. Java provides the FlowLayout class to apply flow layout to the various components that you are inserting in an applet. You can use the following constructors to create an instance of the FlowLayout class: FlowLayout() FlowLayout(int align) FlowLayout(int align, int hgap,int vgap)

The different types of layout managers are:

FlowLayout Manager

The flow layout is the default layout manager used for the Applet class.

In the flow layout manager, the components are placed in a container window in a sequence one after the other in rows.

Java provides the FlowLayout class to apply flow layout to the various components that you are inserting in an applet.

You can use the following constructors to create an instance of the FlowLayout class:

FlowLayout()

FlowLayout(int align)

FlowLayout(int align, int hgap,int vgap)

Layout Managers BorderLayout Manager BorderLayout is the default layout of the Frame class. The BorderLayout layout manager divides the container into north, south, east, west, and centre regions. You can place five components or controls in each part. Java provides the BorderLayout class to apply the border layout to the components. The setLayout() method is used for applying border layout to a container. You specify the directions for the BorderLayout using the BorderLayout.NORTH, BorderLayout.SOUTH, BorderLayout.EAST, BorderLayout.WEST, and BorderLayout.CENTER constants. You can use the following constructors to create an instance of the BorderLayout class: BorderLayout() BorderLayout(int h, int v)

BorderLayout Manager

BorderLayout is the default layout of the Frame class.

The BorderLayout layout manager divides the container into north, south, east, west, and centre regions.

You can place five components or controls in each part.

Java provides the BorderLayout class to apply the border layout to the components.

The setLayout() method is used for applying border layout to a container.

You specify the directions for the BorderLayout using the BorderLayout.NORTH, BorderLayout.SOUTH, BorderLayout.EAST, BorderLayout.WEST, and BorderLayout.CENTER constants.

You can use the following constructors to create an instance of the BorderLayout class:

BorderLayout()

BorderLayout(int h, int v)

Layout Managers GridLayout Manager The grid layout is the layout that divides the container into rows and columns. The intersection of a row and a column of the grid layout is called cell. The GridLayout class of Java enables you to create a grid layout. All the components in a grid are of the same size. You can use the following constructors to create an instance of the GridLayout class: GridLayout() GridLayout(int r, int c) GridLayout(int r, int c, int h, int v)

GridLayout Manager

The grid layout is the layout that divides the container into rows and columns.

The intersection of a row and a column of the grid layout is called cell.

The GridLayout class of Java enables you to create a grid layout.

All the components in a grid are of the same size.

You can use the following constructors to create an instance of the GridLayout class:

GridLayout()

GridLayout(int r, int c)

GridLayout(int r, int c, int h, int v)

Demo FlowLayout BorderLayout GridLayout

FlowLayout

BorderLayout

GridLayout

To be continued To be continued….

To be continued….

References Java Passion from Sun Microsystems Java Tutorial from Sun Microsystems Core Java 2 Volume I Fundamentals 7 th Edition Java How to Program 6 th Edition Java Swing 2 nd Edition

Java Passion from Sun Microsystems

Java Tutorial from Sun Microsystems

Core Java 2 Volume I Fundamentals 7 th Edition

Java How to Program 6 th Edition

Java Swing 2 nd Edition

www.niit-vn.com www.niit-vn.com/4rum Thank You !