Como reemplazar y centrar textos incrustados en archivos Adobe Illustrator con JavaFX

Uno de los beneficios de crear gráfica para JavaFX con Adobe Illustrator, es que luego esta puede ser reemplazada sin necesidad de alterar el código. Esto permite cambiar rápidamente la apariencia de una aplicación o dotarla de "pieles" o "skins" (distintas apariencias, a elección del usuario). Estas plantillas, que permiten incluso cambiar la posición de los elementos en la interfaz de usuario, entre otras cosas, pueden contener textos, que son posibles de reemplazar (haciendo su contenido dinámico).

Pero, para hacerlo hay un par de detalles que es necesario conocer.

Primero crearé una plantilla con Adobe Illustrator:



Una vez generado el archivo .FXZ podemos analizar el código.

Sólo me concentraré en la manipulación de textos, ya que en artículos anteriores he mostrado como trabajar con otro tipo de elementos gráficos generados con Adobe Illustrator.

Primero, crearemos una clase que cargue el archivo gráfico (.fxz) y que obtenga de él los nodos con los objetos.

import javafx.scene.Node;
import javafx.fxd.UiStub;
import javafx.scene.text.*;

public class gaugeui extends UiStub {

    override public var url = "{__DIR__}gauge.fxz";

    public var reflex: Node;
    public var needle: Node;
    public var decoration: Node;
    public var body: Node;

    public var dispvalue: Text;
    public-read var dispvaluew;
    public-read var dispvaluex;

    override protected function update() {

        reflex = getNode("reflex");
        needle = getNode("needle");
        decoration = getNode("decoration");
        body = getNode("body");

        dispvalue = getNode("dispvalue") as Text;
        dispvaluew = dispvalue.boundsInLocal.width;
        dispvaluex = dispvalue.boundsInLocal.minX;

    }
}

Revisemos el código:

override public var url = "{__DIR__}gauge.fxz";

Esa línea indica desde donde debe descargar el archivo con la gráfica: {__DIR__} apunta al mismo directorio que la aplicación;

    public var reflex: Node;
    public var needle: Node;
    public var decoration: Node;
    public var body: Node;

Declara algunas variables para contener otros elementos gráficos;

    public var dispvalue: Text;
    public-read var dispvaluew;
    public-read var dispvaluex;

Declara una variable (dispvalue) de tipo TEXTO, para obtener el nodo que contiene el texto que vamos a reemplazar en este ejercicio, y dos variables adicionales asociadas a ese texto: una (dispvaluew) que contendrá el ancho del area reservada originalmente para el texto y otra (dispvaluex) que contendrá la posición horizontal original para el área de texto;

    override protected function update() {

        // obtiene los nodos graficos
        reflex = getNode("reflex");
        needle = getNode("needle");
        decoration = getNode("decoration");
        body = getNode("body");

        // obtiene el nodo, pero lo transforma en texto
        dispvalue = getNode("dispvalue") as Text;

        // obtiene el ancho del texto original
        dispvaluew = dispvalue.boundsInLocal.width;
        // obtiene la posicion horizontal original del texto
        dispvaluex = dispvalue.boundsInLocal.minX;

    }

Para rescatar los nodos desde el archivo .fxz, utilizamos los nombres de asignamos a los elementos en el diseño. En nuestro ejemplo, llamamos al elemento de texto que deseamos manipular "jfx:dispvalue" (la identificacion jfx: permite identificar las etiquetas de nodos que importará JavaFX), y por lo tanto, obtenemos ese nodo con un getNode("dispvalue"), e inmediatamente lo convertimos en un Text (as Text).

Ahora bien, uno de los inconvenientes de la modificación de los textos desde un script, es que al modificar el contenido, se modifica el ancho del elemento que contiene el texto, y dependiendo de la alineación también puede modificarse la posición horizontal.

Por eso, al obtener el nodo de texto original, también almaceno la posición (dispvaluex) y el ancho (dispvaluew) que tenía el texto en el diseño. Con esta información más la nueva información de ancho generada al modificar el contenido del texto, puedo calcular la posición centrada del texto.

Para conseguirlo, puedo hacer algo como esto:

// instancia la clase que carga la gráfica (arriba)
var ui = gaugeui{};

// variable (degree) que mostrará en el area de texto
var degree = 0.0 on replace {

    // actualiza contenido con numero entero convertido en string
    ui.dispvalue.content="{degree as Integer}";

    // obtiene nuevo ancho del texto (alterado por nuevo contenido)
    var w = ui.dispvalue.boundsInLocal.width;

    // calcula coordenada horizontal para mantener el texto
    // centrado respecto a su posicion original en el diseño
    ui.dispvalue.x = ui.dispvaluex +
                 ui.dispvaluew / 2 - w / 2;

};

Al modificarse degree, obtiene su valor entero y lo convierte en un string. Esto lo hace al incluir la variable como parte de una cadena de texto entre paréntesis de llave... "{expresión}"

A continuación, obtiene el nuevo ancho del texto modificado, con un: elemento_texto.boundsInLocal.width

Finalmente, obtiene la nueva posición horizontal del texto, usando la posición original del texto en el diseño mas la mitad del ancho del texto original. En este punto sabemos cual era el punto medio del texto original (posición respecto a la cual centraremos el nuevo texto).

A esa posición, restamos la mitad del nuevo ancho del texto.... y como resultado, el texto se mantiene visualmente centrado.



La inconveniente con el uso de TextAlignment.CENTER, es que el texto se centra respecto a las demás líneas de un párrafo (con más de una línea), entonces, si usamos un texto con una sóla línea, TextAligment.CENTER no tiene ningún efecto.

En resumen, hay que recuperar el nodo del texto por su nombre, convertilo y almacenarlo como Text, obtener el ancho y posición original del texto en el diseño... y calcular la posición horizontal del texto al modificar su contenido.

Por cierto, es posible exportar los archivos Illustrator a .fxz sin los fonts, pero si te quieres asegurar que los textos se mantendrán en apariencia, tamaño y posición, es mejor incluirlos. El resultado no es extremadamente grande, un font típico pesa cerca de 50KB.

Ojalá esto sea de utilidad.