<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="radiobutton.js" xml:lang="es">

  <info>

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

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

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

    <credit type="author copyright">

      <name>Taryn Fox</name>

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

      <years>2012</years>

    </credit>

    <desc>Sólo se puede seleccionar uno a la vez</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>RadioButton</title>

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

  
Los botones de radio se llaman así por las radios de los coches viejos, que tenían botones para alternar entre canales programados. Dado que la radio sólo podía sintonizar una estación a la vez, sólo se podía apretar un botón por vez; si presionaba uno nuevo, el que ya estaba presionado saltaba. Así es como estos botones funcionan.

  
Cada botón de radio necesita una etiqueta de texto y un grupo. Sólo se puede seleccionar un botón de cada grupo por vez. No necesita nombrar cada grupo; sólo configure varios botones de radio para que sean parte del mismo grupo que otro existente. Si crea uno nuevo fuera de un grupo, automáticamente crea un grupo nuevo para que forme parte.

    <links type="section"/>

  <section id="imports">

    <title>Bibliotecas que importar</title>

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

    </section>

  <section id="applicationwindow">

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

const RadioButtonExample = new Lang.Class({

    Name: 'RadioButton Example',

    // Create the application itself

    _init: function() {

        this.application = new Gtk.Application({

            application_id: 'org.example.jsradiobutton',

            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 RadioButtonExample. 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: function() {

        // Create the application window

        this._window = new Gtk.ApplicationWindow({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            border_width: 20,

            title: "Travel Planning"});

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

  </section>

  <section id="button">

    <title>Crear los botones de radio</title>

        // Create a label for the first group of buttons

        this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});

    
Se usa una <link xref="label.js">Gtk.Label</link> para diferenciar cada grupo de botones de radio. Nada le impedirá poner botones de radio de grupos diferentes donde quiera, así que si quiere que la gente sepa cuáles van juntos, necesita ordenar las cosas adecuadamente.

        // Create three radio buttons three different ways

        this._place1 = new Gtk.RadioButton ({label: "The Beach"});

        this._place2 = Gtk.RadioButton.new_from_widget (this._place1);

        this._place2.set_label ("The Moon");

        this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");

        // this._place3.set_active (true);

    
Aquí hay tres maneras diferentes de crear botones de radio. La primera es la manera común, donde se crea un «Gtk.RadioButton» nuevo y se le asignan sus propiedades al mismo tiempo. La segunda y la tercera usan funciones que manejan algunas de sus propiedades automáticamente; «new_from_widget» toma un solo argumento, un botón de radio del mismo grupo en el que quiere poner el nuevo. «new_with_label_from_widget», además, toma eso y la etiqueta del botón de radio al mismo tiempo.

    
El primer botón de radio en un grupo es el que está seleccionado de manera predeterminada. Pruebe a descomentar la última línea en este código de ejemplo para ver cómo puede configurar uno diferente para que sea la selección predeterminada.

        // Create a label for the second group of buttons

        this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });

        // Create three more radio buttons

        this._thing1 = new Gtk.RadioButton ({label: "Penguins" });

        this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });

        this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });

    
Aquí se crea la etiqueta para el segundo grupo de botones, y después se crean todos de la misma manera.

    </section>

    <section id="ui">

    <title>Crear el resto de la interfaz de usuario</title>

        // Create a stock OK button

        this._okButton = new Gtk.Button ({

            label: 'gtk-ok',

            use_stock: 'true',

            halign: Gtk.Align.END });

        // Connect the button to the function which handles clicking it

        this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));

    
Este código crea un <link xref="button.js">Gtk.Button</link> y lo enlaza a una función que mostrará un mensaje tonto cuando pulse «OK», dependiendo de qué botones de radio se seleccionaron.

    
Para asegurarse de que la etiqueta «OK» del botón se muestra correctamente en cada idioma al que se traduce GNOME, recuerde usar uno de los <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">tipos de botón del almacén</link> de GTK+.

        // Create a grid to put the "place" items in

        this._places = new Gtk.Grid ();

        // Attach the "place" items to the grid

        this._places.attach (this._placeLabel, 0, 0, 1, 1);

        this._places.attach (this._place1, 0, 1, 1, 1);

        this._places.attach (this._place2, 0, 2, 1, 1);

        this._places.attach (this._place3, 0, 3, 1, 1);

        // Create a grid to put the "thing" items in

        this._things = new Gtk.Grid ({ margin_top: 50 });

        // Attach the "thing" items to the grid

        this._things.attach (this._thingLabel, 0, 0, 1, 1);

        this._things.attach (this._thing1, 0, 1, 1, 1);

        this._things.attach (this._thing2, 0, 2, 1, 1);

        this._things.attach (this._thing3, 0, 3, 1, 1);

        // Create a grid to put everything in

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            margin_left: 40,

            margin_right: 50 });

        // Attach everything to the grid

        this._grid.attach (this._places, 0, 0, 1, 1);

        this._grid.attach (this._things, 0, 1, 1, 1);

        this._grid.attach (this._okButton, 0, 2, 1, 1);

        // Add the grid to the window

        this._window.add (this._grid);

    
Se usa una <link xref="grid.js">Gtk.Grid</link> separada para organizar cada grupo de botones de radio. De esta manera se puede cambiar la distribución sin liarse más adelante. La segunda rejilla tiene un margen en la parte superior, para separar visualmente los dos conjuntos de opciones.

    
Después de haberlos organizado, se ponen en una tercera rejilla maestra, junto con el botón «OK». Luego se adjuntan a la ventana.

        // Show the window and all child widgets

        this._window.show_all();

    },

    
Finalmente, se le dice a la ventana y a todo dentro que se vuelva visible cuando se ejecute la aplicación.

  </section>

  <section id="function">

    <title>Función que maneja su selección</title>

    _okClicked: function () {

        // Create a popup that shows a silly message

        this._travel = new Gtk.MessageDialog ({

            transient_for: this._window,

            modal: true,

            message_type: Gtk.MessageType.OTHER,

            buttons: Gtk.ButtonsType.OK,

            text: this._messageText() });

        // Show the popup

        this._travel.show();

        // Bind the OK button to the function that closes the popup

        this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));

    },

    
Cuando pulsa «OK», aparece un <link xref="messagedialog.js">Gtk.MessageDialog</link>. Esta función crea y muestra la ventana emergente, después enlaza su botón «OK» a una función que la cierra. Qué texto aparece en el mensaje emergente depende de la función «_messageText()», que devuelve un valor diferente dependiendo de qué conjunto de opciones elija.

    _messageText: function() {

        // Create a silly message for the popup depending on what you selected

        var stringMessage = "";

        if (this._place1.get_active()) {

            if (this._thing1.get_active())

                stringMessage = "Penguins love the beach, too!";

            else if (this._thing2.get_active())

                stringMessage = "Make sure to put on that sunscreen!";

            else stringMessage = "Are you going to the beach in space?";

        }

        else if (this._place2.get_active()) {

            if (this._thing1.get_active())

                stringMessage = "The penguins will take over the moon!";

            else if (this._thing2.get_active())

                stringMessage = "A lack of sunscreen will be the least of your problems!";

            else stringMessage = "You'll probably want a spaceship, too!";

        }

        else if (this._place3.get_active()) {

            if (this._thing1.get_active())

                stringMessage = "The penguins will be happy to be back home!";

            else if (this._thing2.get_active())

                stringMessage = "Antarctic sunbathing may be hazardous to your health!";

            else stringMessage = "Try bringing a parka instead!";

        }

        return stringMessage;

    },

    
El método «get_active()» indica qué botón de radio está presionado. Esta función devuelve un mensaje tonto diferente dependiendo de qué conjunto de botones se presionó. Su valor de retorno se usa como propiedad «text» del «MessageDialog».

    _clearTravelPopUp: function () {

        this._travel.destroy();

    }

});

    
Esta función se llama cuando se presiona el botón «OK» del «MessageDialog». Simplemente hace desaparecer el diálogo emergente.

// Run the application

let app = new RadioButtonExample ();

app.application.run (ARGV);

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

    // Create the application itself

    constructor() {

        this.application = new Gtk.Application({

            application_id: 'org.example.jsradiobutton',

            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,

            border_width: 20,

            title: "Travel Planning"});

        // Create a label for the first group of buttons

        this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});

        // Create three radio buttons three different ways

        this._place1 = new Gtk.RadioButton ({label: "The Beach"});

        this._place2 = Gtk.RadioButton.new_from_widget (this._place1);

        this._place2.set_label ("The Moon");

        this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");

        // this._place3.set_active (true);

        // Create a label for the second group of buttons

        this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });

        // Create three more radio buttons

        this._thing1 = new Gtk.RadioButton ({label: "Penguins" });

        this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });

        this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });

        // Create a stock OK button

        this._okButton = new Gtk.Button ({

            label: 'gtk-ok',

            use_stock: 'true',

            halign: Gtk.Align.END });

        // Connect the button to the function which handles clicking it

        this._okButton.connect ('clicked', this._okClicked.bind(this));

        // Create a grid to put the "place" items in

        this._places = new Gtk.Grid ();

        // Attach the "place" items to the grid

        this._places.attach (this._placeLabel, 0, 0, 1, 1);

        this._places.attach (this._place1, 0, 1, 1, 1);

        this._places.attach (this._place2, 0, 2, 1, 1);

        this._places.attach (this._place3, 0, 3, 1, 1);

        // Create a grid to put the "thing" items in

        this._things = new Gtk.Grid ({ margin_top: 50 });

        // Attach the "thing" items to the grid

        this._things.attach (this._thingLabel, 0, 0, 1, 1);

        this._things.attach (this._thing1, 0, 1, 1, 1);

        this._things.attach (this._thing2, 0, 2, 1, 1);

        this._things.attach (this._thing3, 0, 3, 1, 1);

        // Create a grid to put everything in

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            margin_left: 40,

            margin_right: 50 });

        // Attach everything to the grid

        this._grid.attach (this._places, 0, 0, 1, 1);

        this._grid.attach (this._things, 0, 1, 1, 1);

        this._grid.attach (this._okButton, 0, 2, 1, 1);

        // Add the grid to the window

        this._window.add (this._grid);

        // Show the window and all child widgets

        this._window.show_all();

    }

    _okClicked() {

        // Create a popup that shows a silly message

        this._travel = new Gtk.MessageDialog ({

            transient_for: this._window,

            modal: true,

            message_type: Gtk.MessageType.OTHER,

            buttons: Gtk.ButtonsType.OK,

            text: this._messageText() });

        // Show the popup

        this._travel.show();

        // Bind the OK button to the function that closes the popup

        this._travel.connect ("response", this._clearTravelPopUp.bind(this));

    }

    _messageText() {

        // Create a silly message for the popup depending on what you selected

        var stringMessage = "";

        if (this._place1.get_active()) {

            if (this._thing1.get_active())

                stringMessage = "Penguins love the beach, too!";

            else if (this._thing2.get_active())

                stringMessage = "Make sure to put on that sunscreen!";

            else stringMessage = "Are you going to the beach in space?";

        }

        else if (this._place2.get_active()) {

            if (this._thing1.get_active())

                stringMessage = "The penguins will take over the moon!";

            else if (this._thing2.get_active())

                stringMessage = "A lack of sunscreen will be the least of your problems!";

            else stringMessage = "You'll probably want a spaceship, too!";

        }

        else if (this._place3.get_active()) {

            if (this._thing1.get_active())

                stringMessage = "The penguins will be happy to be back home!";

            else if (this._thing2.get_active())

                stringMessage = "Antarctic sunbathing may be hazardous to your health!";

            else stringMessage = "Try bringing a parka instead!";

        }

        return stringMessage;

    }

    _clearTravelPopUp() {

        this._travel.destroy();

    }

};

// Run the application

let app = new RadioButtonExample ();

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.Button.html">Gtk.Button</link>
</item>

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

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

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

</list>

  </section>

</page>