Saltar navegación

20250306 GUI_WindowBuilder - 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 8 de marzo de 2025 por Raquel G.

16 visualizaciones

Más información Transcripción

Descargar la transcripción

vale, pues venga, ¿me hacéis caso? 00:00:00
bueno, pues a ver 00:00:05
nos situamos como esta aplicación 00:00:06
todavía no la vamos a corregir, pero si queréis seguir trabajando 00:00:08
en ella, pues fenomenal 00:00:10
ya la corregimos el lunes 00:00:12
o el lunes 00:00:14
a menos que mañana decidáis que venís 00:00:17
todos, bueno, pues cuando sea 00:00:20
despierta, bueno 00:00:23
bueno, pues nos ponemos, volvemos 00:00:26
a ver, nos situamos 00:00:30
en el de los botones 00:00:35
vale 00:00:37
bueno, calla 00:00:38
un poquín, entonces 00:00:41
tenía, esta por ejemplo 00:00:43
tenía solo tres componentes 00:00:45
entonces bueno, aunque le hemos 00:00:48
hecho este gestor de ubicación patatero 00:00:50
aún así, pues bueno 00:00:52
no ha quedado 00:00:53
No, porque así te doy oportunidades 00:00:54
el fin de semana 00:01:06
de que hagas cosas, investigues 00:01:11
todo eso 00:01:13
Vale, bueno, esta aplicación 00:01:14
como tenía solamente 00:01:17
dos botoncitos y un texto 00:01:18
pues bueno, no ha quedado 00:01:21
mal del todo, o sea, mal me refiero 00:01:23
en cuanto a colocación, no ha quedado demasiado feo 00:01:25
pero en cuanto empezamos a tener un montón de 00:01:27
componentes, paneles 00:01:29
ahora aquí quiero colocar estos cuatro, ahora aquí 00:01:31
no sé qué, quiero que me quede bien, quiero cambiar colores 00:01:33
quiero, ya se vuelve una locura 00:01:35
porque tenemos que empezar a meternos en los métodos 00:01:37
de cada componente a ver cómo cambiarle el color 00:01:39
cómo cambiarle el tamaño, tenemos que medir 00:01:41
píxeles o la unidad que sea 00:01:43
hasta que decidimos dónde los colocamos 00:01:45
se vuelve un poco locura 00:01:47
vale, pues hay una 00:01:48
funcionalidad adicional al entorno 00:01:51
de desarrollo, a Eclipse 00:01:53
cualquier entorno de desarrollo la tiene, NetBeans 00:01:54
Intel y Yelp, que sea 00:01:57
que te permite 00:01:59
generar el código 00:02:01
automáticamente de tus 00:02:03
vistas con herramientas de 00:02:05
arrastrar y ya está, tú arrastras y te genera 00:02:07
el código y te dice las coordenadas 00:02:09
entonces bueno 00:02:10
pues vamos a usarlo, porque tampoco vamos a ser 00:02:12
los más pringados nosotros 00:02:15
vale 00:02:16
es una funcionalidad adicional 00:02:18
no viene el Eclipse de base 00:02:21
no viene 00:02:23
hay que instalarla, es un plugin 00:02:23
lo que se viene a llamar plugin 00:02:26
¿cómo se ponen los plugins 00:02:27
en el entorno de desarrollo? 00:02:30
pues si vosotros os vais a help 00:02:33
veis que 00:02:34
tiene 00:02:37
casi abajo del todo 00:02:38
tanto install new software 00:02:42
como Eclipse marketplace 00:02:44
vale, install new software es para 00:02:46
conectarse directamente a un repositorio 00:02:48
donde sabes que está, buscarlo a mano 00:02:50
es más 00:02:52
cuando ya está uno un poquito más profesional 00:02:53
eso está 00:02:56
envuelto en una herramienta 00:02:58
un poquito más para profanos 00:03:00
que es el Eclipse Marketplace 00:03:02
que te lo envuelve 00:03:04
ya en una forma de buscar 00:03:06
plugins más amigable 00:03:08
que trabaja en internet directamente 00:03:09
sí, bueno, la otra también 00:03:11
pero la otra también 00:03:13
pero la búsqueda 00:03:13
tú buscas, tienes que decir directamente 00:03:16
qué repositorio es, luego tienes la URL 00:03:18
del repositorio, tienes que saberlo 00:03:20
entonces es menos amigable 00:03:22
el marketplace este 00:03:23
Eclipse Marketplace 00:03:26
pues te saca 00:03:27
esta cosita 00:03:30
y esta cosita pues tiene 00:03:31
aquí arriba 00:03:34
un área de texto para que tú busques 00:03:35
¿qué quiero yo? pues quiero buscar 00:03:38
algo para que me ayude a hacer interfaces 00:03:40
gráficas, pero claro 00:03:42
ahí tienes que buscar por algún nombre 00:03:44
clave que sea capaz 00:03:46
de identificar el plugin, entonces uno antes 00:03:48
previamente habría buscado 00:03:50
en internet y habría dicho 00:03:52
oye vamos a ver, tengo aquí un 00:03:53
algún 00:03:55
tiene el Eclipse algún 00:03:57
plugin para 00:04:00
interfaces gráficas 00:04:02
tiene alguno 00:04:04
nos está enseñando a buscar en google 00:04:06
atentos 00:04:07
no, no era 00:04:08
mi intención. Lo que quería 00:04:12
era identificar 00:04:14
el procedimiento mental, que es que primero 00:04:15
uno tiene que averiguar 00:04:18
si existe un plugin que te haga eso 00:04:19
para conocer el nombre. Y luego ya te vas a buscar 00:04:22
el Eclipse Marketplace, porque para el Eclipse Marketplace 00:04:24
ya tienes que buscar... Vale, no, 00:04:26
no os estoy enseñando a... 00:04:28
Vale, pues uno busca 00:04:30
plugins de swing, patatín 00:04:31
vale. 00:04:35
Dice, mira, el Window Builder es un 00:04:38
patatín, patatín. Bueno, yo he ido muy a tiro fijo. 00:04:40
Pero bueno, se ha notado claramente, ¿no? 00:04:42
Vale, pues resulta. 00:04:46
Fíjate, me ha salido la primera de todas. 00:04:48
No, no, no, la primera, la primera me ha salido. 00:04:51
He hecho una búsqueda. 00:04:53
Bueno, pues el Window Builder es el plugin de Eclipse 00:04:55
para hacer fácilmente interfaces gráficas. 00:04:58
Luego, entonces, ahora ya sí, 00:05:01
nos vamos a nuestro Eclipse Marketplace 00:05:02
y ponemos aquí Window Builder. 00:05:04
Go o Enter. 00:05:09
y te sale 00:05:10
window builder 00:05:15
vale 00:05:17
pues entonces window builder 00:05:18
vamos a darle a install 00:05:22
el primero no 00:05:25
el current 00:05:28
no el current 00:05:28
el nightly ese no se ni que es 00:05:31
pero me da lo mismo 00:05:34
current venga 00:05:34
de hecho en la descripción te lo dice 00:05:36
es una herramienta de diseño de swing 00:05:38
y te hace muy fácil crear interfaces 00:05:40
con aplicaciones gráficas sin gastar 00:05:43
mucho tiempo escribiendo código. 00:05:45
Justo lo que necesitábamos, lo que nos está 00:05:47
diciendo. Lo de 00:05:49
without spending an offline writing code 00:05:51
es justo lo que queríamos. Pues mira. 00:05:53
Pues venga, 00:05:58
a instalar. 00:05:59
Exacto. 00:06:04
Confirm. 00:06:09
Confirm. 00:06:10
mira algunas cosas de las que dices 00:06:20
y te hacen gracia 00:06:25
vale, finish 00:06:26
como vuestra conexión 00:06:31
es una caca, pero la mía que es guay 00:06:33
ya ha acabado, finish 00:06:35
y ahí se está 00:06:37
veis aquí abajo, cuidado 00:06:41
no le sobrecarguéis 00:06:43
está ahí bla bla bla en su barrita verde 00:06:45
y cuando acabe 00:06:47
tendrá que reiniciarse 00:06:49
no, a ver, podéis seguir trabajando 00:06:51
con el Eclipse, él está en background 00:06:55
en background está instalándolo 00:06:57
simplemente 00:06:59
bueno, pues he dicho yo lo de la Wi-Fi 00:06:59
muy rápido, porque está ahí parado en 14% 00:07:03
Se me ha quedado muerto. 00:07:19
Ah, ya ha espabilado. 00:07:31
¿Veis? Cuando acaba dice, tienes que reiniciar Eclipse. 00:07:33
Lo reinicia así. 00:07:36
Reiniciamos Eclipse. 00:07:40
Bueno, se reinició 00:07:55
¿Lo tenéis ya instalado y reiniciado Eclipse? 00:08:05
Venga, ya 00:08:14
Si eso termina de instalar y reiniciar 00:08:14
¿A alguien no? 00:08:16
Bueno, cuando sale del 15 de repente 00:08:20
Se pone a toda leche 00:08:22
Eso 00:08:24
A ver 00:08:25
vamos 00:08:27
vamos a suponer que ya lo tenéis instalado 00:08:29
todos, ahora 00:08:32
vamos a hacer 00:08:33
una interfaz gráfica pero ahora usando este plugin 00:08:36
vale 00:08:38
vamos a suponer que quisiéramos hacer esta 00:08:40
aunque no la vamos a terminar, usando este plugin 00:08:41
venga, pues vamos a hacer este ejercicio 00:08:43
venga, pues hacemos 00:08:45
un proyecto de Java como siempre 00:08:47
no, no, no, no, venga 00:08:49
en el que estabais 00:08:53
vale, en el que estabais 00:08:54
vale, vale, es que como 00:08:56
a ver, en el mío ¿cuál era? 00:08:58
era ventana, segundo ejemplo 00:09:00
no sé qué, se llamaba el mío 00:09:03
primera va y segunda 00:09:05
vale, venga 00:09:15
pues entonces, vale 00:09:17
vamos 00:09:18
silencio 00:09:20
vamos a hacer entonces 00:09:23
como si fuéramos a hacer este ejercicio 00:09:24
ahora ya, pero 00:09:26
en lugar de construir la interfaz 00:09:27
gráfica a mano con el flow layout, con este 00:09:30
pues hala, vamos a hacernos 00:09:32
el frame, pues new 00:09:34
no pasa nada 00:09:36
duran muchísimo, dos minutos 00:09:37
en lugar de new 00:09:39
class 00:09:43
a palo seco 00:09:45
new order 00:09:46
¿vale? 00:09:50
y en new order 00:09:52
Desplegáis la pestañita 00:09:53
Window builder 00:09:55
Y ahí entre muchas de las cosas que ofrece 00:09:56
Pues ofrece JFrame 00:09:58
Vale 00:10:00
Pues venga, seleccionamos JFrame 00:10:01
¿Qué nombre le quieres dar a tu JFrame? 00:10:05
Pues el nombre de la clase 00:10:08
El que os dé la gana 00:10:09
Bueno, es que la mía ya existe 00:10:10
Pero si no he hecho nada 00:10:11
A la le dais el nombre, ventana 2 00:10:14
Y ya 00:10:19
Él ya ha fijado 00:10:20
El código solito que ha hecho 00:10:22
ya ha mejorado mi código 00:10:24
ya ha hecho todo este código 00:10:27
¿qué ha hecho? un heredero de JFrame 00:10:28
hasta ahí sabíamos que lo tenía que hacer 00:10:31
un heredero de JFrame 00:10:33
y luego te ha hecho un main 00:10:34
en el cual 00:10:37
crea el objeto frame 00:10:39
en mi caso se llama ventana2 00:10:41
y el objeto frame todavía no tiene nada 00:10:43
te crea un frame 00:10:46
lo hace visible 00:10:47
y ya está 00:10:48
y luego el constructor 00:10:50
al constructor le pone algo 00:10:52
que es esta sentencia que ya le conocemos 00:10:54
le da un tamaño 00:10:56
y una ubicación 00:10:58
el panel 00:10:59
crea un panel content panel 00:11:01
y fija 00:11:04
al frame 00:11:06
le fija como su panel 00:11:07
este 00:11:09
eso es lo que hace 00:11:10
este código es relativamente fácil de entender 00:11:12
simplemente lo único que hace es 00:11:15
esta sentencia le da un tamaño al frame 00:11:16
crea un objeto panel 00:11:19
y se lo fija 00:11:20
al frame. 00:11:22
Aquí esto es como si hubiera 00:11:24
dis, está claro. 00:11:25
Esto es como si hubiera 00:11:26
un dis en todo. 00:11:26
Entonces, 00:11:28
en lugar de usar 00:11:29
el panel por defecto, 00:11:29
no va a usar 00:11:31
el panel por defecto, 00:11:32
sino que va a usar 00:11:33
este que se llama 00:11:33
content panel. 00:11:34
Ya está, 00:11:35
no pasa nada. 00:11:35
Vale, 00:11:36
¿y qué nos aporta esto? 00:11:36
Y luego ya te hace un main 00:11:38
para que directamente 00:11:39
esta clase sea 00:11:40
la propia ejecutable. 00:11:41
Y este main 00:11:42
ya construye 00:11:43
el ventana 2 y todo. 00:11:44
¿Y ahora qué hemos ganado 00:11:45
con esto? 00:11:46
Pues con esto hemos ganado 00:11:47
que abajo 00:11:48
veis que os ha aparecido 00:11:48
una pestaña que antes no existía. 00:11:50
Es la pestaña diseño. 00:11:53
Pues seleccionáis la pestaña 00:11:55
diseño. 00:11:56
Y aquí tenéis el frame, 00:12:02
el panel, 00:12:06
el content panel, 00:12:08
todos los 00:12:10
contenedores 00:12:11
a mogollón, los layouts, 00:12:12
todos los componentes, 00:12:15
todo, para arrastrar y pegar. 00:12:17
Pero cuidado, 00:12:19
como vamos a arrastrar y pegar 00:12:21
y vamos a fijar entonces 00:12:23
directamente la oposición nosotros 00:12:25
y no queremos ningún layout 00:12:27
tenéis que, volveremos sobre esto 00:12:28
pero para que podáis arrancar si queréis hacer algo 00:12:32
ahora mismo tenemos solamente 00:12:35
dos cositas en realidad 00:12:37
tenemos lo que aparece aquí 00:12:38
tenemos el frame 00:12:40
que es esto de fuera 00:12:41
y el panel, que es lo de dentro 00:12:43
son las únicas dos cosas que tenemos 00:12:46
el frame 00:12:47
y el panel 00:12:49
vale, pues vamos a situarnos en el panel 00:12:52
vamos a situarnos 00:12:54
en el panel 00:12:56
y lo que me aparece aquí a la izquierda 00:12:57
son todas las propiedades del elemento 00:13:00
que yo haya seleccionado 00:13:02
¿no? por ejemplo aquí he seleccionado 00:13:03
el panel content panel y me aparecen las propiedades 00:13:06
que selecciono el frame 00:13:08
pues me aparecen 00:13:09
todas las propiedades del frame 00:13:12
si está visible, si no lo está 00:13:14
pero a ver, me interesa el panel, vamos a quedarnos con el panel 00:13:16
vale, pues en el 00:13:18
panel, en el layout 00:13:20
me ofrece todo 00:13:22
¿qué layout quieres ponerle al panel? 00:13:24
un panel de tipo flow 00:13:26
¿qué layout le quieres poner? o sea, ¿qué gestor de ubicación? 00:13:27
vamos a ponerle 00:13:31
absoluto 00:13:32
que es como decir, no quiero ningún 00:13:34
gestor de ubicación 00:13:36
me decís, eh, el layout 00:13:37
de mi content panel, de mi panel 00:13:41
absoluto, colocación absoluta 00:13:43
que sería como el null 00:13:46
no quiero ningún gestor de ubicación 00:13:46
y cuando ya hemos hecho esto, no quiero ningún 00:13:49
gestor de ubicación, ahora ya podemos 00:13:51
arrastrar, que queríamos 00:13:54
un campo de texto, pues ala 00:13:55
aquí está mi campo de texto 00:13:58
le doy el 00:13:59
tamaño que me da la gana 00:14:02
lo que quiera 00:14:03
he pinchado el campo de texto 00:14:04
no lo he pinchado 00:14:07
y arrastrado, pinchado, lo he pinchado, suelto el clic 00:14:09
y lo muevo 00:14:12
aquí coloco los componentes que me den la gana 00:14:13
todos los que tenga, como si le quiero 00:14:17
poner un botón aquí 00:14:19
Y todos estos componentes, si los voy seleccionando, 00:14:20
me aparece a la izquierda del todo sus propiedades, 00:14:24
pero si las quiero cambiar de color, etcétera. 00:14:26
Y aquí coloco y hago lo que me dé la gana. 00:14:30
¿Vale? 00:14:36
Si volvéis a ir a la pestaña de fuente, 00:14:38
a la pestaña de fuente, veis que efectivamente el 00:14:40
constructor se ha creado todo el código correspondiente a eso. 00:14:45
el text field con su situación 00:14:48
se ha añadido el content panel 00:14:51
¿vale? el botón 00:14:53
con su texto 00:14:55
todo lo que estáis haciendo se crea 00:14:57
el código ahí 00:14:59
¿vale? 00:15:00
entonces para construir la interfaz 00:15:03
pues lógicamente es más sencillo 00:15:05
¿vale? ya podemos ponerla, cambiarla 00:15:07
lo que sea 00:15:11
que a este botón le 00:15:12
queremos cambiar el texto 00:15:15
pues lo seleccionamos, nos vamos aquí 00:15:17
texto del botón 00:15:19
pues esto de aquí 00:15:22
y aquí el tamaño, el tipo de letra 00:15:24
todo, aquí le podéis cambiar un montón 00:15:30
de cosas 00:15:31
¿vale? 00:15:32
por ejemplo, ¿qué text? 00:15:39
¿qué letra queremos? pues queremos 00:15:41
esta 00:15:43
pues a la 00:15:45
aquí hay un botoncito 00:15:47
que no es para ejecutar la aplicación 00:15:54
es para tener un preview 00:15:57
de cómo te quedaría la vista 00:15:59
o sea, este botoncito te hace un preview 00:16:00
de cómo te quedaría 00:16:03
¿vale? pues así, ¿te gusta así? 00:16:04
pues no, no me gusta así 00:16:06
pues ya está 00:16:08
esta es la idea 00:16:11
¿vale? entonces 00:16:12
Vale, ¿cómo va a poner? 00:16:13
¿Estás comiendo? 00:16:17
Y... 00:16:18
Materias:
Programación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
Subido por:
Raquel G.
Licencia:
Todos los derechos reservados
Visualizaciones:
16
Fecha:
8 de marzo de 2025 - 19:24
Visibilidad:
Clave
Centro:
IES ROSA CHACEL
Duración:
16′ 21″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
73.35 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid