Saltar navegación

Clase 22-04-24 - 3 - 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.

7 visualizaciones

Más información Transcripción

Descargar la transcripción

Pues los que se han atascado con el primero. 00:00:00
¿Cuál es el proceso mental que tendrían que haber seguido? 00:00:03
El proceso mental. 00:00:08
Primero, está claro, leerse el enunciado y entender lo que hay que hacer. 00:00:10
Una aplicación que recibe como datos, ¿qué? 00:00:14
Una cantidad, un número decimal. 00:00:17
Vale. 00:00:21
¿Y qué puede hacer? 00:00:23
Dos funcionalidades. 00:00:24
Funcionalidades, creyendo que son dólares, pasarlo a euros y otra segunda funcionalidad, teniendo en cuenta que son euros, pasarlo a dólares. 00:00:25
Luego, un único dato de entrada, dos funcionalidades distintas y un resultado. 00:00:35
Pues entonces, entendiendo lo que tiene que hacer, uno diseña el aspecto de su interfaz. 00:00:48
pues entonces vamos a hacer 00:00:53
un área de texto para meter 00:00:56
la cantidad, un botón 00:00:58
para cada funcionalidad 00:01:00
y una etiqueta para el resultado 00:01:01
por ejemplo, vale, la estructura 00:01:04
más sencilla del mundo 00:01:06
vale, entonces 00:01:07
ese sería 00:01:10
el primer paso 00:01:11
hemos dicho entender lo que tiene que hacer 00:01:13
el segundo, decidir 00:01:15
una interfaz 00:01:18
que permite recoger los datos 00:01:19
que yo he visto que tengo que meter y permite 00:01:22
mostrar los datos, construirla 00:01:24
y luego ya dar 00:01:26
comportamiento a esa interfaz 00:01:28
vale, pues 00:01:29
como ya tenemos la parte de decidir la interfaz 00:01:31
hecha, pues venga 00:01:34
vamos a 00:01:36
vamos a llamarlo 00:01:37
dólares, dólares 00:01:41
euros, por ejemplo 00:01:44
ala, dólares euros 00:01:45
¿dónde se me ha creado esa clase? 00:01:47
a saber, bueno, da igual 00:01:53
New Class 00:01:54
Dólares, euros 00:01:57
Vale, entonces 00:02:03
Como esto es una aplicación con interfaz gráfica 00:02:04
Tiene que heredar de un frame 00:02:07
Vale 00:02:09
Siguiente paso, hereda de un frame 00:02:11
Muy bien 00:02:13
Hereda de un frame porque es una aplicación interfaz gráfica 00:02:14
Siguiente paso 00:02:23
Me hago el constructor 00:02:24
Me hago el constructor 00:02:25
Y el constructor construye la interfaz 00:02:27
¿Qué componentes he decidido yo que tenga? 00:02:33
Como ya los he decidido 00:02:37
Un text fill, un botón 00:02:38
Un segundo botón y una etiqueta 00:02:41
Por ejemplo, como ya lo he decidido 00:02:43
Los pongo aquí como propiedades de la clase 00:02:44
Pero porque ya los he decidido antes 00:02:47
Pues este área de texto va a tener el dato 00:02:49
Vale, un botón 00:02:53
Para convertir 00:02:56
dólares 00:03:00
euros, por ejemplo 00:03:02
otro botón 00:03:04
para la otra funcionalidad 00:03:14
vale, uno pone aquí lo que haya decidido 00:03:15
y el resultado 00:03:18
vamos a variar un poco, el resultado 00:03:32
en lugar de ponerlo en una etiqueta 00:03:34
el resultado que aparezca 00:03:36
en el propio text field, es decir 00:03:38
yo pongo 27, le doy al botón 00:03:40
y 27 cambia y se 00:03:43
convierte en lo que corresponda 00:03:44
vale 00:03:47
pues nada 00:03:49
Estos son mis tres componentes 00:03:51
Los importamos 00:03:53
Los podemos inicializar ya aquí si queremos 00:03:56
Y así no tenemos luego que inicializarlos en el constructor 00:03:59
Venga, vamos a inicializarlos ya aquí 00:04:02
Pues un text fill 00:04:03
¿Qué tamaño quiero que se vea? 00:04:05
En el área de texto 00:04:07
Pues bueno, que se vea 00:04:09
Que se vea de 10 00:04:10
Ala, que sea grandecito 00:04:15
Vale, el botón 00:04:17
Vamos a inicializarlo ya aquí 00:04:19
un nuevo botón 00:04:21
y que texto 00:04:24
quiero que figure, si este es de dólares 00:04:26
pues venga, que figure 00:04:29
por ejemplo 00:04:32
aquí 00:04:33
este texto 00:04:36
en el botón 00:04:38
y en el otro botón, vamos a 00:04:39
inicializarlo ya aquí 00:04:44
que texto queremos que figure 00:04:45
bueno, pues es el opuesto 00:04:47
de euros 00:04:50
a dólares 00:04:58
vale, por ejemplo, ala, son los tres componentes 00:04:59
no lo dito más, con esos tres 00:05:02
tengo ya mi aplicación hecha, porque el resultado 00:05:03
se va a poner en el mismo sitio 00:05:06
donde puse la entrada 00:05:07
ya están los tres 00:05:09
ahora ya construyo la interfaz 00:05:11
vale, construir la interfaz 00:05:13
¿a dónde le pongo 00:05:16
los componentes? hombre, pues al panel por 00:05:17
defecto, a este 00:05:19
que con tanto método hasta que 00:05:21
sale, al panel por 00:05:25
defecto se los voy a poner 00:05:27
pues venga, le vamos a poner 00:05:28
el text fill 00:05:31
ahora le vamos a poner al panel 00:05:32
por defecto 00:05:37
el botón 00:05:38
este también 00:05:41
y ahora le vamos a poner 00:05:44
también al 00:05:50
se me ha olvidado el punto add 00:05:52
punto add 00:05:54
y le vamos a poner al panel 00:05:59
por defecto 00:06:02
el this es opcional, claro 00:06:03
le vamos a poner el otro 00:06:06
botoncito 00:06:08
vale, entonces vamos siguiendo 00:06:09
el proceso ordenadamente en la cabeza 00:06:19
pero tenemos la cabeza ordenada 00:06:20
ahora decimos, uy, si lo añado 00:06:22
al panel sin más, me aparece en uno encima 00:06:25
de otro, no voy a ver nada 00:06:27
no, voy a tener que poner un gestor de ubicación 00:06:28
entonces, o me hago el flow layer todos seguidos 00:06:30
o me investigo, me busco por ahí 00:06:32
que tardo 5 minutos 00:06:35
cómo usar otro gestor de ubicación 00:06:36
cómo usarlo, si esto es lo más fácil 00:06:39
del mundo, lo difícil es programar 00:06:41
lo difícil es lo que va detrás, que es programar 00:06:43
esto, venga 00:06:44
como yo no quiero perder ese tiempo ahora 00:06:46
en preguntarle a chatGPT, configúrame 00:06:48
un gestor de ubicación para que me ponga los componentes 00:06:52
así, toma este, pum, ahí lo pongo, como no quiero 00:06:54
perder el tiempo en eso 00:06:56
pues voy a hacer un 00:06:57
gestor 00:07:00
así, flow layout 00:07:02
y le voy a decir a mi panel 00:07:07
por defecto, que es 00:07:11
este, le voy a decir a mi panel por defecto que 00:07:15
se copie 00:07:17
o que tome como jefe 00:07:19
ala, ya está construida 00:07:21
mi interfaz 00:07:24
mi interfaz ya está construida 00:07:25
lo que pasa es que los botones no tienen funcionamiento 00:07:27
de hecho vamos a ver si nos gusta 00:07:32
como está en un main 00:07:34
el main, para no hacer una clase aparte, solo para el main 00:07:35
es un poco tontería 00:07:38
hacer una clase solo para el main 00:07:39
vamos a meter el propio main aquí 00:07:41
que es lo habitual, voy a hacer el propio main 00:07:43
en esta clase 00:07:45
Que a su vez 00:07:46
Que es JFrame, que también sea la clase principal 00:07:48
Pues vamos a poner aquí el propio main 00:07:51
¿Vale? 00:07:55
Y aquí puedo hacer mi main tranquilamente 00:08:14
Entonces 00:08:16
Aquí puedo instarciar 00:08:17
Dólares 00:08:19
Euros, esta es mi aplicación 00:08:20
Igual a new 00:08:25
Dólares 00:08:29
Euros 00:08:30
Ahí la construyo 00:08:32
Y para verla 00:08:35
Y darle un tamaño 00:08:37
Pues le vamos a dar 00:08:39
Un tamaño 00:08:40
Pues el que sea 00:08:43
200 por 100 00:08:44
Cualquier chorrada 00:08:51
Y lo vamos a hacer visible 00:08:52
Vale 00:08:54
Entonces el main lo he hecho en la propia clase 00:09:05
Dólares, euros 00:09:09
Por no hacer una clase aparte solo para meter el main 00:09:10
Que tontería 00:09:12
Entonces si ahora ejecutamos esta clase 00:09:13
Que ya es ejecutable 00:09:15
Para ver si el aspecto que tiene nos gusta 00:09:17
Bueno 00:09:20
Un poco pequeñaja 00:09:22
Pero vale 00:09:23
Pues ya está 00:09:26
Me gusta este aspecto, pues sí 00:09:27
Si lo hago un poco más estrecha 00:09:29
Igual saltan los botones abajo 00:09:31
Y queda más bonita 00:09:32
Vamos a hacerla de ancha 00:09:33
150 00:09:36
A ver si 150 nos queda más bonita 00:09:37
pues sí 00:09:41
así me ha quedado más bonita 00:09:47
vale 00:09:49
pero ahora me falta darle 00:09:50
comportamiento a las cosas 00:09:53
aquí 00:09:56
lo siguiente que tenemos que ver es 00:09:57
de estos interfaces 00:09:59
cuáles tienen comportamiento 00:10:02
asociado, este botón 00:10:03
y este botón 00:10:05
vale 00:10:07
entonces en principio 00:10:09
a este 00:10:10
le vamos a hacer una acción listener 00:10:12
y a este otro, AutoActionListener, 00:10:14
porque son dos componentes que tienen comportamiento asociado. 00:10:18
¿Vale? ¿Qué tipo de evento queremos capturar? 00:10:22
El por defecto, el de hacer clic. 00:10:26
Como queremos capturar el de hacer clic, 00:10:27
la clase que hay que implementar es la ActionListener, 00:10:30
porque queremos capturar el de hacer clic, 00:10:32
que es el por defecto. 00:10:34
Luego, dos ActionListener, uno para esta 00:10:36
y otro para este botón. 00:10:38
Dos ActionListener. 00:10:41
Pues hala, dos clases internas, me hago aquí mis clases internas, class captura de dólares 00:10:41
a euros, implements ActionListener, y ahora, si esto implementa ActionListener, la llave 00:10:54
a ver que se me ha ido ahí. Vale, a ver, esto aquí. Si esto implementa ActionListener 00:11:12
tiene que implementar el método por defecto, que es el ActionPerformed, que es este de 00:11:24
aquí, este. Y ahora, ¿qué tenemos que hacer en este método? Como el evento que 00:11:31
estamos capturando es pasar de dólares a euros, tendremos que coger lo que hay en el 00:11:37
área de texto 00:11:43
dato, vale 00:11:44
pues a ver, en dato 00:11:47
hay una cosa que se llama 00:11:48
es un área de texto 00:11:51
entonces con, cogemos 00:11:53
su contenido con getTest 00:11:55
vale, este 00:11:56
hay que convertirlo a label 00:11:59
vale, ya tenemos 00:12:00
este es el numerito decimal 00:12:09
que hay en este área 00:12:13
de texto, vale, getTest 00:12:15
nos da la cadena que hay 00:12:17
el textfield, la cadena, pero esa cadena 00:12:19
su número decimal lo tenemos que convertir 00:12:21
y ahora, ¿qué tenemos que hacer? 00:12:23
pues multiplicarlo por el factor de conversión 00:12:25
que me lleva de dólares a euros 00:12:27
que será un factor de conversión inferior a 1 00:12:29
el que sea, ¿cuál es? 00:12:31
¿lo habéis buscado ya y me decís cuál es? 00:12:34
o pongo cualquier cosa 00:12:36
0,8, 0,8 00:12:37
para pasar de dólares a euros hay que multiplicar por 00:12:39
0,93, vale 00:12:41
bueno, me da igual 00:12:43
vale, pues todo esto 00:12:47
todo esto 00:12:49
es lo que hay que poner 00:12:51
todo esto 00:12:53
todo eso de ahí 00:12:55
es lo que hay que poner 00:12:58
en el área de texto 00:13:03
pues venga 00:13:04
pongo dato.secTest 00:13:07
entonces aquí 00:13:09
se trata de que uno vaya averiguando 00:13:17
los métodos que le interesan 00:13:19
entonces textField 00:13:20
igual que tiene un getTest para sacar 00:13:23
el texto, tiene un 00:13:25
secTest para fijar 00:13:27
el dato que tú quieres 00:13:29
que es justo lo que queremos 00:13:30
a este textfield le vamos a fijar 00:13:32
este texto 00:13:35
todo eso 00:13:36
¿vale? 00:13:39
el compilador que me dice 00:13:42
oye, cuidado, que al textfield 00:13:44
le estás fijando 00:13:46
para que se ponga en él un texto 00:13:47
y le estás pasando luego un decimal 00:13:50
bueno, convirtámoslo a cadena 00:13:51
ese decimal, ¿cómo convertimos a cadena de forma sencilla? 00:13:54
¿cómo lo habéis hecho? 00:13:57
claro, la forma más cómoda 00:14:01
es esta 00:14:02
ala, ya te he dado lo que querías 00:14:03
ya está 00:14:06
este es el action performance del botón 00:14:07
va a cambiar de dólares a euros 00:14:10
cojo lo que hay en área de texto 00:14:12
gettest 00:14:14
lo paso a dabble 00:14:15
porque me lo da en cadena el gettest 00:14:17
lo multiplico por el factor de conversión 00:14:20
al concatenarlo con esto 00:14:23
se me queda en formato cadena 00:14:25
y ahora ya se lo pongo 00:14:26
se lo pongo 00:14:28
al textfield de nuevo 00:14:29
Pues ya tengo el evento 00:14:31
Para el botón que va de dólares a euros 00:14:34
Que ese botón como se llama 00:14:37
Este, dólares tu euros 00:14:38
Pues tengo que añadírselo 00:14:39
Dólares 00:14:41
Tu euros 00:14:46
Punto add 00:14:48
Action listener 00:14:49
Esta que hemos hecho 00:14:52
Vale, entonces vamos a ver si esto nos funciona 00:14:55
Pues si esto nos funciona 00:15:10
El otro botón será hacer otro Action Listener 00:15:11
Para él y añadírselo a él 00:15:13
Hemos hecho el de dólares a euros 00:15:15
Vamos a suponer que le damos 45 00:15:19
De dólares a euros hemos hecho este 00:15:22
Pues 100 euros es 41,85 00:15:23
¿Vale? Me ha cambiado el 00:15:26
Vale, a ver, 100 euros 00:15:29
Perdón, 100 dólares 00:15:36
¿Cuánto es? 00:15:38
Pues 100 dólares son 00:15:40
93 euros 00:15:42
¿Vale? Este botón no tiene nada 00:15:43
hecho todavía, no tiene ningún evento, este sí 00:15:46
93 dólares, ¿cuántos son? 00:15:48
pues, uh 00:15:50
esto 00:15:51
86,49 00:15:55
¿vale? aquí, hombre, para que quedara 00:16:00
bonito, lo ideal sería truncar el 00:16:03
dabble a dos cifras decimales, truncarlo 00:16:05
para que me mostrara sólo esto 00:16:07
esto ya son tareas vuestras 00:16:09
esto ya son 00:16:11
detalles, detalles que estos ya 00:16:13
sí que son recetas 00:16:15
la receta no me interesa a mí perder el tiempo 00:16:16
en ella, esto ya lo podéis hacer vosotros 00:16:19
como buscar, truncar un double 00:16:21
para que solo demuestre dos cifras decimales 00:16:23
si, le he puesto 10 00:16:24
pero, claro 00:16:37
no, no, no, no tiene nada que ver 00:16:38
o sea, 3 es el aspecto 00:16:43
pero luego si el decimal tiene mil cifras decimales 00:16:44
van a estar ocultas 00:16:47
claro, van a estar ocultas 00:16:48
vale, entonces ahora, el tema sería 00:16:50
y para el otro botón 00:16:52
pues otro action listener para él 00:16:54
Bueno, vamos a copiar y pegar este 00:16:56
Otro ActionListener para él 00:16:57
Y este captura euros 00:17:06
Dólares 00:17:08
Y ahora 00:17:12
El código sería el mismo 00:17:14
Pero ahora el factor de conversión 00:17:16
Sería el de euros a dólares 00:17:19
¿Cuál es el factor de conversión de euros a dólares? 00:17:21
¿Uno con qué? 00:17:24
1,07 00:17:26
Pues hala 00:17:27
Ya está 00:17:29
Ya tenemos el ActionListener 00:17:30
Que quiere convertir 00:17:33
De dólares a euros 00:17:35
Multiplicando por 1,07 00:17:36
Pues se lo añadimos al otro botón 00:17:38
Entonces será 00:17:40
Esto mismo 00:17:43
Pero al revés 00:17:44
Euros 00:17:47
Dólares 00:17:50
Y lo que le añadimos es 00:17:54
New captura 00:17:56
El otro 00:17:57
Vale 00:17:58
Y ahora esto ya 00:18:09
Sí que nos haría las dos cosas 00:18:10
Esto ya sí que nos haría 00:18:13
Ahí, vale 00:18:20
A ver, 100 euros 00:18:32
¿Cuántos dólares son? 00:18:34
Pues 100 euros son 100,7 00:18:36
Y 100,7 dólares, ¿cuántos euros son? 00:18:37
99,51 00:18:41
No da exacto porque 00:18:42
El factor de conversión no es exacto 00:18:43
99,51 dólares 00:18:46
¿Cuántos dólares son? 00:18:48
Pues 00:18:51
106,47 00:18:51
vale, bueno 00:18:55
vale, pues de aquí 00:18:56
¿qué podemos extraer 00:19:14
de este ejercicio? que uno puede 00:19:17
a partir de aquí ampliar y jugar y hacer todo lo que 00:19:18
le dé la gana, la mecánica es la misma 00:19:21
a partir de aquí ya uno puede investigar 00:19:23
y jugar porque ya es todo muy fácil 00:19:25
¿vale? 00:19:26
pero hay una cosa que sí que podemos 00:19:29
incorporar, que es, jolines, 00:19:31
tengo que hacer una clase interna 00:19:33
para cada componente. 00:19:35
Menudo rollo. 00:19:37
¿No podría hacer una única clase 00:19:39
y que esa clase decida 00:19:40
qué componente es el que dio 00:19:43
el evento y elija? 00:19:45
Pues sí, sí que podemos. 00:19:48
Porque si yo tengo una interfaz en la que 00:19:49
tengo mil componentes 00:19:51
y quiero que todos sean 00:19:52
escuchados, tendría que hacer mil clases internas. 00:19:55
Es una locura. 00:19:57
¿Podemos? 00:19:58
resumirlas todas a una, ¿vale? 00:20:01
ya lo vemos mañana, para simplificar 00:20:03
Subido por:
Raquel G.
Licencia:
Todos los derechos reservados
Visualizaciones:
7
Fecha:
22 de abril de 2024 - 18:10
Visibilidad:
Clave
Centro:
IES ROSA CHACEL
Duración:
20′ 11″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
101.72 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid