GRAPHICAL USER INTERFACES

LEARNING GOAL AND SUCCESS CRITERIA

LG
We will learn and utilize GUI components such as: frames, panels,
buttons, labels and text fields to design and code programs to solve
problems

SC
We will be able to:
 Demonstrate the knowledge and understanding of the GUI components listed above
 complete the practice exercises, formative and summative tasks
INTRODUCTION
All the programs we have made so far interact with the user via the
console.
The preference is to have the program run in its own window
We would also like to make use of common OS components like text
fields, check boxes, pull down lists, buttons, and scroll bars.
 EXAMPLE - GUI

http://www.javaguicodexample.com/javadesktopguimysql2_files/javadesktopmysqlapp001.png
FOCUS
Let’s start by looking at 3 difference GUI components:

 Text fields – users can type in here and/or the program can put text in here

 Labels – text that is displayed on the GUI

 Buttons – users can click these

GETTING STARTED
When you want to make a GUI application with Java you need to
follow specific rules to define your class as an application
You then must specific methods in order to build and use components
on your interface
There is also a farily unique way that Java uses to organize the
components on your GUI window
THE CONCEPT
When you create a graphical user interface with Java, you actually
create something called a frame
You can put components(buttons, etc) onto a frame directly, or put
them on a panel and then put the panel on the frame
Using panels on your frame allows you to better organize the items on
your frame
In order to create a frame for your application, will extend Java’s
JFrame.
 JAVA GUI

http://www.ntu.edu.sg/home/ehchua/programming/java/images/AWT_ContainerComponent
.png
 THE CODE
import javax.swing.*;
import java.awt.*; <- These imports are required to use GUI components
<-Class/Instance variables can go here (define your buttons, etc)
public class FrameExample extends JFrame { <- You class name now must extend JFrame
<- This turns your program into a program that
<- describes a frame

public FrameExample() { <- a special method called a constructor. It must have

<- the same name as your class. This is where all your
<- code goes to initialize the frame
}
<- instance and class methods go here.
}
THE CONSTRUCTOR
The constructor method has all the code that sets up your frame.
The following code puts a title on your window, sets the size of the
window, and makes it show up on the screen.

public FrameExample() {
setTitle("Hello World!");
setSize(320, 240);
setVisible(true);
}
CLASS VARIABLES
This is the section you can create buttons, text fields, and labels.
Each one requires certain attributes when you declare them
Once these are created you will need to add them to you frame. This
is done in the constructors
We will focus on buttons, labels, and textfields.
BUTTONS
The following code creates a Button:

JButton okButton = new JButton("OK");

okButton is the ‘variable’ name.

“ok” is seen on the actual button
TEXT FIELDS
This is an area that users can type in and/or the program can write to
The following code creates a text field:

JTextField nameField = new JTextField (“Bill Gates”); // value shown in

// text field is Bill Gates
The ‘variable’ name is called nameField
The text field comes with the words “Bill Gates” already in it
Or we can leave it blank
JTextField nameField = new JTextField (“ ”, 30);
LABEL
Labels are words that are shown on your frame, usually to label a text
field.
The following code creates a label:

JLabel nameLabel = new JLabel("Name:", JLabel.RIGHT);

The ‘variable’ name is nameLabel

You will see “Name:” on the screen
The label is justified to the right
 ADDING COMPONENTS
Now that you have created each component you need to add them.
This is done in the constructor:
public FrameExample() {
setTitle("Hello World!");
setSize(320, 240);

add(okButton);
add(nameLabel);
add(nameField);
setVisible(true);
}
YOUR TURN

Copy the java file GUIExample1.java:

Try creating your first GUI

1. Make the Title “Hello World”

2. Make the label “Name: “
3. Include a text field
4. Include a button with “click” written on it