1
00:00:01,030 --> 00:00:02,950
Hey, welcome back to a new video.

2
00:00:03,340 --> 00:00:13,120
This video is more advanced in terms of organizing widgets because what we had so far is this window

3
00:00:13,120 --> 00:00:13,390
here.

4
00:00:13,630 --> 00:00:20,620
So the widgets are stacked vertically, but in this video, we will change this to this.

5
00:00:20,980 --> 00:00:22,510
So this is what we're going to build.

6
00:00:22,510 --> 00:00:27,880
As you see, there's a more advanced layout of the widgets.

7
00:00:28,180 --> 00:00:34,840
So we have these two widgets stacked vertically and these two also stacked vertically.

8
00:00:35,110 --> 00:00:41,620
And both these two vertical layouts are standing horizontally.

9
00:00:42,070 --> 00:00:45,730
So this layout here and then on the right, you have this layout.

10
00:00:46,300 --> 00:00:51,970
So this is important if you really want to build applications with POI Q.T.

11
00:00:53,410 --> 00:00:54,580
So let's get started.

12
00:00:57,580 --> 00:01:05,290
The current codes produces, as I told you, this current app such as that, you know, we built this

13
00:01:05,290 --> 00:01:08,590
previously, so now I'm going to add on top of these codes.

14
00:01:10,000 --> 00:01:17,770
But before we write any code, you definitely first want to make a layout how you want your app to look

15
00:01:17,770 --> 00:01:18,070
like.

16
00:01:18,910 --> 00:01:24,100
So I'll suggest you take a pen and a paper and drove together with me.

17
00:01:24,370 --> 00:01:32,770
Now this drawing this sketch was not necessary before because all we had to was just some widgets stacked

18
00:01:32,770 --> 00:01:33,400
vertically.

19
00:01:34,450 --> 00:01:37,930
But now you have to give some more thought to the layout.

20
00:01:38,230 --> 00:01:45,250
So you really, really need to draw something on a paper or on your tablet or your digital app if you

21
00:01:45,250 --> 00:01:45,760
prefer.

22
00:01:46,210 --> 00:01:54,310
So I'm going to switch now to my drawing app and design our interface.

23
00:01:58,530 --> 00:02:02,760
I apologize for my drawing, but so this is the main window.

24
00:02:03,900 --> 00:02:07,830
And so what we want to have is a drop down list in here.

25
00:02:09,800 --> 00:02:12,410
And I drove down this summer in here.

26
00:02:15,650 --> 00:02:23,750
And then we have the input box in here and then the button somewhere in here, and then we're going

27
00:02:23,750 --> 00:02:28,610
to have the labels of the output showing somewhere in here.

28
00:02:29,360 --> 00:02:33,260
So that's a drop list that is also a drop down list.

29
00:02:34,730 --> 00:02:37,070
This is the input box.

30
00:02:37,370 --> 00:02:38,390
This is the button.

31
00:02:41,390 --> 00:02:42,920
That would be the label.

32
00:02:44,240 --> 00:02:45,740
Now here's what we do.

33
00:02:46,070 --> 00:02:57,070
We will use a hierarchy of layouts, so we saw previously that we created a layout and here using cuvee

34
00:02:57,080 --> 00:03:02,090
box layout and then we added the combo widgets or the dropdown list to that layout.

35
00:03:02,450 --> 00:03:06,230
Then we added the other dropdown lists widget to that layout.

36
00:03:06,680 --> 00:03:11,810
We did the same for the input text box and for the label, for the button.

37
00:03:13,340 --> 00:03:20,300
So that was one single layout and that was a vertical layout, meaning that as we added two widgets,

38
00:03:20,480 --> 00:03:22,370
the widgets were stacked vertically.

39
00:03:22,730 --> 00:03:25,370
Now we go back to our interface and.

40
00:03:26,660 --> 00:03:29,660
We think of what layout we will have.

41
00:03:29,840 --> 00:03:33,710
So again, the first layout that we will have will be.

42
00:03:35,890 --> 00:03:38,290
One big layouts object.

43
00:03:41,200 --> 00:03:44,290
So let's call that the main.

44
00:03:48,180 --> 00:03:48,750
Layout.

45
00:03:50,500 --> 00:03:54,160
Then this main layout is going to have insides.

46
00:03:55,260 --> 00:03:56,580
Another the layout.

47
00:03:58,970 --> 00:04:00,170
Which is this one in here?

48
00:04:02,670 --> 00:04:05,250
So let's branch this to.

49
00:04:07,200 --> 00:04:17,579
Lay out one of the main layered we'll have this layout one, and it will also have the label here,

50
00:04:18,089 --> 00:04:22,860
so the label doesn't need to be inside a layout, so we're going to have.

51
00:04:26,360 --> 00:04:30,920
The label, as it stands alone, widget says that this is just one way.

52
00:04:31,160 --> 00:04:38,600
It doesn't need to be inside allowed other than this blue layout here is going to contain two of the

53
00:04:38,600 --> 00:04:44,570
labels this one in here, which will contain these two drop down lists.

54
00:04:45,960 --> 00:04:46,890
And also these.

55
00:04:49,620 --> 00:04:50,100
Other one.

56
00:04:51,520 --> 00:05:02,260
So layout one will be branch into all the old two and lay out three.

57
00:05:04,020 --> 00:05:08,700
And obviously, level two, which is this one in here, we'll have.

58
00:05:12,790 --> 00:05:21,550
Two jobs, long lists or combo boxes, so let's say Combo one and Combo two and two three will have

59
00:05:21,880 --> 00:05:29,380
also two widgets, which is the inputs widget or a queue line, edits, widgets, whatever you like

60
00:05:29,380 --> 00:05:30,100
to name it.

61
00:05:30,550 --> 00:05:32,290
And then the bottom.

62
00:05:34,930 --> 00:05:35,560
So that's it.

63
00:05:36,880 --> 00:05:44,770
So with that, we have included all our widgets in Turkey in a clear hierarchy, and we're now ready

64
00:05:44,770 --> 00:05:50,260
to go back to our codes and converted this layout into Python lines.

65
00:05:51,770 --> 00:06:01,480
And before we go back to our I.D. to program this design into Python codes, we first want to specify

66
00:06:02,020 --> 00:06:05,230
what type of layout each of these are.

67
00:06:05,380 --> 00:06:07,900
So is it a vertical layout or a horizontal layout?

68
00:06:08,080 --> 00:06:12,910
So let's look at the main layout as you see this layout is made of.

69
00:06:14,810 --> 00:06:22,880
This blue layout and the label, so the blue layout is on top of the label, so we're looking at a vertical

70
00:06:22,880 --> 00:06:23,300
layout.

71
00:06:23,510 --> 00:06:32,570
So I'm going to write here a V, so that is a vertical layout because its children are stacked vertically.

72
00:06:32,750 --> 00:06:35,120
And then we look at the layout to one.

73
00:06:36,590 --> 00:06:43,640
Layout one is this blue, and it has this layout here and this all the layout.

74
00:06:44,660 --> 00:06:50,660
So these two layouts are stacked horizontally, so they all two and they all three are stacked horizontally.

75
00:06:50,870 --> 00:06:53,180
So this will be horizontal layout.

76
00:06:53,720 --> 00:06:59,150
I'm going to place an h here and then we have layout two, which is this.

77
00:07:01,110 --> 00:07:01,530
Here.

78
00:07:02,770 --> 00:07:10,420
And so the widgets are stacked vertically and the same sense for level three, so this is a vertical

79
00:07:10,420 --> 00:07:12,580
layout and this is a vertical layout as well.

80
00:07:13,140 --> 00:07:13,630
And that's it.

81
00:07:13,900 --> 00:07:17,290
Now we're ready to go back to it and start coding.

82
00:07:17,500 --> 00:07:25,120
So to cover this design into the Python code, I'm going to resize this window so that I see both from

83
00:07:25,120 --> 00:07:28,990
my programming area and the design.

84
00:07:30,610 --> 00:07:32,470
So that's the current codes.

85
00:07:32,480 --> 00:07:39,910
And so we go down here where we define the app instance, the window that contains all the widgets,

86
00:07:39,910 --> 00:07:42,070
the layout, which is a vertical layout.

87
00:07:42,310 --> 00:07:44,320
So main layout is a vertical layout.

88
00:07:44,890 --> 00:07:46,150
That's the main layout.

89
00:07:46,720 --> 00:07:52,390
So Cuvee stands for a vertical layout, so that's fine.

90
00:07:53,230 --> 00:07:56,980
But then what does the vertical layouts contain?

91
00:07:57,010 --> 00:08:01,840
Well, it contains a horizontal layout and a label.

92
00:08:02,140 --> 00:08:11,560
So what I'll do here is I will create layout one so I can use of the same names here that I wrote in

93
00:08:11,560 --> 00:08:13,840
the design as a variable names in the code.

94
00:08:14,110 --> 00:08:19,960
So layouts one a equal to Q H box layout, which needs to be imported now.

95
00:08:21,360 --> 00:08:23,100
So less important in here.

96
00:08:23,550 --> 00:08:27,450
Q Box layout, which stands for a horizontal layout.

97
00:08:28,440 --> 00:08:29,100
So cute.

98
00:08:31,230 --> 00:08:35,220
And once you create that layout, then you want to add.

99
00:08:36,340 --> 00:08:43,350
That's layouts to layout to the main layout, which is the value of a layout, so layout adds layout.

100
00:08:43,400 --> 00:08:48,190
This is the method that is used to add one layout on top of another.

101
00:08:48,520 --> 00:08:52,210
So layout one will be the child of layout.

102
00:08:54,520 --> 00:08:58,000
So that was the first step, and then we have the label.

103
00:08:58,210 --> 00:09:01,180
So under this, now I'm going to add the label.

104
00:09:01,480 --> 00:09:03,940
The label is currently somewhere in here.

105
00:09:04,360 --> 00:09:10,300
So those are the two lines that create and add the label widgets to the main layout.

106
00:09:10,630 --> 00:09:14,350
I'm going to cut those and piece them under here.

107
00:09:14,710 --> 00:09:21,520
So layout one ultimate label is that and then we add the ultimate label to the main layout.

108
00:09:22,090 --> 00:09:22,470
Yes.

109
00:09:22,480 --> 00:09:25,540
So the label is part of the main layout.

110
00:09:25,900 --> 00:09:26,680
So that's fine.

111
00:09:27,730 --> 00:09:34,150
Then we go deeper into how our hierarchy and we have layouts too.

112
00:09:34,160 --> 00:09:38,040
So let's create layout to a single suit.

113
00:09:38,220 --> 00:09:41,260
Q That's a vertical layout.

114
00:09:42,070 --> 00:09:45,490
So we're going to use cuvee box layout for that.

115
00:09:47,820 --> 00:09:53,370
Don't forget the parentheses, and then don't forget to add it to label to one.

116
00:09:54,600 --> 00:10:05,520
So Label two is part of the old one, so let one dot add layout and then layouts to their right and

117
00:10:05,520 --> 00:10:06,620
then the same.

118
00:10:06,630 --> 00:10:08,400
We do four layout three.

119
00:10:08,400 --> 00:10:11,160
So I'm going to copy those two lines, pays them here.

120
00:10:11,340 --> 00:10:15,420
Change the labels to two, layer three and tier as well to layout three.

121
00:10:15,720 --> 00:10:19,990
So now three is added to label to one, and it's a vertical layout.

122
00:10:20,940 --> 00:10:22,510
So we have those two layouts.

123
00:10:22,530 --> 00:10:23,110
What else?

124
00:10:23,130 --> 00:10:28,440
Well, we have to go deeper into the hierarchy and we have combo one and combo two.

125
00:10:29,550 --> 00:10:31,020
So that would be the combo one.

126
00:10:31,170 --> 00:10:34,320
I'm not going to change the name of that's fine in combo.

127
00:10:35,790 --> 00:10:42,150
But then you have to be careful here in Combo has to be added to layout, too.

128
00:10:43,500 --> 00:10:50,100
You see, Combo one is added to label two and so is Target's combo here.

129
00:10:50,790 --> 00:10:59,790
So Target Combo is that we add items to the target's combo, and then we added two layout to add widgets

130
00:10:59,790 --> 00:11:00,630
target's combo.

131
00:11:00,900 --> 00:11:01,230
Yes.

132
00:11:02,250 --> 00:11:03,750
So be careful here.

133
00:11:03,750 --> 00:11:09,600
When we add widgets to a layout, we use the add to widget method.

134
00:11:09,930 --> 00:11:14,040
When we add a layout to a layout, we use the Adelaide method.

135
00:11:15,000 --> 00:11:18,390
So now we're adding a widget here and widgets in here.

136
00:11:19,290 --> 00:11:23,430
What else will we have in layout?

137
00:11:23,430 --> 00:11:26,970
Three, We have to add the input box and the bottom.

138
00:11:27,120 --> 00:11:30,690
So queue line edits is what I mean by input box.

139
00:11:31,830 --> 00:11:37,050
And we added two layouts three and the button as well.

140
00:11:37,170 --> 00:11:39,720
We add it to Level three also.

141
00:11:41,220 --> 00:11:44,190
So then we have Windows set layout.

142
00:11:44,580 --> 00:11:49,800
We said the main layout, which is referenced by the layouts variable.

143
00:11:50,960 --> 00:11:56,450
So the mainly undecided to the left and the other labels are added to that main layout and we and then

144
00:11:56,450 --> 00:11:58,340
we have a nice hierarchy.

145
00:11:59,000 --> 00:12:00,800
So let's run code.

146
00:12:03,320 --> 00:12:04,400
Yeah, that's the ultimate.

147
00:12:05,720 --> 00:12:10,940
Let's try a number here unconverted and we get the outputs correctly.

148
00:12:11,270 --> 00:12:14,510
So if you change it to another currency.

149
00:12:15,650 --> 00:12:19,220
You got that ultimate in Indian rupees.

150
00:12:19,970 --> 00:12:26,930
So now if you want to change this bottom to take it to be done because it's a bit too high, so you

151
00:12:26,930 --> 00:12:37,010
want to align it with this button here, then what you can do is when you add that button widget, which

152
00:12:37,010 --> 00:12:37,790
is.

153
00:12:39,760 --> 00:12:47,860
Down here, so when you add vets widgets to level three, using the add widget methods, you can define

154
00:12:47,860 --> 00:12:53,880
an alignment argument and set it to T dot.

155
00:12:54,280 --> 00:12:57,040
Now Kutty is something that needs to be imported.

156
00:12:57,280 --> 00:13:05,290
So go to the imports and say from pie cutesy, cutesy cuticle imports q t.

157
00:13:05,530 --> 00:13:15,460
Now Kutty gives you access to a set of properties such as a line on flag and then from a line flag you

158
00:13:15,460 --> 00:13:18,100
access another property with just a line bottom.

159
00:13:18,520 --> 00:13:24,190
So with that, you specify that the buttons should be aligned to the bottom of its layout.

160
00:13:24,520 --> 00:13:26,110
So if you run this again?

161
00:13:28,220 --> 00:13:30,980
You see that the bottom now is further down.

162
00:13:31,580 --> 00:13:36,320
So it's looking better, and that's the final code.

163
00:13:39,180 --> 00:13:48,600
Next, we will go more advanced with Piketty and create an app which destroys files so it deletes them

164
00:13:48,600 --> 00:13:53,880
permanently from a computer so that these files cannot be recovered.

165
00:13:54,060 --> 00:14:01,200
And for that, Apple going to use a file dialog feature to browse to the force of a computer and then

166
00:14:01,650 --> 00:14:03,150
interact with those files.

167
00:14:03,720 --> 00:14:05,490
So it's quite a lot of interesting stuff.

168
00:14:06,000 --> 00:14:09,210
Therefore, stay tuned and I'll talk to you in the next video to.