# Hola mundo (JavaScript)

Susanna Huhtanen
ihmis.suski@gmail.com 2012
Tiffany Antopolski
tiffany.antopolski@gmail.com
Una aplicación «Hola mundo» básica
Daniel Mustieles
daniel.mustieles@gmail.com 2011 - 2020
Nicolás Satragno
nsatragno@gmail.com 2012 - 2013
Jorge González
jorgegonz@svn.gnome.org 2011

# Cómo construir, instalar y crear un tar.xz de un programa Hola mundo

          Este tutorial le demostrará cómo:

            crear una pequeña aplicación «Hola, mundo» usando JavaScript y GTK+
            hacer el archivo .desktop
            configurar el sistema de construcción

# 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;

imports.gi.versions.Gtk = '3.0' 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

const Lang = imports.lang;

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 .desktop.in

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;

Guarde el archivo como hello-world.desktop.in. 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, cree el archivo README con instrucciones para la instalación. A continuación se muestra un ejemplo de a qué se deben parecer las instrucciones de un archivo README adecuado.

Para construir e instalar este programa ejecute estos comandos desde una terminal:

./autogen.sh --prefix=/home/%USER/.local make install

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

aclocal.m4 autom4te.cache config.log config.status configure hello-world.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