1
00:00:11,759 --> 00:00:20,399
En este vídeo vamos a ver cómo meter los diferentes widgets dentro de las cajas o los frames que hemos ido creando.

2
00:00:21,079 --> 00:00:30,160
Entonces vamos a poner primero, en el mismo orden en el que las hemos ido creando, los diferentes widgets.

3
00:00:30,160 --> 00:00:53,579
En cabecera lo que va es el nombre del alumno, ¿vale? Entonces, o bien os hacéis otra función en la que vais cargando la cabecera, el pie, los botones, el principal, todas estas cosillas, o lo vamos haciendo a continuación.

4
00:00:53,579 --> 00:01:17,060
Como en el examen os pedí hacer clases, pues vamos a hacerles una clase. Aunque insisto en que os la podréis hacer, seguir haciéndolo debajo, ¿vale? Repitiendo con el widget, con el label, ir metiendo el texto, ir metiendo la fuente, el tamaño, dónde queréis dibujar ese widget, que es lo importante, ¿vale?

5
00:01:17,060 --> 00:01:28,500
En este caso estamos en la cabecera, entonces todo eso hay que tenerlo un poco, bueno, lo hacéis un poco como a vosotros os venga mejor y sea más óptimo, ¿vale?

6
00:01:28,500 --> 00:01:53,900
En este caso, le voy a declarar una clase que se llame mi texto, que no va a heredar de nada, que tiene como siempre su constructor init-bajo-bajo, y en este caso le voy a pasar a este init el self, como siempre es una clase,

7
00:01:53,900 --> 00:02:15,840
le voy a pasar la sección donde quiero que me lo dibuje, le vamos a pasar el texto que quiero que me ponga, le voy a pasar la fuente, el tamaño, le vamos a pasar la posición y le voy a pasar el color.

8
00:02:15,840 --> 00:02:21,740
Por ejemplo, luego ya vamos viendo si me hace falta más cosas, pues le vamos poniendo más cosillas, ¿vale?

9
00:02:21,740 --> 00:02:51,169
Y aquí para poder usarlo en diferentes métodos de esta clase, pues como siempre vale el self.sección es igual a sección, self.texto es igual a texto, self.fuente es igual a fuente,

10
00:02:51,169 --> 00:02:57,400
self.tamaño

11
00:02:57,400 --> 00:03:01,780
es igual a tamaño

12
00:03:01,780 --> 00:03:08,020
self.posición

13
00:03:08,020 --> 00:03:10,259
es igual a posición

14
00:03:10,259 --> 00:03:16,610
y self.color es igual a color

15
00:03:16,610 --> 00:03:21,090
vale, y ahora recordad que como ya le hemos metido el self

16
00:03:21,090 --> 00:03:24,770
a todas estas variables ya son parte de esta clase

17
00:03:24,770 --> 00:03:29,430
es información de esa clase, de esa instantiación de esa clase

18
00:03:29,430 --> 00:03:33,270
vale, entonces aquí ahora

19
00:03:33,270 --> 00:03:36,469
lo que voy a decirle, lo que vamos a hacer es la función

20
00:03:36,469 --> 00:03:41,150
donde cargo el texto, entonces lo vamos a llamar

21
00:03:41,150 --> 00:03:45,590
textLog, por ejemplo, le paso el self

22
00:03:45,590 --> 00:03:48,789
y ahora lo que hago es dibujar ese texto

23
00:03:48,789 --> 00:03:53,289
vale, entonces le vamos a meter self.primero, la sección

24
00:03:53,289 --> 00:03:57,129
vale, entonces le digo self.sec

25
00:03:57,129 --> 00:04:01,030
esto en realidad no me haría falta hacerlo así, pero bueno

26
00:04:01,030 --> 00:04:04,969
yo siempre se lo asigno, la salida del widget siempre la asigno a una variable

27
00:04:04,969 --> 00:04:09,289
por si luego tengo que hacer referencia, vale, esto es igual a tk.label

28
00:04:09,949 --> 00:04:11,469
porque es un label lo que queremos

29
00:04:11,469 --> 00:04:17,310
y tk parece

30
00:04:17,310 --> 00:04:21,189
no está declarado, entonces tk tenemos que declararlo

31
00:04:21,189 --> 00:04:23,370
ahí arriba, ¿vale? como siempre

32
00:04:23,370 --> 00:04:26,389
así que vamos a ello

33
00:04:26,389 --> 00:04:31,350
vamos a poner aquí arriba

34
00:04:31,350 --> 00:04:36,709
el import teca inter

35
00:04:36,709 --> 00:04:44,819
azteca, ¿vale? y así ya lo tenemos

36
00:04:44,819 --> 00:04:47,779
como siempre, vamos a ir a este punto y como decirlo

37
00:04:47,779 --> 00:04:52,180
me vuelvo un poco loquillo

38
00:04:52,180 --> 00:04:57,879
vale, entonces tenemos el widget label de tk

39
00:04:57,879 --> 00:05:00,939
y aquí lo que le voy a decir es

40
00:05:00,939 --> 00:05:05,480
donde quiero que me lo dibuje, que es lo que le hemos pasado

41
00:05:05,480 --> 00:05:10,100
al constructor en sección, vale, que sección a su vez

42
00:05:10,100 --> 00:05:13,259
lo hemos pasado a la variable de instancia del self.section

43
00:05:13,259 --> 00:05:20,100
entonces que le voy a decir aquí, pues quiero que me lo dibuje en self.section

44
00:05:20,100 --> 00:05:39,759
vale, y el texto que va a ser igual a self.texto, vale, en este caso, ¿qué es lo que nos va a hacer?, nos va a, ya le hemos dicho donde quiero que me ponga esta etiqueta,

45
00:05:39,759 --> 00:05:49,579
y el texto que quiero que me escriba, vale, eso se lo paso a la clase, en el constructor, lo meto en la variable distancia, y aquí se lo paso al widget, vale,

46
00:05:49,579 --> 00:06:07,620
Bueno, ¿qué más quiero que me haga esta función? Pues por ejemplo, ya que le hemos pasado el color, vamos a decirle el color que queremos, ¿vale?

47
00:06:07,699 --> 00:06:15,959
Y el color, pues le vamos a decir que nos coja este color de fuente, ¿vale?

48
00:06:15,959 --> 00:06:37,060
Entonces, para hacer eso, esta clase la hemos llamado coloresAplicación, pues vamos a crearnos una variable que la vamos a llamar, pues eso, coloresAplicación, entonces le vamos a poner self.colores, es igual a coloresAplicación, ¿vale?

49
00:06:37,060 --> 00:06:55,160
Y una vez que tengo ya instanciado colores a aplicación, puedo coger cualquiera de estos colores, pues vamos a meternos en self.sec, ¿vale? Para hacer referencia al label, .config.

50
00:06:55,160 --> 00:07:15,339
Y así modificamos la configuración, ¿vale? Y en este caso la configuración, es decir, el FG, esto va a ser igual a el self.color, el color que hemos pasado y queremos que sea nuestro texto, ¿vale?

51
00:07:15,339 --> 00:07:18,819
la fuente, pues en este caso

52
00:07:18,819 --> 00:07:21,139
le voy a hacer una fuente siempre

53
00:07:21,139 --> 00:07:26,339
ah no, se la hemos pasado también antes, así que le ponemos

54
00:07:26,339 --> 00:07:29,500
entonces el self.fuente

55
00:07:29,500 --> 00:07:35,199
pero font va entre paréntesis

56
00:07:35,199 --> 00:07:37,899
así, self.font

57
00:07:37,899 --> 00:07:40,759
fuente, esto

58
00:07:40,759 --> 00:07:44,759
y el tamaño que también se lo hemos pasado

59
00:07:44,759 --> 00:07:47,019
ser punto tamaño

60
00:07:47,019 --> 00:07:48,899
vale

61
00:07:48,899 --> 00:07:50,420
vale

62
00:07:50,420 --> 00:07:53,420
nos falta decir el color de fondo

63
00:07:53,420 --> 00:07:55,540
bajo el bg

64
00:07:55,540 --> 00:07:58,100
y esto va a ser igual a

65
00:07:58,100 --> 00:07:59,860
ser punto, como es el color

66
00:07:59,860 --> 00:08:00,600
de cabecera

67
00:08:00,600 --> 00:08:03,420
es lo de

68
00:08:03,420 --> 00:08:05,420
aquí está el color cabecera

69
00:08:05,420 --> 00:08:07,319
vale, pues entonces ponemos el self

70
00:08:07,319 --> 00:08:09,660
vamos a poner colores

71
00:08:09,660 --> 00:08:11,699
porque es donde he instanciado colores

72
00:08:11,699 --> 00:08:13,339
aplicaciones, es ser punto

73
00:08:13,339 --> 00:08:14,660
colores

74
00:08:14,660 --> 00:08:16,300
a un momentito que llaman

75
00:08:16,300 --> 00:08:19,120
vale

76
00:08:19,120 --> 00:08:21,600
entonces estábamos diciendo el color

77
00:08:21,600 --> 00:08:23,759
de fondo, el pgColor

78
00:08:23,759 --> 00:08:26,459
y lo estábamos haciendo contra colores

79
00:08:26,459 --> 00:08:28,680
que es la instancia de colores aplicación

80
00:08:28,680 --> 00:08:29,959
y en este caso es colores

81
00:08:29,959 --> 00:08:32,360
y le digo que me coja el color

82
00:08:32,360 --> 00:08:36,480
este, justo, el color

83
00:08:36,480 --> 00:08:37,120
de cabecera

84
00:08:37,120 --> 00:08:38,820
vale

85
00:08:38,820 --> 00:08:43,580
¿qué más nos haría falta?

86
00:08:47,990 --> 00:08:54,990
Podríamos decirle que nos devuelva, meterle un pathX y un pathY, por ejemplo.

87
00:08:54,990 --> 00:09:02,990
Esto ya es un poco lo que como a vosotros os guste más, como diseñadores de la interfaz.

88
00:09:02,990 --> 00:09:07,990
Vamos a ponerle este, el pathX, pathY, 10.

89
00:09:07,990 --> 00:09:16,990
Bueno, y por último, como siempre, al widget recordad que hay que decirle dónde quiero que me lo dibuje.

90
00:09:16,990 --> 00:09:32,690
Vale, o sea, al final con los widgets lo importante siempre es que nos meta, o sea, decirle dónde queremos dibujar el widget y luego posicionarlo.

91
00:09:33,409 --> 00:09:40,309
Con eso ya nos valdría, el resto son atributos que podéis usarlos o no.

92
00:09:40,309 --> 00:09:47,110
Vale, entonces lo último que nos quedaría sería el self.sec.pack

93
00:09:47,110 --> 00:09:48,950
Vamos a usar el pack

94
00:09:48,950 --> 00:09:52,850
Recordad que teníamos tres formas de alinear los widgets

95
00:09:52,850 --> 00:09:55,870
Con el pack, con el grid y con el place

96
00:09:55,870 --> 00:09:59,789
Vale, y entonces en este caso, ¿qué le voy a decir?

97
00:09:59,789 --> 00:10:06,210
El side va a ser igual a self.position

98
00:10:06,210 --> 00:10:09,250
Que para eso se la hemos pasado, ¿vale?

99
00:10:10,309 --> 00:10:29,190
Y esta sería una clase a la que yo la puedo llamar constantemente y ir dibujando el texto que yo quiera, en la sección que yo quiera, con el tamaño, con todo eso, ¿vale? Con la fuente que yo quiero, ¿vale? Y esto está bien, esto es uno de los principios de programación que es reutilizar el código.

100
00:10:29,190 --> 00:10:58,190
Vale, volvemos a nuestra clase ventana principal y aquí es donde vamos a llamar a nuestro texto, ¿vale? Entonces, vamos a ver, aquí le vamos a decir que mi texto, bueno, primero tenemos que importar, obviamente, esta clase.

101
00:10:59,190 --> 00:11:23,769
mi texto. Vale. Segundo, vamos a coger y vamos a decirle, a ver si así me vale, sin

102
00:11:23,769 --> 00:11:32,210
tener que hacer mucho más, digo mi texto, paréntesis, a ver si nos lo coge. Primero,

103
00:11:32,210 --> 00:11:40,029
¿Dónde quiero la sección? ¿Dónde queremos dibujarlo? self.cabecera.

104
00:11:41,330 --> 00:11:49,029
Segundo, el texto que queremos que nos dibuje. En este caso es el nombre del alumno que vamos a poner, Lucas.

105
00:11:49,029 --> 00:11:52,370
tercero, la fuente

106
00:11:52,370 --> 00:11:54,210
vale, entonces para la fuente

107
00:11:54,210 --> 00:11:56,549
yo ahora mismo estoy con el

108
00:11:56,549 --> 00:11:57,870
portátil, con el Mac

109
00:11:57,870 --> 00:12:00,690
pues voy a usar

110
00:12:00,690 --> 00:12:02,230
el

111
00:12:02,230 --> 00:12:03,389
gusheri block

112
00:12:03,389 --> 00:12:13,539
vale, el tamaño

113
00:12:13,539 --> 00:12:15,080
vamos a poner a 20

114
00:12:15,080 --> 00:12:16,480
luego

115
00:12:16,480 --> 00:12:19,539
ahora lo testeamos y lo vamos

116
00:12:19,539 --> 00:12:19,980
mirando

117
00:12:19,980 --> 00:12:22,159
tk.

118
00:12:22,159 --> 00:12:22,860
punto

119
00:12:22,860 --> 00:12:25,080
pues top

120
00:12:25,080 --> 00:12:28,019
vale, le decimos que no lo ponga arriba

121
00:12:28,019 --> 00:12:32,840
ahora nos pide el color

122
00:12:32,840 --> 00:12:35,620
self.colores

123
00:12:35,620 --> 00:12:39,179
color

124
00:12:39,179 --> 00:12:45,759
aquí como color principal

125
00:12:45,759 --> 00:12:48,539
vale, pues aquí le vamos a decir

126
00:12:48,539 --> 00:12:50,039
el color de la fuente

127
00:12:50,039 --> 00:12:52,259
entiendo que este

128
00:12:52,259 --> 00:12:53,899
vale

129
00:12:53,899 --> 00:12:58,330
el color de la fuente

130
00:12:58,330 --> 00:12:59,909
el color de la fuente

131
00:12:59,909 --> 00:13:11,009
el color de la fuente, vale, yo creo que sí, vale, y ya estaría, no nos pide nada más,

132
00:13:11,570 --> 00:13:22,759
ahora vamos a probarlo, así que me vengo a principal, y esto no me ha dado ningún error,

133
00:13:22,879 --> 00:13:29,820
pero tampoco me lo ha puesto, vale, ¿por qué no nos ha impreso, por qué no nos ha mostrado el widget?

134
00:13:29,820 --> 00:13:32,860
Pues porque en la clase no hemos llamado al testload

135
00:13:32,860 --> 00:13:38,440
Entonces tenemos que llamarle desde aquí al cell.textload

136
00:13:38,440 --> 00:13:44,700
Con eso ya sí, ya, claro, o le llamamos desde la misma clase

137
00:13:44,700 --> 00:13:51,259
O le llamo desde donde he instanciado esta clase

138
00:13:51,259 --> 00:13:53,980
¿Vale? Pero tengo que llamarle, por eso no me estaba haciendo nada

139
00:13:53,980 --> 00:13:55,659
Vamos a ver si ya sí nos lo hace

140
00:13:55,659 --> 00:13:58,539
Le damos al play, ¿vale?

141
00:13:58,539 --> 00:14:02,139
Y aquí ya tenemos el nombre con el tipo de letra.

142
00:14:03,100 --> 00:14:06,940
Bueno, pues ese sería el nombre, ¿vale?

143
00:14:07,580 --> 00:14:10,559
La fuente que queráis y que os la coja.

144
00:14:12,419 --> 00:14:18,840
La que yo os pasaré para los exámenes y eso son fuentes que vienen en los portátiles de clase, así que no hay problema.

145
00:14:20,639 --> 00:14:24,700
Vale, y te has hecho una clase que es muy cómoda a la hora de trabajar,

146
00:14:24,700 --> 00:14:54,059
Fijaros que ahora ya solo para meter el texto del pie, ¿no? Pues tengo que hacer básicamente lo mismo, es mi texto, self. En este caso, ¿dónde lo quiero meter? En el pie, ¿vale?

147
00:14:56,580 --> 00:14:58,259
¿El texto que le quiero pasar?

148
00:15:01,259 --> 00:15:02,679
El nombre...

149
00:15:02,679 --> 00:15:04,320
No, era examen

150
00:15:04,320 --> 00:15:06,179
primera

151
00:15:06,179 --> 00:15:09,220
evaluación.

152
00:15:14,750 --> 00:15:15,429
Curso

153
00:15:15,429 --> 00:15:18,129
2023

154
00:15:18,129 --> 00:15:20,730
2024

155
00:15:20,730 --> 00:15:25,889
¿Vale?

156
00:15:26,289 --> 00:15:27,690
Le voy a pasar la misma.

157
00:15:29,049 --> 00:15:29,389
El

158
00:15:29,389 --> 00:15:31,409
Cucheri

159
00:15:31,409 --> 00:15:33,509
blog

160
00:15:33,509 --> 00:15:39,669
le pasamos el mismo tamaño

161
00:15:39,669 --> 00:15:46,100
le paso la orientación donde quiero que me lo ponga

162
00:15:46,100 --> 00:15:50,019
a la izquierda, me parece que era, va a ser punto

163
00:15:50,019 --> 00:15:55,799
y aquí le vamos a poner

164
00:15:55,799 --> 00:16:02,899
color fuente secundaria

165
00:16:02,899 --> 00:16:05,759
por ejemplo, no me acuerdo si era este

166
00:16:05,759 --> 00:16:10,659
vale, pero ahora lo probamos, en todo caso, ya veis que

167
00:16:10,659 --> 00:16:13,919
ahora ya para ir metiendo texto en las diferentes

168
00:16:13,919 --> 00:16:18,279
secciones de las que hemos ido creando

169
00:16:18,279 --> 00:16:22,559
sería tan simple como esto, vale, bueno, entonces nos vamos

170
00:16:22,559 --> 00:16:25,279
a main, le doy al play

171
00:16:25,279 --> 00:16:30,620
y aquí está, vale, pone Lucas aquí arriba

172
00:16:30,620 --> 00:16:35,419
y aquí a la izquierda, examen primera evaluación, curso 2023-2024

173
00:16:35,419 --> 00:16:37,940
vale, y ya tenemos

174
00:16:37,940 --> 00:16:41,639
la fuente o el texto

175
00:16:41,639 --> 00:16:44,720
¿vale? en la caja de arriba y en la caja de abajo

176
00:16:44,720 --> 00:16:51,019
¿vale? ¿qué más tenemos que ir metiendo? los botones

177
00:16:51,019 --> 00:16:54,539
¿vale? entonces para el tema de los botones

178
00:16:54,539 --> 00:17:01,740
bueno, antes de los botones

179
00:17:01,740 --> 00:17:05,900
metíamos otro texto en el

180
00:17:05,900 --> 00:17:09,859
principal, cuando arrancaba la aplicación que ponía Villablanca

181
00:17:09,859 --> 00:17:14,319
rp, vamos a hacer eso, vamos a ponerle

182
00:17:14,319 --> 00:17:17,660
en este caso, bueno, pues le vamos a poner self.

183
00:17:23,420 --> 00:17:24,819
vamos a ponerle

184
00:17:24,819 --> 00:17:29,220
set es igual a tk.label

185
00:17:29,220 --> 00:17:33,039
que en este caso podríamos también pasárselo directamente

186
00:17:33,039 --> 00:17:37,180
con mi texto, vale, pero se lo voy a pasar

187
00:17:37,180 --> 00:17:41,720
para que veáis que también podéis

188
00:17:41,720 --> 00:17:45,720
estar trabajando con los widgets directamente sin necesidad de estar creando clases

189
00:17:45,720 --> 00:17:49,480
¿vale? aunque la forma de crear la clase

190
00:17:49,480 --> 00:17:53,900
te permite la reutilización del software, así como lo voy a hacer ahora pues no

191
00:17:53,900 --> 00:17:57,400
vale, entonces vamos a poner

192
00:17:57,400 --> 00:18:01,900
el label, queremos que nos lo ponga en self.principal

193
00:18:01,900 --> 00:18:05,680
queremos que el texto

194
00:18:05,680 --> 00:18:08,960
sea igual a

195
00:18:08,960 --> 00:18:09,279
eh

196
00:18:09,279 --> 00:18:12,319
Villablanca

197
00:18:12,319 --> 00:18:15,599
el exacto de carne

198
00:18:15,599 --> 00:18:18,720
y le meto

199
00:18:18,720 --> 00:18:20,640
el punto rp

200
00:18:20,640 --> 00:18:22,299
vale

201
00:18:22,299 --> 00:18:23,279
nuestro rp

202
00:18:23,279 --> 00:18:27,839
le decimos ser

203
00:18:27,839 --> 00:18:30,920
ser punto

204
00:18:30,920 --> 00:18:34,089
colores

205
00:18:34,089 --> 00:18:35,509
es igual a

206
00:18:35,509 --> 00:18:38,069
colores aplicación

207
00:18:38,069 --> 00:18:39,650
vale

208
00:18:39,650 --> 00:18:43,789
alguna instancia, lo mismo que he hecho antes, pero aquí tengo que estar repitiendo todo el tiempo

209
00:18:43,789 --> 00:18:47,329
lo mismo, vale, por eso os digo que es más cómodo hacer

210
00:18:47,329 --> 00:18:51,750
una clase y ir llamando

211
00:18:51,750 --> 00:18:55,849
a la clase y ya está, vale, eso ya os lo dejo a vosotros hacerlo de las dos

212
00:18:55,849 --> 00:18:59,609
formas y así lo vais probando, nfg es igual al

213
00:18:59,609 --> 00:19:02,730
self.colores

214
00:19:02,730 --> 00:19:15,240
o color fuente, vale, en principio

215
00:19:15,240 --> 00:19:18,440
esto ya no me hace falta tampoco, si esto ya lo hemos declarado arriba

216
00:19:18,440 --> 00:19:23,180
self colores, esto ya lo tenemos aquí declarado

217
00:19:23,180 --> 00:19:25,420
pues no nos hace falta, así que esto fuera

218
00:19:25,420 --> 00:19:28,759
esto fuera de aquí

219
00:19:28,759 --> 00:19:32,079
vale, en fg esto

220
00:19:32,079 --> 00:19:37,259
le vamos a decir también la fuente

221
00:19:37,259 --> 00:19:42,259
que le voy a poner la misma

222
00:19:42,259 --> 00:19:56,920
La fuente siempre, que siempre se me olvida

223
00:19:56,920 --> 00:19:59,819
Es entre paréntesis

224
00:19:59,819 --> 00:20:03,660
Siempre se pasa entre paréntesis

225
00:20:03,660 --> 00:20:10,619
Y se pasa la fuente y el tamaño

226
00:20:10,619 --> 00:20:14,140
Vale, pues aquí el tamaño, pues por ejemplo

227
00:20:14,140 --> 00:20:15,440
Vamos a meterle a 60

228
00:20:15,440 --> 00:20:18,740
Porque está en el principal y es algo más

229
00:20:18,740 --> 00:20:22,880
queremos que sea más grande, vale, insisto, esto todo es

230
00:20:22,880 --> 00:20:26,920
diseño, dejé el color de fondo, le digo

231
00:20:26,920 --> 00:20:30,700
que sea, ser punto, color

232
00:20:30,700 --> 00:20:35,000
pues ahora estamos en el principal, pues color de principal

233
00:20:35,000 --> 00:20:38,980
vale, y le meto un pad

234
00:20:38,980 --> 00:20:42,980
x de 10

235
00:20:42,980 --> 00:20:47,259
y un pad y de 10

236
00:20:47,259 --> 00:20:51,279
vale, y que es lo que nos faltaría, colocarlo

237
00:20:51,279 --> 00:20:54,200
como siempre, set.sec

238
00:20:54,200 --> 00:20:58,279
.pack, site

239
00:20:58,279 --> 00:21:06,230
site, en este caso yo lo quiero centrado

240
00:21:06,230 --> 00:21:10,210
y aquí lo único que me deja es el left, right, top y bottom, si no le pasas

241
00:21:10,210 --> 00:21:14,170
ningún site directamente ya te lo centra, vale, entonces lo que si

242
00:21:14,170 --> 00:21:17,890
que lo voy a pasar es un path y a 150

243
00:21:17,890 --> 00:21:23,789
cuenta pues para que me lo centre o esto lo voy a hacer un poco a ojímetro a ver cómo nos queda

244
00:21:23,789 --> 00:21:31,990
vale entonces vamos a darle al main le voy a dar al principal bueno y más o menos pues ahí vale

245
00:21:31,990 --> 00:21:41,410
lucas y la blanca rp y el curso y ahora empezaríamos con los botones vale con el tema de

246
00:21:41,410 --> 00:21:47,150
los botones, había que meter primero

247
00:21:47,150 --> 00:21:50,910
una imagen, ¿vale? Entonces

248
00:21:50,910 --> 00:21:55,029
voy a buscar primero la imagen, voy a pausar el vídeo, voy a buscar la imagen

249
00:21:55,029 --> 00:22:02,430
y continuamos. Bueno, una vez que hemos visto que nos

250
00:22:02,430 --> 00:22:05,869
funciona todo, ahora vamos a meter los widgets

251
00:22:05,869 --> 00:22:10,430
del lado izquierdo. Entonces para hacer esto

252
00:22:10,430 --> 00:22:14,349
en el examen nos pedían que pusiéramos una imagen con el

253
00:22:14,349 --> 00:22:21,650
logo del Villablanca en la parte superior, un botón que era en el que cargábamos los

254
00:22:21,650 --> 00:22:31,130
diferentes JSON y luego los guardábamos en la base de datos, en un botón, o sea, eso

255
00:22:31,130 --> 00:22:37,190
se tenía que ejecutar en un botón que estaba justo debajo de la imagen, ¿vale? Siempre

256
00:22:37,190 --> 00:22:43,170
pensando en la parte superior de ese frame y en la parte inferior del frame había otro

257
00:22:43,170 --> 00:22:52,109
botón que cuando lo pulsaba y salía vuestro nombre y algo así vale entonces fijaros como

258
00:22:52,109 --> 00:22:59,970
para la imagen me he creado una carpeta que es package y dentro de package he metido el

259
00:22:59,970 --> 00:23:09,009
logo punto png vale si veis en la documentación de python aconsejan meter todos este tipo de

260
00:23:09,009 --> 00:23:18,329
ficheros que son pues eso imágenes o ficheros que vayamos a utilizar dentro de nuestro python

261
00:23:18,329 --> 00:23:26,390
vale dentro de nuestro desarrollo dentro de la carpeta de pack por eso lo he metido ahí y ya

262
00:23:26,390 --> 00:23:32,890
está bien vale entonces vamos con esto lo primero es cargar la imagen para cargar la imagen me hace

263
00:23:32,890 --> 00:23:51,210
falta el foto image del tkinter vale entonces voy a coger from tkinter import foto image vale vale

264
00:23:52,329 --> 00:23:58,690
esto lo primero lo segundo pues ya empezamos a cargar esa imagen entonces vamos a

265
00:23:58,690 --> 00:24:03,789
crearnos la variable, vamos a llamar por ejemplo

266
00:24:03,789 --> 00:24:07,430
logo, por ejemplo, y este va a ser igual a

267
00:24:07,430 --> 00:24:11,349
tk.photoImage

268
00:24:11,349 --> 00:24:15,769
y le digo el fichero, vale, con el attribute of file

269
00:24:15,769 --> 00:24:17,950
para cargar, aquí solo estamos cargando

270
00:24:17,950 --> 00:24:23,789
o haciendo esa relación, vale

271
00:24:23,789 --> 00:24:27,630
diciéndole donde tengo que ir a buscar la imagen que quiero cargar y lo estoy guardando

272
00:24:27,630 --> 00:24:31,470
en la variable logo, aquí siempre que es un stream

273
00:24:31,470 --> 00:24:35,109
le vamos a decir, pues aquí estás en package

274
00:24:35,109 --> 00:24:39,670
barra y le hemos llamado

275
00:24:39,670 --> 00:24:41,730
logo.png

276
00:24:41,730 --> 00:24:47,750
a veces hay problemas a la hora de cargar las imágenes

277
00:24:47,750 --> 00:24:51,529
y eso puede ser por varias cosas, porque no le hayamos dado bien

278
00:24:51,529 --> 00:24:55,490
la ruta, porque no hayamos puesto bien el nombre de la imagen, porque no hayamos puesto

279
00:24:55,490 --> 00:24:59,490
la extensión, pero también pueden ser problemas de la propia imagen

280
00:24:59,490 --> 00:25:03,890
porque puede ser de 16 bits, puede estar indexada

281
00:25:03,890 --> 00:25:07,529
puede ser, vale, por el formato, por el tipo en el que está

282
00:25:07,529 --> 00:25:10,549
creada esa imagen nos puede dar problemas a la hora de cargar

283
00:25:10,549 --> 00:25:15,390
o de utilizarla dentro de un fichero de Python

284
00:25:15,390 --> 00:25:19,690
vale, en este caso

285
00:25:19,690 --> 00:25:22,190
vamos a pensar que este nos va a funcionar bien

286
00:25:22,190 --> 00:25:26,329
tengo el logo y entonces lo que voy a hacer es un tk

287
00:25:26,329 --> 00:25:30,549
y voy a poner un label, por ejemplo, ¿vale? como siempre

288
00:25:30,549 --> 00:25:31,809
le digo donde quiero

289
00:25:31,809 --> 00:25:36,529
que me lo dibuje, self.

290
00:25:40,490 --> 00:25:42,869
a este le he llamado izquierda

291
00:25:42,869 --> 00:25:46,190
pues izquierda, eso es

292
00:25:46,190 --> 00:25:50,069
el frame donde queremos que nos lo dibuje, ¿vale?

293
00:25:50,069 --> 00:25:53,609
le decimos

294
00:25:53,609 --> 00:25:57,589
image es igual a self.logo

295
00:25:57,589 --> 00:26:01,930
que es donde hemos guardado ese logo que queremos poner

296
00:26:01,930 --> 00:26:05,430
y ya empezamos como siempre a meter el background del color

297
00:26:05,430 --> 00:26:08,150
pues le vamos a poner el color

298
00:26:08,150 --> 00:26:14,339
color izquierda

299
00:26:14,339 --> 00:26:21,440
color izquierda

300
00:26:21,440 --> 00:26:35,200
y ahora nos faltaría situarlo, entonces para situarlo otra forma de hacerlo sería directamente desde aquí, como este widget no se lo he asociado a ninguna variable,

301
00:26:35,200 --> 00:26:47,000
solo tengo la opción de poner el punto, el pack y donde lo queremos situar, en este caso este cap punto, hemos dicho en la parte de arriba el top

302
00:26:47,000 --> 00:26:51,680
y le vamos a meter un padding de 10

303
00:26:51,680 --> 00:26:56,160
¿vale? algo así, vale, si yo aquí hubiera puesto pues por ejemplo

304
00:26:56,160 --> 00:26:59,480
self mi logo o algo así

305
00:26:59,480 --> 00:27:03,980
igual atk.label, luego podría haber puesto el self mi logo.pack

306
00:27:03,980 --> 00:27:06,019
y todo esto, ¿vale?

307
00:27:07,359 --> 00:27:13,700
vale, vamos a ver que nos hace esto, vale, ya tenemos ahí

308
00:27:13,700 --> 00:27:17,960
ese logo, en este caso, este logo le he metido

309
00:27:17,960 --> 00:27:21,880
el bg pensaba que era transparente pero no es transparente, bueno, habría que

310
00:27:21,880 --> 00:27:26,380
buscar el que es transparente, que es el que está en internet, pero ya lo tendríamos

311
00:27:26,380 --> 00:27:29,740
ya lo tendríamos aquí situado, vale

312
00:27:29,740 --> 00:27:33,740
tiene el pad en i de 10

313
00:27:33,740 --> 00:27:37,359
así que bueno, pues por ahora está bien

314
00:27:37,359 --> 00:27:41,819
vale, pues vamos a meterle también

315
00:27:41,819 --> 00:27:42,559
si acaso

316
00:27:42,559 --> 00:27:50,859
que no sé yo si nos va a hacer algo

317
00:27:50,859 --> 00:27:53,720
porque está cogiendo

318
00:27:53,720 --> 00:27:56,019
me lo ajusta

319
00:27:56,019 --> 00:27:58,259
vale

320
00:27:58,259 --> 00:28:00,720
bueno

321
00:28:00,720 --> 00:28:06,470
incluso podríamos decirle

322
00:28:06,470 --> 00:28:07,230
bueno

323
00:28:07,230 --> 00:28:10,250
podríamos cambiar el ancho y el alto

324
00:28:10,250 --> 00:28:11,750
de esta imagen

325
00:28:11,750 --> 00:28:13,730
y así no

326
00:28:13,730 --> 00:28:17,450
que no fuera tan grande

327
00:28:17,450 --> 00:28:22,980
vale, pero vale, yo lo voy a dejar así y ya está

328
00:28:22,980 --> 00:28:27,220
vale, ¿qué es lo que me hace falta ahora? el botón, entonces

329
00:28:27,220 --> 00:28:31,599
vamos a meter, os lo voy a poner

330
00:28:31,599 --> 00:28:35,299
aunque sea un botón solo, como lo haría para hacer

331
00:28:35,299 --> 00:28:38,859
varios botones haciendo una colección de datos

332
00:28:38,859 --> 00:28:43,539
luego esa colección de datos la voy leyendo con un for y voy creando

333
00:28:43,539 --> 00:28:51,200
los botones y es más rápido, ¿vale? Al final es más rápido, aunque ahora parezca más

334
00:28:51,200 --> 00:29:03,539
laborioso. Entonces, aquí vamos a hacer primero esa colección de datos, ¿vale? Y entonces

335
00:29:03,539 --> 00:29:15,779
Entonces vamos a poner el buttonOption, esto es igual a, y aquí iría pasando todos los

336
00:29:15,779 --> 00:29:23,500
botones que quiero ir creando, en este caso es un, vale, entonces, bueno, ¿qué es lo

337
00:29:23,500 --> 00:29:29,380
que le voy a pasar aquí?, le voy a pasar pues, esto ya es como vosotros creáis, yo

338
00:29:29,380 --> 00:29:36,740
lo voy a pasar primero, migración de datos, primero el texto que quiero que me aparezca

339
00:29:36,740 --> 00:29:46,380
encima del botón, luego le voy a decir como quiero que se llame esa variable, que es

340
00:29:46,380 --> 00:29:56,299
ser.ptn opción 1 por ejemplo, vale, para luego hacer referencia sobre ese botón, y

341
00:29:56,299 --> 00:30:01,069
el módulo

342
00:30:01,069 --> 00:30:03,329
load.json

343
00:30:03,329 --> 00:30:05,769
vale, el módulo

344
00:30:05,769 --> 00:30:06,390
al que quiero

345
00:30:06,390 --> 00:30:09,609
que llame, vale

346
00:30:09,609 --> 00:30:11,589
voy a ponerlo así

347
00:30:11,589 --> 00:30:13,190
vale

348
00:30:13,190 --> 00:30:15,170
entonces

349
00:30:15,170 --> 00:30:17,670
una vez tengo

350
00:30:17,670 --> 00:30:21,539
hecho esto, vamos

351
00:30:21,539 --> 00:30:23,440
a hacer

352
00:30:23,440 --> 00:30:25,680
el for que iría

353
00:30:25,680 --> 00:30:27,819
leyendo todas las colecciones

354
00:30:27,819 --> 00:30:29,640
de datos que tengo aquí

355
00:30:29,640 --> 00:30:54,940
En este caso, ya os digo, ¿vale? Es una lista con nuestra colección de datos, solo es uno, entonces, bueno, aquí me haría mi for, en mi for le diría, ¿vale? Dentro de texto, botón, y vamos a ponerle comando, in button, opt-in, ¿vale?

356
00:30:54,940 --> 00:31:08,619
¿Qué es lo que estoy haciendo? Cada uno de estos datos de todas las colecciones, el primer valor me lo vas a guardar en texto, el segundo me lo vas a guardar en botón y el tercero en comando, ¿vale?

357
00:31:08,619 --> 00:31:24,920
Y con eso lo que voy a hacer es llamar a una función, que no la tengo creada todavía, pero la vamos a crear, que la podemos llamar, por ejemplo, configurar botón menú, ¿vale?

358
00:31:24,940 --> 00:31:42,220
y ahí le vamos a pasar el botón, el texto y el comando, vale, vale, entonces ahora vámonos

359
00:31:42,220 --> 00:31:48,259
a crear esa función y esa función va a ser

360
00:31:48,259 --> 00:31:51,759
a ver, estamos bien, vale, le hemos llamado

361
00:31:51,759 --> 00:31:56,380
de configurar

362
00:31:56,380 --> 00:31:59,720
botón menú

363
00:31:59,720 --> 00:32:05,319
vale, y hemos dicho que le pasamos

364
00:32:05,319 --> 00:32:10,299
tres parámetros, el botón

365
00:32:10,299 --> 00:32:16,160
el texto y el comando

366
00:32:16,160 --> 00:32:19,579
que me da igual poner el mismo nombre

367
00:32:19,579 --> 00:32:24,460
que les pongo aquí, vale, me da exactamente lo mismo, porque esto es otra función

368
00:32:24,460 --> 00:32:29,460
y entonces está trabajando con el nombre de esas variables

369
00:32:29,460 --> 00:32:32,660
de esos parámetros de entrada en local, vale, entonces me da igual

370
00:32:32,660 --> 00:32:37,059
no pasa nada, entonces yo aquí le voy a decir que botón

371
00:32:37,059 --> 00:32:43,089
punto, eh, config

372
00:32:43,089 --> 00:32:49,740
config va a ser igual

373
00:32:49,740 --> 00:33:09,920
Ah, primero el texto, pues el texto lo voy a decir que es una cadena de texto, formato, vale, que coja formato y le digo que me coja el valor de texto, vale, que me coja,

374
00:33:09,920 --> 00:33:13,920
esto es sin paréntesis, perdón, esto es una

375
00:33:13,920 --> 00:33:15,519
variable de un parámetro de entrada

376
00:33:15,519 --> 00:33:21,160
entonces le digo f, a ver si lo pongo bien

377
00:33:21,160 --> 00:33:25,859
f, esto sí que es formato string, esto sí

378
00:33:25,859 --> 00:33:29,900
vale, esto es así, vale, le digo

379
00:33:29,900 --> 00:33:31,299
lancho

380
00:33:31,299 --> 00:33:36,140
igual, w si queréis

381
00:33:36,140 --> 00:33:38,920
es moverlo a la izquierda

382
00:33:38,920 --> 00:33:43,240
son los puntos cardinales

383
00:33:43,240 --> 00:33:43,700
pues

384
00:33:43,700 --> 00:33:47,660
el sur

385
00:33:47,660 --> 00:33:49,740
y el norte

386
00:33:49,740 --> 00:33:51,819
¿vale? entonces podríamos

387
00:33:51,819 --> 00:33:53,880
pasarle esos parámetros de arriba a abajo

388
00:33:53,880 --> 00:33:56,079
izquierda y derecha con estas letras

389
00:33:56,079 --> 00:33:56,980
¿vale?

390
00:33:58,519 --> 00:33:59,599
entonces le paso

391
00:33:59,599 --> 00:34:00,319
el west

392
00:34:00,319 --> 00:34:02,319
¿vale?

393
00:34:02,740 --> 00:34:03,740
minúscula

394
00:34:03,740 --> 00:34:08,340
le vamos a pasar paréntesis

395
00:34:08,340 --> 00:34:10,380
el

396
00:34:10,380 --> 00:34:20,840
block, le vamos a pasar el tamaño

397
00:34:20,840 --> 00:34:25,380
15 por ejemplo, vale

398
00:34:25,380 --> 00:34:29,840
bd es un relieve que puede tener ese botón

399
00:34:29,840 --> 00:34:34,280
el bg es igual a, y en bg pues

400
00:34:34,280 --> 00:34:37,360
vamos a usar otro color

401
00:34:37,360 --> 00:34:42,420
que no sea, podríamos usar los mismos que tenemos

402
00:34:42,420 --> 00:34:46,280
le voy a pasar otro código, que es este

403
00:34:46,280 --> 00:34:50,860
vale, y de fondo

404
00:34:50,860 --> 00:34:54,599
eso sí, le voy a pasar el del color

405
00:34:54,599 --> 00:35:01,230
el de color, como es

406
00:35:01,230 --> 00:35:04,789
color izquierdo, self

407
00:35:04,789 --> 00:35:09,730
punto color izquierdo, este

408
00:35:09,730 --> 00:35:14,389
para que me haga el efecto este de transparente

409
00:35:14,389 --> 00:35:17,610
vale, el color de la fuente

410
00:35:17,610 --> 00:35:18,730
le digo que sea

411
00:35:18,730 --> 00:35:22,989
lo que le podemos pasar es el width

412
00:35:22,989 --> 00:35:26,469
que sea igual a 20

413
00:35:26,469 --> 00:35:34,340
que sea igual a 1

414
00:35:34,340 --> 00:35:38,619
y el command

415
00:35:38,619 --> 00:35:41,280
que es igual a

416
00:35:41,280 --> 00:35:46,980
comando, vale, vamos a poner esto

417
00:35:46,980 --> 00:35:52,059
para verlo todo bien, ahí estás, vale

418
00:35:52,059 --> 00:35:55,860
y eso configuraría el botón, y lo que nos faltaría

419
00:35:55,860 --> 00:36:00,380
al final es, botón.pack

420
00:36:00,380 --> 00:36:03,460
esto es igual a side

421
00:36:03,460 --> 00:36:06,079
de acá, punto

422
00:36:06,079 --> 00:36:13,360
y igual 10, vale

423
00:36:13,360 --> 00:36:31,119
para que haya un margen, que haya un espacio entre la imagen y el botón o los diferentes botones, le meto el path en A10 y le digo que me lo vaya ordenando todo en la parte superior, ¿vale?

424
00:36:31,119 --> 00:36:41,710
de esta manera cuando yo llamo a configurar botón ya tendríamos el configurar el botón y

425
00:36:44,530 --> 00:36:49,650
en principio con esto nos debería de valer vamos a verlo

426
00:36:49,650 --> 00:37:01,840
Ah, claro, eso me había

427
00:37:01,840 --> 00:37:03,500
Antes de meter

428
00:37:03,500 --> 00:37:05,340
El

429
00:37:05,340 --> 00:37:10,670
Self.btn

430
00:37:10,670 --> 00:37:11,550
Opción

431
00:37:11,550 --> 00:37:13,050
1

432
00:37:13,050 --> 00:37:15,710
Eso es donde

433
00:37:15,710 --> 00:37:18,489
Le digo que quiero el botón

434
00:37:18,489 --> 00:37:20,690
¿Vale? Entonces aquí es el botón

435
00:37:20,690 --> 00:37:22,190
¿Y dónde quiero ese botón?

436
00:37:22,289 --> 00:37:24,969
Que es en el self.iz

437
00:37:24,969 --> 00:37:40,369
izquierda, vale, ahora sí, ahora hay que decirle dónde lo pintamos, pero o aquí paso directamente el TK, el TK es el botón izquierda, vale, haría eso, o lo hago así,

438
00:37:40,369 --> 00:37:55,460
Enter, load, el comando es load json, serve, y aquí le pongo un pass, vale, ya estás,

439
00:37:56,340 --> 00:38:04,880
ahora ya si no, no debería de coger todo, aquí estás, vale, y entonces tenemos nuestro

440
00:38:04,880 --> 00:38:14,340
botón, que ahora mismo no hace nada, bueno y nos tendríamos ahora que hacernos el último

441
00:38:14,340 --> 00:38:27,960
botón que sería el de la información de cada uno de vosotros, vale, entonces vamos

442
00:38:27,960 --> 00:38:36,000
a terminar este vídeo con ese botón y ya en el próximo les damos funcionalidad a esos

443
00:38:36,000 --> 00:38:56,900
botones y ya estaría. Vale, aquí sería, por ejemplo, ser.btnOpcion2.confi, vamos a

444
00:38:56,900 --> 00:39:23,590
vamos a meter aquí también, self.btn.funcion2.tk.button, self.izquierda, vale, y aquí es el config,

445
00:39:23,590 --> 00:39:32,329
vale, y en el config le vamos a pasar, pues igual que antes y es todo lo mismo, el texto,

446
00:39:32,329 --> 00:39:37,429
vale, le ponemos

447
00:39:37,429 --> 00:39:50,889
punto de anclaje

448
00:39:50,889 --> 00:39:54,650
vale, la fuente

449
00:39:54,650 --> 00:39:57,710
que hemos dicho que es

450
00:39:57,710 --> 00:39:59,030
por un lado

451
00:39:59,030 --> 00:40:16,500
boucherie block y el tamaño que hemos dicho que son 15, que más le podemos pasar, el

452
00:40:16,500 --> 00:40:23,320
verde que es para darle ese relieve que no se lo voy a pasar, veje color que es igual

453
00:40:23,320 --> 00:40:33,590
y le vamos a poner, pues lo voy a poner, a ver si lo coge, a ver si le da la gana, vamos

454
00:40:33,590 --> 00:40:35,510
no me lo va a coger, a vosotros si debería

455
00:40:35,510 --> 00:40:35,989
de coger

456
00:40:35,989 --> 00:40:38,829
3799

457
00:40:38,829 --> 00:40:55,019
y el pp

458
00:40:55,019 --> 00:40:57,559
se lo voy a poner igual que

459
00:40:58,119 --> 00:41:01,260
el de antes que es color

460
00:41:01,260 --> 00:41:03,500
o colores como le hemos llamado

461
00:41:03,500 --> 00:41:06,920
color izquierda

462
00:41:06,920 --> 00:41:08,989
color

463
00:41:08,989 --> 00:41:11,969
pues lo voy a poner el mismo

464
00:41:11,969 --> 00:41:15,670
color izquierda

465
00:41:15,670 --> 00:41:54,860
izquierda, uy esto está mal, esto hay que cerrar este paréntesis aquí, es el, ¿por qué lo he metido aquí?, he puesto en un D, esto hay que tabularlo para adentro, vale, el self color izquierda,

466
00:41:54,860 --> 00:42:13,389
y vamos a ponerle también el tamaño, el ancho, el width, que como el de abajo le he puesto

467
00:42:13,389 --> 00:42:37,369
a 25, pues 25, el a, que abajo le he puesto el 2, pues a 2, y el comando, que en este

468
00:42:37,369 --> 00:42:53,289
caso vamos a llamar a mi información, vale, en este caso esta función tenemos que crearla,

469
00:42:53,289 --> 00:42:55,929
así que vamos a poner aquí, para que no se me olvide

470
00:42:55,929 --> 00:42:58,909
def

471
00:42:58,909 --> 00:43:01,489
información

472
00:43:01,489 --> 00:43:04,519
pas

473
00:43:04,519 --> 00:43:09,239
así no se me olvida, ¿qué es lo que me faltaría

474
00:43:09,239 --> 00:43:10,519
ahora? situarlo

475
00:43:10,519 --> 00:43:11,920
lo de siempre

476
00:43:11,920 --> 00:43:15,159
que en este caso

477
00:43:15,159 --> 00:43:16,980
va a ser

478
00:43:16,980 --> 00:43:21,239
self.ptl

479
00:43:22,099 --> 00:43:24,780
opción 2

480
00:43:24,780 --> 00:43:27,960
.pack

481
00:43:27,960 --> 00:43:30,199
side

482
00:43:30,199 --> 00:43:31,139
igual

483
00:43:31,139 --> 00:43:34,199
tk.boom

484
00:43:34,199 --> 00:43:36,780
una parte de abajo

485
00:43:36,780 --> 00:43:38,920
un pack

486
00:43:38,920 --> 00:43:39,699
de mi

487
00:43:39,699 --> 00:43:41,099
vecino

488
00:43:41,099 --> 00:43:44,179
vale

489
00:43:44,179 --> 00:43:45,800
ya tendríamos

490
00:43:45,800 --> 00:43:47,880
si está todo bien

491
00:43:47,880 --> 00:43:50,920
algo ha fallado

492
00:43:50,920 --> 00:43:53,239
aquí

493
00:43:53,239 --> 00:44:20,150
Y aquí tengo mi botón y otro botón, el texto alineado a la izquierda o a la derecha, que

494
00:44:20,150 --> 00:44:30,590
eso, lo he hecho con el anchor, el anchor, aquí está Wes, y si no me equivoco por aquí

495
00:44:30,590 --> 00:44:41,369
estará el N, aquí estás, el anchor, vale, N, y así anclo los diferentes, el texto,

496
00:44:41,369 --> 00:44:47,289
vale, a la izquierda o a la derecha en el botón, y ya tendríamos hasta aquí este

497
00:44:47,289 --> 00:44:53,030
vídeo, ya hemos metido esta imagen, hemos metido el texto en el principal, los textos

498
00:44:53,030 --> 00:45:01,670
en el cabezado y en el pie, los botones y en el último vídeo ya lo que hacemos es

499
00:45:01,670 --> 00:45:05,789
la funcionalidad de esos botones. Un saludo chicos, hasta luego.