Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

02 - Eventos introducción - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 24 de marzo de 2026 por Pedro Luis L.

2 visualizaciones

Más información Transcripción

Descargar la transcripción

Vamos a crear una pequeña aplicación en la que vamos a estudiar los eventos. 00:00:00
Para ello voy a crear una carpeta y voy a llamarla eventos. 00:00:05
Tengo mi carpeta eventos, voy a abrir un terminal y abrir mi aplicación Design. 00:00:11
Voy a abrir el Designer. 00:00:20
Otra vez voy a crear una ventana principal, lo mismo que hacía antes, le voy a cambiar el tamaño. 00:00:21
y le voy a añadir una etiqueta, un botón, y voy a poner una distribución horizontal. 00:00:27
Hasta ahora no he hecho nada más. 00:00:49
Bueno, esto que aparece aquí, esto que pone aquí, label, es como en Python voy a acceder a este objeto. 00:00:52
Cuando quiera acceder a este objeto, voy a llamar a label. 00:00:59
Cuando quiera acceder al pushbutton, voy a poner pushbutton. 00:01:03
Realmente los nombres por defecto no los voy a mantener. 00:01:08
Entonces lo que voy a hacer es cambiarlos aquí. 00:01:13
Voy a respetar esto de label para saber qué tipo de objeto es dentro del código Python. 00:01:16
Voy a poner etiqueta label. 00:01:20
y aquí voy a poner 00:01:24
pulsador 00:01:26
pushbutton 00:01:31
a este he llamado 00:01:34
pulsador pushbutton y a este le he llamado 00:01:38
etiqueta label 00:01:40
no sé si he puesto ya la distribución 00:01:41
horizontal, sí, he puesto la distribución 00:01:45
horizontal, voy a cambiar los textos 00:01:46
aquí voy a llamar 00:01:48
a este botón, la etiqueta 00:01:50
la voy a llamar 00:01:52
pulsa 00:01:53
aquí 00:01:54
y a esta etiqueta 00:01:57
la voy a poner aquí 00:02:00
contador, el punto y un cero 00:02:02
vale, pues ya tengo aquí 00:02:06
mis dos elementos, voy a guardar mi ventana 00:02:09
guardar 00:02:11
el nombre, lo voy a llamar 00:02:13
main 00:02:15
windows, y aquí tengo 00:02:16
mi ventana, y esto 00:02:19
en Python, ¿cómo lo voy a llamar? 00:02:21
bueno, pues ahora mismo voy a coger 00:02:23
voy a crear 00:02:25
aquí el nuevo archivo 00:02:27
crear un nuevo archivo de texto 00:02:28
va a ser 00:02:30
main.py 00:02:31
en este archivo de texto 00:02:34
voy a escribir 00:02:36
o copiar el siguiente código 00:02:38
voy a copiar este cachito de código 00:02:40
hasta aquí 00:02:42
y voy a añadir 00:02:45
este cachito de código 00:02:49
hasta aquí 00:02:51
¿de acuerdo? 00:02:53
¿qué hace este código? 00:02:57
Lo guardo. ¿Qué hace este código? Bueno, aquí estoy importando distintas bibliotecas que necesito. Esto de momento es magia negra. 00:02:59
Entonces, todas las ventanas que creo, bueno, en este caso, cuando al principio le he dado aquí, me ha preguntado, ¿qué ventana quieres crear? Una ventana principal, le he dicho, ¿no? Un main window, pues tengo que poner que quiero crear un main window y la voy a derivar de QOJET, ¿de acuerdo? 00:03:10
Bueno, aquí quiero el constructor de la clase y estos argumentos que le pasa por defecto, estos argumentos los pasa beside, ¿de acuerdo? Los pasa cute. 00:03:32
Entonces yo lo que hago es que estos argumentos tal cuales se los paso al constructor de la casa padre, ya no me complico. 00:03:43
Bueno, esta es una propiedad que tengo aquí definida, de momento no la voy a usar, y esta es la madre del cordero. 00:03:50
esta ventana, este cacho de código 00:03:55
es el que carga 00:03:57
la aplicación, fijaros que yo 00:03:58
cuando he guardado el mainwindow.ui 00:04:01
el diseño este 00:04:04
lo he guardado en el archivo 00:04:05
mainwindow.ui 00:04:08
pues cuando me vengo aquí 00:04:10
lo que estoy diciendo es que 00:04:12
mira, bueno, estos códigos 00:04:14
en Python no se abren 00:04:16
los archivos así, se abren de otra forma 00:04:18
usando open 00:04:20
pero 00:04:21
como esto proviene de C++ 00:04:22
en C++ los archivos se usan 00:04:26
de otra forma, y entonces esto es como una especie 00:04:28
de copia a como se usarían 00:04:30
en C++ los archivos 00:04:32
es una especie de traslación 00:04:34
de lo que se hace en C++ en Python 00:04:35
bueno, pues en C++ 00:04:37
abriríamos el archivo 00:04:39
que se hace con estas dos líneas, aquí le estoy diciendo 00:04:41
mira, el archivo main window 00:04:44
me lo abres con 00:04:46
modo lectura 00:04:47
y ahora 00:04:49
abro el cargador 00:04:50
el cargador 00:04:53
y con el cargador digo que 00:04:55
me cargue la ventana 00:04:57
en este objeto, en este atributo 00:04:59
que voy a llamar window 00:05:01
y luego, si esto lo ejecuto 00:05:03
vais a ver que no se ve nada 00:05:05
bueno, por cierto 00:05:06
estas tres líneas de aquí se ven para arrancar 00:05:09
la aplicación, esto lo que hace es 00:05:11
que prepara Qt para funcionar 00:05:13
creo mi ventana, o sea, este main window 00:05:15
que he creado aquí, la creo 00:05:17
y ejecuto la aplicación 00:05:18
¿vale? 00:05:20
voy a intentar ejecutarlo 00:05:22
iton3.paint.py 00:05:24
lo abro y veis que no pasa nada 00:05:32
no ha salido la aplicación 00:05:34
no ha salido la ventana, ¿por qué? 00:05:35
porque la ventana no ha salido 00:05:37
y de hecho me da hasta problemas para cerrarla 00:05:38
¿por qué no ha salido la ventana? 00:05:41
porque las ventanas 00:05:45
cualquier hoja, las ventanas van a ser mostradas 00:05:47
tengo que 00:05:49
invocar el método 00:05:51
show 00:05:53
mostrar 00:05:55
show en inglés significa mostrar 00:05:56
yo puedo cargar la ventana pero no puedo 00:05:59
mostrarla, la puedo dejar ahí preparada para mostrarla 00:06:01
después, pues window.show 00:06:03
lo que hace es mostrar la ventana 00:06:05
si esto ahora lo ejecuto 00:06:07
abro aquí el terminal 00:06:09
y lo ejecuto 00:06:10
veis que ahora si aparece 00:06:12
la ventana, de acuerdo 00:06:15
de momento no hace nada y si doy a cerrar la ventana 00:06:17
la aplicación termina 00:06:19
os habréis fijado 00:06:20
voy a poner aquí un print 00:06:23
voy a poner aquí hola mundo 00:06:25
guardo 00:06:28
ejecuto otra vez 00:06:31
y veis que aquí 00:06:33
no sale hola mundo 00:06:35
aquí en este texto 00:06:36
o sea, lo que ha hecho es 00:06:39
ha cargado 00:06:41
he creado mi ventana 00:06:45
que es esto de aquí 00:06:48
cuando he llegado a esta línea 00:06:48
he cedido el control a Qt 00:06:51
en estos momentos el control de la aplicación 00:06:54
lo tiene Qt 00:06:56
¿de acuerdo? por eso aquí no me pone a la mundo 00:06:57
porque de momento estoy en esta línea 00:07:00
o sea, cedo el control de la aplicación a Qt 00:07:02
esto es una feina, porque si yo ahora quiero seguir 00:07:04
haciendo cosas, pues no puedo 00:07:06
hasta que no cierre 00:07:08
la aplicación 00:07:10
hasta que no cierre la aplicación 00:07:11
no me pone el a la mundo 00:07:14
o sea, la aplicación se queda como congelada 00:07:16
en esta línea 00:07:18
¿por qué? porque 00:07:19
Qt funciona mediante un mecanismo 00:07:23
de eventos, ahora vamos a ver lo que es eso 00:07:26
de los eventos, pero antes de ver los eventos 00:07:28
vamos a ver cómo accedo a los elementos 00:07:30
de la ventana 00:07:32
he cerrado, ah vaya, he cerrado aquí el designer 00:07:33
espera un momentito, doble clic 00:07:36
se abre el designer 00:07:37
sí 00:07:39
aquí tengo la aplicación 00:07:41
Aquí tengo mis elementos 00:07:43
Fijaros 00:07:47
A esta etiqueta 00:07:48
Bueno, le voy a cambiar el nombre 00:07:50
Bueno, sí, la voy a dejar etiqueta 00:07:51
A esta etiqueta la voy a dejar etiqueta 00:07:53
La he llamado etiqueta label 00:07:56
¿Cómo se hace a los elementos? 00:07:57
Vamos a ver primero un poquito de propiedades 00:07:59
Vamos a buscar aquí 00:08:02
QLabel 00:08:04
¿Veis que todos los objetos en Qt 00:08:05
Empiezan por Q? 00:08:09
Bueno 00:08:11
esto es un coolable 00:08:12
tiene aquí un montón de métodos 00:08:13
y vais a ver que tiene 00:08:16
sus getters y sus setters, mira 00:08:17
tiene aquí un text 00:08:19
la propiedad text, que tiene 00:08:21
su get 00:08:23
y su set, ¿vale? pues puedo usar 00:08:25
setters para cambiar el valor 00:08:28
yo puedo poner aquí 00:08:30
set.window 00:08:33
set.window 00:08:37
.etiquetalabel 00:08:39
este etiquetalabel que acabo de poner aquí 00:08:46
tiene que ser exactamente 00:08:48
este etiquetalabel 00:08:50
¿de acuerdo? 00:08:52
¿vale? y aquí puedo poner 00:08:56
.settext 00:08:57
y aquí le pongo un texto 00:08:59
contador 00:09:00
2.1 00:09:04
lo guardo y si lo ejecuto 00:09:06
veis que pone contador 1 00:09:10
o sea, en designer poníamos contador 0 00:09:14
y ahora pone contador 1 00:09:16
¿qué ha pasado aquí? 00:09:18
pues que ha ejecutado todo esto 00:09:20
ha creado la ventana, la ha mostrado 00:09:22
y cuando ha llegado a esta línea le hemos dicho 00:09:24
mira, etiqueta nave 00:09:26
le vas a cambiar el texto y vas a poner contador 1 00:09:27
igual que tengo set, tengo get 00:09:31
o sea, podría conseguir el contenido 00:09:33
de la etiqueta 00:09:36
usando el método text que lo tenéis aquí 00:09:37
O sea, me he ido aquí a la documentación de Python y la documentación de Python es vital para enterarnos de qué métodos tienen, qué propiedades tienen. 00:09:40
De label, iros haciendo ahora una chuletilla, de label, de cool label, me interesan text y set text, ¿vale? Me interesan esos dos métodos, ¿vale? 00:09:47
Bueno, pues tengo una chuleta en la que voy apuntando los distintos métodos que voy a ir aprendiendo. 00:10:25
Chuleta. Bueno, pues aquí tengo mi chuleta. 00:10:33
¿Vale? Pues de label tengo setText y setTest. 00:10:38
Pero de momento no puedo hacer gran cosa, ¿no? Puedo cambiar los textos de las etiquetas, pero eso ya lo puedo hacer aquí con Designer. 00:10:43
Vamos a ver el passButton. Voy a buscar aquí. PassButton. PassButton significa botón de presionar, ¿no? 00:10:51
Viene a decir botón de presionar. Bueno, el passButton, vais a ver que también tiene el método text, ¿de acuerdo? 00:11:03
O sea, el passButton también tiene el método text. También tiene el método setText, ¿de acuerdo? 00:11:11
texto, por supuesto 00:11:30
texto 00:11:32
vale, tiene el método 00:11:34
text, tiene el setText 00:11:37
no lo voy aquí porque lo tiene su padre 00:11:39
lo tiene el astralbutton 00:11:41
si pincho aquí 00:11:44
me salta el astralbutton 00:11:44
y aquí por algún lado, veis, hay text, ¿no? 00:11:46
que tiene el setText y el setText 00:11:50
vale, voy a volver para atrás 00:11:52
vuelvo para atrás 00:11:54
estoy de nuevo en pastButton 00:11:55
y luego 00:11:56
Ah, bueno, espera 00:11:57
Vuelvo a PassButton, al método 00:11:59
AstrapButton, y el método AstrapButton 00:12:01
Si veis aquí todas las propiedades, tiene una cosa que se llama aquí 00:12:03
Señales, esto de las señales 00:12:06
¿Qué significa? 00:12:07
Bueno, y ves que por ejemplo 00:12:09
Esta que pone, ClickIt 00:12:12
¿De acuerdo? 00:12:13
ClickIt es la señal que se emite 00:12:15
Cuando un botón es activado, veis la 00:12:17
Explicación que pone aquí, ¿vale? 00:12:19
¿Esto cómo funciona? Bueno, pues cuando yo hago 00:12:21
Click en un botón 00:12:23
voy a poder añadirle 00:12:25
un método que se va a ejecutar 00:12:28
o sea, cada vez que yo haga clic 00:12:30
yo cojo y lanzo en mi aplicación 00:12:31
y haga clic en este botón 00:12:34
puedo añadirle un método 00:12:36
o varios que se van a ejecutar cada vez que pulso 00:12:38
el botón y que hagan cosas 00:12:40
por ejemplo, me voy aquí 00:12:41
a mi código 00:12:45
voy a añadir aquí 00:12:46
un nuevo método 00:12:50
se suelen llamar así 00:12:50
onClicket 00:12:57
self 00:13:05
dos puntos 00:13:08
y aquí puedo decirle algo 00:13:10
por ejemplo 00:13:11
self.window 00:13:12
ahí va ya 00:13:15
window.etiquetalabel.sectext 00:13:16
botón 00:13:25
vamos a ejecutar 00:13:29
Bueno, de momento no hace nada. Esta línea me la voy a cargar. Voy a meter aquí un espacio y voy a poner aquí. Se conectan las señales. 00:13:33
Bueno, hemos visto que el botón 00:13:52
El botón 00:13:55
Que no me acuerdo como lo he llamado 00:13:58
El botón este 00:14:02
Pulsador Pass Button 00:14:04
Control C 00:14:05
Control V 00:14:08
Tiene la señal 00:14:11
Click It 00:14:14
¿De acuerdo? 00:14:15
Pues aquí puedo poner Connect 00:14:17
Y le pongo que 00:14:19
Conecte 00:14:24
Y le pongo que conecte 00:14:25
el onClicked 00:14:28
self.onClicked 00:14:31
vamos a ejecutarlo 00:14:36
aquí lo tengo 00:14:40
fijaos que ahora pone 00:14:43
contador 0 00:14:44
cuando pulse el botón 00:14:46
o sea, cuando haga click 00:14:49
en esta línea estoy diciendo 00:14:50
mira, cuando en el passButton 00:14:51
alguien haga click 00:14:54
pues me ejecutas el método 00:14:55
onClicked 00:14:58
este método, y el método onClick 00:14:59
lo que hace es que coge la etiqueta y pone 00:15:01
y le cambia el texto a botón pulsado 00:15:03
vamos a probar 00:15:06
tengo aquí mi este, si pulso 00:15:07
veis que pone contador 0, si pulso 00:15:10
pone botón pulsado, si lo vuelvo a pulsar 00:15:11
realmente lo está cambiando, pero como el texto es el mismo 00:15:14
pues no se nota 00:15:16
pero realmente cada vez que pulso 00:15:17
me está ejecutando esto 00:15:18
esto no tiene gracia, ¿no? 00:15:20
bueno, veis por aquí que ya tenía definido aquí un atributo 00:15:23
que llamó de contador y le he puesto 0 00:15:25
Entonces yo podría hacer cosas más divertidas. Podría poner self.contador más igual 1 y aquí decir que contador de 0.format y le pongo aquí self.contador. 00:15:27
y le doy alegría 00:15:55
voy aquí, abro, ejecuto 00:15:57
y ahora cada vez que pulso aquí 00:16:00
¿veis lo que sucede? 00:16:02
contador 1, 2, 3, 4, 5, 6, 7, 8 00:16:04
¿veis lo que sucede? 00:16:06
va cambiando el contador 00:16:10
podría pues 00:16:11
añadirle más elementos 00:16:14
pero de momento lo voy a dejar aquí 00:16:17
y este cachito de código 00:16:18
que veis aquí 00:16:20
lo voy a mantener como base 00:16:22
este cacho de código 00:16:24
lo voy a usar en el resto de aplicaciones 00:16:28
como base para hacer cosas 00:16:30
bueno, pues aquí tenemos 00:16:32
nuestro primer evento, el botón click 00:16:34
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
2
Fecha:
24 de marzo de 2026 - 0:08
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
16′ 39″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
121.81 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid