Object Oriented Programming

10636212

Dr. Ashraf Armoush

© 2020 Dr. Ashraf Armoush

Chapter 02: Introduction to GUI

© 2020 Dr. Ashraf Armoush

 Graphical User Interface (GUI)
• One of Java’s features is its graphics support that enables
programmers to visually enhance their applications.

• Gives program distinctive “look” and “feel”

• Provides users with basic level of familiarity

• Built from GUI components that are sometimes called

controls or widgets
– (e.g. Text Fields, Button, Labels, Lists, etc..)
• User interacts with GUI component via mouse, keyboard,
or another form of inputs.

© 2020 Dr. Ashraf Armoush , An-Najah National University 3

Frame
• A Frame is a top-level window with a title and a
border. Object

• There are two classes for Frames

– Frame Class (java.awt.Frame) Component
– JFrame Class (javax.swing.JFrame)
(The difference between these classes will be discussed later ) Container

• You can customize your frame through a set of Window

methods e.g.
– setSize
– setTitle Frame
– setVisible
– add
JFrame

© 2020 Dr. Ashraf Armoush , An-Najah National University 4

 Creating a Simple Window
1 import javax.swing.*;
2 public class FirstFrame{
3
4 public static void main( String args[] )
5 {
6 JFrame fr = new JFrame();
7 fr.setTitle("First Frame Demo");
8 fr.setSize(300,300);
9 fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
10 fr.setVisible(true); // fr.show
11 } // end method main
12 } // end class FirstFrame

© 2020 Dr. Ashraf Armoush , An-Najah National University 5

Extending JFrame Class

• You can define your own frame by extending the JFrame class.
• Note that there are two classes in the same file, but only one is public.
1 import javax.swing.*;
2 class MyFrame extends JFrame {
3 JLabel myLabel;
4 //constructor
5 public MyFrame()
6 {
7 setTitle("Frame Demo");
8 setSize(300,300);
9 myLabel = new JLabel("This is a Label");
10 add(myLabel);
11 }
12 }
13 public class FrameDemo{
14 public static void main( String args[] )
15 {
16 MyFrame fr = new MyFrame();
17 fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
18 fr.setVisible(true);
19 }
20 }
© 2020 Dr. Ashraf Armoush , An-Najah National University 6
 Using Graphics in JFrame or Frame
• In order to use graphics in your application, you have to
override the paintComponent() method of the Component
superclass.
public void paintComponent(Graphics g) {
g.setColor(Color.blue);
g.drawRect(……);
}

• Java’s coordinate system:

– By default, the upper-left corner of a GUI
component has the coordinates (0, 0).
– A coordinate pair is composed of an x-
coordinate and a y-coordinate
– The x-coordinate is the horizontal
location moving from left to right.
– The y-coordinate is the vertical location
moving top to bottom.
© 2020 Dr. Ashraf Armoush , An-Najah National University 7

Creating Simple Drawings

import java.awt.Graphics;
import javax.swing.JPanel;

public class DrawPanel extends JPanel

{
// draws an X from the corners of the panel
public void paintComponent(Graphics g)
{
// call paintComponent to ensure the panel displays correctly
super.paintComponent(g);

int width = getWidth(); // total width

int height = getHeight(); // total height

// draw a line from the upper-left to the lower-right

g.drawLine(0, 0, width, height);

// draw a line from the lower-left to the upper-right

g.drawLine(0, height, width, 0);
}
} // end class DrawPanel

© 2020 Dr. Ashraf Armoush , An-Najah National University 8

 Creating Simple Drawings (cont.)

import javax.swing.JFrame;

public class DrawPanelTest

{
public static void main(String[] args)
{
// create a panel that contains our drawing
DrawPanel panel = new DrawPanel();

// create a new frame to hold the panel

JFrame application = new JFrame();

// set the frame to exit when it is closed

application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

application.add(panel); // add the panel to the frame

application.setSize(250, 250); // set the size of the frame
application.setVisible(true); // make the frame visible
}
} // end class DrawPanelTest

© 2020 Dr. Ashraf Armoush , An-Najah National University 9

Ex2: Shapes
import java.awt.Graphics; //handle the display
import javax.swing.JPanel;
public class Shapes extends JPanel
{
private int choice; // user's choice of which shape to draw
// constructor sets the user's choice
public Shapes(int userChoice)
{
choice = userChoice;
}
// draws a cascade of shapes starting from the top-left corner
public void paintComponent(Graphics g)
{
super.paintComponent(g);
for (int i = 0; i < 10; i++)
{ // pick the shape based on the user's choice
switch (choice)
{
case 1: // draw rectangles
g.drawRect(10 + i * 10, 10 + i * 10,
50 + i * 10, 50 + i * 10);
break;
case 2: // draw ovals
g.drawOval(10 + i * 10, 10 + i * 10,
50 + i * 10, 50 + i * 10);
break;
}
}
}
} // end class Shapes

© 2020 Dr. Ashraf Armoush , An-Najah National University 10

 Ex2: Shapes (cont.)
import javax.swing.JFrame;
import javax.swing.JOptionPane;

public class ShapesTest

{
public static void main(String[] args)
{
// obtain user's choice
String input = JOptionPane.showInputDialog(
"Enter 1 to draw rectangle\n" +
"Enter 2 to draw ovals");

int choice = Integer.parseInt(input); // convert input to int

// create the panel with the user's input

Shapes panel = new Shapes(choice);

JFrame application = new JFrame(); // creates a new JFrame

application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
application.add(panel);
application.setSize(300, 300);
application.setVisible(true);
}
} // end class ShapesTest
© 2020 Dr. Ashraf Armoush , An-Najah National University 11

Ex2: Shapes (cont.)

© 2020 Dr. Ashraf Armoush , An-Najah National University 12

 Ex3: Draw Smiley
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JPanel;
public class DrawSmiley extends JPanel
{
public void paintComponent(Graphics g)
{ super.paintComponent(g);

// draw the face

g.setColor(Color.YELLOW);
g.fillOval(10, 10, 200, 200);

// draw the eyes

g.setColor(Color.BLACK);
g.fillOval(55, 65, 30, 30);
g.fillOval(135, 65, 30, 30);

// draw the mouth

g.fillOval(50, 110, 120, 60);

// "touch up" the mouth into a smile

g.setColor(Color.YELLOW);
g.fillRect(50, 110, 120, 30);
g.fillOval(50, 120, 120, 40);
}
} // end class DrawSmiley
© 2020 Dr. Ashraf Armoush , An-Najah National University 13

Ex3: Draw Smiley (cont.)

import javax.swing.JFrame;

public class DrawSmileyTest

{
public static void main(String[] args)
{
DrawSmiley panel = new DrawSmiley();
JFrame application = new JFrame();

application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
application.add(panel);
application.setSize(230, 250);
application.setVisible(true);
}
} // end class DrawSmileyTest

© 2020 Dr. Ashraf Armoush , An-Najah National University 14