1. ¡Hola, GNOME!

Comience con una página web

Aquí hay código HTML, CSS, y JavaScript básico. ¿Le resulta familiar?


<!DOCTYPE html>
<html>
    <head>
        <title>Hello, GNOME!</title>

        <!-- Use JavaScript to show a greeting when someone clicks the button -->
        <script type="application/javascript">
        function greeting () {
            document.getElementById ("greeting").innerHTML = ("O hai!");
        }
        </script>

        <!-- Very basic CSS style using the GNOME font -->
        <style type="text/css">
            body {
                font-face: Cantarell, sans-serif;
                text-align: center; }
        </style>

    </head>
    <body>
        <br /> <br />
        <button type="button" onclick="greeting()">Hello, GNOME!</button>

        <!-- Empty H1 element gets filled in when the button is clicked -->
        <h1 id="greeting"></h1>
    </body>
</html>

Guarde esto como hellognome.html, y observe cómo se ve cuando lo ejecuta.

Puede ejecutar el código anterior abriendo hellognome.html en un navegador web. Pero aquí, se va a crear una aplicación de GNOME que ejecute la aplicación web de dentro, como ve en la captura de pantalla. Podrá redimensionar y maximizar la ventana, y pulsar en la «X» en la esquina para cerrarla, al igual que esperaría de cualquier otra aplicación de GNOME. La diferencia es que esta ejecutará el código web de dentro.

¿La mejor parte? Se va a continuar usando JavaScript para escribir todas las partes que hacen que la aplicación funcione con GNOME. Échele un vistazo al código y vea cómo se hace.

Crear una ventana de GNOME para enmarcar la aplicación web

Primero, se necesita decirle a GNOME que esta es una aplicación de JavaScript, que usa gjs. gjs es la forma de GNOME de convertir su código de JavaScript en instrucciones que entiende, por lo que esta línea siempre debe ir al principio de sus aplicaciones.


#!/usr/bin/gjs

Después de eso, necesita decirle a GNOME qué bibliotecas quiere importar.


const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const Webkit = imports.gi.WebKit;

Al igual que las bibliotecas adicionales como jQuery, que permiten hacer cosas adicionales con JavaScript, cada una de estas bibliotecas le da capacidades nuevas a las aplicaciones de GNOME:

Gtk y Lang son partes básicas de cualquier aplicación de GNOME, que le permiten crear ventanas y widgets, y juntarlos.

GLib es una biblioteca de ayuda, que permite hacer cosas como decirle a GNOME dónde está el archivo hellognome.html que creó.

Y Webkit es un motor de procesamiento web, que usará básicamente para crear una ventana de navegador con la que abrir el archivo HTML.

Ahora se crea la aplicación en sí:


const HelloGNOME = new Lang.Class ({
    Name: 'Hello GNOME',

Esto le resultará familiar si ha trabajado con JavaScript orientado a objetos anteriormente. Así es; toda la aplicación es una clase llamada «HelloGNOME». Y como puede ver, se le ha dado una propiedad que dice cuál es su nombre.


    // Create the application itself
    _init: function () {
        this.application = new Gtk.Application ();

        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Callback function for 'activate' signal presents windows when active
    _onActivate: function () {
        this._window.present ();
    },

    // Callback function for 'startup' signal builds the UI
    _onStartup: function () {
        this._buildUI ();
    },

Aquí hay código que prácticamente copiará y pegará por cada aplicación que construya en JavaScript. Crea una «Application» nueva, y después enlaza sus señales «activate» y «startup» a funciones que muestran la ventana y construyen su interfaz de usuario, respectivamente.

¿Qué significa eso? Bueno, todo en una aplicación de GNOME envía una señal cuando algo importante sucede. Un botón puede enviar la señal «clicked» cuando lo pulsa, por ejemplo. Su trabajo es conectar las señales a funciones que las manejen, y hagan las cosas que quiere que ocurran. Esto se hace usando el método «connect» de cada objeto, que toma dos argumentos: la señal que quiere manejar, y la función «Lang.bind», que hay que usar para decirle a «connect» qué función quiere que maneje la señal.

En este caso, se quiere que «_onActivate» maneje la señal «activate», y «_onStartup» la señal «startup». «_onActivate» sólo le dice a la ventana que se presente; para que, básicamente, cada vez que haga Alt Tab a la aplicación, aparezca como uno espera. «_onStartup» llama a «_buildUI», que es la función que crea la interfaz de usuario y que verá a continuación.

Cuando copie y pegue el código anterior para sus propias aplicaciones, asegúrese de cambiar el nombre por uno único cada vez.

Diseñar la IU de la ventana

En la función «_buildUI», se le describirá a GNOME la ventana y sus elementos, uno a la vez. Después de eso, se conectará y se mostrará todo junto.


    // Build the application's UI
    _buildUI: function () {

        // Create the application window
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            title: "Welcome to GNOME",
            default_height: 200,
            default_width: 400,
            window_position: Gtk.WindowPosition.CENTER });

El primer objeto que se crea es una «ApplicationWindow». Necesita un texto para la barra de título, y su propiedad «application» tiene que ser la aplicación que se creó anteriormente. Más allá de eso, hay varias maneras de personalizar su apariencia. Podrá encontrar más detalles en la página de referencia ApplicationWindow. Como puede ver aquí, se le dio una altura y anchura predeterminada (medidas en píxeles), y se le dijo a GNOME que se quiere que la ventana aparezca en el centro de la pantalla.


        // Create a webview to show the web app
        this._webView = new Webkit.WebView ();

        // Put the web app into the webview
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
            "/hellognome.html", null));

¿Recuerda cómo se importó «Webkit» al comienzo? Aquí se está creando una instancia nueva de la clase «Webkit» llamada «WebView», que es más o menos una ventana de navegador que puede poner dentro de su aplicación. Después de eso, se le da el URI que quiere que cargue cuando la aplicación inicia.

Se podría darle sólo un URI web, como http://gnome.org. En su lugar, aquí se usan algunas funciones de ayuda de GLib para decirle a «WebView» dónde está el archivo hellognome.html. «GLib.get_current_dir» devuelve la carpeta en la que se está ejecutando la aplicación, y «GLib.filename_to_uri» convierte la ruta del archivo y su nombre en un URI que la función «load_uri» del «WebView» entiende (el segundo parámetro de «filename_to_uri» debe ser «null» a menos que sepa para qué se usa y tenga una razón para cambiarlo).


        // Put the webview into the window
        this._window.add (this._webView);

        // Show the window and all child widgets
        this._window.show_all();
    },

});

Cada ventana puede contener un, y sólo un, widget. Normalmente usaría un widget contenedor como una Rejilla para poner dentro múltiples widgets, y después usar la función «add» de la ventana para añadírsela. Aquí, sólo se necesita el «WebView», por lo que es todo lo que se añade. Después de eso, al final de la función «_buildUI» que crea la ventana, se le dice que se muestre con su contenido.


// Run the application
let app = new HelloGNOME ();
app.application.run (ARGV);

Finalmente, se crea una instancia nueva de la clase «HelloGNOME» y se le dice a GNOME que la ejecute.

Ejecutar la aplicación de GNOME

Ahora que ha creado su primera aplicación de GNOME, es hora de probarla. No necesita compilarla o instalar algún software especial, GNOME tiene incluido gjs para permitirle ejecutar GNOME Shell. Sólo guarde hellognome.html y la aplicación en sí, hellognome.js en una carpeta a la que pueda acceder con la terminal (generalmente se abren en su carpeta personal, la que se llama como su usuario). Después de eso, abra una terminal, vaya allí, e introduzca:

$ gjs hellognome.js

Debería ver más o menos la misma captura de pantalla de antes, con un botón que puede pulsar para hacer aparecer un mensaje corto.

Puede usar el comando de la terminal

$ cd (nombre de la carpeta)

para navegar entre carpetas dentro de la terminal, y llegar donde guardó los archivos. También hay una extensión para Nautilus, el gestor de archivos de GNOME, que le permite pulsar en cualquier lado con el botón derecho para abrir una terminal allí. Búsquela en la aplicación que usa para instalar software nuevo (como «Añadir/Quitar programas» o el «Centro de software»).

¿Qué viene ahora?

Siga con el próximo tutorial para aprender cómo construir aplicaciones de GNOME «nativas» que se ven como las otras, en lugar de una vista web con código HTML dentro. O échele un vistazo a algunas muestras de código, si quiere ver código de ejemplo para cada widget de GTK+.

Finalmente, si sólo quiere construir aplicaciones de GNOME usando bibliotecas de JavaScript diseñadas para la web, puede simplemente parar aquí y hacerlo. Échele un vistazo a los últimos tutoriales para aprender a crear un archivo «.desktop» para su aplicación, que le permitirá aparecer en el menú de actividades de su escritorio junto a las otras.

Código de ejemplo completo

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0';

const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Webkit = imports.gi.WebKit;

class HelloGNOME {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application ();

        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
    }

    // Callback function for 'activate' signal presents windows when active
    _onActivate() {
        this._window.present();
    }

    // Callback function for 'startup' signal builds the UI
    _onStartup() {
        this._buildUI();
    }

    // Build the application's UI
    _buildUI() {

        // Create the application window
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            title: "Welcome to GNOME",
            default_height: 200,
            default_width: 400,
            window_position: Gtk.WindowPosition.CENTER });

        // Create a webview to show the web app
        this._webView = new Webkit.WebView ();

        // Put the web app into the webview
        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
            "/hellognome.html", null));

        // Put the webview into the window
        this._window.add (this._webView);

        // Show the window and all child widgets
        this._window.show_all();
    }

};

// Run the application
let app = new HelloGNOME ();
app.application.run (ARGV);