Transcript IEEM 227 Quality Engineering

IEEM 110
Computing in Industrial Applications
Basic User Interface
in Java
Outline






What is Graphical User Interface (GUI)
Window, Frame and Panel
Labels and Text Inputs
Action Listener
Layout Management
Sample Program
What is Graphical User Interface?

A method for:
- providing input to a computer program
- the computer program to display some output/data on the screen
GUI in Java

Frame, Window and Panel

An instance of a Frame = = A Window with border, title,
buttons on top-right side to close window, …
Frames are example of containers



can contain other components such as buttons, text fields
A simple frame class
Class SimpleFrame extends JFrame {
public SimpleFrame(){
setSize( WIDTH , HEIGHT );
setTitle("Testing"); }
public static final int WIDTH = 200;
public static final int HEIGHT = 200;
}
Specify the size of the window
Specify the title of the window
Window, Frame and Panel

What is Panel?

Panel act as a smaller containers for components
A simple Panel code put in the frame class

Container contentPane = getContentPane();
JPanel myPanel = new JPanel();
JLabel myLabel = new JLabel("You say:");
myPanel.add(myLabel);
contentPane.add(myPanel, BorderLayout.SOUTH);
Put the panel at the SOUTH area of the window
Window, Frame and Panel

Example of frame class using a panel
class MyFrame extends JFrame {
public MyFrame() {
setTitle("Testing");
setSize(WIDTH,HEIGHT);
Container contentPane = getContentPane();
JPanel myPanel = new JPanel();
myPanel.setLayout(new FlowLayout(FlowLayout.LEFT));
myPanel.add(new Button("Button 1"));
contentPane.add(myPanel);
}
public static final int WIDTH = 200;
public static final int HEIGHT = 200;
}
Add a panel with a
button
Window, Frame and Panel

How to display the frame we have made?

Add the code to the main function
MyFrame mingsFrame = new MyFrame();
mingsFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
mingsFrame.Show();
Define the window will close when
button is pressed
GUI in Java

Text Input / Label

Two components are used to get text input



Text fields in JTextfield for single line input
Text Area in JTextArea for multiple lines input
Methods use in the Text Input

void setText(String t)

Change the text of a text component

String getText()

Return the text contained in this text component
Text Input / Label

Text Fields

How to add a text field to a window?

JTextField(String text, int cols)

text is the text to display, cols is the number of columns in the field
Unfortunately, a “column” is a rather imprecise measurement in Java


Example:
JPanel myPanel = new JPanel();
JTextField myTextField = new JTextField("Hello", 10);
myPanel.add(myTextField);
Text Input / Label

Labels

How to add a label to a window?


JLabel(String text)

text is the text to display
Example:
JPanel myPanel = new JPanel();
JLabel myLabel = new JLabel("You say:");
JTextField myTextField = new JTextField("Hello", 10);
myPanel.add(myLabel);
myPanel.add(myTextField);
GUI in Java

Action Listener

We need an event handler to get the user input, such as
when they click on a command button
In java, we use Action Listener for this purpose

JButton button1= new JButton("Check");
add(button1);
button1.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
myTextField.setText("Hi");}
});
GUI in Java

Layout Management:

manage the position of text, I/O on the GUI window
Components in container are managed by layout manager
All positioning is relative to the boundary of screen
Two kinds of manager:





Flow Layout Manager
Border Layout Manager
Layout Management

Flow Layout Manager

Adds components in their natural size in a horizontal line
If too many components to fit in one row




Components within each row are centered
Constructors apply to the Flow Layout

FlowLayout(int align, int hgap, int vgap)

align control the position of the components (LEFT, RIGHT, CENTER)
hgap is the horizontal gap, vgap is the vertical gap (defaults to 5 pixels)


Flow Layout will use multiple rows
Flow Layout apply on the Window containers
Layout Management

Flow Layout Manager

Example1:
setLayout(new FlowLayout(FlowLayout.LEFT));
add(new Button("Button 1"));
add(new Button("2"));
add(new Button("Long-Named Button 3"));

Example2:
setLayout(new FlowLayout(FlowLayout.RIGHT,30,0));
add(new Button("Long-Named Button 1"));
add(new Button("Button 2"));
add(new Button(“3"));
Layout Management

Border Layout Manager

This layout has five areas




North, South, East, West and Center
When you enlarge a Container, then the Center area grabs
as much of the newly available space
Constructors apply to the Border Layout

BorderLayout(int hgap, int vgap)

hgap is the horizontal gap, vgap is the vertical gap (defaults to 0 pixels)
Border Layout apply on the Panel containers
Layout Management

Border Layout Manager

Example1:
setLayout(new BorderLayout());
add("North", new Button("North"));
add("South", new Button("South"));
add("Center", new Button("Center"));
add("West", new Button("West"));

Example2:
setLayout(new BorderLayout(5,10));
add("North", new Button("North"));
add("South", new Button("South"));
add("Center", new Button("Center"));
add("West", new Button("West"));
Sample Program
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
class Test {
public static final void main(String args[]){
MyFrame frame = new MyFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.show();}
}
Sample Program (Cont’)
class MyFrame extends JFrame {public MyFrame() {
setTitle("Sample Program");
setSize(WIDTH,HEIGHT);
Container contentPane = getContentPane();
JPanel myPanel1 = new JPanel();
JPanel myPanel2 = new JPanel();
JLabel myLabel1 = new JLabel("You say:");
myTextField = new JTextField("", 10);
JLabel myLabel2 = new JLabel("You said:");
myLabel3 = new JLabel("");
myPanel1.add(myLabel1);
myPanel1.add(myTextField);
myPanel2.add(myLabel2);
myPanel2.add(myLabel3);
Sample Program (Cont’)
JButton buttonCheck= new JButton("Check");
myPanel1.add(buttonCheck);
buttonCheck.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
String a = myTextField.getText();
myLabel3.setText(a);}});
contentPane.add(myPanel1,BorderLayout.NORTH);
contentPane.add(myPanel2,BorderLayout.SOUTH);}
public static final int WIDTH = 250;
public static final int HEIGHT = 140;
public static JTextField myTextField;
public static JLabel myLabel3; }