Hello guys, welcome back to the channel.
My name is Juan. So today we are going
to learn about frames in Tinder. So what
is frame? So frame is something really
really important if you want to organize
your wickets or your layout of your
application properly. Okay. So frame is
something very useful. Okay. So that you
can organize things properly. So uh to
use frames in okay we use the class
called frame. As we can see this is the
syntax. Okay. So here in this example we
are going to learn how we can create a
frame. Okay. how to display a frame
inside of a window and how to configure
the properties of a frame in tinder.
Okay, so stay with me and let's see what
we can do by using frames in the kinder.
Okay, so let's go to the test editor. So
to use a frame, okay, in the inter. So
we have we do something like that. Okay,
see we have a window. Okay, we have the
main window. Okay, so this is the main
window. Okay. So inside of this window
we can organize or we can put a lot of
stuff. For example, even this my laptop.
Okay. If I do that something like this.
Okay. And this my laptop I have a main
window. Okay. So in this main window I
have a browser which is showing this
document and also I have this guy here.
Okay. So I have my test editor which is
inside of the main window. So we can do
something like that also inside of the
kintter. Okay. We can create a main
window. So inside of that main window we
can split it in different section in
different areas. So each area will be
having something different something
specific. So the same thing is by using
frame. Okay. So we use frame to organize
the things. Okay. To organize the layout
to organize our u uh u UI. Okay. Our
user interface. So to do that we have to
create a frame. So a frame is to create
a frame we have can do something like
that. Okay. See let me see. I will
create one variable called frame one.
Okay. Frame one. So this frame one will
be equal frame. Okay. So this frame okay
is the one that you that is used to
create a frame. So a frame it can it
must be placed inside of something else.
It see a frame can be placed inside of a
frame itself or inside of the main
window. Okay. So let's place this frame
inside of the main window. For example,
let's do something like okay uh frame
let's give window.
Okay, okay. So after comma the options
will come here the option for this
frame. Okay. So but to place the frame
properly inside of the window we have do
something like that. Okay. Frame one
dot. Okay. Let's use grid. Okay. Grid.
Okay. I will open and
close. Okay. For that me I like to use
grid to organize the frames which is
something very good and very useful.
Okay. So let's say on row okay row
equals zero. Okay. Comma and column
let's give column zero also okay we know
that this guy is the one which is there
so I can comment this one okay I just
comment comment this also comment I save
if I run this now we have a big
confusion here okay so the frame it's
here okay but it's background color is
the same color as the main wind okay so
in order to for us to see this main
color we can do something like this see
uh we can do something like this okay we
can come here in our frame we can give
some options for the frame uh for
example we can change the background
color okay BJ BJ equal let's say blue
okay blue I save and if I run boom so
the frame is there itself okay but the
main problem is that see it is something
here but it's too small so let's give
some uh width and height to the frame
frame. So that is we can give us a width
and height inside of the frame for the
frame. So we can do something like that.
Okay. width. Okay. Width uh width equal.
Okay. Uh so this width we can say
something like uh okay for example 100
comma and height. Okay. Height can be
equal for example. Okay. Let's say 100.
100. Okay. Now 100 is too much. Let's
say 50. 50 comma. Okay. I save. If I run
this boom now we can see our frame here.
Okay. So now let's create something like
this. uh like ouram example something
like this.
Okay, let's create now something like
this. Blue, yellow, green, and red.
Okay, so in order to create that
something like that. Okay, let me delete
those guys and bye-bye. So I I'm just
going to copy this guy. Okay, come here
down and I'll do this again and again.
They are four if I'm not wrong. Let me
see. Four.
Okay. So, uh let me increase
also. Let's give
200 200 200 and
200. And if I save this and if I run
boom. Okay. Uh that's too small. Okay.
Let's increase also this guy for them.
400 maybe. Uh that is too much. If
I run this. Okay. This part I think is
good. And I think just a little bit
maybe 250. save and if I run yeah okay
250 is enough so for those ones also
let's give the same configuration I'll
just copy this and I can come here and
boom paste this
also paste and this also paste saving if
I run blue blue okay this guy will be
blue no let's we have to follow blue
yellow the second one will be let's
change the name okay this stay for
two. Uhoh. And this day for
three. This day for four. If I save, if
I run. Perfecto. Everything is they are
showing like that because they are in
the row zero. Row zero. Row z. Row z.
Okay. So this guy h will stay in the row
zero. If we say here, okay, is in the
row z. Okay. But in the column one.
Okay. Come column one. I save. Uh and if
I run this. Okay. Perfect. Is there
itself? Okay. Now is this guy. Okay. So
this guy is in the row one. Okay. And is
in column zero. Perfect. This guy is
also in the row one but is in the column
one. Okay. Save. If I run. Boom. Now we
have all of them here. Okay. Perfecto.
So in order to give those gaps that we
can see for this guy has some kind of
gap here. So we can do something like
that. So I can just come here. I can
come here. Okay. Here
down here inside the grid. Okay. I can
come here down. Okay. I'm just let me
give a comma comma and comma. Oh, sorry.
Uh putting those there. Okay. Give a
comma space. So I can say something like
that. Pad. Okay. Pad Y. Okay. Equal at
least five. If I save and if I run,
boom. We can see now it's giving space.
Okay. I think that is not enough. Maybe
it's eight or seven. Save if I run.
Boom. Okay, that one is good. Okay, then
I can give also comma. Then I can say
pad y. Okay, the same the same way that
we have x. Okay, then we have also y. So
x it give like a horizontal space. Okay,
and y it give like a vertical space.
Okay. So if I say pad y equal and for
example five save and if I run boom we
have some kind of space something like
that. Okay. Good. This is what we this
is what we want. So now let's change the
colors of those guys. Okay. Of this
those frames. So to change the color of
those frames. Okay. We can come here.
Okay. For this one is blue. Uh if I we
check here. Okay. It's yellow. Bye-bye
blue. Stay yellow.
And uh oh okay red. The second one is
red. I save. And what is the next is
green. Okay. The next one is
green. Bye-bye. You stay green. I save.
And if I run this, boom. Now we have the
same result. Okay. So now let's decrease
this windows which is too big to uh
let's say 250 is good. If I save and if
I run. Perfe. And this guy. Let's close
for a while. Let's say 500. Save and
run. Oh, too small. Three. Save and run.
Yeah. Perfe. We can see. Okay. Uh, I
think this got to go for three. 230. And
if I save and I run. Boom. Now we have
the same thing.
Okay. So now we have the same result as
the one that is showing here. Okay. So
this is how we can use frames. Okay. So
now we said okay inside of frame we can
start organizing all things. So let's
say like for example this frame uh we
want to use it like for how can I say
okay for we want to use this one just to
put some information there some normal
information there. For example I can
just come here for uh let me create one
label label. Okay so uh okay label label
equal class label. Okay, open. Say let's
say uh it's we want to place this label
inside of this frame. Okay, we can just
call this that frame. Okay, let's say
frame one. Okay. Will be for
examp let me put name sorry will be name
for example name dot sorry dot let's say
my name which is my name I save then
let's place this label okay let's say
lbl okay
dot pack dotpack open and close sorry
and if I run this boom. Now we have this
name here inside of this label. So
inside of this frame. Okay. So this is
how we use uh frames. Okay. So frame is
very good for us to organize our layout
and to create the things properly. Okay.
To organize the the application. Okay.
UI user interface. So for if I copy this
guy also copy. Come come stay here. Uh
let's put it in frame two. No frame
four. Frame four. Save. And if I run
this, boom. Now we have here also name.
Okay, this is how we use uh frame to
organize the wid gates. Boom. So guys,
we stay here. Okay, in the next uh
tutorial, next video we are going to
learn a new stuffs. Okay, so if you like
the video, give a like and stay in the
channel. Subscribe for the for more
videos. Okay, so my name is Jawin.
Bye-bye. See you in the next video. Bye.