|
Packit |
1470ea |
|
|
Packit |
1470ea |
<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="comboboxtext.js" xml:lang="es">
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<title type="text">ComboBoxText (JavaScript)</title>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.js#menu-combo-toolbar"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="GtkApplicationWindow.js"/>
|
|
Packit |
1470ea |
<link type="seealso" xref="messagedialog.js"/>
|
|
Packit |
1470ea |
<revision version="0.1" date="2012-07-06" status="draft"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<credit type="author copyright">
|
|
Packit |
1470ea |
<name>Taryn Fox</name>
|
|
Packit |
1470ea |
<email its:translate="no">jewelfox@fursona.net</email>
|
|
Packit |
1470ea |
<years>2012</years>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<desc>Un menú desplegable de solo texto</desc>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Daniel Mustieles</mal:name>
|
|
Packit |
1470ea |
<mal:email>daniel.mustieles@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011 - 2017</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Nicolás Satragno</mal:name>
|
|
Packit |
1470ea |
<mal:email>nsatragno@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2012 - 2013</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Jorge González</mal:name>
|
|
Packit |
1470ea |
<mal:email>jorgegonz@svn.gnome.org</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
</info>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<title>ComboBoxText</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/combobox.png"/>
|
|
Packit |
1470ea |
Un «ComboBox» es un menú desplegable. La diferencia entre un <link xref="combobox.js">ComboBox</link> y un «ComboBoxText» es que este sólo tiene opciones básicas de texto, mientras que un «ComboBox» completo usa un «ListStore» o «TreeStore» (que son básicamente hojas de cálculo) para mostrar cosas como opciones de bifurcación, o imágenes junto a cada opción.
|
|
Packit |
1470ea |
<note>A menos que necesite las características adicionales de un «ComboBox» completo, o si se siente cómodo trabajando con «ListStore» y «TreeStore», encontrará mucho más simple usar un «ComboBoxText» siempre que sea posible. </note>
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="imports">
|
|
Packit |
1470ea |
<title>Bibliotecas que importar</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
const Lang = imports.lang;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="applicationwindow">
|
|
Packit |
1470ea |
<title>Crear la ventana de la aplicación</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
const ComboBoxTextExample = new Lang.Class ({
|
|
Packit |
1470ea |
Name: 'ComboBoxText Example',
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
_init: function () {
|
|
Packit |
1470ea |
this.application = new Gtk.Application ({
|
|
Packit |
1470ea |
application_id: 'org.example.jscomboboxtext'});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', Lang.bind(this, this._onActivate));
|
|
Packit |
1470ea |
this.application.connect('startup', Lang.bind(this, this._onStartup));
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents windows when active
|
|
Packit |
1470ea |
_onActivate: function () {
|
|
Packit |
1470ea |
this._window.present ();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup: function () {
|
|
Packit |
1470ea |
this._buildUI ();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Todo el código de este ejemplo va en la clase «MessageDialogExample». 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.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI: function () {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow ({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
title: "Welcome to GNOME",
|
|
Packit |
1470ea |
default_width: 200,
|
|
Packit |
1470ea |
border_width: 10 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="comboboxtext">
|
|
Packit |
1470ea |
<title>Crear el ComboBoxText</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the combobox
|
|
Packit |
1470ea |
this._comboBoxText = new Gtk.ComboBoxText();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Populate the combobox
|
|
Packit |
1470ea |
let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
|
|
Packit |
1470ea |
for (let i = 0; i < distros.length; i++)
|
|
Packit |
1470ea |
this._comboBoxText.append_text (distros[i]);
|
|
Packit |
1470ea |
this._comboBoxText.set_active (0);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the combobox's 'changed' signal to our callback function
|
|
Packit |
1470ea |
this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Después de crear el «ComboBoxText», se usa su método <file>append_text</file> para añadirle cadenas de texto. Al igual que las entradas en una matriz, cada una tiene un número para identificarlas, comenzando por el 0. Para hacer las cosas más simples, puede crear una matriz para los datos del «ComboBoxText», y después usar un bucle «for» para añadirlos en orden, como aquí.
|
|
Packit |
1470ea |
Después de poblar el «ComboBoxText», se activa su primera entrada, para ver la línea «Seleccionar distribución» antes de pulsarlo. Después se conecta su señal <file>changed</file> a la función «_onComboChanged», para que se llame siempre que haga una selección nueva del menú desplegable.
|
|
Packit |
1470ea |
<note>Si quiere añadirle una entrada a un «ComboBoxText», puede usar el método <file>insert_text</file>. Y si prefiere usar una cadena de texto como identificación de cada entrada en lugar de solo números, puede usar los métodos <file>append</file> e <file>insert</file>. Consulte los enlaces al final de este tutorial para ver detalles sobre su uso. </note>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the combobox to the window
|
|
Packit |
1470ea |
this._window.add (this._comboBoxText);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Finalmente, se añade el «ComboBoxText» a la ventana, y se le dice que se muestre con su widget.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="function">
|
|
Packit |
1470ea |
<title>Función que maneja su selección</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_onComboChanged: function () {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// The responses we'll use for our messagedialog
|
|
Packit |
1470ea |
let responses = ["",
|
|
Packit |
1470ea |
"Fedora is a community distro sponsored by Red Hat.",
|
|
Packit |
1470ea |
"Mint is a popular distro based on Ubuntu.",
|
|
Packit |
1470ea |
"SUSE is a name shared by two separate distros."];
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Se va a crear un <link xref="messagedialog.js">MessageDialog</link> emergente, que muestre un mensaje a partir de qué distribución elija. Primero, se crea la matriz de respuestas para usar. Dado que la primera cadena del «ComboBoxText» es solo el mensaje «Seleccione distribución», la primera cadena de la matriz está vacía.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Which combobox item is active?
|
|
Packit |
1470ea |
let activeItem = this._comboBoxText.get_active();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// No messagedialog if you chose "Select distribution"
|
|
Packit |
1470ea |
if (activeItem != 0) {
|
|
Packit |
1470ea |
this._popUp = new Gtk.MessageDialog ({
|
|
Packit |
1470ea |
transient_for: this._window,
|
|
Packit |
1470ea |
modal: true,
|
|
Packit |
1470ea |
buttons: Gtk.ButtonsType.OK,
|
|
Packit |
1470ea |
message_type: Gtk.MessageType.INFO,
|
|
Packit |
1470ea |
text: responses[activeItem]});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the OK button to a handler function
|
|
Packit |
1470ea |
this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the messagedialog
|
|
Packit |
1470ea |
this._popUp.show();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Antes de mostrar un «MessageDialog», se verifica que no ha elegido el mensaje «Seleccionar distribución». Después de eso, se establece su texto a la entrada en la matriz que le corresponde a la entrada activa en el «ComboBoxText». Esto se hace usando el método <file>get_active</file>, que devuelve la identificación numérica de su selección.
|
|
Packit |
1470ea |
<note>Otros métodos que puede usar incluyen <file>get_active_id</file>, que devuelve la identificación de texto que asignó <file>append</file>, y <file>get_active_text</file>, que devuelve el texto completo de la cadena que seleccionó. </note>
|
|
Packit |
1470ea |
Después de crear el «MessageDialog», se conecta su señal «response» a la función «onDialogResponse», y se le dice que se muestre.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_onDialogResponse: function () {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
this._popUp.destroy ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Dado que el único botón que tiene el «MessageDialog» es un botón aceptar, no se necesita verificar su «response_id» para ver qué botón se pulsó. Todo lo que se hace aquí es destruir la ventana emergente.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new ComboBoxTextExample ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Finalmente, se crea una instancia nueva de la clase ComboBoxTextExample terminada, y se ejecuta la aplicación.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="complete">
|
|
Packit |
1470ea |
<title>Código de ejemplo completo</title>
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class ComboBoxTextExample {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application ({
|
|
Packit |
1470ea |
application_id: 'org.example.jscomboboxtext'});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents windows when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present ();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow ({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
title: "Welcome to GNOME",
|
|
Packit |
1470ea |
default_width: 200,
|
|
Packit |
1470ea |
border_width: 10 });
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the combobox
|
|
Packit |
1470ea |
this._comboBoxText = new Gtk.ComboBoxText();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Populate the combobox
|
|
Packit |
1470ea |
let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
|
|
Packit |
1470ea |
for (let i = 0; i < distros.length; i++)
|
|
Packit |
1470ea |
this._comboBoxText.append_text (distros[i]);
|
|
Packit |
1470ea |
this._comboBoxText.set_active (0);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the combobox's 'changed' signal to our callback function
|
|
Packit |
1470ea |
this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the combobox to the window
|
|
Packit |
1470ea |
this._window.add (this._comboBoxText);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_onComboChanged() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// The responses we'll use for our messagedialog
|
|
Packit |
1470ea |
let responses = ["",
|
|
Packit |
1470ea |
"Fedora is a community distro sponsored by Red Hat.",
|
|
Packit |
1470ea |
"Mint is a popular distro based on Ubuntu.",
|
|
Packit |
1470ea |
"SUSE is a name shared by two separate distros."];
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Which combobox item is active?
|
|
Packit |
1470ea |
let activeItem = this._comboBoxText.get_active();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// No messagedialog if you chose "Select distribution"
|
|
Packit |
1470ea |
if (activeItem != 0) {
|
|
Packit |
1470ea |
this._popUp = new Gtk.MessageDialog ({
|
|
Packit |
1470ea |
transient_for: this._window,
|
|
Packit |
1470ea |
modal: true,
|
|
Packit |
1470ea |
buttons: Gtk.ButtonsType.OK,
|
|
Packit |
1470ea |
message_type: Gtk.MessageType.INFO,
|
|
Packit |
1470ea |
text: responses[activeItem]});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the OK button to a handler function
|
|
Packit |
1470ea |
this._popUp.connect ('response', this._onDialogResponse.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the messagedialog
|
|
Packit |
1470ea |
this._popUp.show();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_onDialogResponse() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
this._popUp.destroy ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new ComboBoxTextExample ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="in-depth">
|
|
Packit |
1470ea |
<title>Documentación en profundidad</title>
|
|
Packit |
1470ea |
En este ejemplo se usa lo siguiente:
|
|
Packit |
1470ea |
<list>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBoxText.html">Gtk.ComboBoxText</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link> </item>
|
|
Packit |
1470ea |
</list>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</page>
|