Saltar navegación

Clase 22-04-24 - 2 - 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 22 de abril de 2024 por Raquel G.

9 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, pues a ver, antes de que empecéis ya vosotros a hacer algo. 00:00:06
A ver, yo cuando he hablado de eventos, me he referido a cualquier cosa que se puede hacer con una interfaz gráfica, con una ventanita de estas, a cualquier cosa. 00:00:15
Una es pulsar el botón, está claro, una es pulsar el botón. 00:00:44
Pero hay muchas más cosas que se pueden hacer, ¿verdad? 00:00:49
Desde el momento en que yo, por ejemplo, 00:00:52
silencio. 00:00:53
Por ejemplo, cuando yo escribo aquí algo, 00:00:56
darle al Enter en mi área de texto. 00:01:00
Ya se ha entendido. 00:01:10
Vale, pues cuando yo he hablado de eventos, 00:01:19
me he referido a cualquier cosa que se puede hacer con una interfaz gráfica. 00:01:21
Se pueden hacer muchas cosas. 00:01:26
Solamente, solamente, silencio. 00:01:29
solamente hemos capturado a nosotros 00:01:31
darle al botón 00:01:35
pero el simple hecho de hacer pasar el ratón 00:01:36
por encima es otro evento 00:01:39
cuando yo escribo aquí lo que sea 00:01:41
y le doy a enter es otro evento 00:01:43
incluso cuando hago esto es otro evento 00:01:45
cuando desplazo la ventana 00:01:48
esto es otro evento 00:01:49
darle aquí a la X es otro evento 00:01:51
¿vale? 00:01:53
entonces evento es cualquier cosa que se puede hacer con la interfaz 00:01:55
y yo aquí 00:01:58
cuando 00:02:00
he hecho este action listener de aquí 00:02:01
en ningún momento figura aquí 00:02:06
que el evento que yo estoy capturando 00:02:09
de este botón, porque lo que sí que estamos 00:02:12
diciendo es que al que se asocia ese código 00:02:15
es al botón, eso sí, al botón se asocia 00:02:18
pero yo en ningún momento he dicho aquí 00:02:22
he dado ninguna información sobre que el evento 00:02:24
que estoy capturando es pulsar 00:02:27
y por qué no es el evento de pasar el ratón por encima, 00:02:29
que también lo es. 00:02:33
¿En qué momento se está enterando la aplicación 00:02:36
de que el evento que tiene que escuchar 00:02:38
ese ActionListener es pulsar y no pasar el ratón? 00:02:40
Bueno, pues, por el hecho de haber seleccionado 00:02:44
esta clase, ActionListener. 00:02:47
ActionListener significa evento por defecto 00:02:52
de cada componente. 00:02:55
O sea, cada componente, botón, text fill, etiqueta, 00:02:56
Cada componente tiene, no todos, pero bueno, muchos de ellos tienen un evento por defecto que se llama, que suele ser lo que normalmente se hace con ese componente. 00:03:01
Por ejemplo, el botón, su evento por defecto es pulsarlo. Es lo que normalmente hacemos con un botón cuando lo vemos, pulsarlo. Ese es el evento por defecto del botón. 00:03:12
el evento por defecto de un text field 00:03:25
es darle al enter 00:03:27
eso no es que lo diga yo 00:03:29
eso está definido así en la librería 00:03:32
swing, cada componente 00:03:34
tiene un evento por defecto 00:03:36
bueno pues action listener 00:03:38
se refiere 00:03:40
al evento por defecto 00:03:44
es decir 00:03:47
las clases que implementan action listener 00:03:49
son clases que escuchan 00:03:51
a los eventos por defecto 00:03:53
del componente al que yo 00:03:55
lo asocie 00:03:57
del componente al que yo lo asocie 00:03:57
luego 00:04:00
si yo estoy implementando ActionListener 00:04:02
y se lo asocio a un botón 00:04:05
estoy diciendo, oye este código 00:04:06
es el código de respuesta 00:04:09
al evento por defecto 00:04:10
del botón, que es 00:04:13
pulsar 00:04:15
¿vale? pero ¿qué pasaría 00:04:16
si yo estuviera añadiendo este ActionListener 00:04:19
en lugar de al botón, al textfield 00:04:21
por ejemplo 00:04:23
es decir, yo a mi textfield 00:04:23
le añado 00:04:27
un objeto 00:04:28
le añado un action listener 00:04:30
que sea un objeto 00:04:36
de esta clase 00:04:40
¿qué estoy haciendo ahora? añadiendo solo al text fill 00:04:40
estoy diciendo, oye, al text fill 00:04:44
añádele una captura de evento 00:04:47
que sea su evento 00:04:49
por defecto 00:04:51
¿cuál es el evento por defecto del text fill? 00:04:52
darle al enter 00:04:55
entonces ahora 00:04:56
tanto 00:04:57
el botón como el text fill 00:04:59
tienen asociado una captura 00:05:02
de evento. ¿Para qué tipo 00:05:04
de evento? Para el evento por defecto. 00:05:06
Es decir, yo le doy al botón 00:05:09
me funciona. 00:05:10
Pero, le doy a este 00:05:12
y le doy, bueno, te doy uno que no 00:05:14
sabéis esto. Le doy 00:05:16
a enter y también me funciona. 00:05:18
¿Vale? 00:05:21
Es decir, con el añadido que he hecho. 00:05:27
Yo le doy aquí al enter, 00:05:33
me ha capturado el evento. Me ha capturado 00:05:35
el evento por defecto del text field. 00:05:37
Que es darle al enter. 00:05:39
que le doy al botón, pues también 00:05:40
me ha capturado el evento por defecto 00:05:44
del botón, que es darle al enter 00:05:47
¿vale? 00:05:49
luego, cuando una clase 00:05:59
implementa ActionListener, es una clase 00:06:01
que recoge el código de respuesta 00:06:04
del evento por defecto 00:06:06
de un componente, del que yo quiera 00:06:07
¿vale? en este caso se lo he añadido 00:06:09
a los dos, luego el mismo 00:06:12
código, el mismo código es el 00:06:14
código de respuesta del evento por 00:06:16
defecto que yo haga con el botón 00:06:18
y del evento por defecto que yo haga con el dato, 00:06:19
el mismo código. 00:06:22
Entonces, hay componentes que tienen evento por defecto, 00:06:25
pues otros no. 00:06:27
Entonces, no tiene sentido añadirle a ActionListener. 00:06:29
Luego hay eventos específicos. 00:06:33
Por ejemplo, el botón. 00:06:35
Efectivamente, el botón, 00:06:37
yo puedo querer que mi aplicación responda 00:06:43
cuando paso el ratón por encima, por ejemplo. 00:06:45
Pero ese no es el evento por defecto del botón. 00:06:48
pero a lo mejor yo querría capturarlo 00:06:50
yo quiero que la aplicación funcione 00:06:52
me diga si es bis y esto no 00:06:54
cuando paso el ratoncito 00:06:56
por encima del botón 00:06:57
quiero capturar ese evento 00:06:59
entonces 00:07:01
cuando yo defino que eso es lo que quiero hacer 00:07:03
digo, a ver, este evento que yo quiero capturar 00:07:06
sobre el botón 00:07:08
¿es el evento por defecto de un botón? 00:07:09
no, no lo es, porque el evento por defecto 00:07:13
de un botón es pulsar 00:07:14
luego no lo puedo capturar con ActionListener 00:07:15
vale, pues entonces 00:07:17
¿Con qué tipo de clase capturo el evento de pasar el ratoncito? 00:07:20
Bueno, pues todos los eventos asociados al ratón 00:07:26
son eventos que en lugar de ser de tipo ActionListener son MouseListener. 00:07:29
Entonces vamos a hacernos otra clase interna, 00:07:36
pero que en lugar de ser ActionListener sea MouseListener. 00:07:38
Porque clases internas una clase puede tener todas las que quiera. 00:07:44
Class 00:07:47
Captura 00:07:52
Evento, botón 00:07:53
Con el ratón 00:07:55
Pasar, ratón 00:07:56
Vale, esta clase quiero que capture 00:08:00
Un evento relacionado con el ratón 00:08:05
En concreto pasar por encima 00:08:07
Pues entonces 00:08:09
Esta clase tiene que implementar 00:08:11
Esto otro 00:08:13
MouseListener 00:08:15
Tiene que implementar MouseListener, ActionListener no 00:08:16
Porque repito, sería para el evento por defecto 00:08:22
entonces importo mouseListener 00:08:25
dejaba WTIvent y me dice 00:08:28
vale, muy bien, esta clase 00:08:30
ya es capaz de estar pendiente 00:08:31
de eventos relacionados con el ratón 00:08:33
esta es una clase capaz 00:08:36
de estar a la escucha de eventos relacionados con el ratón 00:08:37
porque implementa mouseListener 00:08:40
vale, al implementar 00:08:41
una interfaz ya sabéis que hay que 00:08:44
dar cuerpo a todos los métodos 00:08:45
vacíos, que en el 00:08:48
mouseListener son tropecientos, en ActionListener 00:08:49
no solo, en mouseListener son muchos 00:08:52
Pero por el nombre ya nos podemos imaginar lo que significan 00:08:53
Este es el elemento 00:08:57
Relacionado con hacer clic con el ratón 00:08:59
Este resulta 00:09:01
Que coincide con el action listener 00:09:03
Pero porque es un ratón, si fue una etiqueta no 00:09:05
En una etiqueta no hay action listener 00:09:07
En una etiqueta el mouse click 00:09:09
Sería hacer clic en la etiqueta 00:09:11
Este pues 00:09:12
Este debe ser cuando 00:09:16
Lo has pulsado, aunque no lo hayas 00:09:20
Soltado, el clic es 00:09:23
hago clic, pulso y suelto 00:09:24
este se va a saltar 00:09:27
en cuanto tú pulses 00:09:29
no tienes ni que soltar 00:09:31
ya se salta el evento 00:09:33
este sin embargo se va 00:09:34
a saltar 00:09:37
cuando el ratón 00:09:39
abandone la zona del botón 00:09:41
entonces estoy probando 00:09:43
este es cuando entra en la zona del ratón 00:09:45
cuando abandone no, cuando se ha soltado 00:09:46
cuando se ha soltado 00:09:49
este es cuando el ratón entre 00:09:50
cuando el ratón entre en la zona del botón 00:09:52
este es cuando el ratón salga 00:09:54
de la zona del botón 00:09:57
entonces como son eventos 00:09:59
relacionados con el ratón 00:10:01
te dice, vale, que tipo de evento 00:10:03
que hagas clic, que presiones 00:10:05
y te quedes ahí, que lo sueltes 00:10:07
porque estaba presionado de antes 00:10:09
obviamente, que entres 00:10:11
en la zona, que salgas de la zona 00:10:13
que es lo que quieres 00:10:15
vamos a capturar el evento 00:10:16
entrar en la zona del ratón 00:10:19
del botón, perdón, entrar, que sería 00:10:21
a este, lo vamos a poner aquí dentro 00:10:23
el mismo código de aquí, el mismo 00:10:25
este mismo código 00:10:27
lo vamos a poner en el 00:10:32
enter, este, ala 00:10:37
pues tenemos ya una clase 00:10:45
asociada a los eventos 00:10:47
de ratón, que es capaz de escuchar eventos 00:10:50
hechos con el ratón 00:10:52
y tiene hecho código de respuesta 00:10:52
tiene hecho 00:10:56
para el, en concreto 00:10:57
cuando el ratón entra en la zona 00:10:59
del componente al que tú lo asocies 00:11:01
en la zona del componente al que tú lo asocies 00:11:03
vale, pues ahora ya 00:11:04
asociamos este objeto 00:11:06
al que queramos, imaginaos 00:11:09
que se lo asociamos a la etiqueta 00:11:11
pues cuando va a saltar el evento es cuando 00:11:12
nuestro ratón entra en la etiqueta, en la que ponía 00:11:14
introduceñovisí, esto vamos a asociarlo ahí, por variar 00:11:17
pues venga 00:11:19
mi etiqueta que se llamaba etiqueta 00:11:21
a este que se llamaba etiqueta 00:11:22
vamos a asociar 00:11:33
no, este no 00:11:35
es que justo 00:11:36
la etiqueta no tiene 00:11:48
ActionListener porque es solo para 00:11:49
Porque no tiene botón 00:11:52
Este, mouseListener 00:11:56
Vale, la etiqueta 00:11:58
La etiqueta no tiene ActionListener 00:11:59
¿Vale? O sea, la etiqueta 00:12:02
Le vamos a añadir 00:12:04
Un mouseListener 00:12:05
Que es este que acabamos de hacer aquí 00:12:07
Este 00:12:09
New, captura, evento, botón 00:12:12
Y quitamos esto 00:12:14
Y ponemos esto 00:12:26
Vale, y tengo el punto y coma 00:12:27
vale, y me sobra 00:12:30
un paréntesis 00:12:36
ahora sí 00:12:37
vale, pues a ver 00:12:39
a la etiqueta le vamos a añadir ahora 00:12:41
un objeto de esta clase 00:12:45
cuidado que esta clase es de tipo mouseListener 00:12:47
es de tipo mouseListener 00:12:50
no es ActionListener, luego se añade 00:12:51
con AddMouseListener 00:12:53
no con AddActionListener 00:12:56
se añade así 00:12:57
vale, bueno pues ahora tenemos 00:12:58
tres eventos capturados 00:13:01
el evento por defecto para este botón 00:13:02
que es hacer click 00:13:05
el evento por defecto del text fill 00:13:06
que es hacer enter dentro de él 00:13:09
una vez que hemos escrito enter 00:13:11
y al evento de ratón 00:13:12
de entrar 00:13:15
dentro del área de la etiqueta 00:13:17
tenemos tres eventos capturados 00:13:18
por defecto del botón 00:13:21
por defecto del text fill 00:13:23
y entrar con el ratón 00:13:25
en la zona de la etiqueta 00:13:27
los tres hacen lo mismo 00:13:28
Podrían hacer cosas distintas 00:13:30
Hemos hecho que los tres hagan lo mismo 00:13:33
¿Vale? 00:13:34
Bueno, pues entonces ahora ya 00:13:36
Ejecutamos esto, entonces si yo pongo aquí 00:13:38
2024 00:13:41
¿Vale? Pues en cuanto he 00:13:42
Acercado el ratón a la etiqueta 00:13:45
Pues me lo ha hecho 00:13:47
¿Vale? Entonces el botón me sobraría 00:13:48
Le pongo ahora 2025 00:13:51
Entro, pum, no es bisiesto 00:13:52
¿Vale? 00:13:55
Entonces lo que quiero decir con esto 00:14:01
que cualquier cosa se puede capturar. 00:14:02
Cualquier cosa. 00:14:05
Y los eventos en general se distinguen en 00:14:06
eventos por defecto. 00:14:08
¿Qué es lo que tú haces por defecto con un componente? 00:14:10
Algunos lo tienen, otros no. 00:14:13
La etiqueta no tiene por defecto. 00:14:14
El botón sí, que es hacer clic. 00:14:16
El text field sí, que es hacer un enter. 00:14:18
Pero muchos no tienen. 00:14:20
Si un componente tiene evento por defecto 00:14:21
y ese es el que queremos capturar, 00:14:24
clase ActionListener. 00:14:26
No hay ninguna duda y añadimos una de ActionListener. 00:14:27
¿Vale? ¿Qué más eventos hay? 00:14:30
Hay eventos de ratón, mouse listener. Uno se crea un mouse listener, codifica el método que sea y lo añade con add mouse listener. Hay eventos de teclado, key listener. Pues uno se hace un key listener, implementa el método que sea y lo añade con add key listener. Eventos de que una ventana, cuando uno tiene varios, gane el foco o no gane el foco, focus listener. Pues se implementa un focus listener, codifica los métodos y le añade un focus listener. 00:14:32
esa es la 00:14:58
la idea 00:15:00
vale 00:15:02
bueno pues eso 00:15:03
por otra cosa 00:15:06
vale pues entonces 00:15:08
vais a hacer unos primeros ejercicios 00:15:14
chorras 00:15:17
a ver 00:15:18
como solo hemos visto 00:15:18
el gestor de ubicación 00:15:21
flow layout 00:15:21
os van a quedar las interfaces feas 00:15:22
porque es todo lo joven 00:15:24
es uno detrás de otro 00:15:26
las interfaces feas 00:15:27
podéis investigar 00:15:28
de forma sencilla 00:15:31
otros tipos de gestores 00:15:31
de ubicación 00:15:32
Por ejemplo, vamos a hacer un ejemplito rápido con el grid layout. 00:15:33
A ver, el grid layout, tú fijas una rejilla de coordenadas, grid layout, 00:15:43
fijas una serie de filas y columnas y luego le dices en qué fila y en qué columna. 00:15:51
Entonces, bueno, algo más puede jugar. 00:15:55
Entonces, vamos a hacer un vista 3 para poner otro gestor de ubicación. 00:15:57
pero vamos que rápidamente 00:16:03
haciendo una consulta en internet 00:16:05
o lo que sea, podéis recolocar 00:16:08
vuestros componentes de otra forma con gestores 00:16:10
de ubicación, no vamos 00:16:12
a perder nosotros el tiempo en eso 00:16:14
porque no lo tenemos 00:16:15
a ver, voy a hacer un vista 3 00:16:18
vista 3 00:16:20
y voy a copiar el mismo ventana 00:16:32
visiesto pero le voy a cambiar el flow layout 00:16:34
vale 00:16:36
esta es mi copia, le voy a cambiar el flow layout 00:16:44
bueno pues 00:16:50
hay otro gestor de ubicación 00:16:52
a ver si me acuerdo 00:16:53
de la forma sencilla de usarlo 00:16:56
que es el grid layout 00:16:57
al grid layout le das una serie 00:17:15
de filas y columnas 00:17:17
pues por ejemplo vamos a darle 3 00:17:19
y 3 00:17:21
vale 00:17:22
vale 00:17:24
entonces esto es como 00:17:28
dividir tu interfaz 00:17:30
en 3 filas y 3 columnas 00:17:32
Y luego ya decides dentro de esas coordenadas 00:17:36
Donde se coloca cada componente 00:17:38
¿Vale? Pues entonces 00:17:39
Si ahora le ponemos setLay 00:17:42
O gestor de ubicación 00:17:45
Esto ahora para añadir 00:17:46
Creo que se ponía 00:17:49
Un momento que lo 00:17:53
Las coordenadas 00:17:54
Se ponían en el constructor 00:17:59
Pero no me acuerdo donde 00:18:01
Es para, bueno, por si queréis que os quede un poco más bonito 00:18:02
que todos seguidos 00:18:11
por si alguien lo quiere 00:18:11
pero si no da igual, porque luego vamos a usar 00:18:14
un plugin para hacerlo de otra manera 00:18:16
vale, a ver 00:18:19
a ver 00:18:29
ah bueno, si, te los va 00:18:45
si tú no le pones nada, te los va poniendo en 00:18:54
uno tras otro 00:18:57
vale, por ejemplo 00:18:59
en nuestro caso, si hacemos 00:19:04
dos 00:19:07
columnas por tres filas 00:19:09
vamos a ver como nos quedaría 00:19:11
Dos columnas por tres filas 00:19:12
Ahora ejecutamos este 00:19:16
Me voy al main y pongo ahora vista 3 00:19:17
Para que me haga el 3 00:19:22
A ver como lo ha dejado 00:19:25
Vale, bueno 00:19:26
Ahora hay que ajustar los tamaños 00:19:40
Hay que ajustar cositas 00:19:45
Porque si no lo estira 00:19:46
Hay que ponerle un borde 00:19:48
Al grid layer se le puede fijar 00:19:49
La distancia entre columnas 00:19:52
Porque si no fijamos una distancia 00:19:55
Uff, te estira esto 00:19:56
Entonces tira el componente a toda la 00:19:58
Entonces se le puede fijar una distancia 00:20:00
Entre coordenadas 00:20:02
Para que esto lo haga más pequeñito 00:20:04
Bueno, que sepáis que podéis jugar con esos gestores de ubicación 00:20:06
O si no, tiráis con el flow layer para hacer esto 00:20:09
Y ya está, porque esto nos da igual 00:20:11
Luego lo vamos a hacer de otra manera 00:20:12
Vale, pues a ver 00:20:17
Entonces, os iba a decir 00:20:19
Lo de los ejercicios 00:20:21
Subido por:
Raquel G.
Licencia:
Todos los derechos reservados
Visualizaciones:
9
Fecha:
22 de abril de 2024 - 18:09
Visibilidad:
Clave
Centro:
IES ROSA CHACEL
Duración:
20′ 29″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
102.43 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid