Escala (JavaScript)

Una escala es un deslizador horizontal o vertical, que representa un valor dentro de un rango numérico. Cuando crea una escala nueva, establece cuál es su posición predeterminada, cuáles son los números en la parte inferior y superior del rango, y cosas como cuánto sube o baja cuando pulsa en la escala o en cada lado de la perilla. Para no tener que introducir todo eso cada vez que cree una escala nueva, puede crear un objeto llamado ajuste que registra todo eso, y decirle a cada escala nueva que use ese ajuste.

Esta escala es un widget simple que le permite ajustar el tamaño de un iceberg en el que viven pingüinos. El número de pingüinos en el iceberg es el producto de los valores de ambos deslizadores. Juegue con ellos y vea qué sucede.

Bibliotecas que importar


#!/usr/bin/gjs

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

Estas son las bibliotecas que necesita importar para que esta aplicación se ejecute. Recuerde que la línea que le dice a GNOME que está usando Gjs siempre tiene que ir al principio.

Crear la ventana de la aplicación


const ScaleExample = new Lang.Class({
    Name: 'Scale Example',

    // Create the application itself
    _init: function() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsscale'
        });

    // 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 window when active
    _onActivate: function() {
        this._window.present();
    },

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

Todo el código de este ejemplo va en la clase «ScaleExample». El código anterior crea una Gtk.Application para que vayan los widgets y la ventana.


    // 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: 20,
            title: "Birds on a Floe"});

La función _buildUI es donde se pone todo el código que crea la interfaz de usuario de la aplicación. El primer paso es crear una Gtk.ApplicationWindow nueva para poner dentro todos los widgets.

Crear las escalas


        // Create the horizontal scale
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);

El método nuevo «new_with_range» es una manera de crear un widget de escala. Los parámetros que toma son una Gtk.Orientation, el valor mínimo, el valor máximo, y el incremento para un solo paso. Después de eso se usan los métodos de la escala para establecer su valor de inicio, y cuántos lugares decimales abarca. También se establece su alineación vertical en este caso, para controlar dónde aparece en la ventana.

Se puede usar el método «set_draw_value» para decirle si muestra o no el número junto a la escala deslizante. En este ejemplo está comentado.


        // Create a master adjustment to use for the vertical (or any other) scale
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });

Un ajuste es un objeto que se puede usar para simplificar las cosas cuando se crea una escala nueva. La propiedad «value» del ajuste es el valor predeterminado de la escala, mientras que «upper» y «lower» son los límites superior e inferior del rango numérico. Además, las valores de incremento muestran cuánto se mueve el deslizador cuando hace cosas como pulsarlo.


        // Create a vertical scale using the adjustment we just made
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });

Aquí se crea un objeto de escala nuevo usando «_adjustment» como su propiedad «ajuste». Este es un buen atajo. Sin embargo, todavía hay que decirle que redondee el lugar decimal. Tenga en cuenta que la propiedad «draw_value» está comentada; así es como se le dice que no muestre el número junto a la escala cuando está creando una de esta manera.


        // Create the label that shows the product of the two values
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Connect the two scales to functions which recalculate the label
        this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
        this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

Se puede usar el método «get_value» para obtener el valor numérico en el que se estableció una escala. Después se puede hacer lo que se quiera con él, incluyendo multiplicar los dos valores de las escalas y hacer que una etiqueta muestre el producto. Se configura el texto de la etiqueta para que ajuste su línea, porque también se hace que muestre un mensaje tonto.

Después de crear la etiqueta, se conectan las señales «value-changed» de las dos escalas a «_recalc», una función que recalculará el número de pingüinos en el iceberg y elaborará un mensaje nuevo.


        // Create a grid to arrange things in
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Attach everything to the grid
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

Aquí se crea una rejilla para poner todo dentro, después se le adjuntan todos los widgets. Tenga en cuenta que aquí y en algunos de los widgets se usan márgenes para mantener las cosas prolijamente espaciadas.


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

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

Finalmente, se le añade la rejilla a la ventana, y después se le dice a la ventana que se muestre con todos sus widgets dentro.

Función que maneja el cambio de los valores de las escalas


    _recalc: function() {

        // Figure out what the product of the two scales' values is
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Create a blank comment line in case there isn't a silly comment to make
        var comment = "";

        // Make a silly comment based on the number of penguins
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone ...";
        }
        else comment = "";

        // Set ._label's new text
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

    }

});

Recuerde, se puede obtener el valor de una escala usando su método «get_value». Aquí simplemente se recalcula cuál es el producto de los dos valores después de que se mueva una de las escalas, se añade un mensaje tonto dependiendo de cuántos pingüinos quedan, y se cambian las palabras en «_label» para mostrar el número y mensaje nuevos.


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

Finalmente, se crea una instancia nueva de la clase «ScaleExample» terminada, y se ejecuta la aplicación.

Código de ejemplo completo

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;

class ScaleExample {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsscale'
        });

        // 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 window 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,
            window_position: Gtk.WindowPosition.CENTER,
            border_width: 20,
            title: "Birds on a Floe"});

        // Create the horizontal scale
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);

        // Create a master adjustment to use for the vertical (or any other) scale
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });

        // Create a vertical scale using the adjustment we just made
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });

        // Create the label that shows the product of the two values
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Connect the two scales to functions which recalculate the label
        this._hScale.connect ("value-changed", this._recalc.bind(this));
        this._vScale.connect ("value-changed", this._recalc.bind(this));

        // Create a grid to arrange things in
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Attach everything to the grid
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

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

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

    _recalc() {

        // Figure out what the product of the two scales' values is
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Create a blank comment line in case there isn't a silly comment to make
        var comment = "";

        // Make a silly comment based on the number of penguins
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone ...";
        }
        else comment = "";

        // Set ._label's new text
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    }
};

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

Documentación en profundidad

Gtk.Adjustment

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Label

Gtk.Scale