Download 3.4 Adjusting the CelsiusConverter GUI (As shown in Figure 1.9)

King Abdulaziz University
North Jeddah Branch
Saudi Arabia
Laboratory Manual
Course Codes: CPCS-354, CPIT- 280 and CPIS-354
Course Title: Human Computer Interaction
Document Version History
Version
Date
Prepared By
Reviewed By
Approved By
1.0
20/09/2012
Shahzad Qamar
Dr. Muhammad Tahir
Dr. Muhammad Tahir
1.1
19/11/2013
Bandar Alkhalil
…………………..
……………………..
Table of Contents
Table of Contents
Lab 1 - Introduction to Java Swings ...................................................... Error! Bookmark not defined.
Lab 2 - .................................................................................................. Error! Bookmark not defined.
Lab 3 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 4 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 5 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 6 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 7 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 8 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 9 - Topic ......................................................................................... Error! Bookmark not defined.
Lab 10 - Topic ....................................................................................... Error! Bookmark not defined.
Lab 11 - Topic ....................................................................................... Error! Bookmark not defined.
Lab 12 - Topic ....................................................................................... Error! Bookmark not defined.
Lab 13 - Topic ....................................................................................... Error! Bookmark not defined.
Lab 14 - Topic ....................................................................................... Error! Bookmark not defined.
Lab 15 - Topic ....................................................................................... Error! Bookmark not defined.
AIMS AND OBJECTIVES OF THE HCI LAB
AIMS





Practical Programming of Human Computer Interfaces
Introduction to HCI programming in Java: AWT and Swing
Introduction to Mobile HCI programming in Java: Java MIDlets
Introduction to basic HCI components and how to use them
Overview of other Java Foundation Classes: AWT, Accessibility, 2D API and Drag and
Drop
OBJECTIVES




Knowledge of availability and usage of basic HCI components
Understand how components can effectively be used together
Understand the Java Foundation Class (JFC) Packages
Be able to program in Java Swing, Java MIDlet and other JFC packages
Recommended Book
Java Swing by Robert Eckstein, Marc Loy, Dave Wood O'Reilly and Associates; ISBN:
156592455X
Laboratory Session 1: Introduction to HCI and Java Swings
Objectives: The objective of this Lab is to familiarize students with the importance of HCI, to
introduce them with Java Swings and to teach them how to create a project in NetBeans.
Outcomes:



By the end of this Lab student will know the importance of HCI.
Students will be familiarized with Java Swings and AWT.
Students will be able to use NetBeans for creating Java Swings applications.
1. Introduction to Human Computer Interaction
The term Human Computer Interaction (HCI) was adopted in the mid-1980s as a means of
describing this new field of study. The well known definition of HCI is the following. “HumanComputer Interaction is a discipline concerned with the design, evaluation and implementation of
interactive computing systems for human use and with the study of major phenomena
surrounding them” (IEEE/ACM)
1.1 Difference between Software Engineering and HCI
There is a basic fundamental difference between the approaches taken by software engineers and
human-computer interaction specialists. Human-computer interface (HCI) specialists are usercentered and software engineers are system-centered. Therefore in this course our focus will be
mainly on the development of good designs.
2. Introduction to Java Swings
Swing did not exist in the early days of Java. Rather, it was a response to deficiencies present in
Java’s original GUI subsystem: the Abstract Window Toolkit. The AWT defines a basic set of
controls, windows, and dialog boxes that support a usable, but limited graphical interface. In
order to eliminate the deficiencies in AWT, Swing was introduced in 1997. Swing was initially
available for use with Java 1.1 as a separate library. However, beginning with Java 1.2, Swing
(and the rest of the JFC) was fully integrated into Java.
Swing is basically a set of customisable graphical components whose look-and-feel can be
dictated at runtime.
2.1.
Swing Features


Pluggable look-and feels
Lightweight components
o Do not depend on native peers to render themselves.
o Simplified graphics to paint on screen
o Similar behaviour across all platforms
o Portable look and feel
o Only a few top level containers not lightweight.




New components -- tress tables, sliders progress bars, frames, text components.
Tooltips -- textual popup to give additional help
arbitrary keyboard event binding
Debugging support
3. Practical Work
3.1.
Learning Swing with Net Beans IDE and Setting Up New Project:
The Net Beans IDE is a free, open-source, cross-platform integrated development environment
with built-in support for the Java programming language. It offers many advantages over coding
with a text editor.
Step 1: Run Net Beans and close down any open projects. Move to File tab and select New
Project. From the pop-up Form select Java and Java Application, you should have something
similar to figure 1.1.
Figure 1.1 Setting up a Java Application Project
Step No 2: Click Next and change the following.
Project Name: Celsius ConvertorProject
Project Location: C:\HCI
Project Folder: C:\HCI\CelsiusConvertorProject
VERY IMPORTANT
1:
Ensure that Set as Main Project is checked.
2:
Create Main class is un-checked.
You should have something similar to Figure 1.2. Click Finish
Figure
1.2:
Setting
up
a
Java
Application
Project
When the IDE finishes loading, you will see a screen similar to the below Figure 1.3. All panes
will be empty except for the Projects pane in the upper left hand corner, which shows the newly
created project.
Figure 1.3: Setting up a Java Application Project
Step # 3: Adding a JFrame Form
Right click on the CeliusConvertorProject and choose New -> JFrame Form (JFrame is the Swing
class responsible for the main frame for your application). You should have something similar to
Figure 1.4.
Figure 1.4: Creating a Java Swing
Step # 4:
Name the GUI Class
Change the following.
Class Name:
CelsiusConvertorGUI
The remainder of the fields should automatically be filled in, as shown above. Click the Finish
button when you are done, you will see something like Figure 1.5.
Figure 1.5:
The Java Swing editor
When the IDE finishes loading, the right pane will display a design-time, graphical view of
the CelsiusConverterGUI. It is on this screen that you will visually drag, drop, and manipulate the
various Swing components.
3.2.
NetBeans IDE Basics
It is not necessary to learn every feature of the NetBeans IDE before exploring its GUI creation
capabilities. In fact, the only features that you really need to understand are thePalette, the Design
Area, the Property Editor, and the Inspector. We will discuss these features below.
3.2.1
The Palette
The Palette contains all of the components offered by the Swing API. You can probably already
guess what many of these components are for, even if this is your first time using them
(JLabel is a text label, JList is a drop-down list, etc).
Figure 1.6: Palette
3.2.2.
The Design Area
The Design Area is where you will visually construct your GUI. It has two views: source view,
and design view. Design view is the default, as shown below. You can toggle between views at
any time by clicking their respective tabs.
Figure 1.6: The Design Area
3.2.3.
The Property Editor
The Property Editor does what its name implies: it allows you to edit the properties of each
component. The Property Editor is intuitive to use; in it you will see a series of rows — one row
per property — that you can click and edit without entering the source code directly. The
following figure shows the Property Editor for the newly added JFrameobject.
Figure 1.7: The Property Editor
3.3
Creating CelsiusConvertor GUI (As shown in the Figure 1.8)




Set the Tile
Add JText Field
Add two JLabels
Add JButton
Figure 1.8. Simple Layout
3.4
Adjusting the CelsiusConverter GUI (As shown in Figure 1.9)
Step 1: Set the Component Text
Step 2: Set the Component Size
Step 3: Remove Extra Space
3.5
Adding the Application Logic
Step 1: Change the Default Variable Names
The default names are not very relevant in the context of this application, so it makes sense to
change them from their defaults to something that is more meaningful. Right-click each variable
name and choose "Change variable name."
Make the following changes:
JText
to
tempTextField
JLabel1
to
Jbutton to
convertButton
JLabel2 to
fahrenheitLabel
celsiusButton
Step 2: Register the Event Listeners
When an end-user interacts with a Swing GUI component (such as clicking the Convert button),
that component will generate a special kind of object — called an event object— which it will
then broadcast to any other objects that have previously registered themselves as listeners for that
event. The NetBeans IDE makes event listener registration extremely simple:
Figure 1.10: Event Listener
Step 3: Add the Temperature Conversion Code
The final step is to simply paste the temperature conversion code into the empty method body.
The following code is all that is necessary to convert a temperature from Celsius to Fahrenheit:
private void convertButtonActionPerformed(java.awt.event.ActionEvent evt) {
int tempFahr = (int) ((Double.parseDouble(tempTextField.getText())) * 1.8 + 32);
fahrenheitLabel.setText(tempFahr + " Fahrenheit");
}
Step 4: Run the Application
Running the application is simply a matter of choosing Run -> Run Main Project within the
NetBeans IDE. The first time you run this application, you will be prompted with a dialog asking
to set CelsiusConverterGUI as the main class for this project. Click the OK button, and
when the program finishes compiling, you should see the application running in its own window.
You can see something like Figure 1.11.
Figure 1.11: Output
Home Tasks


Read more about HCI and Java Swings
Do the above process by yourself at home
HCI Programming with Java Swing
We have seen how data can be communicated in a Java in a sequential type manner. There are
however times (most of the time) when we need to handle data in a more random manner from a
human computer interface (HCI). The Java Swings library handles this form of input and output
in Java. It contains pre-built classes of graphical interface elements and even basic drawing
primitives. The Swing can be broken down into a number of groups of related classes. Swing
library is an official Java GUI toolkit released by Sun Microsystems.
The main characteristics of the Swing toolkit
· platform independent
· customizable
· extensible
· configurable
· lightweight
Swing consists of the following packages
· javax.swing
· javax.swing.border
· javax.swing.colorchooser
· javax.swing.event
· javax.swing.filechooser
· javax.swing.plaf
· javax.swing.plaf.basic
· javax.swing.plaf.metal
· javax.swing.plaf.multi
· javax.swing.plaf.synth
· javax.swing.table
· javax.swing.text
· javax.swing.text.html
· javax.swing.text.html.parser
· javax.swing.text.rtf
· javax.swing.tree
· javax.swing.undo
Swing is a part of JFC, Java Foundation Classes. It is a collection of packages for creating full
featured desktop applications. JFC consists of AWT, Swing, Accessibility, Java 2D, and Drag and
Drop. Swing was released in 1997 with JDK 1.2. It is a mature toolkit.
HCI Elements:
JButtons:- JButtons are normally used to signify that some form of processing is required. A
JButton class within the Java Swing, consider: JButton onButton = new JButton(“On”); this
create a button with a lable “On”. As with any class of object there are number of methods
associated with the object, two commonly used methods are setLabel, which allows you to
change the label and getLabel, which returns the buttons current label i.e. String name =
onButton.getLabel();
JLabel: Labels are just strings that can be palced within containers, consider: JLabel myLabel =
new JLabel (“Welcome to Java Swing”);
JCheckbox: A checkbox is used to indicate some change in sate of a system, and as with all
other control elements checkboxes are created using new, for example: JCheckbox myCheckbox
= new JCheckbox(“Hello”); Here again we have as set of methods to determine if a check box
has been clicked or not. The method getState returns a Boolean true if the check box had been
clicked using a mouse button or false if t has not. The checkboxes are independent and as such
they can both be checked or either one to be checked or neither be checked.
Radio Buttons: Radio buttons are a special case of check boxes. Radio buttons are grouped
together and have the property that only of the boxes s checked at a time. Radio buttons are
created from checkboxes by means of a constructor which connects them to a checkbox group,
consider:
JCheckboxGroup department = new CheckboxGroup();
JCheckbox Electronics = new JCheckbox(“Electronics”,department,true);
The getState method will find which radio button is true.
Choice: A choice is a pop-up menu, which allows the user to specify a number of strings that can
be selected. The code for creating a choice is shown below
JChoice departmentChoice = new JChoise();
DepartmentChoice.addItem(“Electronics”);
Text Fields: A text field is a part of interface object into which a user can type text. TextField are
created by using the JTextField class, for example JTextField myTextField = new JTextField
(“Type Text Here”, 240); Will create a text field which will have 24 columns, with the the text
“type Text Here” contained within one column in the text field.