# Interruptor (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Un interruptor deslizante que se puede activar y desactivar
Daniel Mustieles
daniel.mustieles@gmail.com 2011 - 2020
Nicolás Satragno
nsatragno@gmail.com 2012 - 2013
Jorge González
jorgegonz@svn.gnome.org 2011

# Interruptor

Un interruptor tiene dos posiciones: encendido y apagado. Este ejemplo muestra cómo puede usar múltiples interruptores para controlar qué Imagen se muestra en la ventana. Las imágenes usadas en este ejemplo se pueden descargar aquí.

La ventana contendrá un icono de «imagen rota» en lugar de una imagen si los archivos llamados redfox.png, muteswan.png, fruitbat.png, y gentoopenguin.png no están en la misma carpeta. Puede cambiar el código y las imágenes como quiera, pero las fotos con licencia Creative Commons usadas en este ejemplo se tomaron desde las siguientes fuentes y se redujeron a 640x425:

Foto de un zorro rojo por Rob Lee, con licencia CC-By

Foto de un pingüino papúa por Ken Funakoshi, con licencia CC-By-SA

Foto de un murciélago de la fruta por Shek Graham, con licencia CC-By

Foto de un cisne mudo por Mindaugas Urbonas, con licencia CC-By-SA

Los créditos de las fotografías y la información de licencia se muestran en el AboutDialog de la aplicación. Recuerde reconocer siempre al artista original cuando use trabajos con licencia Creative Commons.

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

// Create the application itself _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jsswitch', 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 creates the menu and builds the UI _onStartup: function() { this._initMenus(); this._buildUI (); },

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

Antes de llamar a «_buildUI» para crear la ventana y sus widgets, es necesario llamar a «_initMenus», que le dice a GNOME que cree el menú. Se puede poner el código de «_initMenus» después del código de «_buildUI», dado que no importa en qué orden se esté mientras que «_initMenus» se llame primero en «_onStartup».

// 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: "Animal Creator"});

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 los interruptores

// Create the image widget and set its default picture this._image = new Gtk.Image ({file: "redfox.png"});

Primero se crea la Imagen que los interruptores controlarán. Recuerde que el archivo llamado redfox.png debe estar en la misma carpeta que la aplicación.

// Create a label for the first switch this._flyLabel = new Gtk.Label ({ label: "Make it fly", margin_right: 30});

// Create the first switch and set its default position this._flySwitch = new Gtk.Switch ({active: false}); this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));

// Create a label for the second switch this._birdLabel = new Gtk.Label ({ label: "Make it a bird", margin_right: 30});

// Create the second switch this._birdSwitch = new Gtk.Switch ({active: false}); this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));

Se usa una Etiqueta para marcar cada interruptor, y se les da un poco de margen a la derecha para que no se peguen a los interruptores. Después de esto se crean los interruptores, y se configuran para que estén apagados de forma predeterminada.

La señal que envía un interruptor cuando se activa o desactiva se llama «notify::active». Después de crear cada interruptor, se conecta su señal «notify::active» a una función llamada «_switchFlip». Si tiene múltiples interruptores, y cada uno hace algo diferente, tal vez quiera conectarlos a funciones diferentes, pero aquí ambos se usan para lo mismo: para controlar qué imagen muestra «_image».

// Create a grid for the labels and switches beneath the picture this._UIGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_top: 20});

// Attach the labels and switches to that grid this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1); this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1); this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1); this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);

// Create a master grid to put both the UI and the picture into this._mainGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });

// Attach the picture and the UI grid to the master grid this._mainGrid.attach (this._image, 0, 0, 1, 1); this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);

Primero se crea una rejilla para las etiquetas y los interruptores, para que se puedan organizar en una distribución 2x2 con un margen entre estos y la imagen. Después se pone esa rejilla en una rejilla más grande de 2x1 que tiene una imagen en su parte superior, y la rejilla con las etiquetas y los interruptores en su parte inferior.

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

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

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

# Función que maneja los interruptores que se están pulsando

_switchFlip: function() {

// Change the picture depending on which switches are flipped if (this._flySwitch.get_active()) {

if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");

else this._image.set_from_file ("fruitbat.png"); }

else {

if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");

else this._image.set_from_file ("redfox.png");

}

},

Cada vez que un interruptor se pulsa, esta función verifica cuál de los dos interruptores está activo, usando la función «get_active()» empotrada al interruptor. Después cambia la imagen consecuentemente. Puede cambiar los nombres de archivo como quiera, siempre que tenga imágenes que correspondan.

# Crear el AboutDialog

_initMenus: function() {

// Build the application's menu so we can have an "About" button let menu = new Gio.Menu(); menu.append("About", 'app.about'); menu.append("Quit",'app.quit'); this.application.set_app_menu(menu);

// Bind the "About" button to the _showAbout() function let aboutAction = new Gio.SimpleAction ({ name: 'about' }); aboutAction.connect('activate', Lang.bind(this, function() { this._showAbout(); })); this.application.add_action(aboutAction);

// Bind the "Quit" button to the function that closes the window let quitAction = new Gio.SimpleAction ({ name: 'quit' }); quitAction.connect('activate', Lang.bind(this, function() { this._window.destroy(); })); this.application.add_action(quitAction); },

El primer paso es construir el GMenu en el que va el botón «About». Este es el menú que aparece cuando pulsa en el nombre de la aplicación en la esquina superior izquierda de la pantalla, al lado del menú de actividades. Este menú sólo tiene dos opciones: «About» y «Quit».

_showAbout: function () {

// String arrays of the names of the people involved in the project var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg']; var authors = ["GNOME Documentation Team"]; var documenters = ["GNOME Documentation Team"];

// Create the About dialog let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog Example", program_name: "Animal Creator", copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?", artists: artists, authors: authors, documenters: documenters, website: "http://developer.gnome.org", website_label: "GNOME Developer Website" });

// Attach the About dialog to the window aboutDialog.modal = true; aboutDialog.transient_for = this._window;

// Show the About dialog aboutDialog.show();

// Connect the Close button to the destroy signal for the dialog aboutDialog.connect('response', function() { aboutDialog.destroy(); }); }

});

Un AboutDialog tiene muchas cosas que puede establecer, para reconocer a todos los que trabajaron en la aplicación y dejar una nota a cualquiera que la lea. En este caso, la sección de derechos de autor contiene una nota y reconoce a los fotógrafos originales, mientras que la sección de artistas muestra una lista de los fotógrafos con enlaces a las fotografías originales cuando pulsa en el botón «Credits». Las URL web después de sus nombres en la matriz convierten sus nombres en enlaces que puede pulsar en la sección de créditos.

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

Finalmente, se crea una instancia nueva de la clase «SwitchExample» 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 SwitchExample {

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

// 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 creates the menu and builds the UI _onStartup() { this._initMenus(); 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: "Animal Creator"});

// Create the image widget and set its default picture this._image = new Gtk.Image ({file: "redfox.png"});

// Create a label for the first switch this._flyLabel = new Gtk.Label ({ label: "Make it fly", margin_right: 30});

// Create the first switch and set its default position this._flySwitch = new Gtk.Switch ({active: false}); this._flySwitch.connect ('notify::active', this._switchFlip.bind(this));

// Create a label for the second switch this._birdLabel = new Gtk.Label ({ label: "Make it a bird", margin_right: 30});

// Create the second switch this._birdSwitch = new Gtk.Switch ({active: false}); this._birdSwitch.connect ('notify::active', this._switchFlip.bind(this));

// Create a grid for the labels and switches beneath the picture this._UIGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_top: 20});

// Attach the labels and switches to that grid this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1); this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1); this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1); this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);

// Create a master grid to put both the UI and the picture into this._mainGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });

// Attach the picture and the UI grid to the master grid this._mainGrid.attach (this._image, 0, 0, 1, 1); this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);

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

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

_switchFlip() {

// Change the picture depending on which switches are flipped if (this._flySwitch.get_active()) {

if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png"); else this._image.set_from_file ("fruitbat.png"); } else {

if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png"); else this._image.set_from_file ("redfox.png"); } }

_initMenus() {

// Build the application's menu so we can have an "About" button let menu = new Gio.Menu(); menu.append("About", 'app.about'); menu.append("Quit",'app.quit'); this.application.set_app_menu(menu);

// Bind the "About" button to the _showAbout() function let aboutAction = new Gio.SimpleAction ({ name: 'about' }); aboutAction.connect('activate', () => { this._showAbout(); }); this.application.add_action(aboutAction);

// Bind the "Quit" button to the function that closes the window let quitAction = new Gio.SimpleAction ({ name: 'quit' }); quitAction.connect('activate', () => { this._window.destroy(); }); this.application.add_action(quitAction); }

_showAbout() {

// String arrays of the names of the people involved in the project var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png']; var authors = ["GNOME Documentation Team"]; var documenters = ["GNOME Documentation Team"];

// Create the About dialog let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog Example", program_name: "Animal Creator", copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?", artists: artists, authors: authors, documenters: documenters, website: "http://developer.gnome.org", website_label: "GNOME Developer Website" });

// Attach the About dialog to the window aboutDialog.modal = true; aboutDialog.transient_for = this._window;

// Show the About dialog aboutDialog.show();

// Connect the Close button to the destroy signal for the dialog aboutDialog.connect('response', function() { aboutDialog.destroy(); }); } };

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

# Documentación en profundidad

GMenu

GSimpleAction

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Image

Gtk.Label

Gtk.Switch