Hola mundo (JavaScript)

Crear el programa

Script para ejecutar la aplicación

Esta tiene que ser la primera línea de su script:

#!/usr/bin/gjs

Le dice al script que use Gjs. Gjs es una vinculación de JavaScript para GNOME.

Bibliotecas que importar

const Lang = imports.lang;
const Gtk = imports.gi.Gtk;

Para que su script funcione con GNOME, se deben importar las bibliotecas de GNOME mediante introspección de GObject. En este caso, se están importando las vinculaciones de lenguaje y GTK+, la biblioteca que contiene los widgets gráficos usados para crear aplicaciones de GNOME.

Crear la ventana principal de la aplicación

const Application = new Lang.Class({
    //A Class requires an explicit Name parameter. This is the Class Name.
    Name: 'Application',

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

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

    //create the UI
    _buildUI: function() {
        this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                   title: "Hello World!" });
    },

    //handler for 'activate' signal
    _onActivate: function() {
        //show the window and all child widgets
        this._window.show_all();
    },

    //handler for 'startup' signal
    _onStartup: function() {
        this._buildUI();
    }
});

«GtkApplication» inicializa GTK+. También conecta el botón x que se genera automáticamente junto con la ventana a la señal «destroy».

Se puede empezar a construir la primera ventana. Esto se hace creando una variable llamada _window y asignándole una «Gtk.ApplicationWindow» nueva.

Se le asignara una propiedad llamada title. El título puede ser la cadena que quiera pero, para estar seguro, es conveniente que tenga una codificación UTF-8.

Ya tiene una ventana que contiene un título y un botón «cerrar» que funciona. Ahora, añada el texto «Hola mundo».

Etiqueta para la ventana

// Add a label widget to your window
this.label = new Gtk.Label({ label: "Hello World" });
this._window.add(this.label);
this._window.set_default_size(200, 200);

Una etiqueta de texto es uno de los widgets de GTK+ que puede usar si importó la biblioteca GTK+. Para usarlo, cree una variable nueva llamada «label» y asígnele una Gtk.Label nueva. Después dele propiedades dentro de las llaves «{}». En este caso, se está estableciendo el texto que la etiqueta contendrá. Finalmente, se crea y ejecuta la aplicación:

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

«Gtk.ApplicationWindow» sólo puede contener un widget a la vez. Para construir programas más elaborados necesita crear un widget contenedor como «Gtk.Grid» dentro de la ventana, y después añadirle los otros.

hello-world.js

El archivo completo:

#!/usr/bin/gjs

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

class Application {

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

       //connect to 'activate' and 'startup' signals to handlers.
       this.application.connect('activate', this._onActivate.bind(this));
       this.application.connect('startup', this._onStartup.bind(this));
    }

    //create the UI
    _buildUI() {
        this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                   title: "Hello World!" });
        this._window.set_default_size(200, 200);
        this.label = new Gtk.Label({ label: "Hello World" });
        this._window.add(this.label);
    }

    //handler for 'activate' signal
    _onActivate() {
        //show the window and all child widgets
        this._window.show_all();
    }

    //handler for 'startup' signal
    _onStartup() {
        this._buildUI();
    }
};

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

Ejecutar la aplicación desde la terminal

Para ejecutar esta aplicación, primero guárdela como hello-world.js. Luego, abra una terminal, vaya a la carpeta donde está la aplicación y ejecute:

$ gjs hello-world.js

El archivo <file>.desktop.in</file>

Ejecutar aplicaciones desde la terminal es útil al principio del proceso de crear la aplicación. Para tener una integración con la aplicación completa en GNOME 3, se necesita un lanzador en el escritorio. Para esto, necesita crear un archivo .desktop. El archivo «.desktop» describe el nombre de la aplicación, el icono que usa y varios campos de integración. Puede encontrar una descripción de los archivos .desktop aquí. El archivo .desktop.in creará el .desktop.

Antes de continuar, guarde nuevamente hello-world.js como hello-world. Después ejecute esto en la terminal:

$ chmod +x hello-world

El ejemplo muestra los requerimientos mínimos de un archivo .desktop.in.

[Desktop Entry]
Version=1.0
Encoding=UTF-8
Name=Hello World
Comment=Say Hello
Exec=@prefix@/bin/hello-world
Icon=application-default-icon
Terminal=false
Type=Application
StartupNotify=true
Categories=GNOME;GTK;Utility;

Ahora se verán algunas partes del archivo .desktop.in.

Name

El nombre de la aplicación.

Comment

Una descripción corta de la aplicación.

Exec

Especifica un comando que ejecutar cuando se elige la aplicación en el menú. En este ejemplo, «exec» sólo indica dónde encontrar el archivo hello-world y el archivo se hace cargo del resto.

Terminal

Especifica si el comando del campo «Exec» se ejecuta en una ventana de la terminal.

Para incluir su aplicación en la categoría correcta, debe añadir las categorías necesarias a la línea «Categories». Puede encontrar más información sobre las distintas categorías en la especificación del menú.

En este ejemplo se ha usado un icono existente. Para usar un icono personalizado, necesita un archivo «.svg» con su icono guardado en /usr/share/icons/hicolor/scalable/apps. Escriba el nombre del archivo del icono en el archivo «.desktop.in», en la línea 7. Puede obtener más información sobre los iconos en Instalar iconos para temas, Instalar iconos para temas y en freedesktop.org: especificaciones/icon-theme-spec.

El sistema de construcción

Para que su aplicación forme parte realmente del sistema GNOME 3 debe instalarla con la ayuda de autotools. La construcción autotools instalará todos los archivos necesarios en las ubicaciones correctas.

Para esto deberá tener los siguientes archivos:

autogen.sh

#!/bin/sh

set -e

test -n "$srcdir" || srcdir=`dirname "$0"`
test -n "$srcdir" || srcdir=.

olddir=`pwd`
cd "$srcdir"

# This will run autoconf, automake, etc. for us
autoreconf --force --install

cd "$olddir"

if test -z "$NOCONFIGURE"; then
  "$srcdir"/configure "$@"
fi

Una vez que el archivo autogen.sh esté listo y guardado, ejecute:

$ chmod +x autogen.sh

Makefile.am

# The actual runnable program is set to the SCRIPTS primitive.
# # Prefix bin_ tells where to copy this
bin_SCRIPTS = hello-world
# # List of files to be distributed
EXTRA_DIST =  \
	$(bin_SCRIPTS)
#
#     # The desktop files
desktopdir = $(datadir)/applications
desktop_DATA = \
	hello-world.desktop

configure.ac

# This file is processed by autoconf to create a configure script
AC_INIT([Hello World], 1.0)
AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip])
AC_CONFIG_FILES([Makefile hello-world.desktop])
AC_OUTPUT

README

Información que los usuarios deben leer primero. Este archivo puede estar vacío.

Cuando tenga los archivos hello-world, hello-world.desktop.in, Makefile.am, configure.ac y autogen.sh con la información y los permisos correctos, el archivo README puede incluir las siguientes instrucciones:

Para construir e instalar este programa:

./autogen.sh --prefix=/home/usuario/.local
make install

-------------
Al ejecutar la primera línea se crean los siguientes archivos:

aclocal.m4
autom4te.cache
config.log
config.status
configure
helloWorld.desktop
install-sh
missing
Makefile.in
Makefile

Al ejecutar «make install», se instala la aplicación en /home/usuario/.local/bin
y se instala el archivo helloWorld.desktop en /home/usuario/.local/share/applications

Ahora puede ejecutar la aplicación escribiendo «Hello World» en la vista general.

----------------
Para desinstalarla, escriba:

make uninstall

----------------
Para crear un archivador tar escriba:

make distcheck

Esto creará el archivo hello-world-1.0.tar.xz