JAVA PROGRAMMING 4 – GRAPHICAL USER INTERFACE

(MIDTERM NOTES)
 A GUI includes GUI objects, like icons, cursors, and buttons. These graphical elements are sometimes
enhanced with sounds, or visual effects like transparency and drop shadows. Using these objects, a user
can use the computer without having to know commands.

 GUI is often pronounced by saying each letter (G-U-I or gee-you-eye). It sometimes is also pronounced as
"gooey." The Graphical User Interface is where the user and the machine interact; this is where most of
the communication happens.
Examples of Graphical User Interface

Note: An interface that allows the user to interact with a machine is called Graphical User Interface.

HOW TO CREATE A JAVA- GUI?

STEP 1: Open NetBeans

STEP 2: Create new Project
STEP 3: Create new Package
STEP 4: Create new Jframe form – a JFrame is an empty space where one can put graphical interface design.

Empty JFrame form

Above is an example of a new JFrame form with no design yet.

HOW TO ADD GUI - CONTAINERS AND GUI – CONTROLS?

The image presented is called a PALETTE, where all the

widgets or components are placed (containers and
controls are found). The user will simply select (drag
and drop) the widget to the jFrame.

Example:

Pick a swing control label and place it on the jFrame.

Note: Above is a jFrame form with a jLabel control

EDIT TEXT TO DISPLAY DESCRIPTIONS

 Notice the image on the left

The jFrame form has 3 jLabels, 3 jTextfields, and 3

jButtons.

 jLabels are controls used to put descriptions to

the design
 jTextfields are controls used to accept values
given by the user.
 jButtons are controls that can be triggered to
call and give outputs.

In order to create a good GUI, the programmer must change first the display of the text on the jFrame form. Take note
that the user is highly dependent on the description that will appear during runtime because its responsible for all the
instructions that the user may read and follow, so let us edit first the display text of all the controls (jLabels, jTextfields,
and jButtons).
In editing, the designer or the programmer must right click the control then click edit text and write whatever name
that the control must display: Notice the given example below:

Step 1

Step 2

Note: In step 2, the jLabel1 description is changed into First Number, that means that the JtextField1 can accept any
value from the user and that value is considered as the First Number in the program. Then, you may repeat the same
process to all jLabels.

Note that all the jLabels above is changed into its correct text descriptions and display:
jLabel1 to First Number, jLabel2 to Second Number and jLabel3 to Result
Now, let us EDIT the text of the jTextFields and the jButtons

The 3 jTextFields are changed into empty fields (we just

deleted the descriptions so the fields will become
empty and will be ready for user’s input).

The 3 jButtons are changed into the display of:

 jButton1 is named into Difference
 jButton2 is named into Clear
 jButton3 is named into Exit

Note: That in editing the text the programmer must

highlight first the controls then right click and change
the name into whatever name to display on the form.

CHANGING VARIABLES
After editing the display text, the programmer now will change the variable to easily call them during coding.
To change the control variables just right click the control and click the change variable name option.

Changing variable names is not similar to editing names, when you edit names it will be displayed on the form
however, variable names will not be displayed on the form after changing it, but still it is important because
when you code you will call the variable name instead of the edited name.

Above shows that First Number (jLabel1) has variable name of lblFnum (lbl stands for label) there should be a
pre-text of lbl to all label controls.
Therefore, the remaining jLabels will have a variable of lblSnum for Second Number and lblRes for Result.
Remember that if it is a jLabel there should always a pretext lbl to all its variables. Following the same process,
we will change the variable names of the jTextfields with a pre-text of txtf and jButtons with btn pre-text.

 jTextfield1 will have a variable name of txtfFnum

Remember: when you changed the variable name
 jTextfield2 will have a variable name of txtfSnum of a textfield there should be a pre-text of txtf
 jTextfield3 will have a variable name of txtfRes.

 jButton1 of Difference will have a variable name of btnDiff Remember: when you changed the variable
 jButton2 of Clear will have a variable name of btnClear name of a jButtons there should be a pre-text of
 jButton3 of Exit will have a variable name of btnExit btn

ADDING CODES AND FUNCTIONALITIES

After finishing the GUI design the next part is the most important, the coding part will allow your GUI to
function perfectly according to what it is programmed for. In adding codes, you need to look for a control that
will put a trigger to your code. In this case, the one that is holding the triggers are the buttons because it is the
control that will call for possible output during runtime. So, we will add codes to all three buttons: btnDiff,
btnClear, and btnExit.

We will start with btnDiff: Right click Difference button events action action performed

After clicking the actionPerformed source code will display, like this below:
This is where you are going to place the code, below the comment TODO add your handling code here.
Codes are:
//declare 3 float variables
float num1, num2, result;
num1 = [Link]([Link]()); jTextField1 variable name is txtfFnum
num2 = [Link]([Link]()); jTextField2 variable name is txtfSnum
// now we can perform the addition using a formula
result=num1-num2;
// We will now pass the value of result to jTextField3
// at the same time let us change the value of result from a float to a string
[Link]([Link](result)); jTextField3 variable name is txtfRes

Now finalize the codes according to the variable names assigned to the controls.
float num1, num2, result;
num1 = [Link]([Link]());
num2 = [Link]([Link]());
result=num1-num2;
[Link]([Link](result));

Final look of btnDiff will be:

Note: The code getText() in the program sample above functions to get the values inputted by the user to the
textField controls (the GUI design) and store it the variables declared in the program. In the example
above, the value inputted to txtfFnum and txtfSnum will be stored to num1 and num2 in the program.
The code responsible for getting the values from txtfFnum and txtfSnum then giving and storing them
to the declared variables num1 and num2 is the getText() function.

Now, following the same process for btnClear and btnExit. We can now add codes to them as well.
Final look for btnClear code:

Note: The setText() functions to display the text needed in the program. Just like in C programming there is
printf() that is responsible for displaying the text instructions that the user may read during runtime.
Java on the other hand uses setText code to display text to the GUI environment. The program above
shows an empty setText value that means that every time a user will click on the clear button the
values given and stored to txtfFnum, txtfSnum, and txtfRes will automatically be set to empty.

Adding codes to btnExit:

Final look of btnExit code:

Final execution (running) view of the program:

EXECUTION 1:

Input values are: 100 and 30

The difference will be 70, so you will have

to click first the difference button to trigger
the output.
EXECUTION 2:

To display 70.0, the user must click the

DIFFERENCE button first so the program will
compute. If you want to clear all the input values
and the result, then click CLEAR and if you want to
terminate and close the program then click EXIT.

CLICK HERE!

A. IDENTIFICATION (2 PTS. EACH)

DIRECTIONS: Identify what is being referred to by the statements below. Use a short bond paper to copy
and answer. STRICTLY NO ERASURES

_______________1. It is where the machine and the user communicate and interact.

_______________2. It is a new form where one can put design to the GUI.

_______________3. It is a code that functions by passing the values inputted in the design to the variables
declared in the program.

_______________4. It is a pre-text incorporated to the variable names of every label control so it is easier to
identify in the program.

_______________5. It is one of the java controls which hold the trigger in the program so display of output is
possible during run time.

_______________6. It is a pre-text incorporated to the variable names of every text field control so it is easier
to identify in the program.

_______________7. It is where all swing controls and containers are stored and found.

_______________8. It is a pre-text incorporated to the variable names of every button control so it is easier to
identify in the program.

_______________9. It is a code that functions by displaying the text descriptions of the program so the user
can read and follow during runtime.

_______________10. It is a swing control that can function by accepting inputs from the user during run time.
B. GUI DESIGNING
DIRECTIONS: Identify what Swing controls and Swing containers are used in the design below by putting an
arrow then; create a proper variable name to each of the components. Use a short bond paper
to write your answers.

C. GUI EXECUTION
DIRECTIONS: Identify what Swing controls and Swing containers are used in the design below by putting an
arrow then; create a proper variable name to each of the components and add its corresponding
codes. Use a short bond paper to write your answers.

private void btnAddActionPerformed([Link] evt){

// TODO add your handling code here:

}
private void btnMinusActionPerformed([Link] evt){
// TODO add your handling code here:

private void btnMultiplyActionPerformed([Link] evt){

// TODO add your handling code here:

private void btnDivideActionPerformed([Link] evt){

// TODO add your handling code here:

private void btnClearActionPerformed([Link] evt){

// TODO add your handling code here:

private void btnExitActionPerformed([Link] evt){

// TODO add your handling code here:

D. PERFORMANCE TASK

DIRECTIONS: Think of any program you want to create in the future, it can be a desktop application
programs or a help assistive program, from it design your own Graphical User Interface. Draw the GUI
using a short bond paper and any coloring materials, you may create as many frames as you want as
long as it will show the connection of frames to each other and will give the total idea of how your
program will function and work during run time. Inside the frames, all the needed swing controls and
swing containers must be placed with its proper text display and variables. You do not have to put
codes only the design of your GUI will be checked. However, putting short and clear explanations on
how the frame will work during runtime is a must. Lastly, create a title to your program GUI and write a
description describing what are the functions and limitations of your program.