Unos pocos días antes de comenzar a preparar este tutorial sobre GJS, publiqué un capítulo del tutorial diálogos para Scripts. Este nuevo capítulo explica como crear esos diálogos con JavaScript. Y fue, justo en ese momento cuando caí en la cuenta de que faltaba precisamente esto, un tutorial para crear aplicaciones nativas en JavaScript con GJS.

Es indudable el auge que está teniendo JavaScript en estos últimos años. Inicialmente fue solo en la web, pero poco a poco a ido atravesando fronteras, hasta llegar al servidor, y por supuesto al escritorio. Desde mi punto de vista, esto es una gran ventaja, en tanto en cuanto, facilitas a los desarrolladores, que creen interfaces o incluso scripts, en el lenguaje de programación que dominas. Creo que es un punto a favor.

Así, en este tutorial, voy a darte una visión sobre como puedes crear tus propias interfaces para el escritorio utilizando la combinación de JavaScript y Gtk+. Esto, no quiere decir que solo lo puedes utilizar en el entorno de escritorio GNOME. Lo vas a poder utilizar en cualquier entorno de escritorio.

Aplicaciones nativas en JavaScript con GJS

¿Que es GJS?

Aunque en el tutorial sobre diálogos para scripts, que te he mencionado anteriormente, hago uso de GJS, aquí es el sitio perfecto para definir que es. GJS en ocasiones denominado GNOME JavaScript es un entorno de desarrollo que lo podrías comparar con Node.js. Yo entiendo esta comparación desde un punto de vista conceptual, en tanto en cuanto, para GJS, actualmente, no existe el vasto ecosistema de módulos y librerías que si encontrarás en Node.js, aunque todo es cuestión de tiempo.

GJS te proporciona enlaces (bindings) al ecosistema GTK+, lo que te permitirá desarrollar potentes aplicaciones nativas de una forma relativamente sencilla, cómoda y práctica.

SpiderMonkey

GJS está construido sobre el motor JavaScript SpiderMonkey, que es el motor de Mozilla implementado en C y C++, y que utiliza entre otros Firefox, y que se liberó bajo licencia MPL2.

Introspección GObject

La otra pieza que se utiliza para enlazar las librerías implementadas en C con JavaScript, o cualquier otro lenguaje, es la introspección GObject. Las librerías implementadas en C permiten generar archivos con meta información. Así, los lenguajes de enlace (binding), como Python y JavaScript entre otros, son capaces de leer esta meta información, y hacer el trabajo.

GTK+

La última de las piezas sobre la que he hablado es GTK+. GTK+, es un conjunto de herramientas compuesto por un gran número de elementos, denominados widgets, y algunas otras herramientas.

El objeto de este conjunto de herramientas es facilitarte la posibilidad de crear tus propias aplicaciones. Y para ello, hay que destacar, que estos widgets, están orientados a eventos.

Pero, ¿que es un widget?. Un widget, no es mas que un elemento de tu aplicación. Un elemento, con el cual tu puedes interaccionar de diferentes formas. Así, seguro, que ahora te vienen a la cabeza diferentes widgets, con los que interaccionas a diario, como pueden ser ventanas, botones, menús, desplegables, y mucho mas.

Una de las características mas interesantes de los widget es que te permiten interactuar con la aplicación. Y esta interacción se realiza a través de eventos. De ahí, lo que he mencionado anteriormente, de que se trate de objetos orientados a eventos.

Y ¿que eventos interaccionan con un widget?. Tu mismo, ya te lo estás imaginando, porque si un botón es un widget, un clic es un evento. Y no solo el hecho de hacer clic, también tienes, cuando pasas por encima del botón, que es lo que se conoce como hover, o cuando entras o sales de la zona ocupada por el botón en el interfaz gráfico.

Así, cuando se ha terminado de dibujar la interfaz que has implementado, esta se queda a la espera de eventos. No va a hacer nada, salvo que se lo hayas programado.

Por ejemplo, en el sencillo caso de un formulario, donde preguntas nombre y contraseña, una vez se muestre por pantalla, se queda a la espera de que introduzcas los datos, y pulses algún botón.

Un ejemplo GTK+

Aprovechando el tutorial sobre diálogos para scripts, te indico a continuación un ejemplo de un diálogo, el que le solicitamos al usuario que introduzca su nombre, por ejemplo.

let dialog = Gtk.Dialog.new();
dialog.set_title('https://atareao.es');
dialog.add_button('Si', Gtk.ResponseType.YES);
dialog.add_button('No', Gtk.ResponseType.NO);
let box = Gtk.Box.new(Gtk.Orientation.HORIZONTAL, 10);
dialog.get_content_area().add(box);
let label = Gtk.Label.new('Dime tu nombre');
box.pack_start(label, true, true, 5);
let entry = Gtk.Entry.new();
box.pack_start(entry, true, true, 5);
dialog.show_all();
if(dialog.run() == Gtk.ResponseType.YES && entry.get_text()){
    print(entry.get_text());
}

No te preocupes ahora mismo de todo el código que te he puesto, que probablemente te pueda sonar extraño. Simplemente quiero que te fijes en un par de detalles.

• Al diálogo que hemos creado le añadimos un par de botones, a los que asignamos una respuesta diferente a cada uno de ellos Gtk.ResponseType.YES y Gtk.ResponseType.NO.
• Para mostrar el diálogo utilizamos dialog.run. Y esperará hasta que demos una respuesta. Alguna de las que hemos definido con anterioridad. Pero hasta que no pulsemos alguno de los botones, el diálogo, permanecerá estático, sin hacer nada, nada de nada.

Instalando GJS

Lo primero indicarte que GJS se encuentra en los repositorios oficiales de la mayoría de las distribuciones. Tan solo le tienes que dar un vistazo a pkgs.org, para que te hagas una idea.

Si trabajas con el escritorio GNOME, lo mas normal es que lo tengas instalado, pero en caso de que no sea así, tan solo tienes que hacer un sudo apt install gjs.

El siguiente paso es comprobar la versión de gjs que tienes instalado, que lo puedes hacer con gjs --version.

Y por último crear tu primer script con GJS con el tan manido Hola mundo. Esto es tan sencillo como que edites un archivo que se llame ejemplo.js, y en su contenido pongas lo siguiente,

#!/usr/bin/env gjs
print('Hola mundo');

Ahora simplemente te queda ejecutarlo, que lo puedes hacer con gjs ejemplo.js. O bien, si le das permisos de ejecución al archivo con la instrucción chmod +x ejemplo.js, lo podrías ejecutar directamente con ./ejemplo.js.

Conclusión

Básicamente GJS y GTK+ son las piezas fundamentales para comenzar a desarrollar tus aplicaciones. Así, en los próximos capítulos del tutorial te mostraré los objetos, widgets, que tienes al alcance de tus manos, para comenzar a crear tus propias aplicaciones nativas en JavaScript con GJS. Y para esto, solo necesitas, seguir los capítulos del tutorial, un poquito de paciencia y práctica.

---

Más información,

• Guía de GJS

Imagen de portada Joshua Aragon en Unsplash