# CheckButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Una casilla que puede estar marcada o desmarcada
Daniel Mustieles
daniel.mustieles@gmail.com 2011 - 2015
Nicolás Satragno
nsatragno@gmail.com 2012 - 2013
Jorge González
jorgegonz@svn.gnome.org 2011

# CheckButton

Esta aplicación tiene una casilla de verificación. Si la casilla está activada, la barra de título de la ventana muestra algo.

Una casilla de verificación envía la señal «toggled» cuando se activa o desactiva. Cuando está activada, la propiedad «active» es «true». Cuando no lo está, «active» es «false».

# 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 CheckButtonExample = new Lang.Class({ Name: 'CheckButton Example',

// Create the application itself _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

// 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 CheckButtonExample. 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, default_height: 100, default_width: 300, border_width: 10, title: "CheckButton Example"});

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

# Crear la casilla

// Create the check button this._button = new Gtk.CheckButton ({label: "Show Title"}); this._window.add (this._button);

// Have the check button be checked by default this._button.set_active (true);

// Connect the button to a function that does something when it's toggled this._button.connect ("toggled", Lang.bind (this, this._toggledCB));

Este código crea la casilla de verificación en sí. La etiqueta junto a esta se crea dándole a la casilla la propiedad «label» y asignándole una cadena. Dado que esta casilla permuta si se muestra o no el título de la ventana, y este se mostrará al inicio, se quiere que la casilla esté verificada de manera predeterminada. Cuando el usuario active o desactive la casilla, se llamará a la función «_toggledCB».

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

Este código termina de crear la IU, diciéndole a la ventana que se muestre con todos sus widgets hijos (que, en este caso, solo es la casilla de verificación).

# Función que maneja la conmutación de la casilla de verificación

_toggledCB: function () {

// Make the window title appear or disappear when the checkbox is toggled if (this._button.get_active() == true) this._window.set_title ("CheckButton Example"); else this._window.set_title ("");

}

});

Si la casilla se conmuta de «encendido» a «apagado», se quiere que el título de la ventana desaparezca. Si sucede al revés, que aparezca. Se puede saber en qué sentido se conmutó probando si está activada (verificada) o no. Una declaración «if / else» simple que llame al método «get_active()» de la casilla de verificación funcionará.

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

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

# Código de ejemplo completo

#!/usr/bin/gjs

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

const CheckButtonExample = new Lang.Class({ Name: 'CheckButton Example',

// Create the application itself _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

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

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

// Create the application window this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 100, default_width: 300, border_width: 10, title: "CheckButton Example"});

// Create the check button this._button = new Gtk.CheckButton ({label: "Show Title"}); this._window.add (this._button);

// Have the check button be checked by default this._button.set_active (true);

// Connect the button to a function that does something when it's toggled this._button.connect ("toggled", Lang.bind (this, this._toggledCB));

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

_toggledCB: function () {

// Make the window title appear or disappear when the checkbox is toggled if (this._button.get_active() == true) this._window.set_title ("CheckButton Example"); else this._window.set_title ("");

}

});

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

# Documentación en profundidad

Gtk.Application

Gtk.ApplicationWindow

Gtk.CheckButton