FEN 2006
-
11
-
15
IntroJava2006 AAU
1
GUI: Graphical User Interface
AWT/SWING:
Components
Drag and Drop in NetBeans
Events
Listeners
FEN 2006
-
11
-
15
IntroJava2006 AAU
2
Components
•
GUIs are build using standard
components, for instance:
–
Windows (Frames in Java)
–
Menu bars
–
Text fields
–
List boxes
–
Buttons
–
Etc.
FEN 2006
-
11
-
15
IntroJava2006 AAU
3
Java.awt and javax.swing
FEN 2006
-
11
-
15
IntroJava2006 AAU
4
Some
AWT
and
Swing
Classes
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.JComponent
java.awt.Window
java.awt.Frame
javax.swing.JFrame
javax.swing.JLabel
javax.swing.JToolbar
javax.swing.JPopupMenu
javax.swing.JFileChooser
javax.swing.JPanel
Note the use
of inheritance
FEN 2006
-
11
-
15
IntroJava2006 AAU
5
Graphical User Interfaces
•
A Graphical User Interface (GUI) is created
with at least three kinds of objects
–
components
–
events
–
Listeners
•
Java standard class library provides these
objects for us
FEN 2006
-
11
-
15
IntroJava2006 AAU
6
Components and Containers
•
A GUI
component
defines a screen
element to display information or allow the
user to interact with the program
–
buttons, text fields, labels, menus, etc.
•
A
container
is a special component that
holds and organizes other components
–
dialog boxes, applets, frames, panels, etc.
FEN 2006
-
11
-
15
IntroJava2006 AAU
7
Hello World Example
import javax.swing.*;
public class HelloWorldSwing {
public static void main(String[] args) {
JFrame frame = new JFrame("HelloWorldSwing");
JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(200,200);
frame.setVisible(true);
}
}
FEN 2006
-
11
-
15
IntroJava2006 AAU
8
Frame
•
The main component is a frame.
•
Frame is the Java term for what is generally called a
‘window’.
•
In Swing frames are realised by the class
JFrame
•
A frame is a rectangular area:
–
title bar at the top
–
The title bar contains buttons for closing, maximizing and
minimizing of the frame
–
Below the title bare is an area at which further graphical
components can be placed
–
This area is divided into two parts:
•
space for a menu bar at the upper edge
•
content pane below
FEN 2006
-
11
-
15
IntroJava2006 AAU
9
Elements of a JFrame
Title
Menu bar
Content pane
Window controls
FEN 2006
-
11
-
15
IntroJava2006 AAU
10
import java.awt.*;
import javax.swing.*;
public class FirstFrame extends JFrame
{
public FirstFrame()
{
super("My First Frame");
setSize(200,200);
setVisible(true);
}
}
Import
libraries
Inherit
JFrame
FEN 2006
-
11
-
15
IntroJava2006 AAU
11
import java.awt.*;
import javax.swing.*;
public class SecondFrame extends JFrame{
//Components neede to build the menubar
private JMenuBar menuBar;
private JMenu fileMenu, editMenu;
private JMenuItem openItem, quitItem;
public SecondFrame() {
super("My Second Frame");
buildMenu();
setSize(200,200);
setVisible(true);
}
private void buildMenu(){
menuBar = new JMenuBar();
fileMenu = new JMenu("File");
editMenu = new JMenu("Edit");
menuBar.add(fileMenu);
menuBar.add(editMenu);
openItem = new JMenuItem("Open");
quitItem = new JMenuItem("Quit");
fileMenu.add(openItem);
fileMenu.add(quitItem);
this.setJMenuBar(menuBar);
}
FEN 2006
-
11
-
15
IntroJava2006 AAU
12
private void buildInputpart(){
panelIO = new JPanel();
panelIO.setLayout(null);
labFirstName = new JLabel("First Name:");
labLastName = new JLabel("Last Name: ");
txtFirstName = new JTextField();
txtFirstName.setToolTipText("Input first name");
txtLastName = new JTextField();
txtLastName.setToolTipText("Input last name");
addComponent(panelIO, labFirstName, 20,20,70,20);
addComponent(panelIO, txtFirstName, 100,20,150,20);
addComponent(panelIO, labLastName, 20,45,70,20);
addComponent(panelIO, txtLastName, 100,45,150,20);
this.add(panelIO);
}
private void buildButtonpart(){
panelButton = new JPanel();
panelButton.setLayout(null);
submitBut = new JButton("Submit");
clearBut = new JButton("Clear");
addComponent(panelButton, submitBut, 20,80, 100,20);
addComponent(panelButton, clearBut, 130,80, 100,20);
this.add(panelButton);
}
private void addComponent(Container container,
Component c,int x,int y,int width,int height){
c.setBounds(x,y,width, height);
container.add(c);
}
FEN 2006
-
11
-
15
IntroJava2006 AAU
13
This is unbearable!
•
Instead an IDE supporting Drag and Drop
•
For instance NetBeans:
GUI Building in NetBeans IDE 5.0
or
http://www.netbeans.org/kb/55/quickstart
-
gui.html
FEN 2006
-
11
-
15
IntroJava2006 AAU
14
Creating a GUI Project
1.
Choose File > New Project. Alternately, you can click the New Project icon
in the IDE toolbar.
2.
In the Categories pane, select the General node and in the Projects pane,
choose Java Application. Click Next.
3.
Enter ContactEditor in the Project Name field and specify the project
location.
4.
Ensure that the Set as Main Project checkbox is selected and deselect
Create Main Class if it is selected.
5.
Click Finish.
The IDE creates the
ContactEditor
folder on your system in the designated
location. This folder contains all of the project's associated files, including its
Ant script, folders for storing sources and tests, and a folder for project
-
specific metadata. To view the project structure, use the IDE's Files window.
FEN 2006
-
11
-
15
IntroJava2006 AAU
15
Adding a Main Component
To create a JFrame container:
1.
In the Projects window, right
-
click the ContactEditor node and
choose New > JFrame Form.
2.
Enter ContactEditorUI as the Class Name.
3.
Enter
my.contacteditor
as the package.
4.
Click Finish. The IDE creates the
ContactEditorUI
form and the
ContactEditorUI
class within the
ContactEditorUI.java
application
and opens the
ContactEditorUI
form in the GUI Builder. Notice that
the
my.contacteditor package replaces the default package.
FEN 2006
-
11
-
15
IntroJava2006 AAU
16
Event Driven
•
Programs with graphical user interfaces (GUIs)
are event driven:
–
the program reacts to actions of the user
–
these actions generate (‘fire’) events
–
examples of events are:
•
pressing a key
•
moving the mouse
•
clicking on a button
•
selecting a menu item
–
Components that reacts to events are called
Listeners
FEN 2006
-
11
-
15
IntroJava2006 AAU
17
Eventhandling
User interface
GUI Components fires the event
in response to being clicked
Listener
React to the events
Java code
Components
FEN 2006
-
11
-
15
IntroJava2006 AAU
18
Hello World
–
now with buttons!
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
jTextField1.setText("Hello World!");
}
private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {
System.exit(0);
}
jButton1.setText("Say Hello");
jButton1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton1ActionPerformed(evt);
}
});
Listener
generated by
NetBeans
Called when the
event occurs
We write the body of
the event handler
FEN 2006
-
11
-
15
IntroJava2006 AAU
19
Do it!
The tutorial:
Adding Functionality to Buttons: A Beginners Guide
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment