Saltar navegación

GUI 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 Stefano C.

24 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, parte segunda de interfaces gráficas, vale, entonces estamos haciendo esto 00:00:00
Hemos creado una clase de ejemplo, vale, dentro tenemos un main que lo que hace es crear otro thread 00:00:05
Que es el que creará y se ocupará de las ventanas de la interfaz gráfica 00:00:15
Y aquí en el run defino que voy a hacer, vale, lo que nos interesa principalmente, esto será siempre así 00:00:22
Es esto, ¿vale? 00:00:28
Entonces lo que hemos hecho aquí es crearnos un nuevo objeto que es un frame 00:00:30
¿Vale? Porque ejemplo GUI es en realidad un GFrame 00:00:34
Y luego lo hacemos visible 00:00:40
Entonces hemos visto antes que al ejecutarlo 00:00:42
Pues aquí se crea una ventanita 00:00:45
Ahí está, ¿vale? 00:00:48
Y que, fijaos, que esto está funcionando 00:00:51
¿Vale? Es rojo aquí el puntito 00:00:56
Y que si yo pillo esta ventana 00:00:57
Y la cierro 00:01:01
Mi programa no se ha acabado 00:01:02
Sigue allí 00:01:06
¿Vale? 00:01:07
O sea que por defecto 00:01:09
Si yo cierro la ventana 00:01:10
El programa no termina 00:01:11
Hará otras cosas 00:01:13
Se quedará allí 00:01:14
Habrá este thread que está por allí 00:01:15
Encendido 00:01:16
Haciendo no se sabe bien cosa 00:01:17
Porque tened en cuenta que 00:01:19
Esto no es algo que he hecho yo directamente 00:01:21
Esto es 00:01:24
un hilo de ejecución que se queda allí esperando a que pasen eventos a que 00:01:24
pasen cosas y que mi ventana reaccione a estos eventos 00:01:32
vale entonces se queda encendido a la espera de que a lo mejor alguien 00:01:37
reactive la ventana o que haga algún cambio en esa ventana o cosa por el 00:01:42
estilo lo que sí acabaría es mi main mi main aquí acaba 00:01:46
Mi main este de aquí, después de haber ejecutado esto, tened en cuenta, aquí si yo pongo siso, main acaba, cuando lo ejecuto, pues este main acaba se se lanza, el main ha acabado, pero la ventana no. 00:01:52
Aquí hay dos threads 00:02:15
Thread main que seguirá por su cuenta 00:02:17
Y en este caso ha escrito 00:02:20
El main acaba y ha terminado 00:02:21
Y el otro thread que es el que se 00:02:23
Gestiona esta ventana 00:02:26
Que sigue allí gestionando la ventana 00:02:27
Por ejemplo el hecho que yo pueda 00:02:30
Rehacer un resize de la ventana 00:02:31
Es porque alguien me está 00:02:34
Recogiendo que la ventana ha cambiado 00:02:35
Y me la dibuja otra vez 00:02:38
En cierto sentido 00:02:39
Cierro, ese sigue allí 00:02:40
Esperando cosas, pues cierra aquí 00:02:44
Pues ahora está terminado 00:02:45
El otro thread también 00:02:47
¿Vale? 00:02:50
Entonces 00:02:54
Esto es lo básico 00:02:54
He creado un frame 00:02:57
Y una ventana 00:03:00
¿Qué más puedo hacer? 00:03:01
Pues 00:03:03
Vamos a complicar un poquito 00:03:04
El ejemplo 00:03:06
¿Vale? 00:03:10
Entonces nosotros tenemos nuestra clase 00:03:10
Ejemplo, vamos a crear 00:03:13
Un constructor de este ejemplo 00:03:14
Vamos a hacer que cuando yo creo el objeto 00:03:17
Ejemplo, que hemos creado al otro lado 00:03:19
Pues en vez de crearme 00:03:21
Lo más básico posible, que es el GFrame 00:03:23
Sin nada dentro, pues me cree 00:03:25
Algo más, ¿vale? 00:03:27
Entonces aquí por ejemplo, veis 00:03:29
Que en el constructor de este 00:03:30
Objeto, pues tengo algunas 00:03:33
Opciones, algunas funcionalidades 00:03:35
La primera 00:03:37
SetDefaultCloseOperation 00:03:38
Que es, ¿qué hago 00:03:41
Cuando se cierra la ventana 00:03:42
¿Vale? 00:03:45
Por defecto no hago nada 00:03:46
Existe un valor 00:03:48
Que es una 00:03:50
Una constante 00:03:52
Dentro de la clase JFrame 00:03:54
Que si lo uso, se llama exit on close 00:03:56
Que me dice, vale, si apagas 00:03:59
La ventana, cierra también 00:04:01
El thread asociado 00:04:03
Y por lo tanto si me apaga 00:04:04
¿Vale? 00:04:06
Set bounds 00:04:08
Me permite dar coordinadas 00:04:09
Para decir 00:04:11
Cuanto es grande mi ventana 00:04:12
En el momento en que la entiendo 00:04:15
Y tiene cuatro parámetros 00:04:16
El punto X 00:04:18
Donde aparecerá la ventana 00:04:21
El punto Y 00:04:23
Donde aparecerá la ventana 00:04:25
El tamaño en ancho 00:04:27
Y el tamaño en alto 00:04:29
En píxeles 00:04:31
Y desde el punto 0,0 00:04:32
Que es arriba a la izquierda del monitor 00:04:34
Parecido 00:04:36
A lo que habéis visto en el ML 00:04:38
No, es en píxeles 00:04:40
¿En porcentaje se podrá? 00:04:44
No lo sé 00:04:46
A lo mejor hay otro método 00:04:46
Que te permite hacer 00:04:49
Claramente tú aquí, en vez de poner 100 00:04:51
Puedes preguntar al monitor 00:04:54
Cuánto es grande 00:04:56
Pillar el 50% de ese valor 00:04:57
Y se te crea 00:05:00
En el medio 00:05:01
Puedes hacer cosas así 00:05:02
No sé si ni siquiera se lo veremos 00:05:04
Por algún lado, si buscas, sí que hay forma de hacerlo 00:05:06
ContentPane 00:05:09
Si os acordáis 00:05:14
Era mi variable 00:05:16
Esta de aquí 00:05:19
Es un atributo 00:05:20
De la clase ejemplo que estoy creando 00:05:23
Que eso 00:05:25
Sostantialmente me va a hacer 00:05:27
De fondo de mi 00:05:29
De mi ventana 00:05:30
De mi frame 00:05:34
Entonces me creo un nuevo JPanel 00:05:36
Le defino, por ejemplo, un borde 00:05:39
¿Vale? Un borde lateral 00:05:42
O sea, creo que esto es izquierda, derecha, arriba, abajo 00:05:43
No lo sé, no me acuerdo, habría que verlo 00:05:48
¿Vale? 00:05:50
Y le puedo asociar un layout 00:05:51
¿Vale? Por ahora no sabemos lo que es un layout 00:05:53
Por ejemplo, aquí uso un border layout 00:05:55
Es como se disponen los objetos que ponga allí dentro 00:05:58
Si pongo un flow layout, son uno detrás de otro 00:06:02
Si pongo un grid layout, es 00:06:05
Me creo una 00:06:07
¿Qué es grid en español? 00:06:08
Una rejilla 00:06:14
¿Sí? 00:06:15
Es como una tabla 00:06:18
¿Sí? 00:06:19
Pongo cuantas columnas y cuantas filas 00:06:20
Y entonces cuando voy añadiendo los elementos 00:06:22
Se pondrán en estas celdas 00:06:24
Si pongo... Hay varios 00:06:26
¿Vale? Después se lo veremos 00:06:28
Si pongo null 00:06:29
Quiero decir que no quiero un 00:06:31
Layout definido 00:06:33
Anteriormente y soy yo que 00:06:36
Gestiono cada uno de los elementos 00:06:38
Poniendo donde 00:06:39
Aparece y el tamaño que aparece 00:06:41
¿Vale? Entonces puedo hacer esta cosa 00:06:44
Y luego si os fijáis 00:06:46
Aquí con este comandor aquí 00:06:47
Set content pane 00:06:49
Estoy diciendo, oye mira 00:06:50
Define 00:06:53
Que el fondo 00:06:56
El content pane 00:06:57
De la ventana 00:06:59
Es este objeto content pane 00:07:01
Que acabo de crear 00:07:04
Y que acabo de 00:07:05
Configurar en un cierto sentido 00:07:06
Oye, pregunta 00:07:10
¿Esto setContentPane 00:07:12
¿Sobre qué se llama? 00:07:14
¿Sobre qué objeto se está llamando? 00:07:15
Es decir, ¿sobre qué objeto? 00:07:23
¿Qué faltaría aquí? 00:07:30
Exacto, this 00:07:37
This 00:07:38
Como cuando haces this.nombre 00:07:42
Es igual a nombre 00:07:46
Aquí estás haciendo 00:07:46
This.setContentPanel 00:07:48
Porque yo soy un JFrame 00:07:50
Y sobre mi objeto 00:07:52
Porque este es un constructor 00:07:54
Sobre este objeto 00:07:55
Crea, llama el método 00:07:56
Configura el fondo 00:07:58
Y le pasas el fondo que acabas de crear 00:08:01
Entonces asocio 00:08:03
Este tablón 00:08:05
Este corcho 00:08:07
Que he creado con las cosas 00:08:10
Que he metido ahí entero 00:08:11
Y lo asocio como fondo de mi pantalla 00:08:12
De mi ventana 00:08:15
¿Se entiende más o menos? 00:08:16
¿No? 00:08:19
Esto, todo esto 00:08:20
¿Qué objeto es? 00:08:25
Ejemplo, ¿qué objeto es? 00:08:28
Es un J 00:08:30
Frame 00:08:32
¿Vale? Porque extiende J frame 00:08:34
¿Y qué es J frame? 00:08:37
La ventana, la pared 00:08:39
¿Vale? Ahora sobre la pared 00:08:41
Yo tengo que poner cosas 00:08:43
Y la primera cosa que pongo para organizarlos 00:08:44
Es un fondo, es un corcho 00:08:47
Sobre el que luego podré pegar las cosas 00:08:49
Y ese es un 00:08:51
Panel 00:08:52
Es este panel de aquí 00:08:54
Este 00:08:56
Jpanel 00:08:57
Entonces cuando creo un nuevo 00:08:59
Frame 00:09:02
Lo que hago es definir cosas para el frame 00:09:03
Luego defino su fondo 00:09:07
Que es creo un nuevo panel 00:09:09
Le pongo los bordes 00:09:11
Le pongo como se van a poner las cosas allí 00:09:13
Le pongo un color de fondo 00:09:15
Le pongo lo que sea 00:09:17
De este panel 00:09:18
Que da al fondo 00:09:20
Y luego digo que, oye, JFrame 00:09:21
Tu fondo 00:09:24
Es esta cosa que acabo de crear 00:09:25
Si, pero 00:09:28
Podría 00:09:35
Preguntar al JFrame de darme 00:09:37
El objeto que él tiene 00:09:39
Ahora mismo como fondo 00:09:41
Y luego usar eso 00:09:43
Pero que me asegura 00:09:45
Que lo que tiene como fondo es un JFrame 00:09:47
Seguro, vale 00:09:49
Entonces la idea es que yo lo tengo aquí 00:09:50
Me lo he creado yo 00:09:53
Como diciendo, este es el fondo de mi pantalla 00:09:55
De mi ventana 00:09:57
Y luego lo uso para asociarlo allí 00:09:58
¿Vale? 00:10:01
Es práctica estándar 00:10:01
¿Cómo? 00:10:04
No, es un constructor 00:10:07
Esto 00:10:09
Ejemplo 00:10:14
Aquí en este ejemplo es ejemplo 00:10:16
El otro se llama ejemplo GUI 00:10:22
Allí tendré que hacer public ejemplo GUI 00:10:23
¿Vale? Pero aquí es la casa ejemplo 00:10:26
¿Vale? 00:10:28
Lo vamos a hacer de todas formas 00:10:28
Esto más o menos se entiende 00:10:30
Vamos a hacerlo paso por paso 00:10:32
Y a ver que pasa 00:10:34
Ahí 00:10:36
Entonces 00:10:41
Vamos a hacer lo mismo 00:10:42
Esto era 00:10:45
Antes no lo había puesto 00:10:46
Entonces lo pongo ahora aquí 00:10:49
Tengo un Jpanel 00:10:50
Que será content 00:10:52
Por ejemplo 00:10:54
O fondo 00:10:55
Que es igual a nada 00:10:57
¿Vale? 00:11:01
Se enfada porque, claro, tengo que importarlo 00:11:02
¿Vale? 00:11:06
Tengo que importar también el GFANEL, ahora lo tengo 00:11:07
En el run me crea 00:11:09
Un objeto y me lo hace visible 00:11:12
¿Vale? 00:11:14
Pero yo todavía lo que no he hecho 00:11:15
Crear un constructor de este señor de aquí 00:11:19
Por lo tanto voy a crear un constructor 00:11:22
De este señor de aquí 00:11:24
¿Vale? Entonces aquí, por ejemplo 00:11:25
Public 00:11:27
Ejemplo 00:11:28
Sin parámetros 00:11:30
Podría ponerlo si quiero 00:11:36
Primero es super 00:11:37
Voy a crear 00:11:39
Todo lo que crea un JFrame 00:11:42
Que es una cosa que no he hecho yo 00:11:44
Es algo que ha importado y por lo tanto 00:11:46
No sé que hará, pero lo hace 00:11:48
Será todo lo que es necesario para crear 00:11:50
El cuadradito eso que hemos visto antes 00:11:52
Pero eso es algo que yo he pillado 00:11:54
Prestado desde la API de Java 00:11:56
No lo hago yo directamente 00:11:58
Yo simplemente una vez pillado ese objeto 00:11:59
Lo configuro para que 00:12:01
Se modifique como yo quiero 00:12:04
Con los métodos que me proporciona 00:12:05
El JFrame 00:12:08
Y entonces vamos a hacer 00:12:09
Algunas cosas, por ejemplo 00:12:12
This.set 00:12:13
Que era esto 00:12:18
Default 00:12:19
SetDefaultCloseOperation 00:12:21
Que pasa cuando se cierra 00:12:28
Cual es la operación por default 00:12:30
Tu puedes hacer otras operaciones pero 00:12:32
Cual es la operación por defecto 00:12:34
¿Vale? Y fijaos que pilla un entero 00:12:36
¿Vale? Entonces aquí 00:12:38
Habrá varias opciones 00:12:42
Que yo puedo poner 00:12:44
Que son numeritos, 1, 2, 3, 4, 5 00:12:46
¿Vale? Pero para 00:12:48
Que yo no me tenga que acordar el 7 que hacía 00:12:49
El 9 que hacía, pues 00:12:52
La clase 00:12:53
En JFrame 00:12:55
Me proporciona 00:12:58
Unas cuantas 00:13:00
Constantes que tienen un nombre 00:13:01
Para saber que si yo uso ese nombre 00:13:04
Me dará el valor asociado 00:13:05
Que hace esa operación 00:13:07
En particular quiero el exit on close 00:13:08
Como yo soy 00:13:11
Un jframe, no hace falta que haga 00:13:15
Jframe punto, yo soy esto 00:13:17
Como aquí no hace falta 00:13:19
Este dis 00:13:22
Porque en realidad yo soy un jframe 00:13:23
Entonces lo puedo llamar directamente 00:13:25
Este método, como si este método estuviera en mi clase 00:13:28
Porque estendo jframe 00:13:30
Vale 00:13:33
Entonces con esto 00:13:35
Lo que he logrado 00:13:36
Es que si ahora lanzo 00:13:38
Mi ventanita 00:13:40
¿Os acordáis que antes 00:13:46
Cuando la cerraba esto se quedaba encendido? 00:13:47
Ahora cuando la cerro 00:13:51
Esto se acaba 00:13:52
Porque la operación por defecto al cerrar la cosa es 00:13:53
Salir 00:13:56
Exit 00:13:57
Ok, sigue adelante 00:13:59
Otra opción 00:14:02
Hagamos más grande nuestra 00:14:03
Ventana, que cuando abra 00:14:05
Pues en vez de ser pequeñita arriba 00:14:07
Pues tenga otro tamaño 00:14:09
¿Vale? Esto lo puede hacer 00:14:11
Haciendo set bones 00:14:13
¿Vale? Que me dice 00:14:14
¿Cuánto a la izquierda la quiero mover? 00:14:16
Pongamos 200 píxeles 00:14:19
¿Cuánto abajo la quiero poner? 00:14:21
Pongamos 50 píxeles 00:14:23
¿Cuánto grande es? 00:14:25
Pongamos 100 píxeles 00:14:27
¿Y cuánto alto es? 00:14:28
100 píxeles 00:14:30
Esto es el punto 00:14:31
Donde empieza 00:14:35
Esto es el tamaño de la ventana 00:14:37
¿Vale? 00:14:40
Entonces si yo lanzo ahora 00:14:41
En vez de aparecerme aquí pequeñita 00:14:43
Pues me ha aparecido aquí 00:14:45
Me ha aparecido a 250 píxeles 00:14:46
200,50 00:14:50
Y el tamaño es 100% 00:14:53
Tened en cuenta que como los píxeles 00:14:56
No son iguales en ancho 00:14:58
En alto 00:15:00
Pues esto es 100% 00:15:02
Pero no es un cuadrado 00:15:04
¿Vale? 00:15:05
Debería ser un cuadrado, aunque no me esté equivocando yo 00:15:07
Mucho, ¿vale? 00:15:10
Si claramente esto lo hago más grande 00:15:11
¿Sí? 00:15:14
¿Dudas? 00:15:26
Entonces, fijaos que estos son 00:15:32
Métodos de qué clase 00:15:34
JFrame, ¿vale? 00:15:35
JFrame, Java 00:15:43
Entonces, si yo que soy buen estudiante 00:15:44
Me voy a JFrame 00:15:47
Y me miro todo lo que puedo hacer sobre un GFrame 00:15:48
Que son estas cosas de aquí 00:15:53
Más esta cosa aquí 00:15:55
Heridadas de otras cosillas que están por ahí 00:15:58
¿Vale? 00:16:02
Y en particular nosotros hemos usado el set default close operation 00:16:04
¿Vale? 00:16:12
Y hemos visto 00:16:14
Que tenemos algunos 00:16:18
Por ejemplo 00:16:21
El exit on close es un static int 00:16:24
Que puedo utilizar 00:16:26
Para que 00:16:28
La aplicación sale 00:16:30
Cuando acabo 00:16:32
La ventana, cuando pago la ventana 00:16:34
Entonces aquí 00:16:36
Viene toda la información que necesite 00:16:37
Tened en cuenta que un frame 00:16:40
Es también un componente, es también una ventana 00:16:42
O sea que está heredando 00:16:44
Desde otras clases que están por allí 00:16:46
Fijaos que estas son clases 00:16:48
AVT 00:16:50
¿Os acordáis que decíamos que había tres como 00:16:51
Grandes paquetes? Nosotros estamos viendo swing 00:16:53
Que es una extensión de AVT 00:16:56
AWT es como 00:16:58
El paquete más básico 00:17:00
¿Vale? Donde están por ejemplo 00:17:02
El frame, donde está la ventana 00:17:04
Donde está el container, el componente 00:17:06
Son las cosas más básicas 00:17:08
El swing como que 00:17:09
Extende un poco estas cosas 00:17:11
Y las hace un poquito más potentes 00:17:13
Se puede hacer un poquito más de cosas 00:17:15
Añade métodos 00:17:17
Y funcionalidades un poquito más 00:17:19
Interesantes, vale 00:17:21
Entonces 00:17:22
Vuelvo aquí 00:17:25
Entonces, ahora vamos a empezar a trabajar 00:17:27
Con esto, con el jPanel 00:17:29
Vale, entonces lo que me hago 00:17:32
Es, vale, fondo 00:17:33
Es igual a new jPanel 00:17:35
Creo un nuevo JPanel 00:17:37
Ahora estoy trabajando con otra 00:17:40
JPanel 00:17:42
Con otra clase 00:17:45
Esta clase aquí que es JPanel 00:17:48
Entonces si quiero saber 00:17:50
Que puede hacer JPanel 00:17:52
Me voy a su API 00:17:53
Y veo todos los métodos que tiene 00:17:55
Y que hereda también es un 00:17:57
JComponent, que es un container 00:18:00
Que es también un component 00:18:02
Que es un object, etc 00:18:03
Entonces, todos estos son métodos que puedo utilizar 00:18:05
¿Vale? 00:18:08
En particular, lo que puedo hacer 00:18:11
Es darle un tamaño 00:18:13
Aquí usa setBorder 00:18:15
setBorder 00:18:19
A ver donde está por aquí 00:18:21
Si lo encuentro 00:18:23
Es aquí 00:18:24
Es una cosa que proviene 00:18:30
Que deriva desde jComponent 00:18:32
O sea, todos los jComponent tendrán este setBorder 00:18:34
Si voy a mirar 00:18:37
Que hace, me pilla un border 00:18:38
O me pilla una serie de numeritos 00:18:40
Y lo que hace es setar los bordes del componente 00:18:42
Bla, bla, bla, y te lo explica 00:18:45
¿Vale? Entonces cada una de estas cosas 00:18:46
Me lo puede definir 00:18:48
Si, lo voy a hacer 00:18:50
Yo creo que estos son los bordes 00:18:52
Que te deja alrededor 00:18:54
De este panel, ¿vale? 00:18:56
Entonces yo haría fondo.setborder 00:18:58
Aquí 00:19:03
¿Qué ponía? 00:19:04
10, 5, 5, 5 00:19:05
Estos son 00:19:07
Los borders a todos lados 00:19:11
¿Vale? Esto se enfada 00:19:13
¿Son los dos? 00:19:15
Vamos a ver 00:19:21
Donde me equivoco 00:19:22
Ah, porque claro, le tengo que poner dentro 00:19:23
Efectivamente, no me he acordado 00:19:31
Que le tengo que poner dentro un border 00:19:33
¿Vale? Entonces tengo que hacer un new 00:19:35
Por ejemplo, empty border 00:19:37
Que es un tipo de border 00:19:39
Es un objeto que 00:19:42
Define 00:19:44
Un borde 00:19:46
Y le pongo dentro 00:19:47
El borde que yo quiero 00:19:50
Este de aquí lo tengo que importar 00:19:51
¿Vale? 00:19:54
No lo sé, ¿vale? 00:19:56
Esto luego 00:19:57
Lo que tenéis que hacer 00:19:58
Sostancialmente es experimentar y pensar 00:20:01
¿Qué quiero hacer? Quiero añadir un borde, ¿vale? 00:20:03
¿Cómo lo hago? Buscas borde, ves la posibilidad 00:20:05
De añadir bordes a los componentes 00:20:08
Vais a mirar como es, lo probáis 00:20:09
Y veis que pasa, porque aquí 00:20:12
Hay un mogollón de opciones 00:20:13
Que hay, como cuando lo habéis visto 00:20:16
Con HTML y cosas así 00:20:17
Hay un montón de atributos, un montón de opciones 00:20:19
Y lo que tengo que hacer es 00:20:22
Tener una idea de lo que voy a hacer 00:20:23
Y buscar como se hace más o menos 00:20:26
A lo mejor 00:20:28
En vez de esto 00:20:29
Que se ve menos 00:20:31
Lo que podemos intentar hacer es 00:20:32
Cambiarle el color del fondo 00:20:35
Entonces 00:20:37
Debería haber un fondo 00:20:39
Punto set background 00:20:41
Punto set background 00:20:43
Si os fijáis 00:20:52
El set background 00:20:53
Recibe como objeto 00:20:55
Un color 00:20:58
¿Vale? Como parámetro 00:20:58
Entonces yo selecciono esto 00:21:01
Y ahora tengo que ponerle 00:21:03
Un color 00:21:05
¿Cómo le pongo un color? 00:21:06
Pues new color 00:21:09
Y por ejemplo 00:21:10
Las coordenadas RGB 00:21:13
Cuanto rojo 00:21:15
Cuanto azul 00:21:17
Por ejemplo, le pongo 00:21:18
255 de rojo 00:21:20
0 de azul 00:21:23
Y 0 de verde 00:21:24
Este también es una clase 00:21:25
Que está por allí, que define un color 00:21:29
De AVT 00:21:30
Y entonces la importo 00:21:32
¿Vale? 00:21:35
Y ahora aquí 00:21:37
Este background 00:21:38
Este fondo 00:21:41
Debería ser rojo 00:21:42
¿Vale? 00:21:44
Entonces lanzo 00:21:45
Mi programa 00:21:47
Veis que rojo intenso 00:21:48
¿Por qué? 00:21:52
Porque yo tengo un frame 00:21:58
Y tengo un objeto panel 00:22:00
Pero todavía no le he dicho a este frame 00:22:02
Tu fondo es este panel 00:22:05
Entonces no se ve este panel 00:22:06
Este panel está por ahí 00:22:09
Un objeto que no tiene relación con la 00:22:10
Ventana que estoy creando 00:22:12
¿Vale? Entonces ahora 00:22:14
Le tengo que decir 00:22:16
Oye, escúchame 00:22:19
This, vale, o sea 00:22:20
JFrame que estoy creando 00:22:22
Pues set 00:22:25
Le pongo el this punto 00:22:26
Porque así me sale 00:22:29
Set content panel 00:22:30
Este aquí 00:22:33
Que tiene dentro un container 00:22:36
Un JPanel 00:22:41
Hereda del container 00:22:43
Por lo tanto es un container 00:22:44
Y le pongo dentro 00:22:46
fondo 00:22:48
y entonces ahora 00:22:48
rojo 00:22:52
y ahora lo que yo puedo hacer 00:22:56
en este panel lo poner cosas 00:23:01
y entonces cuando luego le digo 00:23:03
eres el fondo de esta 00:23:05
ventana, pues me aparecerán 00:23:06
en la ventana 00:23:09
y esto es más o menos como funciona 00:23:10
yo me creo 00:23:13
panel, le pego botones 00:23:14
le pego radio button, le pego 00:23:17
Áreas de texto, le pego etiquetas 00:23:19
Y luego se lo pego al fondo 00:23:21
De una ventana y le digo 00:23:23
Enséñame la ventana, y la ventana aparece 00:23:24
Si quiero estructurar esto 00:23:26
Puedo estructurarlo más 00:23:29
O menos, diciendo 00:23:30
Oye mira, créame otro panel 00:23:32
Este panel pónmelo aquí, aquí pónme los botones 00:23:34
Aquí pónme otro panel con solo 00:23:36
Los radio button, aquí pónme 00:23:38
No lo sé, vale 00:23:40
Vamos a hacer algunos ejemplos, jugamos un poco con ello 00:23:41
Luego jugaréis vosotros 00:23:44
Aquí no me acuerdo si utilizaba otra cosa 00:23:46
Aquí usa 00:23:49
Le define también un 00:23:50
Layout, vale 00:23:53
Entonces lo ponemos nosotros también 00:23:55
Fondo.setLayout 00:23:57
Y lo que hacemos es le ponemos un null 00:24:00
Con eso quiere decir 00:24:03
Que no hay un layout por defecto 00:24:05
Y las cosas que pongo yo 00:24:08
Tendré que posicionarlas yo 00:24:09
Diciendo donde aparecen en este panel 00:24:11
Y ahora después vamos a añadir algo 00:24:13
Y vamos a ver que pasa 00:24:18
¿Sí? 00:24:18
¿Dudas hasta aquí? 00:24:20
Bueno 00:24:24
Lo que hemos hecho es esto 00:24:24
Una ventana con un contenedor al fondo 00:24:28
¿Qué tamaño tiene el contenedor? 00:24:31
Pues nos lo hemos dado 00:24:34
Lo más probable es que tenga 00:24:35
El tamaño de la ventana misma 00:24:37
¿Sí? 00:24:40
Si le pongo un tamaño más pequeño 00:24:41
Pues a lo mejor hace cosas raras 00:24:43
Eh, dejadme probar 00:24:45
A ver que hace el 00:24:47
Fondo.set 00:24:48
Border 00:24:52
New empty border 00:24:53
5, 5, 5, 5 00:24:57
No veo cambios 00:25:00
Bueno, esto a lo mejor se verá en otro contexto 00:25:26
Vale, por ahora 00:25:28
Realmente esto es para definir 00:25:29
Bordes, posiblemente tiene más sentido 00:25:33
Cuando no es el fondo de la ventana 00:25:35
Sino que haya otros elementos dentro 00:25:36
Y posiblemente me crea unos bordes laterales 00:25:39
Para distanciar entre ellos 00:25:41
Los objetos que están ahí dentro 00:25:43
Pues por ahora 00:25:44
Lo dejamos ahí 00:25:46
Sigo adelante 00:25:48
Ahora lo que vamos a hacer es 00:25:51
Añadamos un contenedor 00:25:54
De segundo nivel 00:25:56
Dentro de este panel 00:25:57
Que es el fondo 00:26:00
Me creo un cuadrado aquí 00:26:02
Que es una forma de organizar otros elementos 00:26:04
Por ejemplo, algunos elementos los pondré aquí 00:26:09
Referenciándome al fondo de la ventana 00:26:12
Y otros en vez irán en esta área aquí 00:26:16
Por ejemplo, aquí pongo todos los botones 00:26:19
Y aquí pongo todas las etiquetas, que se yo 00:26:20
Luego, la idea es que vosotros antes en un papel o en Paint 00:26:22
Os dibujéis el layout que queréis 00:26:27
O sea, la interfaz que queréis 00:26:30
Y luego la vais organizando 00:26:32
Haciendo zonas 00:26:34
Haciendo varios contenedores 00:26:36
Uno dentro de otro, etc, etc 00:26:37
Voy a añadir otro 00:26:39
¿Qué es este de aquí? 00:26:41
Otro Jpanel 00:26:43
No es el Jpanel del fondo 00:26:44
Sino es un Jpanel que está dentro de este Jpanel 00:26:47
Es como si a mi pared 00:26:50
El Jpanel del fondo 00:26:53
Le pego un corcho 00:26:54
Y luego pondré las cosas 00:26:56
O en la pared, pegando póster a la pared 00:26:58
O en el corcho 00:27:01
Pegando cosas al coche 00:27:02
¿Sí? 00:27:03
¿Cómo se hace? 00:27:05
Sí 00:27:07
Me creo otro Jpanel 00:27:08
Le doy las características 00:27:11
Que yo quiero y cosas por el estilo 00:27:13
Aquí lo hace con los bounds 00:27:15
Y luego después 00:27:17
Lo que hago 00:27:19
Es añadir el contenedor 00:27:20
Al otro contenedor 00:27:23
¿Sí? 00:27:25
Esta es la operación de add 00:27:29
Que sustancialmente me añade 00:27:30
Componentes 00:27:32
A otros componentes 00:27:34
Como el Jpanel 00:27:36
Es un contenedor, puede contener 00:27:39
Componentes y yo puedo pillar un componente 00:27:41
Y decir, añádelo, añádelo 00:27:43
Si tiene un layout 00:27:45
Me lo añadirá según el layout 00:27:47
Por ejemplo, el layout, el flow layout 00:27:49
Que dice uno detrás de otro 00:27:51
Pues me tendrá el primero aquí, donde acaba el segundo 00:27:53
Donde acaba el tercero, donde acaba el cuarto 00:27:55
Si en vez no tiene layout 00:27:57
Pues tendré que definirle yo 00:28:00
donde aparece esto. Lo añado al panel porque content pane es un panel y luego cuando he 00:28:01
construido todo le digo y tú panel del fondo eres el fondo de mi edad, entonces se ve todo. 00:28:18
Pero aquí estoy trabajando con los panel no con el frame. Vamos a verlo. Entonces, 00:28:25
creo otro panel vale fijaos que estoy aquí todo está siempre trabajando dentro del constructor 00:28:32
cuando cuando construyó un ejemplo gogo y lo que estoy haciendo es crearme todo lo que hace falta 00:28:38
para esta interfaz y esto lo hago como último antes me lo construyó y luego digo y tú eres el 00:28:45
fondo de esta ventana entonces se ve bueno y luego después haré visible la ventana pero me 00:28:53
Dejo esto como último paso 00:29:00
Entonces, aquí lo que hago es 00:29:02
Construirme un contenedor de 00:29:05
Segundo nivel, jPanel 00:29:06
Segundo 00:29:09
Por ejemplo, es igual a 00:29:10
New jPanel 00:29:12
Para que se vea 00:29:14
Segundo punto 00:29:19
Background 00:29:20
Background 00:29:22
Color 00:29:28
Y con 00:29:29
New color 00:29:31
Lo hacemos azul 00:29:33
0 de rojo 00:29:34
250 RGB 00:29:36
Bueno, hemos hecho verde 00:29:38
¿Cómo? 00:29:40
Set, set 00:29:47
¿Sí? 00:29:47
Entonces, aquí lo que hacemos es 00:29:51
Ponerle color verde 00:29:53
De esta forma ahora veremos que la zona que es roja 00:29:55
Es el panel del fondo 00:29:57
Y la zona que es verde 00:29:59
Es el panel segundo 00:30:01
El panel que le he pegado encima 00:30:03
Si yo le doy 00:30:05
Play ahora, ¿qué veo? 00:30:07
rojo, que no he hecho todavía nada 00:30:09
vale, vale, sigamos adelante 00:30:13
primero 00:30:15
le tengo que dar 00:30:16
un tamaño, vale 00:30:19
entonces le digo, segundo punto 00:30:21
set bones 00:30:23
y le digo que tú vas a 00:30:25
50, 100 00:30:30
100 00:30:33
es decir 00:30:35
estás en posición 00:30:37
50X, 50Y 00:30:39
Con tamaño 100 00:30:42
Y tamaño 100 00:30:44
¿Con respecto a qué? 00:30:45
No lo sé 00:30:48
Con respecto a mi origen 00:30:48
¿Pero cuál es su origen? 00:30:51
No lo sé, por ahora es un señor que 00:30:53
Está en el aire 00:30:55
En algún lado del hip 00:30:56
¿Cómo asocio este segundo 00:30:58
Al fondo? 00:31:00
Añade 00:31:14
Al fondo 00:31:15
Este objeto 00:31:16
Ahora su padre es el fondo 00:31:17
Entonces esto se supone 00:31:19
Que será desde donde empieza 00:31:22
El panel fondo 00:31:24
Pues 50-50 y que sea 00:31:25
Grando 100-100 00:31:27
Aquí está 00:31:28
Entonces ahora tengo 00:31:43
Dos panel 00:31:45
Uno que me hace de fondo 00:31:46
Y uno que está encima 00:31:48
Que está allí 00:31:50
La idea es que no es para hacer colorines 00:31:52
Pero la idea es 00:31:55
Para que veáis la diferente 00:31:58
Zonas, y la idea es que 00:31:59
Ahora, si añado algo al fondo 00:32:02
Lo estaré añadiendo en la sección roja 00:32:03
Si añado algo al verde, lo estaré añadiendo aquí 00:32:05
Entonces, yo puedo hacer 00:32:08
Secciones, por ejemplo, si quiero dejar 00:32:10
Todos los botones aquí a la derecha 00:32:12
Lo que puedo hacer es 00:32:14
De forma 00:32:16
Sencilla 00:32:22
Puedes poner 00:32:24
150, 50 00:32:26
100, 1000 00:32:28
más 00:32:31
ciento 00:32:48
más 00:32:59
tres mil de ancho 00:33:02
si tienes el rango noventa 00:33:06
bajamos novecientos 00:33:09
más o menos 00:33:10
la idea es que ahora yo me he 00:33:16
me he pillado esta sección de aquí 00:33:20
y si ahora todos los 00:33:23
botones que añado 00:33:25
le pongo con un layout 00:33:26
que les añade en vertical 00:33:29
y los pongo aquí 00:33:30
Pues me lo estará poniendo todos aquí 00:33:32
Y todos los botones vienen en esta área aquí 00:33:34
Y aquí pongo otras cosas 00:33:36
Por ejemplo 00:33:38
¿Sí? 00:33:39
Sale fuera 00:33:41
Sí 00:33:45
Sí está dentro 00:33:47
La idea es que si me estoy haciendo 00:33:52
Muchas veces lo que hacemos es que 00:33:54
Le quitamos el set resizable 00:33:56
Tú tienes tu 00:33:57
Tu ventana 00:33:59
Pensada para que las cosas estén bonitas 00:34:01
Le quitas el set resizable 00:34:03
De esta forma la gente no te hace así 00:34:04
Y te la robo y te la estropea 00:34:06
Luego si lo haces bien, bien, bien 00:34:08
Cuando la haces resize 00:34:10
Recolocas todo 00:34:13
Donde tiene que estar 00:34:14
Que a lo mejor es solo recolocar el panel 00:34:16
Porque luego dentro del panel todo está bien hecho 00:34:18
El panel no lo resize 00:34:21
La ventana que haces resize 00:34:23
¿Vale? 00:34:25
Y aquí entran todos los problemas 00:34:26
Que probablemente habéis tenido también en HTML 00:34:28
De la resolución 00:34:30
Que mi monitor tiene alta resolución 00:34:32
Entonces sale pequeño 00:34:34
Si lo pones en un 800x800 sale enorme 00:34:35
Como hago para gestionar 00:34:37
Que esto se vea bien 00:34:39
En todos los ordenadores 00:34:41
Pero eso ya de segundo 00:34:42
La idea es esto 00:34:43
Está claro que luego si yo quito esto 00:34:47
Mi zona sigue 00:34:50
Estando definida 00:35:09
Pero no se ve que está definida 00:35:10
Yo tengo 00:35:13
El fondo y tengo aquí un área 00:35:14
Donde podré colocar las cosas 00:35:17
para gestión, pero es una 00:35:18
arena interna mía, no hay que tener que 00:35:20
ser verde o naranja o cosas así 00:35:22
esto parece un único lienzo 00:35:24
en realidad está organizado como yo quiero 00:35:26
esto del background puede ser 00:35:28
útil al principio cuando intento 00:35:37
ver como van las cosas para saber que estoy 00:35:39
haciendo, como se está moviendo y pillar un poco 00:35:41
como está el set, está también el get 00:35:43
en vez de hacer esto por ejemplo 00:35:47
habría podido pillar los 00:35:49
Get de los 00:35:51
Márgenes 00:35:52
De mi padre 00:35:54
Del disk 00:35:55
Para que lo haga en base 00:35:58
A cuanto es grande la ventana 00:36:00
Se puede 00:36:02
Complicar cuanto queráis 00:36:04
Por ahora nos mantenemos en lo sencillo 00:36:06
Vale, entonces 00:36:09
He añadido esto 00:36:10
Aquí se añade 00:36:12
¿Qué se añade? 00:36:15
Ah, no, he ido para atrás 00:36:17
Entonces cuando hace las ventanas 00:36:18
Tú puedes hacer lo que te da la gana 00:36:20
Y combinarlos como te da la gana 00:36:34
Pero tú siempre 00:36:36
Añades un componente 00:36:37
A lo que está detrás 00:36:40
Tú añades 00:36:42
Un flyer 00:36:44
Al corcho, y luego el corcho a la pared 00:36:46
No añades la pared 00:36:48
Al flyer 00:36:50
No va por detrás 00:36:51
¿Sí? 00:36:53
La idea es que tú en tu imagen tienes que crearte las secciones 00:36:55
Y luego las secciones las vas 00:36:58
Rellenando con los objetos 00:36:59
Ahora rellenamos algún componente para que se vea algo 00:37:01
Y luego después eso 00:37:03
Lo combinas con 00:37:05
Los varios paneles 00:37:07
Ok, estamos aquí, vale 00:37:09
Hemos hecho esto 00:37:13
Ahora lo que podemos hacer es decir 00:37:14
Vale, vamos a añadir algo 00:37:17
Vale, por ejemplo 00:37:19
Al contenedor principal, al fondo 00:37:21
Le vamos a añadir una etiqueta 00:37:23
Un texto pequeño 00:37:25
Vale, que no sea editable 00:37:27
Entonces, ¿cómo lo hago? 00:37:28
Pues al fondo 00:37:37
Aquí por ejemplo 00:37:40
Fondo.add 00:37:44
Y aquí le tengo que añadir algo 00:37:49
Que le añado 00:37:52
Por ejemplo un JLabel 00:37:55
JLabel 00:37:56
Etiqueta 00:37:58
Uno 00:38:02
Es igual a new 00:38:03
JLabel 00:38:06
Y creo que pilla un texto 00:38:07
Una etiqueta 00:38:11
Elabel 00:38:14
Añado 00:38:22
Etc1 00:38:24
A ver, ¿qué pasa? 00:38:27
¿Dónde está la etiqueta? 00:38:36
Ni idea 00:38:38
¿Por qué? 00:38:39
Porque probablemente le tengo que aceptar 00:38:43
Las configuraciones de dónde está esta etiqueta 00:38:45
¿Vale? 00:38:48
Aquí 00:38:50
Una vez que he creado la etiqueta 00:38:51
Le tendré que decir 00:38:56
Donde aparece esta etiqueta 00:38:58
¿Por qué? 00:39:00
Porque mi layout es null 00:39:02
Si mi layout es null 00:39:04
Soy yo que tengo que decidir 00:39:07
Donde van cada uno de los componentes 00:39:09
Que pongo 00:39:11
Si no hubiese sido null 00:39:11
Y hubiese utilizado otro layout 00:39:13
De esto por ejemplo que me pone 00:39:16
Uno al lado de otro 00:39:18
Pues me lo habría puesto él 00:39:18
Automáticamente en algún lado 00:39:19
Pero no lo habría podido mover yo 00:39:20
Es un poco la idea 00:39:23
O lo dejo hacer a él 00:39:27
Y él se organiza 00:39:28
O lo organizo yo, pero entonces lo tengo que organizar 00:39:30
Me falta un setbounce 00:39:33
¿Vale? Entonces 00:39:35
La etiqueta 00:39:37
Antes de añadirla 00:39:42
Le digo 00:39:44
Etiqueta1.setbounce 00:39:45
Que se yo 00:39:55
hagámosla a 100 00:39:59
100 00:40:03
100 00:40:04
la he puesto a distancia 00:40:05
100, 100 de probablemente esto 00:40:18
cada vez hace una cosa distinta 00:40:21
pero bueno, y aquí 00:40:22
tiene un tamaño, si yo quisiera 00:40:24
por ejemplo, podría ver 00:40:26
cuánto 00:40:28
ocupa esta etiqueta 00:40:30
pues etc1.set 00:40:32
background 00:40:35
De new color 00:40:36
Lo hacemos azul 00:40:39
255 00:40:45
Y no me lo pone 00:40:47
La etiqueta no se le ve el background 00:40:52
No se porque 00:40:55
Posible que el background de la etiqueta 00:40:56
No lo pinte, vale 00:41:05
Esto luego entramos en un mundo como 00:41:06
El de 00:41:09
El de HTML 00:41:10
En el que algunos atributos funcionan 00:41:12
Algunos de repente no 00:41:15
Entonces esto tenéis que probar vosotros 00:41:16
Como 00:41:19
Cuales funciones 00:41:21
Porque como muchos de estos 00:41:23
Derivan del hecho que soy un componente 00:41:26
Y el componente tiene el set background 00:41:28
Pero a lo mejor dentro de la etiqueta 00:41:30
El set background no hace lo mismo 00:41:33
Que hace en un panel 00:41:34
No hace lo mismo que hace en otro componente 00:41:36
Entonces esto lo tenéis que experimentar 00:41:39
Vosotros 00:41:41
Vale 00:41:42
Esto lo quitamos, que no funciona 00:41:44
Además de una etiqueta vamos a añadir 00:41:46
Un botón 00:41:50
Pero el botón añadiamolo 00:41:52
Al contenedor secundario 00:41:54
Porque hemos dicho que aquí queremos poner los botones 00:41:56
¿Vale? ¿Cómo se añade un botón? 00:41:58
Pues con el JButton 00:42:00
Me creo un botón 00:42:01
Le pongo el título que tiene que poner el botón 00:42:04
Le pongo el tamaño que tiene que tener 00:42:06
Este botón, ¿vale? 00:42:08
Con los bounds y luego lo añado 00:42:10
Al contenedor de segundo nivel 00:42:12
No al contenedor del primero 00:42:13
¿Vale? 00:42:15
Entonces 00:42:17
Aquí 00:42:18
Hago un jbutton 00:42:23
Beton1 00:42:28
Es igual a new 00:42:31
jbutton 00:42:33
De pulsa 00:42:35
Esto claramente es 00:42:37
Reportar 00:42:43
A este punto le digo que 00:42:45
Bt1.setBones 00:42:47
Y pongamos que es una cosa 00:42:51
50, 50, 50, 50 00:42:55
Hagamos 0, 0 00:42:58
¿Vale? 00:42:59
Porque ahora esto de aquí lo añado 00:43:03
A la franja esa verde 00:43:05
¿Vale? 00:43:07
Entonces aref 00:43:08
Segundo.add 00:43:10
Aquí está 00:43:14
Claramente mi botón no hace nada 00:43:21
Porque todavía no sé cómo hacerle hacer algo 00:43:29
Ahora, yo puedo poner todos los botones que quiero aquí 00:43:32
O aquí, o donde quiero yo 00:43:37
La idea es que ahora voy construyendo mis paneles 00:43:41
Hasta que en un cierto momento, pues, tenga sentido 00:43:45
¿Vale? La interfaz 00:43:49
Yo tendré en papel 00:43:51
Quiero una interfaz 00:43:53
Que tenga un panel 00:43:57
Que aquí ponga nombre 00:43:58
Y luego un botón, apellido 00:44:00
Y luego un botón, y aquí un área de texto 00:44:02
Donde puedo escribir varias cosas 00:44:04
Cuando la tengo así 00:44:07
Pues me pienso 00:44:08
Si esto hay que dividirlo en secciones 00:44:10
A lo mejor quiero que esta sea un 00:44:12
Jpanel, y que esto sea otro 00:44:14
Y cosas por el estilo, y cuando ya lo he hecho 00:44:16
Pues 00:44:18
Lo voy programando 00:44:19
Y esto por un par de sesiones 00:44:21
¿Vale? 00:44:25
Porque hoy en día nadie lo hace así 00:44:27
Pero vosotros sí 00:44:28
Porque hay que ser 00:44:30
Masoquistas 00:44:33
Dudas hasta aquí 00:44:34
¿Vale? 00:44:37
¿Qué pasa si en vez de añadirlo 00:44:38
Aquí lo añado aquí? 00:44:40
Aparece aquí 00:44:43
¿Vale? 00:44:50
Porque en vez de crearse aquí dentro 00:44:53
Lo he añadido a rojo 00:44:56
En posición 0, 0, 100, 100 00:44:58
Pues aparece aquí 00:45:00
Vale, entonces, ¿qué componentes 00:45:01
De jerarquía hay por aquí? 00:45:14
Vale, aquí os da una imagen 00:45:16
De lo que hay 00:45:18
Vale, entonces, todos son componentes 00:45:20
De AVT, supongo 00:45:23
Que son contenedores 00:45:24
Dentro de aquí hay la ventana 00:45:26
O los paneles, con cosas por el estilo 00:45:28
Y en particular están los 00:45:30
J-Component, que derivan de container 00:45:32
Esta es la parte de 00:45:34
Swing 00:45:36
Y un G-Component 00:45:38
Pues, ¿qué puede ser? 00:45:40
Todas estas cosas de aquí 00:45:42
Un panel 00:45:43
Un panel que tenga la posibilidad de hacer scroll 00:45:45
Un panel que tenga los tabs 00:45:48
Arriba 00:45:51
Un... 00:45:52
Distintos tipos de panel 00:45:54
Ni me lo sé, ¿vale? 00:45:55
Luego están las etiquetas 00:45:58
Las combo box 00:46:00
Para hacer la barra de menú 00:46:01
Para hacer una barra de progreso 00:46:04
De plan estoy cargando un fichero 00:46:08
Para hacer un slider 00:46:10
Para hacer un menú de pop-up 00:46:13
Para elegir un fichero 00:46:16
Para hacer una lista 00:46:18
Para hacer un botón por algún lado 00:46:21
Aquí botón 00:46:24
Para hacer un menú 00:46:25
Para hacer un bot 00:46:27
Estos son todos componentes 00:46:28
Hay que ver cada uno de ellos que hace 00:46:30
Y reconstruirse la cosa 00:46:32
Nosotros probaremos principalmente 00:46:33
Botones, área de texto 00:46:38
Y cosas por el estilo 00:46:40
Sin complicarnos demasiado 00:46:42
Pero podéis complicar cuanto os da la gana 00:46:44
Algunas de estas cosas 00:46:46
Podéis también jugar sobre 00:46:49
Yo tengo setado un fondo 00:46:51
Que es un panel 00:46:53
Al darle a un botón 00:46:54
Cambio el fondo con otro panel 00:46:56
Y entonces mi ventana cambia 00:46:59
O cierro una ventana y abro otra 00:47:01
Hago invisible una ventana 00:47:05
Abro otra, esta otra hace una cosa 00:47:07
Y luego se cierra 00:47:08
Y vuelve esta a volverse visible 00:47:10
Y con esto hago cosas un poquito más complejas 00:47:12
De ventanas 00:47:15
Que salen, desaparecen 00:47:17
Cambian, se modifican, etc 00:47:18
Depende de quién lo gestiona 00:47:20
Y como lo gestiona 00:47:29
Si cambia solo el fondo, no 00:47:31
Si quieres crear dos ventanas 00:47:33
Separadas, si 00:47:35
Si quieres que sea la misma ventana 00:47:36
Que pero haga cosas raras, pues a lo mejor no 00:47:38
Vale 00:47:41
Entonces 00:47:45
Esto es más o menos la idea de que 00:47:47
Tengo estos paneles 00:47:54
Tengo componentes 00:47:56
Y lo que voy haciendo, los voy componiendo 00:47:58
Voy componiendo distintos 00:48:00
Componentes 00:48:01
Para crear la interfaz 00:48:03
Que yo quiero 00:48:06
Ahora, ¿Cómo ordeno estos elementos? 00:48:06
¿Cómo ordeno los componentes? 00:48:10
¿Vale? Hemos dicho que tengo 00:48:12
Dos formas 00:48:13
O uso un layout 00:48:15
O uso las coordinadas 00:48:16
Si el layout lo acepto como 00:48:19
Null, entonces quiere decir 00:48:22
Que tengo que trabajar con setBounds 00:48:24
Y cada elemento que voy poniendo 00:48:26
Le tengo que decir como está 00:48:28
Es el ejemplo que hemos hecho nosotros 00:48:29
¿Vale? 00:48:32
Aquí como mi 00:48:32
Layout es null 00:48:35
¿Vale? 00:48:37
Entonces seto yo 00:48:39
Donde van las cosas 00:48:41
De hecho 00:48:43
Fijaos en esto 00:48:46
¿Veis esto? 00:48:51
¿Veis esto? 00:49:02
No se parece mucho a lo de antes 00:49:13
Porque probablemente 00:49:15
Mi segundo 00:49:23
Set 00:49:24
Esto era 00:49:28
Layout 00:49:30
Simplemente tiene un layout 00:49:33
Entonces cuando creo el segundo 00:49:37
Se lo quito 00:49:41
Y ahora si lo añado 00:49:42
Segundo 00:49:46
Antes me salía más bonito 00:49:50
Porque no lo he hecho yo 00:50:00
No lo he puesto yo el tamaño del botón 00:50:02
Se lo ha dado a él 00:50:04
Y él tenía un layout 00:50:05
Entonces él ha dicho, vale, tú quieres añadir este botón 00:50:07
Con este tamaño, vale, te lo añado yo automáticamente 00:50:10
Porque no obstante 00:50:12
Yo le haya dado el set bounds 00:50:14
Como él tiene un layout, el layout gana 00:50:15
Sobre mi 00:50:18
Mi bound, en el momento en que se lo ha anulado 00:50:19
Le he dicho, mira, no tienes layout 00:50:22
Entonces dice, ah, vale, entonces mandas tú 00:50:24
Entonces hago lo que tú me mandas 00:50:26
Y sale esta cosa aquí 00:50:28
Entonces, ¿qué son estos layouts? 00:50:29
¿Qué layouts hay? 00:50:36
Porque esto más o menos lo hemos probado 00:50:37
Vamos a ver los layouts 00:50:39
Hay distintos tipos de layouts 00:50:40
¿Vale? 00:50:42
Que derivan desde este de aquí 00:50:44
Ahora, déjame ver si... 00:50:46
Porque... 00:50:48
Este enlace de aquí 00:50:50
Vale, no, no es esto 00:50:51
Aquí vienen los posibles layouts 00:50:58
Y cosas por el estilo de Java OBT 00:51:01
Etcétera, etcétera 00:51:03
Pero había una paginita 00:51:04
Bonita, que era esta de aquí 00:51:06
Donde os venían 00:51:09
Todos los posibles 00:51:11
Layout 00:51:13
¿Vale? 00:51:14
Con una imagen 00:51:17
Y ejemplos 00:51:19
¿Vale? 00:51:21
Pero no sé por qué 00:51:22
No carga más las imágenes 00:51:24
Entonces no se ve el ejemplo 00:51:26
Una pena porque esto era 00:51:28
Era un borreasunto, ¿vale? 00:51:29
Resumen, pero si os fijáis 00:51:31
Aquí hay todos estos tipos de layout 00:51:33
El border layout, el box layout 00:51:36
El card layout, el flow layout 00:51:38
El grid back layout, el grid layout 00:51:40
Blablabla 00:51:42
A nosotros nos interesan algunos de estos 00:51:42
¿Vale? Con el que haremos ejemplos 00:51:45
Pero están todos, vosotros podéis utilizar 00:51:48
Como os dé la gana 00:51:49
En particular nos interesa 00:51:50
El flow layout 00:51:53
Que es, ponme uno al lado de otro 00:51:54
Nos interesa el 00:51:57
Border layout 00:51:59
Que es, créame cinco zonas 00:52:01
Arriba, abajo, izquierda, derecha y centro 00:52:04
Y luego ponme las cosas allí 00:52:07
Y el grid layout 00:52:09
Que es, sostancialmente, hazme una rejilla 00:52:12
De cuántas columnas y cuántas filas te digo yo 00:52:14
Y luego me pones los objetos allí dentro 00:52:18
¿Sí? 00:52:20
Para ejemplos o cosas por el estilo 00:52:22
Lo podéis buscar en internet, etc, etc 00:52:26
Y vienen, ¿vale? 00:52:29
Nosotros vamos a hacer esto 00:52:30
FlowLayout 00:52:32
¿Vale? 00:52:34
Entonces 00:52:35
Aquí tenemos un JFrame 00:52:36
Bla, bla, bla 00:52:40
Este tamaño, etc, etc 00:52:41
Y cuando llega a crear el layout 00:52:43
Me dice 00:52:47
Oye, mira 00:52:48
Crea un FlowLayout 00:52:49
¿Vale? 00:52:51
Con sus 00:52:52
Atributos o parámetros 00:52:53
Que para saber que son estos de aquí 00:52:57
Tendré que ir a mirar 00:53:00
Flow layout 00:53:01
Esto será posiblemente como me alinea 00:53:04
El componente 00:53:06
Y luego si os fijáis 00:53:08
Lo que hace es crear muchos botones 00:53:11
Y añadirlos a este content pane 00:53:13
Que tiene este layout 00:53:15
Que sale 00:53:17
Una cosa así 00:53:18
Me pone uno detrás de otro 00:53:19
Cuando acaba que no hay más espacio 00:53:22
Va a la siguiente línea 00:53:24
Lo probamos 00:53:26
Entonces vamos a hacer 00:53:30
Otra prueba 00:53:35
Y aquí 00:53:39
Lo simplificamos un poco 00:53:43
Quitamos el segundo 00:53:45
Quitamos la etiqueta 00:53:47
Hacemos botones 00:53:55
Vale 00:53:59
Aquí están los botones 00:54:00
Esto creo que no sirve 00:54:08
Y en vez de este de aquí 00:54:14
Creamos un 00:54:16
Flow layout 00:54:18
De este tipo, vale 00:54:20
Entonces aquí le digo new 00:54:22
De hecho 00:54:25
Probamos sin ponerle nada 00:54:26
Vale 00:54:30
Si hacemos fondo.add 00:54:31
Botón 1 00:54:46
Fondo.add 00:54:47
Botón 2 00:54:51
A ver que hace esto 00:54:53
Vale 00:54:58
Veis que me ha puesto aquí esto y esto 00:55:02
Si ahora 00:55:05
Añado un tercero, que me hará 00:55:06
¿Vale? 00:55:08
Si os fijáis, lo está centrando 00:55:25
¿Vale? Esto porque 00:55:27
Por defecto, creo que está utilizando 00:55:29
Esta opción de aquí 00:55:32
La center 00:55:33
¿Vale? La flow layout center 00:55:35
O sea que, en el espacio que tengo 00:55:37
Te los voy poniendo uno al lado de otro 00:55:40
En una fila 00:55:42
¿Vale? Y el concepto es que 00:55:43
Intento centrarlos en el espacio 00:55:45
Que tengo 00:55:48
¿Qué pasa si 00:55:48
El espacio que tengo es más pequeño 00:55:54
En vez que ancho 1000 00:55:56
Tengo ancho 100 00:55:58
Como se acaba la fila 00:55:59
Pues entonces me lo pone uno encima de otro 00:56:06
Si esto se hace más grande 00:56:08
Esto se adapta al tamaño que yo tengo 00:56:11
En el bien y en el mal 00:56:15
Si yo había pensado que tenía que estar uno encima de otro 00:56:18
Y de repente alguien me pone un maximiza 00:56:21
Y no está encima de otro 00:56:24
Pues tengo un problema 00:56:25
Que más quería probar yo 00:56:27
Fijaos que si uno 00:56:34
Es más grande 00:56:36
Él 00:56:38
Se organizará 00:56:43
Para que ese botón sea más grande 00:56:46
Y ocupe el espacio que tiene que ocupar 00:56:47
Claro que si lo hago demasiado pequeño 00:56:49
Pues me sobra un poco 00:56:54
Ahora 00:56:55
Que más puede hacer con un flow layout 00:56:59
Pues no sé 00:57:02
Vamos a buscar aquí 00:57:03
Java Flow Layout 00:57:04
Y aquí podéis buscar 00:57:09
Os explica como hacerlo 00:57:17
Las opciones que hay 00:57:19
Los varios constructores que tenéis 00:57:20
Que opciones podéis elegir 00:57:25
Etcétera, etcétera, etcétera 00:57:29
Si queréis, aquí encontráis también 00:57:30
Demo, vale 00:57:32
Habrá 00:57:34
Java que os podéis bajar 00:57:36
Y ver como lo han hecho ellos 00:57:40
Hoy en día con ChatGPT 00:57:42
Los ejemplos de este tipo 00:57:44
Supongo que habrá mucho 00:57:45
Otro 00:57:47
Layout 00:57:50
Que nos puede interesar 00:57:53
¿Dónde está? 00:57:55
Aquí, el layout en grid 00:57:57
¿Vale? 00:58:00
El layout en grid 00:58:01
Lo que hace es sostancialmente 00:58:02
crearme unos espacios 00:58:05
si, por ejemplo 00:58:07
aquí 00:58:09
cuando creo el layout le digo 00:58:10
hazme un grey layout y le doy 00:58:13
unos valores, vale 00:58:16
si no me acuerdo, estas son las 00:58:17
filas, estas son 00:58:19
las columnas 00:58:21
si pongo cero quiere decir que no te voy 00:58:23
a limitar cuantas filas 00:58:25
esto está diciendo, ponmelo sustancialmente 00:58:27
en filas 00:58:29
de seis elementos, cada seis 00:58:31
elementos vas a una nueva fila, ¿cuántas filas? 00:58:34
¿cuántas da la gana? 00:58:36
si aquí pongo 3 y 6 00:58:37
pues me hará solo máximo 3 filas 00:58:39
de 6 elementos, si pongo más cosas 00:58:41
explotará diciendo no tengo espacio 00:58:43
y estos dos, no me acuerdo 00:58:45
entonces lo vamos a ver 00:58:48
grid layout 00:58:50
Java 00:58:55
vamos aquí por ejemplo 00:58:58
y vamos al 00:59:02
constructor, veis 00:59:04
Y me dice 00:59:05
Filas, columnas 00:59:08
La distancia entre filas 00:59:11
Y la distancia entre columnas 00:59:15
O sea, esto de aquí me dice 00:59:18
Cuanto van distanciados un elemento de otro 00:59:19
Sustantemente los bordes de la grid 00:59:22
Vamos 00:59:25
Más todas estas cosas que puedo hacer 00:59:26
¿Vale? 00:59:29
Vamos a probarlo 00:59:30
Si en vez 00:59:34
De un 00:59:38
Layout 00:59:39
Aquí le he puesto un layout por defecto 00:59:44
Creo que es el flow 00:59:46
Entonces aquí le digo 00:59:47
Que fondo.setlayer 00:59:49
De new 00:59:54
Grid layer 00:59:58
Hagamos 0.2 01:00:02
Change to 01:00:06
Relayout, no layer 01:00:14
Porque layer lo se suyo 01:00:17
Ahí, vale 01:00:19
Entonces aquí le estoy diciendo 01:00:21
Oye mira, quiero filas de 01:00:24
No se cuanta fila, pero 01:00:26
Dos columnas, vale 01:00:27
Y aquí ahora añado 01:00:29
Un botón 01:00:31
Lo pone aquí 01:00:34
Porque todo esto 01:00:42
Son dividido en dos 01:00:44
¿Vale? Y me la he puesto en la primera 01:00:47
Entonces, este botón ocupa todo el primer 01:00:49
Bloque 01:00:53
¿Sí? 01:00:54
Ahora añado dos 01:00:56
Entonces, ahora tengo mis dos botones 01:00:57
Una a la izquierda, una a la derecha 01:01:06
¿Sí? 01:01:08
Ahora añado tres 01:01:10
¿Qué pasará? 01:01:11
Como no puedo añadirlo aquí 01:01:18
Porque ha acabado la fila 01:01:20
Porque las filas son de dos columnas 01:01:22
Pues me crea una nueva fila 01:01:24
Y aquí pone el siguiente botón 01:01:26
Por lo tanto ahora tengo dos filas 01:01:28
De dos columnas 01:01:31
¿Sí? Y así, así, así 01:01:32
Claramente esto 01:01:34
Podría ser un segundo 01:01:36
Un, un, un 01:01:38
Como esto 01:01:40
Podría ser una situación como esta de aquí 01:01:41
Y que sea este aquí dentro 01:01:45
Que sea organizado como una grilla 01:01:47
Mentre, como una grid 01:01:49
Mentre que el resto 01:01:51
Fuera sea organizado como 01:01:52
Un flow y que otra parte 01:01:55
Se ha organizado que he decidido yo 01:01:58
Donde poner las cosas, o sea, cada panel 01:01:59
Tiene su layout 01:02:01
¿Se entiende, no? 01:02:02
Entonces, esta es la grilla 01:02:07
La grid 01:02:09
Más 01:02:09
El tercero que nos interesa 01:02:14
Es este de aquí, ¿vale? 01:02:19
Este de aquí es el border layout 01:02:21
Que lo que me hace es 01:02:23
Me crea 01:02:25
Una serie de áreas 01:02:26
Arriba 01:02:30
Abajo, izquierda, derecha y centro 01:02:31
Que yo luego pueda poner 01:02:34
Cosas allí dentro 01:02:35
Puedo poner botones, podría poner panel 01:02:36
Podría poner etiqueta 01:02:39
Podría poner lo que me da la gana 01:02:41
Podría poner aquí y aquí un botón 01:02:42
En el centro poner un layer 01:02:45
Un panel 01:02:47
Y ese panel organizado como 01:02:49
Una grid 01:02:52
O sea, puedo combinar cuanto me da la gana 01:02:53
¿Sí? 01:02:56
Eso sería así 01:02:57
Fijaos que para acceder a las zonas 01:02:59
Le tengo que decir 01:03:03
North, South, East, West y Center 01:03:04
Esta es la zona North 01:03:09
South 01:03:11
West, East, Center 01:03:12
Por ejemplo, si quiero añadir este botón arriba 01:03:16
Le tengo que poner 01:03:22
Añade el botón arriba 01:03:23
vamos a probarlo 01:03:26
esos son 01:03:30
son 01:03:38
constantes estáticas 01:03:39
de la clase border layout que representan 01:03:42
arriba, serán numeritos 01:03:44
aquí 01:03:46
esto es 01:03:49
creo la distancia entre 01:03:53
entre arriba y abajo 01:03:56
vale, pero eso 01:03:58
vale, vamos a 01:03:58
probar este otro 01:04:03
layout, le cambio el layout 01:04:05
Y le digo, oye mira, tu nuevo layout es 01:04:07
Un border layout 01:04:10
Y ahora luego vamos a ver que son estos datos de aquí 01:04:17
Lo importo 01:04:23
Y ahora cuando añado algo le tengo que decir donde lo quiero añadir 01:04:26
Por ejemplo este de aquí lo añado 01:04:30
En border layout 01:04:33
Punto north 01:04:36
Esto, el botón pulsa 01:04:39
Me lo añadirá arriba 01:04:42
Este de aquí por ejemplo 01:04:44
Lo quiero a la derecha 01:04:47
Para ponerlo a la derecha 01:04:49
Este de aquí lo quiero 01:04:53
No me acuerdo que tengo que poner 01:04:58
Ahí, ahora si 01:05:07
Entonces cuando esto lo lanzo 01:05:14
Dejadme poner algo también al centro 01:05:17
El botón 4 lo ponga al centro 01:05:20
Porque si no luego la tengo atarada 01:05:22
El botón 4 01:05:24
Me lo pones en el centro 01:05:27
Ahí que está organizado 01:05:28
Con esta a la izquierda 01:05:39
Esta al centro, esta a la derecha y esta arriba 01:05:41
Y con esto se puede 01:05:43
Se pueden hacer cosas 01:05:48
Vale, típicamente 01:05:51
Este de aquí lo podría hacer 01:05:52
Que el botón derecho 01:05:55
Es a la derecha 01:05:57
Le pongo 01:05:58
Frechita a la derecha 01:05:59
El botón 3 le pongo 01:06:02
Frechita a la izquierda 01:06:05
Y ahora tengo 01:06:07
Una cosa 01:06:12
Que tiene un botón para ir a la izquierda 01:06:14
Y un botón para ir a la derecha 01:06:17
Y aquí en el medio 01:06:18
No sé 01:06:22
Nosotros dentro de un rato lo que haremos es 01:06:23
Por ejemplo, ¿os acordáis nuestro 01:06:26
Programa para 01:06:28
Los alumnos? 01:06:30
Que los datos de los alumnos aparezcan 01:06:32
Aquí al centro y yo tenga aquí 01:06:34
Una flechita a la izquierda y una flechita a la derecha 01:06:36
Y cada vez que pincho en una de estas me cambia el alumno 01:06:38
Para que yo pueda ver los datos 01:06:41
De todos los alumnos 01:06:42
Y aquí a lo mejor tengo busca 01:06:43
Y si aquí le pongo el ID del alumno 01:06:46
Y luego pincho busca 01:06:48
Pues me carga aquí directamente 01:06:50
Los datos del alumno que busca 01:06:52
Esto dentro de un rato 01:06:54
Fijaos que por ahora 01:07:01
Nuestra interfaz hace 01:07:03
Nada 01:07:04
¿Por qué? 01:07:07
Porque todavía no hemos visto 01:07:11
Esto 01:07:15
Programación orientada a eventos 01:07:15
O sea, cuando alguien pulsa el botón 01:07:20
Hace esto 01:07:23
Cuando alguien pasa por encima 01:07:25
¿Eso si lo habéis hecho en HTML? 01:07:27
¿FSS, el over? 01:07:31
¿Algo de JavaScript lo habéis hecho? 01:07:33
Ya es esa 01:07:36
OnClick, pues hace esto 01:07:37
¿Sí? 01:07:40
Que veremos la próxima vez 01:07:42
Subido por:
Stefano C.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
24
Fecha:
22 de abril de 2024 - 13:14
Visibilidad:
Clave
Centro:
IES ROSA CHACEL
Duración:
1h′ 07′ 48″
Relación de aspecto:
4:3 Hasta 2009 fue el estándar utilizado en la televisión PAL; muchas pantallas de ordenador y televisores usan este estándar, erróneamente llamado cuadrado, cuando en la realidad es rectangular o wide.
Resolución:
960x720 píxeles
Tamaño:
297.40 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid