CENG325

Software Applications and Design

Lecture1
Introduction to:

1
Content

• Introduction
• GUI Importance
• Netbeans Environment
• Exercises
• GUI components and functions
• Adding functionalities to GUI elements

2
Introduction
GUI: graphical user interface “gooey”

• A picture used in place of a word or words to issue

commands.

• Used in operating systems and software programs.

• An interface that allows users to manipulate

elements on the screen using a mouse, a stylus, or
even a finger (easier to use)

• E.g. create a folder using CMD vs GUI

3
GUI for JAVA

• GUI In Java gives programmers an easy-to-use visual experience to build

Java applications.
• It is mainly made of graphical components like buttons, labels, windows,
etc. through which the user can interact with the applications.
• Swing GUI in Java plays an important role in building easy interfaces.
• IDE like Netbeans makes it much easier to apply GUI

4
Example: non-GUI vs GUI programs

• Now you will see 2 designs for an application with and

without GUI

• This application do the following:

1. First asks the student for his first name
2. Next asks him for his last name
3. Finally prints a welcome message with the full name.

5
Version1-Using scanner and SOP

try (Scanner scanner = new Scanner(System.in)){

System.out.print("Enter your first name : ");
while(scanner.hasNext()){
String input1 = scanner.nextLine(); // Read user
input
System.out.print("Enter your last name : ");
String input2 = scanner.nextLine(); // Read user
input
System.out.println("Welcome to CENG325 class!"+"
"+input1+" "+input2+"\t"+ "\n");
System.out.print("Enter your first name : ");
} }

Try it 6
 Version2-Using GUI Containers
• in this course we will be using Java Swing : a GUI toolkit that
includes a rich set of widgets. 
• It is available for any IDE and we will be using Netbeans
• Java Swing class Hierarchy Diagram

a pop-up window that

pops out when a
message has to be
displayed (not Fully
functioning

Fully functioning
window with its title
and icons

7
 Version2-Using JOptionPane for Input/Output

• Most applications use windows or dialog boxes (also called dialogs)

to interact with the user.
• Java’s JOptionPane class (package javax.swing) provides prebuilt
dialog boxes for both input and output.
• These are displayed by invoking static JOptionPane methods.

8
Version2-JOptionPane Dialogs
Confirm Dialog

Input Dialog

Message Dialog

9
Version2- Back to our example:

String Fname=JOptionPane.showInputDialog(null,"Enter Your

First name", "Input1",JOptionPane.PLAIN_MESSAGE);

String Lname=JOptionPane.showInputDialog(null,"Enter Your

Last name", "Input2",JOptionPane.PLAIN_MESSAGE);

JOptionPane.showMessageDialog(null, "Welcome to CENG325

class!"+" "+Fname+" "+Lname+"","
",JOptionPane.PLAIN_MESSAGE);

Try it

10
 Version2- With Jframe (fully functional GUI)
• design a GUI using Netbeans IDE:
• adds the JAVA swing components: textfields, labels, combobox,
buttons, radio buttons…
• code the behavior of different components for input and output.

11
GUI- Input components

• When the user interacts (uses) with the application the following
action are performed:
1. Reading User entry: for example using
a. Textfields

b. Combobox

c. Checkbox and Radio buttons 12

 GUI- Output components
• When the user interacts (uses) with the application the following
action are performed:
2. Showing output for the User : for example using
a. TextArea

b. Tables

13
Creating a JFrame Container

14
Version2- With Jframe (fully functional GUI)
You have to create a Jframe object for your GUI and set the action
performed when Submit button is clicked to the following:

String fname=fn.getText();
//fn is the variable name of the first textfield

String lname=ln.getText();
//ln is the variable name of the second textfield

out.setText("Welcome to CENG325 class! "+fname+" "+lname);

Try it

15
 Example2: Simple Calculator
double num1;
double num2;
char op;
boolean done = false;

Scanner input = new Scanner(System.in);

System.out.println("num1, num2 are Double");
System.out.println("op: +, - , * , / for basic math any other input will
end program");
System.out.println("==========================================");
//Start a loop that will finish when you enter ^ as your operator
while (done == false) {
System.out.println("");
System.out.println("Please enter new operation (num1 op num2): ");

num1 = input.nextDouble();
op = input.next().charAt(0);
num2 = input.nextDouble();
16
Example2: Simple Calculator(continue)
switch (op) {
case '+':
System.out.println("your answer is " + (num1 + num2));
break;
case '-':
System.out.println("your answer is " + (num1 - num2));
break;
case '*':
System.out.println("your answer is " + (num1 * num2));
break;
case '/':
System.out.println("your answer is " + (num1 / num2));
break;
default:
System.out.println("Unknown operation, program end!");
done = true;
break;
} } Try it
input.close();
17
 Example2: Simple Calculator with GUI
Let us Start with the simple adder
1. The user will enter 2 numbers  two textfields for the user inputs.

2. Then, he will press a button to perform the addition and display the result  a
button and a textArea or label to display the result.

3. The ActionPerformed handler for the button:

 Read the 2 numbers
 Perform the addition
 Display the result

double num1 = Double.parseDouble(num1text.getText());

Double num2 = Double.parseDouble(num2text.getText());
Double res = num1 + num2;
String str = Double.toString(res);
restext.setText(str); Try it
18
 Example2: Simple Calculator with GUI
Now let us perform the four main
operations
1. Same two text fields

2. Add three extra buttons to your

interface,
3. For each button you need to add the
ActionPerformed handler that:
 Read the 2 numbers again
 Perform the operation
 Display the result

Try it
19
EXTRA TO PRACTICE

20
Outline

 Steps to create a new project on Netbeans

 Counter application
 Time calculator

21
Netbeans IDE Environment

• All Java development in the IDE takes place within projects, we first
need to create a new project within which to store sources and other
project files. 

22
Creating a project ***Step1

• These steps are repeated every time you want to create a new
activity:
1. To create a new project, launch the NetBeans IDE and choose New
Project from the File menu:

23
Creating a project *** Step2

• Next, select Java from the Categories column, and Java Application
from the Projects column: 
• Press the button labeled "Next" to proceed.

24
 Creating a project *** Step3
• Choose a name for your project . The project name contains no
spaces.
• Project will be saved in the default Netbeans project folder in the
Documents. (browse to change if you like)
• It is better to remove the main class if you are going to use only GUI
• Clink “Finish”

25
Outline

 Steps to create a new project on netbeans

 Counter application
 Time calculator

26
Get Started !

• Create a folder CEN325_yourName on the desktop.

• Create a new project.
• Don’t remove the main class (first exercise does not have GUI so it
needs the main class)
• The project name is: counter
• Project Location: CEN325_yourName on the desktop.
• Note that the main class package has the same name of your project.

• Make an application that prints the numbers from 1 to 15.

Hint: use for loop and SOP.

27
Get Started ! (No GUI)

28
Creating a JFrame Container

• To add a JFrame container:
1.In the Projects window, right-click the Main Class node and choose
New > JFrame Form. 
2.Enter PrintNum as the Class Name.
3.Click Finish.
The IDE creates the PrintNum form and opens it in the GUI Builder.
And it creates the PrintNum.java class within the application. 

29
Creating a JFrame Container

30
 Creating a JFrame Container
• Design the following GUI:
• The components of the GUI are found in the
palette.

• If you can’t see the palette insert it:

• From the window menu> IDE tools>Palette.

31
 Creating a JFrame Container
• From this list, our application will use JLabel
(a basic text label), JTextField, JTextArea
and JButton to trigger count.
• Adjust the text and format for the JLabel
JTextField and Jbutton.

32
 Property Editor
• It allows you to edit the properties of each component.
• Such as background color, foreground color, font, and cursor.
• When you click on a component, the Property Editor is shown : a series of
rows — one row per property — that you can click and edit.

33
 Text and Font edit

• Click on the label and change:

• Text to : “Count to:”
• The font to “Bold”
• Click on the Button and change:
• Text to: “Count”
• Font : “Bold”
• If you can’t see the Property editor
• From the window menu> IDE tools>Properties.

34
 Text and Font edit

You can check the design preview by pressing Preview Design in the toolbar of
the GUI Builder.

35
Button Functionality

• Your application, after pressing the Count button, must print, in the
textArea, the numbers from 1 to the number entered by the user in the
textfield.
1. First the value entered by the user in the textfield must be read.
2. Second show the numbers in the TextArea.
a. To read the input written in a textField the getText( ) method is used. It
returns the input as a string. textFieldVariableName.getText( )
b. To write the output in the TextArea, the setText( ) method is used. It takes
the string to write as argument.
textAreaVariableName.setText(string)

36
Button Functionality

• We want to perform the previous code when the button is pressed.

• Button pressed=ActionEvent
• So we will use ActionListener responding to ActionEvent.

1. So, in the GUI Builder double click your button,

2. This will take you to the ActionPerformed of the button.
3. You have to write your java code in the ActionPerformed handler.

37
Change Variable Name

• When you have to add a code in the source of your design you have
to use the variable names of the used components (button, label,
textarea)
• The default names are not very relevant, so it makes sense to change
them from their defaults to something that is more meaningful.
• On the design, Right-click each component and choose "Change
variable name.“
• Name the textfield: “in”
button: “count”
textArea: “out”

38
Navigator

• Notice the new variable names within the Navigator.

• For each component, the variable name appears first, followed by the
object's type in square brackets.
If you can’ t see the navigator: window>Navigator or Ctrl+7

39
Button Functionality
• Write the following code in the ActionPerformed handler: (Notice the button name changed in the handler)
private void countActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
String In=in.getText();//read the user input and store it in a string variable

int lim=Integer.parseInt(In);// change the read value to integer format

String s="";//prepare an emplty string to show in the textArea

for(int i=1;i<=lim;i++){ Or
s+=i+"\n";//catenate the string with the new number

out.setText(s); //show the numbers in the textArea for(int i=1;i<=lim;i++){

}
out.append(i); //show the numbers in the
} textArea
• Run your project }
• >>add the necessary code to create a PrintNum frame and open it.
• Try your application.
40
Outline

 Steps to create a new project on netbeans

 Counter application
 Time calculator

41
Exercise2: Time calculator

• You are asked to design an application that calculates time in hours,

minutes or seconds.
• The user enters a time in days or hours or mins and presses the
corresponding button to display the time in hours , mins or sec.
• The GUI of you application
is similar to the following:
Remember:
1Day=24 h
1h=60min
1min=60secs
N.B set 0 as default input to avoid
exceptions

42
 Exercise2: Time calculator
• For each button ActionPerformed handler make the folllowing:
1. Read the days textfield and parse to double.
2. Read the hous textfield and parse to double.
3. Read the minutes textfield and parse to double.

4. For the In hours Button: result=Days*24+hours+minutes/60

5. For the In minutes Button: result=Days*24*60+hours*60+minutes
6. For the In seconds Button: result=Days*24*3600+hours*3600+minutes*60

43