Taryn Fox
jewelfox@fursona.net 2012
Aprenda cómo distribuir componentes de la IU, como imágenes y etiquetas.
Daniel Mustieles
daniel.mustieles@gmail.com 2011 - 2014
Nicolás Satragno
nsatragno@gmail.com 2012 - 2013
Jorge González
jorgegonz@svn.gnome.org 2011

# 2. Bienvenido a la rejilla

        Este tutorial le mostrará cómo crear widgets básicos, o partes de la interfaz de usuario de GNOME, como imágenes y etiquetas. Después aprenderá cómo ordenarlas en una rejilla, que le permite poner widgets exactamente donde los quiere.
        ¿Ya ha hecho el primer tutorial en esta serie? Querrá hacerlo antes de continuar.

# Pasar a nativo

En el último tutorial, se creó básicamente una ventana de GNOME como marco para una aplicación web. Todo el código específico de GNOME que necesitó aprender trataba del poner la «WebView» (el widget que contenía la aplicación) en una «ApplicationWindow», y decirle que la muestre. La aplicación en sí estaba escrita en HTML y JavaScript, al igual que la mayoría de las páginas en la web.

Esta vez, solo se van a usar widgets nativos de GNOME. Un widget sólo es una cosa, como una casilla de verificación o una imagen, y GNOME tiene una amplia variedad para elegir. Se llaman widgets «nativos» para distinguirlos de cosas como el botón y la cabecera en la aplicación web que escribió. Porque en lugar de usar código web, estos van a ser 100% GNOME, usando GTK+.

GTK+ significa «GIMP Toolkit». Es como una caja de herramientas de widgets a la que puede acceder cuando construye sus aplicaciones. Originalmente se escribió para GIMP, que es un editor de imágenes de software libre.

# Creando la aplicación

Antes de sacar ningún widget de la caja de herramientas de GTK+, se necesita escribir el código básico plantilla que la aplicación requiere.

#!/usr/bin/gjs

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

Esta parte siempre va al inicio del código. Dependiendo de qué va a hacer con él, puede querer declarar más importaciones aquí. Este ejemplo es bastante básico, por lo que esto es todo lo que necesita; «Gtk» para los widgets, y «Lang» para poder usar «Lang.bind» para conectar las señales de activación e inicio de la aplicación a las funciones requeridas.

Hablando de eso:

const WelcomeToTheGrid = new Lang.Class({ Name: 'Welcome to the Grid',

// 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 (); },

Este es el inicio de la aplicación en sí, y la función «_init» que la crea. Le dice a «_buildUI» que cree una «ApplicationWindow», a la que se llamará «_window», y le dice a la ventana que se presente cuando se la necesite.

Esta parte, nuevamente, es principalmente copiar y pegar, pero siempre querrá darle a su aplicación un nombre único.

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

// Create the application window this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, border_width: 10, title: "Welcome to the Grid"});

Finalmente, se arranca la función «_buildUI» creando una «ApplicationWindow» nueva. Se especifica que va con esta aplicación, que debe aparecer en el centro de la pantalla, y que debe haber al menos 10 píxeles entre el borde exterior y cualquier widget dentro de ella. También se le da un título, que aparecerá en la parte superior de la ventana.

# Usar la caja de herramientas de GTK+

¿Qué widgets deben usarse? Bueno, si quiere escribir una aplicación que se vea así:

Necesitará, al menos, una imagen y una etiqueta de texto para acompañarla. Comience con la imagen:

// Create an image this._image = new Gtk.Image ({ file: "gnome-image.png" });

Puede descargar el archivo de imagen usado en este ejemplo aquí. Asegúrese de ponerlo en la misma carpeta que el código que está escribiendo.

// Create a label this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!" });

Ese código añade la etiqueta debajo. Puede ver cómo se crean los widgets aquí; cada uno es una parte de GTK+, y se le pueden dar propiedades que personalizan cómo se comportan. En este caso, se establece la propiedad «file» de la imagen al nombre de archivo de la imagen que se desea, y la propiedad «label» de la etiqueta a la oración que se quiere bajo la imagen.

Sí, suena redundante que un objeto «Label» tenga una propiedad «label», pero no lo es. Otros widgets que contienen texto también tienen una propiedad «label», por lo que es consistente que un widget «Label» también tenga una.

Sin embargo, no se pueden simplemente añadir estos widgets a la ventana en orden, como los elementos HTML aparecen en el orden en el que los escribe. Eso es porque una «ApplicationWindow» sólo puede contener un widget.

¿Cómo se resuelve eso? Haciendo que ese widget sea un widget contenedor, que puede contener más de un widget y organizarlos dentro. Observe la rejilla.

// Create the Grid this._grid = new Gtk.Grid ();

Todavía no se le da ninguna propiedad. Estas vendrán después, cuando aprenda cómo usar los poderes de la rejilla. Primero, adjúntele a su rejilla la imagen y la etiqueta que hizo.

// Attach the image and label to the grid this._grid.attach (this._image, 0, 0, 1, 1); this._grid.attach (this._label, 0, 1, 1, 1);

Este código se ve terriblemente complicado, pero no lo es. Aquí está lo que esos números significan:

El primer número es en qué posición de izquierda a derecha se ponen las cosas, comenzando desde 0. Cualquier widget que use un 0 aquí va todo a la izquierda.

El segundo número es en qué posición de arriba a abajo se pone un widget dado, comenzando desde 0. La etiqueta va debajo de la imagen, por lo que se le da a la imagen un 0 y a la etiqueta un 1 aquí.

Los números tercero y cuarto son cuántas columnas y filas debe ocupar un widget. Se verá cómo funciona esto en un minuto.

// Add the grid to the window this._window.add (this._grid);

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

});

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

Ahora que ha creado la rejilla y le ha adjuntado todos los widgets, se añade a la ventana y se le dice que se muestre, como la última parte de la función «_buildUI». Como siempre, para finalizar se crea una instancia nueva de la clase de la aplicación y se le dice que se ejecute.

Guarde su aplicación como «welcome_to_the_grid.js». Después, para ejecutar su aplicación simplemente abra una terminal, vaya a la carpeta en la que está, y escriba

     $ gjs welcome_to_the_grid.js

¡Allí va! Pero espere. Eso no se ve bien. ¿Por qué la etiqueta está pegada a la imagen así? Eso no se ve tan bien, y la hace difícil de leer. ¿Qué puede hacer acerca de esto?

# Configurar la rejilla

Una cosa que puede hacer, es darle a la etiqueta una propiedad «margin_top» cuando la crea. Esto funciona de manera similar a establecer un margen para un elemento HTML usando estilos CSS en línea.

// Create a label this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!", margin_top: 20 });

Por supuesto, si hace eso y después remplaza la etiqueta con otra cosa (o añade otro widget), entonces tendrá que repetir el «margin_top». De lo contrario, acabará con algo así:

Le podría dar una propiedad «margin_bottom» a la imagen, pero no funcionará cuando la etiqueta nueva esté en una columna separada. Entonces, mejor probar esto:

// Create the Grid this._grid = new Gtk.Grid ({ row_spacing: 20 });

Eso hace que siempre hayan 20 píxeles de espacio entre cada fila horizontal.

Sí, también puede establecer la propiedad «column_spacing» en una rejilla, o las propiedades «margin_left» y «margin_right» en cualquier widget. Pruébelas, si quiere.

# Añadir más widgets

Si quisiera añadir una segunda etiqueta, ¿cómo lo haría para que realmente se vea integrada? Una manera es centrar la imagen en la parte superior, para que esté encima de ambas etiquetas en lugar de sólo de la que está en la izquierda. Allí es donde los otros números en el método «attach» de la rejilla entran:

// Create a second label this._labelTwo = new Gtk.Label ({ label: "The cake is a pie." });

// Attach the image and labels to the grid this._grid.attach (this._image, 0, 0, 2, 1); this._grid.attach (this._label, 0, 1, 1, 1); this._grid.attach (this._labelTwo, 1, 1, 1, 1);

Después de haber creado la segunda etiqueta, se añade a la rejilla a la derecha de la primera. Recuerde, los primeros dos números cuentan columnas y filas de izquierda a derecha y de arriba a abajo, comenzando desde 0. Por lo que si la primera etiqueta está en la columna 0 y fila 1, se puede poner la segunda en la columna 1 y fila 1 para ponerla a la derecha de la primera.

Tenga en cuenta el número 2 en la declaración «attach» de la imagen. Eso es lo que hace el truco. Ese número indica cuántas columnas ocupa la imagen, ¿recuerda? Entonces, cuando se junta todo, se obtiene algo así:

Hay dos cosas de las que debe tomar nota, aquí.

Configurar la imagen para que ocupe dos columnas no la estrecha en sí horizontalmente. En vez de eso, estrecha la caja invisible que el widget «Image» ocupa para llenar ambas columnas, y luego pone la imagen en el centro de esa caja.

Incluso a pesar de que ha establecido las propiedades «row_spacing» de la rejilla y «border_with» de la ventana de la aplicación, todavía no ha establecido nada que ponga un borde entre las dos etiquetas. Estaban separadas anteriormente cuando la imagen estaba en una sola columna, pero ahora que ocupa ambas GNOME no ve una razón para mantenerlas separadas.

Existen por lo menos tres maneras de solucionar esto último. Primero, se puede establecer «margin_left» o «margin_right» en una de las etiquetas:

Segundo, se puede establecer la propiedad «column_homogenous» de la rejilla a «true».

// Create the Grid this._grid = new Gtk.Grid ({ column_homogeneous: true, row_spacing: 20 });

Eso hace que se vea algo así:

Y tercero, se puede establecer la propiedad «column_spacing» de la rejilla, de la misma manera que «row_spacing».

// Create the Grid this._grid = new Gtk.Grid ({ column_spacing: 20, row_spacing: 20 });

Esto hace que se vea así:

# Usar imágenes del almacén

GNOME tiene muchas imágenes del almacén disponibles que se pueden usar si no quiere crear las suyas o si quiere usar un icono universalmente reconocido. Aquí se muestra cómo crear una imagen del almacén, comparado con crear una normal:

// Create an image this._image = new Gtk.Image ({ file: "gnome-image.png" });

// Create a second image using a stock icon this._icon = new Gtk.Image ({ stock: 'gtk-about' });

Después de eso, se añade a la rejilla, a la izquierda de la primera etiqueta (todavía no se usa la segunda en este ejemplo).

// Attach the images and label to the grid this._grid.attach (this._image, 0, 0, 2, 1); this._grid.attach (this._icon, 0, 1, 1, 1); this._grid.attach (this._label, 1, 1, 1, 1);

Eso da esto, cuando se ejecuta:

Así se ve el icono del almacén «About». Puede ver una lista de todos los elementos del almacén comenzando con «gtk-about» en la documentación del desarrollador de GNOME. Se escribió para programadores de C, pero no necesita saber C para usarla; simplemente consulte la parte entre comillas, como "gtk-about", y copie esa parte para usar el icono junto a ella.

Se ponen comillas simples alrededor de «gtk-about» aquí porque, a diferencia de cadenas de texto que tienen comillas dobles, esa parte nunca necesitará traducirse a otro lenguaje. En realidad, si se tradujera rompería el icono, porque su nombre todavía es «gtk-about» sin importar el lenguaje en el que habla.

# ¿Qué viene ahora?

Antes de continuar con el siguiente tutorial, intente algo un poco diferente:

// Create a button this._button = new Gtk.Button ({ label: "Welcome to GNOME, too!"});

// Attach the images and button to the grid this._grid.attach (this._image, 0, 0, 2, 1); this._grid.attach (this._icon, 0, 1, 1, 1); this._grid.attach (this._button, 1, 1, 1, 1);

Así es, se convirtió la etiqueta en un botón simplemente cambiándole el nombre. Si ejecuta la aplicación y la pulsa, sin embargo, verá que no hace nada. ¿Cómo hacer para que el botón haga algo? Eso es lo que descubrirá, en el próximo tutorial.

Si quiere, siéntase libre de experimentar con rejillas, etiquetas, e imágenes, incluyendo imágenes del almacén.

Un truco que puede usar para hacer distribuciones más complejas es anidar rejillas una dentro de otra. Esto le permite agrupar widgets interrelacionados, y reorganizarlos fácilmente. Eche un vistazo a la muestra de código del botón de radio si quiere ver cómo se hace esto.

# Código de ejemplo completo

#!/usr/bin/gjs

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

const WelcomeToTheGrid = new Lang.Class({ Name: 'Welcome to the Grid',

// 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 (); },

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

// Create the application window this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, border_width: 10, title: "Welcome to the Grid"});

// Create the Grid this._grid = new Gtk.Grid ({ // column_homogeneous: true, // column_spacing: 20, row_spacing: 20 });

// Create an image this._image = new Gtk.Image ({ file: "gnome-image.png" });

// Create a second image using a stock icon this._icon = new Gtk.Image ({ stock: 'gtk-about' });

// Create a label this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!", /* margin_top: 20 */ });

/* Create a second label this._labelTwo = new Gtk.Label ({ label: "The cake is a pie." }); */

/* Create a button this._button = new Gtk.Button ({ label: "Welcome to GNOME, too!"}); */

// Attach the images and button to the grid this._grid.attach (this._image, 0, 0, 2, 1); this._grid.attach (this._icon, 0, 1, 1, 1); this._grid.attach (this._label, 1, 1, 1, 1);

// this._grid.attach (this._label, 0, 1, 1, 1); // this._grid.attach (this._labelTwo, 1, 1, 1, 1);

// this._grid.attach (this._button, 1, 1, 1, 1);

// Add the grid to the window this._window.add (this._grid);

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

});

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