Con independencia de la aplicación que quieras hacer, casi, con toda seguridad, necesitarás tarde o temprano mostrar texto. Así, sencillamente, solo mostrar texto. Las razones para mostrar texto son de lo mas diversas, para informar, para dar instrucciones, para advertir… Sea como fuere, necesitas mostrar texto. Para este fin, tienes a tu disposición un widget que te va a venir perfecto para mostrar texto con Gtk. Se trata de Gtk.Label.

Este widget te permite o mostrar texto sin formato, o también te permite mostrar texto formateado. Sin lugar a dudas se trata de un objeto imprescindible, y que vas a utilizar en innumerables ocasiones, con lo que es necesario dedicarle el tiempo, y el espacio que se merece.

Pero, tal y como te indico en el párrafo anterior, solo te servirá para mostrar texto. No te permite que el usuario introduzca texto. Para esto, en el siguiente capítulo del tutorial, encontrarás un widget pensado con esta finalidad.

Mostrar texto con Gtk y JavaScript

Mostrar texto con un widget del tipo Gtk.Label es tan sencillo, como utilizar la siguiente línea de código,

let label = new Gtk.Label({
    label: 'Etiqueta de ejemplo'
});

Sin embargo, Gtk.Label tiene una gran cantidad de opciones y propiedades, que puedes personalizar, para sacar el máximo partido a este widget.

De nuevo, como puedes encontrar en capítulos anteriores, en este todos los ejemplos, también los tienes en el repositorio de GitHub, para que te resulte mas cómodo y práctico seguir este capítulo del tutorial.

Una ventana de ejemplo

Para continuar con el tutorial, voy a colocar el Gtk.Label en una layout de los que pudiste ver en el capítulo anterior. Seguidamente, todo ello dentro de una ventana, que ya verás con detenimiento mas adelante. Asít, esto quedará de la siguiente forma,

#!/usr/bin/env gjs

imports.gi.versions.Gtk = '3.0'
const {Gtk, GObject} = imports.gi;

Gtk.init(null);

var Ventana = GObject.registerClass(
    class Ventana extends Gtk.Window{
        _init(){
            super._init({
                defaultWidth:200,
                defaultHeight: 200
            });
            this.connect('destroy', ()=>{
                Gtk.main_quit();
            });
            let layout = new Gtk.Box();
            this.add(layout);
            // --- inicio ---
            let etiqueta = new Gtk.Label({
                    label: 'Ejemplo 1'
            });
            // --- fin ---
            layout.pack_start(etiqueta, false, false, 5
            );
        }
    }
);
let ventana = new Ventana();
ventana.show_all();

Gtk.main();

Si te fijas, he puesto entre --- inicio --- y --- fin --- la parte del código que voy a ir modificando en los siguientes ejemplos a lo largo de todo el tutorial. De esta manera no es necesario repetir una y otra vez el código correspondiente a la definición de la ventana, que como he comentado anteriormente, ya profundizaré en el en capítulos posteriores.

Propiedades de Gtk.Label

En los siguientes apartados te iré mostrando distintas propiedades de Gtk.Label. Como te puedes imaginar, no te los voy explicar todo, porque si no este capítulo del tutorial, prácticamente no tendría fin. Te mostraré aquellos que son mas relevantes, o al menos lo que yo utilizo con mas frecuencia.

label

Esta propiedad es la mas importante de todas, y la que realmente le dan sentido a este widget. Aquí es donde defines el texto que vas a mostrar. Indicar, como verás en el siguiente apartado, que dependiendo de otras propiedades, se puede modificar como se muestra el contenido.

use-markup

Aunque la propiedad use-markup no la utilizo con frecuencia, lo cierto, es que te puede dar mucho juego. Esta propiedad te permite dar estilo al texto que estás mostrando con Gtk.Label. Para ello, tienes que utilizar una sintaxis muy similar a HTML, aunque ya te advierto que no es exactamente igual.

Por ejemplo, si quisieras mostrar parte del texto en color verde, puedes hacerlo de la siguiente forma,

let label = new Gtk.Label({
    label: '<b><span color="green">Ejemplo</span> 2</b>',
    "use-markup": true
});

Por un lado tienes que indicar utilizando "use-markup": true, que utilizarás esta propiedad, y además tienes que definir en label las características del texto que vas a mostrar.

xalign e yalign

Estas dos propiedades te permiten definir donde se coloca el texto en el Gtk.Label. La primera de las dos, xalign, lo define horizontalmente, mientras que la segunda, yalign lo hace verticalmente. En ambos casos, se trata de un número real de 0.0 a 1.0. De esta manera el 0.0 está al principio y el 1.0 al final. Y por supuesto, tal y como te imaginas, el 0.5 es el centro.

En el siguiente ejemplo coloco el texto justo en el centro. Además he utilizado algunas propiedades adicionales como son width-chars para indicar el tamaño de Gtk.Label en caracteres. Por otro lado, he añadido la propiedad margin para que el texto no quede pegado a los bordes de la ventana, sino que tenga una separación mínima de ese borde.

let label = new Gtk.Label({
    label: 'Ejemplo 1',
    "width-chars": 20,
    xalign: 0.5,
    yalign: 0.5,
    margin: 5
});

justify

Dependiendo del layout en el que vaya ubicado el Gtk.Label necesitarás utilizar la propiedad justify. Esta propiedad te permite situar el widget en una posición u otra dentro del layout.

Así, esta propiedad puede tomar los siguientes valores,

• Gtk.Justification.CENTER centra el texto
• Gtk.Justification.FILL completa el texto con espacios para llenar por completo el Gtk.Lable
• Gtk.Justification.LEFT sitúa el texto a la izquierda
• Gtk.Justification.RIGHT sitúa el texto a la derecha

angle

Esta propiedad te permite mostrar el texto contenido en el Gtk.Label girado el ángulo que tu le indiques. Indicar que gira el texto en el sentido contrario a las agujas del reloj. Por ejemplo,

new Gtk.Label({label: '<b>Ejemplo 2</b>',
               angle: 45.0,
               "use-markup": true
});

width-chars

La propiedad width-chars te permite definir el ancho del Gtk.Label en base a un número de caracteres. Esta propiedad se complementa con la propiedad que te he comentado anteriormente justify, de forma que si el texto que corresponde no es capaz de completar la línea, se añadirán los espacios necesarios en función del tipo de justificación que hayas indicado. Por ejemplo,

new Gtk.Label({label: 'Ejemplo2: En un lugar de la mancha de cuyo nombre no quiero acordarme',
               wrap: true,
               "width-chars": 10,
               justify: Gtk.Justification.FILL,
               selectable: true
});

wrap

Esta propiedad define como se muestra el texto dentro de un Gtk.Label. En el caso de que sea cierta, el texto se podrá adaptar a alguna de las propiedades vista anteriormente. En lugar de verse en una única línea se podrá ver en varias líneas dependiendo del ancho del widget.

Por ejemplo, en el caso anterior, has definido la propiedad wrap a cierto, y el ancho a 10. Esto quiere decir, que cuando en una línea se supere este ancho se pasará a la siguiente línea. Así, el texto anterior se verá como,

Ejemplo2:
En un lugar
de la
mancha de
cuyo
nombre no
quiero
acordarme

La propiedad wrap va asociada con otra propiedad que indica como se comporta el Gtk.Label en el caso que wrap sea cierta. Se trata de wrap_mode, que puede tomar tres valores,

• Pango.WrapMode.CHAR el ajuste se realiza por letras
• Pango.WrapMode.WORD en este caso el ajuste se realiza por palabras
• Pango.WrapMode.WORD_CHAR

selectable

Esta propiedad es la que permite, o no, poder seleccionar el texto contenido en el Gtk.Label. De esta forma, cuando lo tengamos definido como cierto, con el ratón, podremos seleccionar el texto para poder copiar, mientras, que en caso de que lo hayamos definido como falso no lo podremos seleccionar para copiar.

ellipsize

Esta es otra propiedad interesante de Gtk.Label que te permite modificar lo que se muestra en el contenido de Gtk.Label en función del espacio disponible. De esta forma, en caso de que no se pueda mostrar todo el texto, se mostrarán parte del texto seguido, o precedido, por tres puntitos .... Seguro que esto lo has visto en mas de una ocasión,

En un lugar d...

Esta propiedad puede tomar cuatro valores,

• Pango.EllipsizeMode.END
• Pango.EllipsizeMode.MIDDLE
• Pango.EllipsizeMode.NONE
• Pango.EllipsizeMode.START

Estos valores indican donde se mostrarán los tres puntos, si al final, en medio, al inicio, o simplemente no se mostrarán.

Conclusión

Estas son algunas de las propiedades, que he entendido mas interesantes del objeto Gtk.Label para mostrar texto con Gtk. Existen muchas otras propiedades, y te animo a que las consultes y que juegues con ellas, para que sepas las posibilidades que tienes a la hora de mostrar texto con Gtk y JavaScript. Puedes utilizar roojs, para revisar el resto de propiedades de este objeto.

---

Imagen de portada de Markus Winkler en Unsplash