Up next in 10
Java Swing Mastery: Create Stunning GUI Apps Step by Step | Part 3
Mar 11, 2025
Java Swing Mastery: Create Stunning GUI Apps Step by Step | Part 3 #JavaSwing #JavaProgramming #JavaGUI #SwingTutorial #JavaDevelopment #CodingTutorial #LearnJava #ProgrammingForBeginners
View Video Transcript
0:00
hi welcome back in this video I'm going to teach how to add two numbers so first go to the file new Java
0:09
project here I'm going to give the name of the project I'm going to give the name Cal
0:15
project you can give whatever name I just give the name as C project
0:22
next finish you you just click on don't
0:28
create right your project has been created successfully Cal project here
0:34
inside this project we have a folder uh package which is SRC select the SRC
0:41
right click new here I'm going
0:47
to go to the others others inside the windows you can
0:53
see the folder which is Windows Builder you just click on this icon you T expand
1:00
it here s uh swing designer you click on this one here you can click application
1:09
window click next here here you can name the project I'm going to name as
1:16
C project click
1:23
fin now your new project has been created successfully there will be the two uh
1:30
source and design so you just click on the design this is your design window this is a source this is a coding window
1:36
this is a design window now here I'm going to first I'm going to design my phone so click on this one this Frame
1:44
click on this one I'm going to first click on this you can see here is a frame you can do the title if click the
1:52
frame you can see here there will be the title you can give the title okay so
1:57
what is the title you have to give you can give here okay so if I click on this
2:02
one title at addition I just give the name
2:10
as addition press enter key here the title
2:16
will be shown here very simple after that what I'm going to do is
2:25
here I'm going to drag the labels so first what first step what I'm going is Select this our frame this one right
2:32
click set layout select as absolute
2:38
layout click on click the option then only you can drag and drop the our uh
2:44
tools now I'm going to select the labels and drag
2:51
it right so here now right click select
2:56
this one text I'm going to change this one as
3:04
number one press enter key I'm going to CH I'm going to
3:13
increase the font size so go to the font property click on this one
3:18
bold 14 click okay you just size them
3:24
you can increase the size little bit you can see the size now right perfect now select this one
3:31
edit copy paste and get another copy here simply
3:38
you can get the copy without drag and drop it take too much of time to complete the project it it is very
3:44
simple now I'm going to change the name so here the text the text I'm going to
3:51
change number two press enter key then only it will be change without press
3:58
enter key it won't change okay we have to once you make the changes press enter
4:04
Then only it will be changes right now I'm going to drag the
4:09
two text Fields so here there be text Fields they are click on this one drag
4:15
and drop over here you just drag it like this on right
4:22
now select this one simply edit
4:27
copy paste get another copy the same size would be you can get
4:34
it again okay if you are drag and drop each time it take too much of time to complete right this a very simple
4:40
shortcut way right now you successfully drag and drop the label and text Fields
4:46
now I'm going to drag the button just drag and
4:56
drop right first button this button name I'm going to give
5:03
as plus press enter
5:10
key same button edit
5:16
copy paste this one
5:24
minus select this button edit copy paste
5:34
P
5:39
multiplication select this one copy and
5:45
paste this would be the division percentage perfect the simple
5:53
way we have to this simple frame we have created now
6:00
before we are writing the codee let's execute and see how the frame look like
6:06
very simple yeah you can see the frame okay now what I'm going to do is
6:16
here I'm going to add two uh two numbers uh total would be display as
6:23
a uh message box total would be display as a message
6:28
box so how to do the things so first what I'm going to do this here click on
6:34
this one this button select this button right
6:40
click event action action perform okay when you click this button
6:47
we have to add two numbers when you click this button we have to add two numbers so select this
6:52
button again I'm going to show you add event action Handler action action perform if you go
7:01
if you choose this option it go to the relevant action event of the but now
7:08
here you can add the code okay so let's back to the design window here there will be the two text
7:16
fields we have to name it then only we will be uh under we we will be easily
7:23
identified so select the first text field you have to name it as TX ke
7:30
number one present it you have to give the proper name then only we easily
7:36
identify but txt is a text box num one if you write the proper way you can
7:43
easily understand select the second text field txt num two press enter key you
7:53
name uh text name has been changed successfully now let's go to the code
7:59
select this one action event handler action action for support window
8:06
right now what I'm going to do is here I'm going to create two integer
8:12
variables so int num
8:17
one comma num num two we have created successory two
8:23
integer variables now these two integer variables I'm going to equal into
8:30
this two text Fields what is the number type on this
8:36
text field it assigned to the particular variable okay so get the first variable
8:44
number one equal what is the uh first text box field
8:51
txt num one dot getex this is the name of the text feed
8:59
but if you are write like this it show the error here if you move the cursor on
9:05
what the error will error show type mismatch can't convert from string to
9:12
int so what is the error mean you only write the string only you
9:18
will be able to write here if you are write the integer values and go do the calculation part you can't right if you
9:24
change the data type as in if you write the equal into the text field it show
9:31
there how to solve this you have to convert them how to convert this you
9:36
have to write integer dot pass
9:44
it write integer. pass it okay now I'm going to remove this line you easy
9:51
understand here you have write the textb deex Feld need txt num one
10:00
dot get text right simply get text get it here
10:08
what's the value on type on this text field it will be assigned into the number one variable after that I'm going
10:15
to get the another variable number two equal integer dot pass here write
10:24
dxt num to Dot I have here this is what is the name
10:32
you are given here the same name you have write here I I have I have
10:37
gave Capital here txt num to.ex then only it it will
10:44
be show show the there right that's it that's the thing we have to do what's
10:51
the value you type on this text field it is assigned to the this variable which
10:56
variable num two variable okay this how you have to calculate okay what is the number you type on the txt number one
11:03
text Fe it assigned this variable what's the number you type on the number two text Feit it assigned to
11:11
the this variable now I'm going to do the
11:16
calculation part I'm going to create the variable
11:21
dot here so comma I'm going to create another variable to in order to do the
11:27
calculation part get the variable over here
11:33
equal num one plus num 2 that's it num one + num two now here
11:44
uh what is the what is the value type on this text field it assigns the number one what is the value type on the text
11:50
field uh this text field it assigned the variable number two now here this both
11:57
variable I'm going to I'm going to add uh these two variables
12:03
over here plus sign if you put the plus sign I'm going to add two variables over here and assign to the variable
12:10
tot now I'm going to print the tot variable
12:16
on message box how to print the value as a message box you write J we have to K
12:26
sensitive J is a capital O okay very simple you have to study like
12:32
this first two letter should be Capital after that simple option pan P
12:40
capital J option pan dot show message
12:47
dialogue so message dialogue null you write null here here
12:55
we have write here we have write
13:02
string dot value of here we have write write the to that's
13:10
it okay why here we have convert the convert as integer so again get the
13:17
total you have to convert as string so you have to write string value of
13:24
T this how you have to do the programming efficient way so let's run
13:31
and check now here
13:37
[Music] 30 30 click plus button 60 will be the
13:46
answer perfect it work in perfectly way right now let's close it now the
13:54
same thing I'm going to put in this all the
14:01
codes subtraction sorry subtraction
14:07
multiplication so the multiplication sign is this perent key okay this as
14:13
sign as a multiplication sign okay division subtraction so subtraction also
14:18
the same thing you have to do here just double click same code I just copy this one we only we have to change this
14:27
symbol only okay so I just contr C copy right
14:33
click event action uh event add event handler action action perform here I'm
14:40
going to paste it contr V to paste it tap ke to arrange
14:48
them and change it as minus
14:53
only the same thing you have to do the the remaining this also we have to right
14:58
click I have to do the pop I'm going to do this do this
15:04
simply it t
15:09
key you will be is easy easy to arrange
15:15
them this one right click event action action
15:23
perform here also we have right just paste it here
15:31
T key to arrange them division that's it perfect now let's run and
15:43
check 30 [Music] 30 + 60 will be the answer if it's a if
15:50
you press this subtraction 0 will be the answer
15:57
multiplication 900 will be the answer division one will be the
16:02
answer it's working perfectly well I hope you you will be understand this
16:09
well if you have any doubt you can ask me anytime uh thank you for watching I'll
16:16
be see you in the my next
16:21
lecture hi welcome back this example we already did did in our console
16:28
application in this class I'm going to teach how to do this simple example in
16:33
our J application so here uh we have read one more time input the student
16:40
name marks to calculate the grade when you calculate the grade you have to uh
16:48
read the following condition if the average is more than 50
16:56
grade is pass if the average is more than 50 grade is pass otherwise grade is
17:03
fil right now let's back to our project now I'm going to go to create the new
17:10
project file new Java project here I'm going to give the name so here to give
17:16
the name as student marks calculation marks I just
17:22
give the name as project name student marks next finish
17:29
don't create we just click on this one your project has been created here this is the name of your project Trent marks
17:36
you to expand the project okay so this the SRC uh packages so you just click on
17:42
this one I'm going to create the new freame right click
17:47
new we have to use the option others Windows
17:54
Builder inside the windows Builder you have to there will be the swing designer
18:00
we already I Tau this all the stuff uh here application window next here I'm
18:07
going to give the name as student
18:14
marks click finish now your empty uh frame has been created
18:20
successfully I have to close the previous projects okay so here this is
18:25
the empty4 so this is a source if you are I'm going to back to our
18:30
design part so design just click on this tab the your designing page will be open
18:41
okay your design page has been open successfully now here what I'm going to say I'm going to design the frame so I
18:49
just increase the size of the frame little bit you just click on this Frame
18:55
I'm going to increase the size just click on this one you just
19:00
increase the size little bit right perfect now first what I'm going to do
19:06
is here click on this Frame click this
19:12
Frame title I'm going to use this a title I'm going to here empty title it
19:18
has a default one I'm going to give the title as
19:23
student marks calculation
19:32
right press enter key then only it will be applied okay you have to press enter
19:37
key okay whatever changes you have did here press enter key then only it will be applied okay right after that what
19:44
I'm going to do is here I'm going to drag the panel from the pallet click on
19:50
the panel you just drag before drag it I already T what happens if you you can't
19:57
you can't do it first you have to change the layout as absolute so here if you
20:03
have forgot this one now you are what is the tool you are in J panel so you can't do it click on the selection now you
20:10
select this one right click set layout absolute
20:16
layer okay we just click on this one
20:21
right now I just go to the panel pette again drag the
20:27
panel you just just click on this one and drop it
20:32
here right now I'm going to size this one I need I need this space right now this
20:41
panel I'm going to change the background color background color of the I'm going
20:49
to change the background color of the panel so what I'm going to do is click on this panel you can see the properties
20:56
here the background color here the backround backround color property you click on this one you will be able to change the color whatever color you need
21:03
I just click on the color on this color uh whatever color you can
21:09
use I'm going to use it as blue click okay color has been changed
21:15
as now I'm going to drag the
21:20
labels so the lab under the uh components you can see the label you
21:28
just click and drag it so here uh before drag it you you
21:34
already uh drag the panel the panel also you have to set the layout as absolute
21:39
right okay so that's why I have uh teach you okay if you are draw the panel when
21:46
you are moving here it has the layout so click on this panel again set layout
21:52
absolute layout now you'll be able to put it right drag
21:59
whatever you can if you set the layout absolute lay you can drag it what
22:04
anywhere here okay so I'm going to set this
22:09
position uh now I'm going to change the text so select the text go to the
22:17
property here I'm going to change it as student
22:23
marks press ENT key after that I'm going to increase
22:28
your font size little bit bigger default font will be 11 okay you can see here
22:34
the default one will be 11 11 is a size I'm going to increase size click on this one with
22:40
Bol 60 16 also you want you just right now
22:48
you'll be able to see now I'm going to change the change the size as little bit bigger
22:54
22 the the font you can select whatever font font family okay I just select this
23:00
one is a default one with b and 22 heading size
23:07
right I just do this one so if you if you feel to change the front color
23:13
you'll be able to change the font color as here there will be the color back foreground color okay if you want to
23:19
change the font color you will be able to change code to the properties
23:26
window there will be the property called foreground background color mean
23:32
it's a background color you have the background color foreground color if you want to change the font color you'll be able to change as foreground click on
23:39
this one I'm going to use it as white click select as white click on now the
23:46
color has been changed now I fa to increase a little bit the font size I'm going to increase little
23:52
bit so I'm going to use it as 32 now it's now it's perfect right
24:01
okay now what I'm going to see I'm going to create another panel so select the
24:07
panel window you just drag and drop here I'm going to another
24:12
panel by this panel simple I'm going to create a panel right this panel also I'm
24:18
going to change the color or you can change the border border style I'm going to change the uh color I uh I leave it
24:26
as it is uh I'm going going to change the border border I'm going to change the Border style click on this
24:34
border the default one it will be automatically set it there will be the various border styles are there have to
24:40
use the Border as this soft bevel border click on this one this it will be look
24:45
like this you'll be able to see the preview over here you click on this
24:51
one line border mean line border empty border so we don't need empty border swing border uh there'll be
24:58
there are different borders are there okay you will be able to use it okay I am going to use this border this look
25:04
perfect click on this one perfect this border right this border will be perfect
25:10
right now here now what I'm going to see here I'm going to trag the labels so select this one right click set layout
25:18
absolute layout trag the labels this one should be there uh student name select
25:24
this one go to the text property I'm going to type the text as student
25:30
name press enter key the text has been changed we just increase size right now
25:37
you'll be able to see if you feel to increase letter size click on this one
25:42
go to the font property here click on this one bit Bal I'm i f to give
25:49
12 okay it's perfect it's perfect right perfect now what I'm going
25:57
to do is here one you design the label once you don't have to drag the label and drag and drop and do do it again by
26:05
again it uh it take too much of time to complete the project okay so easy way to
26:10
you just select the label contrl C to copy contr V to paste here just get the
26:15
copy of it okay you can get the copy of it uh here only what only the step you
26:23
have to do it change the text only you have to change the text marks
26:31
one prage okay uh I just use Marks One marks
26:36
2 marks three like this uh if you want you you will be able to give the subject
26:42
name as okay right now select this label again here you can give couple of this
26:50
edit copy edit paste you can use instead of
26:56
shortcut key you can use this way as right get the copy
27:01
like marks PR the key again select this
27:07
label edit copy paste again get the copy of
27:18
it percentage you have to arrange in the
27:23
order right it's perfect it's perfect right
27:28
now what I'm going to do is here again I just copy this one get a
27:34
copy and paste it this one should be the
27:40
total percent key edit copy edit
27:50
paste is average PR a key
28:01
let's incze little
28:06
bit
28:18
so average the same text select this one edit copy paste this this one should be
28:30
great press that's it simple okay now what I'm going to say
28:36
I'm going to drag the each text Fields so go to the text field this
28:41
one drag and drop over here that's it we arrange the size like this you have to
28:48
select the text field uh if you want to increase size of the letter you will be
28:55
able to increase so what is the letter size we have given with bold 12 with bold so here also I'm
29:02
going to give select this one with bold 12 along with 12
29:08
size right that's it perfect now what I'm going to do here first I'm going to
29:14
just select this one contr C to copy V to paste and get the copy of the short
29:19
key easily uh instead of go and change it okay it's very simple you have to use
29:25
the shortcut Key contr C to copy contr V to use
29:43
perfect perfect now
29:51
let's right I need need two buttons
29:59
so I go to the pet button just drag and drop
30:08
here I'm going to give the I'm going to change the text as this one should
30:14
be add press ENT
30:21
Key contr C to copy contr V to paste and get another copy of the button this button I'm going to change
30:28
the textor change the text as clear present if you made any mistake you will
30:36
be able to change okay so I am going to get the another copy of the button contrl C to copy contr V to paste below
30:43
here this one should be exit exit percentage there will be three
30:50
buttons are there okay I hope you understood the stuff well now let's
30:56
execute the programs PR and click on the Run
31:01
button and run it it's perfect here it's
31:08
perfect right now what I'm going to do is here now I'm going
31:14
to uh first I'm going to select the button add button I'm going to input the name input
31:21
the marks of the relevant text fields and click add
31:26
button I want to to calculate the total and average and
31:32
gr when you calculate the grade you have to use the following condition you have
31:37
to use this following condition if the average is more than 50 grade is pass otherwise grade is f right now select
31:46
the button right click add event
31:51
handler action action for this is the way okay
31:59
now I'm going to Cod I'm going to write the code first I have
32:05
to I'm going to create the variables so name I'm going to create string
32:16
name we have three subjects so we have in we have used
32:22
in Marks One I I have created the variable M1
32:28
comma M2 comma M3 the
32:35
[Music] marks comma tot
32:41
tot of average when you are cting the average you have to use
32:50
double
32:56
aage right that's it here string name comma
33:02
grade don't worry about that uh I'll be explaining it right
33:10
now first what I'm going to do is here I'm going to assign to the this this
33:15
three text field this this four text Fields I'm going to assign the relevant variables
33:22
so first select the text field I'm going to change the name of the each text field so if you without change it here
33:29
we can't identify it's very difficult to identify the each text Feld so you have to change the name that is very
33:35
important stuff when you are writing the programming so click on this one select the select the text field and here I'm
33:43
going to give the proper name txt name press enter key select this one you have
33:49
to use txt Marks One
33:55
marks Marks One the same thing I just contr C to copy
34:02
this get the copy press enter key then only it will be change third one select this
34:10
one B paste yeah I have get a copy of this instead of writing again by again
34:17
press enter key select this one contr V to paste
34:24
again change as Marx 3 press enter key after that I'm going to
34:32
change that here txt to press ENT
34:38
key this one txt
34:43
average press enter key select this
34:49
one txt
34:54
grade that's it PR it now we successfully change the name of each
35:00
text fix so if you select this one here the name name should be change change
35:06
successful right okay don't forget it once you change the name press enty then only it will be applied now
35:13
[Music] let's back to our source source means a
35:19
Port Port part here this one inside this part where the button uh you will you will be able you will be simply identify
35:26
you just go to the code you can see there will be action perform inside action perform you have
35:32
to write so here we already created the variables along with the data types
35:40
first I'm going to assign the name uh into the relevant text
35:46
Fe this the text F txt name so how to
35:51
assign it here is first I'm going to get the variable name name this one you
35:57
already create the data type over here we just type name
36:04
equal revant text field name txt name there will be the method called
36:13
get text okay what I did here is what what
36:20
you type on this text field this will be assigned
36:26
to this variable this name varable after that marks M1 we already
36:33
create the variable above equal you have to type
36:41
integer dot pass you write
36:48
txt marks 1 do getex
36:59
this is the text F what's the name txt Max one I'm going to assign as M1
37:07
variable this variable okay when you are write the integer you have to convert okay you
37:14
have to write convert it you have to write integer. pass so I just copy contr C to copy
37:23
contr V to paste get the another copy here this this this one should be the string data type string data type you
37:30
don't you don't need no need to convert it okay you just write like this when
37:36
you write the integer you must convert as in okay now here we have
37:42
to M2 this one should be txt Marx 2 I'm
37:48
going to assign it as this txt marks text
37:55
field into M2 variable after the same thing I just
38:00
copy C to copy V to paste here this one should be the Marx 3 text
38:06
field txt Mark 3 assign to the variable
38:12
M after that what I'm going to do is here total so tot
38:19
equal total how to get the total this three marks I'm going to add
38:26
it M1 M2 M3 write M1
38:33
+ M2 plus M I have to add this three M1 M2
38:43
M3 this three marks calculator and assign to the variable
38:50
dot now what I'm going to do is here total I'm going to display which
38:58
text field is total text
39:03
field so here what I'm going to you have right
39:10
uh txt to your set you have write set text
39:19
get text mean get the variable but you are type on the uh what you type on here
39:26
on this text box it will be assign the particular variable get the answer you have write txt
39:33
dot do set method you have
39:40
right you have to get you have to con you have to convert as string when you
39:46
get the answer you convert as string so you write string value
39:51
of this one to pass it right
39:57
okay that's it that's how we have get the Tau how to add two numbers we already
40:05
taught in my last video that uh that's the only way we have did here here as
40:11
well after that after let let me see whether it's
40:18
working fine or not name
40:25
John Marks 80
40:31
90 45 click at button here total display
40:38
successfully right it's working perfectly well now let's close it now
40:44
I'm going to go to create the average we have to implement the average
40:51
variable here average equal how to calculate the average we have divide by
40:57
the how many subjects we have only three subjects so we have divide by three so
41:03
here Marks One Marx 2 Marx 3 so we have three subject if you have four marks you
41:08
have divide by four so divide
41:14
total we have divide by number of subject so the total we have divide by
41:21
number of subject it assigns the variable average we have to we have to show on
41:28
the which text field txt average text field
41:34
dot set Tex
41:41
string dot value
41:49
of average that's fine now you successfully
41:56
calculate the total and average after that we have to calculate
42:04
the grade grade calculation you have to follow this condition if the average is
42:10
more than 50 grade is pass otherwise grade is
42:16
free now let's move into the coding so when you
42:21
are get the decision you have start with if if
42:28
average this is the condition so if average is greater than sign this a
42:36
greater than S 50 if the average is greater than
42:45
50 here what I'm going to do is here I have to grade the grade variable you
42:50
already created T gr equal
42:59
pass you type the text as
43:04
pass otherwise else if the condition is
43:11
true pass will be printed if the condition is false go to the else
43:18
part I just copy this one control C to copy control V to paste below file if
43:25
the condition is file the the the condition is true pass will be display the condition is failed fail will be
43:33
displayed that's it now I'm going to print this grade so how to print
43:41
it I I'm going to print on where this text Fe so grade is a
43:48
string okay so we don't need to convert them get the answer so we just type
43:55
txt GR dot
44:02
setx simply create that's
44:09
it integer only we have to convert them if you when you calculate the values we
44:14
have to get them the answer you have to convert them string we don't need okay now
44:20
let's execute the programming check John is a
44:28
student marks I'm going to give here as 78
44:34
90 55 click add button here total will be displayed average is displayed grade
44:41
will be displayed perfect now I'm going to go to the clear but I'm going to write the
44:48
clear but it's very simple go to the
44:56
design click the figure button right click add action event action action
45:04
perform it goes to the particular button event okay action performing so
45:13
here here I'm going to type the text feed names this all the text uh text
45:19
feed names I'm going to type and here simply this one go the event
45:27
txt name dot setx here you have to clear you have
45:34
type like this okay simply you have just copy this
45:41
one paste here this one should be Marks
45:46
One only you have to write the set method you have to blank it will be
45:52
clear marks okay you have to type the
45:57
if you if you leave any mistake here it show the error okay what is the error you just go and see Marks One cannot be
46:04
resol so we have a name problem so what the name you are given on the text field the same name you have to type otherwise
46:11
it it show there the same mark this one contr C to copy contr B to paste below
46:18
this one should marks two this will be marks 3
46:28
to to the same control C copy contr P this
46:34
one should be average txt average after that contr c
46:40
to copy contrl V to paste here TX great that's
46:46
it after all the text feels clear and what I'm going to do is here cursor
46:52
should be focused on the student name text Fe okay after clear all the textt field if you click
46:58
on the clear button I have to clear all the text Fields cursor should be focused
47:04
on the txt name so there will be the field uh property
47:14
called here we have to write dxt name after clear all the text field
47:22
dot re focus called Reus Focus
47:30
if you call this one the cursor after clear all the text Fields cursor should be focus on the re uh txt name text Fe
47:39
right that's it okay now one more button I have to write the code and uh I'm
47:45
going to show the demo so click on this one exit button right
47:51
click you add action actions perform yes
47:56
simply one line code you have write how to exit it so you have write
48:02
system dot that method called exit you write zero right that's it the
48:10
system should be the entire system will be exit now let's go to the
48:17
design if you run the program and see it ask save save and launch click okay now
48:23
this is your program now I'm going to type student name
48:29
James marks I'm going to give as
48:35
607 45 50 click add
48:42
button uh here the average is 40 uh uh
48:47
54 gr will be display as pass now if you want to clear you click
48:53
on the clear button here all the text field will be clear the cursor will be focused on the
48:59
student name it it will be asked to enter the new student so here cursor
49:06
will be blinking after that I want to exit the
49:11
system click the exit button your program will be
49:17
exit I hope you will be understand the
49:23
steps I'll be I'll be seeing my next
#Java (Programming Language)
#Programming