WEBVTT

00:00.320 --> 00:01.760
Hello guys, welcome back to the channel.

00:01.760 --> 00:03.200
My name is Juan. So today we are going

00:03.200 --> 00:05.359
to learn about frames in Tinder. So what

00:05.359 --> 00:08.240
is frame? So frame is something really

00:08.240 --> 00:10.080
really important if you want to organize

00:10.080 --> 00:13.200
your wickets or your layout of your

00:13.200 --> 00:15.360
application properly. Okay. So frame is

00:15.360 --> 00:16.880
something very useful. Okay. So that you

00:16.880 --> 00:19.760
can organize things properly. So uh to

00:19.760 --> 00:22.640
use frames in okay we use the class

00:22.640 --> 00:24.480
called frame. As we can see this is the

00:24.480 --> 00:26.640
syntax. Okay. So here in this example we

00:26.640 --> 00:28.400
are going to learn how we can create a

00:28.400 --> 00:30.160
frame. Okay. how to display a frame

00:30.160 --> 00:32.320
inside of a window and how to configure

00:32.320 --> 00:34.880
the properties of a frame in tinder.

00:34.880 --> 00:37.920
Okay, so stay with me and let's see what

00:37.920 --> 00:41.360
we can do by using frames in the kinder.

00:41.360 --> 00:44.879
Okay, so let's go to the test editor. So

00:44.879 --> 00:47.440
to use a frame, okay, in the inter. So

00:47.440 --> 00:49.520
we have we do something like that. Okay,

00:49.520 --> 00:52.719
see we have a window. Okay, we have the

00:52.719 --> 00:54.320
main window. Okay, so this is the main

00:54.320 --> 00:56.480
window. Okay. So inside of this window

00:56.480 --> 00:58.399
we can organize or we can put a lot of

00:58.399 --> 01:00.079
stuff. For example, even this my laptop.

01:00.079 --> 01:01.680
Okay. If I do that something like this.

01:01.680 --> 01:04.080
Okay. And this my laptop I have a main

01:04.080 --> 01:05.920
window. Okay. So in this main window I

01:05.920 --> 01:07.760
have a browser which is showing this

01:07.760 --> 01:10.400
document and also I have this guy here.

01:10.400 --> 01:12.479
Okay. So I have my test editor which is

01:12.479 --> 01:14.560
inside of the main window. So we can do

01:14.560 --> 01:16.880
something like that also inside of the

01:16.880 --> 01:18.799
kintter. Okay. We can create a main

01:18.799 --> 01:20.400
window. So inside of that main window we

01:20.400 --> 01:22.479
can split it in different section in

01:22.479 --> 01:25.360
different areas. So each area will be

01:25.360 --> 01:26.960
having something different something

01:26.960 --> 01:30.799
specific. So the same thing is by using

01:30.799 --> 01:32.720
frame. Okay. So we use frame to organize

01:32.720 --> 01:34.479
the things. Okay. To organize the layout

01:34.479 --> 01:38.240
to organize our u uh u UI. Okay. Our

01:38.240 --> 01:40.560
user interface. So to do that we have to

01:40.560 --> 01:42.640
create a frame. So a frame is to create

01:42.640 --> 01:44.079
a frame we have can do something like

01:44.079 --> 01:45.520
that. Okay. See let me see. I will

01:45.520 --> 01:47.360
create one variable called frame one.

01:47.360 --> 01:50.240
Okay. Frame one. So this frame one will

01:50.240 --> 01:54.159
be equal frame. Okay. So this frame okay

01:54.159 --> 01:57.520
is the one that you that is used to

01:57.520 --> 02:01.280
create a frame. So a frame it can it

02:01.280 --> 02:04.240
must be placed inside of something else.

02:04.240 --> 02:06.640
It see a frame can be placed inside of a

02:06.640 --> 02:08.720
frame itself or inside of the main

02:08.720 --> 02:10.399
window. Okay. So let's place this frame

02:10.399 --> 02:11.840
inside of the main window. For example,

02:11.840 --> 02:14.720
let's do something like okay uh frame

02:14.720 --> 02:17.080
let's give window.

02:17.080 --> 02:20.400
Okay, okay. So after comma the options

02:20.400 --> 02:21.760
will come here the option for this

02:21.760 --> 02:23.920
frame. Okay. So but to place the frame

02:23.920 --> 02:26.080
properly inside of the window we have do

02:26.080 --> 02:28.480
something like that. Okay. Frame one

02:28.480 --> 02:32.000
dot. Okay. Let's use grid. Okay. Grid.

02:32.000 --> 02:34.599
Okay. I will open and

02:34.599 --> 02:36.879
close. Okay. For that me I like to use

02:36.879 --> 02:38.720
grid to organize the frames which is

02:38.720 --> 02:40.560
something very good and very useful.

02:40.560 --> 02:43.840
Okay. So let's say on row okay row

02:43.840 --> 02:48.959
equals zero. Okay. Comma and column

02:48.959 --> 02:51.280
let's give column zero also okay we know

02:51.280 --> 02:52.959
that this guy is the one which is there

02:52.959 --> 02:55.280
so I can comment this one okay I just

02:55.280 --> 02:58.480
comment comment this also comment I save

02:58.480 --> 03:00.959
if I run this now we have a big

03:00.959 --> 03:03.360
confusion here okay so the frame it's

03:03.360 --> 03:07.599
here okay but it's background color is

03:07.599 --> 03:10.400
the same color as the main wind okay so

03:10.400 --> 03:13.200
in order to for us to see this main

03:13.200 --> 03:16.239
color we can do something like this see

03:16.239 --> 03:17.680
uh we can do something like this okay we

03:17.680 --> 03:19.360
can come here in our frame we can give

03:19.360 --> 03:21.680
some options for the frame uh for

03:21.680 --> 03:23.599
example we can change the background

03:23.599 --> 03:27.920
color okay BJ BJ equal let's say blue

03:27.920 --> 03:32.879
okay blue I save and if I run boom so

03:32.879 --> 03:37.120
the frame is there itself okay but the

03:37.120 --> 03:39.840
main problem is that see it is something

03:39.840 --> 03:41.920
here but it's too small so let's give

03:41.920 --> 03:44.159
some uh width and height to the frame

03:44.159 --> 03:47.280
frame. So that is we can give us a width

03:47.280 --> 03:49.200
and height inside of the frame for the

03:49.200 --> 03:50.560
frame. So we can do something like that.

03:50.560 --> 03:56.159
Okay. width. Okay. Width uh width equal.

03:56.159 --> 03:58.720
Okay. Uh so this width we can say

03:58.720 --> 04:02.080
something like uh okay for example 100

04:02.080 --> 04:05.599
comma and height. Okay. Height can be

04:05.599 --> 04:07.840
equal for example. Okay. Let's say 100.

04:07.840 --> 04:09.760
100. Okay. Now 100 is too much. Let's

04:09.760 --> 04:13.680
say 50. 50 comma. Okay. I save. If I run

04:13.680 --> 04:17.040
this boom now we can see our frame here.

04:17.040 --> 04:18.720
Okay. So now let's create something like

04:18.720 --> 04:22.160
this. uh like ouram example something

04:22.160 --> 04:23.960
like this.

04:23.960 --> 04:26.080
Okay, let's create now something like

04:26.080 --> 04:28.800
this. Blue, yellow, green, and red.

04:28.800 --> 04:30.800
Okay, so in order to create that

04:30.800 --> 04:32.400
something like that. Okay, let me delete

04:32.400 --> 04:36.160
those guys and bye-bye. So I I'm just

04:36.160 --> 04:38.880
going to copy this guy. Okay, come here

04:38.880 --> 04:42.479
down and I'll do this again and again.

04:42.479 --> 04:44.720
They are four if I'm not wrong. Let me

04:44.720 --> 04:46.280
see. Four.

04:46.280 --> 04:49.240
Okay. So, uh let me increase

04:49.240 --> 04:51.800
also. Let's give

04:51.800 --> 04:56.199
200 200 200 and

04:56.199 --> 04:59.840
200. And if I save this and if I run

04:59.840 --> 05:02.639
boom. Okay. Uh that's too small. Okay.

05:02.639 --> 05:05.120
Let's increase also this guy for them.

05:05.120 --> 05:08.720
400 maybe. Uh that is too much. If

05:08.720 --> 05:11.120
I run this. Okay. This part I think is

05:11.120 --> 05:13.600
good. And I think just a little bit

05:13.600 --> 05:17.600
maybe 250. save and if I run yeah okay

05:17.600 --> 05:20.800
250 is enough so for those ones also

05:20.800 --> 05:22.479
let's give the same configuration I'll

05:22.479 --> 05:25.440
just copy this and I can come here and

05:25.440 --> 05:27.639
boom paste this

05:27.639 --> 05:33.360
also paste and this also paste saving if

05:33.360 --> 05:36.479
I run blue blue okay this guy will be

05:36.479 --> 05:39.199
blue no let's we have to follow blue

05:39.199 --> 05:41.680
yellow the second one will be let's

05:41.680 --> 05:44.680
change the name okay this stay for

05:44.680 --> 05:47.800
two. Uhoh. And this day for

05:47.800 --> 05:50.960
three. This day for four. If I save, if

05:50.960 --> 05:54.080
I run. Perfecto. Everything is they are

05:54.080 --> 05:55.520
showing like that because they are in

05:55.520 --> 05:57.520
the row zero. Row zero. Row z. Row z.

05:57.520 --> 06:02.400
Okay. So this guy h will stay in the row

06:02.400 --> 06:04.800
zero. If we say here, okay, is in the

06:04.800 --> 06:09.120
row z. Okay. But in the column one.

06:09.120 --> 06:13.039
Okay. Come column one. I save. Uh and if

06:13.039 --> 06:15.759
I run this. Okay. Perfect. Is there

06:15.759 --> 06:19.120
itself? Okay. Now is this guy. Okay. So

06:19.120 --> 06:24.240
this guy is in the row one. Okay. And is

06:24.240 --> 06:26.160
in column zero. Perfect. This guy is

06:26.160 --> 06:29.199
also in the row one but is in the column

06:29.199 --> 06:32.000
one. Okay. Save. If I run. Boom. Now we

06:32.000 --> 06:34.560
have all of them here. Okay. Perfecto.

06:34.560 --> 06:37.520
So in order to give those gaps that we

06:37.520 --> 06:39.680
can see for this guy has some kind of

06:39.680 --> 06:41.600
gap here. So we can do something like

06:41.600 --> 06:43.600
that. So I can just come here. I can

06:43.600 --> 06:45.960
come here. Okay. Here

06:45.960 --> 06:48.479
down here inside the grid. Okay. I can

06:48.479 --> 06:51.280
come here down. Okay. I'm just let me

06:51.280 --> 06:54.960
give a comma comma and comma. Oh, sorry.

06:54.960 --> 06:58.319
Uh putting those there. Okay. Give a

06:58.319 --> 07:00.560
comma space. So I can say something like

07:00.560 --> 07:06.000
that. Pad. Okay. Pad Y. Okay. Equal at

07:06.000 --> 07:08.479
least five. If I save and if I run,

07:08.479 --> 07:11.120
boom. We can see now it's giving space.

07:11.120 --> 07:14.840
Okay. I think that is not enough. Maybe

07:14.840 --> 07:17.840
it's eight or seven. Save if I run.

07:17.840 --> 07:22.160
Boom. Okay, that one is good. Okay, then

07:22.160 --> 07:25.560
I can give also comma. Then I can say

07:25.560 --> 07:28.800
pad y. Okay, the same the same way that

07:28.800 --> 07:32.639
we have x. Okay, then we have also y. So

07:32.639 --> 07:36.000
x it give like a horizontal space. Okay,

07:36.000 --> 07:38.160
and y it give like a vertical space.

07:38.160 --> 07:41.599
Okay. So if I say pad y equal and for

07:41.599 --> 07:45.360
example five save and if I run boom we

07:45.360 --> 07:47.039
have some kind of space something like

07:47.039 --> 07:50.960
that. Okay. Good. This is what we this

07:50.960 --> 07:53.039
is what we want. So now let's change the

07:53.039 --> 07:55.360
colors of those guys. Okay. Of this

07:55.360 --> 07:57.599
those frames. So to change the color of

07:57.599 --> 07:59.919
those frames. Okay. We can come here.

07:59.919 --> 08:02.879
Okay. For this one is blue. Uh if I we

08:02.879 --> 08:06.000
check here. Okay. It's yellow. Bye-bye

08:06.000 --> 08:08.560
blue. Stay yellow.

08:08.560 --> 08:13.240
And uh oh okay red. The second one is

08:13.240 --> 08:16.960
red. I save. And what is the next is

08:16.960 --> 08:19.879
green. Okay. The next one is

08:19.879 --> 08:24.960
green. Bye-bye. You stay green. I save.

08:24.960 --> 08:28.160
And if I run this, boom. Now we have the

08:28.160 --> 08:30.479
same result. Okay. So now let's decrease

08:30.479 --> 08:34.159
this windows which is too big to uh

08:34.159 --> 08:36.719
let's say 250 is good. If I save and if

08:36.719 --> 08:40.560
I run. Perfe. And this guy. Let's close

08:40.560 --> 08:42.479
for a while. Let's say 500. Save and

08:42.479 --> 08:47.200
run. Oh, too small. Three. Save and run.

08:47.200 --> 08:50.800
Yeah. Perfe. We can see. Okay. Uh, I

08:50.800 --> 08:54.080
think this got to go for three. 230. And

08:54.080 --> 08:55.920
if I save and I run. Boom. Now we have

08:55.920 --> 08:57.720
the same thing.

08:57.720 --> 09:01.440
Okay. So now we have the same result as

09:01.440 --> 09:04.640
the one that is showing here. Okay. So

09:04.640 --> 09:06.880
this is how we can use frames. Okay. So

09:06.880 --> 09:09.120
now we said okay inside of frame we can

09:09.120 --> 09:10.640
start organizing all things. So let's

09:10.640 --> 09:13.040
say like for example this frame uh we

09:13.040 --> 09:17.200
want to use it like for how can I say

09:17.200 --> 09:19.519
okay for we want to use this one just to

09:19.519 --> 09:21.279
put some information there some normal

09:21.279 --> 09:22.720
information there. For example I can

09:22.720 --> 09:24.480
just come here for uh let me create one

09:24.480 --> 09:29.760
label label. Okay so uh okay label label

09:29.760 --> 09:33.839
equal class label. Okay, open. Say let's

09:33.839 --> 09:37.200
say uh it's we want to place this label

09:37.200 --> 09:38.720
inside of this frame. Okay, we can just

09:38.720 --> 09:40.560
call this that frame. Okay, let's say

09:40.560 --> 09:44.480
frame one. Okay. Will be for

09:47.720 --> 09:52.399
examp let me put name sorry will be name

09:52.399 --> 09:57.600
for example name dot sorry dot let's say

09:57.600 --> 10:00.720
my name which is my name I save then

10:00.720 --> 10:03.120
let's place this label okay let's say

10:03.120 --> 10:05.160
lbl okay

10:05.160 --> 10:10.160
dot pack dotpack open and close sorry

10:10.160 --> 10:12.880
and if I run this boom. Now we have this

10:12.880 --> 10:15.760
name here inside of this label. So

10:15.760 --> 10:17.279
inside of this frame. Okay. So this is

10:17.279 --> 10:20.160
how we use uh frames. Okay. So frame is

10:20.160 --> 10:22.000
very good for us to organize our layout

10:22.000 --> 10:24.480
and to create the things properly. Okay.

10:24.480 --> 10:27.200
To organize the the application. Okay.

10:27.200 --> 10:29.839
UI user interface. So for if I copy this

10:29.839 --> 10:34.560
guy also copy. Come come stay here. Uh

10:34.560 --> 10:37.279
let's put it in frame two. No frame

10:37.279 --> 10:40.079
four. Frame four. Save. And if I run

10:40.079 --> 10:42.320
this, boom. Now we have here also name.

10:42.320 --> 10:44.720
Okay, this is how we use uh frame to

10:44.720 --> 10:48.000
organize the wid gates. Boom. So guys,

10:48.000 --> 10:50.560
we stay here. Okay, in the next uh

10:50.560 --> 10:52.560
tutorial, next video we are going to

10:52.560 --> 10:54.240
learn a new stuffs. Okay, so if you like

10:54.240 --> 10:56.320
the video, give a like and stay in the

10:56.320 --> 10:58.399
channel. Subscribe for the for more

10:58.399 --> 11:00.320
videos. Okay, so my name is Jawin.

11:00.320 --> 11:04.720
Bye-bye. See you in the next video. Bye.