Saltar navegación

GUI Botón que se mueve - 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 15 de abril de 2026 por Stefano C.

4 visualizaciones

Más información Transcripción

Descargar la transcripción

vamos a grabar esta clase por lo tanto si me dais si habláis ya me dais consentimiento para grabar 00:00:00
vuestra voz vale entonces vamos a intentar hacer un programita como este la idea es que hay una 00:00:06
pregunta graciosa si vais sobre el no funciona vale si vais sobre el sí el programa modifica 00:00:14
la posición del sí vale para que no podáis darle no sé por qué esto probablemente porque está detrás 00:00:21
desde aquí ya no lo pilla, no lo puedo ni clickear ni nada, pero la idea es más o menos eso. La idea es 00:00:28
jugar un poquito con los botones, con los controles. Entonces, vamos a crear un nuevo proyecto. 00:00:34
entonces empiezo con lo de siempre vale le tengo que añadir aquí 00:00:44
aquí le tengo que crear aquí un nuevo oficiero 00:01:13
un file que sea mi lista o gui.fxml le pongo aquí una nueva clase que será el 00:01:29
el controller para que sustantivamente aquí haya los métodos ya que estoy le pongo un método ficticio 00:01:47
pero dejo allí vale para que luego vea que funciona al otro lado estoy preparando todo 00:02:03
para que funcione luego si lo quiero lo elimino y luego tengo que editar este señor de aquí con 00:02:15
SimBuilder. SimBuilder está dando algunos problemas de vez en cuando se lía cuando se lía lo más 00:02:25
probable que hayáis hecho algo raro y que él no reconozca su propio código o habéis modificado 00:02:37
el código entonces allí se me empieza a molestar el consejo pues de vez en cuando mientras funciona 00:02:44
hacer copias de este señor vale para que sea un determinado momento deja de funcionar podáis 00:02:53
eliminar lo que está trabajando y no empezar desde cero va a empezar desde donde habéis dejado antes 00:02:59
tened en cuenta que de todas formas hacer la interfaz gráfico cuando ya tenéis todo a 00:03:05
lo más difícil es la parte del control del que haga cosas donde tenéis que vosotros pensar en 00:03:09
algoritmo en el que tengo que hacer este código lo tenéis si tenéis que volver a rehacer el botón 00:03:17
que cuando lo clicas llama este método es sencillo no se tarda mucho vale aún así se os pasa cinco o 00:03:23
seis veces pues por eso fijaos también que por ahora lo digo ahora porque hoy pasará a mí no 00:03:29
me ha pasado vale lo que puede ser es que vosotros en el utilizarlo lo estáis utilizando de una forma 00:03:37
un poco impropia entonces a veces hagáis de este cabo como vosotros que a veces os da que cuando 00:03:44
dais al play en vez de ejecutar el main que tenéis ejecuta otra cosa ejecuta un css2bin o cosa por 00:03:49
el estilo entonces no os funciona vale fijaos en el que estáis ejecutando vale entonces que hacemos 00:03:59
nosotros con esto? Pues ponemos un peina normal y corriente, ponemos una etiqueta donde ponemos 00:04:05
una graciosísima pregunta. ¿Qué ponemos como pregunta? ¿Eh? No, no, no, déjate suscribirte. 00:04:12
¿Cómo andamos en Madrid? ¿Te gusta programar? Interrogación. ¿Qué dejamos ahí? Si lo 00:04:25
tenemos más grande o más pequeño actuaremos sobre eso con CSS y luego dos botones, botón uno, botón dos, esto pone sí, esto pone no, entonces esta sería y luego si lo quiero hacer más 00:04:44
bonito de otra forma o cosa por el estilo puedo trabajar aquí con CSS o puedo trabajar aquí mismo haciendo más grande o más pequeño o lo que sea, quiero que estos botones 00:05:06
sean más pequeñitos por una razón práctica vale que ahora lo veremos después entonces tengo estos 00:05:15
dos la idea es que un usuario ponga así y entonces que le diga muy bien si intenta pinchar no por 00:05:22
ese fin no se mueva entonces vamos a hacer la parte fácil aquí le decimos que como control 00:05:31
le quiero utilizar el controlador, esto no lo reconoce, entonces como siempre voy aquí, lo guardo, 00:05:40
me voy aquí y compruebo que esté, guardo todo y luego hemos visto que el controlador en teoría 00:05:47
debería estar porque ya lo he creado, pero no lo ve ahora mismo, pues entonces lo cierro, 00:05:59
con un poco de suerte 00:06:05
ahora si me ve 00:06:10
entonces una vez que le he dicho que este es el controlador 00:06:12
cuando voy al botón 00:06:24
en el botón 00:06:25
en la parte de código 00:06:27
en la parte de on action del código 00:06:28
pues me aparecen 00:06:31
los varios métodos 00:06:33
que he definido en el controlador 00:06:35
particular aquí 00:06:37
cuando hago clic 00:06:38
no lo sé, que me cambie este de aquí 00:06:40
con muy bien, vale 00:06:46
entonces, para cambiar 00:06:47
este de aquí, necesito darle una identidad 00:06:50
le doy que se llama 00:06:52
texto, vale 00:06:54
guardo esto 00:06:56
me voy 00:06:57
controlador 00:07:03
y le digo que 00:07:05
va a tener una conexión 00:07:08
fxml con 00:07:10
un label que se llama txt. Un label lo tengo que importar. Este, no este, ¿vale? Son dos 00:07:12
packages distintos. Y aquí le diré que cuando haces clic en txt.setText, muy bien. Por tanto, 00:07:23
Por ahora tengo esto, el lanzador que no es, ah no, claro, sí, me he olvidado de cambiar el main, ¿vale? 00:07:38
El main este de aquí es el main por defecto que me da el proyecto de JavaFX, por lo tanto aquí le tengo que decir que quiero cargar lo que yo quiero, ¿vale? 00:08:02
Entonces, esencialmente esta parte aquí se queda, a ver si me acuerdo hoy. 00:08:16
Pues aquí creo un objeto que es un SXML loader, que es igual a FXML, no me acuerdo de nunca. 00:08:21
New fxml loader, loader, get class, paréntesis, punto, fuera, o sea, no, paréntesis, fuera, 00:08:33
Y aquí le pongo gui.fxml. Gracias. Este de aquí lo cargo, etc. Entonces, ahora mismo, 00:08:56
esto sería mi scene, veo, no, está ahí, perdón, entonces, a, no, no, no, no lo voy a escribir, pues ya está aquí, aquí dentro voy a cargar, vale, entonces esto me da un parent, si no me equivoco, parent b, coma, por root, no, no sé si tenemos root, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no. 00:09:15
Aquí root es igual a loader.load, justo, esto tiene que estar dentro del este, y luego 00:09:51
creo una sin, ¿me equivoco? No. ¿Qué hago? Escrín. No. Escrín. Escrín. Escrín. Escrín. 00:10:10
Así. Tendré que crearlo nuevo, ¿no? Sí, pero justo la primera es en mayúscula. Igual 00:10:23
que le paso el root y el tamaño con el que creo que sea la escena, ¿vale? 00:10:33
Hacemos 800 por 800. 00:10:42
Luego, esta escena la acepto en el primary stage, que es este que tiene aquí, y luego lo incluimos. 00:10:46
Con esto debería funcionar, ¿no? 00:10:55
Vale, vamos a ver si ahora funciona. 00:10:58
gusta programar, veis que 800x800 es más grande de lo que es, pues debería mirar yo 00:11:07
cuál es el tamaño correcto y cosas por el estilo. Si pongo sí, me pone muy bien, si 00:11:12
pongo no, por ahora no me interesa. 00:11:16
Pienso 600x300. 00:11:18
700x300, creo que es lo que viene. 00:11:21
Al otro lado, por defecto. 00:11:35
Esto lo podría ver, en teoría, por aquí, ¿no? 00:11:38
A properties de este señor de aquí, ¿no me lo pongo por algún lado? 00:11:43
No, no, no. 00:11:47
Sí, 600 por 14. 00:11:51
¿Vale? Lo que estoy viendo aquí es 600 por 14. 00:11:53
Si quiero que se corresponda, pues este número de aquí lo pongo al otro lado. 00:11:56
No sé si, vamos a probarlo. 00:12:00
Esto está sobrecargado así. 00:12:03
Ah, claro, no hace falta poner el tamaño. 00:12:05
entonces va a pillar el tamaño ya definido dentro de estos objetos 00:12:12
los dos parámetros al lado si yo quiero forzar un tamaño distinto 00:12:20
todavía más sencillo vale entonces 00:12:26
a partir de aquí esto está funcionando tengo todo lo que tengo que tener pues 00:12:31
lo único que me queda hacer es mover el botón derecho. Para mover el botón derecho yo quiero 00:12:37
que en determinadas situaciones pase algo para moverse. Entonces necesito aquí crear un método 00:12:45
que lo que haga es hacer mover el botón. Entonces tendré un método mover que hace mover el botón. 00:12:52
Ahora, la idea es que o lo dejo así, y aquí me hago una referencia al botón que se tiene 00:13:04
que mover, siendo que solo un botón se mueve, o en el caso en que yo quiera que el propio 00:13:14
botón en el que tú haces algo es el que se mueve, entonces no lo debería hacer sin 00:13:22
parámetros va a poner aquí un evento vale y cuando pasa este evento pillar 00:13:31
quien ha hecho el evento y mover ese botón de ahí vamos a hacer el segundo 00:13:38
modo es varios porque si trabajamos también es si me voy aquí y voy a este 00:13:43
botón veis que en el code nosotros hemos dado esto una acción vale un hecho es la 00:13:50
más importante, digamos, del botón, que es cuando haces clic en el botón, ¿vale? 00:13:59
Pero en este caso nosotros no queremos usar este evento. Nosotros no queremos mover el botón cuando 00:14:06
hago clic. Podría ser que cada vez que yo hago clic se mueva de otro lado, como decir, no me has clicado, 00:14:12
¿vale? Podría ser eso también. Pero nosotros no lo queremos así. Nosotros queremos que sea imposible 00:14:16
de llegar allí porque cuando yo entro encima del botón, el botón se mueva. Entonces el evento 00:14:21
no es el action. Es otro evento. Es onMouseOver, que vosotros habéis visto en HTML barra Javascript. 00:14:29
Lo busco por aquí. Veis que aquí hay varios eventos. Estos son eventos de drag and drop, 00:14:38
de cuando pincho y lo arrastro. Si detecta que se ha empezado a arrastrar, si al final cuando ya se 00:14:45
arrastrado si el mouse entra mientras está arrastrando etcétera estos son todos distintos 00:14:57
eventos relativos con el track and roll vale eventos de keyboard este de aquí son con el teclado estoy 00:15:08
poniendo una tecla la he presionado la he soltado o la he presionado y soltado vale luego está ratón 00:15:15
que es lo que nos interesa, luego está de rotación, porque esto también puede estar 00:15:23
relacionado con cosas de móviles, entonces si tengo una pantalla táctil y he rotado y 00:15:27
cosas por el estilo, swipe de haber deslizado, gracias, o tocado, o haciendo zoom, o sea que 00:15:33
tengo todos estos posibles eventos. A eso nos interesan ahora mismo los eventos del mouse. 00:15:42
entonces nosotros pillamos el mouse y miramos cuáles son 00:15:49
a nosotros lo que queremos es que cuando el ratón 00:15:53
entra en el botón 00:15:56
pues se mueva, ¿vale? 00:15:59
entonces, ¿cuál veis que hará esto? 00:16:01
con mouse enter 00:16:06
esto es mi evento que cuando el mouse entra 00:16:07
en el campo de acción del botón 00:16:11
pues ejecutará un método 00:16:14
¿Qué método? Pues el otro. ¿No lo he guardado? ¿Sí lo he guardado? No. 00:16:17
Acordaos que si aquí no aparece, esto sí lo podéis refrescar simplemente clickeando aquí y seleccionando otra vez el controller. 00:16:25
Entonces con esto ya ha recargado el control. No, esta vez no. 00:16:34
Esta vez el detective no. Otra vez el detective no ha hecho. 00:16:38
a lo mejor no le he puesto el fx 00:16:41
a refrescar que? 00:16:56
si pero el refresh no debería afectar ese, el refresh afecta al otro 00:16:57
aquí un refresh no lo he encontrado, habéis encontrado el refresh 00:17:06
Entonces, debería aparecer en algún momento, lo borro, lo pongo otra vez, ahí, ahora sí. 00:17:09
Lucháis un poquito con ellos, la forma de refrescarlo, a veces cerrarlo y abrirlo otra vez, 00:17:23
es un poco lento, seguro que hay un método mejor, cuando lo encontraré en un futuro, pues os lo diré. 00:17:30
vale entonces ahora cuando el mouse entra aquí pues ejecutará el mundo vamos a ver si funciona 00:17:34
guardo vuelvo aquí actualizó esta parte de aquí vale para estar seguro que lo puedo mirar aquí 00:17:47
vale, por algún lado tiene que decir es esto, onMouseEntered, move. Entonces ahora le hago hacer, 00:17:57
por ejemplo, en el controller que imprima algo y entonces cada vez que yo entro en ese botón 00:18:06
me escribirá algo, veis, entro algo, ahora que si estoy dentro y me muevo no hace nada, 00:18:20
es al momento en que le entro que salta esta cosa entonces ahora tengo toda la parte de interfaz 00:18:26
gráfica barra eventos ya la tengo lista tengo lo único que tengo que hacer ahora es implementar 00:18:34
un metodito aquí que lo que haga es cerrarlo ahora fijaos que por ahora lo hemos superpuesto sin 00:18:43
evento vale entonces si quisiera aquí ahora tener esa equipo debería poner aquí un botón algo así no 00:18:51
gustó llamar a ver al otro botón y ya tendría acceso vale pero esto me serviría por cualquier 00:18:58
cosa que yo haga mucho siempre mueve este botón en vez de yo quisiera tener dos botones que se 00:19:12
muevan vale en general que tengo tres opciones así bueno no tanto mucho y no vale y quiero que 00:19:18
tú puedas pinchar sólo si entonces son los dos dólares en el mover debería hacer dos duplicar 00:19:25
este código de aquí o sea que yo no quiero entonces los acordáis como hacía podía crear 00:19:31
este método de aquí en vez que sea sin parámetros ponerle aquí un evento nosotros hemos visto acción 00:19:36
un evento esto tengo que importar y fijaos que hay a vt o java cx vale quiero el de java cx vale 00:19:44
perfecto esto se ha enfadado con mucho 00:19:59
ahora vale entonces si ahora yo lo lanzo que va a pasar que cuando entro en el no explota vamos 00:20:06
a entender por qué explota. 00:20:28
¿Vosotros qué hacéis? Porque todo esto 00:20:30
lo ponéis a una 00:20:32
tarjeta artificial y preguntáis. 00:20:33
Vamos a leer si entendemos algo. 00:20:35
Me dice 00:20:38
una illegal argument exception. 00:20:39
Argument type 00:20:42
mismatched. 00:20:44
¿Qué quiere? 00:20:45
Tipo de argumento no sé qué. 00:20:46
Mismatched es como que no corresponde. 00:20:53
Dice, oye, mira. 00:20:55
Es una excepción de 00:20:57
argumento ilegal. Argumento que 00:20:58
no puede estar ahí. ¿Vale? ¿Cuál es la descripción? Pues que el tipo del argumento 00:21:01
no se corresponde. ¿Qué os hace pensar? ¿Dónde está el error? Aquí. ¿Qué es el 00:21:07
argumento? Está aquí. ¿Vale? Te está diciendo este tipo no me gusta. Te está diciendo oye 00:21:17
mira, tú estás haciendo un móvil de action event, pero cuando pasa esto, hay un error en este tipo de aquí. 00:21:30
¿Qué os hace pensar? Que lo que se crea, ¿qué es? 00:21:41
Lo que deberíais pensar, y lo vemos así para que vosotros reflexionáis sobre esto y empezáis a pensar en la filosofía, 00:21:49
es que se crea un evento, porque algo pasa. Alguien llama a este móvil. 00:21:58
Entonces el evento se ha creado y hemos visto antes que funcionaba, cuando yo entraba pues me escribía, cuando esto no estaba me escribía este algo, ¿vale? Ahora se lo he metido y se enfada, dice, oye, mira, no, que no es esto, porque posiblemente lo que yo estoy llamando action event no es un action event, lo que se está creando ahora no es un action event, porque action event se creaba ¿cuándo? ¿Cuándo se creaba action event? 00:22:03
al hacer el clic 00:22:29
hacer el clic, eso es un action 00:22:35
y crea un actionEvent 00:22:38
entonces cuando yo uso esto 00:22:39
un action 00:22:41
el método puede ser o sin parámetros 00:22:43
o utilizando un actionEvent 00:22:47
porque este evento 00:22:50
de aquí crea un objeto 00:22:52
actionEvent que luego se linkará 00:22:53
con este método y lo usaré ahí dentro 00:22:56
lo que hemos hecho ayer 00:22:58
ahora nosotros que conocíamos solo el actionEvent 00:22:59
decimos, vale, pongo actionEvent 00:23:02
Pero lo que te está diciendo es que algo pasa, se crea un evento, pero el tipo de este evento no es ActionEvent, entonces me salta una ilegal argumentación de exception. Estoy usando este método, aspirándome a un ActionEvent y me estás metiendo ahí algo que no es un ActionEvent. 00:23:03
lo que pasa es que no lo sé 00:23:19
porque lo estoy aprendiendo ahora 00:23:29
pero hay distintos tipos 00:23:31
de eventos, el action event 00:23:33
es cuando hago el click o cuando hago la acción 00:23:35
entre comillas, pues esto no es 00:23:37
un evento, entrar con el ratón 00:23:39
no ha hecho click, por lo tanto no se genera 00:23:41
un action event, no ha habido 00:23:44
el evento de acción 00:23:45
ha habido un evento relacionado a gol 00:23:46
con el mouse 00:23:49
pues 00:23:54
eso 00:23:56
entonces cada uno de estos elementos que tenemos aquí pues generará su propio evento 00:24:03
posiblemente por categorías estos eran eventos del mouse pues estos realmente si le pongo más 00:24:18
event no funcionará si le pongo action event tampoco estos serán un kibble event o key event 00:24:25
no lo sé, lo tengo que buscar. Pero la filosofía es siempre eso, cada uno de estos eventos estará 00:24:38
relacionado, generará un objeto de un determinado tipo y si yo uso aquí un método que tiene que 00:24:46
trabajar con ese método tendré que ir a mirar cuál es ese método, cuál es ese evento. Habrá 00:24:52
distintos tipos de eventos, que puedo ir a buscar tanto en una API como en inteligencia 00:25:00
artificial y cosas por el estilo, y decirle, mira, estoy haciendo, estoy haciendo, ¿qué 00:25:08
tipo de evento genera? Pues el evento es el Keyboard Event. Pues entonces allí le pondrán 00:25:11
Keyboard Event. Pero la idea no es saber qué, pero saber qué tengo que poner. Luego, una 00:25:16
vez que yo sé, estoy consciente que lo es, pues no puedo saber todo en la vida, pues 00:25:24
sé que cuando me enfrenta a una cosa así tengo que ir a buscar qué tipo de evento. 00:25:28
Entonces si lo pongo así y ahora lo lanzo, ya vuelve a funcionar. 00:25:33
Ahora me está entrando aquí correctamente, no está haciendo el error y tengo a disposición 00:25:42
mi mouseEvent que llamaré m. Entonces ahora lo que quiero hacer es saber quién ha ejecutado, 00:25:50
quien ha causado este evento. Y esto es como la otra vez, es m.getSold. Este de aquí devuelve 00:26:00
el componente que ha generado este evento de aquí. Este de aquí sería un object, pero yo sé que no es 00:26:17
un object vale yo este de aquí lo he puesto en un botón lo sé porque lo he hecho yo ahora si tú 00:26:30
quisiera mover distintos tipos de componentes pues a lo mejor deberías poner algo más de alto 00:26:37
nivel si vosotros buscáis la jerarquía con que están hechos los controles porque probablemente 00:26:43
todos los controles derivarán de una de una clase genérica que será control en general y luego desde 00:26:47
controla el botón, hay textarea, hay label, o cosa por el estilo. Y sabría que ver cómo está hecho de verdad, ¿vale? 00:26:54
Pero como yo sé que ahora es un botón en concreto, le puedo decir, no, yo quiero un botón, ¿vale? Un botón, cuidado, de JavaFX, ¿eh? 00:27:02
No de Lang, no de AuvT, de JavaFX. Y esto se enfada porque dice, no, esto es un object. Yo sé que esto es un botón y puedo hacer un casting. 00:27:11
dame esta cosa de aquí, esto será un objeto, pero yo sé que es un botón, dame un botón, si no lo supiera podría preguntar, si esta cosa de aquí es tan soft de button, pues entonces hace esta cosa, y si no, entonces si yo tengo esta cosa aquí, pues ahora podría decir, por ejemplo, escribeme o, vamos a ver qué hace, es el botón que tiene no dentro, 00:27:26
Entonces me está reconociendo el botón correcto. Vale, perfecto. Entonces ahora me queda a 00:28:01
este señor hacerle algo para moverlo. Po punto set. Probablemente, siempre filosofía 00:28:11
de Java y cosas por el estilo, el botón tendrá una posición. Y yo lo que quiero es modificar 00:28:28
esa posición entonces nosotros tenemos siempre getter y setter pues la posición será un elemento 00:28:38
un atributo de este botón que me dice está en esta posición entonces por aquí yo puedo buscar 00:28:46
y ver set y get para ver si algo me dice oye mira esto podría ser vale pero por ejemplo max size 00:28:53
muchas cosas esto si no tengo tiempo lo busco en internet o cosas por el estilo tengo mucho 00:29:00
tiempo me lo leo vale pero fijaos que puedo poner un escalado puedo poner muchas cosas 00:29:10
en particular es una cosa que se llama layout layout x y layout y estos son la x y la y de 00:29:16
dónde está este botón. Entonces, si yo pillo esto y lo sexto a 100, por ejemplo, cuando yo lo lanzo, 00:29:26
al entrar aquí me lo mueve a 100. Está claro que ahora cuando entro otra vez me lo mueve a 100, 00:29:44
entonces me lo deja ahí. Entonces ahora lo puedo quitar. Por ahora, simplemente he encontrado la 00:29:53
forma de mover cómo está el set está el get vale entonces si yo puedo poner una cosa y ya la 00:30:01
posición actual y a esa posición actual le restas 50 quiere decir que cada vez que entraré pillo 00:30:20
donde está ahora, y lo muevo 50 a la izquierda, entonces, ahora yo entro y me lo da de 50 00:30:36
a la izquierda, entro, 50 a la izquierda, entro, 50 a la izquierda, entro, 50 a la izquierda, 00:30:51
y no me deja pillarlo hasta que sale, ¿sí? Para saber dónde está y ver si puedo hacer 00:30:56
algo lo que puede hacer es inscribirme donde estoy vale y eso o punto gert leo text 00:31:09
entonces veamos lanzó esto lo estoy haciendo de forma como entre comillas deberías hacer vosotros 00:31:28
para decir yo no sé hacerlo voy haciendo pruebas voy descubriendo cómo trabajar con esto vale me 00:31:37
ha dicho la inteligencia artificial que con setLayout, getLayout, pues puedo ver dónde está y 00:31:43
cambiarle la cosa, pues voy a hacer pruebas. Entonces ahora veo que está aquí y veis que cuando sale es porque 00:31:49
está fuera, ¿vale? O sea que esto es el cero. Perfecto, ahora sí que este es el cero. Entonces, si sé que 00:31:56
eso es el cero, me podría preguntar 00:32:06
oye, mira, si he ido 00:32:08
a la izquierda 00:32:10
del cero, 00:32:12
¿me lo apareciera al otro lado? 00:32:14
¿Sí? 00:32:17
Sí. 00:32:18
Sí. 00:32:21
Oh, punto. 00:32:23
Get layout 00:32:24
es menor que cero. 00:32:27
Si después de haberlo 00:32:33
movido es a cero, pues 00:32:34
entonces 00:32:36
hazme hacer un salto a otro lado 00:32:37
ponlo a 00:32:40
no lo sé, al principio había empezado 00:32:43
tipo a 400, pues vuélvelo a su sitio 00:32:46
a 472 00:32:48
lo pongo a 472 00:32:50
feo, eh 00:32:52
estamos haciendo feo, pero 00:32:53
trabajando un poco 00:32:58
entonces ahora tengo 00:33:00
mi botón 00:33:02
que cuando intento pincharlo 00:33:04
se mueve, se mueve, se mueve 00:33:08
y cuando llega a un lado pues vuelve a su sitio. Yo intento pillar otra vez y ya no puedo. 00:33:10
En una versión muy sencilla de esta cosa, a ver si ya lo he hecho. No lo puedo clicar. 00:33:17
Si lo intento a lo mejor a veces lo consigo. Para hacerlo un poquito más bonito, lo que pasa es que se mueve también arriba y abajo. 00:33:25
Podría hacer lo mismo arriba-abajo. Es decir, cuando lo mueves así, lo mueves también así, 00:33:40
se moverá en diagonal. Es decir, siempre es lo mismo. Y si llega un momento en que me paso y me 00:33:52
me voy demasiado para arriba, pues Z lo A, lo aflito, vuelvo para abajo. Entonces, ¿qué 00:34:06
pasa? Aquí tengo esto, ah no, lo he hecho mal, lo he hecho mal, lo he hecho mal, ah 00:34:20
porque aquí lo he puesto ahí, esto sería Y, Y, Y. Ahora se mueve por allí, de vez 00:34:37
Esto parece ya un poquito más aleatorio, en realidad no es aleatorio, va siempre en ese mismo sitio, veis que hace siempre esta S, tiqui, tiqui, tiqui, tiqui. 00:34:53
Lo importante también es que yo lo mueva de un tamaño suficiente, me explico, si yo aquí en vez de menos 50 lo quito de menos 1, me lo mueve, pero yo me quedo dentro. 00:35:07
entonces, si a lo mejor vengo por aquí 00:35:22
no lo consigo pillar 00:35:26
pero si vengo por aquí, lo mueve 00:35:27
y ahora estoy dentro, lo puedo quitar 00:35:30
entonces, en teoría debería ver 00:35:31
cuál es el tamaño 00:35:36
de... 00:35:38
si voy demasiado rápido no consigo procesar 00:35:39
entonces consigo entrar igualmente 00:35:42
el tamaño del 00:35:43
botón y moverlo 00:35:45
al menos del mismo 00:35:48
tamaño, de esta forma 00:35:50
estoy seguro que mi ratón se quede fuera del botón este. 00:35:52
Voy a ir a ver aquí cuál es el tamaño. 00:35:56
Hay una propiedad. 00:36:02
esta es la posición inicial pero no veo el país white de 34 25 34 25 si yo lo muevo en 00:36:18
el ancho 34 en altera 25 siempre mi ratón cuando lo muevo estará fuera entonces al 00:36:40
entrar otra vez lo hará. Esto sería, digamos, lo mínimo, ¿sí? Vale, ok, hagamos un poquito distinto. 00:36:47
También aquí podría haber problemas de si se mete detrás de esto, ¿vale? Que es lo que me ha pasado 00:36:59
antes, creo, que ha llegado un momento que si se mete detrás de este de aquí no consigue entrar en 00:37:05
ese, por cierto, esto debería estar como detrás del todo o estar deshabilitado para que no me pase 00:37:10
problema o yo debería comprobar que este botón nunca se ponga en esta zona aquí 00:37:16
lo dejamos por ahora así y después le hacemos un poquito de aleatoriedad para que esto se mueva 00:37:24
con lo que hemos visto hasta ahora suficiente entre comillas el ejercicio está hecho y los 00:37:30
elementos que podéis utilizar y que tenéis que utilizar ya los tenéis para hacer el cambio que 00:37:40
tenéis que hacer y cosas por el estilo. La única cosa es que podríamos a este punto mejorar el 00:37:46
algoritmo de movimiento para intentar hacerle hacer algo más lógico. Por ejemplo, en vez que 00:37:51
se mueva siempre de 50 en una dirección y cosas por el estilo, pues que haya un movimiento aleatorio. 00:37:59
Ya si vosotros en vez de 50 menos o 50 más le ponéis un pequeño random diciendo que a veces 00:38:05
se mueva a la derecha, a veces a la izquierda, a veces arriba, a veces abajo, pues ya podría 00:38:13
ser suficiente. Si queremos un primer enfoque así, pues esto cuando se llama, yo aquí 00:38:18
Y hago un, bueno, doble x es igual a, digo, vamos a crear un random, random r es igual a new random coma. 00:38:29
Le hacemos que int 1 es igual a r.nextint entre 0 y 100. 00:38:55
Va a ser algo, ¿eh? 00:39:15
Y 2. 00:39:19
¿Vale? 00:39:22
Y luego cuando tengo que moverlo, pues le digo, si 1 es menor que 50, pues entonces hace esto. 00:39:22
No, hace esto. 00:39:39
Esto lo quita 50 hacia atrás y esto le suma 50. 00:39:43
Luego, hago lo mismo con 2, pero moviendo la Y, y una vez que lo he movido, tengo que comprobar si ha salido de los márgenes, ¿vale? 00:39:47
entonces si es menor que cero pues lo resete a este punto de aquí y también voy a comprobar que 00:40:20
si a dónde va es mayor 00:40:31
por ejemplo aquí 472 me queda como una caja así si se la da allí pues lo vuelves a cero 00:40:37
y si supera los 300, pues lo vuelves arriba, 10. Si hago una cosa de ese estilo, la idea es que aquí 00:40:45
tengo una caja como entre 10 y 300 así, y entre 10 y 472 así, donde sustancialmente se puede 00:41:04
mover de 50 en 50 en direcciones variables si sale de esta caja va al otro lado vale entonces 00:41:11
tiene cosas y normalmente se mueve veis que ahora el movimiento es más aleatorio cuando 00:41:17
sale de la caja salta al otro lado y cuando está dentro de la caja más altitos más pequeños 00:41:23
esto es es aleatorio vale veis que tiene un comportamiento que ha definido con esta 00:41:32
pues aquí pero no es aleatorio de un punto cualquiera aquí dentro es nunca podré hacer 00:41:40
clic porque siempre me lo mueve mínimo de 50 por lo tanto nunca estará dentro de y ha entrado y 00:41:47
me lo ha movido en un sitio donde donde está pero al mismo tiempo es un poquito más aleatorio que 00:41:54
antes opción número uno si no podríamos hacer justo para para gestionar esto no es elegante 00:41:59
como lo he hecho estas cosas de 50 esta cosa de 100 aquí esta cosa de poner 472 es feo vale son 00:42:14
cuando se usan números así de que sea más grande o más pequeño pues no son números pero es para 00:42:24
que entendamos un poquito cómo funciona y luego uno puede intentar hacerlo de forma más elegante 00:42:33
vamos a crear un 2 00:42:39
Así no borramos este no. Y si queremos, creamos otro botón, que es el segundo no, que también es 00:42:43
no. Pero este de aquí se mueve con move2. Siempre al entrar con el ratón, sería un mouse enter, 00:43:08
Pues no me lo ve, voy aquí, lo borro, lo cago en el cabezo, voy aquí, lo guardo, ¿vale? 00:43:24
Este botón de aquí se mueve con el algoritmo que hemos echado aquí, aquí hacemos un algoritmo nuevo y este botón se 00:43:49
se moverá de una forma distinta. Lo guardo, vuelvo aquí, vuelvo a mi control. Vamos a hacer una cosa 00:44:05
distinta aquí, vamos a hacer que se mueva pero de una forma aleatoria. Entonces yo necesito un 00:44:19
mínimo máximo, un mínimo máximo y que él elija aleatoriamente el mínimo máximo. Entonces por 00:44:25
ahora pienso solo en la X, ¿sí? Voy a dar el aire. Entonces, ¿cuál es el mínimo en la X? 00:44:34
¿Cuál es el máximo en la X? 00:44:49
¿Más elegante? Pues vamos a preguntar cuánto es grande el panel, ¿vale? Entonces, 00:44:51
mi panel básico era un pane, aquí el panel básico lo llamo pane, guardo, ahora esto está conectado 00:45:10
a mi pane, entonces si yo puedo preguntarme aquí, oye mira, ¿cuál es el ancho del pane? 00:45:38
Ahora, si yo lo pongo en cero, está aquí. Si yo lo pongo en 500 y esto es grande 500, 00:45:49
¿dónde está el botón? Aquí. Entonces, mi máximo no puede ser 500 porque no se vería, 00:46:10
no puede ser el width. Sería el width menos, justo, el ancho del pane menos el ancho del botón. 00:46:21
Así siempre se verá. Entonces, yo puedo moverlo donde me da la gana entre estos dos, ¿vale? 00:46:43
Entonces, doble nuevo x será igual a, hagamos un random, random, random, es igual a random, 00:46:54
entre 00:47:08
será un 00:47:10
rand.next doble 00:47:14
entre minx 00:47:16
maxx 00:47:22
¿sí? 00:47:24
mal 00:47:29
repito, penso todos con x 00:47:29
luego todo esto me pongo y 00:47:32
y debería funcionar en vez de que y 00:47:33
y ya está 00:47:35
¿vale? 00:47:37
ahora, esto funcionaría 00:47:38
yo podría hacer o.setLayoutX en nuevo x y funciona. ¿Funciona? ¿Te lo digo? ¿Te lo voy a hacer? No, ¿eh? 00:47:40
Esto explota porque... ¿Qué estoy haciendo? Esto sí, esto no. ¿Qué estoy haciendo más? 00:48:06
A ver, null pointer exception. No está conectado al pane. 00:48:33
¿Has puesto lo del arroba fxml? 00:48:39
Pero no lo está pillando bien. 00:48:42
Es posible que aquí... 00:48:51
Se llama pane, sí. 00:48:53
A veces... 00:48:57
No. 00:48:59
A veces tarda un rato en entenderlo. 00:49:03
Ahora parece sí que funciona. 00:49:12
¿Vale? ¿Funciona esta cosa? 00:49:14
Entregamos. 00:49:17
¿Sí? 00:49:19
¡Suspenso! 00:49:21
¿Por qué? 00:49:22
No es suspenso, está bien, pero 00:49:27
el problema es que como esto es totalmente random, 00:49:28
me lo podría mover 00:49:32
en un sitio que es 00:49:33
parecido a donde estoy. 00:49:35
No he puesto un control 00:49:38
que me dice, sí, pero después de haberlo movido, 00:49:39
después de haber elegido el X, 00:49:41
este nuevo X no puede 00:49:44
estar demasiado cerca al viejo X. ¿Se entiende? Entonces, dile, pongamos esto, el nuevo X 00:49:45
lo pongo igual al viejo X, mientras el nuevo X menos un cierto tamaño, pongámoslo, 00:50:10
del discolagamento, es mayor, no, es, no, es, mientras el nuevo x sea incluido entre el viejo x menos 50 y más 50, 00:50:39
eso es lo que quiero hacer, ¿sí? Mientras que el nuevo x sea mayor del viejo x menos algo, por ejemplo, menos 50, 00:51:04
y el nuevo x sea menor que el viejo x más 50, 00:51:20
cámbialo. 00:51:37
Dame una cosa al azar. 00:51:39
Pero esta cosa al azar, con respecto al viejo, 00:51:41
es muy cerca, es entre menos 50 y más 50, 00:51:45
pues cálculame otro rango. 00:51:50
No me vale. 00:51:52
Es demasiado cerca donde estaba antes. 00:51:53
¿Entiendes? 00:51:56
Donde esté 50, en realidad podría ponerlo como un... no sé cómo llamarlo. 00:51:57
Interrol. 00:52:04
Minmove. 00:52:09
Movimiento mínimo. 00:52:23
Donde en realidad este minmove sería cuánto. 00:52:25
¿Lo veis? 00:52:28
¿Esto qué es? Debería ser un doble. 00:52:51
¿Lo veis o no? 00:52:57
O sea, yo tengo un botón aquí. 00:53:01
vale lo puedo meter en cualquier punto desde aquí hasta aquí vale porque hemos dicho que no hasta el 00:53:07
borde porque si no me lo pinta afuera si me elige este punto aquí ningún problema lo me vaya y ya 00:53:14
está el problema es si me elige un punto yo aquí tendré ratón que sea muy cerca del botón del punto 00:53:20
actual si yo estoy aquí y él me lo mueve solo aquí pues mi botón mi mouse se quedaría allí 00:53:27
dentro entonces yo cuando entro en algún lado me lo tiene que mover de un tamaño suficiente o sea 00:53:34
me valen no me valen cualquier puntos me valen sólo los puntos entre aquí y aquí o aquí en un 00:53:41
cierto sentido entonces tengo que encontrar una forma para eliminar estos puntos de aquí estos 00:53:53
puntos aquí no me valen porque si el punto nuevo vale cae en uno de estos son uno de estos puntos 00:54:05
rojos y yo construiría el cuadrado aquí y se ha entrado desde este lado ahora estoy dentro del 00:54:13
botón entonces yo le tengo que decir oye mira muévelo pero así luego el punto nuevo está más 00:54:21
está demasiado cerca con respecto al punto viejo pues no me vale y yo lo que he hecho es este nuevo 00:54:30
cerca es a 50 menos y 50 más vale esto ya lo dudo como 50 el corazón en realidad como no es el centro 00:54:37
del botón es el ancho pero veo que siento de este lado no me lo puede mover de uno no tiene que 00:54:50
mover como mínimo del tamaño mismo del botón. Si entro de aquí, me lo tiene que mover todo el botón, 00:54:58
y si entro de aquí, me lo tiene que mover todo el botón a la izquierda. Entonces el tamaño mínimo 00:55:07
de este 50 en realidad no es 50, es o .build o .getbuild. Esto me vale sea cual sea el botón, 00:55:11
porque si luego yo lo muevo solo de 50 y hago un botón de 200, pues ya no me funciona. 00:55:27
con este de aquí lo que decía antes de no me gustan los números metidos así a secas porque 00:55:31
luego hago un botón más grande y a este código no me sirve desde este código de aquí es general 00:55:41
y se basa sobre el tamaño del objeto el tamaño de la ventana si tú hace la ventana más pequeña 00:55:45
funciona igual la ventana de función igual y con esto me estoy diciendo mira pues ya me un nuevo 00:55:51
un nuevo punto, ¿vale? 00:55:59
Este nuevo punto, como mínimo, 00:56:01
tiene que ser distante 00:56:03
desde el viejo punto 00:56:04
o punto red-white. 00:56:06
Yo quiero 00:56:10
un nuevo punto que sea como mínimo 00:56:11
distante el tamaño mismo 00:56:13
del botón. 00:56:14
Entonces, que haya entrado a la izquierda, que haya entrado 00:56:17
a la derecha, me da igual, porque 00:56:19
se moverá lo suficiente para que el ratón 00:56:20
nunca esté dentro del botón después 00:56:23
de haberlo movido. 00:56:25
¿Entiendes? Quiero estar seguro 00:56:27
le pongo un margen y esto si no mueve exactamente de esto pues le pongo un margen 00:56:29
si el botón es muy grande igual daría un error 00:56:40
si es demasiado grande pues posiblemente saldría afuera pero con que haya otra 00:56:46
posición ahora si queréis como lo hacemos más grande vemos que pase 00:56:52
A lo mejor se queda ahí dentro dando vueltas y cosas por el estilo hasta que no lo encuentre, 00:56:54
pero aunque haya una solución debería, en cierto momento, salir. 00:57:04
A lo mejor tarda mucho porque como lo está haciendo random, tardaría mucho en contar. 00:57:08
Si yo hago el botón más grande que la mitad de la ventana, posiblemente no hay solución. 00:57:17
se quedaría ahí, eso también podría poner un contador y decir tú intentas lo mil veces, si mil veces no has 00:57:26
encontrado una solución, pues que el usuario quite el botón. 00:57:38
De esta forma, nosotros así nos debería valer y debería funcionar. 00:57:45
Al final, cuando tengo el nuevo X que estará lejanos al menos el movimiento mínimo desde el antiguo, pues 00:57:49
Entonces, ahora debería tener esta cosa aquí que siempre salta, nunca salta un poquito. 00:57:57
¿Veis que salta? Puede saltar poco, pero nunca me encontraré dentro del botón cuando salta. 00:58:08
Y siempre va desde cero hasta un límite máximo, pero siempre se ve el botón, no salta nunca afuera. 00:58:18
Pues ahora pillo esto y hago lo mismo pero con i vieja, mínimo i vieja es igual, mínimo i vieja es esa y aquí hate, vale, después pongo los hate. 00:58:24
In move, i, mismo i, mismo i, ahora a ver, algún i seguramente me lo perderé por la... 00:58:49
Sí. Y ahora, ¿dónde está while? Te pongo height, ¿ah? Height. Y esto es height. 00:59:01
¿Vale? Entonces, ahora, como puedo suerte, esto se ha ido. Esto no está... 00:59:29
¿Por qué no está brujelín y que llega? 00:59:43
Ah, porque he puesto get layout x. 00:59:46
que se mueve en este cuadrado 00:59:49
pero nunca 01:00:03
y esto 01:00:04
son aleatorios los dos 01:00:09
pero este de aquí tiene esta cosa 01:00:12
que cuando puede se mueve solo un poquito 01:00:14
es así 01:00:16
está más cerca 01:00:18
mientras que este de aquí es aleatorio completamente 01:00:20
¿sí? 01:00:22
¿dudas? 01:00:29
Sí, pues 01:00:31
¿Cómo era para poner que el label de te gusta programación quede como atrás de todo? 01:00:32
No lo hemos hecho, no lo sé. 01:00:39
Porque yo cuando paso el mouse por encima de ese label sin querer me sale un error. 01:00:42
O sea, me sigue funcionando, pero me sale como un error. 01:00:46
Cuando pasas el ratón encima del label, porque probablemente habrás puesto en el label un onMouseEntity. 01:00:49
No tengo nada. 01:00:57
Tú has puesto aquí un algo, entonces claro, cuando pases por ahí, hace algo. 01:01:02
¿Podrías poner un segundito el código del primer botón no, que pusiste todos los sigs y demás? 01:01:14
Pero no lo mires, hazlo, pénsalo, o sea, los límites que tienes que poner, eso es, 01:01:22
si estoy fuera de unos límites, pues entonces lo pongo al otro lado. 01:01:33
A lo mejor no lo tienes grabado, luego te los pongo, pero si no... 01:01:36
Vamos a ver, entonces, esto es, para ponerlo, a ver, un problema que puede surgir es si 01:01:41
el botón no está justo detrás de otro es que este botón está encima entonces no daría problemas pero 01:01:49
si en el aquí yo lo muevo entonces puede ser que un botón no esté detrás esto tengo que tenerlo 01:02:00
cuidado ese botón nos está detrás cuando yo paso por aquí no pillará el botón ni siquiera lo pude 01:02:18
decir que una forma de solucionarlo es con esto vale en la jerarquía poner que el label esté detrás 01:02:24
entonces como el level es el primero es el que está detrás de todos entonces los botones 01:02:35
siempre estarán por encima cuando se solapan uno a otro o estará encima de los demás el orden con 01:02:40
que se hacen determina también esto ahora por otro lado yo creo vamos a ver si lo encuentro 01:02:46
y tengo el botón aquí por ejemplo o punto ser porque a veces pueden puedes puedes indicar el 01:02:56
zeta o sea a qué altura está vale en html por ejemplo se hace así aquí no lo sé 01:03:06
¿Veis que está también un scale z? 01:03:14
Entonces, set layout z, no. 01:03:19
Set z, por esto set translate z, pues sirve algo, no lo sé, habría que verlo, ¿vale? 01:03:23
Pero en las interfaces la z no existe, la z sería la profundidad, ¿vale? 01:03:33
Pero se puede utilizar a veces para indicar quién de los controles está más adelante y quién de los controles está más atrás. 01:03:38
Entonces, si yo necesito que un control esté siempre encima de los demás porque se puede mover, pues puedo jugar con el Z para eso. 01:03:46
A veces eso se puede hacer también en HTML barra CSS, a veces se hacía, porque ahora se hace con otras tecnologías, 01:03:54
Pero si yo tengo dos paneles con cosas distintas en la misma ventana, en la misma página, si cambio la Z, cuando pongo la Z esta aquí, se ve el primer panel. 01:04:02
Cuando le cambio la Z y pongo esta Z detrás de la otra, ahora se ve el segundo panel. 01:04:15
Que sirve como para dar la ilusión de que has cambiado ventana, pero todos en la misma ventana. 01:04:19
Tienes dos interfaces, una que está detrás, entonces no se ve, y una que está delante y se ve. 01:04:27
Cuando tú cambias la Z, pues se vuelve a pintar y ahora se ve la que estaba detrás y la que estaba delante ahora se queda escondida. 01:04:33
Pero hoy en día se suele utilizar otra cosa. 01:04:46
Aquí, por ejemplo, si quiero hacer cosas así, es más elegante hacerlo con unos tabs, como hemos visto la otra vez. 01:04:49
Sería la única utilidad que tiene el Z, porque esto es en 2D prácticamente, ¿no? 01:04:56
El SimBusiness trabaja en 2D. 01:05:00
La Z sirve sólo en caso en que el componente se solape, que no es lo normal. 01:05:01
Normalmente es difícil que un botón se mueva o que una cosa se mueva. 01:05:10
No suele existir el componente que cuando tú te acercas cambia en otro lado. 01:05:14
Es para hacer una broma aquí. 01:05:22
esto no es real 01:05:23
lo que hemos hecho nosotros 01:05:27
nos sirve simplemente para jugar con el setlayer 01:05:29
por si en un determinado momento 01:05:33
quiero mover por efecto de un botón 01:05:36
un determinado elemento dentro de mi cosa 01:05:39
o una lista desplegable 01:05:41
y ya viene que funciona 01:05:43
vale, esto lo damos por hecho 01:05:45
Materias:
Programación
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
Autor/es:
Stefano Chiesa
Subido por:
Stefano C.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
4
Fecha:
15 de abril de 2026 - 12:24
Visibilidad:
Clave
Centro:
IES ROSA CHACEL
Duración:
1h′ 05′ 54″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
552.84 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid