Unidad 9 Interfaces gráficas de usuario. JavaFX. Wordle.

Un vez ya estamos familiarizados con el diseño de aplicaciones con Scene Builder (vistas), sabemos hacer uso de un controlador y utilizamos modelos de datos, vamos a desarrollar el juego que causa furor desde finales de 2021.

El objetivo final es desarrollar este juego:

Como podemos observar en 3 intentos hemos resuelto la palabra del día y el botón de validar se ha quedado deshabilitado.

Diseño de la vista (Scene Builder)

Para la vista vamos a utilizar los siguientes componentes:

Como se puede observar dispondremos de un contenedor Pane que contendrá un GridPane, un TextField, un Button y una label.

• Pane:

  • Properties:

    • -fx-background-color : #b2b19c

  • Layout:

    • Pref Width: 313
    • Pref Height: 369

Dentro del GridPane si nos fijamos tiene un total de 5 columnas y seis filas, lo que se corresponde con la posibilidad de tener 6 palabras (6 filas) de 5 letras cada una (columnas). Este contendrá en cada una de las celdas un TextField.

Como se puede apreciar, el fx:id de cada uno de estos se utiliza una nomenclatura que permita luego desde el controlador poder referenciar estos y saber que carácter contiene.

La forma más sencilla para evitar repetir código es ubicar un primer TextField en la primera celda y configurar este con las características que nos interesan y una vez hecho esto, lo que realizamos es un copiar y pegar en el resto de celdas de este TextField.

Las características de los TextField de cada una de las celdas son las siguientes:

• TextField (Gridpane)

  • Properties:

    • Font: (Arial 22px (Bold))
    • Editable: Desmarcado
    • Alignement: CENTER

  • Layout:

    • Pref Width: 69
    • Pref Height: 26

Tenemos una label, a la que le he llamado yo LabelChivato, que nos va a mostrar la palabra que debemos encontrar, es una ayuda para que podamos probar el funcionamiento de nuestro juego. Esta misma se va a utilizar para luego mostrar los mensajes de aciertos o errores.

• Label (LabelChivato)

  • Properties:

    • Text: Se puede dejar en blanco.
    • Font: Arial 14 px.
    • Text Fill: #1223e1
    • Content Display: CENTER.
    • Alignement: CENTER.

  • Layout:

    • Pref Width: 280
    • Pref Height: 20

  • Code:

    • fx:id : LabelChivato (Este es mi identificador)

En este apartado veremos los 2 últimos elementos que necesitamos

• TextField (TextFieldPalabra) En este vamos a introducir la palabra a validar.

  • Properties:

    • Promp Text: Introduce la palabra.
    • Font: System 12px
    • Editable: Marcado.

  • Layout:

    • Pref Width: 147
    • Pref Height: 25

  • Code:

    • fx:id : TextFieldPalabra (Este es mi identificador)

• Button (btnValidar) Es quien se va a encargar de llevar a cabo parte de la lógica de la aplicación.

  • Properties:

    • Text: Validar.
    • Font: Arial 14px (Bold)
    • Alignement: CENTER.
    • -fx-background-color: #1223e1

  • Code:

    • fx:id : btnValidar (Este es mi identificador)
    • On Action: btnValidarClick (Este es el nombre de mi método)

   

   

Con todo ello ya tendremos nuestro diseño y deberemos pasar al controlador.

Para ello vamos a necesitar que en el proceso de carga obtener la palabra del día. Para ello seleccionaremos aleatoriamente una palabra de entre las 800 de las que disponemos en la base de datos.

Esto implica que deberemos implementar el patrón Singleton para acceder a nuestro MySQL (En los recursos de la unidad tenéis el fichero de base de datos para cargarlo).

Una vez tenemos cargada la palabra, nos la podemos mostrar en la etiqueta chivato para afinar nuestro juego.

A tener en cuenta por cada validación de palabra:

Los colores a utilizar son los siguientes:

1. Si la letra de la palabra que hemos introducido coincide con la de la palabra del día en posición, colocaremos el fondo de color verde. En hexadecimal el color es el siguiente: #179848
2. Si la letra que hemos introducido aparece en la palabra del día pero no coincide en posición colocaremos el fondo color naranja. En hexadecimal el color es el siguiente: #B7791F
3. Si esa letra no existe en la palabra del día colocaremos el fondo color gris. En hexadecimal el color es el siguiente: #2D3748

¿Cómo cambiamos el color de fondo de un TextField?

TextFieldP11.setStyle("-fx-control-inner-background: #179848");

De esta forma le podemos cambiar el color de fondo a un TextField.

Recomendación.

Haz un método que realice lo siguiente, reciba 2 parametros: uno de ellos será la palabra del día y el otro será la palabra aleatoria.

Este devolverá un array de colores con los colores a utilizar por esa palabra.

Por ejemplo:

xxxxxxxxxx
private static String[] generaArrayColores(String palabra, String palabra_aleatoria)

Te va a ser necesario para realizar el cambio de colores de los fondos de los TextField.

Una vez has acertado la palabra, bloquearás el botón para que no se pueda pulsar. Se puede realizar con el método de los button llamado setDisable(true).

Muestra en la label si ha acertado y el número de intentos o de lo contrario no ha conseguido adivinarla.