introduction to gui in 1 graphical user interface 2 nouf almunyif
TRANSCRIPT
![Page 1: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/1.jpg)
Nouf Almunyif 1
Introduction to GUI in
Graphical User Interface
2
![Page 2: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/2.jpg)
Nouf Almunyif 2
Creating a JFrame
• a JFrame class have the following component:• JFrame(); JFrame(string Title);• setTitle(String title );• setSize(int Wedth , int length);• setVisible(boolean var);• setLocation (FRAME_X_ORIGIN, FRAME_Y_ORIGIN)
![Page 3: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/3.jpg)
Nouf Almunyif 3
Creating a JFrame
• a JFrame class have the following component:• setResizable(boolean var);
• setDefaultCloseOperation(JFrame. ????????);– EXIT_ON_CLOSE– DO_NOTHING_ON_CLOSE
![Page 4: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/4.jpg)
Nouf Almunyif 4
showMessageeDialogGeneral syntaxJOptionPane.showMessageDialog(ParentComponent, message string, box title , msseg type);
Example:JOptionPane.showMessageDialog(null,"Hello","Title",
JOptionPane.INFORMATION_MESSAGE);
Example:JOptionPane.showMessageDialog(null,"Hello");
![Page 5: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/5.jpg)
Nouf Almunyif 5
Example
![Page 6: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/6.jpg)
Nouf Almunyif 6
Example
After Pressing OK or closing the “How are you?” dialog, the “Good Bye” dialog appears
![Page 7: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/7.jpg)
Nouf Almunyif 7
Subclassing 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).
![Page 8: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/8.jpg)
Nouf Almunyif 8
![Page 9: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/9.jpg)
Nouf Almunyif 9
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.
![Page 10: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/10.jpg)
Nouf Almunyif 10
Frame’s content pane
//IN CONSTRUCTORContainer contentPane = getContentPane();
contentPane methods:setBackground(Color.BLUE);add(Object_name);setLayout( layout_type);
The Class Container is contained in the packageJava.awt.import java.awt.*;
![Page 11: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/11.jpg)
Nouf Almunyif 11
Placing GUI Objects on a Frame
• There are two ways to put GUI objects on the content pane of a frame:–Use a layout manager (using setLayout()method)
• FlowLayout• BorderLayout• GridLayout
–Use absolute positioning• null layout manager
![Page 12: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/12.jpg)
Nouf Almunyif 12
Buttons
• Example of Using FlowLayout to places button on the frame (in the top-to-bottom, left-to right order)
Methods : addActioLesitener(actioLesitener obj);
![Page 13: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/13.jpg)
Nouf Almunyif 13
Text Field
JTextField(int columns ); JTextField();setColumns(int col);getText(); //return the text contained in text fieldsetEditable(boolen var); // if the value of var is false
the user can’t type in the text fieldaddActioLesitener(actioLesitener obj); // register
a listener object to the text field
A JTextField object allows the user to enter a single line of text.
![Page 14: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/14.jpg)
Nouf Almunyif 14
JTextArea
JTextArea textArea = new JTextArea( );
. . .
textArea.setText("Hello\n");
textArea.append("the lost ");
textArea.append("world");
textArea.setColumns(int col);
textArea.setRows(int row);
textArea. setEditable(boolen var);
![Page 15: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/15.jpg)
Nouf Almunyif 15
JTextArea
By default a JTextArea does not have any scroll bars. To add scroll bars, we place a JTextArea in a JScrollPane object
![Page 16: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/16.jpg)
Nouf Almunyif 16
Lable
A JLabel object displays uneditable text (or image).
JLabel imgLabel = new JLabel(new ImageIcon("cat.gif"));
![Page 17: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/17.jpg)
Nouf Almunyif 17
Example: adding two numbers program
![Page 18: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/18.jpg)
Nouf Almunyif 18
![Page 19: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/19.jpg)
Nouf Almunyif 19
Example: adding two numbers program
FlowLayout() GridLayout(3,2)
![Page 20: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/20.jpg)
Nouf Almunyif 20
event handling
• We have learned how to create a window ,container ,label, buttons and text fields
• Now we should specify • In button how such a button behave when we
click it? • In text field An action event is generated when
the user presses the ENTER key.
![Page 21: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/21.jpg)
Nouf Almunyif 21
event handling
clicking a button create an event known as action event, which sends a message to another object known as action listener , when he receives the message he perform soma actions( execute a method).
• The mechanism to process events is called event handling.
![Page 22: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/22.jpg)
Nouf Almunyif 22
event handling
you must do two things :1. You must define the method that will be
invoked when the event is sent to the listener
2. for each object (button or text field )you must specify the corresponding listener object (this known as registration).
![Page 23: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/23.jpg)
Nouf Almunyif 23
action event
• The action event is handled by the class ActionListener witch contain only one codless method actionPerformed.
• The class ActionListener is a spiceal ype of a class called interface
Public interface ActionListener{Public void actionPerformed(ActionEvent e );}
![Page 24: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/24.jpg)
Nouf Almunyif 24
action event
• We can’t instantiate an object from interface so we build a class on top of it
Private class Buttonhandler implement ActionListener {
Public void actionPerformed(ActionEvent e ){// write what should button do}}
![Page 25: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/25.jpg)
Nouf Almunyif 25
2. specify the corresponding listener object
![Page 26: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/26.jpg)
Nouf Almunyif 26
Example: adding two numbers program cont.
![Page 27: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/27.jpg)
Nouf Almunyif 27
![Page 28: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/28.jpg)
Nouf Almunyif 28
![Page 29: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/29.jpg)
Nouf Almunyif 29
![Page 30: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/30.jpg)
Nouf Almunyif 30
![Page 31: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/31.jpg)
Nouf Almunyif 31
Container as Event Listener
• Instead of defining a separate event listener such as ButtonHandler, it is much more common to have an object that contains the event sources be a listener. – Example: We make the frame a listener of the
action events of the buttons it contains.
![Page 32: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/32.jpg)
Nouf Almunyif 32
The changes to the previous program are
Remove class Bhandler and all its objects and just keep the actionPerformed method
![Page 33: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/33.jpg)
Nouf Almunyif 33
JTextField events
• If we want to respond to both button clicking and pressing ENTER event in TextField
1- We should register a listener to both of them
![Page 34: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/34.jpg)
Nouf Almunyif 34
public void actionPerformed(ActionEvent event) {
if (event.getSource() instanceof JButton) { //button code } else { //TextFiled code
}}
![Page 35: Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649f4f5503460f94c713dc/html5/thumbnails/35.jpg)
Nouf Almunyif 35
What if there is two buttons?
public void actionPerformed(ActionEvent event) {JButton clickedButton = (JButton) event.getSource();
if (clickedButton == button1) {}Else {}