<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="checkbutton.js" xml:lang="es">

  <info>

  <title type="text">CheckButton (JavaScript)</title>

    <link type="guide" xref="beginner.js#buttons"/>

    <revision version="0.1" date="2012-06-12" status="draft"/>

    <credit type="author copyright">

      <name>Taryn Fox</name>

      <email its:translate="no">jewelfox@fursona.net</email>

      <years>2012</years>

    </credit>

    <desc>Una casilla que puede estar marcada o desmarcada</desc>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Daniel Mustieles</mal:name>

      <mal:email>daniel.mustieles@gmail.com</mal:email>

      <mal:years>2011 - 2017</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Nicolás Satragno</mal:name>

      <mal:email>nsatragno@gmail.com</mal:email>

      <mal:years>2012 - 2013</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Jorge González</mal:name>

      <mal:email>jorgegonz@svn.gnome.org</mal:email>

      <mal:years>2011</mal:years>

    </mal:credit>

  </info>

  <title>CheckButton</title>

  <media type="image" mime="image/png" src="media/checkbutton.png"/>

  
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».

    <links type="section"/>

  <section id="imports">

    <title>Bibliotecas que importar</title>

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio;

const Gtk = imports.gi.Gtk;

    
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.

    </section>

  <section id="applicationwindow">

    <title>Crear la ventana de la aplicación</title>

class CheckButtonExample {

    // Create the application itself

    constructor() {

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

    }

    
Todo el código de este ejemplo va en la clase CheckButtonExample. El código anterior crea una <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> para que vayan los widgets y la ventana.

    // Build the application's UI

    _buildUI() {

        // 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 <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> nueva para poner todos los widgets.

  </section>

  <section id="button">

    <title>Crear la casilla</title>

        // 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", this._toggledCB.bind(this));

    
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).

  </section>

  <section id="function">

    <title>Función que maneja la conmutación de la casilla de verificación</title>

    _toggledCB() {

        // 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.

  </section>

  <section id="complete">

    <title>Código de ejemplo completo</title>

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio;

const Gtk = imports.gi.Gtk;

class CheckButtonExample {

    // Create the application itself

    constructor() {

        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', 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,

            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", this._toggledCB.bind(this));

        // Show the window and all child widgets

        this._window.show_all();

    }

    _toggledCB() {

        // 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);

  </section>

  <section id="in-depth">

    <title>Documentación en profundidad</title>

<list>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CheckButton.html">Gtk.CheckButton</link>
</item>

</list>

  </section>

</page>