Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to...

1

Introduction to GUI in Java

2

Graphical User Interface

• Java is equipped with many powerful ,easy to use GUI component such as input and output dialog boxes that you can use them to make your program attractive and user friendly

• GUI-based programs are implemented by using classes from the javax.swing and java.awt packages.

3Creating GUI Objects

// Create a button with text OK JButton jbtOK = new JButton("OK");  // Create a label with text "Enter your name: "JLabel jlblName = new JLabel("Enter your name: ");  

// Create a text field with text "Type Name Here"JTextField jtfName = new JTextField("Type Name Here");  // Create a check box with text boldJCheckBox jchkBold = new JCheckBox("Bold");  // Create a radio button with text redJRadioButton jrbRed = new JRadioButton("Red");  // Create a combo box with choices red, green, and blueJComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"});

Label Text field

Check Box

Radio Button

Combo Box

4

Frames

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 JFrame class can be used to create windows.

For Swing GUI programs, use JFrame class to create widows.

5

Example

6Creating Frames

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);}

}

7JFrame Class

javax.swing.JFrame

+JFrame()

+JFrame(title: String)

+getSize(width: int, height: int): void

+setLocation(x: int, y: int): void

+setVisible(visible: boolean): void

+setDefaultCloseOperation(mode: int): void

+setLocationRelativeTo (c: Component): void

Creates a default frame with no title.

Creates a frame with the specified title.

Specifies the size of the frame.

Specifies the upper-left corner location of the frame.

Sets true to display the frame.

Specifies the operation when the frame is closed.

Sets the location of the frame relative to the specified component. If the component is null, the frame is centered on the screen.

8Creating a JFrame

a JFrame class have the following component:

setResizable(boolean var); setDefaultCloseOperation(JFrame. *********); EXIT_ON_CLOSE

DO_NOTHING_ON_CLOSE

9Example

10

Example

After Pressing OK or closing the “How are you?” dialog, the “Good Bye” dialog appears

11

Using Dialog Boxes for Input/Output

• JOptionPane this class is contained in the package javax.swing

• We will use two methods of this class :

• showInputDialog

• showMessageDialog

12ShowInputDialog

General syntaxStr= JOptionPane.showInputDialog(ParentComponent,string expression, box title , message type);

This method returns the input as a String value

Example:str=JOptionPane.showInputDialog(FrameOne,"Enter your name“, “Input” ,QUESTION_MESSAGE);

13showMessageDialog

General syntaxJOptionPane.showMessageDialog(ParentComponent, message string, box title , message type);

14Adding pane to a Frame

15

16Example 2

17

18Message Type

JOptionPane.showMessageDialog(Jframe/null,"Hello","Title", JOptionPane.*********);

INFORMATION_MESSAGE ERROR_MESSAGE WARNING_MESSAGE

QUESTION_MESSAGE

PLAIN_MESSAGE

19Example for adding two numbers

20

21Subclassing JFrame

To create a customized frame window, we define a subclass of the JFrame class.

class TESTGUI extends JFrame {

Public TESTGUI ()

{ // constructor

// necessary code

//set the frame default properties} }

write a code to do the following : An instance of TESTGUI will have the following default

characteristics:The title is set to My First Subclass.The program terminates when the close box is clicked.The size of the frame is 300 pixels wide by 200 pixels high.The frame is positioned at screen coordinate (150, 250).

22Jframe Subclass

23

This gray area is the content pane of this frame.

This gray area is the content pane of this frame.

The content pane is where we put GUI objects such as buttons, labels, scroll bars, and others. We access the content pane by calling the frame’s getContentPane method in class Container.

24Accessing the content pane of a JFrame

To retrieve the content pane of a JFrame:

frame.getContentPane(); To add a component to the content pane:

frame.getContentPane().add(yellowLabel); To remove a component from the content pane:

frame.getContentPane().remove(yellowLabel);

25Using Panels as Sub-Containers

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.

To add a component to JFrame, you actually add it to the content pane of JFrame. To add a component to a panel, you add it directly to the panel using the add method.

26Creating a JPanel

You can use new JPanel() to create a panel with a default FlowLayout manager

or new JPanel(LayoutManager) to create a panel with the specified layout manager.

Use the add(Component) method to add a component to the panel. For example,

JPanel p = new JPanel();

p.add(new JButton("OK"));

27

Layouts

28

Layout Managers

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.

Layout managers are set in containers using the setLayout(LayoutManager) method in a container.

29Kinds of Layout Managers

FlowLayout

GridLayout

BorderLayout

30FlowLayout Example

FlowLayout is the default layout manager for every JPanel. It simply lays out components in a single row, starting a new row if its container is not sufficiently wide.

If container is more than wide enough, components are centered Can change alignment using FlowLayout.setAlignment()

31The FlowLayout Class

java.awt.FlowLayout

-alignment: int

-hgap: int

-vgap: int

+FlowLayout()

+FlowLayout(alignment: int)

+FlowLayout(alignment: int, hgap: int, vgap: int)

The alignment of this layout manager (default: CENTER).

The horizontal gap of this layout manager (default: 5 pixels).

The vertical gap of this layout manager (default: 5 pixels).

Creates a default FlowLayout manager.

Creates a FlowLayout manager with a specified alignment.

Creates a FlowLayout manager with a specified alignment, horizontal gap, and vertical gap.

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.

32GridLayout

GridLayout simply makes a bunch of components equal in size and displays them in the requested number of rows and columns.

33GridLayout

java.awt.GridLayout

-rows: int

-columns: int

-hgap: int

-vgap: int

+GridLayout()

+GridLayout(rows: int, columns: int)

+GridLayout(rows: int, columns: int, hgap: int, vgap: int)

The number of rows in this layout manager (default: 1).

The number of columns in this layout manager (default: 1).

The horizontal gap of this layout manager (default: 0).

The vertical gap of this layout manager (default: 0).

Creates a default GridLayout manager.

Creates a GridLayout with a specified number of rows and columns.

Creates a GridLayout manager with a specified number of rows and columns, horizontal gap, and vertical gap.

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.

34BorderLayout

Every content pane is initialized to use a BorderLayout.the content pane is the main container in all frames, applets, and dialogs.) ABorderLayout places components in up to five areas: top, bottom, left, right, and center.

35BorderLayout

java.awt.BorderLayout

-hgap: int

-vgap: int

+BorderLayout()

+BorderLayout(hgap: int, vgap: int)

The horizontal gap of this layout manager (default: 0).

The vertical gap of this layout manager (default: 0).

Creates a default BorderLayout manager.

Creates a BorderLayout manager with a specified number of horizontal gap, and vertical gap.

The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.

36

1. Create it Instantiate object:

JButton b = new JButton();

2. Configure it Methods:

b.setText(“Press me”);

3. Add it panel.add(b);

4. Listen to it Events: Listeners

Press me

Adding components to Frame

37

import javax.swing.*;

class Hello {

public static void main(String[] args){

JFrame f = new JFrame(“Hello World”);

JPanel p = new JPanel();

JButton b = new JButton(“press me”);

p.add(b); // add button to panel

f.getContentPane().add(p); // add panel to frame

}

}

press me