gnome-devel-docs.platform-demos.master - en to es_ES translation catalogue (1985 entries)

note: (itstool) path: info/desc
en: Learn how to lay out UI components, like Images and Labels.
es_ES: Aprenda cómo distribuir componentes de la IU, como imágenes y etiquetas.

note: (itstool) path: page/title
en: 2. Welcome to the Grid
es_ES: 2. Bienvenido/a a la rejilla

note: (itstool) path: synopsis/p
en: This tutorial will show you how to create basic widgets, or parts of the GNOME user interface, like Images and Labels. You'll then learn how to arrange them all in a Grid, which lets you put widgets exactly where you want them.
es_ES: Este tutorial le mostrará cómo crear widgets básicos, o partes de la interfaz de usuario de GNOME, como imágenes y etiquetas. Después aprenderá cómo ordenarlas en una rejilla, que le permite poner widgets exactamente donde los quiere.

note: (itstool) path: note/p
en: Have you taken <link xref="hellognome.js">the first tutorial in this series</link> already? You'll want to do so before continuing.
es_ES: ¿Ya ha hecho <link xref="hellognome.js">el primer tutorial en esta serie</link>? Querrá hacerlo antes de continuar.

note: (itstool) path: section/title
en: Going native
es_ES: Pasar a nativo

note: (itstool) path: section/p
en: In the last tutorial, we created what was basically a GNOME window frame for a web app. All the GNOME-specific code we needed to learn revolved around putting the WebView -- the widget containing our application -- into an ApplicationWindow, and telling it to display. The application itself was written in HTML and JavaScript, just like most pages on the web.
es_ES: En el último tutorial, se creó básicamente una ventana de GNOME como marco para una aplicación web. Todo el código específico de GNOME que necesitó aprender trataba del poner la «WebView» (el widget que contenía la aplicación) en una «ApplicationWindow», y decirle que la muestre. La aplicación en sí estaba escrita en HTML y JavaScript, al igual que la mayoría de las páginas en la web.

note: (itstool) path: section/p
en: This time, we're going to use only native GNOME widgets. A widget is just a thing, like a checkbox or picture, and GNOME has a wide variety of them to choose from. We call them "native" widgets to distinguish them from things like the button and header in the web app we wrote. Because instead of using web code, these are going to be 100 percent GNOME, using GTK+.
es_ES: Esta vez, solo se van a usar widgets nativos de GNOME. Un widget sólo es una cosa, como una casilla de verificación o una imagen, y GNOME tiene una amplia variedad para elegir. Se llaman widgets «nativos» para distinguirlos de cosas como el botón y la cabecera en la aplicación web que escribió. Porque en lugar de usar código web, estos van a ser 100% GNOME, usando GTK+.

note: (itstool) path: note/p
en: GTK+ stands for "GIMP Toolkit". It's like a toolbox of widgets that you can reach into, while building your applications. It was originally written for <link href="http://www.gimp.org/">the GIMP</link>, which is a free software image editor.
es_ES: GTK+ significa «GIMP Toolkit». Es como una caja de herramientas de widgets a la que puede acceder cuando construye sus aplicaciones. Originalmente se escribió para <link href="http://www.gimp.org/">GIMP</link>, que es un editor de imágenes de software libre.

note: (itstool) path: section/title
en: Setting up our application
es_ES: Creando la aplicación

note: (itstool) path: section/p
en: Before we dig out any widgets from the GTK+ toolbox, we first need to write the basic boilerplate code that our application requires.
es_ES: Antes de sacar ningún widget de la caja de herramientas de GTK+, se necesita escribir el código básico plantilla que la aplicación requiere.

note: (itstool) path: section/p
en: This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the widgets, using the stable '3.0' API.
es_ES: Esta parte siempre va al inicio del código. Dependiendo de qué va a hacer con él, puede querer declarar más importaciones aquí. Este ejemplo es bastante básico, por lo que esto es todo lo que necesita; «Gtk» para los widgets, usando la versión estable 3.0 de la API.

note: (itstool) path: section/p
en: Speaking of which:
es_ES: Hablando de eso:

note: (itstool) path: section/p
en: This is the start of the application itself, and the _init function which creates it. It tells _buildUI to create an ApplicationWindow, which we're going to call _window, and it tells our window to present itself whenever needed.
es_ES: Este es el inicio de la aplicación en sí, y la función «_init» que la crea. Le dice a «_buildUI» que cree una «ApplicationWindow», a la que se llamará «_window», y le dice a la ventana que se presente cuando se la necesite.

note: (itstool) path: section/p
en: This part, again, is pretty much copy-and-paste, but you always want to give your application a unique name.
es_ES: Esta parte, nuevamente, es principalmente copiar y pegar, pero siempre querrá darle a su aplicación un nombre único.

note: (itstool) path: section/p
en: Finally, we start off the _buildUI function by creating a new ApplicationWindow. We specify that it goes with this application, that it should appear in the center of the screen, and that there should be at least 10 pixels between the outside edge and any widgets inside of it. We also give it a title, which will appear at the top of the window.
es_ES: Finalmente, se arranca la función «_buildUI» creando una «ApplicationWindow» nueva. Se especifica que va con esta aplicación, que debe aparecer en el centro de la pantalla, y que debe haber al menos 10 píxeles entre el borde exterior y cualquier widget dentro de ella. También se le da un título, que aparecerá en la parte superior de la ventana.

note: (itstool) path: section/title
en: Reaching into the GTK+ toolbox
es_ES: Usar la caja de herramientas de GTK+

note: (itstool) path: section/p
en: What widgets should we use? Well, let's say we want to write an application that looks like this:
es_ES: ¿Qué widgets deben usarse? Bueno, si quiere escribir una aplicación que se vea así:

note: (itstool) path: section/p
en: We're going to need, at the very least, a picture and a text label to go with it. Let's start with the picture:
es_ES: Necesitará, al menos, una imagen y una etiqueta de texto para acompañarla. Comience con la imagen:

note: (itstool) path: section/p
en: You can download the image file used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">here</link>. Be sure to put it in the same directory as the code you're writing.
es_ES: Puede descargar el archivo de imagen usado en este ejemplo <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">aquí</link>. Asegúrese de ponerlo en la misma carpeta que el código que está escribiendo.

note: (itstool) path: section/p
en: That code adds in the label beneath. You can see how we create widgets, here; each one is a part of Gtk, and we can give it properties that customize how it behaves. In this case, we set the Image's file property to be the filename of the picture we want, and the Label's label property to be the sentence that we want beneath the picture.
es_ES: Ese código añade la etiqueta debajo. Puede ver cómo se crean los widgets aquí; cada uno es una parte de GTK+, y se le pueden dar propiedades que personalizan cómo se comportan. En este caso, se establece la propiedad «file» de la imagen al nombre de archivo de la imagen que se desea, y la propiedad «label» de la etiqueta a la oración que se quiere bajo la imagen.

note: (itstool) path: note/p
en: Yes, it sounds redundant for a Label to have a label property, but it's not. Other widgets that contain text have a label property, so it's <em>consistent</em> for the Label widget to have one too.
es_ES: Sí, suena redundante que un objeto «Label» tenga una propiedad «label», pero no lo es. Otros widgets que contienen texto también tienen una propiedad «label», por lo que es <em>consistente</em> que un widget «Label» también tenga una.

note: (itstool) path: section/p
en: We can't just add these widgets to our window in order, though, the same way HTML elements appear in the order you write them. That's because an ApplicationWindow can only contain one widget.
es_ES: Sin embargo, no se pueden simplemente añadir estos widgets a la ventana en orden, como los elementos HTML aparecen en el orden en el que los escribe. Eso es porque una «ApplicationWindow» sólo puede contener un widget.

note: (itstool) path: section/p
en: How do we get around that? By making that one widget a container widget, which can hold more than one widget and organize them inside it. Behold: The Grid.
es_ES: ¿Cómo se resuelve eso? Haciendo que ese widget sea un widget contenedor, que puede contener más de un widget y organizarlos dentro. Observe la rejilla.

note: (itstool) path: section/p
en: We're not giving it any properties yet. Those will come later, as we learn how to use the Grid's powers. First, let's attach the Image and Label we made to our Grid.
es_ES: Todavía no se le da ninguna propiedad. Estas vendrán después, cuando aprenda cómo usar los poderes de la rejilla. Primero, adjúntele a su rejilla la imagen y la etiqueta que hizo.

note: (itstool) path: section/p
en: This code looks awfully complicated, but it's not. Here's what those numbers mean:
es_ES: Este código se ve terriblemente complicado, pero no lo es. Aquí está lo que esos números significan:

note: (itstool) path: item/p
en: The <em>first</em> number is what left-to-right position to put things in, starting from 0. Any widget that uses a 0 here goes all the way to the left.
es_ES: El <em>primer</em> número es en qué posición de izquierda a derecha se ponen las cosas, comenzando desde 0. Cualquier widget que use un 0 aquí va todo a la izquierda.

note: (itstool) path: item/p
en: The <em>second</em> number is what top-to-bottom position to put a given widget in, starting from 0. The Label goes beneath the Image, so we give the Image a 0 and the Label a 1 here.
es_ES: El <em>segundo</em> número es en qué posición de arriba a abajo se pone un widget dado, comenzando desde 0. La etiqueta va debajo de la imagen, por lo que se le da a la imagen un 0 y a la etiqueta un 1 aquí.

note: (itstool) path: item/p
en: The <em>third</em> and <em>fourth</em> numbers are how many columns and rows a widget should take up. We'll see how these work in a minute.
es_ES: Los números <em>tercero</em> y <em>cuarto</em> son cuántas columnas y filas debe ocupar un widget. Se verá cómo funciona esto en un minuto.

note: (itstool) path: section/p
en: Now that we've created the Grid and attached all our widgets to it, we add it to the window and tell the window to show itself, as the last part of the _buildUI function. As always, to finish up we create a new instance of the application's class and tell it to run.
es_ES: Ahora que ha creado la rejilla y le ha adjuntado todos los widgets, se añade a la ventana y se le dice que se muestre, como la última parte de la función «_buildUI». Como siempre, para finalizar se crea una instancia nueva de la clase de la aplicación y se le dice que se ejecute.

note: (itstool) path: section/p
en: Save your application as welcome_to_the_grid.js. Then, to run your application just open a terminal, go to the directory where your application is at, and type
es_ES: Guarde su aplicación como «welcome_to_the_grid.js». Después, para ejecutar su aplicación simplemente abra una terminal, vaya a la carpeta en la que está, y escriba

note: (itstool) path: section/p
en: There we go! But wait. That doesn't look right. Why is the Label crammed up next to the Image like that? That doesn't look as nice, and it makes it harder to read. What can we do about this?
es_ES: ¡Allí va! Pero espere. Eso no se ve bien. ¿Por qué la etiqueta está pegada a la imagen así? Eso no se ve tan bien, y la hace difícil de leer. ¿Qué puede hacer acerca de esto?

note: (itstool) path: section/title
en: Tweaking the Grid
es_ES: Configurar la rejilla

note: (itstool) path: section/p
en: One thing we can do, is we can give the Label a margin_top property when we create it. This works sort of like setting a margin for an HTML element using inline CSS styling.
es_ES: Una cosa que puede hacer, es darle a la etiqueta una propiedad «margin_top» cuando la crea. Esto funciona de manera similar a establecer un margen para un elemento HTML usando estilos CSS en línea.

note: (itstool) path: section/p
en: Of course, if we do that then if we replace the Label with something else -- or add in another widget -- then we have to repeat the margin_top on it too. Otherwise we end up with something like this:
es_ES: Por supuesto, si hace eso y después remplaza la etiqueta con otra cosa (o añade otro widget), entonces tendrá que repetir el «margin_top». De lo contrario, acabará con algo así:

note: (itstool) path: section/p
en: We could give the Image a margin_bottom property, but that won't work when the new Label is in a separate column. So how about we try this instead:
es_ES: Le podría dar una propiedad «margin_bottom» a la imagen, pero no funcionará cuando la etiqueta nueva esté en una columna separada. Entonces, mejor probar esto:

note: (itstool) path: section/p
en: That makes it so that there are always 20 pixels of space in between each horizontal row.
es_ES: Eso hace que siempre hayan 20 píxeles de espacio entre cada fila horizontal.

note: (itstool) path: note/p
en: Yes, you can also set the column_spacing property on a Grid, or the margin_left and margin_right properties on any widget. Try them out, if you like!
es_ES: Sí, también puede establecer la propiedad «column_spacing» en una rejilla, o las propiedades «margin_left» y «margin_right» en cualquier widget. Pruébelas, si quiere.

note: (itstool) path: section/title
en: Adding more widgets
es_ES: Añadir más widgets

note: (itstool) path: section/p
en: If we did want to add a second Label, how would we do it so that it actually looked like it belonged there? One way is to center the Image on top, so that it's above both Labels instead of just the one on the left. That's where those other numbers in the Grid's attach method come in:
es_ES: Si quisiera añadir una segunda etiqueta, ¿cómo lo haría para que realmente se vea integrada? Una manera es centrar la imagen en la parte superior, para que esté encima de ambas etiquetas en lugar de sólo de la que está en la izquierda. Allí es donde los otros números en el método «attach» de la rejilla entran:

note: (itstool) path: section/p
en: After we create the second Label, we attach it to the Grid to the right of the first Label. Remember, the first two numbers count columns and rows from left to right and top to bottom, starting with 0. So if the first Label is in column 0 and row 1, we can put the second in column 1 and row 1 to put it to the right of the first Label.
es_ES: Después de haber creado la segunda etiqueta, se añade a la rejilla a la derecha de la primera. Recuerde, los primeros dos números cuentan columnas y filas de izquierda a derecha y de arriba a abajo, comenzando desde 0. Por lo que si la primera etiqueta está en la columna 0 y fila 1, se puede poner la segunda en la columna 1 y fila 1 para ponerla a la derecha de la primera.

note: (itstool) path: section/p
en: Note the number 2 in the attach statement for the Image. That's what does the trick here. That number is how many columns the Image spans, remember? So when we put it together, we get something like this:
es_ES: Tenga en cuenta el número 2 en la declaración «attach» de la imagen. Eso es lo que hace el truco. Ese número indica cuántas columnas ocupa la imagen, ¿recuerda? Entonces, cuando se junta todo, se obtiene algo así:

note: (itstool) path: section/p
en: There are two things you should take note of, here.
es_ES: Hay dos cosas de las que debe tomar nota, aquí.

note: (itstool) path: item/p
en: Setting the Image to span two columns doesn't stretch the picture itself horizontally. Instead, it stretches the invisible box taken up by the Image widget to fill both columns, then places the Image in the center of that box.
es_ES: Configurar la imagen para que ocupe dos columnas no la estrecha en sí horizontalmente. En vez de eso, estrecha la caja invisible que el widget «Image» ocupa para llenar ambas columnas, y luego pone la imagen en el centro de esa caja.

note: (itstool) path: item/p
en: Even though we've set the Grid's row_spacing and the ApplicationWindow's border_width properties, we haven't yet set anything that puts a border in between the two Labels. They were separate earlier when the Image was in only one column, but now that it spans both GNOME doesn't see a reason to keep them apart.
es_ES: Incluso a pesar de que ha establecido las propiedades «row_spacing» de la rejilla y «border_with» de la ventana de la aplicación, todavía no ha establecido nada que ponga un borde entre las dos etiquetas. Estaban separadas anteriormente cuando la imagen estaba en una sola columna, pero ahora que ocupa ambas GNOME no ve una razón para mantenerlas separadas.

note: (itstool) path: section/p
en: There are at least three ways we can get around that last one. First, we can set a margin_left or margin_right on one of the Labels:
es_ES: Existen por lo menos tres maneras de solucionar esto último. Primero, se puede establecer «margin_left» o «margin_right» en una de las etiquetas:

note: (itstool) path: section/p
en: Second, we can set the Grid's column_homogeneous property to true.
es_ES: Segundo, se puede establecer la propiedad «column_homogenous» de la rejilla a «true».

note: (itstool) path: section/p
en: That makes it look something like this:
es_ES: Eso hace que se vea algo así:

note: (itstool) path: section/p
en: And third, we can set the Grid's column_spacing property, the same way we set its row_spacing.
es_ES: Y tercero, se puede establecer la propiedad «column_spacing» de la rejilla, de la misma manera que «row_spacing».

note: (itstool) path: section/p
en: That makes it look like this:
es_ES: Esto hace que se vea así:

note: (itstool) path: section/title
en: Using stock images
es_ES: Usar imágenes del almacén

note: (itstool) path: section/p
en: GNOME has a lot of stock images on hand already, that we can use if we don't feel like creating our own or if we want a universally-recognized icon. Here's how we create a stock image, compared to how we create a normal one:
es_ES: GNOME tiene muchas imágenes del almacén disponibles que se pueden usar si no quiere crear las suyas o si quiere usar un icono universalmente reconocido. Aquí se muestra cómo crear una imagen del almacén, comparado con crear una normal:

note: (itstool) path: section/p
en: After that, we attach it to the Grid to the left of the first Label. (We aren't using the second one for this example.)
es_ES: Después de eso, se añade a la rejilla, a la izquierda de la primera etiqueta (todavía no se usa la segunda en este ejemplo).

note: (itstool) path: section/p
en: That gives us this, when we run it:
es_ES: Eso da esto, cuando se ejecuta:

note: (itstool) path: section/p
en: That's what the stock "About" icon looks like. You can see a list of all the stock items starting with gtk-about in <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">GNOME's developer documentation</link>. It was written for C programmers, but you don't need to know C to use it; just look at the part in quotation marks, like "gtk-about", and copy that part to use the icon next to it.
es_ES: Así se ve el icono del almacén «About». Puede ver una lista de todos los elementos del almacén comenzando con «gtk-about» en la <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">documentación del desarrollador de GNOME</link>. Se escribió para programadores de C, pero no necesita saber C para usarla; simplemente consulte la parte entre comillas, como "gtk-about", y copie esa parte para usar el icono junto a ella.

note: (itstool) path: note/p
en: We put single quotes around 'gtk-about' here because, unlike text strings that have double quotes around them, that part will never need to be translated into another language. In fact, if it <em>were</em> translated it'd break the icon, because its name is still "gtk-about" no matter which language you speak.
es_ES: Se ponen comillas simples alrededor de «gtk-about» aquí porque, a diferencia de cadenas de texto que tienen comillas dobles, esa parte nunca necesitará traducirse a otro lenguaje. En realidad, si se <em>tradujera</em> rompería el icono, porque su nombre todavía es «gtk-about» sin importar el lenguaje en el que habla.

note: (itstool) path: section/title
en: What's next?
es_ES: ¿Qué viene ahora?

note: (itstool) path: section/p
en: Before we go on to the next tutorial, let's try something a little different:
es_ES: Antes de continuar con el siguiente tutorial, intente algo un poco diferente:

note: (itstool) path: section/p
en: That's right, we turned the Label into a Button just by changing the name! If you run the application and click on it, though, you'll find that it doesn't do anything. How do we make our Button do something? That's what we'll find out, in <link xref="03_getting_the_signal.js">our next tutorial</link>.
es_ES: Así es, se convirtió la etiqueta en un botón simplemente cambiándole el nombre. Si ejecuta la aplicación y la pulsa, sin embargo, verá que no hace nada. ¿Cómo hacer para que el botón haga algo? Eso es lo que descubrirá, en <link xref="03_getting_the_signal.js">el próximo tutorial</link>.

note: (itstool) path: section/p
en: If you like, feel free to spend some time experimenting with Grids, Labels, and Images, including stock images.
es_ES: Si quiere, siéntase libre de experimentar con rejillas, etiquetas, e imágenes, incluyendo imágenes del almacén.

note: (itstool) path: note/p
en: One trick you can use to make more complex layouts is to nest Grids inside of each other. This lets you group together related widgets, and rearrange them easily. Take a look at the <link xref="radiobutton.js">RadioButton</link> code sample if you'd like to see how this is done.
es_ES: Un truco que puede usar para hacer distribuciones más complejas es anidar rejillas una dentro de otra. Esto le permite agrupar widgets interrelacionados, y reorganizarlos fácilmente. Eche un vistazo a la muestra de código del <link xref="radiobutton.js">botón de radio</link> si quiere ver cómo se hace esto.

note: (itstool) path: section/title
en: Complete code sample
es_ES: Código de ejemplo completo

note: (itstool) path: info/desc
en: Create Buttons and other widgets that do things when you click on them.
es_ES: Crear botones y otros widgets que efectúan acciones cuando los pulsa.

note: (itstool) path: page/title
en: 3. Getting the Signal
es_ES: 3. Obtener la señal

note: (itstool) path: synopsis/p
en: In the last tutorial, we learned how to create widgets like Labels, Images, and Buttons. Here, we'll learn how to make Buttons and other input widgets actually do things, by writing functions which handle the signals they send when they are clicked on or interacted with.
es_ES: En el último tutorial, aprendió cómo crear widgets como etiquetas, imágenes y botones. Aquí, aprenderá cómo hacer que los botones y otros widgets de entrada hagan cosas realmente, escribiendo funciones que manejen las señales que envían cuando se pulsan o interactúan.

note: (itstool) path: section/title
en: A basic application
es_ES: Una aplicación básica

note: (itstool) path: section/p
en: In GNOME, widgets that you can interact with, like Buttons and Switches, send out signals when they are clicked on or activated. A Button, for instance, sends out the "clicked" signal when somebody clicks on it. When this happens, GNOME looks for the part in your code that says what to do.
es_ES: En GNOME, los widgets con los que puede interactuar, como los botones y los interruptores, envían señales cuando se pulsan o activan. Un botón, por ejemplo, envía la señal «clicked» cuando alguien lo pulsa. Cuando esto sucede, GNOME busca la parte de su código que dice qué hacer.

note: (itstool) path: section/p
en: How do we write that code? By connecting that Button's "clicked" signal to a callback function, which is a function you write just to handle that signal. So whenever it gives off that signal, the function connected to that signal is run.
es_ES: ¿Cómo se escribe ese código? Conectando la señal «clicked» del botón a una función de retorno de llamada, que es una función que se escribe sólo para manejar esa señal. Entonces, cuando se envía esa señal, la función conectada se ejecuta.

note: (itstool) path: section/p
en: Here is an extremely basic example:
es_ES: Aquí hay un ejemplo extremadamente básico:

note: (itstool) path: section/p
en: This ApplicationWindow has a Button and a Label inside it, arranged in a Grid. Whenever the Button is clicked, a variable that holds the number of cookies is increased by 1, and the Label that shows how many cookies there are is updated.
es_ES: La ApplicationWindow tiene un botón y una etiqueta dentro, ordenados en una rejilla. Cuando se pulsa el botón, una variable que guarda el número de galletas se incrementa en 1, y la etiqueta que muestra cuántas galletas hay se actualiza.

note: (itstool) path: note/p
en: The cookies in this example are not the same as the cookies that you get from websites, which store your login information and may keep track of which sites you've visited. They're just imaginary treats. You may bake some real ones if you like.
es_ES: Las galletas en este ejemplo no son las «cookies» que obtiene de sitios web, que almacenan su información de sesión y pueden rastrear qué sitios visitó. Son solamente utilería imaginaria. Puede hornear algunas reales, si quiere.

note: (itstool) path: section/p
en: Here is the basic, boilerplate code that goes at the start of the application, before we start creating the window and widgets. Besides the application having a unique name, the biggest change from the usual boilerplate is that we create a global variable right near the beginning, to hold the number of cookies.
es_ES: Aquí está el código básico y repetitivo que va al inicio de la aplicación, antes de comenzar a crear la ventana y los widgets. Además de que la aplicación tiene un nombre único, el cambio más grande respecto del código usual es que se crea una variable global cerca del principio, para guardar el número de galletas.

note: (itstool) path: section/p
en: Take a look at the part that uses our application's connect method and bind, to connect its activate and startup signals to the functions that present the window and build the UI. We're going to do the same thing with our Button when we get to it, except that we're going to connect its "clicked" signal instead.
es_ES: Eche un vistazo a la parte que usa el método «connect» de la aplicación y «bind», para conectar sus señales «activate» y «startup» a las funciones que presentan la ventana y construyen la IU. Va a hacer lo mismo con el botón cuando llegue a él, excepto que conectará la señal «clicked» en su lugar.

note: (itstool) path: section/title
en: Click the button
es_ES: Pulsar el botón

note: (itstool) path: section/p
en: As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function, which is called when the application starts up.
es_ES: Como siempre, se pondrá todo el código para crear el botón y los otros widgets dentro de la función «_buildUI», que se llama cuando la aplicación arranca.

note: (itstool) path: section/p
en: First, we create the window itself:
es_ES: Primero, se crea la ventana en sí:

note: (itstool) path: section/p
en: Note that we've set its default_height and default_width properties. These let us control how tall and wide the ApplicationWindow will be, in pixels.
es_ES: Tenga en cuenta que se han establecido sus propiedades «default_height» y «default_width». Estas le permiten controlar qué tan alta y ancha será la «ApplicationWindow», en píxeles.

note: (itstool) path: section/p
en: Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as part of the Label's label property.
es_ES: A continuación, se creará la etiqueta que muestra el número de galletas. Se puede usar la variable de las galletas como parte de la propiedad «label» de la etiqueta.

note: (itstool) path: section/p
en: Now we'll create the Button. We set its label property to show the text that we want on the Button, and we connect its "clicked" signal to a function called _getACookie, which we'll write after we're done building our application's UI.
es_ES: Ahora se creará el botón. Se configura su propiedad «label» para que muestre el texto que quiere en el botón, y se conecta su señal «clicked» a una función llamada «_getACookie», que se escribirá después de haber construido la IU de la aplicación.

note: (itstool) path: section/p
en: Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to show itself and its contents. That's all we need inside the _buildUI function, so we close it with a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.
es_ES: Finalmente, se crea una rejilla, se le adjuntan la etiqueta y el botón, se añade a la ventana y se le dice que se muestre con su contenido. Eso es todo lo que necesita dentro de la función «_buildUI», por lo que se cierra con un paréntesis y un punto y coma que le dice a GNOME que continúe con la siguiente función. Tenga en cuenta que incluso a pesar de que se escribió el código de la etiqueta primero, igual se puede adjuntar a la rejilla de forma tal que quede en la parte inferior.

note: (itstool) path: section/p
en: Now, we write the _getACookie function. Whenever our Button sends out its "clicked" signal, the code in this function will run. In this case, all it does is increase the number of cookies by 1, and update the Label to show the new number of cookies. We do this using the Label's set_label method.
es_ES: Ahora, se escribe la función «_getACookie». Cada vez que el botón envíe su señal «clicked», se ejecutará el código de esta función. En este caso, todo lo que hace es incrementar el número de galletas en 1, y actualizar la etiqueta para que muestre el número nuevo. Esto se hace usando el método «set_label» de la etiqueta.

note: (itstool) path: note/p
en: Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a label property that says what text is inside them, and get_label and set_label methods that let you check what that text is and change it, respectively. So if you learn how one widget works, you'll also know how others like it work.
es_ES: Muchos widgets tienen las mismas propiedades y métodos. Tanto las etiquetas como los botones, por ejemplo, tienen una propiedad «label» que dice qué texto va dentro de ellos, y métodos «get_label» y «set_label» que le permiten verificar cuál es el texto y cambiarlo, respectivamente. Por lo que si aprende cómo funciona un widget, también aprenderá cómo funcionan otros similares.

note: (itstool) path: section/p
en: Finally, we run the application, using the same kind of code as in our last tutorial.
es_ES: Finalmente, se ejecuta la aplicación, usando el mismo tipo de código que en el tutorial anterior.

note: (itstool) path: section/title
en: Flip the switch
es_ES: Pulsar el interruptor

note: (itstool) path: section/p
en: Buttons aren't the only input widgets in our GTK+ toolbox. We can also use switches, like the one in this example. Switches don't have a label property, so we have to create a separate Label that says what it does to go next to it.
es_ES: Los botones no son el único widget de entrada de la caja de herramientas de GTK+. También se pueden usar interruptores, como el de este ejemplo. Los interruptores no tienen una propiedad «label», por lo que hay que crear una etiqueta separada que diga qué hace a su lado.

note: (itstool) path: section/p
en: A Switch has two positions, Off and On. When a Switch is turned on, its text and background color change, so you can tell which position it's in.
es_ES: Un interruptor tiene dos posiciones, «apagado» y «encendido». Cuando un interruptor está encendido, su texto y color de fondo cambian, indicando en qué posición está.

note: (itstool) path: section/p
en: You may have seen Switches like these in GNOME's accessibility menu, which let you turn features like large text and the on-screen keyboard on and off. In this case, the Switch controls our imaginary cookie dispenser. If the Switch is turned on, you can get cookies by clicking the "Get a cookie" Button. If it's turned off, clicking the Button won't do anything.
es_ES: Puede haber visto interruptores como estos en el menú de accesibilidad de GNOME, que le permiten conmutar características como texto grande y el teclado en pantalla. En este caso, el interruptor controla un dispensador de galletas imaginario. Si el interruptor está encendido, puede obtener galletas pulsando el botón «Get a cookie». Si está apagado, pulsar el botón no hará nada.

note: (itstool) path: note/p
en: You can get to the accessibility menu by clicking on the outline of a human, near your name in the upper-right corner of the screen.
es_ES: Puede llegar al menú de accesibilidad pulsando el contorno de un humano, cerca de su nombre en la esquina superior derecha de la pantalla.

note: (itstool) path: section/p
en: Here's how we create the Switch:
es_ES: Aquí se muestra cómo crear el interruptor:

note: (itstool) path: section/p
en: We don't actually need to connect the Switch to anything. All we need to do is write an if statement in our _getACookie function, to check to see if the Switch is turned on. If we wanted to make something happen as soon as you flip the Switch, though, we would connect its notify::active signal, like so:
es_ES: En realidad no se necesita conectar el interruptor a nada. Todo lo que hay que hacer es escribir una declaración «if» en la función «_getACookie», para verificar si el interruptor está encendido. Si quisiera hacer que algo suceda tan pronto como se acciona el interruptor, conectaría su señal «notify::active», así:

note: (itstool) path: section/p
en: A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would set the value of its active property to true when we create it.
es_ES: De manera predeterminada, un interruptor está apagado. Si quisiera que el interruptor arrancara encendido, establecería el valor de su propiedad «active» a «true» cuando lo crea.

note: (itstool) path: section/p
en: Let's just create it normally, though, and then create the Label that goes with it. We want the Switch and the Label to be kept right next to each other, so we'll create a Grid just for them, then put that Grid in our larger Grid that holds all the widgets inside it. Here's what the code looks like to create all that:
es_ES: Por ahora sólo se creará normalmente, y después se creará la etiqueta que lo acompaña. Se quiere que el interruptor y la etiqueta estén lado a lado, por lo que se creará una rejilla sólo para ellos, y después se pondrá esa rejilla en la rejilla más grande que contiene todos los widgets. Aquí está cómo se ve el código para crear todo eso:

note: (itstool) path: section/p
en: And now we arrange everything in the larger Grid like so.
es_ES: Y ahora se organiza todo en la rejilla más grande así.

note: (itstool) path: section/p
en: Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on. We do that by using the Switch's get_active method. It returns true if the Switch is turned on, and false if the Switch is turned off.
es_ES: Ahora se cambia la función «_getACookie» para que verifique si el dispensador de galletas está encendido. Se hace usando el método «get_active» del interruptor. Devuelve «true» si está encendido, y «false» si está apagado.

note: (itstool) path: note/p
en: When a method is used in an if statement like this, the code inside the if statement is executed if the method returns true.
es_ES: Cuando un método se usa en una declaración «if» como esta, el código dentro de la declaración «if» se ejecuta si el método devuelve «true».

note: (itstool) path: section/title
en: Tuning the radio
es_ES: Sintonizar la radio

note: (itstool) path: section/p
en: Another type of input widget we can use is called the RadioButton. You create them in groups, and then only one RadioButton in a group can be selected at a time. They're called RadioButtons because they work like the channel preset button in old-style car radios. The radio could only be tuned to one station at a time, so whenever you pressed one button in, another would pop back out.
es_ES: Otro tipo de widget de entrada que puede usar se llama botón de radio. Se crean en grupos, y sólo un botón de radio en un grupo puede seleccionarse por vez. Se llaman botones de radio porque funcionan como los botones de selección de canal en las radios de coches viejos. La radio sólo podía sintonizarse con una estación a la vez, por lo que cada vez que presionaba un botón, otro saltaba hacia arriba.

note: (itstool) path: section/p
en: First off, let's change our ApplicationWindow's name and increase its border_width property, so that our widgets aren't packed in too tightly. The border_width is the number of pixels between any widget and the edge of the window.
es_ES: Primero, cambie el nombre de la «ApplicationWindow» e incremente su propiedad «border_width», para que los widgets no se empaqueten demasiado apretados. El «border_width» es el número de píxeles entre cualquier widget y el borde de la ventana.

note: (itstool) path: section/p
en: After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we set each new RadioButton's group property to the name of another RadioButton.
es_ES: Después de eso, se crean los botones de radio. ¿Recuerda cómo se crean en grupos? Eso se hace estableciendo la propiedad «group» de cada botón de radio al nombre de otro.

note: (itstool) path: section/p
en: Next, we create a Grid for the RadioButtons. Remember, we don't have to arrange things in Grids in the same order that we create them in.
es_ES: A continuación, se crea una rejilla para los botones de radio. Recuerde, no es necesario ordenar cosas en rejillas en el mismo orden que se crean.

note: (itstool) path: section/p
en: Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the first "Not cookie" button to be selected by default, though, so we use its set_active method.
es_ES: Normalmente, el botón de radio que está seleccionado de manera predeterminada es el del nombre del grupo. Sin embargo, se quiere que el primer botón «Not cookie» esté seleccionado de manera predeterminada, por lo que se usa su método «set_active».

note: (itstool) path: note/p
en: We could also set its active property to true when we create it.
es_ES: También se podría establecer su propiedad «active» a «true» cuando se crea.

note: (itstool) path: section/p
en: Now we arrange everything in our main Grid like usual ...
es_ES: Ahora se organiza todo en la rejilla principal como siempre…

note: (itstool) path: section/p
en: And then we change our _getACookie function to test to see if the cookie button is the one that's selected.
es_ES: Y después se cambia la función «_getACookie» para probar si el botón de la galleta es el que está seleccionado.

note: (itstool) path: section/title
en: Can you spell "cookie"?
es_ES: ¿Puede deletrear «cookie»?

note: (itstool) path: section/p
en: The last input widget we're going to cover is the Entry widget, which is used for single-line text entry.
es_ES: El último widget de entrada que se va a cubrir es el widget «Entry», que se usa para entrada de texto de una sola línea.

note: (itstool) path: note/p
en: If you need to be able to enter in a whole paragraph or more, like if you are building a text editor, you'll want to look at the much more customizable <link xref="textview.js">TextView</link> widget.
es_ES: Si necesita poder introducir un párrafo entero o más, como si estuviera construyendo un editor de texto, querrá echar un vistazo al widget <link xref="textview.js">TextView</link>, mucho más configurable.

note: (itstool) path: section/p
en: After we change the window's name, we create the Entry widget.
es_ES: Después de cambiar el nombre de la ventana, se crea el widget «Entry».

note: (itstool) path: section/p
en: Next, we arrange everything in the Grid ...
es_ES: A continuación, se organiza todo en la rejilla…

note: (itstool) path: section/p
en: And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize "cookie" or not, so we use JavaScript's built-in toLowerCase method to change the Entry's text to all lower case inside the if statement.
es_ES: Y ahora se modifica la declaración «if» de «_getACookie» nuevamente, usando el método «get_text» del «Entry» para obtener el texto que introdujo y verificar si deletreó «cookie» correctamente. No importa si utiliza mayúsculas, por lo que se usa el método «toLowerCase» integrado de JavaScript para cambiar todo el texto del «Entry» a minúsculas dentro de la declaración «if».

note: (itstool) path: note/p
en: An Entry widget doesn't have a label property, which is a set text string that the user can't change. (You can't normally change the label on a Button, for instance.) Instead, it has a text property, which changes to match what the user types in.
es_ES: Un widget «Entry» no tiene una propiedad «label», que es una cadena de texto establecida que el usuario no puede cambiar (normalmente no puede cambiar la etiqueta de un botón, por ejemplo). En su lugar, tiene una propiedad «text», que cambia de acuerdo a lo que el usuario introduce.

note: (itstool) path: section/p
en: Keep reading, if you'd like to see the complete code for each version of our cookie maker application.
es_ES: Siga leyendo, si quiere ver el código completo para cada versión de la aplicación creadora de galletas.

note: (itstool) path: note/p
en: The main JavaScript tutorials page has <link xref="beginner.js#buttons">more detailed code samples</link> for each input widget, including several not covered here.
es_ES: La página principal de tutoriales de JavaScript tiene <link xref="beginner.js#buttons">ejemplos de código más detallados</link> para cada widget de entrada, incluyendo varios no cubiertos aquí.

note: (itstool) path: section/title
en: Complete code samples
es_ES: Ejemplos de código completos

note: (itstool) path: section/title
en: Code sample with Button
es_ES: Ejemplo de código con botón

note: (itstool) path: section/title
en: Code sample with Switch
es_ES: Ejemplo de código con interruptor

note: (itstool) path: section/title
en: Code sample with RadioButton
es_ES: Ejemplo de código con botón de radio

note: (itstool) path: section/title
en: Code sample with Entry
es_ES: Ejemplo de código con «Entry»

note: (itstool) path: info/desc
en: Display information about an application
es_ES: Mostrar información acerca de una aplicación

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu
es_ES: Un ejemplo de AboutDialog usando Gtk.ApplicationWindow y Menu

note: (itstool) path: note/p
en: <em style="bold">You need to be running Gtk3.4 or later for this to work</em>
es_ES: <em style="bold">Necesita ejecutar GTK+ 3.4 o superior para que funcione</em>

note: (itstool) path: page/p (itstool) path: section/p
en: In this sample we used the following:
es_ES: En este ejemplo se usa lo siguiente:

note: (itstool) path: page/p
en: A modal dialog window which shows information about an application and its creators. This one is triggered by clicking "About" in the application's menu, which is normally a good place to put it.
es_ES: Una ventana de diálogo modal que muestra información sobre una aplicación Se muestra al pulsar el elemento de menú «Acerca de» en la aplicación, que es normalmente un buen sitio para ponerla.

note: (itstool) path: info/desc
en: A window that displays information about an application
es_ES: Una ventana que muestra información acerca de una aplicación

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu (the "about" is displayed if "About" in the menu is selected).
es_ES: Un ejemplo de AboutDialog usando Gtk.ApplicationWindow y Menu (el diálogo se muestra al pulsar el elemento de menú «Acerca de»).

note: (itstool) path: section/title
en: Code used to generate this example
es_ES: Código usado para generar este ejemplo

note: (itstool) path: section/title
en: Useful methods for an AboutDialog widget
es_ES: Métodos útiles para un widget «AboutDialog»

note: (itstool) path: section/p
en: In line 15 the signal <code>"activate"</code> is connected to the callback function <code>about_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 15 la señal <code>«activate»</code> se conecta a la función de retorno de llamada <code>about_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: section/title
en: API References
es_ES: Referencias de la API

note: (itstool) path: info/desc
en: Coming soon...
es_ES: Próximamente...

note: (itstool) path: credit/name
en: GNOME Documentation Project
es_ES: Proyecto de documentación de GNOME

note: (itstool) path: page/title
en: Audio player
es_ES: Reproductor de sonido

note: (itstool) path: info/desc
en: A beginner's guide to writing GNOME applications in JavaScript, including code samples and practice exercises.
es_ES: Una guía para principiantes sobre escribir aplicaciones de GNOME en JavaScript, incluyendo ejemplos de código y ejercicios de práctica.

note: (itstool) path: page/title
en: Tutorial for beginners and code samples
es_ES: Tutorial para principiantes y ejemplos de código

note: (itstool) path: synopsis/p
en: JavaScript is one of the most popular programming languages on the web. It's not just for the web, though. If you have even a basic understanding of JavaScript, you can write full-fledged applications for GNOME. <link href="https://wiki.gnome.org/Apps/Documents">GNOME Documents</link> is written in JavaScript, and so is <link href="https://live.gnome.org/GnomeShell/Tour">GNOME Shell</link>, the most basic part of GNOME.
es_ES: JavaScript es uno de los lenguajes de programación más populares en la web. Sin embargo, no es sólo para la web. Si tiene aunque sea un conocimiento básico de JavaScript, puede escribir aplicaciones completas para GNOME. Los <link href="https://wiki.gnome.org/Apps/Documents">documentos de GNOME</link> está escritos en JavaScript, y también <link href="https://live.gnome.org/GnomeShell/Tour">GNOME Shell</link>, la parte más básica de GNOME.

note: (itstool) path: note/p
en: GNOME Shell is what you see when you click on "Activities" in the top-left corner of your screen. It also controls the clock and the rest of the top panel. Besides showing how you to write GNOME applications, these tutorials will also show you how to use JavaScript to write GNOME Shell extensions, which give it new features or change the way it does things.
es_ES: GNOME Shell es lo que ve cuando pulsa en «Actividades», en la esquina superior izquierda de su pantalla. También controla el reloj y el resto del panel superior. Además de mostrarle cómo escribir aplicaciones de GNOME, estos tutoriales le mostrarán cómo usar JavaScript para escribir extensiones de GNOME Shell, que le añaden características o cambian su comportamiento.

note: (itstool) path: section/title
en: Getting Started
es_ES: Inicio

note: (itstool) path: section/p
en: These tutorials are designed for people who already know how to write in JavaScript, and who have GNOME installed on their computers already, but who are new to developing GNOME applications. If you don't already know JavaScript, or if you need help getting GNOME set up, take a look at these resources first:
es_ES: Estos tutoriales están diseñados para gente que ya sabe cómo programar en JavaScript, y que ya tienen GNOME instalado en sus equipos, pero que están comenzando a desarrollar aplicaciones de GNOME. Si todavía no sabe JavaScript, o si necesita ayuda instalando GNOME, eche un vistazo a estos recursos primero:

note: (itstool) path: item/p
en: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> is a free, Creative Commons-licensed book, which explains the basics of JavaScript programming. Since you won't be writing JavaScript for the web, you only need to read up to chapter 10 or so.
es_ES: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> es un libro libre, con licencia Creative Commons, que explica los conceptos básicos de programación en JavaScript. Dado que no va a escribir JavaScript para la web, sólo necesitará leer hasta el capítulo 10.

note: (itstool) path: item/p
en: <link href="http://www.gnome.org/getting-gnome/">Download GNOME</link> as part of a distribution, like Fedora, openSUSE, or Ubuntu. Each distribution has its own instructions for how to get GNOME.
es_ES: <link href="http://www.gnome.org/getting-gnome/">Descargue GNOME</link> como parte de una distribución, como Fedora, openSUSE, o Ubuntu. Cada distribución tiene sus propias instrucciones para obtener GNOME.

note: (itstool) path: item/p
en: <link xref="set-up-gedit.js">Set up gedit</link> for writing applications. GNOME's text editor, gedit, is sometimes just called "text editor".
es_ES: <link xref="set-up-gedit.js">Configurar gedit</link> para escribir aplicaciones. El editor de texto de GNOME, gedit, a veces solo se llama «editor de texto».

note: (itstool) path: section/title
en: Tutorials
es_ES: Tutoriales

note: (itstool) path: section/title
en: Code samples
es_ES: Ejemplos de código

note: (itstool) path: section/p
en: These samples show how to use widgets in your GNOME applications. Each one demonstrates a complete application which showcases the featured widget. At the end of each sample, you will find links to more detailed reference material.
es_ES: Estos ejemplos muestran cómo usar widgets en sus aplicaciones de GNOME. Cada uno demuestra una aplicación completa que exhibe el widget presentado. Al final de cada ejemplo, encontrará enlaces a material de referencia más detallado.

note: (itstool) path: section/p
en: To run the code samples:
es_ES: Para ejecutar los ejemplos de código:

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.js
es_ES: Copie y pegue el código en <var>nombre_archivo</var>.js

note: (itstool) path: item/p
en: In the terminal, type:
es_ES: Escriba en la terminal:

note: (itstool) path: item/screen
en: gjs <var>filename</var>.js
es_ES: gjs <var>nombre_archivo</var>.js

note: (itstool) path: section/title
en: Windows
es_ES: Ventanas

note: (itstool) path: section/title
en: Display widgets
es_ES: Widgets de visualización

note: (itstool) path: section/title
en: Buttons and toggles
es_ES: Botones y casillas

note: (itstool) path: section/title
en: Numeric and text data entry
es_ES: Entrada de daos numérica y de texto

note: (itstool) path: section/title
en: Multiline text editor
es_ES: Editor de texto multilínea

note: (itstool) path: section/title
en: Menu, combo box and toolbar widgets
es_ES: Widgets de menú, caja combinada y barra de herramientas

note: (itstool) path: section/title
en: TreeView widget
es_ES: Widget TreeView

note: (itstool) path: section/title (itstool) path: steps/title
en: Selectors
es_ES: Selectores

note: (itstool) path: section/title
en: File selectors
es_ES: Selectores de archivos

note: (itstool) path: section/title
en: Font selectors
es_ES: Selectores de tipografías

note: (itstool) path: section/title
en: Color Selectors
es_ES: Selectores de color

note: (itstool) path: section/title
en: Layout containers
es_ES: Contenedores de la distribución

note: (itstool) path: section/title
en: Ornaments
es_ES: Adornos

note: (itstool) path: section/title
en: Scrolling
es_ES: Desplazamiento

note: (itstool) path: section/title
en: Miscellaneous
es_ES: Varios

note: (itstool) path: section/title
en: Exercises
es_ES: Ejercicios

[ctx: text]
note: (itstool) path: info/title
en: GTK+ widgets sample code (Python)
es_ES: Código de ejemplo de widget de GTK+ (Python)

note: (itstool) path: info/desc
en: A guide to GUI programming using GTK+, including code samples and practice exercises.
es_ES: Una guía de programación de IU en GTK+, incluyendo ejemplos de código y ejercicios de práctica.

note: (itstool) path: page/title
en: GTK+ widgets sample code
es_ES: Código de ejemplo de widgets de GTK+

note: (itstool) path: synopsis/p
en: If you are a beginner and you would like a tutorial to guide you step by step in an exploration of what you can do with GTK+ 3, you should go to the <link xref="tutorial.py"/> page. If you are looking for a specific widget, you can find it in the sections below.
es_ES: Si es un principiante y quiere un tutorial que le guíe paso a paso en una explicación sobre qué puede hacer con GTK+ 3, debe ir a la página <link xref="tutorial.py"/>. Si está buscando un widget específico, puede encontrarlo en las secciones a continuación.

note: (itstool) path: section/title
en: Theory pages
es_ES: Páginas de teoría

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Vala)
es_ES: Tutorial para principiantes (Vala)

note: (itstool) path: info/desc
en: A beginner's guide to GUI programming using GTK+, including code samples and practice exercises.
es_ES: Una guía de programación de interfaces usuario en GTK+ para principiantes, incluyendo ejemplos de código y ejercicios prácticos.

note: (itstool) path: synopsis/p
en: Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting to follow these tutorials, you are expected to be familiar with the following concepts:
es_ES: Aunque estos tutoriales están diseñados para principiantes, no se pueden cubrir todos los conceptos básicos. Antes de intentar seguir estos tutoriales, debe estar familiarizado con los siguientes conceptos:

note: (itstool) path: item/p
en: Object oriented programming
es_ES: Programación orientada a objetos

note: (itstool) path: item/p
en: The Vala programming language:
es_ES: El lenguaje de programación Vala:

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Tutorial">The Vala Tutorial</link>
es_ES: <link href="https://live.gnome.org/Vala/Tutorial">El tutorial de Vala</link>

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Sample Vala code</link>
es_ES: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Código de ejemplo de Vala</link>

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+.
es_ES: Siguiendo estos tutoriales, aprenderá los conceptos básicos de la programación de IGU usando GTK+.

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.vala
es_ES: Copie y pegue el código en <var>nombre_archivo</var>.vala

note: (itstool) path: item/p
en: In the terminal type:
es_ES: Escriba en la terminal:

note: (itstool) path: item/screen
en: valac --pkg gtk+-3.0 <var>filename</var>.vala
es_ES: valac --pkg gtk+-3.0 <var>nombre_archivo</var>.vala

note: (itstool) path: item/screen
en: ./<var>filename</var>
es_ES: ./<var>nombre_archivo</var>

[ctx: text]
note: (itstool) path: info/title
en: Button (C)
es_ES: Botón (C)

note: (itstool) path: info/desc
en: A button widget which emits a signal when clicked
es_ES: Un widget de botón que emite una señal cuando se pulsa sobre él

note: (itstool) path: page/p
en: A button widget connected to a callback function that reverses its label when clicked.
es_ES: Un widget de botón conectado a una función de retorno de llamada que invierte su etiqueta cuando se pulsa.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-Unicode-Manipulation.html#g-utf8-strreverse">Unicode Manipulation</link>
es_ES: <link href="http://developer.gnome.org/glib/stable/glib-Unicode-Manipulation.html#g-utf8-strreverse">Manejo de Unicode</link>

[ctx: text]
note: (itstool) path: info/title
en: Button (JavaScript)
es_ES: Botón (JavaScript)

note: (itstool) path: info/desc
en: A button which can be connected to other widgets
es_ES: Un botón que puede estar conectado a otros widgets.

note: (itstool) path: page/p
en: A button widget that changes its label when you click it.
es_ES: Un widget que cambia su etiqueta cuando se pulsa sobre él.

[ctx: text]
note: (itstool) path: info/title
en: Button (Python)
es_ES: Botón (Python)

note: (itstool) path: page/p
en: A button widget connected to a simple callback function.
es_ES: Un widget de botón conectado a una función de retorno de llamada.

note: (itstool) path: section/title
en: Useful methods for a Button widget
es_ES: Métodos útiles para un widget «Button»

note: (itstool) path: section/p
en: In line 16 the <code>"clicked"</code> signal from the button is connected to the callback function <code>do_clicked()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 16, la señal <code>«clicked»</code> del botón se conecta a la función de retorno de llamada <code>do_clicked()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: item/p
en: <code>set_relief(Gtk.ReliefStyle.NONE)</code> sets to none the relief style of the edges of the Gtk.Button - as opposed to <code>Gtk.ReliefStyle.NORMAL</code>.
es_ES: <code>set_relief(Gtk.ReliefStyle.NONE)</code> establece el estilo de relieve de los bordes del «Gtk.Button» a «ninguno», opuesto a <code>Gtk.ReliefStyle.NORMAL</code>.

note: (itstool) path: item/p
en: If the label of the button is a <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">stock icon</link>, <code>set_use_stock(True)</code> sets the label as the name of the corresponding stock icon.
es_ES: Si la etiqueta de un botón es un <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">icono del almacén</link>, <code>set_use_stock(True)</code> establece la etiqueta al nombre del icono del almacén correspondiente.

note: (itstool) path: item/p
en: To set an image (e.g. a stock image) for the button <code>button</code>:
es_ES: Para establecer una imagen (por ejemplo, una imagen del almacén) para el botón <code>button</code>:

note: (itstool) path: item/p
en: You should not set a label for the button after this, otherwise it will show the label and not the image.
es_ES: No debe establecer una etiqueta para el botón después de esto, ya que si lo hace mostrará la etiqueta y no la imagen.

note: (itstool) path: item/p
en: If we use <code>set_focus_on_click(False)</code> the button will not grab focus when it is clicked by the mouse. This could be useful in places like toolbars, so that the keyboard focus is not removed from the main area of the application.
es_ES: Si usa <code>set_focus_on_click(False)</code>, el botón no atrapará el foco cuando el ratón lo pulse. Esto podría ser útil en lugares como barras de herramientas, para que el foco del teclado no se quite del área principal de la aplicación.

[ctx: text]
note: (itstool) path: info/title
en: Button (Vala)
es_ES: Botón (Vala)

note: (itstool) path: page/title
en: Button widget
es_ES: Widget de botón

note: (itstool) path: page/p
en: In this sample we used the following: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>
es_ES: En este ejemplo se usa el siguiente widget: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>

note: (itstool) path: info/desc
en: A container for arranging buttons
es_ES: Un contenedor para organizar botones

note: (itstool) path: page/title (itstool) path: steps/title
en: ButtonBox
es_ES: Botonera

note: (itstool) path: page/p
en: A calculator - the buttons are enclosed in horizontal ButtonBoxes.
es_ES: Una calculadora: los botones se agrupan en botoneras horizontales.

[ctx: text]
note: (itstool) path: info/title
en: ButtonBox (Python)
es_ES: Botonera (Python)

note: (itstool) path: section/title
en: Useful methods for a ButtonBox widget
es_ES: Métodos útiles para un widget ButtonBox

note: (itstool) path: item/p
en: The layout of the ButtonBox are set with <code>set_layout(layout)</code>, where <code>layout</code> can be <code>Gtk.ButtonBoxStyle.SPREAD</code> (buttons are evenly spread across the box), <code>Gtk.ButtonBoxStyle.EDGE</code> (buttons are placed at the edges of the box), <code>Gtk.ButtonBoxStyle.START</code> (buttons are grouped towards the start of the box), <code>Gtk.ButtonBoxStyle.END</code> (buttons are grouped towards the end of the box), <code>Gtk.ButtonBoxStyle.CENTER</code> (buttons are centered in the box).
es_ES: La distribución de la botonera se configura con <code>set_layout(distribución)</code>, donde <code>distribución</code> puede ser <code>Gtk.ButtonBoxStyle.SPREAD</code> (los botones se separan equidistantes a lo largo de la botonera), <code>Gtk.ButtonBoxStyle.EDGE</code> (los botones se ponen en los bordes), <code>Gtk.ButtonBoxStyle.START</code> (los botones se agrupan hacia el comienzo de la botonera), <code>Gtk.ButtonBoxStyle.END</code> (los botones se agrupan hacia el final), <code>Gtk.ButtonBoxStyle.CENTER</code> (los botones se agrupan hacia el centro).

note: (itstool) path: item/p
en: <code>set_child_secondary(button, is_secondary)</code> sets whether <code>button</code> should appear in a secondary group of children. A typical use of a secondary child is the help button in a dialog. This group appears after the other children if the style is <code>START</code>, <code>SPREAD</code> or <code>EDGE</code>, and before the other children if the style is <code>END</code>. If the style is <code>START</code> or <code>END</code>, then the secondary children are aligned at the other end of the button box from the main children. For the other styles, they appear immediately next to the main children.
es_ES: <code>set_child_secondary(botón, es_secundario)</code> configura si <code>botón</code> debe aparecer en un grupo secundario de hijos. Un uso típico de un hijo secundario es el botón de ayuda en un diálogo. Este grupo aparece después de los otros hijos si el estilo es <code>START</code>, <code>SPREAD</code> o <code>EDGE</code>, y antes de los otros hijos si el estilo es <code>END</code>. Si el estilo es <code>START</code> o <code>END</code>, entonces los hijos secundarios se alinean al otro lado de los hijos principales en la botonera . Para los otros estilos, aparecen inmediatamente a continuación de los hijos principales.

note: (itstool) path: item/p
en: <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> sets whether the child is exempted from homogeneous sizing. Default value is <code>False</code>.
es_ES: <code>set_child_non_homogeneous(botón, es_heterogéneo)</code> establece si el hijo está exento de dimensionado homogéneo. El valor predeterminado es <code>False</code>.

note: (itstool) path: item/p
en: <code>set_spacing(spacing)</code> sets the spacing, in pixels, between the buttons of the box.
es_ES: <code>set_spacing(espaciado)</code> establece el espaciado, en píxeles, entre los botones de la botonera.

note: (itstool) path: info/desc
en: Tutorials and code samples in C.
es_ES: Tutoriales y ejemplos de código en C.

note: (itstool) path: page/title
en: Platform Demos in C
es_ES: Demostraciones de la plataforma en C

note: (itstool) path: section/title
en: Prerequisites
es_ES: Prerrequisitos

note: (itstool) path: section/p
en: To compile these platform demos you will need a C compiler, for example <link href="https://gcc.gnu.org/">gcc</link>. You will also need GTK+ 3 including headers and pkg-config files. Linux distributions usually abstract GTK+ 3 headers and pkg-config files into separate packages called <em>gtk3-devel</em>, <em>gtk3-dev</em> or similar.
es_ES: Para estas demostraciones de la plataforma necesitará un compilador de C, por ejemplo <link href="https://gcc.gnu.org/">gcc</link>. También necesitará las cabeceras de GTK+3 y los archivos pkg-config. Normalmente, las distribuciones de Linux proporcionan las cabeceras de GTK+ 3y los archivos pkg-config en paquetes separados llamados <em>gtk3-devel</em>, <em>gtk3-dev</em> o similar.

note: (itstool) path: section/title
en: Guidelines for new developers
es_ES: Guías para nuevos desarrolladores

note: (itstool) path: section/p
en: Beyond the prerequisites mentioned above, several tools has been developed to assist you further in developing your GNOME application. GNOME also recommends a specific coding style and conventions which this section will elaborate further upon.
es_ES: Más allá de los requisitos mencionados anteriormente, se han desarrollado varias herramientas para ayudarle a desarrollar su aplicación para GNOME. Se recomienda un estilo de codificación determinado y unos convenios que se detallarán más adelante en esta sección.

note: (itstool) path: section/title
en: Recommended tools
es_ES: Herramientas recomendadas

note: (itstool) path: item/p
en: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: An API documentation browser for GNOME.
es_ES: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: un explorador de la documentación de la API para GNOME.

note: (itstool) path: item/p
en: A GNOME IDE (Integrated Development Environment). An IDE can assist you in writing and debugging C code, for example <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> or <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.
es_ES: Un EID para GNOME (Entorno integrado de desarrollo). Un EID puede ayudarle a escribir y depurar código en C, por ejemplo <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> o <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.

note: (itstool) path: item/p
en: <link href="http://glade.gnome.org/">Glade</link>: A user interface designer for GTK+ Applications.
es_ES: <link href="http://glade.gnome.org/">Glade</link>: un diseñador de interfaces para aplicaciones en GTK+.

note: (itstool) path: item/p
en: An IRC Client, for example <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> or <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. If you run into problems while following the beginner tutorials, join #gnome on <em>irc.gnome.org</em>.
es_ES: Un cliente de IRC, por ejemplo <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> o <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. Si tiene problemas al seguir los tutoriales para principiantes, únase a #gnome en <em>irc.gnome.org</em>.

note: (itstool) path: section/title
en: Coding Style
es_ES: Estilo del código

note: (itstool) path: section/p
en: Most applications in the GNOME project is written in the <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU style</link> of indentation. The tutorials and code examples presented are following this convention and you are recommended to do so too.
es_ES: La mayoría de las aplicaciones del proyecto GNOME están escritas siguiendo el estilo de sangrado de <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU</link>. Los tutoriales y los códigos de ejemplo mostrados siguen este convenio y se recomienda que haga lo mismo.

note: (itstool) path: section/title
en: Executing Code
es_ES: Ejecutar el código

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.c
es_ES: Copie y pegue el código en <var>nombre_archivo</var>.c

note: (itstool) path: item/screen
en: gcc <var>filename</var>.c `pkg-config --cflags --libs gtk+-3.0` -o <var>filename</var>
es_ES: gcc <var>nombre_archivo</var>.c `pkg-config --cflags --libs gtk+-3.0` -o <var>nombre_archivo</var>

note: (itstool) path: note/p
en: For more information about compiling GTK+ programs see <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compiling GTK+ Applications on UNIX</link>.
es_ES: Para obtener más información sobre cómo compilar programas en GTK+, consulte <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compilar aplicaciones GTK+ en UNIX</link>.

note: (itstool) path: section/title
en: Widget Code Examples
es_ES: Ejemplos de código de widget

note: (itstool) path: info/desc
en: Create widgets with a discrete ToggleButton
es_ES: Crear widgets con un botón ToggleButton discreto

note: (itstool) path: page/p
en: This CheckButton toggles the title.
es_ES: Este CheckButton cambia el título.

note: (itstool) path: info/desc
en: A box which can be checked or unchecked
es_ES: Una casilla que puede estar marcada o desmarcada

note: (itstool) path: page/p
en: This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.
es_ES: Esta aplicación tiene una casilla de verificación. Si la casilla está activada, la barra de título de la ventana muestra algo.

note: (itstool) path: page/p
en: A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.
es_ES: 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».

note: (itstool) path: section/title
en: Libraries to import
es_ES: Bibliotecas que importar

note: (itstool) path: section/p
en: These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
es_ES: 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.

note: (itstool) path: section/title
en: Creating the application window
es_ES: Crear la ventana de la aplicación

note: (itstool) path: section/p
en: All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: 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.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into.
es_ES: 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.

note: (itstool) path: section/title
en: Creating the checkbutton
es_ES: Crear la casilla

note: (itstool) path: section/p
en: This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.
es_ES: 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».

note: (itstool) path: section/p
en: This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).
es_ES: 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).

note: (itstool) path: section/title
en: Function which handles the checkbutton's toggling
es_ES: Función que maneja la conmutación de la casilla de verificación

note: (itstool) path: section/p
en: If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.
es_ES: 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á.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «CheckButtonExample» terminada, y se ejecuta la aplicación.

note: (itstool) path: section/title
en: In-depth documentation
es_ES: Documentación en profundidad

note: (itstool) path: info/desc
en: A toggle button in a window
es_ES: Un botón conmutador en una ventana

note: (itstool) path: section/title
en: Useful methods for a CheckButton widget
es_ES: Métodos útiles para un widget «CheckButton»

note: (itstool) path: section/p
en: In line 17 the <code>"toggled"</code> signal is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 17 la señal <code>«toggled»</code> se conecta a una función de retorno de llamada <code>toggled_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: info/desc
en: Create widgets with a discrete toggle button
es_ES: Crear widgets con un botón conmutador discreto

note: (itstool) path: info/desc
en: A button to launch a color selection dialog
es_ES: Un botón para mostrar el diálogo de selección de color

note: (itstool) path: page/p
en: This ColorButton launches a color selection dialog and prints in the terminal the RGB values of the color selected.
es_ES: Este ColorButton muestra un diálogo de selección de color e imprime por la terminal los valores RGB del color seleccionado.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk3/stable/gdk3-RGBA-Colors.html">RGBA Colors</link>
es_ES: <link href="http://developer.gnome.org/gdk3/stable/gdk3-RGBA-Colors.html">Colores RGBA</link>

note: (itstool) path: section/title
en: Useful methods for a ColorButton widget
es_ES: Métodos útiles para un widget «ColorButton»

note: (itstool) path: section/p
en: <code>set_color(color)</code>, where the <code>color</code> is defined as in the example, sets the color of the ColorButton, which by default is black. <code>get_color()</code> returns the color.
es_ES: <code>set_color(color)</code>, donde el <code>color</code> se define como en el ejemplo, establece el color del «ColorButton», que es negro de manera predeterminada. <code>get_color()</code> devuelve el color.

note: (itstool) path: section/p
en: In line 23 the <code>"color-set"</code> signal is connected to the callback function <code>on_color_chosen()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 23 la señal <code>«color-set»</code> se conecta a una función de retorno de llamada <code>on_color_chosen()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: page/p
en: RGB values of the selected color are shown in the label.
es_ES: Los valores RGB del color seleccionado se muestran en la etiqueta.

note: (itstool) path: info/desc
en: A text-only drop-down menu
es_ES: Un menú desplegable de solo texto

note: (itstool) path: page/p
en: A ComboBox is a drop-down menu. The difference between a <link xref="combobox.js">ComboBox</link> and a ComboBoxText is that a ComboBoxText just has basic text options, while a full ComboBox uses a ListStore or TreeStore (which are basically spreadsheets) to show things like branching options, or pictures to go alongside each choice.
es_ES: 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.

note: (itstool) path: note/p
en: Unless you need the added features of a full ComboBox, or are comfortable working with ListStores and TreeStores, you may find it a lot simpler to use a ComboBoxText whenever possible.
es_ES: 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: (itstool) path: section/p
en: All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: 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.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our widgets into.
es_ES: 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.

note: (itstool) path: section/title
en: Creating the ComboBoxText
es_ES: Crear el ComboBoxText

note: (itstool) path: section/p
en: After we create the ComboBoxText, we use its <file>append_text</file> method to add text strings to it. Like the entries in an array, they each have a number for an ID, starting with 0. To make things simpler, you can actually create an array for your ComboBoxText entries, then use a for loop to append them in order, like we did here.
es_ES: 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í.

note: (itstool) path: section/p
en: After we populate the ComboBoxText, we set its first entry to be active, so that we'll see the "Select distribution" line before we click on it. Then we connect its <file>changed</file> signal to the _onComboChanged function, so that it's called whenever you make a new selection from the drop-down menu.
es_ES: 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.

note: (itstool) path: note/p
en: If you'd like to add an entry to a ComboBoxText, you can use the <file>insert_text</file> method. And if you'd rather use a text string as an ID for each entry than rely on numbers alone, you can use the <file>append</file> and <file>insert</file> methods. See the links at the bottom of this tutorial for the details of how to use them.
es_ES: 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: (itstool) path: section/p
en: Finally, we add the ComboBoxText to the window, and tell the window to show itself and the widget inside it.
es_ES: Finalmente, se añade el «ComboBoxText» a la ventana, y se le dice que se muestre con su widget.

note: (itstool) path: section/title
en: Function which handles your selection
es_ES: Función que maneja su selección

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a message based on which distro you select. First, we create the array of responses to use. Since the first string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array blank.
es_ES: 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.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select distribution" message. After that, we set its text to be the entry in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
es_ES: 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.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id,</file> which returns the text ID assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string you selected.
es_ES: 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: (itstool) path: section/p
en: After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.
es_ES: Después de crear el «MessageDialog», se conecta su señal «response» a la función «onDialogResponse», y se le dice que se muestre.

note: (itstool) path: section/p
en: Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.
es_ES: 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.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxTextExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase ComboBoxTextExample terminada, y se ejecuta la aplicación.

note: (itstool) path: info/desc
en: A widget used to choose from a list of items
es_ES: Un widget usado para elegir de una lista de elementos

note: (itstool) path: page/p
en: This ComboBox prints to the terminal when you change your selection.
es_ES: Este ComboBox imprime en la terminal cuando cambia su selección.

note: (itstool) path: info/desc
en: A customizable drop-down menu
es_ES: Un menú desplegable personalizable.

note: (itstool) path: page/p
en: A ComboBox is an extremely customizable drop-down menu. It holds the equivalent of a <link xref="treeview_simple_liststore.js">TreeView</link> widget that appears when you click on it, complete with a ListStore (basically a spreadsheet) that says what's in the rows and columns. In this example, our ListStore has the name of each option in one column, and the name of a stock icon in the other, which the ComboBox then turns into an icon for each option.
es_ES: Un «ComboBox» es un menú desplegable extremadamente personalizable. Contiene el equivalente a un widget <link xref="treeview_simple_liststore.js">TreeView</link> que aparece cuando lo pulsa, completo con un «ListStore» (básicamente una hoja de cálculo) que dice qué está en las filas y columnas. En este ejemplo, el «ListStore» tiene el nombre de cada opción en una columna, y el nombre de un elemento del almacén en la otra, que el «ComboBox» convierte en un icono para cada opción.

note: (itstool) path: page/p
en: You select a whole horizontal row at a time, so the icons aren't treated as separate options. They and the text beside them make up each option you can click on.
es_ES: Puede seleccionar una fila horizontal a la vez, por lo que los iconos no se tratan como opciones separadas. Ellos y su texto forman una opción que puede pulsar.

note: (itstool) path: note/p
en: Working with a ListStore can be time-consuming. If you just want a simple text-only drop-down menu, take a look at the <link xref="comboboxtext.js">ComboBoxText</link>. It doesn't take as much time to set up, and is easier to work with.
es_ES: Trabajar con un «ListStore» puede llevar tiempo. Si sólo quiere un menú desplegable de solo texto simple, échele un vistazo al <link xref="comboboxtext.js">ComboBoxText</link>. No toma tanto tiempo configurarlo, y es más fácil trabajar con él.

note: (itstool) path: section/p
en: All the code for this sample goes in the ComboBoxExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase «ComboBoxExample». 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.

note: (itstool) path: section/title
en: Creating the ListStore
es_ES: Crear el ListStore

note: (itstool) path: section/p
en: This ListStore works like the one used in the <link xref="treeview_simple_liststore.js">TreeView</link> example. We're giving it two columns, both strings, because one of them will contain the names of <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock Gtk icons</link>.
es_ES: Este «ListStore» funciona como el que se usó en el ejemplo del <link xref="treeview_simple_liststore.js">TreeView</link>. Se le dan dos columnas, ambas cadenas, porque una contendrá los nombres de los <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">iconos del almacén de GTK+</link>.

note: (itstool) path: section/p
en: If we'd wanted to use our own icons that weren't already built in to GNOME, we'd have needed to use the <file>gtk.gdk.Pixbuf</file> type instead. Here are a few other types you can use:
es_ES: Si quisiera usar sus propios iconos que no están incluidos en GNOME, tendría que usar el tipo <file>gtk.gdk.Pixbuf</file> en su lugar. Aquí hay algunos tipos más que puede usar:

note: (itstool) path: item/p
en: <file>GObject.TYPE_BOOLEAN</file> -- True or false
es_ES: <file>GObject.TYPE_BOOLEAN</file>: verdadero o falso

note: (itstool) path: item/p
en: <file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal point)
es_ES: <file>GObject.TYPE_FLOAT</file>: un número de coma flotante (uno con coma decimal)

note: (itstool) path: item/p
en: <file>GObject.TYPE_STRING</file> -- A string of letters and numbers
es_ES: <file>GObject.TYPE_STRING</file>: una cadena de letras y números

note: (itstool) path: note/p
en: You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your application's code, like we did in this example, if you want to be able to use GObject types.
es_ES: Necesita poner la línea <file>const GObject = imports.gi.GObject;</file> al principio del código de su aplicación, como se hizo en este ejemplo, si quiere poder usar tipos de GObject.

note: (itstool) path: section/p
en: Here we create an array of the text options and their corresponding icons, then put them into the ListStore in much the same way we would for a <link xref="treeview_simple_liststore.js">TreeView's</link> ListStore. We only want to put an icon in if there's actually an icon in the options array, so we make sure to check for that first.
es_ES: Aquí se crea una matriz de las opciones de texto y sus iconos correspondientes, después se ponen en el «ListStore» de forma parecida a cOmo se haría para un «ListStore» de un <link xref="treeview_simple_liststore.js">TreeView</link>. Sólo se quiere poner un icono si hay uno en la matriz de opciones, por lo que primero hay que asegurarse de verificar esto.

note: (itstool) path: note/p
en: "Select" isn't really an option so much as an invitation to click on our ComboBox, so it doesn't need an icon.
es_ES: «Select» no es realmente una opción, sino una invitación a pulsar en el «ComboBox», por lo que no necesita un icono.

note: (itstool) path: section/title
en: Creating the ComboBox
es_ES: Crear el ComboBox

note: (itstool) path: section/p
en: Each ComboBox has an underlying "model" it takes all its options from. You can use a TreeStore if you want to have a ComboBox with branching options. In this case, we're just using the ListStore we already created.
es_ES: Cada «ComboBox» tiene un «modelo» subyacente del que toma todas sus opciones. Puede usar un «TreeStore» si quiere tener un «ComboBox» con opciones de bifurcación. En este caso, solo se está usando el «ListStore» que ya se creó.

note: (itstool) path: section/p
en: This part, again, works much like creating CellRenderers and packing them into the columns of a <link xref="treeview_simple_liststore.js">TreeView</link>. The biggest difference is that we don't need to create the ComboBox's columns as separate objects. We just pack the CellRenderers into it in the order we want them to show up, then tell them to pull information from the ListStore (and what type of information we want them to expect).
es_ES: Esta parte, nuevamente, funciona de forma similar a crear «CellRenderer» y empaquetarlos en columnas de un <link xref="treeview_simple_liststore.js">TreeView</link>. La principal diferencia es que no necesita crear las columnas del «ComboBox» como objetos separados. Sólo se empaquetan los «CellRenderer» en el orden en el que quiere que se muestren, y se les dice que obtengan información del «ListStore» (y qué tipo de información tienen que esperar).

note: (itstool) path: section/p
en: We use a CellRendererText to show the text, and a CellRendererPixbuf to show the icons. We can store the names of the icons' stock types as strings, but when we display them we need a CellRenderer that's designed for pictures.
es_ES: Se usa un «CellRendererText» para mostrar el texto, y un «CellRendererPixbuf» para mostrar los iconos. Se pueden almacenar los nombres de los tipos del almacén de iconos como cadenas, pero cuando se muestran se necesita un «CellRenderer» diseñado para imágenes.

note: (itstool) path: note/p
en: Just like with a TreeView, the "model" (in this case a ListStore) and the "view" (in this case our ComboBox) are separate. Because of that, we can do things like have the columns in one order in the ListStore, and then pack the CellRenderers that correspond to those columns into the ComboBox in a different order. We can even create a TreeView or other widget that shows the information in the ListStore in a different way, without it affecting our ComboBox.
es_ES: Al igual que con un «TreeView», el «modelo» (en este caso un «ListStore») y la «vista» (en este caso el «ComboBox») están separados. Es por esto que se pueden hacer cosas como tener las columnas en un orden en el «ListStore», y después empaquetar los «CellRenderer» que les corresponden en el «ComboBox» en un orden diferente. Incluso se puede crear un «TreeView» u otro widget que muestre la información en el «ListStore» de una manera diferente, sin afectar el «ComboBox».

note: (itstool) path: section/p
en: We want the "Select" text to be the part people see at first, that gets them to click on the ComboBox. So we set it to be the active entry. We also connect the ComboBox's <file>changed</file> signal to a callback function, so that any time someone clicks on a new option something happens. In this case, we're just going to show a popup with a little haiku.
es_ES: Se quiere que el texto «Select» sea la parte que la gente ve al principio, que les haga pulsar el «ComboBox»; por lo que se establece como entrada activa. También se conecta la señal <file>changed</file> del «ComboBox» a una función de retorno de llamada, para que siempre que alguien pulse una opción nueva suceda algo. En este caso, sólo se va a mostrar una ventana emergente con un pequeño «haiku».

note: (itstool) path: section/p
en: Finally, we add the ComboBox to the window, and tell the window to show itself and everything inside it.
es_ES: Finalmente, se añade el «ComboBox» a la ventana, y se le dice que se muestre con todo lo que contiene.

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first string in our ComboBox is just the "Select" message, we make the first string in our array blank.
es_ES: Se va a crear un <link xref="messagedialog.js">MessageDialog</link> emergente, que muestra un «haiku» tonto de acuerdo a qué distribución seleccione. Primero, se crea la matriz de «haiku». Dado que la primera cadena en el «ComboBox» es sólo el mensaje «Select», la primera cadena en la matriz se hace vacía.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select" message. After that, we set its text to be the haiku in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
es_ES: Antes de mostrar un «MessageDialog», primero se verifica que no se eligió el mensaje «Select». Después de eso, se establece su texto al «haiku» 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.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id</file>, which returns the text ID assigned by <file>append</file>, and <file>get_active_text</file>, which returns the full text of the string you selected.
es_ES: 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: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «ComboBoxExample» terminada, y se ejecuta la aplicación.

note: (itstool) path: page/title
en: ComboBox (one column)
es_ES: ComboBox (una columna)

note: (itstool) path: page/p
en: This ComboBox prints to the terminal your selection when you change it.
es_ES: Esta ComboBox imprime su selección en la terminal cuando cambia la cambia.

note: (itstool) path: section/title
en: Useful methods for a ComboBox widget
es_ES: Métodos útiles para un widget «ComboBox»

note: (itstool) path: section/p
en: The ComboBox widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information and for a list of useful methods for ComboBox see <link xref="model-view-controller.py"/>.
es_ES: El widget «ComboBox» está desarrollado sobre el diseño <em>Modelo/Vista/Controlador</em>: el <em>Modelo</em> almacena los datos, la <em>Vista</em> obtiene las notificaciones de cambio y muestra el contenido del modelo; el <em>Controlador</em>, finalmente, cambia el estado del modelo y le notifica a la vista los cambios. Para más información, y una lista de métodos útiles de «ComboBox» y «TreeModel», consulte la sección <link xref="model-view-controller.py"/>.

note: (itstool) path: section/p
en: In line 35 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 35 la señal <code>«changed»</code> se conecta a la función de retorno de llamada <code>on_changed()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: item/p
en: <link href="https://gitlab.gnome.org/GNOME/pygobject/blob/master/gi/overrides/Gtk.py">pygobject - Python bindings for GObject Introspection</link>
es_ES: <link href="https://gitlab.gnome.org/GNOME/pygobject/blob/master/gi/overrides/Gtk.py">pygobject: vinculaciones de Python para introspección de GObject</link>

note: (itstool) path: page/title
en: ComboBox (two columns)
es_ES: ComboBox (dos columnas)

note: (itstool) path: section/p
en: In line 45 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 45 la señal <code>«changed»</code> se conecta a la función de retorno de llamada <code>on_changed()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>
es_ES: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Elementos del almacén</link>

note: (itstool) path: page/title
en: Code samples and platform demos in C++
es_ES: Ejemplos de código y demostraciones de la plataforma en C++

note: (itstool) path: section/title
en: Examples of applications
es_ES: Ejemplos de aplicaciones

[ctx: text]
note: (itstool) path: info/title
en: Dialog (C)
es_ES: Diálogo (C)

note: (itstool) path: info/desc
en: A popup window
es_ES: Una ventana emergente

note: (itstool) path: page/title
en: Dialog
es_ES: Diálogo

note: (itstool) path: page/p
en: A dialog window that pops up when a button is pressed.
es_ES: Una ventana de diálogo que aparece cuando se pulsa un botón

[ctx: text]
note: (itstool) path: info/title
en: Dialog (JavaScript)
es_ES: Diálogo (JavaScript)

note: (itstool) path: page/p
en: A customizable popup window, which has a content area and an action area. This example dialog's content area contains a short message, and its action area contains a button which dismisses the dialog.
es_ES: Una ventana emergente personalizable, que contiene un área de contenido y un área de acción. Esta área de contenido del diálogo de ejemplo contiene un mensaje, y su área de acción contiene un botón que cierra el diálogo.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (Python)
es_ES: Diálogo (Python)

note: (itstool) path: page/p
en: A dialog with the response signal connected to a callback function.
es_ES: Un diálogo con la señal de respuesta conectada a una función de retorno de llamada.

note: (itstool) path: section/title
en: Useful methods for a Dialog widget
es_ES: Métodos útiles para un widget «Dialog»

note: (itstool) path: section/p
en: In line 16 the signal <code>"clicked"</code> is connected to the callback function <code>on_button_click()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 16, la señal <code>«clicked»</code> se conecta a la función de retorno de llamada <code>on_button_click()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: item/p
en: Instead of <code>set_modal(True)</code> we could have <code>set_modal(False)</code> followed by <code>set_destroy_with_parent(True)</code> that would destroy the dialog window if the main window is closed.
es_ES: En lugar de <code>set_modal(True)</code> se podría tener <code>set_modal(False)</code> seguido de <code>set_destroy_with_parent(True)</code> que destruiría la ventana de diálogo si se cerrara la ventana principal.

note: (itstool) path: item/p
en: <code>add_button(button_text="The Answer", response_id=42)</code>, where <code>42</code> is any integer, is an alternative to <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code>, where <code>RESPONSE</code> could be one of <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>, which in turn correspond to the integers <code>-5, -6,..., -11</code>.
es_ES: <code>add_button(button_text="La respuesta", response_id=42)</code>, donde <code>42</code> es cualquier entero, es una alternativa a <code>add_button(button_text="texto", response_id=Gtk.ResponseType.RESPUESTA)</code>, donde <code>RESPUESTA</code> podría ser <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>, que a su vez corresponden a los enteros <code>-5, -6,..., -11</code>.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (Vala)
es_ES: Diálogo (Vala)

note: (itstool) path: page/p
en: A dialog with the response signal hooked up to a callback function.
es_ES: Un diálogo con la señal de respuesta enlazada a una función de retorno de llamada.

note: (itstool) path: info/desc
en: A single line text entry field
es_ES: Un campo de entrada de texto de una sola línea

note: (itstool) path: page/p
en: This application greets you in the terminal.
es_ES: Esta aplicación le saluda en la terminal.

note: (itstool) path: info/desc
en: A single-line text entry field
es_ES: Un campo de entrada de texto de una sola línea

note: (itstool) path: page/p
en: This application greets you by name through a pop-up window.
es_ES: Esta aplicación le saluda por su nombre con una ventana emergente.

note: (itstool) path: page/p
en: This application greets you in the terminal with the name you provide.
es_ES: Esta aplicación le saluda en la terminal con el nombre que le indique.

note: (itstool) path: section/title
en: Useful methods for an Entry widget
es_ES: Métodos útiles para un widget «Entry»

note: (itstool) path: section/p
en: In line 14 the signal <code>"activate"</code> is connected to the callback function <code>cb_activate()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation. Some of the signals that a Gtk.Entry widget can emit are: <code>"activate"</code> (emitted when the user activates the Entry key); <code>"backspace"</code> (emitted when the user activates the Backspace or Shift-Backspace keys); <code>"copy-clipboard"</code> (Ctrl-c and Ctrl-Insert); <code>"paste-clipboard"</code> (Ctrl-v and Shift-Insert); <code>"delete-from-cursor"</code> (Delete, for deleting a character; Ctrl-Delete, for deleting a word); <code>"icon-press"</code> (emitted when the user clicks an activatable icon); <code>"icon-release"</code> (emitted on the button release from a mouse click over an activatable icon); <code>"insert-at-cursor"</code> (emitted when the user initiates the insertion of a fixed string at the cursor); <code>"move-cursor"</code> (emitted when the user initiates a cursor movement); <code>"populate-popup"</code> (emitted before showing the context menu of the entry; it can be used to add items to it).
es_ES: En la línea 14 la señal <code>«activate»</code> se conecta a la función de retorno de llamada <code>cb_activate()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada. Algunas de las señales que un widget «Gtk.Entry» puede emitir son: <code>«activate»</code> (cuando el usuario pulsa la tecla «Intro»); <code>«backspace»</code> (cuando el usuario pulsa las teclas «Retroceso» o «Mayús-Retroceso»); <code>«copy-clipboard»</code> («Ctrl-C» y «Ctrl-Insert»); <code>«paste-clipboard»</code> («Ctrl-V» o «Mayús-Insert»); <code>«delete-from-cursor»</code> («Suprimir», para borrar un carácter; «Ctrl-Suprimir», para borrar una palabra); <code>«icon-press»</code> (cuando el usuario pulsa un icono activable); <code>«icon-release»</code> (cuando el botón del ratón se suelta sobre un icono activable); <code>«insert-at-cursor»</code> (cuando el usuario inicia la inserción de una cadena fija en el cursor); <code>«move-cursor»</code> (cuando el usuario inicia un movimiento del cursor); <code>«populate-popup»</code> (antes de mostrar el menú contextual de una entrada; puede usarse para añadirle elementos).

note: (itstool) path: item/p
en: <code>get_buffer()</code> and <code>set_buffer(buffer)</code>, where <code>buffer</code> is a Gtk.EntryBuffer object, can be used to get and set the buffer for the entry.
es_ES: <code>get_buffer()</code> y <code>set_buffer(búfer)</code> donde <code>búfer</code> es un objeto «Gtk.EntryBuffer», pueden usarse para obtener y establecer el búfer de la entrada.

note: (itstool) path: item/p
en: <code>get_text()</code> and <code>set_text("some text")</code> can be used to get and set the content for the entry.
es_ES: <code>get_text()</code> y <code>set_text("texto")</code> pueden usarse para obtener y establecer el contenido de la entrada.

note: (itstool) path: item/p
en: <code>get_text_length()</code> is self-explanatory.
es_ES: <code>get_text_length()</code> obtiene la longitud del texto.

note: (itstool) path: item/p
en: <code>get_text_area()</code> gets the area where the entry's text is drawn.
es_ES: <code>get_text_area()</code> obtiene el área en la que se dibuja el texto de la entrada.

note: (itstool) path: item/p
en: If we set <code>set_visibility(False)</code> the characters in the entry are displayed as the invisible char. This is the best available in the current font, but it can be changed with <code>set_invisible_char(ch)</code>, where <code>ch</code> is a Unicode character. The latter method is reversed by <code>unset_invisible_char()</code>.
es_ES: Si se establece <code>set_visibility(False)</code>, los caracteres en la entrada se muestran como caracteres invisibles. Esto es el mejor disponible en la tipografía actual, pero puede cambiarse con <code>set_invisible_char(ch)</code>, donde <code>ch</code> es un carácter Unicode. El último método se revierte con <code>unset_invisbile_char()</code>.

note: (itstool) path: item/p
en: <code>set_max_length(int)</code>, where <code>int</code> is an integer, truncates every entry longer than <code>int</code> to have the desired maximum length.
es_ES: <code>set_max_length(int)</code>, donde <code>int</code> es un entero, trunca todas las entradas más largas que <code>int</code> para tener la longitud máxima deseada.

note: (itstool) path: item/p
en: By default, if you press the Entry key the Gtk.Entry emits the signal <code>"activate"</code>. If you would like to activate the default widget for the window (set using <code>set_default(widget)</code> on the window), then use <code>set_activates_default(True)</code>.
es_ES: De manera predeterminada, si presiona la tecla «Intro», el «Gtk.Entry» emite la señal <code>«activate»</code>. Si quisiera activar el widget predeterminado de la ventana (establecido usando <code>set_default(widget)</code> en la ventana), entonces use <code>set_activates_default(True)</code>.

note: (itstool) path: item/p
en: To set a frame around the entry: <code>set_has_frame(True)</code>.
es_ES: Para poner un marco alrededor de la entrada: <code>set_has_frame(True)</code>.

note: (itstool) path: item/p
en: <code>set_placeholder_text("some text")</code> sets the text to be displayed in the entry when it is empty and unfocused.
es_ES: <code>set_placeholder_text("texto")</code> establece el texto que mostrar en la entrada cuando esté vacía y sin foco.

note: (itstool) path: item/p
en: <code>set_overwrite_mode(True)</code> and <code>set_overwrite_mode(False)</code> are self-explanatory.
es_ES: <code>set_overwrite_mode(True)</code> y <code>set_overwrite_mode(False)</code> activa o desactiva el modo de sobreescritura.

note: (itstool) path: item/p
en: If we have <code>set_editable(False)</code> the user cannot edit the text in the widget.
es_ES: Si tiene <code>set_editable(False)</code> el usuario no puede editar el texto en el widget.

note: (itstool) path: item/p
en: <code>set_completion(completion)</code>, where <code>completion</code> is a <link href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html"><code>Gtk.EntryCompletion</code></link>, sets completion - or disables it if <code>completion</code> is <code>None</code>.
es_ES: <code>set_completion(completado)</code>, donde <code>completado</code> es un <link href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html"><code>Gtk.EntryCompletion</code></link>, configura el completado; o lo desactiva si <code>completado</code> es <code>None</code>.

note: (itstool) path: item/p
en: An Entry widget can display progress or activity information behind the text. We use <code>set_progress_fraction(fraction)</code>, where <code>fraction</code> is a <code>float</code> between <code>0.0</code> and <code>1.0</code> inclusive, to fill in the given fraction of the bar. We use <code>set_progress_pulse_step()</code> to set the fraction of total entry width to move the progress bouncing block for each call to <code>progress_pulse()</code>. The latter method indicates that some progress is made, and causes the progress indicator of the entry to enter "activity mode", where a block bounces back and forth. Each call to <code>progress_pulse()</code> causes the block to move by a little bit (the amount of movement per pulse is determined, as said before, by <code>set_progress_pulse_step()</code>).
es_ES: Un widget de entrada puede mostrar progreso o información de actividad detrás del texto. Se usa <code>set_progress_fraction(fracción)</code>, donde <code>fracción</code> es un <code>float</code> entre <code>0.0</code> y <code>1.0</code> inclusive, para llenar la fracción dada de la barra. Se usa <code>set_progress_pulse_step()</code> para establecer la fracción de la anchura total de la entrada para mover el bloque que rebota por cada llamada a <code>progress_pulse()</code>. El último método indica que se realizó algún progreso, y hace que el indicador de progreso de la entrada entre al «modo de actividad», en el que un bloque rebota hacia adelante y atrás. Cada llamada a <code>progress_pulse()</code> hace que el bloque se mueva un poco (la cantidad de movimiento por pulso la determina, como se dijo anteriormente, <code>set_progress_pulse_step()</code>).

note: (itstool) path: item/p
en: An Entry widget can also show icons. These icons can be activatable by clicking, can be set up as drag source and can have tooltips. To add an icon, use <code>set_icon_from_stock(icon_position, stock_id)</code>, or one of <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>, <code>set_icon_from_icon_name(icon_position, icon_name)</code>, where <code>icon_position</code> is one of <code>Gtk.EntryIconPosition.PRIMARY</code> (to set the icon at the beginning of the entry) <code>Gtk.EntryIconPosition.SECONDARY</code> (to set the icon at the end of the entry). To set a tooltip on an icon, use <code>set_icon_tooltip_text("tooltip text")</code> or <code>set_icon_tooltip_markup("tooltip text in Pango markup language")</code>.
es_ES: Una entrada también puede mostrar iconos. Estos pueden activarse cuando se pulsan, configurarse para arrastrarse, y tener consejos. Para añadir un icono, use <code>set_icon_from_stock(posición_icono, id_almacén)</code>, <code>set_icon_from_pixbuf(posición_icono, pixbuf)</code>, o <code>set_icon_from_icon_name(posición_icono, nombre_icono)</code>, donde <code>posición_icono</code> puede ser <code>Gtk.EntryIconPosition.PRIMARY</code> (para poner el icono al principio de la entrada) o <code>Gtk.EntryIconPosition.SECONDARY</code> (para poner el icono al final de la entrada). Para ponerle un consejo a un icono, use <code>set_icon_tooltip_text("texto del consejo")</code> o <code>set_icon_tooltip_markup("texto del consejo en el lenguaje de marcado Pango")</code>.

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands
es_ES: Un diálogo adecuado para comandos «Abrir» y «Guardar»

note: (itstool) path: page/p
en: This FileChooserDialog saves a text document, which can be opened or written from scratch in a TextView (see below).
es_ES: Este «FileChooserDialog» guarda un documento de texto, que puede abrirse o escribirse desde cero en un «TextView» (vea a continuación).

note: (itstool) path: page/p
en: It is also possible to call a FileChooserDialog to open a new document.
es_ES: También es posible llamar a un «FileChooserDialog» para abrir un documento nuevo.

note: (itstool) path: section/title
en: Steps to recreate the example
es_ES: Pasos para recrear el ejemplo

note: (itstool) path: item/p
en: Create a file .ui to describe an app-menu with items "New", "Open", "Save", "Save as", and "Quit". This can be done with Glade or in a text editor. See <link xref="#xml"/>
es_ES: Cree un archivo «.ui» para describir un menú de aplicación con elementos «New», «Open», «Save», «Save as», y «Quit». Esto puede hacerse con Glade o en un editor de texto. Consulte <link xref="#xml"/>

note: (itstool) path: item/p
en: Create a Python program for a Gtk.TextView with a Gtk.Buffer <code>self.buffer</code>, and a <code>self.file</code> which will be a Gio.File and we set initially as <code>None</code>.
es_ES: Cree un programa en Python para un «Gtk.TextView» con un «Gtk.Buffer» <code>self.buffer</code>, y un <code>self.file</code> que será un «Gio.File» establecido inicialmente a <code>None</code>.

note: (itstool) path: item/p
en: In this program, create also the actions corresponding to the items in the app-menu, connect them to callback functions, and import the menu in the <code>do_startup()</code> method with a Gtk.Builder.
es_ES: En este programa, también cree las acciones correspondientes a los elementos en el menú de aplicación, conéctelos a funciones de retorno de llamada, e importe el menú en el método <code>do_startup()</code> con un «Gtk.Builder».

note: (itstool) path: item/p
en: "New" and "Quit" actions and callback functions are quite straightforward, see <link xref="#code"/>. See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callback functions.
es_ES: Las acciones y funciones de retorno de llamada «New» y «Quit» son bastante directas, consulte <link xref="#code"/>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada de señales y funciones de retorno de llamada.

note: (itstool) path: item/p
en: "Open" callback should create and open a Gtk.FileChooserDialog for "Open", connected with another callback function for each of the two "Open" and "Cancel" buttons of the FileChooserDialog.
es_ES: La devolución de llamada «Open» debe crear y abrir un «Gtk.FileChooserDialog» para «Abrir», conectado con otra función de retorno de llamada por cada uno de los dos botones «Open» y «Cancel» del «FileChooserDialog».

note: (itstool) path: item/p
en: "Save as" works basically as "Open", but the callback function of the "Save" button depends on a more complex method <code>save_to_file()</code>.
es_ES: «Save as» funciona básicamente como «Open», pero la función de retorno de llamada del botón «Save» depende en un método más complejo, <code>save_to_file()</code>.

note: (itstool) path: item/p
en: "Save" can be reduced to the case where the file is <code>None</code>, that is the case where <code>self.file</code> is a new file, which in turn is the case "Save as"; and to the case where the file is not <code>None</code>, which in turn is reduced to <code>save_to_file()</code>.
es_ES: «Save» puede reducirse al caso en el que el archivo es <code>None</code>, es decir en el caso en el que <code>self.file</code> es un archivo nuevo, que a su vez es el caso de «Save as»; y al caso en el que el archivo no es <code>None</code>, que a su vez se reduce a <code>save_to_file()</code>.

note: (itstool) path: item/p
en: Finally, the method <code>save_to_file()</code>: see <link xref="#code"/>, lines 146 - 175.
es_ES: Finalmente, el método <code>save_to_file()</code>: consulte <link xref="#code"/>, líneas 146 - 175.

note: (itstool) path: section/title
en: XML file which creates the app-menu
es_ES: Archivo XML que crea el menú de aplicación

note: (itstool) path: section/title
en: Useful methods for a FileChooserDialog
es_ES: Métodos útiles para un «FileChooserDialog»

note: (itstool) path: section/p
en: Note that the action of the FileChooserDialog can be one of the following: <code>Gtk.FileChooserAction.OPEN</code> (the file chooser will only let the user pick an existing file) <code>Gtk.FileChooserAction.SAVE</code> (the file chooser will let the user pick an existing file, or type in a new filename), <code>Gtk.FileChooserAction.SELECT_FOLDER</code> (the file chooser will let the user pick an existing folder), <code>Gtk.FileChooserAction.CREATE_FOLDER</code> (the file chooser will let the user name an existing or new folder).
es_ES: Tenga en cuenta que la acción del «FileChooserDialog» puede ser una de las siguientes: <code>Gtk.FileChooserAction.OPEN</code> (el selector de archivo sólo le permitirá al usuario elegir un archivo existente), <code>Gtk.FileChooserAction.SAVE</code> (se le permitirá al usuario elegir un archivo existente, o introducir uno nuevo), <code>Gtk.FileChooserAction.SELECT_FOLDER</code> se le permitirá al usuario elegir una carpeta existente), o  <code>Gtk.FileChooserAction.CREATE_FOLDER</code> (se le permitirá al usuario elegir una carpeta nueva o existente).

note: (itstool) path: section/p
en: Besides the methods used in the <link xref="#code"/>, we have:
es_ES: Además de los métodos usados en el <link xref="#code"/>, existen:

note: (itstool) path: item/p
en: <code>set_show_hidden(True)</code> is used to display hidden files and folders.
es_ES: <code>set_show_hidden(True)</code> se usa para mostrar carpetas y archivos ocultos.

note: (itstool) path: item/p
en: <code>set_select_multiple(True)</code> sets that multiple files can be selected. This is only relevant if the mode is <code>Gtk.FileChooserAction.OPEN</code> or <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.
es_ES: <code>set_select_multiple(True)</code> indica que se pueden seleccionar múltiples archivos. Esto sólo es relevante si el modo es <code>Gtk.FileChooserAction.OPEN</code> o <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.

note: (itstool) path: item/p
en: In a "Save as" dialog, <code>set_current_name(current_name)</code> sets <code>current_name</code> in the file selector, as if entered by the user; <code>current_name</code> can be something like <em>Untitled.txt</em>. This method should not be used except in a "Save as" dialog.
es_ES: En el diálogo «Save as», <code>set_current_name(nombre_actual)</code> establece <code>nombre_actual</code> en el selector de archivo, como si lo hubiera introducido el usuario; <code>nombre_actual</code> puede ser algo como <code>Sin nombre.txt</code>. Este método no debe usarse excepto en un diálogo «Save as».

note: (itstool) path: item/p
en: The default current folder is "recent items". To set another folder use <code>set_current_folder_uri(uri)</code>; but note you should use this method and cause the file chooser to show a specific folder only when you are doing a "Save as" command and you already have a file saved somewhere.
es_ES: La carpeta actual predeterminada es «elementos recientes». Para establecer otra carpeta use <code>set_current_folder_uri(uri)</code>; pero tenga en cuenta que debe usar este método y hacer que el selector de archivo muestre una carpeta específica sólo cuando está ejecutando un comando «Save as» y ya tenga un archivo guardado en algún lado.

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands.
es_ES: Un diálogo adecuado para comandos «Abrir» y «Guardar».

note: (itstool) path: section/title
en: Overview of the example
es_ES: Visión general del ejemplo

note: (itstool) path: section/p
en: This example demonstrates how the FileChooserDialog can be used. It is incorporated into a very simple text editor application. All the <link xref="menubar.vala#win-app">actions</link>, including the "open", "save" and "save-as" commands can be found in the <link xref="gmenu.vala">app-menu</link>. Here, the app-menu is created using an XML UI file, which is then imported into the application using Gtk.Builder.
es_ES: Este ejemplo demuestra cómo usar el «FileChooserDialog». Está incorporado en una aplicación de edición de texto muy simple. Todas las <link xref="menubar.vala#win-app">acciones</link>, incluyendo los comandos «open», «save» y «save-as» pueden encontrarse en el <link xref="gmenu.vala">menú de la aplicación</link>. Aquí, el menú se crea usando un archivo de IU XML, que a su vez se importa a la aplicación usando «Gtk.Builder».

note: (itstool) path: section/title
en: XML UI file which creates the app-menu
es_ES: Archivo de IU XML que crea el menú de la aplicación

note: (itstool) path: section/title
en: Vala Code
es_ES: Código en Vala

note: (itstool) path: section/title
en: Relevant API documentation
es_ES: Documentación de la API relevante

note: (itstool) path: info/desc
en: A widget to choose a font
es_ES: Un widget para elegir la tipografía

note: (itstool) path: page/p
en: A FontChooserWidget with a callback function.
es_ES: Un FontChooserWidget con una función de retorno de llamada.

note: (itstool) path: section/title
en: Useful methods for a FontChooserWidget
es_ES: Métodos útiles para un «FontChooserWidget»

note: (itstool) path: section/p
en: In line 16 the <code>"notify::font"</code> signal from the widget is connected to the callback function <code>font_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 16, la señal <code>«notify::font»</code> del widget se conecta a la función de retorno de llamada <code>font_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: item/p
en: To set the font which is initially selected, use <code>set_font(font)</code> (where <code>font</code> is the font name) or <code>set_font_desc(font)</code> (where <code>font</code> is the PangoFontDescription).
es_ES: Para establecer la tipografía seleccionada inicialmente, use <code>set_font(tipografía)</code> (donde <code>tipografía</code> es el nombre de la tipografía) o <code>set_font_desc(tipografía)</code> (donde <code>tipografía</code> es la PangoFontDescription).

note: (itstool) path: item/p
en: To get the selected font use <code>get_font()</code> or <code>get_font_desc()</code>.
es_ES: Para obtener la fuente seleccionada use <code>get_font()</code> o <code>get_font_desc()</code>.

note: (itstool) path: item/p
en: To change the text which is shown in the preview area, use <code>set_preview_text()</code>.
es_ES: Para cambiar el texto que se muestra en el área de previsualización, use <code>set_preview_text()</code>.

note: (itstool) path: page/p
en: A FontChooserWidget with a lambda callback function.
es_ES: Un FontChooserWidget con una función de retorno de llamada lambda.

note: (itstool) path: info/desc
en: A simple implementation of GMenuModel
es_ES: Una implementación sencilla del GMenuModel

note: (itstool) path: page/p
en: A GtkApplication with a simple GMenu and SimpleActions
es_ES: Una GtkApplication con un GMenu sencillo y SimpleActions

note: (itstool) path: info/desc
en: A simple implementation of GMenu
es_ES: Una implementación sencilla de GMenu

note: (itstool) path: section/title
en: Useful methods for a GSimpleAction and a GMenu
es_ES: Métodos útiles para una «GSimpleAction» y un GMenu

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>new_action</code> (not the menu!) is connected to the callback function <code>new_cb()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 33, la señal <code>«activate»</code> de la acción <code>new_action</code> (no el menú) se conecta a la función de retorno de llamada <code>new_cb()</code> usando <code><var>action</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: section/p
en: Useful methods for a GSimpleAction:
es_ES: Métodos útiles para una «GSimpleAction»:

note: (itstool) path: item/p
en: To create a new action that is <em>stateless</em>, that is, an action that do not retain or depend on a state given by the action itself, use
es_ES: Para crear una acción nueva que <em>no dependa del estado</em>, es decir, una acción que no retenga o dependa de un estado dado a la acción en sí, use

note: (itstool) path: item/p
en: where <code>"name"</code> is the name of the action and <code>parameter_type</code> is the type of the parameters that the action receives when being activated. This can be <code>None</code>, or <code>GLib.VariantType.new('s')</code> if the parameter is of type <code>str</code>, or instead of <code>'s'</code> a character as described <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link>. To create a new <em>stateful</em> (i.e. not stateless) action, use
es_ES: donde <code>"name"</code> es el nombre de la acción y <code>parameter_type</code> es el tipo de parámetro que recibe la acción cuando se activa. Este puede ser <code>None</code>, o <code>GLib.VariantType.new('s')</code> si el parámetro es del tipo <code>str</code>, o en lugar de <code>'s'</code> un carácter como se describe <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">aquí</link>. Para crear una acción nueva <em>con estado</em>, use

note: (itstool) path: item/p
en: where <code>initial_state</code> is defined as a GVariant - for instance <code>Glib.Variant.new_string('start')</code>; for a list of possibilities see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link>.
es_ES: donde <code>initial_state</code> está definido como una GVariant: por ejemplo <code>Glib.Variant.new_string('start')</code>; para una lista de posibilidades consulte <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">aquí</link>.

note: (itstool) path: item/p
en: <code>set_enabled(True)</code> sets the action as enabled; an action must be enabled in order to be activated or in order to have its state changed from outside callers. This should only be called by the implementor of the action. Users of the action should not attempt to modify its enabled flag.
es_ES: <code>set_enabled(True)</code> configura la acción como habilitada; una acción debe habilitarse para poder activarse o para que llamantes exteriores cambien su estado. Sólo el que implementa la acción debe llamarlo. Los usuarios de la acción no deben intentar modificar su opción «enabled».

note: (itstool) path: item/p
en: <code>set_state(state)</code>, where <code>state</code> is a GVariant, sets the state of the action, updating the 'state' property to the given value. This should only be called by the implementor of the action; users of the action should instead call <code>change_state(state)</code> (where <code>state</code> is as above) to request the change.
es_ES: <code>set_state(estado)</code>, donde <code>estado</code> es una GVariant, establece el estado de la acción, actualizando la propiedad «state» a un valor dado. Sólo el que implementa la acción debe llamarlo; los usuarios de la acción, en cambio, deben llamar a <code>change_state(estado)</code> (donde <code>estado</code> es como se mencionó) para solicitar el cambio.

note: (itstool) path: section/p
en: Useful methods for a GMenu:
es_ES: Métodos útiles para un GMenu:

note: (itstool) path: item/p
en: To insert an item in the menu in position <code>position</code>, use <code>insert(position, label, detailed_action)</code>, where <code>label</code> is the label that will appear in the menu and <code>detailed_action</code> is a string composed of the name of the action to which we prepend the prefix <code>app.</code>. A more detailed discussion of this can be found in <link xref="menubar.py#win-app"/>.
es_ES: Para insertar un elemento en el menú en una <code>posición</code>, use <code>insert(posición, etiqueta, acción_detallada)</code>, donde <code>etiqueta</code> es la etiqueta que aparecerá en el menú y <code>acción_detallada</code> es una cadena compuesta por el nombre de la acción a la que se la agrega el prefijo <code>app.</code>. Puede encontrar una discusión más detallada de esto en la <link xref="menubar.py#win-app"/>.

note: (itstool) path: item/p
en: To append or prepend an item in the menu use respectively <code>append(label, detailed_action)</code> and <code>prepend(label, detailed_action)</code>.
es_ES: Para agregar o anteponer un elemento en el menú use respectivamente <code>append(etiqueta, acción_detallada)</code> y <code>prepend(etiqueta, acción_detallada)</code>.

note: (itstool) path: item/p
en: Another way of adding items to the menu is to create them as <code>GMenuItem</code>s and use <code>insert_item(position, item)</code>, <code>append_item(item)</code>, or <code>prepend_item(item)</code>; so for instance we might have:
es_ES: Otra manera de añadir elementos al menú es crearlos como <code>GMenuItem</code> y usar <code>insert_item(posición, elemento)</code>, <code>append_item(elemento)</code>, o <code>prepend_item(elemento)</code>; por lo que por ejemplo se podría tener:

note: (itstool) path: item/p
en: We can also add a whole subsection in a menu using <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, or <code>prepend_section(label, section)</code>, where <code>label</code> is the title of the subsection.
es_ES: También se puede añadir una subsección completa a un menú usando <code>insert_section(posición, etiqueta, sección)</code>, <code>append_section(etiqueta, sección)</code>, o <code>prepend_section(etiqueta, sección)</code>, donde <code>etiqueta</code> es el título de la subsección.

note: (itstool) path: item/p
en: To add a submenu that will expand and collapse, use <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, or <code>prepend_submenu(label, section)</code>, where <code>label</code> is the title of the subsection.
es_ES: Para añadir un submenú que se expanda y colapse, use <code>insert_submenu(posición, etiqueta, sección)</code>, <code>append_submenu(etiqueta, sección)</code>, o <code>prepend_submenu(etiqueta, sección)</code>, donde <code>etiqueta</code> es el título de la subsección.

note: (itstool) path: item/p
en: To remove an item from the menu, use <code>remove(position)</code>.
es_ES: Para eliminar un elemento del menú, use <code>remove(posición)</code>.

note: (itstool) path: item/p
en: To set a label for the menu, use <code>set_label(label)</code>.
es_ES: Para establecer una etiqueta para el menú, use <code>set_label(etiqueta)</code>.

note: (itstool) path: note/p
en: <em style="strong">You need to be running GTK+-3.4 or later for this to work</em>
es_ES: <em style="strong">Necesita ejecutar GTK+-3.4 o superior para que funcione</em>

note: (itstool) path: info/desc
en: Pack widgets in rows and columns
es_ES: Empaquetar widgets en filas y columnas

note: (itstool) path: page/title
en: Grid
es_ES: Rejilla

note: (itstool) path: page/p
en: A button widget connected to a progress bar.
es_ES: Un widget de botón conectado a una barra de progreso.

note: (itstool) path: page/p
en: A button widget connected to a progress bar, inside of a grid which handles the layout.
es_ES: Un widget de botón conectado a una barra de progreso., dentro de una rejilla que gestiona la distribución.

note: (itstool) path: page/p
en: Some labels in a grid.
es_ES: Algunas etiquetas en una rejilla.

note: (itstool) path: section/title
en: Useful methods for a Grid widget
es_ES: Métodos útiles para un widget «Grid»

note: (itstool) path: item/p
en: To attach a widget <code>child</code> in position <code>left, top</code> in a slot of given <code>width, height</code> use <code>attach(child, top, left, width, height)</code>. If a widget <code>sibling</code> is already in place, we can also use <code>attach_next_to(child, sibling, side, width, height)</code>, where <code>side</code> is one of <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.
es_ES: Para añadir un widget <code>hijo</code> en la posición <code>izquierda, arriba</code> en un espacio de una <code>anchura, altura</code> dada use <code>attach(hijo, arriba, izquierda, anchura, altura</code>. Si un widget <code>hermano</code> ya está en posición, también se puede usar <code>attach_next_to(hijo, hermano, lado, anchura, altura)</code>, donde <code>lado</code> puede ser <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.

note: (itstool) path: item/p
en: <code>insert_row(position)</code> and <code>insert_column(position)</code> do exactly what they say; children which are attached at or below this position are moved one row down, and children which span across this position are grown to span the new row. <code>insert_next_to(sibling, side)</code> inserts a row or column at the specified position. The new row or column is placed next to <code>sibling</code>, on the side determined by <code>side</code>; if side is <code>Gtk.PositionType.TOP</code> or <code>Gtk.PositionType.BOTTOM</code>, a row is inserted, if side is <code>Gtk.PositionType.LEFT</code> or <code>Gtk.PositionType.RIGHT</code>, a column is inserted.
es_ES: <code>insert_row(posición)</code> e <code>insert_column(posición)</code> hacen que los hijos añadidos en esa posición o por debajo se muevan una fila hacia abajo, y que los hijos que se extienden a lo largo de esta posición crezcan para ocupar la siguiente fila. <code>insert_next_to(hermano, lado)</code> inserta una fila o columna en la posición especificada. La fila o columna nueva se pone al lado del <code>hermano</code>, a su <code>lado</code>; si es <code>Gtk.PositionType.TOP</code> or <code>Gtk.PositionType.BOTTOM</code>, se inserta una fila; si es <code>Gtk.PositionType.LEFT</code> o <code>Gtk.PositionType.RIGHT</code>, se inserta una columna.

note: (itstool) path: item/p
en: <code>set_row_homogeneous(True)</code> and <code>set_column_homogeneous(True)</code> ensure that (respectively) every row or every column has the same width or height.
es_ES: <code>set_row_homogeneous(True)</code> y <code>set_column_homogeneous(True)</code> se aseguran de que (respectivamente) cada fila o cada columna tengan la misma anchura o altura.

note: (itstool) path: item/p
en: <code>set_row_spacing(spacing)</code> and <code>set_column_spacing(spacing)</code> force a spacing between (respectively) rows or columns. The value of <code>spacing</code> can be between <code>0</code>, which is the default value, and <code>32767</code>.
es_ES: <code>set_row_spacing(espaciado)</code> y <code>set_column_spacing(espaciado)</code> fuerzan un espaciado entre (respectivamente) filas o columnas. El valor de <code>espaciado</code> puede estar entre <code>0</code>, que es el valor predeterminado, y <code>32767</code>.

note: (itstool) path: page/title
en: Grid widget
es_ES: Widget de rejilla

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets, and support GMenu
es_ES: Una ventana de nivel superior que puede contener otros widgets, y que soporta GMenu

note: (itstool) path: page/p
en: A minimal GtkApplication with a GtkApplicationWindow
es_ES: Una GtkApplication con una GtkApplicationWindow

note: (itstool) path: info/desc
en: GtkWindow subclass with GtkApplication support
es_ES: Subclase GtkWindow con soporte de GtkApplication

note: (itstool) path: page/p
en: A simple GtkApplicationWindow which can support Menus.
es_ES: Una GtkApplicationWindow sencilla que soporta menús.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support <link xref="gmenu.py"/>.
es_ES: La ventana de GtkApplication más sencilla que puede soportar <link xref="gmenu.py"/>.

note: (itstool) path: section/title
en: Useful methods for a Gtk.ApplicationWindow widget
es_ES: Métodos útiles para un widget «Gtk.ApplicationWindow»

note: (itstool) path: item/p
en: <code>set_default_size(200, 100)</code> sets the default size of the window to a width of <code>200</code> and a height of <code>100</code>; if instead of a positive number we pass <code>-1</code> we have the default size.
es_ES: <code>set_default_size(200, 100)</code> establece el tamaño predeterminado de la ventana a una anchura de <code>200</code> y una altura de <code>100</code>; si en lugar de un número positivo le pasa <code>-1</code> tendrá el tamaño predeterminado.

note: (itstool) path: item/p
en: <code>set_position(Gtk.WindowPosition.CENTER)</code> centers the window. Other options are <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.
es_ES: <code>set_position(Gtk.WindowPosition.CENTER)</code> centra la ventana. Otras opciones son <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support Menus.
es_ES: La ventana de GtkApplication más sencilla que puede soportar menús.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (C)
es_ES: Afinador de guitarra (C)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
es_ES: Usar GTK+ y GStreamer para construir un sencillo afinador de guitarra para GNOME. Muestra cómo usar el diseñador de interfaces.

note: (itstool) path: page/title
en: Guitar tuner
es_ES: Afinador de guitarra

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:
es_ES: En este tutorial se va a hacer un programa que reproduce tonos que puede usar para afinar su guitarra. Aprenderá a:

note: (itstool) path: item/p
en: Set up a basic project in Anjuta
es_ES: Configurar un proyecto básico en Anjuta

note: (itstool) path: item/p
en: Create a simple GUI with Anjuta's UI designer
es_ES: Crear una IGU sencilla con el diseñador IU de Anjuta

note: (itstool) path: item/p
en: Use GStreamer to play sounds
es_ES: Usar GStreamer para reproducir sonidos

note: (itstool) path: synopsis/p
en: You'll need the following to be able to follow this tutorial:
es_ES: Necesitará lo siguiente para poder seguir este tutorial:

note: (itstool) path: item/p
en: An installed copy of the <link xref="getting-ready">Anjuta IDE</link>
es_ES: Una copia instalada del <link xref="getting-ready">EID Anjuta</link>

note: (itstool) path: item/p
en: Basic knowledge of the C programming language
es_ES: Conocimiento básico del lenguaje de programación C

note: (itstool) path: section/title
en: Create a project in Anjuta
es_ES: Crear un proyecto en Anjuta

note: (itstool) path: section/p
en: Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the files you need to build and run the code later on. It's also useful for keeping everything together.
es_ES: Antes de empezar a programar, deberá configurar un proyecto nuevo en Anjuta. Esto creará todos los archivos que necesite para construir y ejecutar el código más adelante. También es útil para mantener todo ordenado.

note: (itstool) path: item/p
en: Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
es_ES: Inicie Anjuta y pulse <guiseq><gui>Archivo</gui><gui>Nuevo</gui><gui>Proyecto</gui></guiseq> para abrir el asistente de proyectos.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
es_ES: Seleccione <gui>GTK+ (simple)</gui> en la pestaña <gui>C</gui>, pulse <gui>Continuar</gui>, y rellene sus detalles en las siguientes páginas. Use <file>afinador-guitarra</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <em>gstreamer-0.10</em> from the list to include the GStreamer library in your project.
es_ES: Asegúrese de que <gui>Configurar paquetes externos</gui> está <gui>activada</gui>. En la siguiente página, seleccione <em>gstreamer-0.10</em> de la lista para incluir la biblioteca GStreamer en su proyecto.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/main.c</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Debería ver algo de código que comience con las líneas:

note: (itstool) path: section/title
en: Build the code for the first time
es_ES: Construir el código por primera vez

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
es_ES: C es un lenguaje más detallado, por lo que no se sorprenda de que el archivo contiene un gran cantidad de código. La mayor parte es código de plantilla. Carga una ventana (vacía) desde el archivo de descripción de la interfaz de usuario y la muestra. A continuación se ofrecen más detalles; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtk</code> (user interface) and <code>gi18n</code> (internationalization) libraries. Functions from these libraries are used in the rest of the code.
es_ES: Las tres líneas <code>#include</code> en la parte superior incluyen las bibliotecas <code>config</code> (útil para definiciones de construcción de autoconf), <code>gtk</code> (interfaz de usuario) y <code>gi18n</code> (internacionalización). Las funciones de estas bibliotecas se usan en el resto del código.

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
es_ES: La función <code>create_window</code> crea una ventana nueva abriendo un archivo de GtkBuilder (<file>src/guitar-tuner.ui</file>, definido unas pocas líneas más arriba), conectando sus señales y mostrándolo en una ventana. El archivo de GtkBuilder contiene una descripción de una interfaz de usuario y de todos sus elementos. Puede usar el editor Anjuta para diseñar interfaces de usuario con GtkBuilder.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> function is called (and quits the app) when you close the window.
es_ES: Conectar señales es como se define lo que pasa cuando pulsa un botón, o cuando ocurre algún otro evento. Aquí, se llama a la función <code>destroy</code> (y se sale de la aplicación) cuando cierra la ventana.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a C application. It calls a few functions which set up and then run the application. The <code>gtk_main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
es_ES: La función <code>main</code> se ejecuta de manera predeterminada cuando inicia una aplicación en C. Llama a unas pocas funciones que configuran y ejecutan la aplicación. La función <code>gtk_main</code> inicia el bucle principal de GTK+, que ejecuta la interfaz de usuario y comienza a escuchar eventos (como pulsaciones del ratón y del teclado).

note: (itstool) path: item/p
en: The <code>ENABLE_NLS</code> conditional definition sets up <code>gettext</code>, which is a framework for translating applications. These functions specify how translation tools should handle your app when you run them.
es_ES: La definición condicional <code>ENABLE_NLS</code> configura <code>gettext</code>, que es un entorno de trabajo para traducir aplicaciones. Estas funciones especifican cómo deben manejar su aplicación las herramientas de traducción cuando las ejecuta.

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>).
es_ES: Este código está listo para usarse, por lo que puede compilarlo pulsando <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> (o pulsando <keyseq><key>Mayús</key><key>F7</key></keyseq>).

note: (itstool) path: section/p
en: Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.
es_ES: Pulse <gui>Ejecutar</gui> en la siguiente ventana que aparece para configurar una construcción de depuración. Esto sólo necesita hacer una vez para la primera construcción.

note: (itstool) path: section/title
en: Create the user interface
es_ES: Crear la interfaz de usuario

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
es_ES: El archivo de GtkBuilder contiene una descripción de la interfaz de usuario (IU). Para editar la interfaz de usuario, abra <file>src/guitar_tuner.ui</file>. Esto cambiará al diseñador de interfaces. La ventana de diseño está en el centro; los widgets y sus propiedades están a la izquierda, y la paleta de los widgets disponibles está a la derecha.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.
es_ES: La distribución de cualquier IU en GTK+ se organiza usando cajas y tablas. Aquí se usará una <gui>GtkButtonBox</gui> vertical para asignar seis <gui>GtkButtons</gui>, uno para cada una de las cuerdas de la guitarra.

note: (itstool) path: item/p
en: Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the six strings) and the orientation to vertical.
es_ES: Seleccione una <gui>GtkButtonBox</gui> de la sección <gui>Contenedor</gui> de la <gui>Paleta</gui> de la derecha y póngalo en la ventana. En el panel de <gui>Propiedades</gui>, establezca el número de elementos a «6» (para las seis cuerdas) y la orientación a «vertical».

note: (itstool) path: item/p
en: Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.
es_ES: Ahora, elija un <gui>GtkButton</gui> de la paleta y póngalo en la primera parte de la caja.

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string.
es_ES: Mientras el botón esté seleccionado, cambie la propiedad <gui>Etiqueta</gui> en la pestaña <gui>Widgets</gui> a <gui>E</gui>. Esta será la cuerda Mi grave.

note: (itstool) path: item/p
en: Switch to the <gui>Signals</gui> tab (inside the <gui>Widgets</gui> tab) and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>on_button_clicked</code> in the <gui>Handler</gui> column and press <key>Return</key>.
es_ES: Cambie a la pestaña <gui>Señales</gui> (dentro de la pestaña <gui>Widgets</gui>) y busque la señal <code>clicked</code> del botón. Puede usar esto para conectar un gestor de señal al que se llamará cuando el usuario pulse el botón. Para hacer esto, pulse sobre la señal, escriba <code>on_button_clicked</code> en la columna <gui>Gestor</gui> y pulse <key>Intro</key>.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.
es_ES: Repita los pasos anteriores para el resto de botones, añadiendo las 5 cuerdas restantes con los nombres <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, y <em>e</em>.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.
es_ES: Guarde el diseño de la IU (pulsando <guiseq><gui>Archivo</gui><gui>Guardar</gui></guiseq>) y déjelo abierto.

note: (itstool) path: section/title
en: Creating the signal handler
es_ES: Crear el gestor de señales

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. We need to add that function in the source file.
es_ES: El el diseñador de interfaces, se ha hecho que todos los botones llamen a la misma función, <gui>on_button_clicked</gui>, cuando se pulsan. Se debe añadir esta función al archivo de código fuente.

note: (itstool) path: section/p
en: To do this, open <file>main.c</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file at a position that is outside any function. The following code will be added to your source file:
es_ES: Para hacer esto, abra <file>main.c</file> mientras el archivo de la interfaz de usuario está abierto. Cambie a la pestaña <gui>Señales</gui>, que ya ha usado para establecer el nombre de la señal. Ahora vaya a la fila en la que estableció la señal <gui>clicked</gui> y arrástrela al archivo de código fuente, fuera de cualquier función. Se añadirá el siguiente código a su archivo de código fuente:

note: (itstool) path: section/p
en: This signal handler has two arguments: a pointer to the <code>GtkWidget</code> that called the function (in our case, always a <code>GtkButton</code>), and a pointer to some "user data" that you can define, but which we won't be using here. (You can set the user data by calling <code>gtk_builder_connect_signals</code>; it is normally used to pass a pointer to a data structure that you might need to access inside the signal handler.)
es_ES: El gestor de la señal tiene dos argumentos. un puntero al <code>GtkWidget</code> que llamó a la función (en este caso, siempre es un <code>GtkButton</code>), y un puntero a ciertos «datos de usuario» que puede definir, pero que aquí no se usan. (Puede establecer los datos de usuario llamando a <code>gtk_builder_connect_signals</code>; normalmente se usa para pasar un puntero a una estructura de datos a la que puede necesitar acceder dentro del gestor de la señal.)

note: (itstool) path: section/p
en: For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.
es_ES: Por ahora, se dejará el gestor de la señal vacío mientras se escribe el código para producir sonidos.

note: (itstool) path: section/title
en: GStreamer pipelines
es_ES: Tuberías de Gstreamer

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
es_ES: GStreamer es el entorno multimedia de trabajo de GNOME: puede usarlo para reproducir, grabar y procesar vídeo, sonido, flujos de la cámara web y similares. En este caso, se usará para generar tonos de frecuencia única.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
es_ES: Conceptualmente. GStreamer funciona de la siguiente manera: puede crear una <em>tubería</em> que contenga varios elementos de procesado que van desde la <em>fuente</em> hasta el <em>sumidero</em> (salida). La fuente puede ser, por ejemplo, un archivo de imagen, un vídeo o un archivo de música, y la salida puede ser un widget o la tarjeta de sonido.

note: (itstool) path: section/p
en: Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.
es_ES: Entre la fuente y el sumidero, puede aplicar varios filtros y conversores para manejar efectos, conversiones de formato, etc. Cada elemento de la tubería tiene propiedades que se pueden usar para cambiar este comportamiento.

note: (itstool) path: media/p
en: An example GStreamer pipeline.
es_ES: Un ejemplo de tubería de GStreamer.

note: (itstool) path: section/title
en: Set up the pipeline
es_ES: Configurar la tubería

note: (itstool) path: section/p
en: In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
es_ES: En este sencillo ejemplo se usará un generador de tonos llamado <code>audiotestsrc</code> y se enviará la salida al dispositivo de sonido predeterminado del sistema, <code>autoaudiosink</code>. Sólo es necesario configurar la frecuencia del generador de tonos; esto es accesible a través de la propiedad <code>freq</code> de <code>audiotestsrc</code>.

note: (itstool) path: section/p
en: Insert the following line into <file>main.c</file>, just below the <code>#include &lt;gtk/gtk.h&gt;</code> line:
es_ES: Inserte la siguiente línea en <file>main.c</file>, justo a continuación de la línea <code>#include &lt;gtk/gtk.h&gt;</code>:

note: (itstool) path: section/p
en: This includes the GStreamer library. You also need to add a line to initialize GStreamer; put the following code on the line above the <code>gtk_init</code> call in the <code>main</code> function:
es_ES: Esto incluye la bilbioteca GStreamer. También necesita añadir una línea para inicializar GStreamer; ponga la siguiente línea de código antes de la llamada <code>gtk_init</code> en la función <code>main</code>:

note: (itstool) path: section/p
en: Then, copy the following function into <file>main.c</file> above the empty <code>on_button_clicked</code> function:
es_ES: Después, copie la siguiente función en <file>main.c</file> encima de la función <code>on_button_clicked</code> vacía:

note: (itstool) path: item/p
en: The first five lines create source and sink GStreamer elements (<code>GstElement</code>), and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
es_ES: Las cinco primeras líneas crean los elementos «fuente» y «sumidero» de GStreamer (<code>GstElement</code>), y un elemento de tubería (que se usará como contenedor de los otros dos elementos). A la tubería se le asigna el nombre «note»; la fuente se llama «source» y se asocia a la fuente <code>audiotestsrc</code> y el sumidero se llama «output» y se asocia con el sumidero <code>autoaudiosink</code> (la salida de la tarjeta de sonido predeterminada).

note: (itstool) path: item/p
en: The call to <code>g_object_set</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
es_ES: La llamada a <code>g_object_set</code> establece la propiedad <code>freq</code> del elemento fuente a <code>frequency</code>, que se pasa como argumento a la función <code>play_sound</code>. Esto sólo es la frecuencia de la nota en Hercios; más adelante se definirán algunas frecuencias útiles.

note: (itstool) path: item/p
en: <code>gst_bin_add_many</code> puts the source and sink into the pipeline. The pipeline is a <code>GstBin</code>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more arguments to <code>gst_bin_add_many</code>.
es_ES: <code>gst_bin_add_many</code> añade la fuente y el sumidero a la tubería. La tubería es un <code>GstBin</code>, que es un elemento que puede contener otros muchos elementos de GStreamer. En general, puede añadir tantos elementos como quiera a una tubería añadiendo más argumentos a <code>gst_bin_add_many</code>.

note: (itstool) path: item/p
en: Next, <code>gst_element_link</code> is used to connect the elements together, so the output of <code>source</code> (a tone) goes into the input of <code>sink</code> (which is then output to the sound card). <code>gst_element_set_state</code> is then used to start playback, by setting the state of the pipeline to playing (<code>GST_STATE_PLAYING</code>).
es_ES: Después, se usa <code>gst_element_link</code> para conectar los elementos de forma conjunta, de tal forma que la salida de <code>source</code> (un tono) va a la entrada de <code>sink</code> (que es después la salida de la tarjeta de sonido). <code>gst_element_set_state</code> se usa al iniciar la reproducción, configurando el estado de la tubería a reproduciendo (<code>GST_STATE_PLAYING</code>).

note: (itstool) path: section/title
en: Stopping playback
es_ES: Detener la reproducción

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>g_timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>FALSE</code>.
es_ES: No se quiere reproducir un tono molesto para siempre, por lo que lo último que <code>play_sound</code> hace es llamar a <code>g_timeout_add</code>. Esto establece un tiempo de expiración para detener el sonido; espera <code>LENGTH</code> milisegundos antes de llamar a la función <code>pipeline_stop</code>, y se queda llamando a <code>pipeline_stop</code> hasta que devuelve <code>FALSE</code>.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>g_timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
es_ES: Ahora, se escribirá el código de la función <code>pipeline_stop</code>, llamada por <code>g_timeout_add</code>. Inserte el código siguiente <em>encima</em> de la función <code>play_sound</code>:

note: (itstool) path: section/p
en: The call to <code>gst_element_set_state</code> stops the playback of the pipeline and <code>g_object_unref</code> unreferences the pipeline, destroying it and freeing its memory.
es_ES: La llamada a <code>gst_element_set_state</code> detiene la reproducción de la tubería y <code>g_object_unref</code> desreferencia la tubería, la destruye y libera su memoria.

note: (itstool) path: section/title
en: Define the tones
es_ES: Definir los tonos

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the top of <file>main.c</file>) as follows:
es_ES: Se quiere reproducir el sonido correcto cuando un usuario pulsa un botón. En primer lugar, se necesita conocer las frecuencias de las seis cuerdas de la guitarra, que están definidas (al principio de <file>main.c</file>) de la siguiente manera:

note: (itstool) path: section/p
en: Now to flesh out the signal handler that we defined earlier, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
es_ES: Ahora se se profundiza en el gestor de la señal definido anteriormente, <code>on_button_clicked</code>. Se podría haber conectado cada botón a un gestor de la señal diferente, pero esto había supuesto duplicar mucho código. En su lugar, se puede usar la etiqueta del botón para saber cuál de ellos se ha pulsado:

note: (itstool) path: section/p
en: A pointer to the <code>GtkButton</code> that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the text of that button using <code>gtk_button_get_label</code>.
es_ES: A <code>on_button_clicked</code> se le pasa como argumento (<code>button</code>) un puntero al <code>GtkButton</code> que se ha pulsado. Se puede obtener el texto de este botón usando <code>gtk_label_get_label</code>.

note: (itstool) path: section/p
en: The text is then compared to the notes that we have using <code>g_str_equal</code>, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
es_ES: El texto se compara con las notas que se tiene usando <code>g_str_equal</code>, y se llama a <code>play_sound</code> con la frecuencia correspondiente a cada nota. Esto reproduce el tono; el afinador de guitarra ya está funcionando.

note: (itstool) path: section/title
en: Build and run the application
es_ES: Construir y ejecutar la aplicación

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
es_ES: Todo el código debería estar listo para ejecutarse. Pulse <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> para construir todo otra vez y pulse <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> para iniciar la aplicación.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/guitar-tuner</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
es_ES: Si todavía no lo ha hecho, elija la aplicación <file>Debug/src/afinador-guitarra</file> en el diálogo que aparece. Finalmente, pulse <gui>Ejecutar</gui> y disfrute.

note: (itstool) path: section/title
en: Reference Implementation
es_ES: Implementación de referencia

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.c">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="guitar-tuner/guitar-tuner.c">código de referencia</link>.

note: (itstool) path: section/title
en: Next steps
es_ES: Siguientes pasos

note: (itstool) path: section/p
en: Here are some ideas for how you can extend this simple demonstration:
es_ES: Aquí hay algunas ideas sobre cómo puede extender esta sencilla demostración:

note: (itstool) path: item/p
en: Have the program automatically cycle through the notes.
es_ES: Hacer que el programa recorra las notas automáticamente.

note: (itstool) path: item/p
en: Make the program play recordings of real guitar strings being plucked.
es_ES: Hacer que el programa reproduzca grabaciones de cuerdas de guitarras que se están afinando.

note: (itstool) path: item/p
en: To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.
es_ES: PAra hacer esto, debe configurar una tubería de GStreamer más complicada, que le permite cargar y reproducir archivos de música. Deberá elegir un los elementos <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decodificador y demultiplexor</link> de GStreamer basándose en el formato del archivo de sus sonidos grabados; los MP3 usan elementos diferentes de los de los archivos Ogg Vorbis, por ejemplo.

note: (itstool) path: item/p
en: You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.
es_ES: Puede querer conectar los elementos de maneras más complicadas. Esto puede implicar usar <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">conceptos de GStreamer</link> que no se han comentado en este tutorial, tales como <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">interfaces</link>. Es posible que encuentre útil el comando <cmd>gst-inspect</cmd>.

note: (itstool) path: item/p
en: Automatically analyze notes that the user plays.
es_ES: Analizar automáticamente las notas que toca el músico.

note: (itstool) path: item/p
en: You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">spectrum analysis</link> would allow you to figure out what notes are being played?
es_ES: Puede conectar un micrófono y grabar sonidos con él usando una <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">fuente de entrada</link>. ¿Es posible que algún tipo de <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">análisis de espectro</link> le permita saber qué notas se están reproduciendo?

note: (itstool) path: info/desc
en: Use GTKmm and GStreamermm to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
es_ES: Usar GTKmm y GStreamermm para construir un sencillo afinador de guitarra para GNOME. Muestra cómo usar el diseñador de interfaces.

note: (itstool) path: item/p
en: Basic knowledge of the C++ programming language
es_ES: Conocimiento básico del lenguaje de programación C++

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
es_ES: Elija <gui>GTKmm (simple)</gui> de la pestaña <gui>C++</gui>, pulse <gui>Adelante</gui> y rellene los detalles en las siguientes páginas. Use <file>afinador-guitarra</file> como nombre de proyecto y de carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamermm-0.10</em> from the list to include the GStreamermm library in your project.
es_ES: Asegúrese de que <gui>Configurar paquetes externos</gui> está seleccionada. En la siguiente página, seleccione <em>gstreamermm-0.10</em> de la lista para incluir la biblioteca GStreamermm en su proyecto.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
es_ES: Pulse <gui>Terminado</gui> y se creará el proyecto. Abra <file>src/main.c</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Debería ver algo de código que comience con las líneas:

note: (itstool) path: section/p
en: This is a very basic C++ code setting up GTKmm. More details are given below; skip this list if you understand the basics:
es_ES: Esto es una configuración de código C++ usando GTKmm. Se ofrecen más detalles a continuación; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (STL). Functions from these libraries are used in the rest of the code.
es_ES: Las tres líneas <code>#include</code> en la parte superior incluyen las bibliotecas <code>config</code> (definiciones últiles para construcción con autoconf), <code>gtkmm</code> (interfaz de usuario) <code>iostream</code> (STL). Las funciones de estas bibliotecas se usan en el resto del código.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above) and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
es_ES: La función <code>main</code> crea una ventana nueva abriendo un archivo de GtkBuilder (<file>src/guitar-tuner.ui</file>, definido unas pocas líneas más arriba) y mostrándolo en una ventana. El archivo de GtkBuilder contiene una descripción de la interfaz de usuario y de todos sus elementos. Puede usar el editor Anjuta para diseñar interfaces de usuario con GtkBuilder.

note: (itstool) path: item/p
en: Afterwards it calls a few functions which set up and then run the application. The <code>kit.run</code> function starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses).
es_ES: Después llama a algunas funciones que configuran y después ejecutan la aplicación. La función <code>kit.run</code> inicia el bucle principal de GTKmm, que ejecuta la interfaz de usuario y empieza a escuchar eventos (como pulsaciones del ratón y del teclado).

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string. Also change the <gui>Name</gui> property to <gui>button_E</gui>. This is the name we will refer to the widget later in code.
es_ES: Mientras el botón esté seleccionado, cambie la propiedad <gui>Etiqueta</gui> en la pestaña <gui>Widgets</gui> a <gui>E</gui>. Esta será la cuerda Mi grave. Cambie también la propiedad <gui>Nombre</gui> a <gui>button_E</gui>. Este es el nombre al que se hará referencia más tarde en el código.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the labels <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em> and the names <em>button_A</em>, etc.
es_ES: Repita los pasos anteriores para el resto de botones, añadiendo las 5 cuerdas restantes con las etiquetas <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, y <em>e</em> y los nombres <em>boton_A</em>, etc.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and close the file.
es_ES: Guarde el diseño de la IU (pulsando <guiseq><gui>Archivo</gui><gui>Guardar</gui></guiseq>) y cierre el archivo.

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones. GStreamermm is the C++ binding to GStreamer which we will use here.
es_ES: GStreamer es el entorno multimedia de trabajo de GNOME: puede usarlo para reproducir, grabar y procesar vídeo, sonido, flujos de la cámara web y similares. En este caso, se usará para generar tonos de frecuencia única. GStreamermm es la implementación de GStreamer en C++ que se usará aquí.

note: (itstool) path: section/title
en: Using GStreamermm
es_ES: Usar GStreamermm

note: (itstool) path: section/p
en: To use GStreamermm, it has to be initialised. We do that by adding the following line of code next to the <code>Gtk::Main kit(argc, argv);</code> line in <file>main.cc</file>:
es_ES: Para usar GStreamermm, se debe inicializar. Esto se hace añadiendo la siguiente línea de código junto a la línea <code>Gtk::Main kit(argc, argv);</code> en <file>main.cc</file>:

note: (itstool) path: section/p
en: While we are on it, also make sure that the <file>gstreamermm.h</file> is included in <file>main.cc</file> properly.
es_ES: Mientras está con esto, asegúrese de que <file>gstreamermm.h</file> se incluye correctamente en <file>main.cc</file>.

note: (itstool) path: section/p
en: To simplify the handling of the pipeline we will define a helper class <code>Sound</code>. We do that in <file>main.cc</file> in order to keep this example simple, whereas you might usually want to use a separate file:
es_ES: Para simplificar el manejo de la tubería, se definirá una clase <code>Sound</code> auxiliar. Esto se hace en <file>main.cc</file> para mantener la sencillez de este ejemplo, pero puede querer usar un archivo aparte.

note: (itstool) path: section/p
en: The code has the following purpose:
es_ES: El código tiene el propósito siguiente:

note: (itstool) path: item/p
en: In the constructor, source and sink GStreamer elements (<code>Gst::Element</code>) are created, and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output). After the elements have been added to the pipeline and linked together, the pipeline is ready to run.
es_ES: En el constructor se crean los elementos «fuente» y «sumidero» de GStreamer (<code>GstElement</code>), y un elemento de tubería (que se usará como contenedor de los otros dos elementos). A la tubería se le asigna el nombre «note»; la fuente se llama «source» y se asocia a la fuente <code>audiotestsrc</code> y el sumidero se llama «output» y se asocia con el sumidero <code>autoaudiosink</code> (la salida de la tarjeta de sonido predeterminada). Después de añadir los elementos a la tubería y de enlazarlos unos con otros, la tubería está lista para ejecutarse.

note: (itstool) path: item/p
en: <code>start_playing</code> sets the source element to play a particular frequency and then starts the pipeline so the sound actually starts playing. As we don't want to have the annoying sound for ages, a timeout is set up to stop the pipeline after 200 ms by calling <code>stop_playing</code>.
es_ES: <code>start_playing</code> configura el elemento fuente para reproducir una frecuencia determinada e inicia la tubería, por lo que el sonido empieza a reproducirse. Como no se quiere reproducir un sonido molesto durante mucho tiempo, se establece un tiempo de expiración para detener la tubería después de 200 ms, llamando a <code>stop_playing</code>.

note: (itstool) path: item/p
en: In <code>stop_playing</code> which is called when the timeout has elapsed, the pipeline is stopped and as such there isn't any sound output anymore. As GStreamermm uses reference counting through the <code>Glib::RefPtr</code> object, the memory is automatically freed once the <code>Sound</code> class is destroyed.
es_ES: En <code>stop_playing</code> a la que se llama cuando ha transcurrido el tiempo, se detiene la tubería y como tal, ya no habrá ninguna salida de sonido. Ya que GStreamermm usa una referencia continua a traves del objeto <code>Glib::RefPtr</code>, la memoria se libera automáticamente una vez que la clase <code>Sound</code> se ha destruido.

note: (itstool) path: section/title
en: Connecting the signals
es_ES: Conectar las señales

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. That means that we have to connect to the signal that is fired when the user clicks the button. We also want to provide information to the called function which tone to play. GTKmm makes that quite easy as we can easily bind information with the <em>sigc</em> library.
es_ES: Se quiere reproducir el sonido correcto cuando el usuario pulsa un botón. Lo que significa que hay que conectar la señal disparada cuando el usuario pulsa el botón. También se quiere proporcionar información a la función llamada dependiendo del tono que reproducir. GTKmm hace que esto sea fácil ya que se puede vincular información con la biblioteca <em>sigc</em>.

note: (itstool) path: section/p
en: The function that is called when the user clicks a button can be pretty simple, as all the interesting stuff is done in the helper class now:
es_ES: La función a la que se llama cuando el usuario pulsa un botón puede ser muy sencilla, ya que todo lo interesante se hace ahora en la clase auxiliar:

note: (itstool) path: section/p
en: It only calls the helper class we defined before to play the correct frequencies. With some more clever code we would also have been able to directly connect to the class without using the function but we will leave that to use as an exercise.
es_ES: Sólo llama a la clase auxiliar definida anteriormente para reproducir las frecuencias correctas. Con algo de código más inteligente, se podría haber conectado directamente con la clase sin usar la función, pero esto se dejará como ejercicio.

note: (itstool) path: section/p
en: The code to set up the signals should be added to the <code>main()</code> function just after the <code>builder-&gt;get_widget("main_window", main_win);</code> line:
es_ES: El código para configurar las señales de debe añadir a la función <code>main()</code>, justo después de la línea <code>builder-&gt;get_widget("main_window", main_win);</code>:

note: (itstool) path: item/p
en: At first we create an instance of our helper class that we want to use now and declare a variable for the button we want to connect to.
es_ES: En primer lugar, se crea una instancia de la clase auxiliar que se quiere usar ahora y se declara una variable para el botón al que se quiere conectar.

note: (itstool) path: item/p
en: Next, we receive the button object from the user interface that was created out of the user interface file. Remember that <em>button_E</em> is the name we gave to the first button.
es_ES: Después se recibe el objeto de botón desde la interfaz de usuario que se creó fuera del archivo de la interfaz de usuario. Recuerde que <em>button_E</em> es el nombre que se dio al primer botón.

note: (itstool) path: item/p
en: Finally we connect the <em>clicked</em> signal. This isn't fully straightforward because this is done in a fully type-safe way and we actually want to pass the frequency and our helper class to the signal handler. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> creates a <em>slot</em> for the <code>on_button_clicked</code> method we defined above. With <code>sigc::bind</code> we are able to pass additional arguments to the slot and in this case we pass the frequency (as double) and our helper class.
es_ES: Por último, se conecta la señal <em>clicked</em>. Esto no es del todo sencillo porque se hace de manera completamente segura para el tipo, y actualmente se quiere pasar la frecuencia y la clase auxiliar al gestor de la señal. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> crea un <em>slot</em> para el método <code>on_button_clicked</code> definido anteriormente. Con <code>sigc::bind</code> es posible pasar argumentos adicionales al slot y, en este caso, se pasa la frecuencia (como «double») y la clase auxiliar.

note: (itstool) path: section/p
en: Now that we have set up the <em>E</em> button we also need to connect the other buttons according to their frequencies: 440 for A, 587.33 for D, 783.99 for G, 987.77 for B and 1318.5 for the high E. This is done in the same way, just passing a different frequency to the handler.
es_ES: Ahora que se ha establecido el botón <em>E</em>, se debe conectar el resto de botones de acuerdo con sus frecuencias: 440 para A, 587.33 para D, 783.99 para G, 987.77 para B y 1318.5 para E agudo. Esto se hace de la misma manera, pasando simplemente una frecuencia diferente al gestor.

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Run</gui></guiseq> to start the application.
es_ES: Todo el código debería estar listo para ejecutarse. Pulse <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> para construir todo otra vez y pulse <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> para iniciar la aplicación.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.cc">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="guitar-tuner/guitar-tuner.cc">código de referencia</link>.

note: (itstool) path: section/title
en: Further Reading
es_ES: Lecturas adicionales

note: (itstool) path: section/p
en: Many of the things shown above are explained in detail in the <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">GTKmm book</link> which also covers a lot more key concept for using the full power of GTKmm. You might also be interested in the <link href="http://library.gnome.org/devel/gstreamermm/">GStreamermm reference documentation</link>.
es_ES: La mayor parte de lo que se ha visto anteriormente se explica detalladamente en el <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">libro de GTKmm</link> que también cubre muchos más conceptos clave para usar todo el potencial de GTKmm. Es posible que también le interese la <link href="http://library.gnome.org/devel/gstreamermm/">documentación de referencia de GStreamermm</link>.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (JavaScript)
es_ES: Afinador de guitarra (JavaScript)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME.
es_ES: Usar GTK+ y GStreamer para construir un sencillo afinador de guitarra para GNOME.

note: (itstool) path: synopsis/p
en: In this tutorial we'll construct a small application, Guitar Tuner, using JavaScript and GTK+ and GStreamer. To do and run all the code examples yourself, you need an editor to write code in, terminal and GNOME 3. or higher installed into your computer.
es_ES: En este tutorial se construirá una pequeña aplicación, «Afinador de guitarra», usando JavaScript, GTK+ y GStreamer. Para escribirla y poder ejecutar los ejemplos, necesitará un editor en el que escribir el código, una terminal y GNOME 3 o superior instalado en su equipo.

note: (itstool) path: item/p
en: <link xref="#gstreamer">GStreamer pipelines</link>
es_ES: <link xref="#gstreamer">Tuberías de GStreamer</link>

note: (itstool) path: item/p
en: <link xref="#script">Script for running the application</link>
es_ES: <link xref="#script">Script para ejecutar la aplicación</link>

note: (itstool) path: item/p
en: <link xref="#imports">Libraries to import</link>
es_ES: <link xref="#imports">Bibliotecas que importar</link>

note: (itstool) path: item/p
en: <link xref="#mainwindow">Creating the main window for the application</link>
es_ES: <link xref="#mainwindow">Crear la ventana principal de la aplicación</link>

note: (itstool) path: item/p
en: <link xref="#buttons">Buttons for the tunes</link>
es_ES: <link xref="#buttons">Botones para las melodías</link>

note: (itstool) path: item/p
en: <link xref="#playSound">Making the sounds with GStreamer</link>
es_ES: <link xref="#playSound">Crear sonidos con GStreamer</link>

note: (itstool) path: item/p
en: <link xref="#connecting">Connecting buttons to playSound</link>
es_ES: <link xref="#connecting">Conectar los botones a playSound</link>

note: (itstool) path: item/p
en: <link xref="#guitarjs">The whole program</link>
es_ES: <link xref="#guitarjs">El programa completo</link>

note: (itstool) path: item/p
en: <link xref="#terminal">Running the application form Terminal</link>
es_ES: <link xref="#terminal">Ejecutar la aplicación desde la terminal</link>

note: (itstool) path: page/p
en: After reading this tutorial, you should see this in your screen:
es_ES: Después de leer este tutorial, debería ver esto en su pantalla:

note: (itstool) path: section/title
en: Script for running the application
es_ES: Script para ejecutar la aplicación

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
es_ES: Esta línea indica cómo ejecutar el script. Debe ser la primera línea del código y debe ser ejecutable. Para obtener permisos de ejecución vaya a la terminal y ejecute lo siguiente en la carpeta adecuada: chmod +x nombrescript. También puede usar el gestor de archivo. Simplemente vaya a la carpeta donde está el código, pulse con el botón derecho sobre el archivo de código y elija «Propiedades», pulse en la pestaña «Permisos» y marque la casilla para permitir ejecutar el archivo como un programa.

note: (itstool) path: section/p
en: In order to have a working program we need to import a few GObject Introspection -libraries to our use. For working UI, we need Gtk and for Gstreamer to work we need Gst. These are imported in the beginning so we have them at use everywhere. Also in the beginning we import a construct Mainloop to handle the timeout to be used with the tuning sounds.
es_ES: Para que el programa funcione se debe importar una biblioteca de introspección de GObject. Para que funcione la IU se necesita GTK+ y, para que funcione GStreamer se necesita GST. Estas bibliotecas se importan al inicio, por lo que están en uso en todos los sitios. También, al principio, se importa el constructor Mainloop para gestionar el tiempo de espera que usar para los tonos de afinación.

note: (itstool) path: section/title
en: Creating the main window for the application
es_ES: Crear la ventana principal de la aplicación

note: (itstool) path: section/p
en: Importing Gtk and Gst is not enough, we need to initialize them in order to get them working. When Gtk and Gst are up and running we need to create the window for the application. Later we are going to put all the buttons for making sounds inside this window. In order to get the window showing, we need to tell it to show and we need also to run the code with the Gtk.main()
es_ES: Importar GTK+ y Gst no es suficiente. Se necesita inicializarlos para que funcionen juntos. Cuando GTK+ y Gst estén funcionando, se debe crear la ventana para la aplicación. Más adelante se pondrán los botones para reproducir sonidos en esta ventana. Para que la ventana se muestre, es necesario decirle que se muestre y se debe ejecutar el código con la función Gtk.main().

note: (itstool) path: section/title
en: Buttons for the tunes
es_ES: Botones para los tonos

note: (itstool) path: section/p
en: Because Gtk.Window can only contain a single widget, we need to create something under it to be able to add all the necessary buttons inside it. In this example we use Buttonbox. After creating the Buttonbox we create buttons with necessary labels. After we have the buttons we need to add them to the Buttonbox and the Buttonbox must be added to the Gtk.Window and everything in the Buttonbox must be shown.
es_ES: Dado que Gtk.Window sólo puede contener un único widget, se debe crear algo que pueda contener todos los botones necesarios. En este ejemplo se usa Buttonbox. Después de crear la Buttonbox, se crean los botones con las etiquetas necesarias. Una vez creados los botones necesarios, es necesario añadirlos a la Buttonbox, que se debe añadir a la Gtk.Window, y se mostrará todo el contenido de la Buttonbox.

note: (itstool) path: section/p
en: After this stage you should have a window appearing to your screen showing 6 buttons. Right now the buttons don't do anything and we shall address that issue later. Before we can connect the button signals to something we need to code that something first.
es_ES: Después de esto debería tener en su pantalla una ventana con 6 botones. De momento, los botones no hacen nada, esto se corregirá más adelante. Antes de poder conectar las señales de los botones a algo, es necesario codificar eso primero.

note: (itstool) path: section/title
en: Making the sounds with GStreamer
es_ES: Crear sonidos con GStreamer

note: (itstool) path: section/p
en: The first thing we need to do is decide what tunes we want to make when we push a button. The frequencies list takes care of that. After that we get to actually making the sounds with the function playSound. For function playSound we give as an input a frequency (that we just defined in the frequencies variable). First thing we need to construct is a pipeline, a source and a sink. For the source we set the frequency. To the pipeline we add both the source and the sink and then we tell it to keep playing. As a last thing we use the const Mainloop to get the pipeline to stop after a 500ms.
es_ES: Lo primero que se debe hacer es decidir qué tonos se quieren reproducir con la función playSound. A la función playSound se le pasa como argumento una frecuencia (que se ha definido en la lista de variables). Lo primero que se debe hacer es construir una tubería, con una fuente y un sumidero. Para la fuente se establece la frecuencia. A la tubería se añaden la fuente y el sumidero y se indica que la reproduzca. El último paso es usar la constante Mainloop para hacer que la tubería se pare después de 500ms.

note: (itstool) path: section/p
en: Now we have the method of playing a tune when clicking a button. Next well make the connections between pushing a button and playing the correct sound from that button.
es_ES: Ahora ya funciona el método para reproducir un sonido cuando se pulsa un botón. Lo siguiente es hacer las conexiones para que al pulsar un botón se reproduzca el sonido correcto para ese botón.

note: (itstool) path: section/title
en: Connecting buttons to playSound
es_ES: Conectar los botones a playSound

note: (itstool) path: section/p
en: The method of connecting button clicks to playSound with the correct tune is by using the connect method of the button widget. So we choose a button to be connected and type <code>E.connect("clicked", function(){playSound(frequencies.E);});</code> The <code>connect</code> tells that when pushing E, something should happen. The <code>clicked</code> tells the type of the signal happening to E and then in the <code>function(){};</code> we call playSound with the correct note that should be associated with the button.
es_ES: La forma de conectar pulsaciones del ratón a «playSound» con la melodía correcta es usar el método «connect» del widget botón. Por lo que se elije un botón que conectar y se introduce <code>E.connect("clicked", function(){playSound(frequencies.E);});</code> El <code>connect</code> indica que cuando se pulsa «E», algo debe pasar. El <code>clicked</code> indica el tipo de acción sucediendo sobre «E» y después en la <code>function(){};</code> se llama a «playSound» con la melodía correcta que debe asociarse al botón.

note: (itstool) path: section/title
en: The whole program
es_ES: El programa completo

note: (itstool) path: section/p
en: So this is what all the parts combined looks like. When running this code, you should be able to tune your guitar (if you have correctly calibrated speakers).
es_ES: A esto se parecen todas las partes combinadas. Al ejecutar este código, debería poder afinar su guitarra (si tiene sus altavoces calibrados correctamente).

note: (itstool) path: section/title
en: Running the application form Terminal
es_ES: Ejecutar la aplicación desde la terminal

note: (itstool) path: section/p
en: To run this application open Terminal, go to the folder where your application is stored and then run
es_ES: Para ejecutar esta aplicación ,abra una terminal, vaya a la carpeta donde está la aplicación y ejecute

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.js">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="guitar-tuner/guitar-tuner.js">código de referencia</link>.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (Python)
es_ES: Afinador de guitarra (Python)

note: (itstool) path: item/p
en: Basic knowledge of the Python programming language
es_ES: Conocimiento básico del lenguaje de programación Python

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
es_ES: Seleccione <gui>PyGTK (automake)</gui> en la pestaña <gui>Python</gui>, pulse <gui>Continuar</gui>, y rellene los detalles en las siguientes páginas. Use <file>afinador-guiterra</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/guitar_tuner.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/afinador-guitarra.py</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Debería ver algo de código que comience con las líneas:

note: (itstool) path: section/title
en: Run the code for the first time
es_ES: Ejecutar el código por primera vez

note: (itstool) path: section/p
en: Most of the code in the file is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
es_ES: La mayor parte del código del archivo se usa como plantilla. Carga una ventana (vacía) desde el archivo de descripción de interfaz de usuario y la muestra. Se ofrecen más detalles a continuación; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The <code>import</code> lines at the top include the tell Python to load the user interface and system libraries needed.
es_ES: Las líneas <code>import</code> en la parte superior indican a Python que cargue la interfaz de usuario y las bibliotecas del sistema necesarias.

note: (itstool) path: item/p
en: A class is declared that will be the main class for our application. In the <code>__init__</code> method the main window is loaded from the GtkBuilder file (<file>src/guitar-tuner.ui</file>) and the signals are connected.
es_ES: Se declara una clase que estará en la clase principal de la aplicación. En el método <code>__init__</code> se carga la ventana principal desde el archivo de GtkBuilder (<file>src/guitar-tuner.ui</file>) y se conectan las señales.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> method is called (and quits the app) when you close the window.
es_ES: Conectar señales es como se define lo que pasa cuando pulsa un botón, o cuando ocurre algún otro evento. Aquí, se llama al método <code>destroy</code> (y se sale de la aplicación) cuando cierra la ventana.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a Python application. It just creates an instance of the main class and starts the main loop to bring up the window.
es_ES: La función <code>main</code> se ejecuta de manera predeterminada cuando inicia una aplicación Python. Simplemente crea una instancia de la clase principal e inicia el bucle principal para mostrar la ventana.

note: (itstool) path: section/p
en: This code is ready to be used, so you can run it by clicking <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>.
es_ES: Este código está listo para usarse, por lo que puede ejecutarlo pulsando <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq>.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the right, and the palette of available widgets is on the left.
es_ES: El archivo de GtkBuilder contiene una descripción de la interfaz de usuario (IU). Para editar la interfaz de usuario, abra <file>src/guitar_tuner.ui</file>. Esto cambiará al diseñador de interfaces. La ventana de diseño está en el centro; los widgets y sus propiedades están a la derecha, y la paleta de los widgets disponibles está a la izquierda.

note: (itstool) path: section/title
en: Write the signal handler
es_ES: Escribir el gestor de señales

note: (itstool) path: section/p
en: To do this, open <file>guitar_tuner.py</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file inside the class. The following code will be added to your source file:
es_ES: Para hacer esto, abra <file>guitar_tuner.py</file> mientras el archivo de la interfaz de usuario está abierto. Cambie a la pestaña <gui>Señales</gui>, que ya ha usado para establecer el nombre de la señal. Ahora vaya a la fila en la que estableció la señal <gui>clicked</gui> y arrástrela al archivo de código fuente, dentro de la clase principal. Se añadirá el siguiente código a su archivo de código fuente:

note: (itstool) path: section/p
en: This signal handler has two arguments: the usual Python class pointer, and the <code>Gtk.Button</code> that called the function.
es_ES: Este gestor de la señal tiene dos argumentos: el puntero de clase Python habitual y el <code>Gtk.Button</code> que llamó a la función.

note: (itstool) path: section/p
en: Change the import line in <file>guitar_tuner.py</file>, just at the beginning to :
es_ES: Cambie la línea de importación en <file>afinador_guitarra.py</file>, justo al principio, por:

note: (itstool) path: section/p
en: The <code>Gst</code> includes the GStreamer library. You also need to initialise GStreamer properly which is done in the <code>main()</code> method with this call added above the <code>app = GUI()</code> line:
es_ES: El <code>Gst</code> incluye la biblioteca GStreamer. También debe debe inicializar GStreamer correctamente, lo que se ha hecho en el método <code>main()</code> con esta llamada añadida encima de la línea <code>app = GUI()</code>:

note: (itstool) path: section/p
en: Then, copy the following function into the class in <file>guitar_tuner.py</file> somewhere:
es_ES: Después, copie la siguiente función en la de <file>guitar_tuner.py</file>, en cualquier sitio:

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
es_ES: Las tres primeras líneas crean los elementos «fuente» y «sumidero» de GStreamer y un elemento de tubería (que se usará como contenedor de los otros dos elementos). A la tubería se le asigna el nombre «note»; la fuente se llama «source» y se asocia a la fuente <code>audiotestsrc</code> y el sumidero se llama «output» y se asocia con el sumidero <code>autoaudiosink</code> (la salida de la tarjeta de sonido predeterminada).

note: (itstool) path: item/p
en: The call to <code>source.set_property</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which was passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
es_ES: La llamada a <code>source.set_property</code> establece la propiedad <code>freq</code> del elemento fuente a <code>frequency</code>, que se pasa como argumento a la función <code>play_sound</code>. Esto sólo es la frecuencia de la nota en Hercios; más adelante se definirán algunas frecuencias útiles.

note: (itstool) path: item/p
en: The next two lines call <code>pipeline.add</code>, putting the source and sink into the pipeline. The pipeline can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by calling its <code>add</code> method repeatedly.
es_ES: Las dos siguientes líneas llaman a <code>pipeline.add</code>, poniendo la fuente y el sumidero en la tubería. La tubería puede contener muchos otros elementos de GStreamer. En general, puede añadir tantos elementos como quiera a una tubería llamando al método <code>add</code> repetidamente.

note: (itstool) path: item/p
en: Next <code>pipeline.set_state</code> is used to start playback, by setting the state of the pipeline to playing (<code>Gst.State.PLAYING</code>).
es_ES: El siguiente <code>pipeline.set_state</code> se usar para iniciar la reproducción, estableciendo el estado de la tubería a «playing» (<code>Gst.State.PLAYING</code>).

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>GObject.timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>False</code>.
es_ES: No se quiere reproducir un tono molesto para siempre, por lo que lo último que <code>play_sound</code> hace es llamar a <code>GObject.timeout_add</code>. Esto establece un tiempo de expiración para detener el sonido; espera <code>LENGTH</code> milisegundos antes de llamar a la función <code>pipeline_stop</code>, y se queda llamando a <code>pipeline_stop</code> hasta que devuelve <code>False</code>.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>GObject.timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
es_ES: Ahora se escribirá el código de la función <code>pipeline_stop</code>, llamada por <code>GObject.timeout_add</code>. Inserte el código siguiente <em>encima</em> de la función <code>play_sound</code>:

note: (itstool) path: section/p
en: You need to define the <code>LENGTH</code> constant inside the class, so add this code at the beginning of the main class:
es_ES: Necesita definir la constante <code>LENGTH</code> dentro de la clase, por lo que debe añadir este código al principio de la clase principal:

note: (itstool) path: section/p
en: The call to <code>pipeline.set_state</code> stops the playback of the pipeline.
es_ES: La llamada a <code>pipeline.set_state</code> detiene la reproducción de la tubería.

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the beginning of the main class) inside a dictionary so we can easily map them to the names of the strings:
es_ES: Se quiere reproducir el sonido correcto cuando un usuario pulsa un botón. En primer lugar, se necesita conocer las frecuencias de las seis cuerdas de la guitarra, que están definidas (al principio de la clase principal) dentro de un diccionario, por lo que se pueden mapear fácilmente con los nombres de las cuerdas:

note: (itstool) path: section/p
en: The button that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>button.get_child</code>, and then get the text from that label using <code>label.get_label</code>.
es_ES: El botón que se ha pulsado se pasa como argumento (<code>button</code>) a <code>on_button_clicked</code>. Se puede obtener la etiqueta de ese botón usando <code>button.get_child</code>, y obteniendo entonces el texto de esa etiqueta usando <code>label.get_label</code>.

note: (itstool) path: section/p
en: The label text is then used as a key for the dictionary and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
es_ES: La etiqueta de texto se usa como clave para el diccionario, y se llama a <code>play_sound</code> con la frecuencia correspondiente a esa nota. Esto reproduce el tono; el afinador de guitarra ya está funcionando.

note: (itstool) path: section/title
en: Run the application
es_ES: Ejecutar la aplicación

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application. Enjoy!
es_ES: Todo el código debería estar listo para ejecutarse. Pulse <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> para iniciar la aplicación y disfrute.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.py">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="guitar-tuner/guitar-tuner.py">código de referencia</link>.

note: (itstool) path: info/desc
en: Use <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> and <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
es_ES: Usar <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> y <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> para construir una sencilla aplicación de afinador de guitarra para GNOME. Muestra cómo usar el diseñador de interfaces.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which plays tones that you can use to tune a guitar. You will learn how to:
es_ES: En este tutorial se va a hacer un programa que reproduce tonos que puede usar para afinar su guitarra. Aprenderá a:

note: (itstool) path: item/p
en: Set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
es_ES: Configurar un proyecto básico usando el <link xref="getting-ready">EID Anjuta</link>.

note: (itstool) path: item/p
en: Create a simple GUI with <app>Anjuta</app>'s UI designer.
es_ES: Crear una IGU sencilla con el diseñador de IU de <app>Anjuta</app>.

note: (itstool) path: item/p
en: Use the <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> library to play sounds.
es_ES: Usar la biblioteca <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> para reproducir sonidos.

note: (itstool) path: item/p
en: Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial">Vala</link> programming language.
es_ES: Conocimiento básico del lenguaje de programación <link href="https://live.gnome.org/Vala/Tutorial">Vala</link>.

note: (itstool) path: item/p
en: An installed copy of <app>Anjuta</app>.
es_ES: Una copia instalada de <app>Anjuta</app>.

note: (itstool) path: section/title
en: Create a project in <app>Anjuta</app>
es_ES: Crear un proyecto en <app>Anjuta</app>

note: (itstool) path: item/p
en: Start <app>Anjuta</app> and click <gui>Create a new project</gui> or <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
es_ES: Inicie <app>Anjuta</app> y pulse <gui>Crear un proyecto nuevo</gui> o <guiseq><gui>Archivo</gui><gui>Nuevo</gui><gui>Proyecto</gui></guiseq> para abrir el asistente de proyectos.

note: (itstool) path: item/p
en: Click on the <gui>Vala</gui> tab and select <gui>GTK+ (Simple)</gui>. Click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
es_ES: Pulse en la pestaña <gui>Vala</gui> y seleccione <gui>GTK+ (simple)</gui>. Pulse <gui>Continuar</gui>, y rellene los detalles en las siguientes páginas. Use <file>afinador-guitarra</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> from the list to include the GStreamer library in your project. Click <gui>Continue</gui>
es_ES: Asegúrese de que <gui>Configurar paquetes externos</gui> está <gui>activada</gui>. En la siguiente página, seleccione <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> de la lista para incluir la biblioteca GStreamer en su proyecto. Pulse <gui>Continuar</gui>

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/guitar_tuner.vala</file> by double-clicking on it. You should see some code which starts with the lines:
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/guitar_tuner.vala</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui> pulsando dos veces sobre él. Debería ver algo de código que comience con las líneas:

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and displays it. More details are given below; you may choose to skip this list if you understand the basics:
es_ES: El código carga una ventana (vacía) desde el archivo de descripción de interfaz de usuario y la muestra. Se ofrecen más detalles a continuación; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The two <code>using</code> lines import namespaces so we don't have to name them explicitly.
es_ES: Las dos líneas <code>using</code> importan espacios de nombres, por lo que no hay que nombrarlas explícitamente.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. This GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
es_ES: El constructor de la clase <code>Main</code> crea una ventana nueva abriendo un archivo de GtkBuilder (<file>src/guitar-tuner.ui</file>, definido unas pocas líneas más arriba), conectando sus señales y mostrándolo en una ventana. El archivo de GtkBuilder contiene una descripción de una interfaz de usuario y de todos sus elementos. Puede usar el editor Anjuta para diseñar interfaces de usuario con GtkBuilder.

note: (itstool) path: note/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>on_destroy</code> function is called (and quits the app) when you close the window.
es_ES: Conectar señales es como se define lo que pasa cuando pulsa un botón, o cuando ocurre algún otro evento. Aquí, se llama a la función <code>on_destroy</code> (y se sale de la aplicación) cuando cierra la ventana.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
es_ES: La función estática <code>main</code> se ejecuta de manera predeterminada cuando inicia una aplicación en Vala. Llama a algunas funciones que crean la clase «Main» y configuran y ejecutan la aplicación. La función <code>Gtk.main</code> inicia el bucle principal de GTK+, que ejecuta la interfaz de usuario y empieza a escuchar eventos (como pulsaciones del ratón y del teclado).

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>). When you do this, a dialog will appear. Change the <gui>Configuration</gui> to <gui>Default</gui> and then click <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
es_ES: Este código está listo para usarse, por lo que puede compilarlo pulsando <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> (o pulsando <keyseq><key>Mayús</key><key>F7</key></keyseq>). Cuando lo haga, aparecerá un diálogo. Cambie la <gui>Configuración</gui> a <gui>Predeterminada</gui> y pulse <gui>Ejecutar</gui> para configurar la carpeta de construcción. Sólo tendrá que hacer esto una vez, para la primera construcción.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file <file>src/guitar_tuner.ui</file> defined at the top of the class. To edit the user interface, open <file>src/guitar_tuner.ui</file> by double-clicking on it in the <gui>Project</gui> or <gui>Files</gui> section. This will switch to the interface designer. The design window is in the center; <gui>Widgets</gui> and the widget properties are on the right, and the <gui>Palette</gui> of available widgets is on the left.
es_ES: El archivo de GtkBuilder <file>src/guitar_tuner.ui</file> contiene una descripción de la interfaz de usuario (IU), definida en la parte superior de la clase. Para editar la interfaz de usuario, abra <file>src/guitar_tuner.ui</file> pulsando dos veces sobre el archivo en las secciones <gui>Proyecto</gui> or <gui>Archivos</gui>. Esto cambiará al diseñador de interfaces. La ventana de diseño está en el centro; los <gui>Widgets</gui> y sus propiedades están a la izquierda, y la <gui>Paleta</gui> de los widgets disponibles está a la derecha.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical GtkButtonBox here to assign six GtkButtons, one for each of the six guitar strings.
es_ES: La distribución de cualquier IU en GTK+ se organiza usando cajas y tablas. Aquí se usará una GtkButtonBox vertical para asignar seis GtkButtons, uno para cada una de las cuerdas de la guitarra.

note: (itstool) path: item/p
en: In the <gui>Palette</gui> tab, from the <gui>Containers</gui> section, select a <gui>Button Box</gui> (GtkButtonBox) by clicking on the icon. Then click on the design window in the center to place it into the window. A dialog will display where you can set the <gui>Number of items</gui> to <input>6</input>. Then click <gui>Create</gui>.
es_ES: En la pestaña <gui>Paleta</gui>, en la sección <gui>Contenedores</gui>, seleccione una <gui>Caja de botones</gui> (GtkButtonBox) pulsando sobre el icono. Pulse en el centro del diseño de la ventana para colocarla en la ventana. Se mostrará un diálogo donde puede establecer el <gui>Número de elementos</gui> a <input>6</input>. Luego pulse en <gui>Crear</gui>.

note: (itstool) path: note/p
en: You can also change the <gui>Number of elements</gui> and the <gui>Orientation</gui> in the <gui>General</gui> tab on the right.
es_ES: También puede cambiar el <gui>Número de elementos</gui> y la <gui>Orientación</gui> en la pestaña <gui>General</gui> a la derecha.

note: (itstool) path: item/p
en: Now, from the <gui>Control and Display</gui> section of the <gui>Palette</gui> choose a <gui>Button</gui> (GtkButton) by clicking on it. Place it into the first section of the GtkButtonBox by clicking in the first section.
es_ES: Ahora, desde la sección <gui>Controlar y mostrar</gui> de la <gui>Paleta</gui> elija un <gui>Botón</gui> (GtkButton) pulsando sobre él. Sitúelo en la primera sección de la GtkButtonBox pulsando sobre ella.

note: (itstool) path: item/p
en: While the button is still selected, scroll down in the <gui>General</gui> tab on the right to the <gui>Label</gui> property, and change it to <gui>E</gui>. This will be the low E guitar string.
es_ES: Mientras el botón esté seleccionado, cambie la propiedad <gui>Etiqueta</gui> en la pestaña <gui>General</gui> a <gui>E</gui>. Esta será la cuerda Mi grave de la guitarra.

note: (itstool) path: note/p
en: The <gui>General</gui> tab is located in the <gui>Widgets</gui> section on the right.
es_ES: La pestaña <gui>General</gui> se encuentra en la sección <gui>Widgets</gui> de la derecha.

note: (itstool) path: item/p
en: Click on the <gui>Signals</gui> tab in the <gui>Widgets</gui> section on the right, and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>main_on_button_clicked</code> in the <gui>Handler</gui> column and press the <key>Enter</key>.
es_ES: Cambie a la pestaña <gui>Señales</gui> dentro de la sección <gui>Widgets</gui> a la derecha y busque la señal <code>clicked</code> del botón. Puede usar esto para conectar un gestor de señal al que se llamará cuando el usuario pulse el botón. Para hacer esto, pulse sobre la señal, escriba <code>main_on_button_clicked</code> en la columna <gui>Gestor</gui> y pulse <key>Intro</key>.

note: (itstool) path: section/p
en: This section will show you how to create the code to produce sounds. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
es_ES: En esta sección se mostrará cómo crear el código para generar sonidos. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> es el entorno multimedia de trabajo de GNOME: puede usarlo para reproducir, grabar y procesar vídeo, sonido, flujos de la cámara web y similares. En este caso, se usará para generar tonos de frecuencia única.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>pipeline</em></link> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
es_ES: Conceptualmente. GStreamer funciona de la siguiente manera: puede crear una <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>tubería</em></link> que contenga varios elementos de procesado que van desde la <em>fuente</em> hasta el <em>sumidero</em> (salida). La fuente puede ser, por ejemplo, un archivo de imagen, un vídeo o un archivo de música, y la salida puede ser un widget o la tarjeta de sonido.

note: (itstool) path: section/p
en: In this example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
es_ES: En este ejemplo se usará un generador de tonos llamado <code>audiotestsrc</code> y se enviará la salida al dispositivo de sonido predeterminado del sistema, <code>autoaudiosink</code>. Sólo es necesario configurar la frecuencia del generador de tonos; esto es accesible a través de la propiedad <code>freq</code> de <code>audiotestsrc</code>.

note: (itstool) path: section/p
en: We need to add a line to initialize GStreamer; put the following code on the line above the <code>Gtk.init</code> call in the <code>main</code> function:
es_ES: Se debe añadir una línea para inicializar GStreamer; ponga el siguiente código encima de la llamada a <code>Gtk.init</code>, en la función <code>main</code>:

note: (itstool) path: section/p
en: Then, copy the following function into <file>guitar_tuner.vala</file> inside our <code>Main</code> class:
es_ES: Después, copie la siguiente función en <file>guitar_tuner.vala</file> dentro de la clase <code>Main</code>:

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), and a <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">pipeline element</link> (which will be used as a container for the other two elements). Those are class variables so they are defined outside the method. The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
es_ES: Las cinco primeras líneas crean los elementos «fuente» y «sumidero» de GStreamer (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), y un <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">elemento de tubería</link> (que se usará como contenedor de los otros dos elementos). Son variables de clase, por lo que se definen fuera del método. A la tubería se le asigna el nombre «note»; la fuente se llama «source» y se asocia a la fuente <code>audiotestsrc</code> y el sumidero se llama «output» y se asocia con el sumidero <code>autoaudiosink</code> (la salida de la tarjeta de sonido predeterminada).

note: (itstool) path: item/p
en: The call to <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed in as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
es_ES: La llamada a <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> establece la propiedad <code>freq</code> del elemento fuente a <code>frequency</code>, que se pasa como argumento a la función <code>play_sound</code>. Esto sólo es la frecuencia de la nota en Hercios; más adelante se definirán algunas frecuencias útiles.

note: (itstool) path: item/p
en: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> puts the source and sink into the pipeline. The pipeline is a <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more calls to <code>pipeline.add</code>.
es_ES: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> añade la fuente y el sumidero a la tubería. La tubería es un <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>, que es un elemento que puede contener otros muchos elementos de GStreamer. En general, puede añadir tantos elementos como quiera a una tubería añadiendo más argumentos a <code>pipeline.add</code>.

note: (itstool) path: item/p
en: Next, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> is used to connect the elements together, so the output of source (a tone) goes into the input of sink (which is then output to the sound card). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> is then used to start playback, by setting the <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">state of the pipeline</link> to playing (<code>Gst.State.PLAYING</code>).
es_ES: Ahora, el código <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> se usa para conectar los elementos entre sí, por lo que la salida de la fuente (un tono) va a la entrada del sumidero (y entonces sale por la tarjeta de sonido). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> se usa para iniciar la reproducción estableciendo el <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">estado de la tubería</link> a «playing» (<code>Gst.State.PLAYING</code>).

note: (itstool) path: item/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to add a <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>. This sets a timeout for stopping the sound; it waits for 200 milliseconds before calling a signal handler defined inline that stops and destroys the pipeline. It returns <code>false</code> to remove itself from the timeout, otherwise it would continue to be called every 200 ms.
es_ES: No se quiere reproducir un tono molesto para siempre, por lo que lo último que <code>play_sound</code> hace es añadir un <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>. Esto establece un tiempo de expiración para detener el sonido; espera 200 milisegundos antes de llamar a un gestor de la señal definido en línea y destruye la tubería. Devuelve<code>false</code> para quitarse a sí mismo del tiempo de expiración, ya que de otro modo, seguiría llamándose cada 200ms,

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. Actually we type <gui>main_on_button_clicked</gui> which tells the UI designer that this method is part of our <code>Main</code>. We need to add that function in the source file.
es_ES: El el diseñador de interfaces se hizo que todos los botones llamaran a la misma función, <gui>on_button_clicked</gui> cuando se pulsasen. Ahora se escribe <gui>main_on_button_clicked</gui>, lo que indica al diseñador de interfaces que este método es parte de la función <code>Main</code>. Se debe añadir esta función al archivo de código fuente.

note: (itstool) path: section/p
en: To do this, in the user interface file (guitar_tuner.ui) select one of the buttons by clicking on it, then open <file>guitar_tuner.vala</file> (by clicking on the tab in the center). Switch to the <gui>Signals</gui> tab on the right, which you used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag and drop it into to the source file at the beginning of the class. The following code will be added to your source file:
es_ES: Para hacer esto, en el archivo de interfaz del usuario (guitar_tuner.ui), seleccione uno de los botones pulsando sobre él, abra <file>guitar_tuner.vala</file> (pulsando en la pestaña en el centro). Cambie a la pestaña <gui>Señales</gui> de la derecha, que ya ha usado para establecer el nombre de la señal. Ahora vaya a la fila en la que estableció la señal <gui>clicked</gui> y arrástrela al archivo de código fuente, al principio de la clase. Se añadirá el siguiente código a su archivo de código fuente:

note: (itstool) path: note/p
en: You can also just type the code at the beginning of the class instead of using the drag and drop.
es_ES: También puede escribir simplemente el texto al principio de la clase en vez de arrastrar y soltar.

note: (itstool) path: section/p
en: This signal handler has only one argument: the <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> that called the function (in our case, always a <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).
es_ES: El gestor de la señal sólo tiene un argumento: el <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> que llama a la función (en este caso, siempre es un <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).

note: (itstool) path: section/title
en: Define the signal handler
es_ES: Definir el gestor de señales

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. For this, we flesh out the signal handler which we defined above, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
es_ES: Se quiere reproducir el sonido correcto cuando el usuario pulsa un botón. Para esto, se profundiza en el gestor de la señal definido anteriormente, <code>on_button_clicked</code>. Se podría haber conectado cada botón a un gestor de la señal diferente, pero esto había supuesto duplicar mucho código. En su lugar, se puede usar la etiqueta del botón para saber cuál de ellos se ha pulsado:

note: (itstool) path: section/p
en: The <code>Gtk.Button</code> that was clicked is passed as an argument (<code>sender</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>get_child</code>, and then get the text from that label using <code>get_label</code>.
es_ES: El <code>Gtk.Button</code> que se ha pulsado se pasa como argumento (<code>sender</code>) a <code>on_button_clicked</code>. Se puede obtener la etiqueta de ese botón usando <code>get_child</code>, y entonces obtener el texto de esa etiqueta usando <code>get_label</code>.

note: (itstool) path: section/p
en: The switch statement compares the label text to the notes that we can play, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
es_ES: La sentencia «switch» compara la etiqueta de texto con las notas que se pueden reproducir, y se llama a <code>play_sound</code> con la frecuencia correspondiente a esa nota. Esto reproduce el tono; el afinador de guitarra ya está funcionando.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.vala">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="guitar-tuner/guitar-tuner.vala">código de referencia</link>.

note: (itstool) path: section/title
en: Further reading
es_ES: Lectura complementaria

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link> and the <link href="http://valadoc.org/">Vala API Documentation</link>
es_ES: Para obtener más información sobre el lenguaje de programación Vala, puede querer revisar el <link href="http://live.gnome.org/Vala/Tutorial">Tutorial de Vala</link> y la <link href="http://valadoc.org/">documentación de la API de Vala</link>

note: (itstool) path: info/desc
en: Your first GNOME application!
es_ES: Su primera aplicación de GNOME

note: (itstool) path: page/title
en: 1. Hello, GNOME!
es_ES: 1. ¡Hola, GNOME!

note: (itstool) path: synopsis/p
en: This tutorial will show you how to write your first GNOME application in JavaScript. You will use JavaScript to write for GNOME the same way you would for the web. Afterwards, you will learn how to use "native" widgets, to write applications that look and feel like other GNOME apps.
es_ES: Este tutorial le mostrará cómo escribir su primera aplicación de GNOME en JavaScript. Usará JavaScript para escribir para GNOME de la misma manera que lo haría para la web. Después, aprenderá cómo usar widgets «nativos», para escribir aplicaciones que se ven como otras aplicaciones de GNOME.

note: (itstool) path: note/p
en: Have you gotten GNOME installed on your computer, and <link xref="set-up-gedit.js">gedit</link> set up to write code with? You'll want to do these things first.
es_ES: ¿Ya tiene GNOME instalado en su equipo, y <link xref="set-up-gedit.js">gedit</link> configurado para escribir código? Querrá hacer estas cosas primero.

note: (itstool) path: section/title
en: Let's start with a web page
es_ES: Comience con una página web

note: (itstool) path: section/p
en: Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?
es_ES: Aquí hay código HTML, CSS, y JavaScript básico. ¿Le resulta familiar?

note: (itstool) path: section/p
en: Let's save this as <file>hellognome.html</file>, and see what it looks like when we run it!
es_ES: Guarde esto como <file>hellognome.html</file>, y observe cómo se ve cuando lo ejecuta.

note: (itstool) path: section/p
en: You <em>can</em> run the above code by opening <file>hellognome.html</file> in a web browser. But here, we're going to create a GNOME application that runs our web app inside of it, just like you see in the screenshot. You'll be able to resize and maximize the window, and click the X in the corner to close it, just like you'd expect from any other GNOME app. The difference is that this one will run our web code inside of it.
es_ES: <em>Puede</em> ejecutar el código anterior abriendo <file>hellognome.html</file> en un navegador web. Pero aquí, se va a crear una aplicación de GNOME que ejecute la aplicación web de dentro, como ve en la captura de pantalla. Podrá redimensionar y maximizar la ventana, y pulsar en la «X» en la esquina para cerrarla, al igual que esperaría de cualquier otra aplicación de GNOME. La diferencia es que esta ejecutará el código web de dentro.

note: (itstool) path: section/p
en: The best part? We're going to continue to use JavaScript, to write all the parts that make our app work with GNOME. Let's look at the code, and see how it's done!
es_ES: ¿La mejor parte? Se va a continuar usando JavaScript para escribir todas las partes que hacen que la aplicación funcione con GNOME. Échele un vistazo al código y vea cómo se hace.

note: (itstool) path: section/title
en: Creating a GNOME window to frame our web app
es_ES: Crear una ventana de GNOME para enmarcar la aplicación web

note: (itstool) path: section/p
en: First, we need to tell GNOME that this is a JavaScript application, which uses gjs. Gjs is GNOME's way of turning your JavaScript code into instructions it understands, so this line always has to go at the start of your applications.
es_ES: Primero, se necesita decirle a GNOME que esta es una aplicación de JavaScript, que usa gjs. gjs es la forma de GNOME de convertir su código de JavaScript en instrucciones que entiende, por lo que esta línea siempre debe ir al principio de sus aplicaciones.

note: (itstool) path: section/p
en: Then we should set the versions of the libraries we'll be using.
es_ES: Se deben establecer las versiones de las bibliotecas que se están usando.

note: (itstool) path: section/p
en: After that, we need to tell GNOME which libraries we want to import.
es_ES: Después de eso, necesita decirle a GNOME qué bibliotecas quiere importar.

note: (itstool) path: section/p
en: Just like how add-on libraries like jQuery let us do extra things with JavaScript, each of these libraries gives us new capabilities for our GNOME apps:
es_ES: Al igual que las bibliotecas adicionales como jQuery, que permiten hacer cosas adicionales con JavaScript, cada una de estas bibliotecas le da capacidades nuevas a las aplicaciones de GNOME:

note: (itstool) path: item/p
en: <file>Gtk</file> is the basic part of any GNOME application, which lets you create windows and widgets and tie them together.
es_ES: <file>Gtk</file>es la parte básica de cualquier aplicación de GNOME, que le permite crear ventanas y widgets, y juntarlos.

note: (itstool) path: item/p
en: <file>GLib</file> is a helper library, which lets us do things like tell GNOME where the <file>hellognome.html</file> file we created is.
es_ES: <file>GLib</file> es una biblioteca de ayuda, que permite hacer cosas como decirle a GNOME dónde está el archivo <file>hellognome.html</file> que creó.

note: (itstool) path: item/p
en: And <file>Webkit</file> is a web rendering engine, which we'll use to basically create a browser window to open our HTML file with.
es_ES: Y <file>Webkit</file> es un motor de procesamiento web, que usará básicamente para crear una ventana de navegador con la que abrir el archivo HTML.

note: (itstool) path: section/p
en: Now we create the application itself:
es_ES: Ahora se crea la aplicación en sí:

note: (itstool) path: section/p
en: This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our whole application is a class called HelloGNOME.
es_ES: Esto le resultará familiar si ha trabajado con JavaScript orientado a objetos anteriormente. Así es; toda la aplicación es una clase llamada «HelloGNOME».

note: (itstool) path: section/p
en: Here's some code you will more or less copy-and-paste for every JavaScript application you build. It creates a new Application, and then binds its activate and startup signals to functions that make the window show itself and build its user interface, respectively.
es_ES: Aquí hay código que prácticamente copiará y pegará por cada aplicación que construya en JavaScript. Crea una «Application» nueva, y después enlaza sus señales «activate» y «startup» a funciones que muestran la ventana y construyen su interfaz de usuario, respectivamente.

note: (itstool) path: section/p
en: What does that mean? Well, everything in a GNOME application sends out a signal when something important happens. A button might send out the clicked signal when you click on it, for instance. Our job is to connect the signals to functions which handle them, and make the things that we want to have happen occur. We do this using each object's connect method, which takes two arguments: The signal we want to handle, and the bound function, which we have to use to tell connect which function we want to have handle the signal.
es_ES: ¿Qué significa eso? Bueno, en una aplicación de GNOME todo envía una señal cuando algo importante sucede. Un botón puede enviar la señal «clicked» cuando lo pulsa, por ejemplo. Su trabajo es conectar las señales a funciones que las manejen, y hagan las cosas que quiere que ocurran. Esto se hace usando el método «connect» de cada objeto, que toma dos argumentos: la señal que quiere manejar, y la función vinculada, que hay que usar para decirle a «connect» qué función quiere que maneje la señal.

note: (itstool) path: section/p
en: In this case, we want _onActivate to handle the activate signal, and _onStartup to handle the startup signal. _onActivate just tells the window to present itself; so basically, whenever you <keyseq><key>Alt</key> <key>Tab</key></keyseq> to the application it appears, like you would expect it to. _onStartup calls _buildUI, which is the function that creates our user interface and is the next part that we will look at.
es_ES: En este caso, se quiere que «_onActivate» maneje la señal «activate», y «_onStartup» la señal «startup». «_onActivate» sólo le dice a la ventana que se presente; para que, básicamente, cada vez que haga <keyseq><key>Alt</key> <key>Tab</key></keyseq> a la aplicación, aparezca como uno espera. «_onStartup» llama a «_buildUI», que es la función que crea la interfaz de usuario y que verá a continuación.

note: (itstool) path: note/p
en: When you copy and paste the above code for your own applications, be sure to change the class name to a unique one each time.
es_ES: Cuando copie y pegue el código anterior para sus propias aplicaciones, asegúrese de cambiar el nombre de la clase por uno único cada vez.

note: (itstool) path: section/title
en: Designing our window's UI
es_ES: Diseñar la IU de la ventana

note: (itstool) path: section/p
en: In the _buildUI function, we're going to tell GNOME about our window and the things inside it, one at a time. After that, we're going to connect everything together and put it all on display.
es_ES: En la función «_buildUI», se le describirá a GNOME la ventana y sus elementos, uno a la vez. Después de eso, se conectará y se mostrará todo junto.

note: (itstool) path: section/p
en: The first object we create is an ApplicationWindow. It needs a title to go in the title bar, and its application property needs to be the application that we created, above. Beyond that, there are various ways of customizing how it looks, which the <link xref="GtkApplicationWindow.js">ApplicationWindow</link> reference page will go into more detail about. As you can see here, we gave it a default height and width (measured in pixels), and told GNOME we want our window to appear in the center of the screen.
es_ES: El primer objeto que se crea es una «ApplicationWindow». Necesita un texto para la barra de título, y su propiedad «application» tiene que ser la aplicación que se creó anteriormente. Más allá de eso, hay varias maneras de personalizar su apariencia. Podrá encontrar más detalles en la página de referencia <link xref="GtkApplicationWindow.js">ApplicationWindow</link>. Como puede ver aquí, se le dio una altura y anchura predeterminada (medidas en píxeles), y se le dijo a GNOME que se quiere que la ventana aparezca en el centro de la pantalla.

note: (itstool) path: section/p
en: Remember how we imported Webkit right at the start? Here we're creating a new instance of a Webkit class called a WebView, which is more or less a browser window you can put inside of your app. After that, we then give it the URI that we want it to load when the application starts up.
es_ES: ¿Recuerda cómo se importó «Webkit» al comienzo? Aquí se está creando una instancia nueva de la clase «Webkit» llamada «WebView», que es más o menos una ventana de navegador que puede poner dentro de su aplicación. Después de eso, se le da el URI que quiere que cargue cuando la aplicación inicia.

note: (itstool) path: section/p
en: We <em>could</em> just give it a web URI, like <link href="http://gnome.org">http://gnome.org</link>. Instead, here we use a couple of GLib helper functions to tell the WebView where our <file>hellognome.html</file> file is. GLib.get_current_dir returns the directory that our app's running in, and GLib.filename_to_uri turns our file's path and filename into a URI that the WebView's load_uri function understands. (filename_to_uri's second parameter should be null unless you know what it's used for and have a reason for changing it.)
es_ES: Se <em>podría</em> darle sólo un URI web, como <link href="http://gnome.org">http://gnome.org</link>. En su lugar, aquí se usan algunas funciones de ayuda de GLib para decirle a «WebView» dónde está el archivo <file>hellognome.html</file>. «GLib.get_current_dir» devuelve la carpeta en la que se está ejecutando la aplicación, y «GLib.filename_to_uri» convierte la ruta del archivo y su nombre en un URI que la función «load_uri» del «WebView» entiende (el segundo parámetro de «filename_to_uri» debe ser «null» a menos que sepa para qué se usa y tenga una razón para cambiarlo).

note: (itstool) path: section/p
en: Each window can hold one, and only one, widget. Normally, we'd use a container widget like a <link xref="grid.js">Grid</link> to put multiple widgets into, then use the window's add function to add the Grid to it. Here, we just need the WebView, so that's all we add to the window. After that, as the last part of the _buildUI function that creates our window, we tell the window to show itself and its contents.
es_ES: Cada ventana puede contener un, y sólo un, widget. Normalmente usaría un widget contenedor como una <link xref="grid.js">Rejilla</link> para poner dentro múltiples widgets, y después usar la función «add» de la ventana para añadírsela. Aquí, sólo se necesita el «WebView», por lo que es todo lo que se añade. Después de eso, al final de la función «_buildUI» que crea la ventana, se le dice que se muestre con su contenido.

note: (itstool) path: section/p
en: Finally, we create a new instance of our HelloGNOME class, and tell GNOME to run it.
es_ES: Finalmente, se crea una instancia nueva de la clase «HelloGNOME» y se le dice a GNOME que la ejecute.

note: (itstool) path: section/title
en: Running your GNOME application
es_ES: Ejecutar la aplicación de GNOME

note: (itstool) path: section/p
en: Now that we've created our first GNOME application, it's time to test it out! You don't need to compile your app or install any special software for this; GNOME has gjs built in, to let it run GNOME Shell. Just save <file>hellognome.html</file> and our actual application, <file>hellognome.js</file>, to a directory you can get to with the terminal. (They usually open onto your home directory, the one that's called by your username.) After that, open a terminal, go there, and type:
es_ES: Ahora que ha creado su primera aplicación de GNOME, es hora de probarla. No necesita compilarla o instalar algún software especial, GNOME tiene incluido gjs para permitirle ejecutar GNOME Shell. Sólo guarde <file>hellognome.html</file> y la aplicación en sí, <file>hellognome.js</file> en una carpeta a la que pueda acceder con la terminal (generalmente se abren en su carpeta personal, la que se llama como su usuario). Después de eso, abra una terminal, vaya allí, e introduzca:

note: (itstool) path: section/p
en: You should see more or less the same screenshot as before, with a button that you can click to make a short message appear.
es_ES: Debería ver más o menos la misma captura de pantalla de antes, con un botón que puede pulsar para hacer aparecer un mensaje corto.

note: (itstool) path: note/p
en: You can use the terminal command
es_ES: Puede usar el comando de la terminal

note: (itstool) path: note/screen
en:  <output style="prompt">$ </output>cd <var>(directory name)</var>
es_ES:  <output style="prompt">$ </output>cd <var>(nombre de la carpeta)</var>

note: (itstool) path: note/p
en: to navigate between directories inside the Terminal, in order to get to where you saved the files. There is also an extension for Nautilus, GNOME's file manager, which lets you right-click anywhere inside it to open a terminal window right there. Check the app you use to install new software (like Add/Remove Programs or the Software Center) for it.
es_ES: para navegar entre carpetas dentro de la terminal, y llegar donde guardó los archivos. También hay una extensión para Nautilus, el gestor de archivos de GNOME, que le permite pulsar en cualquier lado con el botón derecho para abrir una terminal allí. Búsquela en la aplicación que usa para instalar software nuevo (como «Añadir/Quitar programas» o el «Centro de software»).

note: (itstool) path: section/p
en: <link xref="02_welcome_to_the_grid.js">Continue on to the next tutorial</link> to learn how to build "native" GNOME applications that look and feel like the others, instead of a webview with HTML code inside. Or take a look at some <link xref="beginner.js#samples">code samples</link>, if you'd like to see example code for each Gtk widget.
es_ES: <link xref="02_welcome_to_the_grid.js">Siga con el próximo tutorial</link> para aprender cómo construir aplicaciones de GNOME «nativas» que se ven como las otras, en lugar de una vista web con código HTML dentro. O échele un vistazo a algunas <link xref="beginner.js#samples">muestras de código</link>, si quiere ver código de ejemplo para cada widget de GTK+.

note: (itstool) path: section/p
en: Finally, if you want to just build GNOME applications using JavaScript libraries designed for the web, you can basically stop here and go do that! Check out <link xref="beginner.js#tutorials">the later tutorials</link> if you'd like to see how to create a .desktop file for your application, which will let it appear in your desktop's Activities menu with all your other apps.
es_ES: Finalmente, si sólo quiere construir aplicaciones de GNOME usando bibliotecas de JavaScript diseñadas para la web, puede simplemente parar aquí y hacerlo. Échele un vistazo a los <link xref="beginner.js#tutorials">últimos tutoriales</link> para aprender a crear un archivo «.desktop» para su aplicación, que le permitirá aparecer en el menú de actividades de su escritorio junto a las otras.

[ctx: link]
note: (itstool) path: info/title
en: Hello World (C)
es_ES: Hola mundo (C)

note: (itstool) path: info/desc
en: Creating a small "Hello, World" application using GTK+.
es_ES: Crear una pequeña aplicación «Hola, mundo» usando GTK+.

note: (itstool) path: page/title
en: Hello world
es_ES: Hola mundo

note: (itstool) path: note/p
en: For a detailed walk-through of creating a GTK+ dialog in C, see <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Getting Started with GTK+</link>
es_ES: Para obtener una explicación paso a paso sobre cómo crear un diálogo de GTK+ en C, consulte <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Primeros pasos con GTK+</link>

note: (itstool) path: page/p
en: Writing a hello world GTK+ dialog in C can be done as seen in the code sample below:
es_ES: Escribir un diálogo Hola mundo de GTK+ en C se puede hacer como se ve en siguiente código de ejemplo:

note: (itstool) path: page/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal. We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a gtk_application_window_new. The window title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding. The code above will create a dialog window similar to what can be seen below:
es_ES: GtkApplication inicializa GTK+. También conecta el botón <gui>x</gui> que se genera automáticamente junto con la ventana a la señal «destroy». Puede empezar a construir su primera ventana. PAra hacer esto, cree una variable llamada <var>window</var> y asígnela a gtk_application_window_new. El título de la ventana puede ser la cadena que quiera. Para asegurarse, es mejor usar la codificación UTF-8. El código anterior creará una ventana de diálogo similar a la que se ve a continuación:

[ctx: text]
note: (itstool) path: info/title
en: Hello World (JavaScript)
es_ES: Hola mundo (JavaScript)

note: (itstool) path: info/desc
en: A basic "hello, world" application
es_ES: Una aplicación «Hola mundo» básica

note: (itstool) path: page/title
en: How to build, install and create a <file>tar.xz</file> of a Hello World program
es_ES: Cómo construir, instalar y crear un <file>tar.xz</file> de un programa Hola mundo

note: (itstool) path: synopsis/p
en: This tutorial will demonstrate how to:
es_ES: Este tutorial le demostrará cómo:

note: (itstool) path: item/p
en: create a small "Hello, World" application using JavaScript and GTK+
es_ES: crear una pequeña aplicación «Hola, mundo» usando JavaScript y GTK+

note: (itstool) path: item/p
en: make the <file>.desktop</file> file
es_ES: hacer el archivo <file>.desktop</file>

note: (itstool) path: item/p
en: how to set up the build system
es_ES: configurar el sistema de construcción

note: (itstool) path: section/title
en: Create the program
es_ES: Crear el programa

note: (itstool) path: section/p
en: This needs to be the first line of your script:
es_ES: Esta tiene que ser la primera línea de su script:

note: (itstool) path: section/p
en: It tells the script to use <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs is a JavaScript binding for GNOME.
es_ES: Le dice al script que use <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs es una vinculación de JavaScript para GNOME.

note: (itstool) path: section/p
en: In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. Here we import the language bindings and GTK+, the library which contains the graphical widgets used to make GNOME applications.
es_ES: Para que su script funcione con GNOME, se deben importar las bibliotecas de GNOME mediante introspección de GObject. En este caso, se están importando las vinculaciones de lenguaje y GTK+, la biblioteca que contiene los widgets gráficos usados para crear aplicaciones de GNOME.

note: (itstool) path: section/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
es_ES: «GtkApplication» inicializa GTK+. También conecta el botón <gui>x</gui> que se genera automáticamente junto con la ventana a la señal «destroy».

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>_window</var> and assigning it a new Gtk.ApplicationWindow.
es_ES: Se puede empezar a construir la primera ventana. Esto se hace creando una variable llamada <var>_window</var> y asignándole una «Gtk.ApplicationWindow» nueva.

note: (itstool) path: section/p
en: We give the window a property called <var>title</var>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
es_ES: Se le asignara una propiedad llamada <var>title</var>. El título puede ser la cadena que quiera pero, para estar seguro, es conveniente que tenga una codificación UTF-8.

note: (itstool) path: section/p
en: Now we have a window which has a title and a working "close" button. Let's add the actual "Hello World" text.
es_ES: Ya tiene una ventana que contiene un título y un botón «cerrar» que funciona. Ahora, añada el texto «Hola mundo».

note: (itstool) path: section/title
en: Label for the window
es_ES: Etiqueta para la ventana

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create and run the application:
es_ES: Una etiqueta de texto es uno de los widgets de GTK+ que puede usar si importó la biblioteca GTK+. Para usarlo, cree una variable nueva llamada «label» y asígnele una Gtk.Label nueva. Después dele propiedades dentro de las llaves «{}». En este caso, se está estableciendo el texto que la etiqueta contendrá. Finalmente, se crea y ejecuta la aplicación:

note: (itstool) path: section/p
en: Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.
es_ES: «Gtk.ApplicationWindow» sólo puede contener un widget a la vez. Para construir programas más elaborados necesita crear un widget contenedor como «Gtk.Grid» dentro de la ventana, y después añadirle los otros.

note: (itstool) path: section/p
en: The complete file:
es_ES: El archivo completo:

note: (itstool) path: section/title
en: Running the application from terminal
es_ES: Ejecutar la aplicación desde la terminal

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.js. Then open Terminal, go to the folder where your application is stored and run:
es_ES: Para ejecutar esta aplicación, primero guárdela como hello-world.js. Luego, abra una terminal, vaya a la carpeta donde está la aplicación y ejecute:

note: (itstool) path: section/title
en: The <file>.desktop.in</file> file
es_ES: El archivo <file>.desktop.in</file>

note: (itstool) path: section/p
en: Running applications from the Terminal is useful at the beginning of the application making process. To have fully working <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">application integration</link> in GNOME 3 requires a desktop launcher. For this you need to create a <file>.desktop</file> file. The <file>.desktop</file> file describes the application name, the used icon and various integration bits. A deeper insight into the <file>.desktop</file> file can be found <link href="http://developer.gnome.org/desktop-entry-spec/">here</link>. The <file>.desktop.in</file> file will create the <file>.desktop</file>.
es_ES: Ejecutar aplicaciones desde la terminal es útil al principio del proceso de crear la aplicación. Para tener una <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">integración con la aplicación</link> completa en GNOME 3, se necesita un lanzador en el escritorio. Para esto, necesita crear un archivo <file>.desktop</file>. El archivo «.desktop» describe el nombre de la aplicación, el icono que usa y varios campos de integración. Puede encontrar una descripción de los archivos <file>.desktop</file> <link href="http://developer.gnome.org/desktop-entry-spec/">aquí</link>. El archivo <file>.desktop.in</file> creará el <file>.desktop</file>.

note: (itstool) path: note/p
en: Before continuing, resave <file>hello-world.js</file> as <file>hello-world</file>. Then run this in the command line:
es_ES: Antes de continuar, guarde nuevamente <file>hello-world.js</file> como <file>hello-world</file>. Después ejecute esto en la terminal:

note: (itstool) path: section/p
en: The example shows you the minimum requirements for a <code>.desktop.in</code> file.
es_ES: El ejemplo muestra los requerimientos mínimos de un archivo <code>.desktop.in</code>.

note: (itstool) path: section/p
en: Save this as <file>hello-world.desktop.in</file>. Now let's go through some parts of the <code>.desktop.in</code> file.
es_ES: Guarde el archivo como <file>hello-world.desktop.in</file>. Ahora se verán algunas partes del archivo <code>.desktop.in</code>.

note: (itstool) path: item/p
en: The application name.
es_ES: El nombre de la aplicación.

note: (itstool) path: item/p
en: A short description of the application.
es_ES: Una descripción corta de la aplicación.

note: (itstool) path: item/p
en: Specifies a command to execute when you choose the application from the menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care of the rest.
es_ES: Especifica un comando que ejecutar cuando se elige la aplicación en el menú. En este ejemplo, «exec» sólo indica dónde encontrar el archivo <code>hello-world</code> y el archivo se hace cargo del resto.

note: (itstool) path: item/p
en: Specifies whether the command in the Exec key runs in a terminal window.
es_ES: Especifica si el comando del campo «Exec» se ejecuta en una ventana de la terminal.

note: (itstool) path: section/p
en: To put your application into the appropriate category, you need to add the necessary categories to the Categories line. More information on the different categories can be found in the <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menu specification</link>.
es_ES: Para incluir su aplicación en la categoría correcta, debe añadir las categorías necesarias a la línea «Categories». Puede encontrar más información sobre las distintas categorías en la <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">especificación del menú</link>.

note: (itstool) path: section/p
en: In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the .desktop.in file, on line 7. More information on icons in: <link href="https://wiki.gnome.org/Initiatives/GnomeGoals/AppIcon">Installing Icons for Themes</link> and <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.
es_ES: En este ejemplo se ha usado un icono existente. Para usar un icono personalizado, necesita un archivo «.svg» con su icono guardado en <file>/usr/share/icons/hicolor/scalable/apps</file>. Escriba el nombre del archivo del icono en el archivo «.desktop.in», en la línea 7. Puede obtener más información sobre los iconos en <link href="https://wiki.gnome.org/Initiatives/GnomeGoals/AppIcon">Instalar iconos para temas</link>, <link href="https://live.gnome.org/GnomeGoals/AppIcon">Instalar iconos para temas</link> y en <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">freedesktop.org: especificaciones/icon-theme-spec</link>.

note: (itstool) path: section/title
en: The build system
es_ES: El sistema de construcción

note: (itstool) path: section/p
en: To make your application truly a part of the GNOME 3 system you need to install it with the help of autotools. The autotools build will install all the necessary files to all the right places.
es_ES: Para que su aplicación forme parte realmente del sistema GNOME 3 debe instalarla con la ayuda de autotools. La construcción autotools instalará todos los archivos necesarios en las ubicaciones correctas.

note: (itstool) path: section/p
en: For this you need to have the following files:
es_ES: Para esto deberá tener los siguientes archivos:

note: (itstool) path: section/p
en: After the <file>autogen.sh</file> file is ready and saved, run:
es_ES: Una vez que el archivo <file>autogen.sh</file> esté listo y guardado, ejecute:

note: (itstool) path: section/p
en: Information users should read first. This file can be blank.
es_ES: Información que los usuarios deben leer primero. Este archivo puede estar vacío.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and permissions, create a <file>README</file> file with installation instructions. Below is a sample of what suitable README instructions may look like:
es_ES: Cuando tenga los archivos <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> y <file>autogen.sh</file> con la información y los permisos correctos, cree el archivo <file>README</file> con instrucciones para la instalación. A continuación se muestra un ejemplo de a qué se deben parecer las instrucciones de un archivo README adecuado.

note: (itstool) path: section/code
en: To build and install this program, run these commands from a terminal:
    
    ./autogen.sh --prefix=/home/$USER/.local
    make install
    
    -------------
    When running the first command $USER will be replaced by your username.
    
    Running the first command above creates the following files:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Running "make install", installs the application in /home/your_username/.local/bin
    and installs the hello-world.desktop file in /home/your_username/.local/share/applications
    
    You can now run the application by typing "Hello World" in the Overview.
    
    ----------------
    To uninstall, type:
    
    make uninstall
    
    ----------------
    To create a tarball type:
    
    make distcheck
    
    This will create hello-world-1.0.tar.xz
es_ES: Para construir e instalar este programa ejecute estos comandos desde una terminal:
    
    ./autogen.sh --prefix=/home/%USER/.local
    make install
    
    -------------
    Al ejecutar la primera línea se crean los siguientes archivos:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Al ejecutar «make install», se instala la aplicación en /home/usuario/.local/bin
    y se instala el archivo helloWorld.desktop en /home/usuario/.local/share/applications
    
    Ahora puede ejecutar la aplicación escribiendo «Hello World» en la vista general.
    
    ----------------
    Para desinstalarla, escriba:
    
    make uninstall
    
    ----------------
    Para crear un archivador tar escriba:
    
    make distcheck
    
    Esto creará el archivo hello-world-1.0.tar.xz

[ctx: text]
note: (itstool) path: info/title
en: Hello World (Python)
es_ES: Hola mundo (Python)

note: (itstool) path: item/p
en: create a small "Hello, World" application using Python and GTK+
es_ES: crear una pequeña aplicación «Hola, mundo» usando Python y GTK+

note: (itstool) path: section/p
en: Gtk.Application initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
es_ES: «Gtk.Application» inicializa GTK+. También conecta el botón <gui>x</gui>, que se genera automáticamente junto con la ventana, a la señal «destroy».

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a class called <var>MyWindow</var> and assigning it a Gtk.ApplicationWindow.
es_ES: Se puede empezar a construir la primera ventana. Esto se hace creando una clase llamada <var>MyWindow</var> y asignándole una «Gtk.ApplicationWindow».

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a variable called <var>label</var> and set the text that the label will hold. Finally, we create and run the application:
es_ES: Una etiqueta de texto es uno de los widgets de GTK+ que puede usar si importó la biblioteca GTK+. Para usarlo, cree una variable nueva llamada <var>label</var> y establezca el texto que la etiqueta contendrá. Finalmente, se crea y ejecuta la aplicación:

note: (itstool) path: section/title
en: hello-world.py
es_ES: hola-mundo.py

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.py. Then open Terminal, go to the folder where your application is stored and run:
es_ES: Para ejecutar esta aplicación, primero guárdela como hello-world.py. Luego, vaya a la carpeta donde está la aplicación.

note: (itstool) path: section/screen
en: <output style="prompt">$ </output><input>python hello-world.py</input>
es_ES: <output style="prompt">$ </output><input>python hola-mundo.py</input>

note: (itstool) path: section/p
en: Now let's go through some parts of the <code>.desktop.in</code> file.
es_ES: Ahora se verán algunas partes del archivo <code>.desktop.in</code>.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
es_ES: Cuando tenga los archivos <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> y <file>autogen.sh</file> con la información y los permisos correctos, el archivo <file>README</file> puede incluir las siguientes instrucciones:

note: (itstool) path: section/code
en: To build and install this program:
    
    ./autogen.sh --prefix=/home/your_username/.local
    make install
    
    -------------
    Running the first line above creates the following files:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Running "make install", installs the application in /home/your_username/.local/bin
    and installs the hello-world.desktop file in /home/your_username/.local/share/applications
    
    You can now run the application by typing "Hello World" in the Overview.
    
    ----------------
    To uninstall, type:
    
    make uninstall
    
    ----------------
    To create a tarball type:
    
    make distcheck
    
    This will create hello-world-1.0.tar.xz
es_ES: Para construir e instalar este programa:
    
    ./autogen.sh --prefix=/home/usuario/.local
    make install
    
    -------------
    Al ejecutar la primera línea se crean los siguientes archivos:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    helloWorld.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Al ejecutar «make install», se instala la aplicación en /home/usuario/.local/bin
    y se instala el archivo helloWorld.desktop en /home/usuario/.local/share/applications
    
    Ahora puede ejecutar la aplicación escribiendo «Hello World» en la vista general.
    
    ----------------
    Para desinstalarla, escriba:
    
    make uninstall
    
    ----------------
    Para crear un archivador tar escriba:
    
    make distcheck
    
    Esto creará el archivo hello-world-1.0.tar.xz

[ctx: text]
note: (itstool) path: info/title
en: Hello World (Vala)
es_ES: Hola mundo (Vala)

note: (itstool) path: item/p
en: create a small "Hello, World" application using GTK+
es_ES: crear una pequeña aplicación «Hola, mundo» usando GTK+

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a new Gtk.ApplicationWindow.
es_ES: Se puede empezar a construir la primera ventana. Esto se hace creando una variable llamada <var>window</var> y asignándole una «Gtk.ApplicationWindow».

note: (itstool) path: section/p
en: We give the window a title using <code>set_title</code>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
es_ES: Se le asignara una propiedad llamada <code>set_title</code>. El título puede ser la cadena que quiera pero, para estar seguro, es conveniente que tenga una codificación UTF-8.

note: (itstool) path: section/p
en: Finally, we create and run the application:
es_ES: Por último, se crea y ejecuta la aplicación

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.vala. Then open Terminal, go to the folder where your application is stored.
es_ES: Para ejecutar esta aplicación, primero guárdela como hello-world.vala. Luego, vaya a la carpeta donde está la aplicación.

note: (itstool) path: section/p
en: Compile the program:
es_ES: Compilar el programa:

note: (itstool) path: section/p
en: Run the program:
es_ES: Ejecutar el programa:

note: (itstool) path: section/p
en: When you have the <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
es_ES: Cuando tenga los archivos <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> y <file>autogen.sh</file> con la información y los permisos correctos, el archivo <file>README</file> puede incluir las siguientes instrucciones:

note: (itstool) path: section/code
en: To build and install this program:
    
    ./autogen.sh --prefix=/home/your_username/.local
    make
    make install
    
    -------------
    Running the first line above creates the following files:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    depcomp
    hello-world
    hello-world.c
    hello-world.desktop
    hello_world-hello-world.o
    hello_world_vala.stamp
    install-sh
    missing
    Makefile.in
    Makefile
    
    Running "make" links all the appropriate libraries.
    
    Running "make install", installs the application in /home/your_username/.local/bin
    and installs the hello-world.desktop file in /home/your_username/.local/share/applications
    
    You can now run the application by typing "Hello World" in the Overview.
    
    ----------------
    To uninstall, type:
    
    make uninstall
    
    ----------------
    To create a tarball type:
    
    make distcheck
    
    This will create hello-world-1.0.tar.xz
es_ES: Para compilar e instalar este programa:
    
    ./autogen.sh --prefix=/home/usuario/.local
    make install
    
    -------------
    Al ejecutar la primera línea se crean los siguientes archivos:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    helloWorld.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Al ejecutar «make install», se instala la aplicación en /home/usuario/.local/bin
    y se instala el archivo helloWorld.desktop en /home/usuario/.local/share/applications
    
    ahora puede ejecutar la aplicación escribiendo «Hello World» en la vista general.
    
    ----------------
    Para desinstalarla, escriba:
    
    make uninstall
    
    ----------------
    Para crear un archivador tar, escriba:
    
    make distcheck
    
    Esto creará el archivo hello-world-1.0.tar.xz

note: (itstool) path: info/desc
en: A widget displaying an image
es_ES: Un widget que muestra una imagen

note: (itstool) path: page/p
en: This GtkApplication displays an image file from the current directory.
es_ES: Esta GtkApplication muestra una archivo de imagen de la carpeta actual.

note: (itstool) path: note/p
en: If the image file isn't loaded successfully, the image will contain a "broken image" icon. The <file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite picture!
es_ES: Si el archivo de imagen no se ha cargado correctamente, la imagen tendrá un icono de «imagen rota» El archivo <file>nombre_archivo.png</file> debe estar en la carpeta actual para que este código funcione. Use su imagen favorita.

note: (itstool) path: note/p
en: If the image file is not loaded successfully, the image will contain a "broken image" icon. <file>filename.png</file> needs to be in the current directory for this code to work.
es_ES: Si el archivo de imagen no se carga correctamente, la imagen tendrá un icono de «imagen rota». El archivo <file>nombre_archivo.png</file> debe estar en la carpeta actual para que este código funcione.

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the image as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
es_ES: Otra manera de obtener lo que se tiene en el ejemplo es crear la imagen como una instancia de otra clase y añadírsela a la instancia de <code>MyWindow</code> en el método <code>do_activate(self)</code>:

note: (itstool) path: note/p
en: To use this code snippet, you will need to add the code that imports <code>Gtk</code> and <code>GdkPixbuf</code> from <code>gi.repository</code> and lines that instantiate the <code>MyApplication</code> window.
es_ES: Para usar este fragmento de código necesitará aádir el código que importa <code>Gtk</code> y <code>GdkPixbuf</code> desde <code>gi.repository</code> y las líneas que crean una instancia de la ventana <code>MyApplication</code>.

note: (itstool) path: section/title
en: Useful methods for an Image widget
es_ES: Métodos útiles para un widget «Image»

note: (itstool) path: item/p
en: To load an image over a network use <code>set_from_pixbuf(pixbuf)</code>, where <code>pixbuf</code> is a <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>.
es_ES: Para cargar una imagen por red, use <code>set_from_pixbuf(pixbuf)</code>, donde <code>pixbuf</code> es un <link href="http://developer.gnome.org/gdk-pixbuf/unstable//index.html"> GdkPixbuf</link>.

note: (itstool) path: item/p
en: If <code>preserve_aspect_ratio=True</code> we can use <code>new_from_file_at_size(filename, width, height)</code>. If <code>width</code> or <code>height</code> is <code>-1</code>, it is not constrained.
es_ES: Si <code>preserve_aspect_ratio=True</code> puede usar <code>new_from_file_at_size(nombre_archivo, anchura, altura)</code>. Si <code>anchura</code> o <code>altura</code> son <code>-1</code>, no se restringen.

note: (itstool) path: item/p
en: For loading from an input stream, see <code>new_from_stream()</code> and <code>new_from_stream_at_scale()</code> in the documentation.
es_ES: Para cargar de un flujo de entrada, consulte <code>new_from_stream()</code> y <code>new_from_stream_at_scale()</code> en la documentación.

[ctx: text]
note: (itstool) path: info/title
en: Image (Vala)
es_ES: Imagen (Vala)

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (C)
es_ES: Visor de imágenes (C)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" Gtk application.
es_ES: Algo más que una sencilla aplicación «Hola mundo» en GTK.

note: (itstool) path: page/title
en: Image viewer
es_ES: Visor de imágenes

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
es_ES: En este tutorial aprenderá:

note: (itstool) path: item/p
en: Some basic concepts of C/GObject programming
es_ES: Algunos conceptos básicos de programación en C/GObject

note: (itstool) path: item/p
en: How to write a Gtk application in C
es_ES: Cómo escribir una aplicación GTK en C

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
es_ES: Seleccione <gui>GTK+ (simple)</gui> en la pestaña <gui>C</gui>, pulse <gui>Continuar</gui>, y rellene los detalles en las siguientes páginas. Use <file>visor-imagenes</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
es_ES: Asegúrese de que <gui>Usar GtkBuilder para la interfaz del usuario</gui> está desactivado, ya que, en este tutorial, la IU se creará manualmente. Revise el tutorial del <link xref="guitar-tuner.c">afinador de guitarra</link> si quiere aprender a usar el constructor de interfaces.

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
es_ES: C es un lenguaje más detallado, por lo que no se sorprenda de que el archivo contiene un gran cantidad de código. La mayor parte es código de plantilla. Carga una ventana (vacía) y se muestra. A continuación se ofrecen más detalles; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new (empty) window and connects a signal to exit the application when that window is closed.
es_ES: La función <code>create_window</code> crea una ventana (vacía) nueva y conecta una señal para salir de la aplicación cuando se cierra esa ventana.

note: (itstool) path: section/title
en: Creating the user interface
es_ES: Crear la interfaz de usuario

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <code>GtkContainer</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>GtkBox</code>:
es_ES: Ahora se dará vida a la ventana vacía. GTK+ organiza la interfaz de usuario con varios <code>GtkContainer</code> que pueden contener otros widgets e incluso otros contenedores. Aquí se usará el contenedor más sencillo disponible, una <code>GtkBox</code>:

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container. The macros like <code>GTK_BOX</code> are used for dynamic type checking and casting which is needed as C doesn't support object-orientation out-of-the-box.
es_ES: La primera línea crea los widgets que se quieren usar: un botón para abrir una imagen, el widget para ver la imagen y la caja que se usará como contenedor. Las macros como <code>GTK_BOX</code> se usan para comprobaciones de tipos dinámicos y conversiones de tipos necesarias, ya que C no soporta orientación a objetos.

note: (itstool) path: item/p
en: The calls to <code>gtk_box_pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
es_ES: Las llamadas a <code>gtk_box_pack_start</code> añaden los dos widgets a la caja y definen su comportamiento. La imagen se expandirá en cualquier espacio disponible, mientras que el botón será tan grande como se necesite. Se dará cuenta de que no se establecen tamaños explícitos de los widgets. Generalmente, en GTK+ no se necesita ya que hace que sea mucho más sencillo tener una distribución que se ve bien con diferentes tamaños de la ventana. A continuación, se añade la caja a la ventana.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>g_signal_connect</code> function which tells GTK to call the <code>on_image_open</code> function when the button is clicked and to pass the image as an additional argument to that function. We will define the <em>callback</em> in the next section.
es_ES: Se debe definir qué sucede cuando el usuario pulsa el botón. GTK+ usa el concepto de <em>señales</em>. Cuando se pulsa el botón, emite la señal <em>clicked</em>, que se puede conectar a alguna acción. Esto se ha hecho usando el método <code>g_signal_connect</code>, que indica a GTK+ que llame a la función <code>on_image_open</code> cuando se pulsa el botón y que pase la imagen como un argumento adicional a la función. El <em>retorno de la llamada</em> se definirá en la siguiente sección.

note: (itstool) path: item/p
en: The last <code>g_signal_connect()</code> makes sure that the application exits when the window is closed.
es_ES: La última <code>g_signal_connect()</code> se asegura de que la aplicación finaliza al cerrar la ventana.

note: (itstool) path: item/p
en: As a last step, make sure to replace the <code>gtk_widget_show</code> call in the <code>main()</code> function by <code>gtk_widget_show_all()</code> to show the window and all the widgets it contains.
es_ES: Como último paso, asegúrese de reemplazar la llamada <code>gtk_widget_show</code>, en la función <code>main()</code>, por <code>gtk_widget_show_all()</code>, para mostrar todos los widgets que contiene la ventana.

note: (itstool) path: section/title
en: Showing the image
es_ES: Mostrar la imagen

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>create_window()</code> method.
es_ES: Ahora se definirá el gestor de la señal para la señal <em>clicked</em> en el botón mencionado anteriormente. Añada este código antes del método <code>create_window()</code>.

note: (itstool) path: section/p
en: This is a bit more complicated than anything we've attempted so far, so let's break it down:
es_ES: Esto es un poco más complicado que todo lo que se ha intentado hasta ahora, así que se puede desglosar:

note: (itstool) path: item/p
en: The first argument of the signal is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any. Next is the <code>user_data</code> argument which is a pointer to the data we passed when connecting the signal. In this case it is our <code>GtkImage</code> object.
es_ES: El primer argumento de la señal es siempre el widget que envía la señal. Algunas veces se añaden otros argumentos relativos a la señal, pero <em>clicked</em> no tiene ninguno. Lo siguiente es el argumento <code>user_data</code>, que es un puntero a los datos que se han pasado al conectar la señal. En este caso, es el objeto <code>GtkImage</code>.

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created using <code>gtk_file_chooser_dialog_new</code>. The function takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
es_ES: La siguiente línea interesante es en la que se crea el diálogo para elegir el archivo usando <code>gtk_file_chooser_dialog_new</code>. La función toma el título del diálogo, la ventana padre del diálogo y varias opciones como el número de botones y sus valores correspondientes.

note: (itstool) path: item/p
en: Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
es_ES: Note que se está usando nombres de botones del <em>almacén</em> de GTK, en lugar de escribir manualmente «Cancelar» o «Abrir». La ventaja de usar nombres del almacén es que las etiquetas de los botones ya estarán traducidas en el idioma del usuario.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by GtkImage. A filter object is created first; we then add all kinds of files supported by <code>GdkPixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
es_ES: Las dos líneas siguientes restringen el diálogo <gui>Abrir</gui> para que sólo muestre archivos que se puedan abrir con «GtkImage». Primero se crea un objeto de filtro; luego se añaden los tipos de archivos soportados por el <code>GdkPixbuf</code> (que incluye la mayoría de los formatos de imagen como PNG y JPEG) al filtro. Por último, se establece que este filtro sea el filtro del diálogo <gui>Abrir</gui>.

note: (itstool) path: item/p
en: <code>gtk_dialog_run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>gtk_dialog_run</code> will return the value <code>GTK_RESPONSE_ACCEPT</code> (it would return <code>GTK_RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
es_ES: <code>gtk_dialog_run</code> muestra el diálogo <gui>Abrir</gui>. El diálogo esperará a que el usuario elija una imagen; cuando lo haga, <code>gtk_dialog_run</code> devolverá el valor <code>GTK_RESPONSE_ACCEPT</code> (devolvería <code>GTK_RESPONSE_CANCEL</code> si el usuario pulsara <gui>Cancelar</gui>). La sentencia <code>switch</code> comprueba esto.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the GtkImage to the filename of the image selected by the user. The GtkImage will then load and display the chosen image.
es_ES: Asumiendo que el usuario pulsó <gui>Abrir</gui>, la siguiente línea establece la propiedad <code>file</code> de la «GtkImage» con el nombre del archivo de imagen seleccionado por el usuario. La «GtkImage» cargará y mostrará la imagen elegida.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more. Destroying automatically hides the dialog.
es_ES: Al final de la línea de este método, se destruye el diálogo <gui>Abrir</gui> porque ya no se necesita más. El diálogo se oculta automáticamente al destruirlo.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
es_ES: Si todavía no lo ha hecho, elija la aplicación <file>Debug/src/visor-imagenes</file> en el diálogo que aparece. Finalmente, pulse <gui>Ejecutar</gui> y disfrute.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.c">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="image-viewer/image-viewer.c">código de referencia</link>.

note: (itstool) path: item/p
en: Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.
es_ES: Haga que el usuario selecciona una carpeta en vez de un archivo, y proporcione controles para moverse por todas las imágenes de una carpeta.

note: (itstool) path: item/p
en: Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.
es_ES: Aplicar filtros aleatorios y efectos a la imagen cuando se carga y permitir al usuario guardar la imagen modificada.

note: (itstool) path: item/p
en: <link href="http://www.gegl.org/api.html">GEGL</link> provides powerful image manipulation capabilities.
es_ES: <link href="http://www.gegl.org/api.html">GEGL</link> proporciona la capacidad de manipular imágenes de manera potente.

note: (itstool) path: item/p
en: Allow the user to load images from network shares, scanners, and other more complicated sources.
es_ES: Permitir al usuario cargar imágenes desde recursos de red compartidos, escáneres y otras fuentes más complicadas.

note: (itstool) path: item/p
en: You can use <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> to handle network file transfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> to handle scanning.
es_ES: Puede usar <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> para gestionar transferencias de archivos de red y similares, y <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> para gestionar el escaneado.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTKmm application.
es_ES: Algo más que una sencilla aplicación «Hola mundo» en GTKmm.

note: (itstool) path: item/p
en: Some basic concepts of C++/GObject programming
es_ES: Algunos conceptos básicos de programación en C++/GObject

note: (itstool) path: item/p
en: How to write a Gtk application in C++
es_ES: Cómo escribir una aplicación GTK en C++

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
es_ES: Elija <gui>GTKmm (simple)</gui> de la pestaña <gui>C++</gui>, pulse <gui>Adelante</gui> y rellene los detalles en las siguientes páginas. Use <file>visor-imagenes</file> como nombre de proyecto y de carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.cpp">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
es_ES: Asegúrese de que <gui>Usar GtkBuilder para la interfaz del usuario</gui> está desactivado, ya que, en este tutorial, la IU se creará manualmente. Revise el tutorial del <link xref="guitar-tuner.cpp">afinador de guitarra</link> si quiere aprender a usar el constructor de interfaces.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/main.cc</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Debería ver algo de código que comience con las líneas:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (C++-STL) libraries. Functions from these libraries are used in the rest of the code.
es_ES: Las tres líneas <code>#include</code> en la parte superior incluyen las bibliotecas <code>config</code> (definiciones útiles para construcción con autoconf), <code>gtkmm</code> (interfaz de usuario) <code>iostream</code> (C++-STL). Las funciones de estas bibliotecas se usan en el resto del código.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new (empty) window and sets the window title.
es_ES: La función <code>main</code> crea una ventana (vacía) nueva y establece el título de la ventana.

note: (itstool) path: item/p
en: The <code>kit::run()</code> call starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses). As we give the window as an argument to that function, the application will automatically exit when that window is closed.
es_ES: La llamada <code>kit::run()</code> inicia el bucle principal de GTKmm, que ejecuta la interfaz de usuario y empieza a escuchar eventos (como pulsaciones del ratón y del teclado). Como se ha pasado la ventana como argumento a esta función, la aplicación se cerrará automáticamente cuando se cierre la ventana.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTKmm organizes the user interface with <code>Gtk::Container</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>Gtk::Box</code>:
es_ES: Ahora se dará vida a la ventana vacía. GTKmm organiza la interfaz de usuario con varios <code>Gtk::Container</code> que pueden contener otros widgets e incluso otros contenedores. Aquí se usará el contenedor más sencillo disponible, una <code>Gtk::Box</code>:

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
es_ES: La primera línea crea los widgets que se quieren usar: un botón para abrir una imagen, el widget del visor de imágenes en sí y la caja que se usará como contenedor.

note: (itstool) path: item/p
en: The calls to <code>pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTKmm this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
es_ES: Las llamadas a <code>pack_start</code> añaden los dos widgets a la caja y definen su comportamiento. La imagen se expandirá en cualquier espacio disponible, mientras que el botón será tan grande como se necesite. Se dará cuenta de que no se establecen tamaños explícitos de los widgets. Generalmente, en GTKmm no se necesita ya que hace que sea mucho más sencillo tener una distribución que se ve bien con diferentes tamaños de la ventana. A continuación, se añade la caja a la ventana.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTKmm uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>signal_clicked().connect</code> method which tells GTKmm to call the <code>on_open_image</code> function when the button is clicked. We will define the <em>callback</em> in the next section.
es_ES: Se debe definir qué sucede cuando el usuario pulsa el botón. GTKmm usa el concepto de <em>señales</em>. Cuando se pulsa el botón, emite la señal <em>clicked</em>, que se puede conectar a alguna acción. Esto se ha hecho usando el método <code>signal_clicked().connect</code>, que indica a GTKmm que llame a la función <code>on_open_image</code> cuando se pulsa el botón y que pase la imagen como un argumento adicional a la función. El <em>retorno de la llamada</em> se definirá en la siguiente sección.

note: (itstool) path: item/p
en: The last step is to show all widgets in the window using <code>show_all_children()</code>. This is equivalent to using the <code>show()</code> method on all our child widgets.
es_ES: El último paso es mostrar todos los widgets en la ventana usando <code>show_all_children()</code>. Esto es equivalente a usar el método <code>show()</code> en cada uno de los widgets.

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>main</code> method.
es_ES: Ahora se definirá el gestor de la señal <em>clicked</em> para el botón mencionado anteriormente. Añada este código antes del método <code>main</code>.

note: (itstool) path: item/p
en: The dialog for choosing the file is created using the <code>Gtk::FileChooserDialog</code> constructor. This takes the title and type of the dialog. In our case, it is an <em>Open</em> dialog.
es_ES: El diálogo para elegir el archivo se crea usando el constructor de <code>Gtk::FileChooserDialog</code>. La función toma el título y el tipo del diálogo. En este caso, es un diálogo de tipo <em>Open</em>.

note: (itstool) path: item/p
en: The next two lines add an <em>Open</em> and a <em>Close</em> button to the dialog.
es_ES: Las siguientes dos líneas añaden un botón <em>Abrir</em> y <em>Cerrar</em> en el diálogo.

note: (itstool) path: item/p
en: The second argument to the <code>add_button()</code> method is a value to identify the clicked button. We use predefined values provided by GTKmm here, too.
es_ES: El segundo argumento del método <code>add_button()</code> es un valor para identificar el botón pulsado. Aquí también se usan valores predefinidos proporcionados por GTKmm.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk::Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk::Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
es_ES: Las dos líneas siguientes restringen el diálogo <gui>Abrir</gui> para que sólo muestre archivos que se puedan abrir con <code>Gtk::Image</code>. Primero se crea un objeto de filtro; luego se añaden los tipos de archivos soportados por el <code>Gdk::Pixbuf</code> (que incluye la mayoría de los formatos de imagen como PNG y JPEG) al filtro. Por último, se establece que este filtro sea el filtro del diálogo <gui>Abrir</gui>.

note: (itstool) path: item/p
en: <code>Glib::RefPtr</code> is a smart pointer used here, that makes sure that the filter is destroyed when there is no reference to it anymore.
es_ES: <code>Glib::RefPtr</code> es un puntero inteligente usado aquí que se asegura de que el filtro se destruye cuando ya no se hace ninguna referencia a él.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <code>Gtk::RESPONSE_ACCEPT</code> (it would return <code>Gtk::RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
es_ES: <code>dialog.run</code> muestra el diálogo <gui>Abrir</gui>. El diálogo esperará a que el usuario seleccione una imagen; cuando lo haga, <code>dialog.run</code> devolverá el valor <code>Gtk::RESPONSE_ACCEPT</code> (devolvería <code>Gtk::RESPONSE_CANCEL</code> si el usuario pulsara <gui>Cancel</gui>). La sentencia <code>switch</code> comprueba esto.

note: (itstool) path: item/p
en: We hide the <gui>Open</gui> dialog because we don't need it any more. The dialog would be hidden later anyway, as it is only a local variable and is destroyed (and therefore hidden) when the scope ends.
es_ES: Se oculta el diálogo <gui>Abrir</gui> porque ya no se necesita más. El diálogo se ocultará de todos modos, ya que sólo es una variable local, y se destruye (y por lo tanto se oculta) cuando el ámbito termina.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line loads the file into the <code>Gtk::Image</code> so that it is displayed.
es_ES: Asumiendo que el usuario pulsó <gui>Abrir</gui>, la siguiente línea carga el archivo en la <code>Gtk::Image</code>, por lo que se muestra.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.cc">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="image-viewer/image-viewer.cc">código de referencia</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (JavaScript)
es_ES: Visor de imágenes (JavaScript)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK+. Includes an introduction to the JavaScript language.
es_ES: Algo más que una sencilla aplicación «Hola mundo»; escriba un visor de imágenes en GTK+. Incluye una introducción al lenguaje JavaScript.

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:
es_ES: En este tutorial se va a escribir una aplicación GTK+ muy sencilla que carga un archivo e imagen y lo muestra. Aprenderá a:

note: (itstool) path: item/p
en: Write a basic GTK user interface in JavaScript
es_ES: Escribir una interfaz GTK+ de usuario básica usando JavaScript

note: (itstool) path: item/p
en: Deal with events by connecting signals to signal handlers
es_ES: Trabajar con eventos conectando señales a gestores de señales

note: (itstool) path: item/p
en: Lay out GTK user interfaces using containers
es_ES: La disposición de las interfaces de usuario usando contenedores

note: (itstool) path: item/p
en: Load and display image files
es_ES: Cargar y mostrar archivos de imagen

note: (itstool) path: item/p
en: An installed copy of the <em>gjs</em> interpreter
es_ES: Una copia instalada del intérprete <em>gjs</em>

note: (itstool) path: item/p
en: Basic knowledge of any object-orientated programming language
es_ES: Conocimiento básico de cualquier lenguaje de programación orientado a objetos

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
es_ES: Elija <gui>Javascript genérico</gui> de la pestaña <gui>JS</gui>, pulse <gui>Adelante</gui> y rellene los detalles en las siguientes páginas. Use <file>visor-imágenes</file> como nombre de proyecto y de carpeta.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/main.js</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Contiene un ejemplo de código muy básico:

note: (itstool) path: section/title
en: JavaScript basics: Hello World
es_ES: JavaScript básico: hola mundo

note: (itstool) path: section/p
en: Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:
es_ES: Antes de empezar a escribir el visor de imágenes, averigüe algo más sobre cómo se usa JavaScript en GNOME. Por supuesto que su primer contacto con un lenguaje de programación debe ser el programa «Hola mundo», que se puede encontrar en el archivo <file>main.js</file>:

note: (itstool) path: section/code
en: print ("Hello world!");
es_ES: print ("¡Hola mundo!");

note: (itstool) path: section/p
en: This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.
es_ES: Esto debería resultarle natural si está familiarizado con la mayoría del resto de lenguajes de programación. La función <code>print</code> se llama con el argumento <code>"¡Hola mundo!"</code>, que se mostrará en la pantalla. Tenga en cuenta que cada línea de código termina en «;».

note: (itstool) path: section/title
en: Classes in JavaScript
es_ES: Clases en JavaScript

note: (itstool) path: section/p
en: This is the standard way to define a class in JavaScript:
es_ES: Esta es la manera estándar de definir una clase en JavaScript:

note: (itstool) path: section/p
en: This defines a class called <code>MyClass</code>. Let's go through each part of the class definition:
es_ES: Esto define una clase llamada <code>MyClass</code>. Vea cada una de las partes de la definición de la clase:

note: (itstool) path: item/p
en: <code>function MyClass</code> is the constructor of the class — its name must match the class's name. You can access any member of the class by using the <code>this</code> object; here, the constructor calls the class's <code>_init</code> method.
es_ES: <code>function MyClass</code> es el constructor de la clase; su nombre debe coincidir con el de la clase. Puede acceder a cualquier miembro de la clase usando el objeto <code>this</code>; aquí, el constructor llama al método <code>_init</code> de la clase.

note: (itstool) path: item/p
en: The <code>MyClass.prototype</code> block is where you define the <em>structure</em> of the class. Each class is made up of methods (functions) and fields (variables); there are three methods and two fields in this example.
es_ES: El bloque <code>MyClass.prototype</code> es donde define la <em>estructura</em> de la clase. Cada clase se compone de métodos (funciones) y campos (variables); en este ejemplo, hay tres métodos y dos campos.

note: (itstool) path: item/p
en: The first method defined here is called <code>_init</code>, and we specify that it is a function with no arguments:
es_ES: El primer método definido se llama <code>_init</code>, y se especifica que es una función sin argumentos:

note: (itstool) path: item/p
en: We write the function inside some curly braces. Two fields are defined here, <code>propertyA</code> and <code>propertyB</code>. The first is set to a string and the second is set to an integer (10). The function doesn't return any value.
es_ES: Se escribe la función entre corchetes. Aquí se definen dos campos, <code>propertyA</code> y <code>propertyB</code>. La primera se establece como una cadena, y la segunda se establece como un entero (10). La función no retorna ningún valor.

note: (itstool) path: item/p
en: The next method is called <code>aMethod</code> and has two arguments, which it prints out when you call it. The final method is <code>dumpProperties</code>, and prints the fields <code>propertyA</code> and <code>propertyB</code>.
es_ES: El siguiente método se llama <code>aMethod</code> y tiene dos argumentos que imprime cuando se invoca. El último método es <code>dumpProperties</code>, que imprime los campos <code>propertyA</code> y <code>propertyB</code>.

note: (itstool) path: item/p
en: Note how the class definition (prototype) is arranged; each function definition is separated by a comma.
es_ES: Tenga en cuenta cómo se ordena la definición de la clase (prototipo); cada definición de función se separa con una coma.

note: (itstool) path: section/p
en: Now that MyClass has been defined, we can play with it:
es_ES: Ahora que «MyClass» se ha definido, se puede jugar con ella:

note: (itstool) path: section/p
en: This code creates a new instance of the class called <code>o</code>, runs <code>aMethod</code>, changes <code>propertyA</code> to a different string, and then calls <code>dumpProperties</code> (which outputs the fields).
es_ES: Este código crear una instancia nueva de la clase llamada <code>o</code>, ejecuta <code>aMethod</code>, cambia <code>propertyA</code> a una cadena diferente y entonces llama a <code>dumpProperties</code> (que muestra los campos).

note: (itstool) path: section/p
en: Save the code in the <file>main.js</file> and then run it by using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> from the menu or using the toolbar.
es_ES: Guarde el código en el archivo <file>main.js</file> y ejecútelo usando <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> desde el menú o usando la barra de herramientas.

note: (itstool) path: section/title
en: A first Gtk application
es_ES: Una primera aplicación en GTK

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in JavaScript:
es_ES: Vea como queda una aplicación GTK+ muy básica en JavaScript:

note: (itstool) path: section/p
en: Let's take a look at what's happening:
es_ES: Eche un vistazo a lo que está pasando:

note: (itstool) path: item/p
en: The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.
es_ES: La primera línea importa el espacio de nombres de GTK+ (es decir, incluye la biblioteca GTK+). Las bibliotecas las proporciona «GObject Introspection (gi)», que implementa asociaciones de lenguajes para la mayoría de las bilbiotecas de GNOME.

note: (itstool) path: item/p
en: <code>Gtk.init</code> initializes the Gtk library; this statement is mandatory for all Gtk programs.
es_ES: <code>Gtk.init</code> inicializa la biblioteca GTK; esta sentencia es obligatoria para todos los programas GTK.

note: (itstool) path: item/p
en: The next line creates the main window by creating a new <code>Gtk.Window</code> object. You can pass several properties to the window's constructor by using the syntax <code>{property: value, property: value, ...}</code>. In this case we are setting the title of the window.
es_ES: La siguiente línea crea la ventana principal creando un objeto <code>Gtk.Window</code>. Puede pasar varias propiedades al constructor de la ventana usando la sintaxis <code>{property: value, property: value, ...}</code>. En este caso, se está estableciendo el título de la ventana.

note: (itstool) path: item/p
en: The next line explicitly shows the window. In Gtk, every widget is hidden by default.
es_ES: La siguiente línea muestra explícitamente la ventana. En GTK+, cada widget está oculto de manera predeterminada.

note: (itstool) path: item/p
en: Finally, <code>Gtk.main</code> runs the main loop — in other words, it executes the program. The main loop listens for events (signals) from the user interface and then calls a signal handler which will do something useful. We'll learn more about signals shortly.
es_ES: Finalmente, <code>Gtk.main</code> ejecuta el bucle principal; en otras palabras, ejecuta el programa. El bucle principal escucha los eventos (señales) de la interfaz del usuario y llama a un gestor de la señal que hará algo útil. En breve aprenderá más cosas sobre las señales.

note: (itstool) path: section/p
en: Save the code in <file>main.js</file> and run it. You will notice that the application does not quit when you close the window. This is because we haven't set up a signal handler to deal with the window's <code>destroy</code> (close) signal yet. We'll do this shortly, but for now you can just hit <keyseq><key>Ctrl</key><key>C</key></keyseq> in the terminal window to quit the program.
es_ES: Guarde el código en <file>main.js</file> y ejecútelo. Notará que la aplicación no termina cuando cierra la ventana. Esto es porque todavía no se ha configurado un gestor de señal para gestionar la señal <code>destroy</code> (cerrar) de la ventana. Esto se hará en breve, pero por el momento puede pulsar <keyseq><key>Ctrl</key><key>C</key></keyseq> en la ventana de la terminal para salir del programa.

note: (itstool) path: section/title
en: Adding classes
es_ES: Añadir clases

note: (itstool) path: section/p
en: The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:
es_ES: La manera correcta de programar en GTK+ es usando clases. Reescriba el código que acaba de escribir usando clases:

note: (itstool) path: section/p
en: Notice that the program is the same; we just moved the window creation code to our own <code>ImageViewer</code> class. The class's constructor calls the <code>_init</code> method, which creates and shows the window. We then create an instance of the class before running the main loop (<code>Gtk.main</code>).
es_ES: Tenga en cuenta que el programa es el mismo; simplemente se ha movido el código de creación de la ventana a la clase <code>ImageViewer</code>. El constructor de la clase llama al método <code>_init</code>, que crea y muestra la ventana. Se crea entonces una instancia de la clase antes de ejecutar el bucle principal (<code>Gtk.main</code>).

note: (itstool) path: section/p
en: This code is modular and can be split into multiple files easily. This makes it cleaner and easier to read.
es_ES: El código es modular y se puede dividir el varios archivos fácilmente. Esto hace que sea más limpio y fácil de leer.

note: (itstool) path: section/title
en: Signals
es_ES: Señales

note: (itstool) path: section/p
en: Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:
es_ES: Las señales son un concepto clave en la programación en GTK. Cuando pasa algo en un objeto, emite una señal; por ejemplo, cuando se pulsa un botón, emite la señal <code>clicked</code>. Si quiere que su programa haga algo cuando ocurre ese evento, debe conectar una función (un «gestor de la señal») a esa señal. Aquí hay un ejemplo:

note: (itstool) path: section/p
en: The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.
es_ES: Las dos últimas líneas crean un <code>Gtk.Button</code> llamado <code>b</code> y conectan su señal <code>clicked</code> con la función <code>button_clicked</code> que se ha definido anteriormente. Cada vez que se pulsa un botón, se ejecuta el código de la función <code>button_clicked</code>. Esto sólo imprime un mensaje aquí.

note: (itstool) path: section/p
en: The syntax for connecting any signal to a function is:
es_ES: La sintaxis para conectar cualquier señal a una función es:

note: (itstool) path: section/p
en: You can find signal definitions for any object in the <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">GTK class reference</link>.
es_ES: Puede encontrar definiciones de señales para cualquier objeto en la <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">referencia de clases de GTK+</link>.

note: (itstool) path: note/p
en: You can simplify the code by making use of an inline function definition:
es_ES: Puede simplificar el código usando una definición de función en línea:

note: (itstool) path: section/title
en: Closing the window
es_ES: Cerrar la ventana

note: (itstool) path: section/p
en: When you close a Gtk window it's not really closed, it's hidden. This allows you to keep the window around (which is useful if you want to ask the user if they really want to close the window, for example).
es_ES: Cuando cierra una ventana de GTK, realmente no se cierra, se oculta. Esto le permite mantener la ventana (lo que es útil si quiere preguntar al usuario si realmente quiere cerrar la ventana, por ejemplo).

note: (itstool) path: section/p
en: In our case, we really do just want to close the window. The simplest way of doing this is by connecting the <code>hide</code> signal of the GtkWindow object to a function that closes the application. Go back to the <file>image-viewer.js</file> file and add the following code to the <code>_init</code> method, on the line above <code>this.window.show</code>:
es_ES: En este caso, simplemente se quiere cerrar la ventana. La manera más sencilla de hacerlo es conectar la señal <code>hide</code> del objeto GtkWindow a una función que cierra la aplicación. Vuelva al archivo <file>image-viewer.js</file> y añada el siguiente código al método <code>_init</code>, en la línea anterior a <code>this.window.show</code>:

note: (itstool) path: section/p
en: This connects the <code>hide</code> signal of the window to Gtk's <code>main_quit</code> function, which ends the execution of the Gtk main loop. Once the main loop finishes, the function <code>Gtk.main</code> returns. Our program would continue to run any code written after the <code>Gtk.main ();</code> line, but since we don't have any code after that point, the program just ends.
es_ES: Esto conecta la señal <code>hide</code> de la ventana con la función <code>main_quit</code> de GTK, que termina la ejecución del bucle principal de GTK. Una vez que el bucle principal termina, la función <code>Gtk.main</code> retorna. El programa puede continuar ejecutando cualquier código que haya después de la línea <code>Gtk.main ();</code>, pero como no hay ningún código después de ese punto, el programa simplemente termina.

note: (itstool) path: section/title
en: Containers: Laying-out the user interface
es_ES: Contenedores: diseñar la interfaz de usuario

note: (itstool) path: section/p
en: Widgets (controls, such as buttons and labels) can be arranged in the window by making use of <em>containers</em>. You can organize the layout by mixing different types of containers, like boxes and grids.
es_ES: Los widgets (controles, como botones y etiquetas) se pueden organizar en la ventana usando <em>contenedores</em>. Puede organizar el diseño mezclando diferentes tipos de contenedores, como cajas y rejillas.

note: (itstool) path: section/p
en: A <code>Gtk.Window</code> is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">container types</link> are available, but we will use a <code>Gtk.Box</code> here. A <code>Gtk.Box</code> can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.
es_ES: Una <code>Gtk.Window</code> es en sí misma un tipo de contenedor, pero sólo puede poner un widget directamente en ella. Se quieren poner dos widgets, una imagen y un botón, por lo que se necesita poner un contenedor «de mayor capacidad» dentro de la ventana para que contenga otros widgets. Hay varios <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">tipos de contenedores</link> disponibles, pero aquí se usará una <code>Gtk.Box</code>. Una <code>Gtk.Box</code> puede contener varios widgets, organizados horizontal o verticalmente. Se pueden hacer diseños más complejos poniendo varias cajas dentro de otras, y así sucesivamente.

note: (itstool) path: note/p
en: There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.
es_ES: Hay un diseñador de interfaces gráficas llamado <app>Glade</app> integrado en <app>Anjuta</app> que hace que el diseño de IU sea realmente fácil. Sin embargo, para este ejemplo, se va a codificar todo manualmente.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>_init</code> method, immediately above the <code>this.window.show</code> line:
es_ES: Añada la caja y los widgets a la ventana. Inserte el siguiente código en el método <code>_init</code>, justo debajo de la línea <code>this.window.show</code>:

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>main_box</code> and sets two of its properties: the <code>orientation</code> is set to vertical (so widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 0 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
es_ES: La primera línea crea una <code>Gtk.Box</code> llamada <code>main_box</code> y establece dos de sus propiedades: la <code>orientation</code> se establece a «vertical» (por lo que los widgets se ordenan en columna), y el <code>spacing</code> entre los widgets, que se establece a 0 píxeles. La siguiente línea añade la <code>Gtk.Box</code> recién creada a la ventana.

note: (itstool) path: section/p
en: So far the window only contains an empty <code>Gtk.Box</code>, and if you run the program now you will see no changes at all (the <code>Gtk.Box</code> is a transparent container, so you can't see that it's there).
es_ES: De momento, la ventana sólo contiene una <code>Gtk.Box</code> vacía, y si ejecuta el programa ahora no verá ningún cambio (la <code>Gtk.Box</code> es un contenedor transparente, por lo que no puede que está ahí).

note: (itstool) path: section/title
en: Packing: Adding widgets to the container
es_ES: Empaquetado: añadir widgets al contenedor

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>this.window.add (main_box)</code> line:
es_ES: Para añadir algunos widgets a la <code>Gtk.Box</code>, inserte el siguiente código justo debajo de la línea <code>this.window.add (main_box)</code>:

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. Then, the image widget is added (<em>packed</em>) into the <code>main_box</code> container using <code>Gtk.Box</code>'s <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
es_ES: La primera línea crea una <code>Gtk.Image</code> nueva llamada <code>image</code>, que se usará para mostrar un archivo de imagen. Entonces, se añade el widget de imagen (<em>packed</em>) al contenedor <code>main_box</code> usando el método <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> de <code>Gtk.Box</code>.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the <code>Gtk.Box</code> (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
es_ES: <code>pack_start</code> toma 4 argumentos: el widget que añadir a la <code>Gtk.Box</code> (<code>child</code>); indica si la <code>Gtk.Box</code> debe crecer a lo largo cuando se añade el widget nuevo (<code>expand</code>); indica si el widget nuevo debe tomar todo el espacio adicional creado si la <code>Gtk.Box</code> se hace más grande (<code>fill</code>); y cuánto espacio debe haber, en píxeles, entre el widget y los demás widgets dentro de la <code>Gtk.Box</code> (<code>padding</code>).

note: (itstool) path: section/p
en: Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.
es_ES: Los contenedores (y los widgets) de GTK+ se expanden dinámicamente, si les deja, para rellenar el espacio disponible. No posicione widgets indicando unas coordenadas x-y precisas en la ventana; en lugar de eso, se posicionan relativos a otro. Esto hace que el manejo de la redimensión de las ventanas sea más fácil, y que los widgets tengan un tamaño sensible automática en la mayoría de las situaciones.

note: (itstool) path: section/p
en: Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.
es_ES: También tenga en cuenta cómo se organizan los widgets de manera jerárquica. Una vez empaquetados en la <code>Gtk.Box</code>, la <code>Gtk.Image</code> se considera un <em>hijo</em> de la <code>Gtk.Box</code>. Esto le permite tratar a todos los hijos de un widget como un grupo; por ejemplo, puede ocultar la <code>Gtk.Box</code>, lo que haría que también se ocultaran todos sus hijos a la vez.

note: (itstool) path: section/p
en: Now insert these two lines, below the two you just added:
es_ES: Ahora inserte estas dos líneas, justo debajo de las dos que acaba de añadir.

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>main_box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>false</code> here, whereas it was set to <code>true</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
es_ES: Estas líneas son similares a las dos primeras, pero esta vez crean un <code>Gtk.Button</code> y lo añaden a la <code>main_box</code>. Tenga en cuenta que aquí se está estableciendo el argumento <code>expand</code> (el segundo) a <code>false</code>, mientras que para la <code>Gtk.Image</code> se estableció a <code>true</code>. Esto hará que la imagen tome todo el espacio disponible y que el botón tome sólo el espacio que necesite. Cuando se maximiza la ventana, el tamaño del botón será el mismo, pero el tamaño de la imagen aumentará junto con el resto de la ventana.

note: (itstool) path: section/p
en: Finally, we must change the <code>this.window.show ();</code> line to read:
es_ES: Finalmente, se debe cambiar la línea <code>this.window.show ();</code> para leer:

note: (itstool) path: section/p
en: This will show the child of the Gtk window, and all of its children, and its children's children, and so on. (Remember that Gtk widgets are all hidden by default.)
es_ES: Esto mostrará el hijo de la ventana de GTK, y todos sus hijos, y los hijos de sus hijos, etcétera. (Recuerde que los widgets de GTK están ocultos de manera predeterminada.)

note: (itstool) path: section/title
en: Loading the image: Connecting to the button's <code>clicked</code> signal
es_ES: Cargar la imagen: conectar con la señal <code>clicked</code> del botón

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
es_ES: Cuando el usuario pulse en el botón <gui>Abrir</gui>, debe aparecer un diálogo en el que el usuario pueda elegir una imagen. una vez elegida, la imagen se debe cargar y mostrar en el widget de imagen.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>_openClicked</code>. Put this code immediately after the <code>var open_button = new Gtk.Button</code> line where the button was created:
es_ES: El primer paso es conectar la señal <code>clicked</code> del botón a una función gestora de la señal, llamada <code>_openClicked</code>. Ponga este código inmediatamente después de la línea <code>var open_button = new Gtk.Button</code> en la que se creó el botón:

note: (itstool) path: section/p
en: We are using the <em>Lang</em> JavaScript helper here. It allows us to connect a <em>class method</em> to the signal, rather than a plain function (without a class) which we had used before for the window's <code>hide</code> signal. Don't worry about this for now, it's just a technical detail. For it to work, you also need to put the following line at the top of the file:
es_ES: Aquí se está usando el JavaScript auxiliar <em>Lang</em>. Permite conectar un <em>método de clase</em> a la señal, en vez de una función normal (sin clase) que se haya usado anteriormente para señal <code>hide</code> de la ventana. No se preocupe por esto ahora, es sólo un detalle técnico. Para que funcione, debe poner también la siguiente línea en la parte superior del archivo:

note: (itstool) path: section/title
en: Loading the image: Writing the signal's callback
es_ES: Cargar la imagen: escribir la llamada de retorno de la señal

note: (itstool) path: section/p
en: Now we can create the <code>_openClicked()</code> method. Insert the following into the <code>ImageViewer.prototype</code> code block, after the <code>_init</code> method (and not forgetting the comma):
es_ES: Ahora se puede crear el método <code>_openClicked()</code>. Inserte el siguiente código en el bloque de código de <code>ImageViewer.prototype</code>, después del método <code>_init</code> (y no olvide la coma):

note: (itstool) path: item/p
en: The line beginning with <code>var chooser</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set four properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; <code>transient_for</code>, which sets the parent window of the dialog; and <code>modal</code> which, if set to <code>true</code>, prevents the user from clicking on another area of the application until the dialog is closed.
es_ES: La línea que comienza por <code>var chooser</code> crear un diálogo <gui>Abrir</gui>, que el usuario puede utilizar para elegir archivos. Se establecen cuatro propiedades: el título del diálogo, la acción (tipo) del diálogo (es un diálogo «open», pero se podría haber usado <code>SAVE</code> si la intención hubiese sido guardar un archivo; <code>transient_for</code>, que establece la ventana padre del diálogo; y <code>modal</code>, que si se establecer a <code>true</code> evita que el usuario pueda pulsar en otra área de la aplicación hasta que no se cierre el diálogo.

note: (itstool) path: item/p
en: The next two lines add <gui>Cancel</gui> and <gui>Open</gui> buttons to the dialog. The second argument of the <code>add_button</code> method is the (integer) value that is returned when the button is pressed: 0 for <gui>Cancel</gui> and 1 for <gui>Open</gui>.
es_ES: Las dos siguientes líneas añaden los botones <gui>Cancelar</gui> y <gui>Abrir</gui> al diálogo. el segundo argumento del método <code>add_button</code> es el valor (entero) que se devuelve cuando se pulsa el botón: 0 para <gui>Cancelar</gui> y 1 para <gui>Abrir</gui>.

note: (itstool) path: item/p
en: <code>set_default_response</code> determines the button that will be activated if the user double-clicks a file or presses <key>Enter</key>. In our case, we are using the <gui>Open</gui> button as default (which has the value 1).
es_ES: <code>set_default_response</code> determina qué botón se activará si el usuario hace una doble pulsación o presiona <key>Intro</key>. En este caso, se usa el botón <gui>Abrir</gui> como predeterminado (que tiene el valor «1»).

note: (itstool) path: item/p
en: The next three lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk.Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk.Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
es_ES: Las tres líneas siguientes restringen el diálogo <gui>Abrir</gui> para que sólo muestre archivos que se puedan abrir con <code>Gtk.Image</code>. Primero se crea un objeto de filtro; luego se añaden los tipos de archivos soportados por el <code>Gdk.Pixbuf</code> (que incluye la mayoría de los formatos de imagen como PNG y JPEG) al filtro. Por último, se establece que este filtro sea el filtro del diálogo <gui>Abrir</gui>.

note: (itstool) path: item/p
en: <code>chooser.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>chooser.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
es_ES: <code>chooser.run</code> muestra el diálogo <gui>Abrir</gui>. El diálogo esperará a que el usuario elija una imagen; cuando lo haga, <code>chooser.run</code> devolverá el valor <output>1</output> (devolvería <output>0</output> si el usuario pulsara <gui>Cancelar</gui>). La sentencia <code>if</code> comprueba esto.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the <code>Gtk.Image</code> to the filename of the image selected by the user. The <code>Gtk.Image</code> will then load and display the chosen image.
es_ES: Asumiendo que el usuario pulsó <gui>Abrir</gui>, la siguiente línea establece la propiedad <code>file</code> de la <code>Gtk.Image</code> al nombre del archivo de imagen seleccionada por el usuario. La <code>Gtk.Image</code> cargará y mostrará la imagen elegida.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.
es_ES: En la última línea de este método se destruye el diálogo <gui>Abrir</gui> porque ya no se necesita.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of JavaScript and Gtk) in not much time at all!
es_ES: Todo el código que necesita debe estar en su lugar, así que trate de ejecutar el código. Esto debería ser todo; un visor de imágenes completamente funcional (y un completo tour sobre JavaScript y GTK+) en poco tiempo.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.js">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="image-viewer/image-viewer.js">código de referencia</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Python)
es_ES: Visor de imágenes (Python)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK.
es_ES: Algo más que una sencilla aplicación «Hola mundo»; escribir un visor de imágenes en GTK.

note: (itstool) path: item/p
en: Write a basic GTK user interface in Python
es_ES: Escribir una interfaz de usuario básica en Python

note: (itstool) path: item/p
en: Basic knowledge of the python programming language
es_ES: Conocimiento básico del lenguaje de programación Python

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
es_ES: Seleccione <gui>PyGTK (automake)</gui> en la pestaña <gui>Python</gui>, pulse <gui>Continuar</gui>, y rellene los detalles en las siguientes páginas. Use <file>visor-imagenes</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Be sure to disable <gui>Use GtkBuilder for user interface</gui> as we will build the user interface manually in this example. For an example of using the interface designer, check the <link xref="guitar-tuner.py">Guitar-Tuner demo</link>.
es_ES: Asegúrese de desactivar <gui>Usar GtkBuilder para la interfaz del usuario</gui>, ya que, en este ejemplo, la interfaz de usuario se construirá manualmente. Para obtener un ejemplo del uso de diseñador de interfaces. revise la <link xref="guitar-tuner.py">demostración de afinador de guitarra</link>.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/visor-imagenes.py</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Contiene un ejemplo de código muy básico:

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in Python:
es_ES: Vea como queda una aplicación GTK+ muy básica en Python:

note: (itstool) path: item/p
en: In the <code>__init__</code> method of the <code>GUI</code> class creates an (empty) <code>Gtk.Window</code>, sets its title and then connects a signal to quit the application once the window is closed. That's pretty simple overall, more on signals later.
es_ES: En el método <code>__init__</code> de la clase <code>GUI</code> se crea un <code>Gtk.Window</code> (vacía), establece su título y después conecta una señal para salir de la aplicación una vez que se cierra la ventana. Es bastante simple, más acerca de señales en adelante.

note: (itstool) path: item/p
en: Next, <code>destroy</code> is defined which just quits the application. It is called by the <code>destroy</code> signal connected above.
es_ES: Después se define <code>destroy</code> que simplemente sale de la aplicación. Se le llama a través de la señal <code>destroy</code> conectada anteriormente.

note: (itstool) path: item/p
en: The rest of the file does initialisation for Gtk and displays the GUI.
es_ES: El resto del archivo realiza la inicialización de GTK+ y muestra la IGU.

note: (itstool) path: section/p
en: This code is ready to run, so try it using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>. It should show you an empty window.
es_ES: Este código está listo para usarse, por lo que puede probarlo usando <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq>. Debería mostrar una ventana vacía.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>__init__</code> method, immediately after the <code>window.connect_after</code> line:
es_ES: Añada la caja y los widgets a la ventana. Inserte el siguiente código en el método <code>__init__</code>, justo debajo de la línea <code>window.connect_after</code>:

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>box</code> and the following lines set two of its properties: the <code>orientation</code> is set to vertical (so the widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 5 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
es_ES: La primera línea crea una <code>Gtk.Box</code> llamada <code>box</code> y las siguientes líneas establecen dos de sus propiedades: la orientación (<code>orientation</code>) se establece a «vertical» (por lo que los widgets se colocan en columna), y el espaciado (<code>spacing</code>) entre los widgets se establece a 5 píxeles. La siguiente línea añade la <code>Gtk.Box</code> recién creada a la ventana.

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>window.add (box)</code> line:
es_ES: Para añadir algunos widgets a la <code>Gtk.Box</code>, inserte el siguiente código justo debajo de la línea <code>window.add (box)</code>:

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. As we need that later on in the signal handler, we will define it as a class-wide variable. You need to add <code>image = 0</code> to the beginning of the <code>GUI</code> class. Then, the image widget is added (<em>packed</em>) into the <code>box</code> container using GtkBox's <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
es_ES: La primera línea crea una <code>Gtk.Image</code> llamada <code>image</code>, que se usará para mostrar un archivo de imagen. Como se necesitará más tarde en el gestor de la señal, se definirá como variable a nivel de clase. Deberá añadir <code>image = 0</code> al principio de la clase <code>GUI</code>. Entonces se añade el widget de imagen (<em>packed</em>) en el contenedor <code>box</code> usando el método <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> de GtkBox.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the GtkBox (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
es_ES: <code>pack_start</code> toma 4 argumentos: el widget que añadir a la GtkBox (<code>child</code>); si la <code>Gtk.Box</code> debe crecer cuando añada el widget nuevo (<code>expand</code>); si el widget nuevo debe tomar todo el espacio adicional creado si la <code>Gtk.Box</code> crece (<code>fill</code>); y cuánto espacio debe haber, en píxeles, entre el widget y sus vecinos dentro de la <code>Gtk.Box</code> (<code>padding</code>).

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>False</code> here, whereas it was set to <code>True</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
es_ES: Estas líneas son similares a las dos primeras, pero esta vez crean un <code>Gtk.Button</code> y lo añaden a la <code>box</code>. Tenga en cuenta que se está estableciendo el argumento <code>expand</code> (el segundo) a <code>False</code>, mientras que para la <code>Gtk.Image</code> se estableció a <code>True</code>. Esto hará que la imagen tome todo el espacio disponible y que el botón tome sólo el espacio que necesite. Cuando se maximiza la ventana, el tamaño del botón será el mismo, pero el tamaño de la imagen aumentará junto con el resto de la ventana.

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open Image...</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
es_ES: Cuando el usuario pulse sobre el botón <gui>Abrir imagen...</gui>, debería aparece un diálogo en el que el usuario pueda elegir una imagen. una vez elegida, la imagen debería cargarse y mostrarse en el widget de imagen.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>on_open_clicked</code>. Put this code immediately after the <code>button = Gtk.Button()</code> line where the button was created:
es_ES: El primer paso es conectar la señal <code>clicked</code> del botón a una función gestora de la señal, llamada <code>on_open_clicked</code>. Ponga este código inmediatamente después de la línea <code>button = Gtk.Button()</code> en la que se creó el botón:

note: (itstool) path: section/p
en: This will connect the <code>clicked</code> signal to <code>on_open_clicked</code> method that we will define below.
es_ES: Esto conectará la señal <code>clicked</code> al método <code>on_open_clicked</code> que se definirá más adelante.

note: (itstool) path: section/p
en: Now we can create the <code>on_open_clicked</code> method. Insert the following into the <code>GUI</code> class code block, after the <code>__init__</code> method:
es_ES: Ahora se puede crear el método <code>on_open_clicked</code>. Inserte lo siguente dentro del bloque de clase <code>GUI</code>, después del método <code>__init__</code>:

note: (itstool) path: item/p
en: The line beginning with <code>dialog</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set three properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; and <code>transient_for</code>, which sets the parent window of the dialog.
es_ES: La línea que empieza por <code>dialog</code> crea un diálogo <gui>Abrir</gui>, que el usuario puede utilizar para abrir archivos. Se establecen tres propiedades: el título del diálogo; la acción (tipo) del diálogo (es un diálogo «open», pero se podría haber usado <code>SAVE</code> si se quisiese guardar un archivo; y <code>transient_for</code>, que establecer la ventana padre del diálogo.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
es_ES: <code>dialog.run</code> muestra el diálogo <gui>Abrir</gui>. El diálogo esperará a que el usuario elija una imagen; cuando lo haga, <code>dialog.run</code> devolverá el valor <output>1</output> (devolvería <output>0</output> si el usuario pulsara <gui>Cancelar</gui>). La sentencia <code>if</code> comprueba esto.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of Python and Gtk) in not much time at all!
es_ES: Todo el código que necesita debe estar en su lugar, así que trate de ejecutar el código. Esto debería ser todo; un visor de imágenes completamente funcional (y un completo tour sobre Python y GTK+) en poco tiempo.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.py">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="image-viewer/image-viewer.py">código de referencia</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Vala)
es_ES: Visor de imágenes (Vala)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTK+ application.
es_ES: Algo más que una sencilla aplicación «Hola mundo» en GTK+.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which opens and displays an image file. You will learn:
es_ES: En este tutorial se va a crear un programa que abre un archivo de imagen y lo muestra. Aprenderá a:

note: (itstool) path: item/p
en: How to set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
es_ES: Cómo configurar un proyecto básico usando el <link xref="getting-ready">EID Anjuta</link>.

note: (itstool) path: item/p
en: How to write a <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk application</link> in Vala
es_ES: Cómo escribir una <link href="http://developer.gnome.org/platform-overview/stable/gtk">aplicación de GTK+</link> en Vala

note: (itstool) path: item/p
en: Some basic concepts of <link href="http://developer.gnome.org/gobject/stable/">GObject</link> programming
es_ES: Algunos conceptos básicos de programación en <link href="http://developer.gnome.org/gobject/stable/">GObject</link>

note: (itstool) path: item/p
en: You may find the <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API Reference useful, although it is not necessary to follow the tutorial.
es_ES: Puede que la referencia de la API de <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> le resulte útil, aunque no es necesaria para seguir el tutorial.

note: (itstool) path: item/p
en: From the <gui>Vala</gui> tab choose <gui>GTK+ (Simple)</gui>, click <gui>Continue</gui>, and fill out your details on the next page. Use <file>image-viewer</file> as project name and directory.
es_ES: En la pestaña <gui>Vala</gui> seleccione <gui>GTK+ (simple)</gui>, pulse <gui>Continuar</gui>, y rellene los detalles en las siguientes páginas. Use <file>visor-imagenes</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is unchecked as we will create the UI manually in this tutorial.
es_ES: Asegúrese de que <gui>Usar GtkBuilder para la interfaz del usuario</gui> está desactivado, ya que, en este tutorial, la IU se creará manualmente.

note: (itstool) path: note/p
en: You will learn how to use the interface builder in the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial.
es_ES: Aprenderá a usar el constructor de interfaces en el tutorial del <link xref="guitar-tuner.vala">afinador de guitarra</link>.

note: (itstool) path: item/p
en: Click <gui>Continue</gui> then <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You will see this code:
es_ES: Pulse <gui>Continuar</gui> y luego <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/visor-imagenes.vala</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Verá el siguiente código:

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
es_ES: El código carga una ventana (vacía) desde el archivo de descripción de interfaz de usuario y la muestra. Se ofrecen más detalles a continuación; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The two <code>using</code> lines at the top import namespaces so we don't have to name them explicitly.
es_ES: Las dos líneas <code>using</code> importan espacios de nombres, por lo que no hay que nombrarlas explícitamente.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new (empty) window and connects a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">signal</link> to exit the application when that window is closed.
es_ES: El constructor de la clase <code>Main</code> crea una ventana (vacía) nueva y conecta una <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">señal</link> para salir de la aplicación cuando se cierra esa ventana.

note: (itstool) path: item/p
en: The <code>static main</code> function is run by default when you start a Vala application. It calls a few functions which create the <code>Main</code> class, set up and then run the application. The <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> function starts the GTK <link href="http://en.wikipedia.org/wiki/Event_loop">main loop</link>, which runs the user interface and starts listening for events (like clicks and key presses).
es_ES: La función <code>static main</code> se ejecuta de manera predeterminada cuando inicia una aplicación en Vala. Llama a algunas funciones que crean la clase <code>Main</code> y configuran y ejecutan la aplicación. La función <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> inicia el <link href="http://en.wikipedia.org/wiki/Event_loop">bucle principal</link> de GTK+, que ejecuta la interfaz de usuario y empieza a escuchar eventos (como pulsaciones del ratón y del teclado).

note: (itstool) path: section/p
en: Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
es_ES: Cambie la <gui>Configuración</gui> a <gui>Predeterminada</gui> y pulse <gui>Ejecutar</gui> para configurar la carpeta de construcción. Sólo necesita hacer esto una vez, para la primera construcción.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>.
es_ES: Ahora se dará vida a la ventana vacía. GTK+ organiza la interfaz de usuario con varios <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link> que pueden contener otros widgets e incluso otros contenedores. Aquí se usará el contenedor más sencillo disponible, una <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>.

note: (itstool) path: section/p
en: Add the following lines to the top of the <code>Main</code> class:
es_ES: Añada las siguientes líneas a la parte superior de la clase <code>Main</code>:

note: (itstool) path: section/p
en: Now replace the current constructor with the one below:
es_ES: Ahora reemplace el constructor actual con el siguiente:

note: (itstool) path: item/p
en: The first two lines are the parts of the GUI that we will need to access from more than one method. We declare them up here so that they are accessible throughout the class instead of only in the method where they are created.
es_ES: Las dos primeras líneas son partes de la IGU a las que se debe acceder desde más de un método. Se declaran aquí, por lo que son accesibles mediante la clase en vez de serlo solamente en el método en el que se crearon.

note: (itstool) path: item/p
en: The first lines of the constructor create the empty window. The next lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
es_ES: Las primeras líneas del constructor crean la ventana vacía. Las siguientes líneas crean los widgets que se quieren usar: un botón para abrir una imagen, el widget de la vista de la imagen en sí y la caja que se usará como contenedor.

note: (itstool) path: item/p
en: The calls to <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> add the two widgets to the box and define their behaviour. The image will expand into any available space whereas the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
es_ES: Las llamadas a <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> añaden los dos widgets a la caja y definen su comportamiento. La imagen se expandirá en cualquier espacio disponible, mientras que el botón será tan grande como se necesite. Se dará cuenta de que no se establecen tamaños explícitos de los widgets. Generalmente, en GTK+ no se necesita ya que hace que sea mucho más sencillo tener una distribución que se ve bien con diferentes tamaños de la ventana. A continuación, se añade la caja a la ventana.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>.
es_ES: Se debe definir qué pasa cuando el usuario pulsa en el botón. GTK+ usa el concepto de <em>señales</em>.

note: (itstool) path: item/p
en: When the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">button</link> is clicked, it fires the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link> signal, which we can connect to some action (defined in a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">callback</link> method).
es_ES: Cuando se pulsa el <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">botón</link> se emite la señal <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link>, que se puede conectar a alguna acción (definida en un método de un <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">retorno de la llamada</link>).

note: (itstool) path: item/p
en: This is done using the <code>connect</code> method of the button's <code>clicked</code> signal, which in this case tells GTK to call the (yet undefined) <code>on_image_open</code> callback method when the button is clicked. We will define the <em>callback</em> in the next section.
es_ES: Esto se hace usando el método <code>connect</code> de la señal <code>clicked</code> de los botones, que en este caso indica a GTK+ que llame al método del retorno de la llamada <code>on_image_open</code> (todavía no definida) cuando se pulsa el botón. El <em>retorno de la llamada</em> se definirá en la siguiente sección.

note: (itstool) path: item/p
en: In the callback, we need to access the <code>window</code> and <code>image</code> widgets, which is why we defined them as private members at the top of our class.
es_ES: En el retorno de la llamada, se debe acceder a los widgets <code>window</code> y <code>image</code> que es por lo que se definen como miembros privados en la parte superior de la clase.

note: (itstool) path: item/p
en: The last <code>connect</code> call makes sure that the application exits when the window is closed. The code generated by Anjuta called an <code>on_destroy</code> callback method which called <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>, but just connecting our signal to <code>main_quit</code> directly is easier. You can delete the <code>on_destroy</code> method.
es_ES: La última llamada a <code>connect</code> asegura que la aplicación termina cuando se cierra la ventana. El código generado por Anjuta llamaba a un método <code>on_destroy</code> que llamaba a <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>, pero simplemente conectando la señal <code>main_quit</code> directamente es más fácil. Puede eliminar el método <code>on_destroy</code>.

note: (itstool) path: section/p
en: We will now define the signal handler for the <code>clicked</code> signal for the button we mentioned before. Add this code after the constructor:
es_ES: Ahora se definirá el gestor de la señal <em>clicked</em> para el botón mencionado anteriormente. Añada este código después del constructor.

note: (itstool) path: section/p
en: This is a bit complicated, so let's break it down:
es_ES: Esto es un poco más complicado, así que se puede desglosar:

note: (itstool) path: note/p
en: A signal handler is a type of callback method that is called when a signal is emitted. Here the terms are used interchangeably.
es_ES: Un gestor de señal es un tipo de método de retorno de la llamada al que se llama cuando se emite la señal. Aquí se usan los términos intercambiados.

note: (itstool) path: item/p
en: The first argument of the callback method is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any.
es_ES: El primer argumento del método del retorno de la llamada es siempre el widget que envía la señal. A veces hay otros argumentos relativos a la señal que vienen después, pero <em>clicked</em> no tiene ninguno.

note: (itstool) path: item/p
en: In this case the <code>button</code> sent the <code>clicked</code> signal, which is connected to the <code>on_open_image</code> callback method:
es_ES: En este caso, el <code>button</code> envía la señal <code>clicked</code>, que se conecta al método del retorno de la llamada <code>on_open_image</code>:

note: (itstool) path: item/p
en: The <code>on_open_image</code> method takes the button that emitted the signal as an argument:
es_ES: El método <code>on_open_image</code> toma como argumento el botón que ha emitido la señal:

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created. <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link>'s constructor takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
es_ES: La siguiente línea interesante es en la que se crea el diálogo para elegir el archivo. El constructor de  <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link> toma el título del diálogo, la ventana padre del diálogo y varias opciones como el número de botones y sus valores correspondientes.

note: (itstool) path: item/p
en: Notice that we are using <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>stock</em></link> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
es_ES: Tenga en cuenta que se está usando nombres de botones del <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>almacén</em></link> de GTK+, en lugar de escribir manualmente «Cancelar» o «Abrir». La ventaja de usar nombres del almacén es que las etiquetas de los botones ya estarán traducidas en el idioma del usuario.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <em>GtkImage</em>. GtkImage is a widget which displays an image. A filter object is created first; we then add all kinds of files supported by <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
es_ES: Las dos líneas siguientes restringen el diálogo <gui>Abrir</gui> para que sólo muestre archivos que se puedan abrir con <code>GtkImage</code>. GtkImage es un widget que muestra una imagen. Primero se crea un objeto; luego se añaden los tipos de archivos soportados por el <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link> (que incluye la mayoría de los formatos de imagen como PNG y JPEG) al filtro. Por último, se establece que este filtro sea el filtro del diálogo <gui>Abrir</gui>.

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> value <code>ResponseType.ACCEPT</code> (it would return <code>ResponseType.CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
es_ES: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> muestra el diálogo <gui>Abrir</gui>. El diálogo esperará a que el usuario seleccione una imagen; cuando lo haga, <code>dialog.run</code> devolverá el valor <code>ResponseType.ACCEPT</code> de <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> (devolvería <code>ResponseType.CANCEL</code> si el usuario pulsara <gui>Cancel</gui>). La sentencia <code>switch</code> comprueba esto.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next lines get the filename of the image selected by the user, and tell the <code>GtkImage</code> widget to load and display the selected image.
es_ES: Asumiendo que el usuario pulsó <gui>Abrir</gui>, las siguientes líneas obtienen el nombre de archivo de la imagen seleccionada por el usuario e indican al widget <code>GtkImage</code> que cargue y muestre la imagen elegida.

note: (itstool) path: item/p
en: Destroying automatically hides the dialog.
es_ES: Al destruir se oculta el diálogo automáticamente.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
es_ES: Si todavía no lo ha hecho, elija la aplicación <file>src/visor-imagenes</file> en el diálogo que aparece. Finalmente, pulse <gui>Ejecutar</gui> y disfrute.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.vala">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="image-viewer/image-viewer.vala">código de referencia</link>.

note: (itstool) path: item/p
en: Set it up so that when the window opens it is of a specific size to start off with. For example, 200 X 200 pixels.
es_ES: Configúrela de tal manera que la ventana se abra con un tamaño determinado. Por ejemplo, 200x200 píxeles.

note: (itstool) path: credit/name
en: GNOME Documentation Team
es_ES: Equipo de documentación de GNOME

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
es_ES: Demostraciones de la plataforma de desarrollo de GNOME

note: (itstool) path: page/p
en: This guide includes a variety of coding examples, such writing an image viewer or weather application. Each demo comes with code that you can try, and explains how each example works. They are a great way to get started with the GNOME developer platform.
es_ES: Esta guía incluye varios ejemplos de código, tales como escribir un visor de imágenes o una aplicación meteorológica. Cada demostración incluye su código fuente, que puede probar, y explica cómo funciona cada ejemplo. Estos ejemplos son una muy buena manera de empezar con la plataforma de desarrollo de GNOME.

note: (itstool) path: section/title
en: Pick a Language
es_ES: Elija un lenguaje

note: (itstool) path: section/p
en: These developer demos are available in a range of programming languages. Pick one to get started:
es_ES: Esta demostraciones están disponibles en varios lenguajes de programación. Elija uno para empezar:

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in JavaScript
es_ES: Tutoriales, ejemplos de código y demostraciones de la plataforma en JavaScript

note: (itstool) path: section/title
en: Code samples and tutorials
es_ES: Código de ejemplo tutoriales

note: (itstool) path: info/desc
en: A widget which displays text
es_ES: Un widget que muestra un texto

note: (itstool) path: page/title (itstool) path: td/p
en: Label
es_ES: Etiqueta

note: (itstool) path: td/p (itstool) path: page/p
en: A simple label
es_ES: Una etiqueta sencilla

note: (itstool) path: info/desc
en: A label which can contain text
es_ES: Una etiqueta que puede contener texto

note: (itstool) path: page/p
en: A label displaying a friendly message.
es_ES: Un widget que muestra un mensaje amigable

note: (itstool) path: info/desc
en: A widget that displays a small to medium amount of text
es_ES: Un widget que muestra una cantidad pequeña o mediana de texto

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the label as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
es_ES: Otra manera de obtener lo que se tiene en el ejemplo es crear la etiqueta como una instancia de otra clase y añadirle la instancia de <code>MyWindow</code> en el método <code>do_activate(self)</code>:

note: (itstool) path: note/p
en: The highlighted lines indicate code that is different from the previous snippet.
es_ES: Las líneas de texto resaltadas indican que el código es diferente al del fragmento anterior.

note: (itstool) path: section/title
en: Useful methods for a Label widget
es_ES: Métodos útiles para un widget «Label»

note: (itstool) path: note/p
en: An explanation of how to work with strings in GTK+ can be found in <link xref="strings.py"/>.
es_ES: Puede encontrar una explicación de cómo trabajar con cadenas en GTK+ en la <link xref="strings.py"/>.

note: (itstool) path: item/p
en: <code>set_line_wrap(True)</code> breaks lines if the text of the label exceeds the size of the widget.
es_ES: <code>set_line_wrap(True)</code> rompe líneas si el texto de la etiqueta excede el tamaño del widget.

note: (itstool) path: item/p
en: <code>set_justify(Gtk.Justification.LEFT)</code> (or <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) sets the alignment of the lines in the text of the label relative to each other. The method has no effect on a single-line label.
es_ES: <code>set_justify(Gtk.Justification.LEFT)</code> (o <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) establece la alineación de las líneas en el texto de la etiqueta respecto de sí. El método no tiene efecto en una etiqueta de una sola línea.

note: (itstool) path: item/p
en: For decorated text we can use <code>set_markup("text")</code>, where <code>"text"</code> is a text in the <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">Pango Markup Language</link>. An example:
es_ES: Para decorar el texto se puede usar <code>set_markup("texto")</code>, donde <code>"texto"</code> es un texto en el <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">lenguaje de marcación Pango</link>. Un ejemplo:

note: (itstool) path: p/link
en: Creative Commons Attribution-ShareAlike 3.0 Unported License
es_ES: Creative Commons de Atribución-Compartir Igual 3.0 sin soporte

note: (itstool) path: license/p
en: This work is licensed under a <_:link-1/>. As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
es_ES: Este trabajo está licenciado bajo la <_:link-1/>. Como una excepción especial, los titulares de los derechos de autor le dan el permiso de copiar, modificar, y distribuir el código de ejemplo contenido en esta documentación bajo sus propios términos, sin restricción.

note: (itstool) path: info/desc
en: Legal information.
es_ES: Información legal.

note: (itstool) path: page/title
en: License
es_ES: Licencia

note: (itstool) path: page/p
en: This work is distributed under a CreativeCommons Attribution-Share Alike 3.0 Unported license.
es_ES: Este trabajo está distribuido bajo una licencia Creative Commons Compartir-Igual 3.0 sin soporte.

note: (itstool) path: page/p
en: You are free:
es_ES: Es libre de:

note: (itstool) path: item/title
en: <em>To share</em>
es_ES: Compartir

note: (itstool) path: item/p
en: To copy, distribute and transmit the work.
es_ES: Copiar, distribuir y comunicar públicamente la obra

note: (itstool) path: item/title
en: <em>To remix</em>
es_ES: Hacer obras derivadas

note: (itstool) path: item/p
en: To adapt the work.
es_ES: Adaptar el trabajo.

note: (itstool) path: page/p
en: Under the following conditions:
es_ES: Bajo las siguientes condiciones:

note: (itstool) path: item/title
en: <em>Attribution</em>
es_ES: Atribución

note: (itstool) path: item/p
en: You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
es_ES: Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).

note: (itstool) path: item/title
en: <em>Share Alike</em>
es_ES: Compartir igual

note: (itstool) path: item/p
en: If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.
es_ES: Si altera, transforma, o se basa en este trabajo, puede distribuir el trabajo resultante sólo bajo una licencia igual, similar o compatible.

note: (itstool) path: page/p
en: For the full text of the license, see the <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">CreativeCommons website</link>, or read the full <link href="http://creativecommons.org/licenses/by-sa/3.0/">Commons Deed</link>.
es_ES: Para un texto completo de la licencia, consulte el <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">sitio web de CreativeCommons</link>, o lea el <link href="http://creativecommons.org/licenses/by-sa/3.0/">resumen de Commons</link> completo.

note: (itstool) path: note/p
en: As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
es_ES: Como una excepción especial, los titulares de los derechos de autor le dan el permiso de copiar, modificar, y distribuir el código de ejemplo contenido en esta documentación bajo sus propios términos, sin restricción.

note: (itstool) path: info/desc
en: Create buttons bound to a URL
es_ES: Crear botones asociados a un URL

note: (itstool) path: page/p
en: This button links to the GNOME live webpage.
es_ES: Este botón enlaza con la página web de GNOME Live.

note: (itstool) path: info/desc
en: A button that links to a web page
es_ES: Un botón que enlaza con una página web

note: (itstool) path: page/p
en: A button that links to live.gnome.org.
es_ES: Un botón que enlaza con live.gnome.org.

note: (itstool) path: info/desc
en: A button bound to an URL
es_ES: Un botón asociado a un URL

note: (itstool) path: page/p
en: A button that links to a web page.
es_ES: Un botón que enlaza con una página web.

note: (itstool) path: section/title
en: Useful methods for a LinkButton widget
es_ES: Métodos útiles para un widget «LinkButton»

note: (itstool) path: item/p
en: <code>get_visited()</code> returns the 'visited' state (<code>True</code> or <code>False</code>) of the URI where the LinkButton points. The button becomes visited when it is clicked.
es_ES: <code>get_visited()</code> devuelve el estado «visitado» (<code>True</code> o <code>False</code>) del URI al que el «LinkButton» apunta. El botón se vuelve «visitado» cuando se pulsa.

note: (itstool) path: item/p
en: <code>set_visited(True)</code> sets the 'visited' state of the URI where the LinkButton points as <code>True</code> (analogously for <code>False</code>).
es_ES: <code>set_visited(True)</code> establece el estado «visitado» del URI al que el LinkButton apunta a <code>True</code> (análogamente para <code>False</code>).

note: (itstool) path: item/p
en: Each time the button is clicked, the signal <code>"activate-link"</code> is emitted. For an explanation of signals and callback functions, see <link xref="signals-callbacks.py"/>.
es_ES: Cada vez que se pulsa un botón, se emite la señal <code>«activate-link»</code>. Para obtener una explicación de señales y funciones de retorno de llamada, consulte la sección <link xref="signals-callbacks.py"/>.

note: (itstool) path: page/p
en: This button links to GNOME live.
es_ES: Un botón que enlaza con GNOME live.

[ctx: text]
note: (itstool) path: info/title
en: Magic mirror (Vala)
es_ES: Espejo mágico (Vala)

note: (itstool) path: info/desc
en: Use your webcam as a mirror using the GStreamer framework and GTK+
es_ES: Utilice su cámara web como un espejo usando el entorno de trabajo GStreamer y GTK+

note: (itstool) path: page/title
en: Magic mirror
es_ES: Espejo mágico

note: (itstool) path: synopsis/p
en: <em>Your mirror just fell off the wall and broke into a thousand pieces — but you need a mirror to shave your beard off or add some makeup! You only have 15 minutes left before catching the bus to work. So what can you do?</em>
es_ES: <em>Su espejo se ha caído al suelo y se ha roto en miles de pedazos; pero necesita un espejo para afeitarse o para maquillarse. Solo tiene 15 minutos antes de coger el autobús para ir al trabajo. ¿Qué puede hacer?</em>

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:
es_ES: En este tutorial se va a hacer un programa que le permite usar su cámara web como un espejo. Aprenderá a:

note: (itstool) path: item/p
en: Create a GTK+ application
es_ES: Crear una aplicación GTK+

note: (itstool) path: item/p
en: Access your webcam using GStreamer and embed the result into a window
es_ES: Acceder a su cámara web usando GStreamer y empotrar el resultado en una ventana

note: (itstool) path: item/p
en: Grab photos off your webcam
es_ES: Obtener las fotos de su cámara web

note: (itstool) path: item/p
en: Installed copies of GTK, GStreamer, and a Vala compiler
es_ES: Copias instaladas de GTK, GStreamer y de un compilador de Vala

note: (itstool) path: item/p
en: Basic knowledge of an object-oriented programming language
es_ES: Conocimientos básico de un lenguaje de programación orientado a objetos

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>Vala</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>magic-mirror</file> as project name and directory.
es_ES: Elija <gui>GTK+ (simple)</gui> de la pestaña <gui>Vala</gui>, pulse <gui>Adelante</gui> y rellene los detalles en las siguientes páginas. Use <file>espejo-magico</file> como nombre de proyecto y de carpeta.

note: (itstool) path: item/p
en: Disable <gui>Use GtkBuilder for user interface</gui> as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial using the interface builder.
es_ES: Desactive la opción <gui>Usar GtkBuilder para la interfaz del usuario</gui>, ya que, en este tutorial, la interfaz de usuario se creará manualmente. Revise el tutorial <link xref="guitar-tuner.vala">afinador-guitarra</link> usando el constructor de interfaces.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.
es_ES: Asegúrese de que <gui>Configurar paquetes externos</gui> está seleccionada. En la siguiente página, seleccione <em>gstreamermm-0.10</em> de la lista para incluir la biblioteca <app>GStreamer</app> en su proyecto.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/magic_mirror.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
es_ES: Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/espejo-magico.vala</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Debería ver algo de código que comience con las líneas:

note: (itstool) path: section/p
en: The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
es_ES: El código carga una ventana (vacía) y la muestra. A continuación hay más detalles; omita esta lista si entiende los conceptos básicos:

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window and sets its title. Afterwards the window is shown and a signal is connected which quits the application if the window is closed. More on signals later on.
es_ES: El constructor de la clase <code>Main</code> crea una ventana nueva y establece su título. Después se muestra la ventana y se conecta una señal que cierra la aplicación si se cierra la ventana. Se verán más señales más adelante.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.Main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
es_ES: La función estática <code>main</code> se ejecuta de manera predeterminada cuando inicia una aplicación en Vala. Llama a unas pocas funciones que crean la clase «Main», la configuran y ejecutan la aplicación. La función <code>Gtk.Main</code> inicia el bucle principal de GTK+, que ejecuta la interfaz de usuario y empieza a escuchar eventos (como pulsaciones del ratón y del teclado).

note: (itstool) path: section/title
en: Access the webcam video stream with GStreamer
es_ES: Acceder al flujo de vídeo de la cámara web con GStreamer

note: (itstool) path: section/p
en: The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.
es_ES: El entorno multimedia de trabajo GStreamer es capaz de manejar vídeo desde cámaras web. Añada GStreamer a su aplicación y podrá acceder al flujo de vídeo.

note: (itstool) path: item/p
en: First we remove the window we created before because GStreamer will take care of showing the picture on screen.
es_ES: Primero se quita la ventana creada anteriormente, ya que GStreamer se encargará de mostrar la imagen en la pantalla.

note: (itstool) path: item/p
en: Now we are creating a GStreamer element which accesses our webcam. We are using the Camerabin element, which is an all-in-one camera element and is capable of taking photos, videos, applying effects and much more. Perfect for our use case! With <code>this.camerabin.set_state (Gst.State.PLAYING)</code> we tell the GStreamer pipeline we just created to start playing. Easy, no?
es_ES: Ahora se va a crear un elemento de GStreamer que accede a la cámara web. Se va a usar el elemento «Camerabin», que es un elemento de cámara todo en uno capaz de hacer fotos, vídeos, aplicar efectos y mucho más. Perfecto para nuestro caso de uso. Con <code>this.camerabin.set_state (Gst.State.PLAYING)</code> se indica a la tubería de GStreamer que se acaba de crear que empiece a reproducir. Fácil, ¿no?

note: (itstool) path: item/p
en: Of course it is also possible to integrate the video more tightly into other windows but that is an advanced topic that includes some details of the X Window System we will omit here.
es_ES: Por supuesto, también es posible integrar el vídeo más ajustadamente en otras ventanas, pero esto es un tema avanzado que incluye algunos detalles sobre el sistema «X-Window» que aquí se omiten.

note: (itstool) path: item/p
en: Compile and run it again. You will end up with two windows. In the next step we will integrate the video into the GTK+ window.
es_ES: Compile y ejecute de nuevo. Acabará teniendo dos ventanas. En el siguiente paso, se integrará el vídeo en una ventana de GTK+.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>. There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window which involves some advanced techniques, and adds buttons to start/stop the picture.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="magic-mirror/magic-mirror.vala">código de referencia</link>. También hay una <link href="magic-mirror/magic-mirror-advanced.vala">implemnetación más amplia</link> que empotra la ventana en una ventana GTK regular que implica algunas técnicas avanzadas, y añade botones para iniciar/parar la imagen.

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link>.
es_ES: Para obtener más información sobre el lenguaje de programación Vala, puede querer revisar el <link href="http://live.gnome.org/Vala/Tutorial">tutorial de Vala</link>.

note: (itstool) path: section/title
en: Conclusion
es_ES: Conclusión

note: (itstool) path: section/p
en: That's it, you have managed to create a full-featured webcam photo application in 15 minutes. Now you can shave your beard off or add some makeup to your beautiful face, right before having a beautiful day at your workplace, where you can impress your friends and colleagues with an awesome application you just made in 15 minutes.
es_ES: Ya está, ha conseguido crear una aplicación de cámara web con todas las funciones de fotos en 15 minutos. Ahora puede afeitarse la barba o maquillar su bonita cara justo antes de tener un gran día en su trabajo, donde puede impresionar a sus amigos y colegas con una impresionante aplicación que ha hecho en 15 minutos.

note: (itstool) path: info/desc
en: A widget which holds GtkMenuItem widgets
es_ES: Un widget que contiene widgets «GtkMenuItem»

note: (itstool) path: page/p
en: A MenuBar created using XML and GtkBuilder.
es_ES: Una barra de menú usando XML y GtkBuilder.

note: (itstool) path: note/p
en: For a more in-depth look at this sample, please do not hesitate to check out the <link xref="menubar.vala">Vala MenuBar</link> and/or <link xref="menubar.py">Python MenuBar</link> tutorials.
es_ES: Para una visión más profunda a este ejemplo, no dude en echarle un vistazo a los tutoriales de la <link xref="menubar.vala">Barra de menú Vala</link> y/o la <link xref="menubar.py">Barra de menú Python</link>.

note: (itstool) path: page/title
en: MenuBar created using XML and GtkBuilder
es_ES: Una barra de menú creada usando XML y GtkBuilder.

note: (itstool) path: section/title
en: Create a MenuBar using XML
es_ES: Crear una barra de menú usando XML

note: (itstool) path: section/p
en: To create the menubar using XML:
es_ES: Para crear la barra de menú usando XML:

note: (itstool) path: item/p
en: Create <file>menubar.ui</file> using your favorite text editor.
es_ES: Cree <file>menubar.ui</file> usando su editor de texto favorito.

note: (itstool) path: item/p
en: Enter the following line at the top of the file:
es_ES: Añada la siguiente línea en la parte superior del archivo:

note: (itstool) path: item/p
en: We want to create the interface which will contain our menubar and its submenus. Our menubar will contain <gui>File</gui>, <gui>Edit</gui>, <gui>Choices</gui> and <gui>Help</gui> submenus. We add the following XML code to the file:
es_ES: Se quiere crear la interfaz que contendrá la barra de menú y sus submenús. Su barra de menú contendrá los submenús <gui>File</gui>, <gui>Edit</gui>, <gui>Choices</gui> y <gui>Help</gui>. Se le añade el siguiente código XML al archivo:

note: (itstool) path: item/p
en: Now we will create the .py file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
es_ES: Ahora se crea el archivo .py y se usa «GtkBuilder» para importar el <file>menubar.ui</file> que acaba de crear.

note: (itstool) path: section/title
en: Add the MenuBar to the window using GtkBuilder
es_ES: Añadir la barra de menú a la ventana usando «GtkBuilder»

note: (itstool) path: section/p
en: Now run the python application. It should look like the picture at the top of this page.
es_ES: Ahora ejecute la aplicación de Python. Se debería ver como la imagen en la parte superior de esta página.

note: (itstool) path: section/title
en: Add items to the menus
es_ES: Añadir elementos a los menús

note: (itstool) path: section/p
en: We start off by adding 2 menuitems to the <gui>File</gui> menu: <gui>New</gui> and <gui>Quit</gui>. We do this by adding a <code>section</code> to the the <code>File</code> submenu with these items. The <file>menubar.ui</file> should look like this (lines 6 to 13 inclusive comprise the newly added section):
es_ES: Se empieza añadiendo 2 elementos al menú <gui>File</gui>: <gui>New</gui> y <gui>Quit</gui>. Esto se hace añadiéndole una <code>section</code> al submenú <code>File</code> con estos elementos. El <file>menubar.ui</file> debe verse así (líneas 6 a 13 inclusive conforman la sección nueva):

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu.
es_ES: De esta misma manera puede añadirle un elemento <code>Copy</code> y uno <code>Paste</code> al submenú <code>Edit</code>, y un elemento <code>About</code> al submenú <code>Help</code>.

note: (itstool) path: section/title
en: Setup actions
es_ES: Configurar las acciones

note: (itstool) path: section/p
en: We now create the actions for "New" and "Quit" connected to a callback function in the Python file; for instance we create "new" as:
es_ES: Ahora se crean las acciones para «New» y «Quit», conectadas a una función de retorno de llamada en el archivo de Python; por ejemplo se crea «new» así:

note: (itstool) path: section/p
en: And we create the callback function of "new" as
es_ES: Y se crea la función de retorno de llamada de «new» como

note: (itstool) path: section/p
en: Now, in the XML file, we connect the menu items to the actions in the XML file by adding the "action" attribute:
es_ES: Ahora, en el archivo XML, se conectan los elementos del menú a las acciones en el archivo XML añadiendo el atributo «action»:

note: (itstool) path: section/p
en: Note that for an action that is relative to the application, we use the prefix <code>app.</code>; for actions that are relative to the window we use the prefix <code>win.</code>.
es_ES: Tenga en cuenta que para una acción relativa a la aplicación, se usa el prefijo <code>app.</code>; para acciones relativas a la ventana, se usa el prefijo <code>win.</code>.

note: (itstool) path: section/p
en: Finally, in the Python file, we add the action to the application or to the window - so for instance <code>app.new</code> will be added to the application in the method <code>do_startup(self)</code> as
es_ES: Finalmente, en el archivo de Python, se añade la acción a la aplicación o a la ventana: por ejemplo <code>app.new</code> se añadirá a la aplicación en el método <code>do_startup(self)</code> así:

note: (itstool) path: section/p
en: See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callbacks.
es_ES: Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada sobre señales y retornos de llamada.

note: (itstool) path: section/title
en: Actions: Application or Window?
es_ES: Acciones: ¿aplicación o ventana?

note: (itstool) path: section/p
en: Above, we created the "new" and "open" actions as part of the MyApplication class. Actions which control the application itself, such as "quit" should be created similarly.
es_ES: Anteriormente, se crearon las acciones «new» y «open» como parte de la clase «MyApplication». Las acciones que controlan la aplicación en sí, como «quit» deben crearse de manera similar.

note: (itstool) path: section/p
en: Some actions, such as "copy" and "paste" deal with the window, not the application. Window actions should be created as part of the window class.
es_ES: Algunas acciones, como «copy» y «paste» trabajan con la ventana, no con la aplicación. Las acciones de ventanas deben crearse como parte de la clase de la ventana.

note: (itstool) path: section/p
en: The complete example files contain both application actions and window actions. The window actions are the ones usually included in the <link xref="gmenu.py">application menu</link> also. It is not good practice to include window actions in the application menu. For demonstration purposes, the complete example files which follow include XML in the UI file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to the same actions as the menubar items of the same name.
es_ES: Los archivos de ejemplo completos contienen tanto acciones de aplicación como de ventana. Estas últimas son generalmente también las incluidas en el <link xref="gmenu.py">menú de la aplicación</link>. No es una buena práctica incluir acciones de ventana en el menú de la aplicación. Con motivo de demostración, los archivos de ejemplo completos incluyen XML en el archivo de IU que crea el menú de la aplicación incluyendo elementos «New» y «Open», y estos están vinculados a las mismas acciones que los elementos de la barra de menú del mismo nombre.

note: (itstool) path: section/title
en: Choices submenu and items with state
es_ES: Submenú «choices» y elementos con estado

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.py#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
es_ES: Las líneas 30 a 80 inclusive del <link xref="menubar.py#xml-code"/> demuestran el código XML usado para crear la IU del menú <gui>Choices</gui>.

note: (itstool) path: section/p
en: The actions created so far are <em>stateless</em>, that is they do not retain or depend on a state given by the action itself. The actions we need to create for the Choices submenu, on the other hand, are <em>stateful</em>. An example of creation of a stateful action is:
es_ES: Las acciones creadas hasta ahora <em>no tienen estado</em>, esto significa que no mantienen o dependen de un estado dado por la acción en sí. Las acciones que necesita crear para el submenú «Choices», por otro lado, <em>tienen estado</em>. Un ejemplo de creación de una acción con estado es:

note: (itstool) path: section/p
en: where the variables of the method are: name, parameter type (in this case, a string - see <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link> for a complete list of character meanings), initial state (in this case, 'line' - in case of a <code>True</code> boolean value it should be <code>Glib.Variant.new_boolean(True)</code>, and so on, see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link> for a complete list)
es_ES: donde las variables del método son: nombre, tipo de parámetro (en este caso, una cadena: consulte <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">aquí</link> para una lista completa de significados de caracteres), estado inicial (en este caso, «line»; en el caso de un valor booleano <code>True</code> debería ser <code>Glib.Variant.new_boolean(True)</code>, y así sucesivamente, consulte <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">aquí</link> para ver una lista completa).

note: (itstool) path: section/p
en: After creating the stateful SimpleAction we connect it to the callback function and we add it to the window (or the application, if it is the case), as before:
es_ES: Después de haber creado la «SimpleAction» con estado se conecta a su función de retorno de llamada y se añade a la ventana (o la aplicación, si es el caso), como antes:

note: (itstool) path: section/title
en: Complete XML UI file for this example
es_ES: Archivo de IU XML completo de este ejemplo

note: (itstool) path: section/title
en: Complete Python file for this example
es_ES: Archivo de Python completo de este ejemplo

note: (itstool) path: section/title
en: Mnemonics and Accelerators
es_ES: Atajos y aceleradores

note: (itstool) path: section/p
en: Labels may contain mnemonics. Mnemonics are underlined characters in the label, used for keyboard navigation. Mnemonics are created by placing an underscore before the mnemonic character. For example "_File" instead of just "File" in the menubar.ui label attribute.
es_ES: Las etiquetas pueden contener atajos. Los atajos son caracteres subrayados en la etiqueta, usados para navegar con el teclado. Se crean poniendo un guión bajo antes del carácter de atajo. Por ejemplo «_Archivo» en lugar de solo «Archivo» en el atributo «label» del «menubar.ui».

note: (itstool) path: section/p
en: The mnemonics are visible when you press the <key>Alt</key> key. Pressing <keyseq><key>Alt</key><key>F</key></keyseq> will open the <gui>File</gui> menu.
es_ES: Los atajos son visibles cuando pulsa la tecla <key>Alt</key>. Presionar <keyseq><key>Alt</key><key>A</key></keyseq> abrirá el menú <gui>Archivo</gui>.

note: (itstool) path: section/p
en: Accelerators can be explicitly added in the UI definitions. For example, it is common to be able to quit an application by pressing <keyseq><key>Ctrl</key><key>Q</key></keyseq> or to save a file by pressing <keyseq><key>Ctrl</key><key>S</key></keyseq>. To add an accelerator to the UI definition, you simply need add an "accel" attribute to the item.
es_ES: Los aceleradores pueden añadirse explícitamente en las definiciones de la IU. Por ejemplo, es común poder cerrar una aplicación presionando <keyseq><key>Ctrl</key><key>Q</key></keyseq> o guardar un archivo presionando <keyseq><key>Ctrl</key><key>S</key></keyseq>. Para añadir un acelerador a la definición de IU, simplemente añádale un atributo «accel» al elemento.

note: (itstool) path: section/p
en: <code mime="application/xml">&lt;attribute name="accel"&gt;&amp;lt;Primary&amp;gt;q&lt;/attribute&gt;</code> will create the <keyseq><key>Ctrl</key><key>Q</key></keyseq> sequence when added to the <code>Quit</code> label item. Here, "Primary" refers to the <key>Ctrl</key> key on a PC or the <key>⌘</key> key on a Mac.
es_ES: <code mime="application/xml">&lt;attribute name="accel"&gt;&amp;lt;Primary&amp;gt;q&lt;/attribute&gt;</code> creará la secuencia <keyseq><key>Ctrl</key><key>Q</key></keyseq> cuando se añada al elemento de la etiqueta <code>Quit</code>. Aquí, «Primary» se refiere a la tecla <key>Ctrl</key> en una PC o <key>⌘</key> en una Mac.

note: (itstool) path: section/title
en: Translatable strings
es_ES: Cadenas traducibles

note: (itstool) path: section/p
en: Since GNOME applications are being translated into <link href="http://l10n.gnome.org/languages/">many languages</link>, it is important that the strings in your application are translatable. To make a label translatable, simple set <code>translatable="yes"</code>:
es_ES: Dado que las aplicaciones de GNOME se traducen a <link href="http://l10n.gnome.org/languages/">muchos idiomas</link>, es importante que las cadenas en su aplicación puedan traducirse. Para hacer una etiqueta traducible, simplemente añada <code>translatable="yes"</code>:

note: (itstool) path: item/p
en: Now we will create the .vala file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
es_ES: Ahora se creará el archivo «.vala» y se usará «GtkBuilder» para importar el <file>menubar.ui</file> que acaba de crear.

note: (itstool) path: section/p
en: Now, compile the vala file, and run it. The application should look like the picture at the top of this page.
es_ES: Ahora, compile el archivo vala y ejecútelo. La aplicación debería verse como la imagen en la parte superior de esta página.

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu. We will hold off on adding items to the <link xref="menubar.vala#choices">Choices submenu</link> until further in the tutorial.
es_ES: De esta misma manera, ahora puede añadir elementos <code>Copy</code> y <code>Paste</code> al submenú <code>Edit</code>, y un elemento <code>About</code> al submenú <code>Help</code>. No añadiremos elementos al <link xref="menubar.vala#choices">submenú Choices</link> hasta más adelante en el tutorial.

note: (itstool) path: note/p
en: You do not need to recompile the vala program if you only made changes to the UI file. Just run your previously compiled application, and the UI changes will be reflected.
es_ES: No necesita recompilar el programa vala si sólo ha hecho cambios al archivo UI. Simplemente ejecute su aplicación anteriormente compilada y se reflejarán los cambios en la IU.

note: (itstool) path: section/p
en: This is a three step process.
es_ES: Este es un proceso de tres pasos.

note: (itstool) path: item/p
en: First we create the ActionEntry array in the MyApplication class. An ActionEntry consists of:
es_ES: Primero se crea la matriz «ActionEntry» en la clase «MyApplication». Un «ActionEntry» consiste de:

note: (itstool) path: item/p
en: the "action name" (mandatory)
es_ES: el «nombre de la acción» (obligatorio)

note: (itstool) path: item/p
en: the callback function to connect to the "activate" signal of the action (if applicable)
es_ES: la función de retorno de llamada que conectar a la señal «activate» de la acción (si corresponde)

note: (itstool) path: item/p
en: the type of the parameter that must be passed to the activate function for the action (if applicable)
es_ES: el tipo de parámetro que debe pasarse a la función «activate» para la acción (si corresponde)

note: (itstool) path: item/p
en: the initial state for this action (if applicable)
es_ES: el estado inicial de la acción (si corresponde)

note: (itstool) path: item/p
en: the callback to connect to "change-state" signal (if applicable)
es_ES: el retorno de llamada que conectar a la señal «change-state» (si corresponde)

note: (itstool) path: item/p
en: Second, we create the callback functions the actions are connected to.
es_ES: Segundo, se crean las funciones de retorno de llamada a las que se conectan las acciones.

note: (itstool) path: item/p
en: And lastly, we connect the menu items to the actions in the XML file by adding the "action" attribute:
es_ES: Y por último, se conectan los elementos del menú a las acciones en el archivo XML añadiendo el atributo «action»:

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.vala#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
es_ES: Las líneas 30 a 80 inclusive del <link xref="menubar.vala#xml-code"/> demuestran el código XML usado para crear la IU del menú <gui>Choices</gui>.

note: (itstool) path: section/p
en: The complete example files contain both application actions and window applications. The window actions are the ones usually included in the <link xref="gmenu.vala">application menu</link> also. It is not good practice to include window actions in the application menu. For demonstration purposes, the complete example files which follow include XML in the UI file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to the same actions as the menubar items of the same name.
es_ES: Los archivos de ejemplo completos contienen tanto acciones de aplicación como de ventana. Las acciones de ventana son las que generalmente también se incluyen en el <link xref="gmenu.vala">menú de la aplicación</link>. No es buena práctica incluir acciones de ventana en el menú de la aplicación. Con motivo de demostración, los archivos completos de ejemplo a continuación incluyen XML en el archivo UI que crea el menú de la aplicación incluyendo elementos «New» y «Open», vinculados a las mismas acciones que los elementos de la barra de menú del mismo nombre.

note: (itstool) path: section/title
en: Complete Vala file for this example
es_ES: Archivo de vala completo para este ejemplo

note: (itstool) path: section/title
en: Mnemonics
es_ES: Mnemónicos

note: (itstool) path: section/title
en: Accelerators
es_ES: Aceleradores

note: (itstool) path: info/desc
en: A widget that shows a menu when clicked on
es_ES: Un widget que muestra un menú cuando se pulsa

note: (itstool) path: page/p
en: The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as a GtkMenu, or an abstract GMenuModel. The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard GtkWidget. The most commonly used child is the provided GtkArrow.
es_ES: El widget «GtkMenuButton» se usa para mostrar un menú cuando se pulsa. Este menú puede proporcionarse como un «GtkMenu», o un «GMenuModel» abstracto. El widget «GtkMenuButton» puede contener cualquier widget hijo válido. Esto es casi cualquier «GtkWidget» estándar. El hijo más comúnmente usado es el «GtkArrow» proporcionado.

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 or later for the MenuButton to work.
es_ES: Necesita ejecutar GNOME 3.6 o superior para que el «MenuButton» funcione.

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 for the MenuButton to work.
es_ES: Necesita ejecutar GNOME 3.6 para que el «MenuButton» funcione.

note: (itstool) path: section/title
en: Useful methods for a MenuButton widget
es_ES: Métodos útiles para un widget «MenuButton»

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>about_action</code> is connected to the callback function <code>about_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 33 la señal <code>«activate»</code> de la acción <code>about_action</code> se conecta a la función de retorno de llamada <code>about_callback()</code> usando <code><var>action</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: section/p
en: The positioning of the menu is determined by the "direction" property of the menu button and the "halign" or "valign" properties of the menu. For example, when the direction is <code>Gtk.ArrowType.DOWN</code> (other option: <code>UP</code>) and the horizontal alignment is <code>Gtk.Align.START</code> (other options: <code>CENTER</code> and <code>END</code>), the menu will be positioned below the button, with the starting edge (depending on the text direction) of the menu aligned with the starting edge of the button. If there is not enough space below the button, the menu is popped up above the button instead. If the alignment would move part of the menu offscreen, it is 'pushed in'.
es_ES: La posición del menú está determinada por la propiedad «direction» del botón de menú y las propiedades «halign» o «valign» del menú. Por ejemplo, cuando «direction» es <code>Gtk.ArrowType.DOWN</code> (otra opción: <code>UP</code>) y la alineación horizontal es <code>Gtk.Align.START</code> (otras opciones: <code>CENTER</code> y <code>END</code>), el menú se posiciona bajo el botón, con su borde inicial (dependiendo de la dirección del texto) alineado con el borde inicial del botón. Si no hay suficiente espacio bajo el botón, el menú, en cambio, se abre sobre él. Si la alineación mueve parte del menú fuera de la pantalla, se «empuja hacia adentro».

note: (itstool) path: section/p
en: In the case of vertical alignment, the possible ArrowType directions are <code>LEFT</code> and <code>RIGHT</code> and the vertical alignment is again <code>START</code>, <code>CENTER</code> or <code>END</code>.
es_ES: En el caso de alineación vertical, las direcciones de «ArrowType» posibles son <code>LEFT</code> y <code>RIGHT</code>, y la alineación vertical es, nuevamente, <code>START</code>, <code>CENTER</code> o <code>END</code>.

note: (itstool) path: section/p
en: <code>set_align_widget(alignment)</code> and <code>set_direction(direction)</code> can be used to set these properties.
es_ES: <code>set_align_widget(alineación)</code> y <code>set_direction(dirección)</code> pueden usarse para establecer estas propiedades.

[ctx: text]
note: (itstool) path: info/title
en: Message board (C)
es_ES: Cuadro de mensajes (C)

note: (itstool) path: info/desc
en: A simple program using WebKitGTK+ and the DOM.
es_ES: Un programa sencillo usando WebKitGTK+ y el DOM.

note: (itstool) path: page/title
en: Message board
es_ES: Cuadro de mensajes

note: (itstool) path: item/p
en: How to display a web page with WebKit.
es_ES: Cómo mostrar una página web con WebKit

note: (itstool) path: item/p
en: How to manipulate the contents of a web page using WebKit's DOM functions.
es_ES: Como manipular el contenido de una página web usando las funciones del DOM del WebKit.

note: (itstool) path: synopsis/p
en: This tutorial assumes you are familiar with the C programming language and have a basic understanding of GTK+, including how to create and place widgets and how to connect callback functions to signals. See <link xref="image-viewer.c"/> to learn the basics of GTK+.
es_ES: En este tutorial se asume que está familiarizado con el lenguaje de programación C y que tiene un conocimiento básico de GTK+, incluyendo cómo crear y colocar widgets y cómo conectar funciones de retorno de retorno de la llamadas a señales. Consulte la sección <link xref="image-viewer.c"/> para aprender las nociones básicas de GTK+.

note: (itstool) path: section/p
en: The GNOME platform includes WebKitGTK+, built on top of the powerful WebKit HTML framework. WebKit is used throughout GNOME, not just to view web pages on the Internet, but also to create rich user interfaces that can be easily styled with CSS.
es_ES: La plataforma GNOME incluye WebKitGTK+, construido sobre el potente marco de trabajo WebKit. WebKitGTK se usa en todo GNOME, no sólo para ver páginas web en Internet, sino también para crear interfaces de usuario enriquecidas a las que se pueden añadir estilos fácilmente con CSS.

note: (itstool) path: section/p
en: In this tutorial, you will create a simple message board using WebKit. The message board will allow you to enter some text and have it added to a list of messages in HTML. Before you begin, you need to set up a project in Anjuta.
es_ES: En este tutorial, se creará un cuadro de mensajes sencillo usando WebKit. El cuadro de mensajes le permitirá introducir algún texto y añadirlo a una lista de mensajes en HTML. Antes de empezar, deberá configurar un proyecto en Anjuta.

note: (itstool) path: item/p
en: In Anjuta, click <guiseq><gui>File</gui><gui>New</gui> <gui>Project</gui></guiseq> to open the new project assistant.
es_ES: En Anjuta, pulse <guiseq><gui>Archivo</gui><gui>Nuevo</gui> <gui>Proyecto</gui></guiseq> para abrir el asistente para proyecto nuevo.

note: (itstool) path: item/p
en: Select <gui>GTK+ (simple)</gui> on the <gui>C</gui> tab, and click <gui>Continue</gui>.
es_ES: Seleccione <gui>GTK+ (simple)</gui> en la pestaña <gui>C</gui> y pulse <gui>Continuar</gui>.

note: (itstool) path: item/p
en: Fill out your details on the <gui>Basic information</gui> page. Use <input>message-board</input> for the project name. Click <gui>Continue</gui>.
es_ES: Rellene sus detalles en la página <gui>Información básica</gui>. Use <input>cuadro-mensajes</input> para el nombre del proyecto. Pulse <gui>Continuar</gui>.

note: (itstool) path: item/p
en: Disable the <gui>Use GtkBuilder for user interface</gui> option as this tutorial builds the user-interface manually.
es_ES: Desactive la opción <gui>Usar GtkBuilder para la interfaz del usuario</gui>, ya que, en este tutorial, la interfaz de usuario se construye manualmente.

note: (itstool) path: item/p
en: You need to tell Anjuta you're using WebKitGTK+ on this project. On the <gui>Project options</gui> page, select <gui>Configure external packages</gui>. Click <gui>Continue</gui>. On the <gui>Configure external packages</gui> page, check <gui>webkitgtk-3.0</gui>.
es_ES: Deberá indicar a Anjuta que va a usar WebKitGTK+ en este proyecto. En la página <gui>Opciones del proyecto</gui>, seleccione <gui>Configurar paquetes externos</gui>. Pulse <gui>Continuar</gui>. En la página <gui>Configurar paquetes externos</gui> seleccione <gui>webkitgtk-3.0</gui>.

note: (itstool) path: section/p
en: After you finish the new project assistant, open the file <file>src/main.c</file> from either the <gui>Project</gui> or the <gui>File</gui> tab. Anjuta will have filled this in with some basic GTK+ code from its templates. Since you are creating a WebKit project, you first need to include the WebKit headers. After the line that includes <code>gtk/gtk.h</code>, add the following line:
es_ES: Cuando termine el asistente de creación de un nuevo proyecto, abra el archivo <file>src/main.c</file> desde la pestaña <gui>Proyecto</gui> o desde <gui>Archivo</gui>. Anjuta lo habrá rellenado con algo de código GTK+ básico de sus plantillas. Ya que está creando un proyecto WebKit, primero debe incluir las cabeceras de WebKit. Después de la línea que incluye <code>gtk/gtk.h</code>, añada la siguiente línea:

note: (itstool) path: section/p
en: Verify that everything works by building what you have so far. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> or just press <keyseq><key>Shift</key><key>F7</key></keyseq>. The first time you build, you will be asked for some configure options. Just accept the defaults and click <gui>Execute</gui>.
es_ES: Verifique que todo funciona construyendo lo que tiene hasta ahora. Pulse <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> o simplemente pulse <keyseq><key>Mayús</key><key>F7</key></keyseq>. La primera vez que construya, se le pedirán algunas opciones de configuración. Simplemente acepte los valores predeterminados y pulse <gui>Ejecutar</gui>.

note: (itstool) path: section/p
en: You should now be able to run the program. Click <guiseq> <gui>Run</gui><gui>Execute</gui></guiseq> or just press <key>F3</key>. You should see an empty window appear.
es_ES: Ahora debería poder ejecutar el programa. Pulse <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> o simplemente pulse <key>F3</key>. Debería ver aparecer una ventana vacía.

note: (itstool) path: section/title
en: Lay out your window and web view
es_ES: La disposición de la ventana y la vista web

note: (itstool) path: section/p
en: Now that you can show a window, it's time to start working with WebKit. For this tutorial, you'll create a text entry and a web view and pack them both into a window. Find the function <code>create_window</code> and replace it with the following:
es_ES: Ahora que puede mostrar una ventana, es el momento de empezar a trabajar con WebKit. Para este tutorial, se creará una entrada de texto y una vista web y ambas se empaquetarán en una ventana. Busque la función <code>create_window</code> y reemplácela con lo siguiente

note: (itstool) path: section/p
en: You first create a <code>GtkWindow</code> object and set its title and default size. You also connect the <code>gtk_main_quit</code> function to the <code>delete-event</code> signal. The <code>delete-event</code> signal is emitted when the window is closed. The <code>gtk_main_quit</code> function is part of GTK, and it quits the application.
es_ES: Primero cree un objeto <code>GtkWindow</code> y establezca su título y su tamaño predeterminado. También puede conectar la función <code>gtk_main_quit</code> a la señal <code>delete-event</code>. La señal <code>delete-event</code> se emite cuando se cierra la ventana. La función <code>gtk_main_quit</code> es parte de GTK+, y sale de la aplicación.

note: (itstool) path: section/p
en: You then create a vertical box and add it to the window. A window can only hold a single child widget, so you need to use a box to add multiple widgets. The second argument to <code>gtk_box_new</code> sets the amount of padding (in pixels) between each child, and the next line puts a six-pixel border around the entire thing.
es_ES: Ahora cree una caja vertical y añádala a la ventana. Una ventana sólo puede contener un widget hijo, por lo que necesitará una caja para añadir varios widgets. El segundo argumento de <code>gtk_box_new</code> configura la cantidad de espacio (en píxeles) entre cada hijo, y la siguiente línea añade un borde de seis píxeles alrededor de la cosa completa.

note: (itstool) path: section/p
en: You next create a <code>GtkEntry</code> object and pack it into the box. The third and fourth arguments to <code>gtk_box_pack_start</code> specify that the entry shouldn't take up any extra space the box has available. The fourth argument is the amount of padding you want around the entry. In this case, you set the padding to zero, because you're allowing the box to handle all the padding.
es_ES: Después, cree un objeto <code>GtkEntry</code> y empaquételo en una caja. Los argumentos tercero y cuarto de <code>gtk_box_pack_start</code> especifican que la entrada no debería coger ningún espacio adicional que tenga la caja. El cuarto es la cantidad de relleno que quiere alrededor de la entrada. En este caso, se establece el relleno a cero, ya que se está permitiendo que la caja maneje todo el relleno.

note: (itstool) path: section/p
en: Before you add a web view, you have to create a scrolled window to put it inside of. The scrolled window will place scrollbars on the right and bottom when necessary, and prevent your web view from filling your entire screen. This time, you pass <code>TRUE</code> and <code>TRUE</code> to <code>gtk_box_pack_start</code> to allow the scrolled window (and thus, the web view) to use any extra space available in the box.
es_ES: Antes de añadir la vista web debe crear una ventana desplazada para ponerla dentro. La ventana desplazada contendrá barras de desplazamiento a la derecha y abajo cuando sea necesario, y evitará que la vista web abarque la pantalla entera. En este momento, se pasa <code>TRUE</code> y <code>TRUE</code> a <code>gtk_box_pack_start</code> para permitir que la ventana desplazada (y por lo tanto, la vista web) usen el espacio adicional disponible en la caja.

note: (itstool) path: section/p
en: Finally, you create a <code>WebKitWebView</code> and add it to the scrolled window. Then load a very basic HTML page into the web view by calling <code>webkit_web_view_load_string</code> with the following arguments:
es_ES: Finalmente, cree una <code>WebKitWebView</code> y añádala a la ventana desplazada. Entonces cargue una página HTML muy simple en la vista web llamando a <code>webkit_web_view_load_string</code> con los siguientes argumentos:

note: (itstool) path: item/p
en: The view itself. Because <code>view</code> is typed as a <code>GtkWidget*</code>, you have to use <code>WEBKIT_WEB_VIEW</code> to safely cast the object.
es_ES: La vista en sí. Ya que <code>view</code> es de tipo <code>GtkWidget*</code>, debe usar <code>WEBKIT_WEB_VIEW</code> para convertir el tipo del objeto con seguridad.

note: (itstool) path: item/p
en: The simplest HTML file you could possibly write.
es_ES: El archivo HTML más simple que pueda escribir.

note: (itstool) path: item/p
en: The MIME type of the content you provided. In this case, you're using plain HTML.
es_ES: El tipo MIME del contenido que ha proporcionado. En este caso, está usando HTML plano.

note: (itstool) path: item/p
en: The character encoding of the content you provided. Although you only used ASCII characters, it's a good idea to specify UTF-8. UTF-8 is used as the default encoding throughout the GNOME platform.
es_ES: La codificación de caracteres del contenido que ha proporcionado. Aunque sólo use caracteres ASCII, es una buena idea especificar UTF-8, ya que es la codificación que se usa de manera predeterminada en toda la plataforma GNOME.

note: (itstool) path: item/p
en: The base URI. You don't need it in this simple example, but you might want to provide a <sys>file:</sys> URI if you add images or other features where you want to use relative URI references.
es_ES: El URI base. En este ejemplo no se necesita, pero puede querer proporcionar un URI <sys>file:</sys> si añade imágenes u otras características cuando quiera usar referencias a URI relativos.

note: (itstool) path: note/p
en: Every time you add a widget, you have to call <code>gtk_widget_show</code> on it for it to be visible. If you call <code>gtk_widget_show_all</code> on a container widget like a <code>GtkBox</code>, GTK+ will automatically show all the widgets inside the container, to any depth. Sometimes you don't want to call <code>gtk_widget_show_all</code>, such as when you want to dynamically hide and show some widgets in response to events.
es_ES: Cada vez que añade un widget, debe llamar a la función <code>gtk_widget_show</code> sobre él para hacerlo visible. Si llama a <code>gtk_widget_show</code> en un contenedor de widgets como <code>GtkBox</code>, GTK+ mostrará automáticamente todos los widgets del contenedor, en cualquier nivel. Algunas veces no se quiere llamar a la función <code>gtk_widget_show_all</code>, como cuando se quieren ocultar o mostrar dinámicamente algunos objetos en respuesta a determinados eventos.

note: (itstool) path: section/p
en: Finally, you have to call <code>gtk_widget_show_all</code> on the box. Otherwise, none of the widgets you created will be visible. (The window is shown in the <code>main</code> function with <code>gtk_widget_show</code>.)
es_ES: Finalmente, debe llamar a la función <code>gtk_widget_show_all</code> sobre la caja. De otro modo, ninguno de los widgets que haya creado será visible. (La ventana se muestra en la función <code>main</code> con <code>gtk_widget_show</code>.)

note: (itstool) path: section/p
en: Build and run the message board again. You should see a window with a text entry and a web view. It doesn't do anything yet because the text entry and the web view don't know anything about each other.
es_ES: Construya y ejecute el cuadro de mensajes de nuevo. Debería ver una ventana con una entrada de texto y una vista web. Todavía no hace nada porque la entrada de texto y la vista web no saben nada la una acerca de la otra.

note: (itstool) path: section/title
en: Hook up signals
es_ES: Conectar señales

note: (itstool) path: section/p
en: Now you want to make the message board actually <em>do</em> something when you enter text into the text entry. To do this, connect a callback function to the <code>activate</code> signal of <code>entry</code>. GTK+ emits the <code>activate</code> signal whenever the user presses <key>Enter</key> in the entry. Add the following into <code>create_window</code>, anywhere after both <code>entry</code> and <code>view</code> have been defined:
es_ES: Ahora se quiere hacer que el cuadro <em>haga</em> algo cuando se introduce texto en la entrada de texto. Para hacer esto, conecte una función de retorno de la llamada a la señal <code>activate</code> de <code>entry</code>. GTK+ emite la señal <code>activate</code> cuando el usuario pulsa <key>Intro</key> en la entrada. Añada lo siguiente en <code>create_window</code>, en cualquier lugar después de que <code>entry</code> y <code>view</code> se hayan definido:

note: (itstool) path: section/p
en: You then have to actually define <code>entry_activate_cb</code>. Define it as follows, anywhere above <code>create_window</code>:
es_ES: Entonces se debe definir <code>entry_activate_cb</code>. Defínalo como quiera, en cualquier lugar por encima de <code>create_window</code>:

note: (itstool) path: section/p
en: The first thing you do is get a <code>WebKitDOMDocument</code> object that represents the HTML document displayed in <code>view</code>. The DOM classes and methods in WebKit allow you to inspect and manipulate the HTML document, and work very similarly to the DOM APIs you might already know from JavaScript.
es_ES: Lo primero que hacer es obtener un objeto <code>WebKitDOMDocument</code> que representa el documento HTML mostrado en la <code>view</code>. Las clases DOM y los métodos de WebKit le permiten inspeccionar y manipular el documento HTML, y trabajar de manera similar a las API DOM que ya debería conocer de JavaScript.

note: (itstool) path: section/p
en: Once you have the document, you want to get the <code>body</code> element so that you can add <code>div</code> elements to it. The <code>webkit_dom_document_query_selector</code> function lets you find an element in the document using CSS selectors. This keeps you from having to write tedious loops to traverse the document.
es_ES: Una vez que tenga el documento, querrá obtener el elemento <code>body</code> para poder añadirle elementos <code>div</code>. La función <code>webkit_dom_document_query_selector</code> le permite encontrar un elemento en el documento usando selectores CSS. Esto le evita tener que escribir bucles tediosos para recorrer el documento.

note: (itstool) path: section/p
en: Next, you create a new <code>div</code> element to hold the message. Every element you create has to be attached to a document, so the function to create an element takes the <code>WebKitDOMDocument</code> as its first arguments. You then set the text content of the element to the contents of the text entry. Because <code>gtk_entry_get_text</code> returns a <code>const gchar*</code>, you don't have to free the result.
es_ES: Ahora, cree un elemento <code>div</code> que contenga el mensaje. Cada elemento que cree se debe adjuntar se debe adjuntar a un documento, por lo que la función para crear un elemento toma el <code>WebKitDOMDocument</code> como primer argumento. Debe entonces establecer el contenido del elemento con el contenido de la entrada de texto. Dado que <code>gtk_entry_get_text</code> devuelve un <code>const gchar*</code>, no tiene que liberar el resultado.

note: (itstool) path: section/p
en: Finally, you append the new <code>div</code> element to the body and clear out the text entry so you can type something new. Build and run the program again and test it for yourself.
es_ES: Finalmente, añada el nuevo elemento <code>div</code> al cuerpo y limpie la salida de texto para poder escribir algo nuevo. Construya y ejecute el programa otra vez y pruébelo por su cuenta.

note: (itstool) path: section/title
en: Make it look better with CSS
es_ES: Mejorar el aspecto con CSS

note: (itstool) path: section/p
en: At this point, your program is completely functional, but not very pretty. You can style the message display with CSS, just like you can with any other HTML page. There are many ways you could attach some CSS to the page: You could add it in the initial HTML document. You could inline it in the <code>style</code> attribute of the <code>div</code> elements. You could even programmatically construct it using the DOM APIs.
es_ES: En este punto, su programa es completamente funcional, pero no es muy atractivo. Puede añadir estilos a la visualización de los mensajes con CSS, igual que puede hacer con una página web. Hay muchas maneras de incluir un CSS en la página: puede añadirlo al documento HTML inicial, añadirlo en línea usando el atributo <code>style</code> de los elementos <code>div</code> o puede incluso construirlo con programación usando las API DOM.

note: (itstool) path: section/p
en: In this tutorial, you'll attach the CSS using the <code>user-stylesheet-uri</code> property of the <code>WebKitWebSetting</code> object attached to your web view. In a more complete application, you would want to save and load your HTML file. Keeping the style information outside the actual HTML means that you can change the styling completely within your application, without having to change users' files. You would normally just install a file along with your application, but just to keep everything in one file for this demo, we'll use a trick called a data URI. First, define the CSS as a static string near the top of your file.
es_ES: En este tutorial se adjuntará el CSS usando la propiedad <code>user-stylesheet-uri</code> del objeto <code>WebKitWebSetting</code> empotrado en la vista web. En una aplicación más completa, se podría querer guardar y cargar el archivo HTML. Mantener la información de estilo fuera del HTML actual significa que se puede cambiar el estilo completo de la aplicación sin tener que cambiar los archivos del usuario. Normalmente se instala un archivo junto con la aplicación, pero simplemente para mantener todo en un archivo en esta demostración, se usará un truco llamado URI de datos. En primer lugar, se define el CSS como una cadena estática cerca del principio del archivo.

note: (itstool) path: section/p
en: All you have in this example are <code>div</code> elements inside a <code>body</code> element. If you created more complicated HTML, you could use whatever CSS is necessary. In fact, if you're comfortable with CSS, you should trying changing this to something you like better.
es_ES: Todo lo que tiene en este ejemplo son elementos <code>div</code> dentro de un elemento <code>body</code>. Si ha creado HTML más complejo, puede usar cualquier CSS que sea necesario. Si se siente cómodo usando CSS debería intentar cambiar esto por algo que le guste más.

note: (itstool) path: section/p
en: To apply the CSS, you set the <code>user-stylesheet-uri</code> in the <code>create_window</code> function, anywhere after <code>view</code> has already been defined.
es_ES: Para aplicar el CSS, configure la <code>user-stylesheet-uri</code> en la función <code>create_window</code>, en cualquier lugar después de que <code>view</code> se haya definido.

note: (itstool) path: section/p
en: Also, make sure to add variable declarations for <code>tmp</code> and <code>css</code> to the top of <code>create_window</code>.
es_ES: Asegúrese de añadir declaraciones de variables para <code>tmp</code> y <code>css</code> a la parte superior de <code>create_window</code>.

note: (itstool) path: section/p
en: A data URI starts with <sys>data:</sys> and some information about the content type and how the data is encoded. The actual data follows after a comma, in this case encoded in Base64. Unlike other URI schemes like <sys>http:</sys>, <sys>ftp:</sys>, and <sys>file:</sys>, the <sys>data:</sys> URI scheme doesn't specify where to find a file to load. Rather, it gives the entire contents of the file.
es_ES: Un URI de datos empieza por <sys>data:</sys> y cierta información sobre el tipo de contenido y cómo se codifican los datos. Los datos reales siguen después de una coma, en este caso, codificados en Base64. A diferencia de otros esquemas de URI como <sys>http:</sys>, <sys>ftp:</sys>, y <sys>file:</sys>, the <sys>data:</sys>, el esquema del URI no especifica dónde encontrar un archivo que cargar. En vez de eso, ofrece el contenido completo del archivo.

note: (itstool) path: section/p
en: The code above first encodes your CSS definitions in Base64, then combines that with a fixed string to create a data URI. The <code>g_strconcat</code> function can take any number of string arguments and concatenate them all together, so you have to pass <code>NULL</code> as the final argument so it knows when to stop. And don't forget to free those temporary strings after you set the stylesheet property.
es_ES: El código anterior primero codifica las definiciones CSS en Base64, y luego las combina con una cadena fija para crear una URI de datos. La función <code>g_strconcat</code> puede tomar cualquier número de argumentos de cadena y concatenarlos todos juntos, por lo que tiene que pasar <code>NULL</code> como argumento final para que sepa dónde parar. No olvide liberar esas cadenas temporales después de establecer la propiedad de la hoja de estilos.

note: (itstool) path: section/p
en: Build and run the program again. It should now work exactly the same as at the end of the last section, except the messages will be nicely styled with a border and a subtle background gradient.
es_ES: Construya y ejecute el programa de nuevo. Debería funcionar exactamente igual que al final de la última sección, excepto que los mensajes tendrán estilos con un borde y un degradado de fondo sutil.

note: (itstool) path: section/title
en: Learn more
es_ES: Aprender más

note: (itstool) path: section/p
en: This tutorial showed you how to create a basic application using GTK+ and WebKit, including showing a document and manipulating its contents. To create a real application, you probably want to do a little bit more. Try adding features on your own. Here are a few ideas:
es_ES: Este tutorial le ha mostrado cómo crear una aplicación sencilla usando GTK+ y WebKit, incluyendo cómo mostrar un documento y manipular su contenido. Para crear una aplicación real, probablemente quiera hacer algo más. Pruebe a añadir características usted mismo. Aquí hay algunas ideas:

note: (itstool) path: item/p
en: If you're comfortable with CSS, try changing the style of the message display. CSS is easy to get started with, but increasingly more powerful. There is a wealth of CSS tutorials on the Internet, and just about everything you can do on the web, you can do in this application.
es_ES: Si se siente cómo usando CSS, pruebe a cambiar el estilo de la visualización del mensaje. Es fácil iniciarse en CSS, pero cada vez es más potente. Hay una gran cantidad de tutoriales de CSS en Internet, y casi todo lo que se puede hacer en una página web, se puede hacer en esta aplicación.

note: (itstool) path: item/p
en: Right now, you lose all your messages whenever you close the message board. Try saving the HTML contents after each post, and loading the saved file (if it exists) on startup.
es_ES: Ahora mismo, todos los mensajes se pierden al cerras el cuadro de mensajes. Pruebe a guardar el contenido HTML después de cada envío, y a cargar el archivo guardado (si existe) al inicio.

note: (itstool) path: item/p
en: If you keep your messages around for a long time, you'll start wondering when you posted them. Add a timestamp to each message when it's posted. You'll probably want to create some additional child <code>div</code> elements with different classes that you can style in the CSS.
es_ES: Si guarda sus mensajes durante mucho tiempo, empezará a preguntarse dónde los escribió. Añada una marca de tiempo a cada mensaje cuando se envía. Probablemente quiera crear algún elemento <code>div</code> hijo adicional con diferentes clases que puede modelar en el CSS.

note: (itstool) path: item/p
en: This program keeps messages around forever. Think about ways you could allow the user to delete messages. Perhaps you want messages to disappear automatically after they're too old, or after there are a certain number of messages before them. Or you could add a link in each message to delete it. You could even override the context menu when you right-click on a message. These features involve exploring WebKit's DOM API more.
es_ES: Este programa guarda los mensajes para siempre. Piense alguna manera para que el usuario pueda eliminar mensajes. Tal vez quiera que los mensajes desaparezca automáticamente cuando son muy antiguos o después de que haya cierto número de mensajes por delante. O podría añadir un enlace en cada mensaje para eliminarlo. También puede omitir el menú contextual cuando pulsa con el botón derecho sobe un mensaje. Esta características implican explorar más la API del DOM de WebKit.

note: (itstool) path: info/desc
en: A message window
es_ES: Una ventana de mensaje

note: (itstool) path: page/p
en: A modal message dialog which can cause the world to explode.
es_ES: Un diálogo de mensaje modas que puede hacer que el mundo explote.

note: (itstool) path: note/p
en: To test out the application once it has started running, you can click on the "Message Dialog" tab that appears in the top menubar of the screen.
es_ES: Para probar la aplicación una vez que la ha ejecutado, puede pulsar la pestaña «Message Dialog», en la barra de menú superior de la pantalla.

note: (itstool) path: info/desc
en: A popup message attached to a window
es_ES: Una mensaje emergente acoplado a una ventana

note: (itstool) path: page/p
en: A MessageDialog is a modal message dialog, which means a popup that you have to respond to before you get back to what you were doing in the window that it's attached to. This one can cause the world to explode (or at least it says that it can). To make the popup appear when you run this sample, click on "Message" inside of its application menu -- that's the menu that appears when you click on an application's name in the upper-left screen corner, next to Activities.
es_ES: Un «MessageDialog» es un diálogo de mensaje modal, es decir un diálogo emergente al que tiene que responder antes de volver a lo que estaba haciendo en la ventana a la que está vinculado. Este puede hacer que el mundo explote (o al menos eso dice). Para hacer que el diálogo aparezca cuando ejecute este ejemplo, pulse «Message» dentro de su menú de aplicación (el que aparece cuando pulsa en el nombre de la aplicación en la esquina superior izquierda, junto a «Actividades»).

note: (itstool) path: note/p
en: The difference between a MessageDialog and a <link xref="dialog.js">Dialog</link> is that a Dialog can contain whatever widgets and content you want to put in it, whereas a MessageDialog is just a convenient way to make popups appear with a basic message and buttons.
es_ES: La diferencia entre un «MessageDialog» y un <link xref="dialog.js">Dialog</link> es que un «Dialog» puede contener cualquier widget y tener el contenido que quiera, mientras que un «MessageDialog» es sólo una manera cómoda de hacer que aparezca un diálogo emergente con un mensaje básico y botones.

note: (itstool) path: note/p
en: Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.
es_ES: 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».

note: (itstool) path: section/p
en: For this example, all that we have in the window the popup comes out of is a silly warning <link xref="label.js">Label</link>.
es_ES: Para este ejemplo, todo lo que hay en la ventana de la que viene el diálogo emergente es una <link xref="label.js">Label</link> de advertencia tonta.

note: (itstool) path: section/title
en: Creating the application's menu
es_ES: Crear el menú de la aplicación

note: (itstool) path: section/p
en: Here, we build the <link xref="gmenu.js">GMenu</link> where we'll be putting the "Message" button which triggers the popup MessageDialog. The GMenu is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: Message, and Quit.
es_ES: Aquí, se construye el <link xref="gmenu.js">GMenu</link> donde se pondrá el botón «Message» que acciona el «MessageDialog» emergente. El «GMenu» es el menú que aparece cuando pulsa el nombre de la aplicación en la esquina superior izquierda de la pantalla, junto al menú «Actividades». Este menú sólo tiene dos opciones: «Message» y «Quit».

note: (itstool) path: section/title
en: Creating the MessageDialog
es_ES: Crear el «MessageDialog»

note: (itstool) path: section/p
en: To make our MessageDialog a popup attached to the main window, we set its modal property to true and set it to be "transient_for" _window. After that, we can set what kind of buttons it has and what kind of message it is (which determines what icon appears next to the message), and write out the text inside it, before connecting its "response" signal to the callback function which handles it.
es_ES: Para hacer del «MessageDialog» un diálogo emergente vinculado a la ventana principal, se establece su propiedad «modal» a «true» y «transient_for» a «_window». Después, se puede configurar el tipo de botones que tiene y qué tipo de mensaje es (determinando el icono junto al mensaje), y escribir su texto, antes de conectar su señal «response» a la función de retorno de llamada que la maneja.

note: (itstool) path: note/p
en: Here are some resources for making your own MessageDialogs:
es_ES: Aquí hay algunos recursos para hacer sus propios «MessageDialog»:

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">List of button types</link>
es_ES: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">Lista de tipos de botones</link>

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">List of message types</link>
es_ES: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">Lista de tipos de mensajes</link>

note: (itstool) path: section/p
en: This function takes two parameters, the MessageDialog and its response_id, both of which are automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the popup is destroyed afterwards.
es_ES: Esta función toma dos parámetros, el «MessageDialog» y su «response_id», ambos proporcionados automáticamente (no tiene que pasarlos manualmente para que funcione). Aquí se usa un interruptor simple para cambiar el texto de la «etiqueta de advertencia», dependiendo de qué opción elija. «DELETE_EVENT» ocurre su presiona «Escape» para cancelar el «MessageDialog», en lugar de presionar «OK» o «Cancel». Elija lo que elija, el diálogo emergente de destruirá a continuación.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished MessageDialogExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «MessageDialogExample» terminada, y se ejecuta la aplicación.

note: (itstool) path: page/p
en: A message dialog which prints messages on the terminal, depending on your choices.
es_ES: Un diálogo de mensajes que imprime mensajes en la terminal, según su elección.

note: (itstool) path: section/title
en: Useful methods for a MessageDialog widget
es_ES: Métodos útiles para un widget «MessageDialog»

note: (itstool) path: section/p
en: In line 18 the signal <code>"activate"</code> is connected to the callback function <code>message_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 18, la señal <code>«activate»</code> se conecta a la función de retorno de llamada <code>message_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para obtener una explicación más detallada.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set flags as <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (to destroy the messagedialog window when its parent window is destroyed) or as <code>Gtk.DialogFlags.MODAL</code> (no interaction with other windows of the application).
es_ES: En el constructor de un «MessageDialog» se pueden configurar opciones como <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (para destruir la ventana de diálogo cuando se destruya su ventana madre) o <code>Gtk.DialogFlags.MODAL</code> (sin interacción con otras ventanas de la aplicación).

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set type as any of <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> depending on what type of message we want.
es_ES: En el constructor del «MessageDialog» se puede elegir entre los tipos <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> dependiendo de qué tipo de mensaje quiera.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set buttons as any of <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, or any button using <code>add_button()</code> as in Gtk.Dialog.
es_ES: En el constructor del «MessageDialog» se puede elegir entre los botones <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, o cualquier botón usando <code>add_button()</code> como en un «Gtk.Dialog».

note: (itstool) path: item/p
en: We could substitute the default image of the MessageDialog with another image using
es_ES: Se podría sustituir la imagen predeterminada del «MessageDialog» con otra usando

note: (itstool) path: item/p
en: where <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> is any image from <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>. We could also set any image as in the Image widget, as <code>image.set_from_file("filename.png")</code>.
es_ES: donde <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> es cualquier imagen de los <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">elementos del almacén</link>. También se podría establecer cualquier imagen como en el widget «Image», con <code>image.set_from_file("archivo.png")</code>.

note: (itstool) path: item/p
en: <code>format_secondary_text("some secondary message")</code> sets a secondary message. The primary text becomes bold.
es_ES: <code>format_secondary_text("algún mensaje secundario")</code> establece un mensaje secundario. El texto primario aparece en negrita.

[ctx: text]
note: (itstool) path: info/title
en: The Model/View/Controller design (Python)
es_ES: El diseño modelo/vista/controlador (Python)

note: (itstool) path: info/desc (itstool) path: page/title
en: The Model/View/Controller design
es_ES: El diseño modelo/vista/controlador

note: (itstool) path: section/title
en: Overview
es_ES: Visión general

note: (itstool) path: section/p
en: Both the <link xref="treeview_simple_liststore.py">TreeView</link> and the <link xref="combobox.py">ComboBox</link> widgets are built on the <em>Model/View/Controller</em> design. The <em>Model</em> (an implementation of <code>Gtk.TreeModel</code>, usually <code>Gtk.TreeStore</code> or <code>Gtk.ListStore</code>) stores the data; the <em>View</em> (e.g. <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, or <code>Gtk.ComboBoxText</code>) gets change notifications and displays the content of the model. The <em>Controller</em>, finally, changes the state of the model (via some methods in the model's implementation - such as <code>append()</code> or <code>remove()</code>) and notifies the view of these changes (via signals like <code>"changed"</code>).
es_ES: Tanto los widgets <link xref="treeview_simple_liststore.py">TreeView</link> como los <link xref="combobox.py">ComboBox</link> se construyen sobre el diseño <em>modelo/vista/controlador</em>. El <em>modelo</em> (una implementación de <code>Gtk.TreeModel</code>, generalmente <code>Gtk.TreeStore</code> o <code>Gtk.ListStore</code>) almacena los datos; la <em>vista</em> (por ejemplo, <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, o <code>Gtk.ComboBoxText</code>) recibe las notificaciones de cambio y muestra el contenido del modelo. El <em>controlador</em>, finalmente, cambia el estado del modelo (a través de algunos métodos en la implementación del modelo, como <code>append()</code> o <code>remove()</code>) y le notifica a la vista de estos cambios (a través de señales como <code>«changed»</code>).

note: (itstool) path: section/title
en: The Model
es_ES: El modelo

note: (itstool) path: section/p
en: The main difference between the two main implementations of <code>Gtk.TreeModel</code> is that <code>Gtk.ListStore</code> contains simple rows of data without children, whereas <code>Gtk.TreeStore</code> also contains rows of data, but each row may have child rows (which in turn can have child rows, and so on).
es_ES: La principal diferencia entre las dos implementaciones primarias de <code>Gtk.TreeModel</code> es que <code>Gtk.ListStore</code> contiene filas simples de datos sin hijos, mientras que <code>Gtk.TreeStore</code> también contiene filas de datos, pero cada fila puede tener filas hijas (que a su vez pueden tener filas hijas, y así sucesivamente).

note: (itstool) path: section/p
en: The data in the Model can be retrieved or modified using the tree iter and column index, or <code>Gtk.TreeIter</code>, or <code>Gtk.TreePath</code>.
es_ES: Los datos en el modelo pueden obtenerse o modificarse usando el «iter» del árbol y el índice de columna, <code>Gtk.TreeIter</code>, o <code>Gtk.TreePath</code>.

note: (itstool) path: section/p
en: As with Python's built-in list object you can use <code>len()</code> to get the number of rows and use slices to retrieve or set values. Otherwise, the method <code>append()</code> returns a <code>Gtk.TreeIter</code> instance, which points to the location of the newly inserted row. You can also retrieve a <code>Gtk.TreeIter</code> by calling <code>get_iter()</code>.
es_ES: Con el objeto de lista empotrado de Python puede usar <code>len()</code> para obtener el número de filas y usar fragmentos para obtener o establecer valores. De lo contrario, el método <code>append()</code> devuelve una instancia de <code>Gtk.TreeIter</code>, que apunta al lugar de la fila insertada recientemente. También puede obtener un <code>Gtk.TreeIter</code> llamando a <code>get_iter()</code>.

note: (itstool) path: section/p
en: As <code>Gtk.ListStore</code> contains only one level, i.e. nodes do not have any child nodes, a path is essentially the index of the row you want to access. In the case of <code>Gtk.TreeStore</code>, a path is a list of indexes or a string. The string form is a list of numbers separated by a colon. Each number refers to the offset at that level. Thus, the path <code>"0"</code> refers to the root node and the path <code>"2:4"</code> refers to the fifth child of the third node.
es_ES: Como <code>Gtk.ListStore</code> sólo contiene un nivel, es decir que los nodos no tienen nodos hijos, una ruta es esencialmente el índice de la fila a la que quiere acceder. En el caso de <code>Gtk.TreeStore</code>, una ruta es una lista de índices o una cadena. La forma de la cadena es una lista de números separados por «:». Cada número se refiere al desplazamiento en ese nivel. Entonces, la ruta <code>«0»</code> se refiere al nodo raíz y la ruta <code>«2:4»</code> al quinto hijo del tercer nodo.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeModel</code>:
es_ES: Métodos útiles para un <code>Gtk.TreeModel</code>:

note: (itstool) path: item/p
en: <code>get_iter(path)</code> returns a <code>Gtk.TreeIter</code> instance pointing to <code>path</code>. This is expected to be a colon-separated list of numbers, or a tuple. For example, the string <code>"10:4:0"</code> is equivalent to the tuple <code>(10, 4, 0)</code>, as both would create a path of depth 3 pointing to the 11th child of the root node, the 5th child of that 11th child, and the 1st child of that 5th child.
es_ES: <code>get_iter(ruta)</code> devuelve una instancia de <code>Gtk.TreeIter</code> que apunta a <code>ruta</code>. Se espera que sea una lista de números separados por «:», o una tupla. Por ejemplo, la cadena <code>«10:4:0»</code> equivale a la tupla <code>(10, 4, 0)</code>, ya que las dos crearían una ruta de profundidad 3 apuntando al 11º hijo del nodo raíz, el 5º hijo de ese 11º hijo, y el 1er hijo de ese 5º hijo.

note: (itstool) path: item/p
en: <code>iter_next(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing the node following treeiter at the current level or <code>None</code> if there is no next iter.
es_ES: <code>iter_next(treeiter)</code> devuelve una instancia de <code>Gtk.TreeIter</code> apuntando siguiendo el «treeiter» en el nivel actual o <code>None</code> si no hay un «iter» siguiente.

note: (itstool) path: item/p
en: <code>iter_has_child(treeiter)</code> returns <code>True</code> if <code>treeiter</code> has children, <code>False</code> otherwise.
es_ES: <code>iter_has_child(treeiter)</code> devuelve <code>True</code> si <code>treeiter</code> tiene hijos, <code>False</code> de lo contrario.

note: (itstool) path: item/p
en: <code>iter_children(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first child of <code>treeiter</code> or <code>None</code> if <code>treeiter</code> has no children.
es_ES: <code>iter_children(treeiter)</code> devuelve una instancia de <code>Gtk.TreeIter</code> apuntando al primer hijo de <code>treeiter</code> o <code>None</code> si <code>treeiter</code> no tiene hijos.

note: (itstool) path: item/p
en: <code>get_iter_first()</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first iterator in the tree (the one at the path <code>"0"</code>) or <code>None</code> if the tree is empty.
es_ES: <code>get_iter_first()</code> devuelve una instancia de <code>Gtk.TreeIter</code> apuntando al primer iterador en el árbol (el que está en la ruta <code>«0»</code>) o <code>None</code> si el árbol está vacío.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ListStore</code>:
es_ES: Métodos útiles para un <code>Gtk.ListStore</code>:

note: (itstool) path: item/p
en: <code>append(row)</code> appends a new row to this list store, where <code>row</code> can be a list of values for each column; <code>row</code> can also be omitted or <code>None</code>, and in that case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
es_ES: <code>append(fila)</code> añade una fila nueva a este «ListStore», donde <code>fila</code> puede ser una lista de valores para cada columna; <code>row</code> también puede omitirse o ser <code>None</code>, y en ese caso se añade una fila vacía. El método devuelve un <code>Gtk.TreeIter</code> apuntando a la fila añadida.

note: (itstool) path: item/p
en: <code>remove(iter)</code> removes <code>iter</code> from the <code>Gtk.ListStore</code>, and returns <code>True</code> if the iter is valid, and <code>False</code> if the iter is not. After being removed, <code>iter</code> is set to be the next valid row.
es_ES: <code>remove(iter)</code> elimina <code>iter</code> del <code>Gtk.ListStore</code>, y devuelve <code>True</code> si el iter es válido, y <code>False</code> si no lo es. Después de eliminarse, <code>iter</code> se establece a la siguiente fila válida.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeStore</code>:
es_ES: Métodos útiles para un <code>Gtk.TreeStore</code>:

note: (itstool) path: item/p
en: <code>append(parent, row)</code> appends a new row to this tree store; <code>parent</code> must be a valid Gtk.TreeIter. If parent is not <code>None</code>, then it will append the new row after the last child of parent, otherwise it will append a row to the top level; <code>row</code> can be a list of values for each column, or it can be omitted or <code>None</code>; in this latter case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
es_ES: <code>append(padre, fila)</code> añade una fila nueva a este «TreeStore»; <code>padre</code> debe ser un «Gtk.TreeIter» válido. Si «padre» no es <code>None</code>, entonces añadirá la fila nueva después del último hijo de «padre», de lo contrario añadirá una fila al nivel superior; <code>fila</code> puede ser una lista de valores para cada columna; o puede omitirse o ser <code>None</code>; en este último caso se añadirá una fila vacía. El método devuelve un <code>Gtk.TreeIter</code> apuntando a la fila añadida.

note: (itstool) path: section/title
en: The View: the TreeView case
es_ES: La vista: el caso de «TreeView»

note: (itstool) path: section/p
en: A Treeview shows the structure of children and parent items as a tree. See for instance <link xref="treeview_treestore.py">this example</link>.
es_ES: Una vista de árbol muestra la estructura de elementos padres e hijos como un árbol. Consulte <link xref="treeview_treestore.py">este ejemplo</link>.

note: (itstool) path: section/p
en: The <code>Gtk.TreeViewColumn</code> is used to organize the vertical columns.
es_ES: La <code>Gtk.TreeViewColumn</code> se usa para organizar las columnas verticales.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeView</code>:
es_ES: Métodos útiles para un <code>Gtk.TreeView</code>:

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model for this tree view. If this tree view already has a model set, it will remove it before setting the new model. If model is <code>None</code>, then it will unset the old model.
es_ES: <code>set_model(modelo)</code> establece el modelo para esta vista de árbol. Si ya tiene un modelo, lo eliminará antes de establecer el nuevo. Si el modelo es <code>None</code>, entonces quitará el modelo viejo.

note: (itstool) path: item/p
en: <code>get_model()</code> returns the model this tree view is based on, <code>None</code> if the model is unset.
es_ES: <code>get_model()</code> devuelve el modelo en el que está basada esta vista de árbol, <code>None</code> si no tiene modelo.

note: (itstool) path: item/p
en: <code>append_column(column)</code> appends <code>column</code> to the list of columns.
es_ES: <code>append_column(columna)</code> añade la <code>columna</code> a la lista de columnas.

note: (itstool) path: item/p
en: <code>get_selection()</code> gets the <code>Gtk.TreeSelection</code> associated with this tree view.
es_ES: <code>get_selection()</code> obtiene la <code>Gtk.TreeSelection</code> asociada a esta vista de árbol.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeViewColumn</code>:
es_ES: Métodos útiles para un <code>Gtk.TreeViewColumn</code>:

note: (itstool) path: item/p
en: <code>add_attribute(renderer, attribute, value)</code> adds an attribute mapping to this column. <code>attribute</code> is the parameter on <code>renderer</code> to be set from the <code>value</code>
es_ES: <code>add_attribute(renderizador, atributo, valor)</code> añade un mapeo de atributo a esta columna. <code>atributo</code> es el parámetro en <code>renderizador</code> al que se le asigna el <code>valor</code>.

note: (itstool) path: item/p
en: <code>pack_start(renderer, expand)</code> packs <code>renderer</code> into the beginning of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which expand is <code>True</code>.
es_ES: <code>pack_start(renderizador, expandir)</code> empaqueta el <code>renderizador</code> en el principio de esta columna. Si <code>expandir</code> es <code>False</code>, entonces no se le asigna a <code>renderizador</code> más espacio del que necesita. Cualquier espacio sin utilizar se divide equitativamente entre las celdas en las que «expandir» es <code>True</code>.

note: (itstool) path: item/p
en: <code>pack_end(renderer, expand)</code> adds <code>renderer</code> to end of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which <code>expand</code> is <code>True</code>.
es_ES: <code>pack_end(renderizador, expandir)</code> añade el <code>renderizador</code> al final de esta columna. Si <code>expandir</code> es <code>False</code>, entonces no se le asigna a <code>renderizador</code> más espacio del que necesita. Cualquier espacio sin utilizar se divide equitativamente entre celdas en las que <code>expandir</code> es <code>True</code>.

note: (itstool) path: item/p
en: <code>set_sort_column_id(sort_column_id)</code> sets the column of the model by which this column (of the view) should be sorted. This also makes the column header clickable.
es_ES: <code>set_sort_column_id(id_columna_ordenada)</code> establece la columna del modelo por la que debe ordenarse la vista. Esto también hace que se pueda pulsar la cabecera de la columna.

note: (itstool) path: item/p
en: <code>set_sort_indicator(setting)</code> sets whether a little arrow is displayed in the column header; <code>setting</code> can either be <code>True</code> (indicator is shown) or <code>False</code>.
es_ES: <code>set_sort_indicator(opción)</code> establece si se muestra una pequeña flecha en la cabecera de la columna; <code>opción</code> puede ser <code>True</code> (se muestra el indicador) o <code>False</code>.

note: (itstool) path: item/p
en: <code>set_sort_order(order)</code> changes the order by which the column is sorted; <code>order</code> can either be <code>Gtk.SortType.ASCENDING</code> or <code>Gtk.SortType.DESCENDING</code>.
es_ES: <code>set_sort_order(orden)</code> cambia el orden por el que se ordena la columna; <code>orden</code> puede ser <code>Gtk.SortType.ASCENDING</code> o <code>Gtk.SortType.DESCENDING</code>.

note: (itstool) path: section/title
en: The View: the ComboBox case
es_ES: La vista: el caso de la «ComboBox»

note: (itstool) path: section/p
en: A <code>Gtk.ComboBox</code> allows for the selection of an item from a dropdown menu, see for instance <link xref="combobox.py">this example</link>. For a list of textual choices, one can also use the simpler <code>Gtk.ComboBoxText</code>. Both <code>Gtk.ComboBox</code> and <code>Gtk.ComboBoxText</code> can contain an entry.
es_ES: Una <code>Gtk.ComboBox</code> permite la selección de un elemento desde un menú desplegable, consulte <link xref="combobox.py">este ejemplo</link>. Para una lista de opciones textuales, también se puede usar <code>Gtk.ComboBoxText</code>, que es más simple. Tanto <code>Gtk.ComboBox</code> como <code>Gtk.ComboBoxText</code> pueden contener una entrada.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBox</code>:
es_ES: Métodos útiles para un <code>Gtk.ComboBox</code>:

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBox</code> with an entry; the static method <code>new_with_model(model)</code> creates a new one with the model initialized to <code>model</code>; and the static method <code>new_with_model_and_entry(model)</code> is a combination of the two.
es_ES: El método estático <code>new_with_entry()</code> crea una <code>Gtk.ComboBox</code> nueva vacía con una entrada; el método estático <code>new_with_model(modelo)</code> crea una con el modelo inicializado a <code>modelo</code> nueva; y el método estático <code>new_with_model_and_entry(modelo)</code> es una combinación de los dos.

note: (itstool) path: item/p
en: <code>get_active_iter()</code> returns a <code>Gtk.TreeIter</code> pointing to the current active item. If no active item exists, <code>None</code> is returned.
es_ES: <code>get_active_iter()</code> devuelve un <code>Gtk.TreeIter</code> que apunta al elemento activo actual. Si no existe, devuelve <code>None</code>.

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model used by this combo box to be <code>model</code>, and it will unset a previously set model (if there is any). If <code>model</code> is <code>None</code>, then it will unset the model. Note that this function does not clear the cell renderers.
es_ES: <code>set_model(modelo)</code> establece el modelo que esta caja combinada usa a <code>modelo</code>, y quita un modelo anterior (si existiera). Si <code>modelo</code> es <code>None</code>, entonces lo quitará. Tenga en cuenta que esta función no limpia los renderizadores de celda.

note: (itstool) path: item/p
en: <code>set_entry_text_column(text_column)</code> sets the model column which this combo box should use to get strings from to be <code>text_column</code>. The column <code>text_column</code> in the model of this combo box must be of type <code>str</code> (this is only relevant if this combo box has been created with the “has-entry” property set to True).
es_ES: <code>set_entry_text_column(columna_texto)</code> establece la columna del modelo de la que esta caja combinada obtendrá las cadenas a <code>columna_texto</code>. La columna <code>columna_texto</code> en el modelo de esta caja combinada debe ser del tipo <code>str</code> (esto sólo es relevante si esta caja combinada se creó con la propiedad «has-entry» establecida a «True»).

note: (itstool) path: item/p
en: <code>set_wrap_width(width)</code> sets the wrap width of this combo box to be <code>width</code>. The wrap width is basically the preferred number of columns when you want the popup to be laid out in a grid.
es_ES: <code>set_wrap_width(anchura)</code> establece la anchura del ajuste de línea de esta caja combinada a <code>anchura</code>. La anchura de ajuste de línea es básicamente el número preferido de columnas en el que quiere que el diálogo emergente se distribuya en una rejilla.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBoxText</code>:
es_ES: Métodos útiles para un <code>Gtk.ComboBoxText</code>:

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBoxText</code> with an entry.
es_ES: El método estático <code>new_with_entry()</code> crea una <code>Gtk.ComboBoxText</code> nueva vacía con una entrada.

note: (itstool) path: item/p
en: <code>append_text(text)</code> appends <code>text</code> to the list of strings stored in this combo box.
es_ES: <code>append_text(texto)</code> añade <code>texto</code> a la lista de cadenas almacenadas en esta caja combinada.

note: (itstool) path: item/p
en: <code>get_active_text()</code> returns the currently active string in this combo box, or <code>None</code> if none is selected. If this combo box contains an entry, this function will return its contents (which will not necessarily be an item from the list).
es_ES: <code>get_active_text()</code> devuelve la cadena actualmente activa en esta caja combinada, o <code>None</code> si no hay ninguna seleccionada. Si esta caja combinada contiene una entrada, esta función devolverá su contenido (que no será necesariamente un elemento de la lista).

note: (itstool) path: section/title
en: The View: the Cellrenderers
es_ES: La vista: los «CellRenderer»

note: (itstool) path: section/p
en: The View makes use of <code>Gtk.CellRenderer</code>s of various types to draw the data.
es_ES: La vista hace uso de <code>Gtk.CellRenderer</code> de varios tipos para dibujar los datos.

note: (itstool) path: section/p
en: Implementations of <code>Gtk.CellRenderer</code> and useful methods:
es_ES: Implementaciones de <code>Gtk.CellRenderer</code> y métodos útiles:

note: (itstool) path: item/p
en: <code>Gtk.CellRendererText</code> - renders text in a cell
es_ES: <code>Gtk.CellRendererText</code>: muestra texto en una celda

note: (itstool) path: item/p
en: <code>Gtk.CellRendererToggle</code> - renders a toggle or radio button in a cell. Useful methods:
es_ES: <code>Gtk.CellRendererToggle</code>: muestra un interruptor o botón de radio en una celda. Métodos útiles:

note: (itstool) path: item/p
en: <code>set_active(setting)</code> - activates or deactivates a cell renderer
es_ES: <code>set_active(opción)</code>: activa o desactiva un renderizador de celda

note: (itstool) path: item/p
en: <code>get_active()</code> - returns whether the cell renderer is active
es_ES: <code>get_active()</code>: devuelve si el renderizador de celda está activado

note: (itstool) path: item/p
en: <code>set_radio(radio)</code> - if radio is <code>True</code>, the cell renderer renders a radio toggle (i.e. a toggle in a group of mutually-exclusive toggles); if <code>False</code>, it renders a check toggle (a standalone boolean option)
es_ES: <code>set_radio(radio)</code>: si «radio» es <code>True</code>, el renderizador de celda muestra un interruptor de radio (es decir, un interruptor en un grupo mutuamente exclusivo); si es <code>False</code>, muestra una casilla de verificación (una opción booleana independiente)

note: (itstool) path: item/p
en: <code>get_radio()</code> - returns whether we are rendering radio toggles rather than checkboxes.
es_ES: <code>get_radio()</code>: devuelve si se están mostrando botones de radio en lugar de casillas de verificación.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererPixbuf</code> - renders an image in a cell
es_ES: <code>Gtk.CellRendererPixbuf</code>: muestra una imagen en una celda

note: (itstool) path: item/p
en: <code>Gtk.CellRendererCombo</code> - renders text in a cell; but while <code>Gtk.CellRendererText</code> offers a simple entry to edit the text, <code>Gtk.CellRendererCombo</code> offers a <code>Gtk.ComboBox</code> widget to edit the text. It can be used with and without an associated Gtk.Entry widget, depending on the value of the “has-entry” property.
es_ES: <code>Gtk.CellRendererCombo</code>: muestra texto en una celda; pero mientras que <code>Gtk.CellRendererText</code> ofrece una entrada simple para editar el texto, <code>Gtk.CellRendererCombo</code> ofrece un widget <code>Gtk.ComboBox</code> para editarlo. Puede usarse con o sin un widget «Gtk.Entry» asociado, dependiendo del valor de la propiedad «has-entry».

note: (itstool) path: item/p
en: <code>Gtk.CellRendererProgress</code> - renders a numeric value as a progress bar in a cell; it can display a text on top of the progress bar
es_ES: <code>Gtk.CellRendererProgress</code>: muestra un valor numérico en forma de barra de progreso en una celda; puede mostrar un texto sobre ella

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpinner</code> - renders a spinning animation in a cell
es_ES: <code>Gtk.CellRendererSpinner</code>: muestra una animación giratoria en una celda

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpin</code> - renders a spin button in a cell
es_ES: <code>Gtk.CellRendererSpin</code>: muestra un botón incremental en una celda

note: (itstool) path: item/p
en: <code>Gtk.CellRendererAccel</code> - renders a keyboard accelerator in a cell
es_ES: <code>Gtk.CellRendererAccel</code>: muestra un acelerador de teclado en una celda

note: (itstool) path: section/title
en: The Controller: the Selection
es_ES: El controlador: la selección

note: (itstool) path: section/p
en: Most applications will need to not only deal with displaying data, but also receiving input events from users. To do this, simply get a reference to a selection object and connect to the <code>"changed"</code> signal.
es_ES: La mayoría de las aplicaciones no solo necesitarán mostrar datos, sino también recibir eventos de entrada de los usuarios. Para hacer esto, simplemente obtenga una referencia a un objeto de selección y conéctela a la señal <code>«changed»</code>.

note: (itstool) path: section/p
en: Then to retrieve data for the row selected:
es_ES: Después, para obtener datos de la fila seleccionada:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeSelection</code>:
es_ES: Métodos útiles para un <code>Gtk.TreeSelection</code>:

note: (itstool) path: item/p
en: <code>set_mode(type)</code> sets the type of selection, where type is one of
es_ES: <code>set_mode(tipo)</code> establece el tipo de la selección, donde «tipo» puede ser

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.NONE</code> - no selection is possible
es_ES: <code>Gtk.SelectionMode.NONE</code>: la selección no es posible

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.SINGLE</code> - zero or one element may be selected
es_ES: <code>Gtk.SelectionMode.SINGLE</code>: se puede seleccionar uno o ningún elemento

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.BROWSE</code> - exactly one element is selected. In some circumstances, such as initially or during a search operation, it’s possible for no element to be selected. What is really enforced is that the user can’t deselect a currently selected element except by selecting another element.
es_ES: <code>Gtk.SelectionMode.BROWSE</code>: se selecciona exactamente un elemento. En algunas circunstancias, como inicialmente o durante una operación de búsqueda, es posible que ningún elemento esté seleccionado. Lo que realmente se prohíbe es que el usuario deseleccione un elemento actualmente seleccionado excepto si selecciona otro.

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.MULTIPLE</code> -any number of elements may be selected. Clicks toggle the state of an item. The Ctrl key may be used to enlarge the selection, and Shift key to select between the focus and the child pointed to. Some widgets may also allow Click-drag to select a range of elements.
es_ES: <code>Gtk.SelectionMode.MULTIPLE</code>: se puede seleccionar cualquier número de elementos. Las pulsaciones cambien el estado de un elemento. Se puede usar la tecla «Ctrl» para agrandar la selección, y «Mayús» para seleccionar entre el foco y el hijo al que apunta. Algunos widgets también pueden permitir arrastrar y soltar para seleccionar un rango de elementos.

note: (itstool) path: item/p
en: <code>get_selected()</code> returns a tuple <code>(model, treeiter)</code>, where <code>model</code> is the current model and <code>treeiter</code> a <code>Gtk.TreeIter</code> pointing to the currently selected row, or None if no rows are selected. The method does not work if the selection mode is set to <code>Gtk.SelectionMode.MULTIPLE</code>; in that case, use <code>get_selected_rows()</code> instead, which Returns a list of <code>Gtk.TreePath</code> instances of all selected rows.
es_ES: <code>get_selected()</code> devuelve una tupla <code>(modelo, treeiter)</code>, donde <code>modelo</code> es el modelo actual y <code>treeiter</code> un <code>Gtk.TreeIter</code> que apunta a la fila actualmente seleccionada, o «None» si no la hay. El método no funciona si el modo de selección es <code>Gtk.SelectionMode.MULTIPLE</code>; en ese caso, use <code>get_selected_rows()</code> en su lugar, que devuelve una lista de instancias <code>Gtk.TreePath</code> de todas las filas seleccionadas.

note: (itstool) path: section/title
en: References
es_ES: Referencias

note: (itstool) path: info/desc
en: A widget with two adjustable panes
es_ES: Un widget con dos paneles ajustables

note: (itstool) path: page/p
en: Two images in two adjustable panes, horizontally aligned.
es_ES: Dos imágenes en dos paneles ajustables, alineados horizontalmente.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation">Standard Enumerations</link>
es_ES: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation">Enumeraciones estándar</link>

note: (itstool) path: section/title
en: Useful methods for a Paned widget
es_ES: Métodos útiles para un widget «Paned»

note: (itstool) path: section/p
en: To have two vertically aligned panes, use <code>Gtk.Orientation.VERTICAL</code> instead of <code>Gtk.Orientation.HORIZONTAL</code>. The method <code>add1(widget1)</code> will add the <code>widget1</code> to the top pane, and <code>add2(widget2)</code> will add the <code>widget2</code> to the bottom pane.
es_ES: Para tener dos paneles alineados verticalmente, use <code>Gtk.Orientation.VERTICAL</code> en lugar de <code>Gtk.Orientation.HORIZONTAL</code>. El método <code>add1(widget1)</code> añadirá el <code>widget1</code> al panel superior, y <code>add2(widget2)</code> añadirá el <code>widget2</code> al panel inferior.

[ctx: text]
note: (itstool) path: info/title
en: Photo wall (C)
es_ES: Mural de fotos (C)

note: (itstool) path: info/desc
en: A Clutter image viewer
es_ES: Un visor de imágenes Clutter

note: (itstool) path: page/title
en: Photo wall
es_ES: Mural de fotos

note: (itstool) path: synopsis/p
en: For this example we will build a simple image viewer using Clutter. You will learn:
es_ES: Para este ejemplo se construirá un sencillo visor de imágenes usando Clutter. Aprenderá:

note: (itstool) path: item/p
en: How to size and position <code>ClutterActor</code>s
es_ES: Cómo dimensionar y posicionar varios <code>ClutterActor</code>

note: (itstool) path: item/p
en: How to place an image in a <code>ClutterActor</code>
es_ES: Cómo situar una imagen en un <code>ClutterActor</code>

note: (itstool) path: item/p
en: How to do simple transitions using Clutter's animation framework
es_ES: Cómo hacer transiciones sencillas usando el entorno de trabajo de animaciones de Clutter

note: (itstool) path: item/p
en: How to make <code>ClutterActor</code>s respond to mouse events
es_ES: Cómo hacer que un <code>ClutterActor</code> responda a los eventos del ratón

note: (itstool) path: item/p
en: How to get file names from a directory
es_ES: Cómo obtener nombres de archivos de una carpeta

note: (itstool) path: section/title
en: Introduction
es_ES: Introducción

note: (itstool) path: section/p
en: Clutter is a library for creating dynamic user interfaces using OpenGL for hardware acceleration. This example demonstrates a small, but central, part of the Clutter library to create a simple but attractive image viewing program.
es_ES: Clutter es una biblioteca para crear interfaces de usuarios dinámicas usando OpenGL para la aceleración gráfica. Este ejemplo demuestra una pequeña, pero importante parte de la biblioteca Clutter para crear un sencillo pero atractivo programa para ver imágenes.

note: (itstool) path: section/p
en: To help us reach our goal we will be utilising a few other common pieces of GLib as well. Most importantly, we'll use one <code>GPtrArray</code>, a dynamic array of pointers, to hold the file path names. We will also use <code>GDir</code>, a utility for working with directories, to access our image directory and gather file paths.
es_ES: Para ayudarle a conseguir su objetivo, también se utilizarán algunos fragmentos comunes de GLib. Más importante es que se usará un <code>GPtrArray</code>, una matriz dinámica de punteros, para mantener los nombres de ruta de archivos. También se usará <code>GDir</code>, una utilidad para trabajar dentro de carpetas, para acceder a la carpeta de imágenes y obtener las rutas de archivo.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>photo-wall</file> as project name and directory.
es_ES: Seleccione <gui>GTK+ (simple)</gui> en la pestaña <gui>C</gui>, pulse <gui>Continuar</gui>, y rellene los detalles en las siguientes páginas. Use <file>mural-de-fotos</file> como nombre del proyecto y de la carpeta.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial using the interface builder.
es_ES: Asegúrese de que <gui>Usar GtkBuilder para la interfaz del usuario</gui> está desactivado, ya que, en este tutorial, la IU se creará manualmente. Revise el tutorial del <link xref="guitar-tuner.c">afinador de guitarra</link> usando el constructor de interfaces.

note: (itstool) path: item/p
en: Enable <gui>Configure external packages</gui>. On the next page, select <em>clutter-1.0</em> from the list to include the Clutter library in your project.
es_ES: Active <gui>Configurar paquetes externos</gui>. En la página siguiente, seleccione <em>clutter-1.0</em> de la lista para incluir la biblioteca Clutter en su proyecto.

note: (itstool) path: section/title
en: A look at Photo Wall
es_ES: Un vistazo al mural de fotos

note: (itstool) path: section/p
en: Our image viewer presents the user with a wall of images.
es_ES: El visor de imágenes muestra al usuario un mural de imágenes.

note: (itstool) path: section/p
en: When an image is clicked, it is animated to fill the viewing area. When the image having focus is clicked it is returned to its original position using an animation with the same duration of 500 milliseconds.
es_ES: Cuando se pulsa una imagen, esta se anima para que rellene el área de visualización. Cuando se pulsa la imagen que tiene el foco, vuelve a su tamaño original usando una animación que dura 500 milisegundos.

note: (itstool) path: section/title
en: Initial setup
es_ES: Configuración inicial

note: (itstool) path: section/p
en: The following code segment contains many of the defines and variables we will be using in the following sections. Use this as a reference for later sections. Copy this code to the beginning of <file>src/main.c</file>:
es_ES: El siguiente fragmento de código contiene muchas definiciones y variables que se usarán en las siguientes secciones. Úselo como referencia para las próximas secciones. Copie este código al principio de <file>src/main.c</file>:

note: (itstool) path: section/title
en: Jumping into the code
es_ES: Saltar dentro del código

note: (itstool) path: section/p
en: We will start by taking a look at the <code>main()</code> function as a whole. Then we'll discuss the other code sections in detail. Change the <file>src/main.c</file> to contain this <code>main()</code> function. You can delete the <code>create_window()</code> function as we don't need it in this example.
es_ES: Se empezará echando un vistazo a la función <code>main()</code> completa. Luego se verá el resto de secciones del código en detalle. Cambie el archivo <file>src/main.c</file> para que contenga la función <code>main()</code>. Puede eliminar la función <code>create_window()</code>, ya que no se usa en este ejemplo.

note: (itstool) path: item/p
en: Line 4: <code>ClutterColor</code> is defined by setting the red, green, blue and transparency (alpha) values. The values range from 0-255. For transparency a value of 255 is opaque.
es_ES: Línea 4: <code>ClutterColor</code> se define configurando los valores de rojo, verde, azul y de transparencia (alfa). Los valores van de 0 a 255. Para la transparencia, el valor 255 es opaco.

note: (itstool) path: item/p
en: Line 7: You must initialize Clutter. If you forget to do this, you will get very strange errors. Be warned.
es_ES: Línea 7: debe inicializar Clutter. Si olvida hacerlo, obtendrá mensajes muy extraños. Queda advertido.

note: (itstool) path: item/p
en: Lines 10‒14: Here we create a new <code>ClutterStage</code> . We then set the size using the defines from the previous section and the address of the <code>ClutterColor</code> we just defined.
es_ES: Líneas 10-14: aquí es donde se crea un <code>ClutterStage</code> nuevo. Entonces se establece el tamaño usando el definido en la sección anterior y la dirección del <code>ClutterColor</code> que ya está definida.

note: (itstool) path: note/p
en: A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other <code>ClutterActor</code>s are placed.
es_ES: Un <code>ClutterStage</code> es el nivel superior de un <code>ClutterActor</code> en el que se ubican otros <code>ClutterActor</code>.

note: (itstool) path: item/p
en: Line 16: Here we call our function for getting the image file paths. We'll look at this in a bit.
es_ES: Línea 16: aquí se llama a la función para obtener las rutas de las imágenes. Esto se verá en breve.

note: (itstool) path: item/p
en: Lines 18‒49: This is where we set up the <code>ClutterActor</code>s, load the images and place them into their spot in the image wall. We will look at this in detail in the next section.
es_ES: Líneas 18-49: aquí es donde se configuran los <code>ClutterActor</code>, se cargan las imágenes y se colocan en su sitio en el mural de imágenes. Esto se verá con más detalle en la siguiente sección.

note: (itstool) path: item/p
en: Line 52: Show the stage and <em>all its children</em>, meaning our images.
es_ES: Línea 52: mostrar el escenario y <em>todos sus hijos</em>, es decir, las imágenes.

note: (itstool) path: item/p
en: Line 55: Start the Clutter main loop.
es_ES: Línea 55: iniciar el bucle principal de Clutter.

note: (itstool) path: section/title
en: Setting up our image actors
es_ES: Configurar los actores de imagen

note: (itstool) path: note/p
en: In Clutter, an actor is the most basic visual element. Basically, everything you see is an actor.
es_ES: En Clutter, un actor es el elemento visual más simple. Básicamente, todo lo que ve es un actor.

note: (itstool) path: section/p
en: In this section, we are going to take a closer look at the loop used for setting up the <code>ClutterActor</code>s that will display our images.
es_ES: En esta sección, se va a mirar más detenidamente el bucle usado para configurar los <code>ClutterActor</code> que mostrarán las imágenes.

note: (itstool) path: item/p
en: Line 7: Here we want to get the path at the <var>n</var>th location in the <code>GPtrArray</code> that is holding our image path names. The <var>n</var>th position is calculated based on <code>row</code> and <code>col</code>.
es_ES: Línea 7: aquí se quiere obtener la ruta a la ubicación número <var>n</var> en el <code>GPtrArray</code> que contiene los nombres de las rutas de las imágenes. La posición número <var>n</var> se calcula basándose en <code>row</code> y <code>col</code>.

note: (itstool) path: item/p
en: Line 8‒23: This is where we actually create the <code>ClutterActor</code> and place the image into the actor. The first argument is the path which we access through our <code>GSList</code> node. The second argument is for error reporting but we are ignoring that to keep things short.
es_ES: Líneas 8-23: aquí es donde se crea el <code>ClutterActor</code> en sí y se ubica la imagen en el actor. El primer argumento es la ruta a la que se accede con el nodo de la <code>GSList</code>. El segundo argumento es para informar de un error, pero se ignora para simplificar.

note: (itstool) path: item/p
en: Line 47: This adds the <code>ClutterActor</code> to the stage, which is a container. It also assumes ownership of the <code>ClutterActor</code> which is something you'll want to look into as you get deeper into GNOME development. See the <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html"><code>GObject</code> documentation</link> for the gory details.
es_ES: Línea 47: esta añade el <code>ClutterActor</code> al escenario, que es un contenedor. Asume propiedad del <code>ClutterActor</code>, que es algo que querrá cuando profundice en el desarrollo de GNOME. Para obtener más detalles, consulte la <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html">documentación de <code>GObject</code></link>.

note: (itstool) path: section/title
en: Loading the images
es_ES: Cargar las imágenes

note: (itstool) path: section/p
en: Let's take a short break from Clutter to see how we can get the file names from our image directory.
es_ES: Tómese un pequeño descanso de Clutter para ver cómo se pueden obtener los nombres de archivos desde la carpeta de imágenes.

note: (itstool) path: item/p
en: Lines 5 and 12: This opens our directory or, if an error occurred, returns after printing an error message.
es_ES: Líneas 5 y 12: esto abre la carpeta o, si ocurre un error, termina después de mostrar un mensaje de error.

note: (itstool) path: item/p
en: Lines 16‒25: The first line gets another file name from the <code>GDir</code> we opened earlier. If there was an image file (which we check by looking at its extension, ".png" or ".jpg") in the directory we proceed to prepend the image directory path to the filename and prepend that to the list we set up earlier. Lastly we attempt to get the next path name and reenter the loop if another file was found.
es_ES: Líneas 16-25: la primera línea obtiene otro nombre de archivo del <code>GDir</code> abierto anteriormente. Si hay un archivo de imagen (se comprueba mirando si la extensión es «.png» o «.jpg») en la carpeta, se procede a anteponer la ruta de la carpeta de la imagen al nombre del archivo y se antepone en la lista creada anteriormente. Por último, se intenta obtener el nombre de la siguiente ruta y se vuelve a entrar en el bucle si se encuentra otro archivo.

note: (itstool) path: section/title
en: Set up the actors
es_ES: Configurar los actores

note: (itstool) path: section/p
en: We now take a look at the sizing and positioning of <code>ClutterActor</code>s and also readying the <code>ClutterActor</code> for user interaction.
es_ES: Eche un vistazo al tamaño y al posicionamiento de los <code>ClutterActor</code> y a cómo se deja listo el <code>ClutterActor</code> para la interacción del usuario.

note: (itstool) path: item/p
en: Line 7: Setting an actor reactive means that it reacts to events, such as <code>button-press-event</code> in our case. For Photo Wall, all <code>ClutterActor</code>s in the wall should initially be reactive.
es_ES: Línea 7: configurar un actor como «reactivo» significa que reacciona a los eventos tales como <code>button-press-event</code> en nuestro caso. Para el mural de fotos, todos los <code>ClutterActor</code> del mural deben ser inicialmente reactivos.

note: (itstool) path: item/p
en: Line 9‒12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.
es_ES: Líneas 9‒12: ahora se conecta el evento <code>button-press-event</code> al retorno de la llamada <code>actor_clicked_cb</code> que veremos más adelante.

note: (itstool) path: section/p
en: At this point we've got a wall of images that are ready to be viewed.
es_ES: En este punto tiene un mural de fotos que está listo para verse.

note: (itstool) path: section/title
en: Reacting to the clicks
es_ES: Reaccionar a las pulsaciones

note: (itstool) path: item/p
en: Lines 1‒4: We have to make sure our callback function matches the signature required for the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the <code>ClutterActor</code> that is actually clicked.
es_ES: Líneas 1‒4: hay que asegurarse de que la función de retorno de llamada coincide con la firma requerida para la señal <code>button_clicked_event</code>. En este ejemplo, sólo se usará el primer argumento, el <code>ClutterActor</code> pulsado actualmente.

note: (itstool) path: note/p
en: A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is different depending on what event is being handled. For example, a key event produces a <code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse click events you get a <code>ClutterButtonEvent</code> from which you can get the <code>x</code> and <code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.
es_ES: Unas pocas palabras sobre los argumentos que no se están usando en este ejemplo. El <code>ClutterEvent</code> es diferente dependiendo de qué evento se está manejando. Por ejemplo, un evento de clave produce un <code>ClutterKeyEvent</code> desde el que puede obtener la clave pulsada, entre otra información. Para eventos de pulsaciones del ratón, obtiene un <code>ClutterButtonEvent</code> con el que pueden obtener los valores <code>x</code> e <code>y</code>. Consulte la documentación de Clutter para obtener información sobre otros tipos de <code>ClutterEvent</code>.

note: (itstool) path: note/p
en: The <code>user_data</code> is what one uses to pass data into the function. A pointer to any data type can be passed in. If you need multiple data to be passed into the callback, you can place the data into a struct and pass its address in.
es_ES: El <code>user_data</code> es lo que se usa para pasar datos a la función. Se puede pasar un puntero a cualquier tipo de datos. Si necesita pasar varios datos al retorno de la llamada, puede colocarlos en una estructura y pasar un puntero a su dirección.

note: (itstool) path: item/p
en: Line 7: We set up a static flag to track which state we are in: wall mode or focus mode. We start out in wall mode so no image has focus. Thus, we set the flag to <code>FALSE</code> initially.
es_ES: Línea 7: se establece un indicador estático para seguir el estado en el que se está: modo mural o modo de foco. Se inicia en modo mural, por lo que ninguna imagen tiene el foco. Por ello, el indicador se establece inicialmente a <code>FALSE</code>.

note: (itstool) path: item/p
en: Line 12‒14: These set the image actors to receive events if they are focused.
es_ES: Líneas 12-14: configuran los actores de imágenes para recibir eventos si obtienen el foco.

note: (itstool) path: item/p
en: Line 16‒17: Here we set the animation duration and save the current state.
es_ES: Línea 16-17: aquí se establece la duración de la animación y se guarda el estado actual.

note: (itstool) path: item/p
en: Lines 21‒23: Reaching this code means that one image currently has focus and we want to return to wall mode. Setting a position on a <code>ClutterActor</code> begins an animation with the duration that we set in line 17.
es_ES: Líneas 21-23: llegar a este código significa que actualmente solo una imagen tiene el foco, y se quiere volver al modo mural. Establecer una posición en un <code>ClutterActor</code> comienza una animación con la duración configurada en la línea 17.

note: (itstool) path: item/p
en: Line 24: Reaching this line of code means we are currently in the wall state and are about to give a <code>ClutterActor</code> focus. Here we save the starting position so that we can return to it later.
es_ES: Línea 24: llegar a esta línea de código significa que actualmente se está en el modo mural y se va a dar el foco a un <code>ClutterActor</code>. Aquí se guarda la posición inicial, por lo que se puede volver a ella más adelante.

note: (itstool) path: item/p
en: Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to <code>TRUE</code> makes this <code>ClutterActor</code> react to events. In this focused state the only <code>ClutterActor</code> that we want to receive events will be the <code>ClutterActor</code> being viewed. Clicking on the <code>ClutterActor</code> will return it to its starting position.
es_ES: Línea 25: establecer la propiedad <code>reactive</code> del <code>ClutterActor</code> a <code>TRUE</code> hace que este <code>ClutterActor</code> reaccione a los eventos. En el estado «con foco», el único <code>ClutterActor</code> que se quiere que reciba eventos es el <code>ClutterActor</code> que se está viendo. Al pulsar sobre el <code>ClutterActor</code> volverá a su posición inicial.

note: (itstool) path: item/p
en: Lines 27‒36: This is where we save the current position of the image, set it to receive events and then make it appear above the other images and start animating it to fill the stage.
es_ES: Líneas 27-36: aquí es donde se guarda la posición actual de la imagen, se configura para recibir eventos y se hace que aparezca sobre las otras, comenzando la animación para que llene el escenario.

note: (itstool) path: item/p
en: Line 39: Here we restore the easing state to what was set before we changed it in line 16.
es_ES: Línea 39: aquí se restaura el estado a lo que era antes de que se cambiara en la línea 16.

note: (itstool) path: item/p
en: Line 42: Here we toggle the <code>is_focused</code> flag to the current state.
es_ES: Línea 42: aquí se alterna la opción <code>is_focused</code> al estado actual.

note: (itstool) path: item/p
en: As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> values receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning <code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.
es_ES: Como se ha mencionado anteriormente, los <code>ClutterActor</code> con valores de <code>depth</code> más altos recibirán eventos, pero pueden permitir que los <code>ClutterActor</code> que están por denajo de ellos también reciban eventos. Al devolver <code>TRUE</code> se dejarán de enviar eventos havia abajo, mientras que <code>FALSE</code> hará que los eventos pasen hacia abajo.

note: (itstool) path: note/p
en: Remember, however, that to receive events the <code>ClutterActor</code>s must be set <code>reactive</code>.
es_ES: Recuerde, sin embargo, que para que los <code>ClutterActor</code> reciban eventos deben establecerse como <code>reactive</code>.

note: (itstool) path: section/p
en: All of the code should now be ready to go. All you need now is some pictures to load. By default, the pictures are loaded from a <file>berlin_images</file> directory. If you want, you can change the <code>#define IMAGE_DIR_PATH</code> line near the top to refer to your photo directory, or create a <file>berlin_images</file> directory by clicking <guiseq><gui>Project</gui><gui>New Directory...</gui></guiseq> and creating a <file>berlin_images</file> directory as a subdirectory of the <file>photo-wall</file> directory. Make sure to put at least twelve images in the directory!
es_ES: Todo el código debería estar listo para ejecutarse. Todo lo que necesita son algunas imágenes para cargar. De manera predeterminada, las imágenes se cargan desde la carpeta <file>berlin_images</file>. Si quiere, puede cambiar la línea <code>#define IMAGE_DIR_PATH</code> del principio para que haga referencia a su carpeta de fotos, o crear una carpeta <file>berlin_images</file> pulsando en <guiseq><gui>Proyecto</gui><gui>Carpeta nueva...</gui></guiseq> y creando una carpeta <file>berlin_images</file> como subcarpeta de la carpeta <file>mural-fotos</file>. Asegúrese de poner al menos doce imágenes en la carpeta.

note: (itstool) path: section/p
en: When you have done that, click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
es_ES: Cuando lo haya hecho, pulse <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> para construir todo otra vez, y entonces pulse <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> para iniciar la aplicación.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/photo-wall</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
es_ES: Si todavía no lo ha hecho, elija la aplicación <file>Debug/src/photo-wall</file> en el diálogo que aparece. Finalmente, pulse <gui>Ejecutar</gui> y disfrute.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="photo-wall/photo-wall.c">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="photo-wall/photo-wall.c">código de referencia</link>.

note: (itstool) path: info/desc
en: A widget which indicates progress visually
es_ES: Un widget que indica el progreso de manera visual

note: (itstool) path: page/p
en: This ProgressBar "fills in" by a fraction of the bar until it is full.
es_ES: Esta barra de progreso «se llena» una fracción hasta que está llena.

note: (itstool) path: info/desc
en: A bar which animates to indicate progress
es_ES: Una barra que indica el progreso de manera visual

note: (itstool) path: div/p
en: Pressing any key stops and starts this ProgressBar.
es_ES: Pulsar cualquier tecla detiene e inicia esta ProgressBar.

note: (itstool) path: page/p
en: This ProgressBar is stopped and started by pressing any key.
es_ES: La ProgressBar se detiene y se inicia pulsando una tecla.

note: (itstool) path: info/desc
en: A widget which indicates progress visually.
es_ES: Un widget que indica el progreso de manera visual.

note: (itstool) path: section/title
en: Useful methods for a ProgressBar widget
es_ES: Métodos útiles para un widget «ProgressBar»

note: (itstool) path: item/p
en: Instead of <code>pulse()</code>, that makes the bar go back and forth, if we want the ProgressBar to "fill in" a fraction (a <code>float</code> between <code>0.0</code> and <code>1.0</code> included) of the bar that has been completed, use <code>set_fraction(fraction)</code>.
es_ES: En lugar de <code>pulse()</code>, que hace que la barra avance y retroceda, si se quiere que la barra de progreso «llene» una fracción (un <code>float</code> entre <code>0.0</code> y <code>1.0</code> inclusive) de la barra que se ha completado, use <code>set_fraction(fracción)</code>.

note: (itstool) path: item/p
en: To set a text and show it (superimposed over the bar) use <code>set_text(<var>"text"</var>)</code> and <code>set_show_text(True)</code>. If a text is not set and <code>set_show_text(True)</code> the text will be the percentage of the work that has been completed.
es_ES: Para establecer un texto y mostrarlo (superpuesto a la barra) use <code>set_text(<var>"texto"</var>)</code> y <code>set_show_text(True)</code>. Si no se establece un texto y <code>set_show_text(True)</code>, el texto será el porcentaje del trabajo que se ha completado.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html">GLib - The Main Event Loop</link>
es_ES: <link href="http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html">GLib: el bucle de eventos principal</link>

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling">Gdk - Key Values</link>
es_ES: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling">Gdk: valores de teclas</link>

note: (itstool) path: info/desc
en: An explanation of properties, getters and setters.
es_ES: Una explicación de propiedades, funciones de obtención y asignación.

note: (itstool) path: page/title
en: Properties
es_ES: Propiedades

note: (itstool) path: section/p
en: <em>Properties</em> describe the configuration and state of widgets. Each widget has its own particular set of properties. For example, a widget such as a button has the property <code>label</code> which contains the text of the widget. You can specify the name and value of any number of properties as keyword arguments when creating an instance of a widget. For example, to create a label with the text “Hello World”, an angle of 25 degrees, and aligned to the right, you can use:
es_ES: Las <em>propiedades</em> describen la configuración y el estado de los widgets, y cada widget tiene su conjunto particular de propiedades. Por ejemplo, un widget como un botón o una etiqueta tiene la propiedad <code>label</code> que contiene el texto del widget. Puede especificar el nombre y el valor de cualquier número de propiedades como argumentos de palabras clave cuando cree una instancia de un widget: por ejemplo, para crear una etiqueta alineada a la derecha con el texto «Hello World» y un ángulo de 25 grados, puede usar:

note: (itstool) path: section/p
en: Alternatively, you can define these properties separately by using the method associated with it.
es_ES: Alternativamente, puede definir estas propiedades por separado usando el método asociado a ellas.

note: (itstool) path: section/p
en: Once you have created such a label, you can get the text of the label with <code>label.get_label()</code>, and analogously for the other properties.
es_ES: Una vez que haya creado esta etiqueta, puede obtener su texto con <code>label.get_label()</code>, y análogamente para las otras propiedades.

note: (itstool) path: section/p
en: Instead of using getters and setters you can also get and set the properties with <code>get_property(<var>"prop-name"</var>)</code> and <code>set_property(<var>"prop-name"</var>, <var>value</var>)</code>, respectively.
es_ES: En lugar de usar funciones de obtención y asignación, también puede obtener y establecer las propiedades con <code>get_property(<var>"nombre-propiedad"</var>)</code> y <code>set_property("<var>nombre-propiedad</var>")</code>, respectivamente.

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Basics - Properties</link> in Python GTK+ 3 Tutorial
es_ES: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Conceptos básicos sobre propiedades</link> en el tutorial de GTK+3 con Python

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Python
es_ES: Tutoriales, ejemplos de código y demostraciones de la plataforma en Python

note: (itstool) path: section/title (itstool) path: page/title
en: Tutorial for beginners
es_ES: Tutoriales para principiantes

note: (itstool) path: info/desc
en: A choice from multiple checkbuttons
es_ES: Una elección desde varios «CheckButton».

note: (itstool) path: page/p
en: These radiobuttons report their activity in the terminal.
es_ES: Estos RadioButton informan de su actividad en la terminal.

note: (itstool) path: info/desc
en: Only one can be selected at a time
es_ES: Sólo se puede seleccionar uno a la vez

note: (itstool) path: page/p
en: RadioButtons are named after old-style car radios, which had buttons for switching between channel presets. Because the radio could only be tuned to one station at a time, only one button could be pressed in at a time; if you pressed a new one, the one that was already pressed in would pop back out. That's how these buttons work, too.
es_ES: 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.

note: (itstool) path: page/p
en: Each RadioButton needs a text label and a group. Only one button in a group can be selected at a time. You don't name each group; you just set new RadioButtons to be part of the same group as an existing one. If you create a new one outside of a group, it automatically creates a new group for it to be part of.
es_ES: 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.

note: (itstool) path: section/p
en: All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: 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.

note: (itstool) path: section/title
en: Creating the radiobuttons
es_ES: Crear los botones de radio

note: (itstool) path: section/p
en: We use a <link xref="label.js">Gtk.Label</link> to set each group of RadioButtons apart. Nothing will stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know which ones go together you need to organize things accordingly.
es_ES: 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.

note: (itstool) path: section/p
en: Here are three different ways to create RadioButtons. The first is the usual way, where we create a new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the RadioButton's label at the same time.
es_ES: 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.

note: (itstool) path: section/p
en: The first RadioButton in a group is the one that's selected by default. Try uncommenting the last line in this sample code to see how you can set a different one to be the default selection.
es_ES: 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.

note: (itstool) path: section/p
en: Here we create the label for the second group of buttons, and then create them all the same way.
es_ES: Aquí se crea la etiqueta para el segundo grupo de botones, y después se crean todos de la misma manera.

note: (itstool) path: section/title
en: Creating the rest of the user interface
es_ES: Crear el resto de la interfaz de usuario

note: (itstool) path: section/p
en: This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.
es_ES: 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.

note: (itstool) path: section/p
en: To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock button types</link>.
es_ES: 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+.

note: (itstool) path: section/p
en: We use a separate <link xref="grid.js">Gtk.Grid</link> to organize each group of radio buttons. This way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually separate the two sets of choices.
es_ES: 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.

note: (itstool) path: section/p
en: After we've organized them, we put them into a third, master Grid, along with the OK button. Then we attach that to the window.
es_ES: Después de haberlos organizado, se ponen en una tercera rejilla maestra, junto con el botón «OK». Luego se adjuntan a la ventana.

note: (itstool) path: section/p
en: Finally, we tell the window and everything inside it to become visible when the application is run.
es_ES: Finalmente, se le dice a la ventana y a todo dentro que se vuelva visible cuando se ejecute la aplicación.

note: (itstool) path: section/p
en: When you click OK, a <link xref="messagedialog.js">Gtk.MessageDialog</link> appears. This function creates and displays the popup window, then binds its OK button to a function that closes it. What text appears in the popup depends on the _messageText() function, which returns a different value depending on which set of options you chose.
es_ES: 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.

note: (itstool) path: section/p
en: The get_active() method is how we can tell which RadioButton's pressed in. This function returns a different silly message depending on which set of buttons was pressed. Its return value is used as the MessageDialog's text property.
es_ES: 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».

note: (itstool) path: section/p
en: This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.
es_ES: Esta función se llama cuando se presiona el botón «OK» del «MessageDialog». Simplemente hace desaparecer el diálogo emergente.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase RadioButtonExample terminada, y se ejecuta la aplicación.

note: (itstool) path: info/desc
en: Mutually exclusive buttons.
es_ES: Botones mutuamente excluyentes.

note: (itstool) path: page/p
en: Three RadioButtons. You can see in the terminal if they are turned off or on.
es_ES: Tres «RadioButton». Puede ver en la terminal si están activados o no.

note: (itstool) path: section/title
en: Useful methods for a RadioButton widget
es_ES: Métodos útiles para un widget «RadioButton»

note: (itstool) path: section/p
en: In line 16 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 16, la señal <code>«toggled»</code> se conecta a la función de retorno de llamada <code>toggled_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

note: (itstool) path: section/p
en: As seen in <link xref="properties.py"/>, instead of <code>button1 = Gtk.RadioButton(label="Button 1")</code> we could create the button and label it with
es_ES: Como se vio en la <link xref="properties.py"/>, en lugar de <code>button1 = Gtk.RadioButton(label="Button 1")</code> se podría crear el botón y su etiqueta con

note: (itstool) path: section/p
en: Yet another way to create a new RadioButton with a label is <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code> (the first argument is the group of the radiobuttons, which we can get with <code>get_group()</code>, the second argument is the label).
es_ES: Otra manera de crear un «RadioButton» nuevo con una etiqueta es <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code> (El primer argumento es el grupo de botones de radio, que puede obtener con <code>get_group()</code>, el segundo argumento es la etiqueta).

note: (itstool) path: info/desc
en: A choice from multiple CheckButtons.
es_ES: Una elección desde varios CheckButton.

note: (itstool) path: page/p
en: These RadioButtons report their activity in the terminal.
es_ES: Estos RadioButton informan de su actividad en la terminal.

[ctx: text]
note: (itstool) path: info/title
en: Record collection (JavaScript)
es_ES: Colección de música (JavaScript)

note: (itstool) path: info/desc
en: Create a small database application for ordering your music collection
es_ES: Cree una pequeña aplicación con una base de datos para ordenar su colección de música

note: (itstool) path: page/title
en: Record collection
es_ES: Colección de música

note: (itstool) path: item/p
en: How to connect to a database using libgda
es_ES: Cómo conectar con una base de datos usando libgda

note: (itstool) path: item/p
en: How to insert and browse records in a database table
es_ES: Cómo insertar y examinar registros en una tabla de una base de datos

note: (itstool) path: section/p
en: This demo uses the Javascript language. We are going to demonstrate how to connect and use a database from a GTK program, by using the GDA (GNOME Data Access) library. Thus you also need this library installed.
es_ES: Esta demostración usa el lenguaje Javascript. Se va a demostrar cómo conectar y usar una base de datos desde un programa GTK, usando la bilbioteca GDA («GNOME Data Access», Acceso a datos de GNOME). Por lo tanto, es necesario tener instalada también esta biblioteca.

note: (itstool) path: section/p
en: GNOME Data Access (GDA) is library whose purpose is to provide universal access to different kinds and types of data sources. This goes from traditional relational database systems, to any imaginable kind of data source such as a mail server, a LDAP directory, etc. For more information, and for a full API and documentation, visit the <link href="http://library.gnome.org/devel/libgda/stable/">GDA website</link>.
es_ES: Acceso a Datos de GNOME (GDA) es una biblioteca cuyo propósito es proporcionar acceso universal a diferentes tipos de fuentes de datos. Esto abarca desde los tradicionales sistemas de bases da datos relacionales hasta cualquier fuente de datos imaginable como un servidor de correo-e, un directorio LDAP, etc. Para obtener más información y una documentación completa de la API, visite la  <link href="http://library.gnome.org/devel/libgda/stable/">página web de GDA</link>.

note: (itstool) path: section/p
en: Although a big part of the code is related to user interface (GUI), we are going to focus our tutorial on the database parts (we might mention other parts we think are relevant though). To know more about Javascript programs in GNOME, see the <link xref="image-viewer.js">Image Viewer program</link> tutorial.
es_ES: Aunque una gran parte del código se refiere a la interfaz de usuario (IU), el tutorial se enfocará a las partes de las bases de datos (aunque se puede hacer mención a otras partes que se consideren relevantes). Para aprender más sobre los programas en Javascript en GNOME, consulte el tutorial del programa<link xref="image-viewer.js">Visor de Imágenes</link>

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill-out your details on the next few pages. Use <file>record-collection</file> as project name and directory.
es_ES: Elija <gui>JavaScript genérico</gui> de la pestaña <gui>JS</gui>, pulse <gui>Adelante</gui> y rellene los detalles en las siguientes páginas. Use <file>coleccion-de-albumes</file> como nombre de proyecto y de carpeta.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
es_ES: Pulse <gui>Finalizar</gui> y se creará el proyecto. Abra <file>src/main.js</file> desde la pestaña <gui>Proyecto</gui> o <gui>Archivo</gui>. Contiene un ejemplo de código muy básico.

note: (itstool) path: section/title
en: Program Structure
es_ES: Estructura del programa

note: (itstool) path: section/p
en: This demo is a simple GTK application (with a single window) capable of inserting records into a database table as well as browsing all records of the table. The table has two fields: <code>id</code>, an integer, and <code>name</code>, a varchar. The first section (on the top) of the application allows you to insert a record into the table. The last section (bottom) allows you to see all the records of that table. Its content is refreshed every time a new record is inserted and on the application startup.
es_ES: Esta demostración es una aplicación GTK sencilla (con una única ventana) capaz de insertar registros en la tabla de una base de datos, así como de examinar todos los registros de la tabla. La tabla tiene dos campos: <code>id</code>, un entero, y <code>name</code>, un «varchar». La primera sección (en la parte superior) de la aplicación le permite insertar un registro en la tabla. La última sección (en la parte inferior) le permite ver todos los registros de la tabla. El contenido se actualiza cada vez que se insertar un registro y al inicio de la aplicación.

note: (itstool) path: section/title
en: Starting the fun
es_ES: Empezar la diversión

note: (itstool) path: section/p
en: Let's start by examining the skeleton of the program:
es_ES: Empezar examinando el esqueleto del programa:

note: (itstool) path: item/p
en: Lines 1‒4: Initial imports. Pay special attention to line 3, which tells Javascript to import the GDA library, our focus in this tutorial.
es_ES: Líneas 1‒4: importaciones iniciales. Preste especial atención a la línea 3, que indica a Javascript que importe la biblioteca GDA, nuestro objetivo en este tutorial.

note: (itstool) path: item/p
en: Lines 6‒17: Define our <code>Demo</code> class. Pay special attention to lines 13‒15, where we call 3 methods which will do the whole job. They will be detailed below.
es_ES: Líneas 6‒17: definir la clase <code>Demo</code>. Preste especial atención a las líneas 13‒15, donde se llama a 3 métodos que harán todo el trabajo. Se detallarán más adelante.

note: (itstool) path: item/p
en: Lines 19‒23: Start the application.
es_ES: Líneas 19‒23: iniciar la aplicación.

note: (itstool) path: section/title
en: Designing the application
es_ES: Diseñar la aplicación

note: (itstool) path: section/p
en: Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User Interface (UI). As UI is not our focus, we will explain only the relevant parts.
es_ES: Eche un vistazo al método <code>setupWindow</code>. Es el responsable de crear la interfaz de usuario (IU). Ya que la IU no es el objetivo, sólo se explicarán las partes relevantes.

note: (itstool) path: item/p
en: Lines 22 and 27: Create the 2 entries (for the two fields) in which users will type something to get inserted in the database.
es_ES: Líneas 22 y 27: crear las dos entradas (para los dos campos) en las que el usuario escribirá algo para insertarlo en la base de datos.

note: (itstool) path: item/p
en: Lines 31‒34: Create the Insert button. We connect its <code>clicked</code> signal to the <code>_insertClicked</code> private method of the class. This method is detailed below.
es_ES: Líneas 31‒34: crear el botón «Insertar». Se conecta su señal <code>clicked</code> con el método privado <code>_insertClicked</code> de la clase. Este método se detalla a continuación.

note: (itstool) path: item/p
en: Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the table.
es_ES: Línea 39: crear el widget (<code>TextView</code>) donde se mostrarán los contenidos de la tabla.

note: (itstool) path: item/p
en: Line 44: Create the label where we will show the number of records in the table. Initially it's empty, it will be updated later.
es_ES: Línea 44: crear la etiqueta donde se mostrará el número de registros de la tabla. Inicialmente está vacía, se actualizará más tarde.

note: (itstool) path: section/title
en: Connecting to and initializing the database
es_ES: Conectar e inicializar la base de datos

note: (itstool) path: section/p
en: The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
es_ES: El código que hace la conexión con la base de datos está en método <code>setupDatabase</code> siguiente:

note: (itstool) path: item/p
en: Lines 2‒3: Create the GDA's <code>Connection</code> object. We must supply to its constructor some properties:
es_ES: Líneas 2‒3: crear el objeto de GDA <code>Connection</code>. Se deben proporcionar a su constructor algunas propiedades:

note: (itstool) path: item/p
en: <code>provider</code>: One of GDA's supported providers. GDA supports SQLite, MySQL, PostgreSQL, Oracle and many others. For demo purposes we will use a SQLite database, as it comes installed by default in most distributions and it is simple to use (it just uses a file as a database).
es_ES: <code>provider</code>: uno de los proveedores de GDA soportados. GDA soporta SQLite, MySQL, PostgreSQL, Oracle y muchos otros. Para la demostración se usará una base de datos SQLite, ya que viene instalada de manera predeterminada en la mayoría de las distribuciones y es fácil de usar (sólo usa un archivo como base de datos).

note: (itstool) path: item/p
en: <code>cnc_string</code>: The connection string. It may change from provider to provider. The syntax for SQLite is: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. In this demo we are accessing a database called gnome_demo in the user home dir (note the call to GLib's <code>get_home_dir</code> function).
es_ES: <code>cnc_string</code>: la cadena de conexión. Puede cambiar de un proveedor a otro. La sintaxis de SQLite es: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. En esta demostración se accederá a una base de datos llamada «gnome_demo» en la carpeta del usaurio (tenga en cuenta la llamada a la función <code>get_home_dir</code> de GLib).

note: (itstool) path: note/p
en: If the provider is not supported by GDA, or if the connection string is missing some element, line 2 will raise an exception. So, in real life we should handle it with JavaScript's statement <code>try</code>...<code>catch</code>.
es_ES: Si GDA no soporta el proveedor, o si falta algún elemento en la cadena de conexión, la línea 2 elevará una excepción. Por esto, en la vida real hay que manejarlo con la sentencia <code>try</code>...<code>catch</code> de JavaScript.

note: (itstool) path: item/p
en: Line 4: Open the connection. In the SQLite provider, if the database does not exist, it will be created in this step.
es_ES: Línea 4: abrir la conexión. En el proveedor de SQLite, si la base de datos no existe, se creará en este paso.

note: (itstool) path: item/p
en: Lines 6‒10: Try to do a simple select to check if the table exists (line 7). If it does not exist (because the database was just created), this command will raise an exception, which is handled by the <code>try</code>...<code>catch</code> block. If it is the case, we run the create table statement (line 9).
es_ES: Líneas 6‒10: intentar hacer una selección simple para comprobar si la tabla existe. Si no existe (porque la base de datos se acaba de crear), este comando elevará una excepción, que se maneja en el bloque <code>try</code>...<code>catch</code> block. Si este es el caso, se ejecuta la sentencia para crear tabla (línea 9).

note: (itstool) path: item/p
en: In order to run the SQL commands above we are using the GDA connection methods <code>execute_select_command</code> and <code>execute_non_select_command</code>. They are simple to use, and just require two arguments: The <code>Connection</code> object and the SQL command to be parsed.
es_ES: Para ejecutar los comandos SQL anteriores se usan los métodos de conexión de GDA <code>execute_select_command</code> y <code>execute_non_select_command</code>. Son fáciles de usar, y sólo requieren dos argumentos: el objeto <code>Connection</code> y el comando SQL que analizar.

note: (itstool) path: section/p
en: At this point we have the database set up, and are ready to use it.
es_ES: En este punto, ya está configurada la base de datos y lista para usarse.

note: (itstool) path: section/title
en: Selecting
es_ES: Seleccionar

note: (itstool) path: section/p
en: After connecting to the database, our demo's constructor calls the <code>selectData</code> method. It is responsible for getting all the records in the table and showing them on the <code>TextView</code> widget. Let's take a look at it:
es_ES: Después de conectar a la base de datos, el constructor de la demostración llama al método <code>selectData</code>. Es el responsable de obtener todos los registros de la tabla y de mostrarlos en el widget <code>TextView</code>. Échele un vistazo:

note: (itstool) path: item/p
en: Line 2: The <code>SELECT</code> command. We are using the GDA connection's <code>execute_select_command</code> method for that. It returns a <code>DataModel</code> object, which is later used to retrieve the rows.
es_ES: Línea 2: el comando <code>SELECT</code>. Se usa el método de conexión <code>execute_select_command</code> de GDA. Devuelve un objeto <code>DataModel</code>, que se usa más tarde para obtener las filas.

note: (itstool) path: item/p
en: Line 3: Create an <code>Iter</code> object, which is used to iterate over the <code>DataModel</code>'s records.
es_ES: Línea 3: crear un objeto <code>Iter</code>, que se usa para iterar sobre los registros de <code>DataModel</code>.

note: (itstool) path: item/p
en: Line 7: Loop through all the records, fetching them with the help of the <code>Iter</code> object. At this point, the <code>iter</code> variable contains the actual, retrieved data. Its <code>move_next</code> method returns <code>false</code> when it reaches the last record.
es_ES: Línea 7: recorrer todos los registros, recuperándolos con la ayuda del objeto <code>Iter</code>. En este punto, la variable <code>iter</code> contiene los datos obtenidos actualmente. Su método <code>move_next</code> devuelve <code>false</code> cuando se alcanza el último registro.

note: (itstool) path: item/p
en: Lines 8‒9: We do two things in each line:
es_ES: Líneas 8‒9: se hacen dos cosas en cada línea:

note: (itstool) path: item/p
en: Use <code>Iter</code>'s method <code>get_value_at</code>, which requires only one argument: the column number to retrieve, starting at 0. As our <code>SELECT</code> command returns only two columns, we are retrieving columns 0 and 1.
es_ES: Use el método <code>get_value_at</code> de <code>Iter</code>, que sólo necesita un argumento: el número de columna que recuperar, empezando por 0. Ya que el comando <code>SELECT</code> sólo devuelve dos columnas, se están recuperando las columnas 0 y 1.

note: (itstool) path: item/p
en: The method <code>get_value_at</code> returns the field in GLib's <code>GValue</code> format. A simple way to convert this format to a string is by using GDA's global function <code>value_stringify</code>. That's what we are doing here, and we store the results in the variables <code>id_field</code> and <code>name_field</code>.
es_ES: El método <code>get_value_at</code> devuelve el campo en el formato <code>GValue</code> de GLib. Una manera sencilla de convertir este valor en una cadena es usar la función global de GDA <code>value_stringify</code>. Es lo que se está haciendo aquí, y el resultado se almacena en las variables <code>id_field</code> y <code>name_field</code>.

note: (itstool) path: item/p
en: Line 11: Concatenate the two fields to make one text line, separated by <code>"=&gt;"</code>, and store it in the <code>text</code> variable.
es_ES: Línea 11: concatenar los dos registros para formar una línea de texto, separados por <code>"=&gt;"</code>, y almacenarla en la variable <code>text</code>.

note: (itstool) path: item/p
en: Line 14: After the loop is finished, we have all the records formatted in the <code>text</code> variable. In this line we just set the contents of the <code>TextView</code> with that variable.
es_ES: Línea 14: cuando termine el bucle, se tendrán todos los registros formateados en la variable <code>text</code>. En esta línea, simplemente se establece el contenido del <code>TextView</code> con esta variable.

note: (itstool) path: item/p
en: Line 15: Display the number of records in the table, making use of the <code>DataModel</code>'s <code>get_n_rows</code> method.
es_ES: Línea 15: mostrar el número de registros en la tabla, usando el método <code>get_n_rows</code> de <code>DataModel</code> <code>get_n_rows</code>.

note: (itstool) path: section/title
en: Inserting
es_ES: Insertar

note: (itstool) path: section/p
en: OK, we know how to connect to a database and how to select rows from a table. Now it's time to do an <code>INSERT</code> on the table. Do you remember above, in the method <code>setupWindow</code> we connected the <gui>Insert</gui> button's <code>clicked</code> signal to the method <code>_insertClicked</code>? Let's see the implementation of this method.
es_ES: Bien, ahora ya sabe cómo conectarse a la base de datos y cómo seleccionar filas de una tabla. Ahora es el momento de hacer un <code>INSERT</code> en la tabla. ¿Recuerda cuando antes, en el método <code>setupWindow</code>, se conectó la señal <code>clicked</code> del botón <gui>Insertar</gui> al método <code>_insertClicked</code>?. Vea la implementación de este método.

note: (itstool) path: section/p
en: We have learned how to use the GDA connection's methods <code>execute_select_command</code> and <code>execute_non_select_command</code> to quickly execute SQL commands on the database. GDA allows one to build a SQL statement indirectly, by using its <code>SqlBuilder</code> object. What are the benefits of this? GDA will generate the SQL statement dynamically, and it will be valid for the connection provider used (it will use the same SQL dialect the provider uses). Let's study the code:
es_ES: Se ha aprendido a usar los métodos de conexión de GDA <code>execute_select_command</code> y <code>execute_non_select_command</code> para ejecutar comandos SQL rápidamente en la base de datos. GDA le permite construir una sentencia SQL de manera indirecta, usando su objeto <code>SqlBuilder</code>. ¿Cuáles son los beneficios de esto? GDA generará la sentencia SQL dinámicamente, y será válida para el proveedor de la conexión usado (usará el mismo dialecto de SQL que usa el proveedor). Estudie el código:

note: (itstool) path: item/p
en: Lines 2‒3: Check if the user filled all the fields. The code for the private method <code>_validateFields</code> is really simple and you can read it in the full demo source code.
es_ES: Líneas 2‒3: comprobar si el usuario ha rellenado todos los campos. El código del método privado <code>_validateFields</code> es realmente simple y puede leerlo en el código fuente completo de la demostración.

note: (itstool) path: item/p
en: Line 5: The faster way of doing the <code>INSERT</code>. It's commented out as we want to show how to use the <code>SqlBuilder</code> object to build a SQL statement portable across databases.
es_ES: Línea 5: la manera más rápida de hacer el <code>INSERT</code>. Se ha comentado que se quiere mostrar cómo usar el objeto <code>SqlBuilder</code> para construir una sentencia SQL portable entre bases de datos.

note: (itstool) path: item/p
en: Line 7: Create the <code>SqlBuilder</code> object. We must pass the type of statement we are going to build. It can be <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> or <code>DELETE</code>.
es_ES: Línea 7: crear el objeto <code>SqlBuilder</code>. Se debe pasar el tipo de sentencia que se va a construir. Puede ser <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> o <code>DELETE</code>.

note: (itstool) path: item/p
en: Line 8: Set the name of the table on which the built statement will operate (it will generate <code>INSERT INTO demo</code>)
es_ES: Línea 8: establecer el nombre de la base de datos en la que operará la sentencia construida (generará <code>INSERT INTO demo</code>)

note: (itstool) path: item/p
en: Lines 9‒10: Set the fields and its values that will be part of the statement. The first argument is the field name (as in the table). The second one is the value for that field.
es_ES: Líneas 9‒10: establecer los campos que formarán parte de la sentencia y sus valores. El primer argumento es el nombre del campo (como aparece en la tabla). El segundo es el valor de este campo.

note: (itstool) path: item/p
en: Line 11: Get the dynamically generated <code>Statement</code> object, which represents a SQL statement.
es_ES: Línea 11: obtener el objeto <code>Statement</code> generado dinámicamente, que representa una sentencia SQL.

note: (itstool) path: item/p
en: Line 12: Finally, execute the SQL statement (<code>INSERT</code>).
es_ES: Línea 12: finalmente, ejecutar la sentencia SQL (<code>INSERT</code>).

note: (itstool) path: item/p
en: Line 14: Clear the id and name fields on the screen. The code for the private method <code>_clearFields</code> is really simple and you can read it in the full demo source code.
es_ES: Línea 14: limpiar los campos «id» y «name» en la pantalla. El código del método privado <code>_clearFields</code> es muy sencillo, y puede leerlo en el código fuente de la demostración completa.

note: (itstool) path: item/p
en: Line 15: Refresh the view on the screen by doing another <code>SELECT</code>.
es_ES: Línea 15: actualizar la vista en la pantalla haciendo otro <code>SELECT</code>.

note: (itstool) path: note/p
en: You can also make use of parameters while building the statement. By using the <code>SqlBuilder</code> objects and parameters you are less subject to attacks like SQL injection. Check the <link href="http://library.gnome.org/devel/libgda/stable/">GDA documentation</link> for more information about parameters.
es_ES: También puede usar parámetros mientras construye la sentencia. Usando objetos y parámetros <code>SqlBuilder</code> será menos susceptible a ataques de inyección de SQL. Para obtener información adicional sobre los parámetros, consulte la <link href="http://library.gnome.org/devel/libgda/stable/">documentación de GDA</link>.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. You now have a database for your record collection!
es_ES: Todo el código que necesita debe estar en su lugar, así que trate de ejecutar el código. Ahora tiene una base de datos para su colección de registros.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="record-collection/record-collection.js">reference code</link>.
es_ES: Si tiene problemas con este tutorial, compare su código con este <link href="record-collection/record-collection.js">código de referencia</link>.

note: (itstool) path: item/p
en: Returned if an action widget has no response id, or if the dialog gets programmatically hidden or destroyed
es_ES: Valor devuelto si un widget de acción no tiene ID de respuesta, o si el diálogo se oculta o se destruye mediante código

note: (itstool) path: item/p
en: Generic response id, not used by GTK+ dialogs
es_ES: ID de respuesta genérica, no usado en diálogos de GTK+

note: (itstool) path: item/p
en: Returned if the dialog is deleted
es_ES: Valor devuelto si se elimina el diálogo

note: (itstool) path: item/p
en: Returned by OK buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «Aceptar» en diálogos de GTK+

note: (itstool) path: item/p
en: Returned by Cancel buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «Cancelar» en diálogos de GTK+

note: (itstool) path: item/p
en: Returned by Close buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «Cerrar» en diálogos de GTK+

note: (itstool) path: item/p
en: Returned by Yes buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «Sí» en diálogos de GTK+

note: (itstool) path: item/p
en: Returned by No buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «No» en diálogos de GTK+

note: (itstool) path: item/p
en: Returned by Apply buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «Aplicar» en diálogos de GTK+

note: (itstool) path: item/p
en: Returned by Help buttons in GTK+ dialogs
es_ES: Valor devuelto por los botones «Ayuda» en diálogos de GTK+

[ctx: text]
note: (itstool) path: info/title
en: Scale (C)
es_ES: Escala (C)

note: (itstool) path: info/desc
en: A slider widget for selecting a value from a range
es_ES: Un widget deslizador para seleccionar un valor de un rango

note: (itstool) path: page/title
en: Scale
es_ES: Escala

note: (itstool) path: page/p
en: Slide the scales!
es_ES: Desplace las escalas.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-strdup-printf">String Utility Functions</link>
es_ES: <link href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-strdup-printf">Funciones útiles de cadenas</link>

[ctx: text]
note: (itstool) path: info/title
en: Scale (JavaScript)
es_ES: Escala (JavaScript)

note: (itstool) path: info/desc
en: A slider which corresponds to a numerical value
es_ES: Un deslizador que corresponde a un valor numérico

note: (itstool) path: page/p
en: A Scale is a horizontal or vertical slider, that represents a value inside a numerical range. When you create a new Scale, you set what its default position is, what the numbers at the top and bottom of the range are, and things like how much it moves up or down when you click on the Scale to either side of the knob. To keep from having to type all that in every time you create a new Scale, you can create an object called an Adjustment which keeps track of all that, then tell each new Scale to use that Adjustment.
es_ES: Una escala es un deslizador horizontal o vertical, que representa un valor dentro de un rango numérico. Cuando crea una escala nueva, establece cuál es su posición predeterminada, cuáles son los números en la parte inferior y superior del rango, y cosas como cuánto sube o baja cuando pulsa en la escala o en cada lado de la perilla. Para no tener que introducir todo eso cada vez que cree una escala nueva, puede crear un objeto llamado ajuste que registra todo eso, y decirle a cada escala nueva que use ese ajuste.

note: (itstool) path: page/p
en: This scale is a simple widget that lets you adjust the size of an iceberg that penguins live on. The number of penguins on the iceberg is the product of the values of the two sliders. Try playing with them and seeing what happens.
es_ES: Esta escala es un widget simple que le permite ajustar el tamaño de un iceberg en el que viven pingüinos. El número de pingüinos en el iceberg es el producto de los valores de ambos deslizadores. Juegue con ellos y vea qué sucede.

note: (itstool) path: section/p
en: All the code for this sample goes in the ScaleExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase «ScaleExample». 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.

note: (itstool) path: section/title
en: Creating the scales
es_ES: Crear las escalas

note: (itstool) path: section/p
en: The new_with_range method is one way to create a new Scale widget. The parameters it takes are a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, the minimum value, the maximum value, and the increment for a single step. After that we use the Scale's methods to set its starting value, and how many decimal places it runs to. We also set its vertical alignment in this case, to control where it appears in the window.
es_ES: El método nuevo «new_with_range» es una manera de crear un widget de escala. Los parámetros que toma son una <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, el valor mínimo, el valor máximo, y el incremento para un solo paso. Después de eso se usan los métodos de la escala para establecer su valor de inicio, y cuántos lugares decimales abarca. También se establece su alineación vertical en este caso, para controlar dónde aparece en la ventana.

note: (itstool) path: section/p
en: We can use the set_draw_value method to tell it whether or not to show the number next to the sliding scale. It's commented out in this example.
es_ES: Se puede usar el método «set_draw_value» para decirle si muestra o no el número junto a la escala deslizante. En este ejemplo está comentado.

note: (itstool) path: section/p
en: An Adjustment is an object we can use to simplify things when creating a new Scale. The Adjustment's "value" property is what the Scale's default value is, while "upper" and "lower" make the high and low ends of the numerical range. Meanwhile, the increment values show how much the slider moves when you do things like click on it.
es_ES: Un ajuste es un objeto que se puede usar para simplificar las cosas cuando se crea una escala nueva. La propiedad «value» del ajuste es el valor predeterminado de la escala, mientras que «upper» y «lower» son los límites superior e inferior del rango numérico. Además, las valores de incremento muestran cuánto se mueve el deslizador cuando hace cosas como pulsarlo.

note: (itstool) path: section/p
en: Here we create a new Scale object using _adjustment as its "adjustment" property. This is a great shortcut. We still have to tell it to round off the decimal place, though. Note that the draw_value property is commented out; this is how you tell it not to show the number next to the Scale when you're creating one this way.
es_ES: Aquí se crea un objeto de escala nuevo usando «_adjustment» como su propiedad «ajuste». Este es un buen atajo. Sin embargo, todavía hay que decirle que redondee el lugar decimal. Tenga en cuenta que la propiedad «draw_value» está comentada; así es como se le dice que no muestre el número junto a la escala cuando está creando una de esta manera.

note: (itstool) path: section/p
en: We can use the get_value method to find out the numerical value a Scale is set at. We can then do whatever we want with it, including multiply the two Scales' values together and have a <link xref="label.js">Label</link> show us the product. We set the label's text to wrap around, because we're having it display a silly message too.
es_ES: Se puede usar el método «get_value» para obtener el valor numérico en el que se estableció una escala. Después se puede hacer lo que se quiera con él, incluyendo multiplicar los dos valores de las escalas y hacer que una <link xref="label.js">etiqueta</link> muestre el producto. Se configura el texto de la etiqueta para que ajuste su línea, porque también se hace que muestre un mensaje tonto.

note: (itstool) path: section/p
en: After we create the Label, we connect the two Scales' "value-changed" signals to _recalc, a function that will recalculate the number of penguins on the iceberg and come up with a new message.
es_ES: Después de crear la etiqueta, se conectan las señales «value-changed» de las dos escalas a «_recalc», una función que recalculará el número de pingüinos en el iceberg y elaborará un mensaje nuevo.

note: (itstool) path: section/p
en: Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly spaced.
es_ES: Aquí se crea una <link xref="grid.js">rejilla</link> para poner todo dentro, después se le adjuntan todos los widgets. Tenga en cuenta que aquí y en algunos de los widgets se usan márgenes para mantener las cosas prolijamente espaciadas.

note: (itstool) path: section/p
en: Finally, we add the Grid to the window, then tell the window to show itself and all the widgets inside of it.
es_ES: Finalmente, se le añade la rejilla a la ventana, y después se le dice a la ventana que se muestre con todos sus widgets dentro.

note: (itstool) path: section/title
en: Function which handles the scales' values changing
es_ES: Función que maneja el cambio de los valores de las escalas

note: (itstool) path: section/p
en: Remember, we can get a Scale's value using its get_value method. Here we simply recalculate what the product of the two values is after one of the Scales is moved, add in a silly message depending on how many penguins are left, and change the wording on _label to show the new number and message.
es_ES: Recuerde, se puede obtener el valor de una escala usando su método «get_value». Aquí simplemente se recalcula cuál es el producto de los dos valores después de que se mueva una de las escalas, se añade un mensaje tonto dependiendo de cuántos pingüinos quedan, y se cambian las palabras en «_label» para mostrar el número y mensaje nuevos.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ScaleExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «ScaleExample» terminada, y se ejecuta la aplicación.

[ctx: text]
note: (itstool) path: info/title
en: Scale (Python)
es_ES: Escala (Python)

note: (itstool) path: section/title
en: Useful methods for a Scale widget
es_ES: Métodos útiles para un widget «Escala»

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.Scale. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys, <code>page_increment</code> the one that is obtained clicking on the scale itself. Note that <code>page_size</code> is not used in this case, it should be set to <code>0</code>.
es_ES: Se necesita un «Gtk.Adjustment» para construir la «Gtk.Scale». Este es la representación de un valor con un límite superior e inferior, junto con pasos y páginas de incrementos, y un tamaño de página, y se construye como <code>Gtk.Adjustment(valor, mínimo, ,máximo, paso, página, tamaño_de_página)</code> donde los campos son del tipo <code>float</code>; <code>paso</code> es el incremento/decremento que se obtiene usando las teclas de dirección, <code>página</code> es el que se obtiene pulsando en la escala en sí. Tenga en cuenta que <code>tamaño_de_página</code> no se usa en este caso, y debe establecerse a <code>0</code>.

note: (itstool) path: section/p
en: In line 28 the signal <code>"value-changed"</code> is connected to the callback function <code>scale_moved()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 28, la señal <code>«value-changed»</code> se conecta a la función de retorno de llamada <code>scale_moved()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

note: (itstool) path: item/p
en: <code>get_value()</code> retrieves the current value of the scale; <code>set_value(value)</code> sets it (if the <code>value</code>, of type <code>float</code>, is outside the minimum or maximum range, it will be clamped to fit inside them). These are methods of the class Gtk.Range.
es_ES: <code>get_value()</code> obtiene el valor actual de la escala; <code>set_value(valor)</code> lo establece (si el <code>valor</code>, del tipo <code>float</code>, está fuera del rango mínimo o máximo, se ajustará para que entre). Estos son métodos de la clase «Gtk.Range».

note: (itstool) path: item/p
en: Use <code>set_draw_value(False)</code> to avoid displaying the current value as a string next to the slider.
es_ES: Use <code>set_draw_value(False)</code> para evitar mostrar el valor actual como una cadena junto al deslizador.

note: (itstool) path: item/p
en: To highlight the part of the scale between the origin and the current value:
es_ES: Para resaltar la parte de la escala entre el origen y el valor actual:

note: (itstool) path: item/p
en: in the callback function of the "value-changed" signal, so to have the new filling every time the value is changed. These are methods of the class Gtk.Range.
es_ES: en la función de retorno de llamada de la señal «value-changed», para tener el relleno nuevo cada vez que cambie el valor. Estos son métodos de la clase «Gtk.Range».

note: (itstool) path: item/p
en: <code>add_mark(value, position, markup)</code> adds a mark at the <code>value</code> (<code>float</code> or <code>int</code> if that is the precision of the scale), in <code>position</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) with text <code>Null</code> or <code>markup</code> in the Pango Markup Language. To clear marks, <code>clear_marks()</code>.
es_ES: <code>add_mark(valor, posición, marca)</code> añade una marca en el <code>valor</code> (<code>float</code> o <code>int</code> si esa es la precisión de la escala), en <code>posición</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) con texto <code>Null</code> o <code>marca</code> en el lenguaje de marcado de Pango. Para limpiar las marcas, <code>clear_marks()</code>.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision of the scale at <code>digits</code> digits.
es_ES: <code>set_digits(dígitos)</code> establece la precisión de la escala en <code>dígitos</code> dígitos.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html">Standard Enumerations</link>
es_ES: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html">Enumeraciones estándar</link>

[ctx: text]
note: (itstool) path: info/title
en: Scale (Vala)
es_ES: Escala (Vala)

note: (itstool) path: info/desc
en: Adds scrollbars to its child widget
es_ES: Añade barras de desplazamiento a su widget hijo

note: (itstool) path: page/p
en: An image in a scrolled window.
es_ES: Una imagen en una ventana con barras de desplazamiento.

note: (itstool) path: section/title
en: Useful methods for a ScrolledWindow widget
es_ES: Métodos útiles para un widget «ScrolledWindow»

note: (itstool) path: item/p
en: <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> where each of the arguments is one of <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> regulates whether the horizontal and vertical scrollbars should appear: with <code>AUTOMATIC</code> they appear only if needed, <code>ALWAYS</code> and <code>NEVER</code> are self-explanatory.
es_ES: <code>set_policy(norma_barra_despl_h, norma_barra_despl_v)</code> donde cada uno de los argumentos puede ser <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code>. Regulan si deben las aparecer barras de desplazamiento horizontal y vertical: con <code>AUTOMATIC</code> sólo aparecen si se necesitan, con <code>ALWAYS</code> aparecen siempre, y con <code>NEVER</code> no aparecen nunca.

note: (itstool) path: item/p
en: <code>add_with_viewport(widget)</code> is used to add the Gtk.Widget <code>widget</code> without native scrolling capabilities inside the window.
es_ES: <code>add_with_viewport(widget)</code> se usa para añadir el <code>widget</code> «Gtk.Widget» sin capacidad de desplazamiento nativo dentro de la ventana.

note: (itstool) path: item/p
en: <code>set_placement(window_placement)</code> sets the placement of the contents with respect to the scrollbars for the scrolled window. The options for the argument are <code>Gtk.CornerType.TOP_LEFT</code> (default: the scrollbars are on the bottom and on the right of the window), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.
es_ES: <code>set_placement(lugar_de_ventana)</code> establece la ubicación del contenido con respecto a las barras de desplazamiento de la ventana. Las opciones para el argumento son <code>Gtk.CornerType.TOP_LEFT</code> (predeterminada: las barras de desplazamiento están en la parte inferior y derecha de la ventana), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.

note: (itstool) path: item/p
en: <code>set_hadjustment(adjustment)</code> and <code>set_vadjustment(adjustment)</code> set the Gtk.Adjustment <code>adjustment</code>. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>. (Note that <code>step_increment</code> is not used in this case, it can be set to <code>0</code>.)
es_ES: <code>set_hadjustment(ajuste)</code> y <code>set_vadjustment(ajuste)</code> establecen el <code>ajuste</code> «Gtk.Adjustment». Este es la representación de un valor con un límite superior e inferior, junto con pasos y páginas de incrementos, y un tamaño de página, y se construye como <code>Gtk.Adjustment(valor, mínimo, ,máximo, paso, página, tamaño_de_página)</code> donde los campos son del tipo <code>float</code>. Tenga en cuenta que <code>paso</code> no se usa en este caso, y puede establecerse a <code>0</code>.

[ctx: text]
note: (itstool) path: info/title
en: Separator (C)
es_ES: Separador (C)

note: (itstool) path: info/desc
en: A separator widget
es_ES: Un widget separador

note: (itstool) path: page/title
en: Separator
es_ES: Separador

note: (itstool) path: page/p
en: A horizontal and a vertical separator divide some labels.
es_ES: Un separador horizontal y uno vertical dividen algunas etiquetas.

note: (itstool) path: section/title
en: API Reference
es_ES: Referencias de la API

[ctx: text]
note: (itstool) path: info/title
en: Separator (Python)
es_ES: Separador (Python)

[ctx: text]
note: (itstool) path: info/title
en: Separator (Vala)
es_ES: Separador (Vala)

note: (itstool) path: page/title
en: Set up gedit for JavaScript development
es_ES: Configurar gedit para el desarrollo de JavaScript

note: (itstool) path: page/p
en: This tutorial will show you how to set up <link href="https://wiki.gnome.org/Apps/Gedit">gedit</link>, GNOME's basic text editor, so that it has a handful of extra features which are useful for writing JavaScript code.
es_ES: Este tutorial le mostrará cómo configurar <link href="https://wiki.gnome.org/Apps/Gedit">gedit</link>, el editor de texto básico de GNOME para que tenga algunas características adicionales que son útiles para escribir código de JavaScript.

note: (itstool) path: section/title
en: Making code clearer
es_ES: Simplificar el código

note: (itstool) path: section/p
en: Click on <gui>Edit</gui> in gedit's menu bar, then click on <gui>Preferences</gui>. You should see something like this:
es_ES: Pulse en <gui>Editar</gui> en la barra de menú de gedit, después pulse en <gui>Preferencias</gui>. Debería ver algo así:

note: (itstool) path: section/p
en: Here are the options you want to make sure are turned on.
es_ES: Aquí están las opciones que quiere asegurarse que estén activadas.

note: (itstool) path: item/p
en: <gui>Display line numbers</gui> will help you compare the code you type in with the original, and make it easier to see which line is causing an error if there is a bug.
es_ES: <gui>Mostrar números de línea</gui> le ayudará a comparar el código que introduce con el original, y le hará más fácil ver qué línea está causando un error si hay alguno.

note: (itstool) path: item/p
en: <gui>Highlight current line</gui> makes it easier to see which line you're on, when you have to go back and forth a lot.
es_ES: <gui>Resaltar la línea actual</gui> hace más fácil ver en qué línea está, cuando tiene que ir hacia atrás y adelante mucho.

note: (itstool) path: item/p
en: <gui>Highlight matching brackets</gui> helps you make sure you didn't leave out a bracket by accident.
es_ES: <gui>Resaltar corchetes correspondientes</gui> le ayuda a asegurarse de que no dejó fuera un corchete por accidente.

note: (itstool) path: section/title
en: Making editing easier
es_ES: Facilitar la edición

note: (itstool) path: section/p
en: In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see something like this:
es_ES: En el diálogo <gui>Preferencias</gui> de gedit, pulse en la pestaña <gui>Editor</gui>. Debería ver algo así:

note: (itstool) path: section/p
en: Here, you want to have <gui>Enable automatic indentation</gui> turned on. This means that when you hit <key>Enter</key> the cursor stays indented as far as the last line was. This is extremely useful when writing JavaScript code, since it uses indentation to make it clearer which parts do what.
es_ES: Aquí, puede querer tener activada la opción <gui>Activar sangría automática</gui>. Esto significa que cuando pulse <key>Intro</key> el cursor mantendrá la sangría de la última línea. Esto es extremadamente útil cuando escribe código de JavaScript, dado que usa la sangría para hacer más claro qué partes hacen qué.

note: (itstool) path: note/p
en: If you want to share code with other people who write GNOME JavaScript applications, you'll also want to set <gui>Tab width</gui> to 4 and turn on <gui>Insert spaces instead of tabs</gui>.
es_ES: Si quiere compartir código con otras personas que escriben aplicaciones de GNOME en JavaScript, también querrá establecer la <gui>Anchura del tabulador</gui> a 4 y activar <gui>Insertar espacios en lugar de tabuladores</gui>.

[ctx: text]
note: (itstool) path: info/title
en: Signals and callbacks (Python)
es_ES: Señales y retornos de llamada (Python)

note: (itstool) path: info/desc
en: An explanation of signals and callbacks in GTK+.
es_ES: Una explicación de señales y retornos de llamada en GTK+.

note: (itstool) path: page/title
en: Signals and callbacks
es_ES: Señales y retornos de llamada

note: (itstool) path: section/p
en: Like most GUI toolkits, GTK+ uses an event-driven programming model. When the user is doing nothing, GTK+ sits in the main loop and waits for input. If the user performs some action - say, a mouse click - then the main loop "wakes up" and delivers an event to GTK+.
es_ES: Al igual que la mayoría de los kits de herramientas de IGU, GTK+ usa un modelo de programación dirigida por eventos. Cuando el usuario no hace nada, GTK+ se queda en el bucle principal y espera la entrada. Si el usuario realiza alguna acción (como una pulsación del ratón), entonces el bucle principal «despierta» y le envía un evento a GTK+.

note: (itstool) path: section/p
en: When widgets receive an event, they frequently emit one or more signals. Signals notify your program that "something interesting happened" by invoking functions you have connected to the signal. Such functions are commonly known as callbacks. When your callbacks are invoked, you would typically take some action. After a callback finishes, GTK+ will return to the main loop and await more user input.
es_ES: Cuando los widgets reciben un evento, frecuentemente emiten una o más señales. Las señales le notifican a su programa que «algo interesante sucedió» invocando funciones que les ha conectado. Estas funciones se conocen comúnmente como retornos de llamada. Cuando sus retornos de llamada se invoquen, típicamente realizaría alguna acción. Después de que un retorno de llamada termina, GTK+ retorna al bucle principal y espera más entrada del usuario.

note: (itstool) path: section/p
en: A generic example is: <code>handler_id = widget.connect("event", callback, data)</code>. <code>widget</code> is an instance of a widget we created earlier. Next, the <code>event</code> we are interested in. Each widget has its own particular events which can occur. For instance, if you have a Gtk.Button you usually want to connect to the "clicked" event: this means that when the button is clicked, the signal is issued. Another example is the <code>notify::property</code> signal: whenever a <link xref="properties.py">property</link> is modified on a GObject, instead of just emitting the <code>notify</code> signal, GObject associates as a detail to this signal emission the name of the property modified. This allows clients who wish to be notified of changes to only one property to filter most events before receiving them. Thirdly, the callback argument is the name of the callback function, which contains the code which runs when signals of the specified type are issued. Finally, the optional data argument includes any data which should be passed when the signal is issued.
es_ES: Un ejemplo genérico es: <code>id_de_gestor = widget.connect("evento", retorno_de_llamada, datos)</code>. <code>widget</code> es una instancia de un widget que creó anteriormente. A continuación, el <code>evento</code> en el que está interesado. Cada widget tiene sus propios eventos particulares que pueden ocurrir. Por ejemplo, si tiene un «Gtk.Button» generalmente querrá conectar el evento «clicked»: esto significa que cuando el botón se pulsa, la señal se envía. Otro ejemplo es la señal <code>notify::property</code>: cada vez que una <link xref="properties.py">propiedad</link> se modifica en un «GObject», en lugar de sólo emitir la señal <code>notify</code>, GObject asocia como un detalle a la emisión de la señal el nombre de la propiedad modificada. Esto permite clientes que quieran notificarse de cambios de una sola propiedad para filtrar la mayoría de los eventos antes de recibirlos. Tercero, el argumento «retorno_de_llamada» es el nombre de la función de retorno de llamada, que contiene el código que se ejecuta cuando se emiten las señales del tipo especificado. Finalmente, el argumento opcional «datos» incluye cualquier dato que debe pasarse cuando se emita la señal.

note: (itstool) path: section/p
en: The function returns a number (the <code>handler_id</code>) that identifies this particular signal-callback pair. This number is required to disconnect from a signal such that the callback function will not be called during any future or currently ongoing emissions of the signal it has been connected to, as in <code>widget.disconnect(handler_id)</code>.
es_ES: La función devuelve un número (el <code>id_de_gestor</code>) que identifica este par «señal-retorno de llamada» particular. Este número se requiere para desconectar una señal para que la función de retorno de llamada no se llame durante emisiones de la señal a la que se ha conectado futuras o en progreso, como en <code>widget.disconnect(id_de_gestor)</code>.

note: (itstool) path: section/p
en: <link href="http://developer.gnome.org/gobject/stable/signal.html">Signals</link> in GObject documentation
es_ES: <link href="http://developer.gnome.org/gobject/stable/signal.html">Señales</link> en la documentación de GObject

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Basics - Main loop and Signals</link> in Python GTK+ 3 Tutorial
es_ES: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Conceptos básicos: bucle principal y señales</link> en el tutorial de GTK+ en Python 3

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number
es_ES: Obtener un número entero o en coma flotante

note: (itstool) path: page/p
en: Choose a number, by entering it or by clicking on the -/+ buttons!
es_ES: Elija un número, escribiéndolo o pulsando los botones -/+.

note: (itstool) path: info/desc
en: A number entry field that has + and - buttons
es_ES: Un campo de entrada numérico que tiene botones «+» y «-».

note: (itstool) path: page/p
en: A SpinButton is not related to a <link xref="spinner.js">Spinner</link>. It's a text entry field which only accepts numbers, and which has plus and minus buttons to let you change the value without having to type anything in.
es_ES: Un «SpinButton» no está relacionado con un <link xref="spinner.js">Spinner</link>. Es un campo de entrada de texto que sólo acepta números, y que tiene botones más y menos para dejarle cambiar el valor sin tener que escribir nada.

note: (itstool) path: page/p
en: It's best used when it's obvious that only a number can be entered into it. In this example, two SpinButtons are used for the number of kittens and number of cans of tuna to give them.
es_ES: Su uso es bueno cuando es obvio que sólo se le puede introducir un número. En este ejemplo, se usan dos botones incrementales para el número de gatitos y el número de latas de atún para darles.

note: (itstool) path: section/p
en: All the code for this sample goes in the SpinButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase «SpinButtonExample». 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.

note: (itstool) path: section/title
en: Creating the SpinButtons
es_ES: Crear los botones incrementales

note: (itstool) path: section/p
en: We can use the new_with_range function to create a new SpinButton quickly. Its first parameter is the SpinButton's starting value, its second is the maximum value, and its third is how much to increment it when the plus or minus buttons are pressed.
es_ES: Se puede usar la función «new_with_range» para crear un botón incremental nuevo rápidamente. Su primer parámetro es el valor inicial del botón incremental, el segundo es el valor máximo, y el tercero es cuánto se incrementa cuando se presionan los botones más o menos.

note: (itstool) path: section/p
en: After we create the first SpinButton, we connect its value-changed signal to a function which handles what happens when the number inside either SpinButton changes.
es_ES: Después de crear el primer botón incremental, se conecta su señal «value-changed» a una función que maneja qué sucede cuando cambia el número dentro de cada botón incremental.

note: (itstool) path: section/p
en: If you want more fine-grained control over a SpinButton, or want to create a bunch of SpinButtons which all use the same parameters, you can create an object called an <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Adjustment</link>. Then you can use that object as a new SpinButton's adjustment property, and it sets all the values at once. Afterwards, you can change all the SpinButtons which use that adjustment by changing the Adjustment object's properties.
es_ES: Si quiere un control más fino sobre un botón incremental, o si quiere crear varios botones incrementales que usen todos los mismos parámetros, puede crear un objeto llamado <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Ajuste</link>. Entonces, podrá usar ese objeto como una propiedad de ajuste nueva del botón incremental, y establecer todos los valores de una vez. Después, puede cambiar todos los botones incrementales que usan ese ajuste cambiando las propiedades de su objeto.

note: (itstool) path: section/p
en: The commented-out lines here show things you can do to customize your SpinButton. You can set the number of digits which go after the decimal point, for example, or tell it to wrap the number around if it goes past the upper or lower bounds that you set.
es_ES: Las líneas comentadas aquí muestran cosas que puede hacer para personalizar su botón incremental. Puede configurar el número de dígitos que van después de la coma decimal, por ejemplo, o decirle que dé la vuelta si pasa el límite superior o inferior que estableció.

note: (itstool) path: note/p
en: For the kitties' sake, please don't use set_digits to allow a decimal number of kittens.
es_ES: Por el bien de los gatitos, por favor no use «set_digits» para permitir un número decimal de gatitos.

note: (itstool) path: section/title
en: Creating the rest of the UI
es_ES: Crear el resto de la IU

note: (itstool) path: section/p
en: We create each <link xref="label.js">Label</link> individually, and then string them together along with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans of tuna per kitten down to the nearest whole number.
es_ES: Se crea cada <link xref="label.js">etiqueta</link> individualmente, y después se encadenan con los botones incrementales. La última etiqueta tiene que mostrar el número de latas de atún por gatito, por lo que tiene una variable en el medio, que corresponde a una ecuación que usa las funciones «get_value» de los botones incrementales para descubrir sus valores. El método «floor» de las funciones «Math» de JavaScript se usa para redondear el número de latas atún por gatito al número entero inferior más cercano.

note: (itstool) path: section/p
en: Here we use <link xref="grid.js">Grid</link> widgets to keep everything organized. One Grid holds the labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.
es_ES: Aquí se usan widgets <link xref="grid.js">rejilla</link> para mantener todo organizado. Una rejilla mantiene las etiquetas y los botones incrementales en orden, mientras que la otra pone esa rejilla en la parte superior y la última etiqueta en la parte inferior.

note: (itstool) path: section/p
en: There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.
es_ES: No hay una manera incorrecta de organizar cosas en rejillas, siempre que le agrade cómo resulta. En este caso, la rejilla superior tiene un margen en la parte inferior para mantenerla espaciada uniformemente de la etiqueta inferior, que está dentro de una rejilla separada por lo que se centrará en relación a las etiquetas y botones incrementales de la parte superior.

note: (itstool) path: section/p
en: Finally, we add the larger Grid to the window, then tell the window to show itself and all the widgets inside of it.
es_ES: 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.

note: (itstool) path: section/title
en: Function which handles the SpinButtons' numerical values being adjusted
es_ES: Función que maneja los valores numéricos de los botones incrementales que se ajustan

note: (itstool) path: section/p
en: Here we update the perKitten variable based on the SpinButtons' new values, and use the set_label property to refresh what _lastLabel shows. Since both SpinButtons have their value-changed signal connected to this function, every time either of the numbers changes this function will update the Label.
es_ES: Aquí se actualiza la variable «perKitten» de acuerdo a los valores nuevos de los botones incrementales, y se usa la propiedad «set_label» para actualizar lo que «_lastLabel» muestra. Dado que ambos botones incrementales tienen su señal «value-changed» conectada a esta función, cada vez que cualquiera de los números cambie esta función actualizará la etiqueta.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SpinButtonExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «SpinButtonExample» terminada, y se ejecuta la aplicación.

note: (itstool) path: info/desc
en: Retrieve an integer or floating-point number from the user.
es_ES: Obtener un número entero o en coma flotante del usuario.

note: (itstool) path: section/title
en: Useful methods for a SpinButton widget
es_ES: Métodos útiles para un widget «SpinButton»

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.SpinButton. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys or the buttons of the spinbutton. Note that <code>page_increment</code> and <code>page_size</code> are not used in this case, and they should be set to <code>0</code>.
es_ES: Se necesita un «Gtk.Adjustment» para construir el «Gtk.SpinButton». Este es la representación de un valor con un límite superior e inferior, junto con pasos y páginas de incrementos, y un tamaño de página, y se construye como <code>Gtk.Adjustment(valor, mínimo, ,máximo, paso, página, tamaño_de_página)</code> donde los campos son del tipo <code>float</code>; <code>paso</code> es el incremento/decremento que se obtiene usando las teclas de dirección o los botones del botón incremental. Tenga en cuenta que <code>página</code> y <code>tamaño_de_página</code> no se usan en este caso, y deben establecerse a <code>0</code>.

note: (itstool) path: section/p
en: In line 23 the signal <code>"value-changed"</code> is connected to the callback function <code>spin_selected()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 23, la señal <code>«value-changed»</code> se conecta a la función de retorno de llamada <code>spin_selected()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

note: (itstool) path: item/p
en: If you want the value of the spinbutton to wrap around when they exceed the maximum or the minimum, set <code>set_wrap(True)</code>. The <code>"wrapped"</code> signal is emitted when this happens.
es_ES: Si quiere que el valor del botón incremental dé la vuelta cuando exceda el máximo o el mínimo, establezca <code>set_wrap(True)</code>. La señal <code>"wrapped"</code> se emite cuando esto sucede.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision to be displayed by the spinbutton, up to 20 digits.
es_ES: <code>set_digits(dígitos)</code> establece la precisión que muestra el botón incremental, hasta 20 dígitos.

note: (itstool) path: item/p
en: To get the value of the spinbutton as an integer, use <code>get_value_as_int()</code>.
es_ES: Para obtener el valor del botón incremental como un entero, use <code>get_value_as_int()</code>.

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number.
es_ES: Obtener un número entero o en coma flotante.

note: (itstool) path: info/desc
en: A spinner animation
es_ES: Una animación giratoria

note: (itstool) path: page/p
en: This Spinner is stopped and started by pressing the spacebar.
es_ES: Este indicador de progreso está detenido y se inicia al pulsar la barra espaciadora.

note: (itstool) path: item/p
en: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html">Gdk - Key Values</link>
es_ES: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html">Gdk: valores de teclas</link>

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="https://gitlab.gnome.org/GNOME/gtk/blob/master/gdk/gdkkeysyms.h">here</link>, but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
es_ES: <code>Gdk.keyval_name(event.keyval)</code> convierte el valor de la tecla <code>event.keyval</code> en un nombre simbólico. Los nombres y los valores de teclas correspondientes pueden encontrarse <link href="https://gitlab.gnome.org/GNOME/gtk/blob/master/gdk/gdkkeysyms.h">aquí</link>, pero por ejemplo <code>GDK_KEY_BackSpace</code> se convierte en la cadena <code>"BackSpace"</code>.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html">Key Values</link>
es_ES: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html">Valores de teclas</link>

note: (itstool) path: info/desc
en: Report messages of minor importance to the user
es_ES: Enviar mensajes de menor importancia al usuario

note: (itstool) path: page/p
en: This statusbar is used to demonstrate how messages are stacked in a last-in-first-out order. The message at the top of the stack is always the one displayed.
es_ES: Esta barra de estado se usa para demostrar cómo se apilan los mensajes en un orden «último dentro, primero fuera». Siempre se muestra el mensaje en la parte superior de la pila.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-snprintf">String Utility Functions</link>
es_ES: <link href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-snprintf">Funciones de cadenas útiles</link>

note: (itstool) path: info/desc
en: Show notifications in a dedicated statusbar
es_ES: Mostrar notificaciones en una barra de estado dedicada

note: (itstool) path: page/p
en: This statusbar keeps track of how many times you've clicked a button. Applications like <link href="https://wiki.gnome.org/Apps/Gedit">gedit</link> use statusbars to display information at a glance, and show notifications without interrupting the user.
es_ES: Esta barra de estado registra cuántas veces se pulsó un botón. Las aplicaciones como <link href="https://wiki.gnome.org/Apps/Gedit">gedit</link> usan barras de estado para mostrar información a simple vista, y mostrar notificaciones sin interrumpir al usuario.

note: (itstool) path: page/p
en: Messages pushed to a statusbar go on top of its stack, and can be popped off to show the next-most recent one. You can also clear away every message of a specific type all at once. This sample application demonstrates these functions.
es_ES: Los mensajes que se muestran en una barra de estado van a la parte superior de su pila, y pueden extraerse para mostrar el siguiente más reciente. También puede limpiar todos los mensajes de un tipo específico de una vez. Esta aplicación de ejemplo demuestra estas funciones.

note: (itstool) path: section/p
en: All the code for this sample goes in the StatusbarExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase «StatusBarExample». 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.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into. The next step is to create a vertically-oriented Gtk.Paned interface, to divide the window up into two sections. This way the statusbar looks like those used in other applications, and it stays at the bottom of the window, even if the user resizes it.
es_ES: 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 crear una <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> nueva para poner dentro todos los widgets. El siguiente paso es crear una interfaz «Gtk.Paned» orientada verticalmente, para dividir la ventana en dos secciones. De esta manera la barra de estado se parece a aquellas usadas en otras aplicaciones, y permanece en la parte inferior de la ventana, incluso si el usuario la redimensiona.

note: (itstool) path: section/title
en: Creating the buttons
es_ES: Crear los botones

note: (itstool) path: section/p
en: This code creates the three <link href="button.js.page">Gtk.Buttons</link> we'll use to push a new message to the statusbar, pop the last one off, and clear all existing messages. The "back" and "clear" buttons are <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock buttons</link>, which are automatically translated into any language GNOME supports.
es_ES: Este código crea los tres <link href="button.js.page">Gtk.Buttons</link> que se usarán para empujar un mensaje nuevo a la barra de tareas, extraer el último, y limpiar todos los mensajes existentes. Los botones «back» y «clear» son <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">botones del almacén</link>, que se traducen automáticamente a cualquier idioma que GNOME soporte.

note: (itstool) path: section/p
en: This code creates the <link href="grid.js.page">Gtk.Grid</link> that we'll use to organize the buttons, and attaches the buttons to it in order. It then creates a <link href="paned.js.page">Gtk.Frame</link> which will take up most of the window and has a large amount of padding around the buttons, and adds the Grid to the Frame. Note that we still need to put the Frame into the Paned interface, and then add it to the ApplicationWindow.
es_ES: Este código crea la <link href="grid.js.page">Gtk.Grid</link> que se usará para organizar los botones, y le adjunta los botones en orden. Después crea un <link href="paned.js.page">Gtk.Frame</link> que ocupará la mayor parte de la ventana y que tiene bastante relleno alrededor de los botones, y añade la rejilla al cuadro. Tenga en cuenta que todavía se necesita poner el cuadro en la interfaz con paneles, y después añadirlo a la «ApplicationWindow».

note: (itstool) path: section/title
en: Creating the statusbar
es_ES: Crear la barra de estado

note: (itstool) path: section/p
en: Here we create the Gtk.Statusbar, and push a message to it to start off with. Then we give it its own narrow frame at the bottom of the window.
es_ES: Aquí se crea la «Gtk.Statusbar», y se le empuja un mensaje para comenzar. Después se le da su propio cuadro estrecho en la parte inferior de la ventana.

note: (itstool) path: section/p
en: Every message needs to have a context id, which is an integer value you can get from the statusbar with the get_context_id() function. Its only parameter is the string value you use to describe that particular context id. Normally, you'll get a new context id for different kinds of messages, so that you can use the remove() function to remove a specific message and not just the most recent one on the stack. This is a simple example with only one kind of message, though, so we're just using one for everything.
es_ES: Cada mensaje necesita tener un ID de contexto, que es un valor entero que puede obtener de la barra de estado con la función «get_context_id()». Su único parámetro es el valor de la cadena que usa para describir ese ID de contexto particular. Normalmente, obtendría un ID de contexto nuevo para distintos tipos de mensajes, para que pueda usar la función «remove()» para eliminar un mensaje específico y no sólo el más reciente de la pila. Sin embargo, este es un ejemplo simple con sólo un tipo de mensaje, por lo que sólo se usa uno para todo.

note: (itstool) path: section/p
en: We use the push() function to push a new message onto the stack. Its first parameter is the context id, and its second is the message.
es_ES: Se usa la función «push()» para empujar un mensaje nuevo a la pila. Su primer parámetro es el ID de contexto, y el segundo es el mensaje.

note: (itstool) path: section/p
en: This code finishes up creating the window, by packing the frames into the pane, adding it to the window, and telling the window to show all child widgets.
es_ES: Este código termina de crear la ventana, empaquetando los marcos en el panel, añadiéndolo a la ventana, y diciéndole a la ventana que muestre todos los widgets hijos.

note: (itstool) path: section/title
en: Functions for interacting with the statusbar
es_ES: Funciones para interactuar con la barra de estado

note: (itstool) path: section/p
en: Here we have functions which demonstrate pushing a message onto the stack, popping the top one off of it, and clearing all messages of a particular context id. The pop() function just takes one parameter, which is the context id for the type of message you want to pop off the most recent one of. The remove_all() function works the same way, except it removes all messages of that type from the stack.
es_ES: Aquí están funciones que muestran cómo empujar un mensaje a la pila, extraer el que está arriba de todo, y limpiar todos los mensajes de un ID de contexto particular. La función «pop()» sólo toma un parámetro, que es el ID de contexto para el tipo de mensaje del que quiere extraer el más reciente. La función «remove_all()» funciona de la misma manera, excepto que elimina todos los mensajes de ese tipo de la pila.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished StatusbarExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «StatusbarExample» terminada, y se ejecuta la aplicación.

note: (itstool) path: page/p
en: This statusbar tells you if you click the button or if you press any key (and which key).
es_ES: Esta barra de estado indica si ha pulsado el botón o si ha pulsado una tecla (y qué tecla ha pulsado).

note: (itstool) path: section/title
en: Useful methods for a Statusbar widget
es_ES: Métodos útiles para un widget «Statusbar»

note: (itstool) path: section/p
en: In line 17 the signal <code>"clicked"</code> is connected to the callback function <code>button_clicked_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 17, la señal <code>«clicked»</code> se conecta a la función de retorno de llamada <code>button_clicked_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

note: (itstool) path: item/p
en: <code>pop(context_id)</code> removes the first message in the statusbar stack with the given <code>context_id</code>.
es_ES: <code>pop(id_del_contexto)</code> elimina el primer mensaje en la pila de la barra de estado con el <code>id_del_contexto</code> dado.

note: (itstool) path: item/p
en: <code>remove_all(context_id)</code> removes all the messages in the statusbar stack with the given <code>context_id</code>.
es_ES: <code>remove_all(id_del_contexto)</code> elimina todos los mensajes en la pila de la barra de estado con el <code>id_del_contexto</code> dado.

note: (itstool) path: item/p
en: <code>remove(context_id, message_id)</code> removes the message with the given <code>message_id</code> in the statusbar stack with the given <code>context_id</code>. The <code>message_id</code> is returned by <code>push(context_id, "the message")</code> when pushing the message on the statusbar.
es_ES: <code>remove(id_del_contexto, id_del_mensaje)</code> elimina el mensaje con el <code>id_del_mensaje</code> dado en la pila de la barra de estado con el <code>id_del_contexto</code> dado. <code>push(id_del_contexto, "el mensaje")</code> devuelve el <code>id_del_mensaje</code> cuando se muestra el mensaje en la barra de estado.

note: (itstool) path: item/p
en: <link href="https://developer.gnome.org/gdk3/stable/gdk3-Keyboard-Handling.html">Gdk - Key Values</link>
es_ES: <link href="https://developer.gnome.org/gdk3/stable/gdk3-Keyboard-Handling.html">Gdk: valores de teclas</link>

note: (itstool) path: page/p
en: This statusbar tells you what's going on.
es_ES: Esta barra de estado le indica qué está pasando.

[ctx: text]
note: (itstool) path: info/title
en: Strings (Python)
es_ES: Cadenas (Python)

note: (itstool) path: info/desc
en: An explanation of how to deal with strings in Python and GTK+.
es_ES: Una explicación de cómo trabajar con cadenas en Python y GTK+.

note: (itstool) path: page/title
en: Strings
es_ES: Cadenas

note: (itstool) path: note/p
en: GNOME strongly encourages the use of Python 3 for writing applications!
es_ES: GNOME recomienda fuertemente el uso de Python 3 para escribir aplicaciones.

note: (itstool) path: section/title
en: Strings in Python 2
es_ES: Cadenas en Python 2

note: (itstool) path: section/p
en: Python 2 comes with two different kinds of objects that can be used to represent strings, <code>str</code> and <code>unicode</code>. Instances of <code>unicode</code> are used to express Unicode strings, whereas instances of the <code>str</code> type are byte representations (the encoded string). Under the hood, Python represents Unicode strings as either 16- or 32-bit integers, depending on how the Python interpreter was compiled.
es_ES: Python 2 viene con dos tipos de objetos diferentes que pueden usarse para representar cadenas, <code>str</code> y <code>unicode</code>. Las instancias de <code>unicode</code> se usan para expresar cadenas de Unicode, mientras que las instancias del tipo <code>str</code> son representaciones de bytes (la cadena codificada). A nivel funcional, Python representa las cadenas de Unicode como enteros de 16 ó 32 bits, dependiendo de cómo se compiló su intérprete.

note: (itstool) path: section/p
en: Unicode strings can be converted to 8-bit strings with <code>unicode.encode()</code>. Python’s 8-bit strings have a <code>str.decode()</code> method that interprets the string using the given encoding (that is, it is the inverse of the <code>unicode.encode()</code>):
es_ES: Las cadenas de Unicode pueden convertirse a cadenas de 8 bits con <code>unicode.encode()</code>. Las cadenas de 8 bits de Python tienen un método <code>str.decode()</code> que interpreta la cadena usando la codificación dada (es decir, es la inversa de <code>unicode.encode()</code>):

note: (itstool) path: section/p
en: Unfortunately, Python 2.x allows you to mix <code>unicode</code> and <code>str</code> if the 8-bit string happened to contain only 7-bit (ASCII) bytes, but would get <sys>UnicodeDecodeError</sys> if it contained non-ASCII values.
es_ES: Desafortunadamente, Python 2.x le permite mezclar <code>unicode</code> y <code>str</code> si la cadena de 8 bits contuviera sólo bytes de 7 bits (ASCII), pero obtendría <sys>UnicodeDecodeError</sys> si contuviera valores no ASCII.

note: (itstool) path: section/title
en: Strings in Python 3
es_ES: Cadenas en Python 3

note: (itstool) path: section/p
en: Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded strings on the other hand are represented as binary data in the form of instances of the bytes type. Conceptually, <code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to go from <code>str</code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to <code>str</code>.
es_ES: Desde Python 3.0, todas las cadenas se almacenan como Unicode en una instancia del tipo <code>str</code>. Las cadenas codificadas, por otro lado, se representan como datos binarios en la forma de instancias del tipo de bytes. Conceptualmente, <code>str</code> se refiere a texto, mientras que bytes se refieren a datos. Use <code>encode()</code> para ir de <code>str</code> a <code>bytes</code>, y <code>decode()</code> para ir de <code>bytes</code> a <code>str</code>.

note: (itstool) path: section/p
en: In addition, it is no longer possible to mix Unicode strings with encoded strings, because it will result in a <code>TypeError</code>:
es_ES: Además, ya no es posible mezclar cadenas de Unicode con cadenas codificadas, porque se producirá un <code>TypeError</code>:

note: (itstool) path: section/title
en: Unicode in GTK+
es_ES: Unicode en GTK+

note: (itstool) path: section/p
en: GTK+ uses UTF-8 encoded strings for all text. This means that if you call a method that returns a string you will always obtain an instance of the <code>str</code> type. The same applies to methods that expect one or more strings as parameter, they must be UTF-8 encoded. However, for convenience PyGObject will automatically convert any unicode instance to str if supplied as argument:
es_ES: GTK+ usa cadenas codificadas con UTF-8 para todo el texto. Esto significa que si llama a un método que devuelve una cadena, siempre obtendrá una instancia del tipo <code>str</code>. Lo mismo se aplica a métodos que esperan una o más cadenas como parámetro, deben estar codificadas con UTF-8. Sin embargo, por comodidad, PyGObject convertirá automáticamente cualquier instancia de Unicode a «str» si se proporciona como argumento:

note: (itstool) path: section/p
en: Furthermore:
es_ES: Además:

note: (itstool) path: section/p
en: would return <code>False</code>, with the warning <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> will always return a <code>str</code> instance; therefore, <code>txt</code> and <code>unicode_string</code> are not equal).
es_ES: devolvería <code>False</code>, con la advertencia <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> devolverá siempre una instancia de <code>str</code>; por lo tanto, <code>txt</code> y <code>unicode_string</code> no son iguales).

note: (itstool) path: section/p
en: This is especially important if you want to internationalize your program using <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. You have to make sure that <code>gettext</code> will return UTF-8 encoded 8-bit strings for all languages.
es_ES: Esto es especialmente importante si quiere internacionalizar su programa usando <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. Tiene que asegurarse de que <code>gettext</code> devuelva cadenas de 8 bits codificadas con UTF-8 para todos los idiomas.

note: (itstool) path: section/p
en: In general it is recommended to not use <code>unicode</code> objects in GTK+ applications at all, and only use UTF-8 encoded <code>str</code> objects since GTK+ does not fully integrate with <code>unicode</code> objects.
es_ES: En general se recomienda no usar ningún objeto de <code>unicode</code> en aplicaciones de GTK+, y sólo usar objetos <code>str</code> codificados con UTF-8 dado que GTK+ no integra completamente objetos <code>unicode</code>.

note: (itstool) path: section/p
en: String encoding is more consistent in Python 3.x because PyGObject will automatically encode/decode to/from UTF-8 if you pass a string to a method or a method returns a string. Strings, or text, will always be represented as instances of <code>str</code> only.
es_ES: En Python 3.x las codificación de cadenas es más consistente, porque PyGObject automáticamente codifica/decodifica hacia/desde UTF-8 si le pasa una cadena a un método o un método devuelve una cadena. Las cadenas, o el texto, siempre se representarán sólo como instancias de <code>str</code>.

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html">How To Deal With Strings - The Python GTK+ 3 Tutorial</link>
es_ES: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html">Cómo manejar cadenas: el tutorial de GTK+ 3 en Python</link>

[ctx: text]
note: (itstool) path: info/title
en: Switch (C)
es_ES: Interruptor (C)

note: (itstool) path: info/desc
en: A "light switch" style toggle
es_ES: Un interruptor estilo «ligero»

note: (itstool) path: page/title
en: Switch
es_ES: Interruptor

note: (itstool) path: page/p
en: This switch toggles the title of the window.
es_ES: Este interruptor cambia el título de la ventana.

[ctx: text]
note: (itstool) path: info/title
en: Switch (JavaScript)
es_ES: Interruptor (JavaScript)

note: (itstool) path: info/desc
en: A sliding switch that can be flipped on and off
es_ES: Un interruptor deslizante que se puede activar y desactivar

note: (itstool) path: page/p
en: A Switch has two positions, on and off. This example shows how you can use multiple switches together to control which <link xref="image.js">Image</link> is shown in the window. The pictures used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">can be downloaded here</link>.
es_ES: Un interruptor tiene dos posiciones: encendido y apagado. Este ejemplo muestra cómo puede usar múltiples interruptores para controlar qué <link xref="image.js">Imagen</link> se muestra en la ventana. Las imágenes usadas en este ejemplo <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">se pueden descargar aquí</link>.

note: (itstool) path: note/p
en: The window will contain a "broken image" icon instead of a picture if picture files named <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, and <file>gentoopenguin.png</file> aren't in the same directory. You can change the code and the pictures around as you like, but the Creative Commons-licensed photos used in this example were taken from the following sources and cropped to 640x425:
es_ES: La ventana contendrá un icono de «imagen rota» en lugar de una imagen si los archivos llamados <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, y <file>gentoopenguin.png</file> 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:

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link> by Rob Lee, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
es_ES: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Foto de un zorro rojo</link> por Rob Lee, con licencia <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguin photo</link> by Ken Funakoshi, licensed <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>
es_ES: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Foto de un pingüino papúa</link> por Ken Funakoshi, con licencia <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>

note: (itstool) path: item/p
en: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link> by Shek Graham, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
es_ES: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Foto de un murciélago de la fruta</link> por Shek Graham, con licencia <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link> by Mindaugas Urbonas, licensed <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>
es_ES: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Foto de un cisne mudo</link> por Mindaugas Urbonas, con licencia <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>

note: (itstool) path: note/p
en: Photo credits and licensing information are shown in the application's <link xref="aboutdialog.js">AboutDialog</link>. Always remember to credit the original artist when using <link href="http://creativecommons.org">Creative Commons-licensed works!</link>
es_ES: Los créditos de las fotografías y la información de licencia se muestran en el <link xref="aboutdialog.js">AboutDialog</link> de la aplicación. Recuerde reconocer siempre al artista original cuando use <link href="http://creativecommons.org">trabajos con licencia Creative Commons</link>.

note: (itstool) path: section/p
en: All the code for this sample goes in the SwitchExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase «SwitchExample». 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.

note: (itstool) path: section/title
en: Creating the switches
es_ES: Crear los interruptores

note: (itstool) path: section/p
en: We first create the <link xref="image.js">Image</link> that the switches will control. Remember that a file named <file>redfox.png</file> needs to be in the same directory as this application.
es_ES: Primero se crea la <link xref="image.js">Imagen</link> que los interruptores controlarán. Recuerde que el archivo llamado <file>redfox.png</file> debe estar en la misma carpeta que la aplicación.

note: (itstool) path: section/p
en: We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set them to be switched off by default.
es_ES: Se usa una <link xref="label.js">Etiqueta</link> 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.

note: (itstool) path: section/p
en: The signal a switch sends out when it's flipped on or off is called notify::active. After we create each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple switches that each do something different, you might want to connect them to different functions, but here they're both used for the same thing: To control what picture's displayed by _image.
es_ES: 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».

note: (itstool) path: section/p
en: We create a <link xref="grid.js">Grid</link> for the Labels and Switches first, so that we can organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1 Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.
es_ES: Primero se crea una <link xref="grid.js">rejilla</link> 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.

note: (itstool) path: section/title
en: Function which handles the switches being flipped
es_ES: Función que maneja los interruptores que se están pulsando

note: (itstool) path: section/p
en: Each time a Switch is flipped, this function checks to see which of the two Switches are active afterwards, using the Switches' built-in get_active() function. It then changes the Image accordingly. You can change the filenames around as you like, so long as you have pictures to go with them.
es_ES: 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.

note: (itstool) path: section/title
en: Creating the AboutDialog
es_ES: Crear el AboutDialog

note: (itstool) path: section/p
en: The first step is building the <link xref="gmenu.js">GMenu</link> that the "About" button goes into. This is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: About, and Quit.
es_ES: El primer paso es construir el <link xref="gmenu.js">GMenu</link> 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».

note: (itstool) path: section/p
en: An <link xref="aboutdialog.js">AboutDialog</link> has a lot of different things you can set, to credit everyone who worked on the application and leave a note to whomever reads it. In this case, the copyright section contains our note and credits the original photographers, while the artists section shows you a list of the photographers with links to the original photos when you click the Credits button. The web URLs put after their names in the array turn their names into clickable links in the Credits section.
es_ES: Un <link xref="aboutdialog.js">AboutDialog</link> 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.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SwitchExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «SwitchExample» terminada, y se ejecuta la aplicación.

[ctx: text]
note: (itstool) path: info/title
en: Switch (Python)
es_ES: Interruptor (Python)

note: (itstool) path: page/p
en: This Switch makes the title appears and disappear.
es_ES: Este interruptor hace que el título aparezca y desaparezca.

note: (itstool) path: section/title
en: Useful methods for a Switch widget
es_ES: Métodos útiles para un widget interruptor

note: (itstool) path: section/p
en: In line 17 the signal <code>"notify::active"</code> is connected to the callback function <code>activate_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 17, la señal <code>«notify::active»</code> se conecta a la función de retorno de llamada <code>activate_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

[ctx: text]
note: (itstool) path: info/title
en: Switch (Vala)
es_ES: Interruptor (Vala)

note: (itstool) path: page/p
en: This Switch toggles the title.
es_ES: Este interruptor cambia el título.

note: (itstool) path: info/desc
en: Widget which displays a GtkTextBuffer
es_ES: Un widget que muestra un GtkTextBuffer

note: (itstool) path: page/title
en: TextView widget
es_ES: Widget TextView

note: (itstool) path: note/p
en: If we press "enter", we have a new line.
es_ES: Si se pulsa «Intro» se obtiene una línea nueva.

note: (itstool) path: note/p
en: If we press "enter" more times then there are lines in the default sized window, then a vertical scrollbar appears.
es_ES: Si se pulsa «Intro» más veces entonces hay líneas en la ventana de tamaño predeterminado, y después aparece una barra de desplazamiento vertical.

note: (itstool) path: note/p
en: If we write a long sentence, the text will wrap breaking lines between words.
es_ES: Si se escribe una frase larga, el texto se ajustará a los saltos de línea entre palabras.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar will appear.
es_ES: Si es escribe una palabra laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga (eso es largo), aparecerá una barra de desplazamiento horizontal.

note: (itstool) path: page/p
en: This is an example of Gtk.TextView
es_ES: Esto es un ejemplo de Gtk.TextView

note: (itstool) path: info/desc
en: A multiline text editor
es_ES: Un editor de texto multilínea

note: (itstool) path: page/p
en: A TextView is really (or at least usually) a nested set of three objects.
es_ES: Un «TextView» es realmente (o al menos generalmente) un conjunto anidado de tres objetos.

note: (itstool) path: item/p
en: At the bottom there is a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. This holds the text itself.
es_ES: En la parte inferior hay un <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">Búfer de texto</link>. Este almacena el texto.

note: (itstool) path: item/p
en: In the middle there is the <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, which is a widget that lets you see and edit the text in the buffer. It automatically resizes itself depending on how much text there is.
es_ES: En el medio está el <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, que es un widget que le permite ver y editar el texto en el búfer. Cambia su tamaño automáticamente dependiendo de cuánto texto hay.

note: (itstool) path: item/p
en: Since the automatic resizing can make a TextView unwieldy, you normally place it inside of a ScrolledWindow. Despite the name, it's not an actual window in terms of having a title bar and an X button; it's a widget you put on the application you're making, which acts like a window onto a more manageable chunk of a TextView. If the text in the buffer is too big to fit, scrollbars will appear.
es_ES: Dado que el cambio de tamaño automático puede hacer un «TextView» difícil de manejar, normalmente se ubica dentro de una «ScrolledWindow». A pesar de su nombre, no es una ventana real en términos de tener una barra de título y un botón «X»; es un widget en el que pone la aplicación que está haciendo, que actúa como una ventana sobre un pedazo más manejable de un «TextView». Si el texto en el búfer es demasiado grande para entrar, aparecerán barras de desplazamiento.

note: (itstool) path: page/p
en: If you want to change what text is displayed in the TextView, you act on the TextBuffer, since it's what actually holds the text. The same goes for if you want to see what text someone typed in. This sample application lets you talk to a (make-believe) penguin, and checks the TextBuffer to see if you typed the word "fish" anywhere in it.
es_ES: Si quiere cambiar el texto que se muestra en el «TextView», actúe en el búfer de texto, dado que es lo que realmente contiene al texto. Es lo mismo si quiere ver lo que se ha introducido en él. Esta aplicación de ejemplo le permite hablar con un pingüino de fantasía, y verifica el búfer de texto para ver si ha introducido la palabra «fish» en él.

note: (itstool) path: note/p
en: Real-life penguin populations are declining fast, because climate change is melting the ice that they live on and killing the fish that they eat. If you'd like to play a (somewhat silly) GNOME game based on this premise, take a look at <link href="http://pingus.seul.org/">Pingus</link>.
es_ES: Las poblaciones de pingüinos reales están decayendo rápidamente, porque el cambio climático está derritiendo el hielo en el que viven y matando a los peces que comen. Si le interesa jugar a un juego de GNOME algo tonto basado en esta premisa, échele un vistazo a <link href="http://pingus.seul.org/">Pingus</link>.

note: (itstool) path: section/p
en: All the code for this sample goes in the TextViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase «TextViewExample». 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 poner los widgets y la ventana.

note: (itstool) path: section/title
en: Creating the TextView
es_ES: Crear el «TextView»

note: (itstool) path: section/p
en: Our first step in this example is to create the <link xref="label.js">Label</link> that the penguin will use to talk to you. We set the text in it to wrap by setting its wrap property to true, but we'll use a different method on the TextView itself that allows for more fine-grained control.
es_ES: El primer paso en este ejemplo es crear la <link xref="label.js">Label</link> que el pingüino usará para hablarle. Se configura para que tenga ajuste de línea estableciendo su propiedad «wrap» a «true», pero usaremos un método distinto en el «TextView» propio que permite un control más preciso.

note: (itstool) path: section/p
en: Our first step is to create a TextBuffer to put the words into. After that we create the TextView, and tell it to use the TextBuffer we created as its buffer. We also set it to be editable, since we want to be able to type new things in.
es_ES: El primer paso es crear un «TextBuffer» para poner dentro las palabras. Después de eso se crea el «TextView», y se le dice que use el «TextBuffer» que se creó como su búfer. También se configura para que sea editable, dado que se quiere poder introducir cosas nuevas dentro.

note: (itstool) path: section/p
en: The wrap_mode property lets you select from four different <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html">WrapModes</link>. Gtk.WrapMode.CHAR, for instance, starts wrapping around in the middle of a word if you keep typing when it gets to the edge. Most people are probably used to Gtk.WrapMode.WORD, which will automatically put the word you're typing on the next line if it gets to be too long.
es_ES: La propiedad «wrap_mode» le permite elegir entre cuatro <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html">Modos de ajuste de línea</link> diferentes. «Gtk.WrapMode.CHAR», por ejemplo, salta de línea en el medio de una palabra si sigue escribiendo cuando llega al borde. La mayoría de la gente está probablemente acostumbrada a «Gtk.WrapMode.WORD», que pondrá la palabra que está escribiendo en la línea siguiente automáticamente si es demasiado larga.

note: (itstool) path: section/p
en: Here we create a ScrolledWindow, and set it to automatically scroll if it gets to be too big horizontally or vertically. We also give it a nice-looking ETCHED_IN border. After that, we put our TextView inside, and tell the ScrolledWindow to give us a viewport onto it.
es_ES: Aquí se crea una «ScrolledWindow», y se configura para que se desplace automáticamente si se vuelve demasiado grande horizontal o verticalmente. También se le da un borde bonito ETCHED_IN. Después de eso, se pone el «TextView» dentro, y se hace que la «ScrolledWindow» dé un punto de vista sobre él.

note: (itstool) path: section/p
en: The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside it.
es_ES: La primera <link xref="grid.js">Rejilla</link> que se crea sólo tiene dentro la etiqueta y la «ScrolledWindow».

note: (itstool) path: section/p
en: We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't squished up against the ScrolledWindow.
es_ES: Se crea un <link xref="button.js">Botón</link> para enviar su mensaje al pingüino, y una rejilla nueva que tiene la otra en su parte superior y el botón en la parte inferior. El botón tiene un margen en su parte superior, para que no se aplaste contra la «ScrolledWindow».

note: (itstool) path: section/p
en: Finally, we attach the main Grid to the window, then we tell the window and everything inside it to become visible when the application is run.
es_ES: Finalmente, se adjunta la rejilla principal a la ventana, después se le dice a la ventana y a todo lo que tiene dentro de ella que se vuelva visible cuando se ejecute la aplicación.

note: (itstool) path: section/title
en: Function which handles the penguin's response
es_ES: Función que maneja la respuesta del pingüino

note: (itstool) path: section/p
en: Here we use some basic JavaScript functions to have the penguins say something random. Penguins like fish, though, so if you mention fish we want the penguin to respond to that. To do that, we use the JavaScript String object's match method on <file>this.buffer.text</file>, which returns the contents of our TextBuffer.
es_ES: Aquí se usan algunas funciones básicas de JavaScript para que el pingüino diga algo aleatorio. Sin embargo, a los pingüinos les gusta el pescado, por lo que se quiere que si se menciona «fish», el pingüino responda. Para hacer eso, se usa el método «match» del objeto de cadena de JavaScript sobre <file>this.buffer.text</file>, que devuelve el contenido del búfer de texto.

note: (itstool) path: section/p
en: Since we want to clear out the TextBuffer after each time you click Send, we set <file>this.buffer.text</file> to contain an empty string afterwards. Then we return focus to our TextView, so that you can keep typing without having to click on it beforehand.
es_ES: Dado que se quiere limpiar el búfer de texto después de cada vez que pulsa «Send», se configura <file>this.buffer.text</file> para que contenga una cadena vacía justo entonces. Después, se devuelve el foco al «TextView», para poder seguir escribiendo sin tener que pulsar en él antes.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TextViewExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase «TextViewExample» terminada, y se ejecuta la aplicación.

note: (itstool) path: info/desc
en: Widget that displays a GtkTextBuffer
es_ES: Un widget que muestra un GtkTextBuffer

note: (itstool) path: note/p
en: This is an example of Gtk.TextView.
es_ES: Esto es un ejemplo de Gtk.TextView.

note: (itstool) path: note/p
en: But we can also have a new line if we write a long sentence (the text will wrap breaking lines between words).
es_ES: Pero también se puede obtener una línea nueva si se escribe una frase larga (el texto se ajustará a los saltos de línea entre palabras.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong
es_ES: Si es escribe una palabra laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga

note: (itstool) path: note/p
en: (that was long)
es_ES: (esto es una palabra larga)

note: (itstool) path: note/p
en: word, an horizontal scrollbar will appear.
es_ES: , aparecerá una barra de desplazamiento horizontal.

note: (itstool) path: section/title
en: Useful methods for a TextView widget
es_ES: Métodos útiles para un widget «TextView»

note: (itstool) path: section/p
en: A <code>Gtk.TextView</code> displays the text stored in a <code>Gtk.TextBuffer</code>. However, most text manipulation is accomplished with iterators, represented by a <code>Gtk.TextIter</code> - a position between two characters in the text buffer. Iterators are not valid indefinitely; whenever the buffer is modified in a way that affects the contents of the buffer, all outstanding iterators become invalid. Because of this, iterators can’t be used to preserve positions across buffer modifications. To preserve a position, we use a <code>Gtk.TextMark</code>, that can be set visible with <code>visible(True)</code>. A text buffer contains two built-in marks; an "insert" mark (the position of the cursor) and the "selection_bound" mark.
es_ES: Un <code>Gtk.TextView</code> muestra el texto almacenado en un <code>Gtk.TextBuffer</code>. Sin embargo, la mayor parte de la manipulación de texto se hace con iteradores, representados por un <code>Gtk.TextIter</code>: una posición entre dos caracteres en el búfer de texto. Los iteradores no son válidos indefinidamente; cada vez que se modifica el búfer de alguna manera que se altere su contenido, todos los iteradores relevantes dejan de ser válidos. Es por esto que no se pueden usar iteradores para mantener posiciones entre modificaciones del búfer. Para mantener una posición, se usa una <code>Gtk.TextMark</code>, que puede hacerse visible con <code>visible(True)</code>. Un búfer de texto contiene dos marcas empotradas: una marca «insert» (la posición del cursor) y la marca «selection_bound».

note: (itstool) path: section/p
en: Methods for a TextView widget:
es_ES: Métodos para un widget «TextView»:

note: (itstool) path: item/p
en: The TextView widget is by default editable. If you prefer otherwise, use <code>set_editable(False)</code>. If the buffer has no editable text, it might be a good idea to use <code>set_cursor_visible(False)</code> as well.
es_ES: El widget «TextView» es editable de manera predeterminada. Si prefiere que no lo sea, use <code>set_editable(False)</code>. Si el búfer no tiene texto editable, puede ser una buena idea usar <code>set_cursor_visible(False)</code> también.

note: (itstool) path: item/p
en: The justification of the text is set with <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> where <code>JUSTIFICATION</code> is one of <code>LEFT, RIGHT, CENTER, FILL</code>.
es_ES: La alineación del texto se establece con <code>set_justification(Gtk.Justification.JUSTIFICACIÓN)</code> donde <code>JUSTIFICACIÓN</code> puede ser <code>LEFT, RIGHT, CENTER, FILL</code>.

note: (itstool) path: item/p
en: The line wrapping of the text is set with <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> where <code>WRAP</code> is one of <code>NONE</code> (the text area is made wider), <code>CHAR</code> (break lines anywhere the cursor can appear), <code>WORD</code> (break lines between words), <code>WORD_CHAR</code> (break lines between words, but if that is not enough between characters).
es_ES: El ajuste de línea del texto se establece con <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> donde <code>WRAP</code> es uno de <code>NONE</code> (el área de texto se hace más ancha), <code>CHAR</code> (rompe líneas en cualquier lugar en que el cursor pueda aparecer), <code>WORD</code> (rompe líneas entre palabras), <code>WORD_CHAR</code> (rompe líneas entre palabras, pero si no es suficiente, entre caracteres).

note: (itstool) path: section/p
en: Methods for a TextBuffer widget:
es_ES: Métodos para un widget «TextBuffer»:

note: (itstool) path: item/p
en: <code>get_insert()</code> returns the <code>Gtk.TextMark</code> that represents the cursor, that is the insertion point.
es_ES: <code>get_insert()</code> devuelve la <code>Gtk.TextMark</code> que representa al cursor, que es el punto de inserción.

note: (itstool) path: item/p
en: <code>get_selection_bound()</code> returns the <code>Gtk.TextMark</code> that represents the selection bound.
es_ES: <code>get_selection_bound()</code> devuelve la <code>Gtk.TextMark</code> que representa los límites de la selección.

note: (itstool) path: item/p
en: <code>set_text("some text", length)</code> where <code>length</code> is a positive integer or <code>-1</code>, sets the content of the buffer as the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely. The content of the buffer, if there is any, is destroyed.
es_ES: <code>set_text("texto", longitud)</code> donde <code>longitud</code> es un entero positivo o <code>-1</code>, establece el contenido del búfer como los primeros <code>longitud</code> caracteres del <code>"texto"</code>. Si se omite <code>longitud</code> o es <code>-1</code>, se inserta todo el texto. El contenido del búfer, si existe, se destruye.

note: (itstool) path: item/p
en: <code>insert(iter, "some text", length)</code> where <code>iter</code> is a text iterator and <code>length</code> is a positive integer or <code>-1</code>, inserts in the buffer at <code>iter</code> the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely.
es_ES: <code>insert(iter, "texto", longitud)</code>, donde <code>iter</code> es un iterador de texto y <code>longitud</code> es un entero positivo o <code>-1</code>, inserta en el búfer en <code>iter</code> los primeros <code>longitud</code> caracteres del <code>texto</code>. Si se omite <code>longitud</code> o es <code>-1</code>, se inserta todo el texto.

note: (itstool) path: item/p
en: <code>insert_at_cursor("some text", length)</code> does the same as <code>insert(iter, "some text", length)</code>, with the current cursor taken as <code>iter</code>.
es_ES: <code>insert_at_cursor("texto", longitud)</code> hace los mismo que <code>insert(iter, "texto", longitud)</code>, tomando el cursor actual como <code>iter</code>.

note: (itstool) path: item/p
en: <code>create_mark("mark_name", iter, left_gravity)</code> where <code>iter</code> is a <code>Gtk.TextIter</code> and <code>left_gravity</code> is a boolean, creates a <code>Gtk.TextMark</code> at the position of <code>iter</code>. If <code>"mark_name"</code> is <code>None</code>, the mark is anonymous; otherwise, the mark can be retrieved by name using <code>get_mark()</code>. If a mark has left gravity, and text is inserted at the mark’s current location, the mark will be moved to the left of the newly-inserted text. If <code>left_gravity</code> is omitted, it defaults to <code>False</code>.
es_ES: <code>create_mark("nombre_de_la_marca", iter, gravedad_izquierda)</code> donde <code>iter</code> es un <code>Gtk.TextIter</code> y <code>gravedad_izquierda</code> es un booleano, crea una <code>Gtk.TextMark</code> en la posición de <code>iter</code>. Si <code>"nombre_de_la_marca"</code> es <code>None</code>, la marca es anónima; de lo contrario, la marca puede obtenerse por su nombre usando <code>get_mark()</code>. Si una marca tiene gravedad izquierda, y el texto se inserta en la posición actual de la marca, esta se moverá a la izquierda del texto recién insertado. Si <code>gravedad_izquierda</code> se omite, su valor predeterminado es <code>False</code>.

note: (itstool) path: item/p
en: To specify that some text in the buffer should have specific formatting, you must define a tag to hold that formatting information, and then apply that tag to the region of text using <code>create_tag("tag name", property)</code> and <code>apply_tag(tag, start_iter, end_iter)</code> as in, for instance:
es_ES: Para especificar que algún texto en el búfer debe tener un formato específico, defina una etiqueta que contenga esa información de formato, y luego aplíquela a la región de texto usando <code>create_tag("nombre de la etiqueta", propiedad)</code> y <code>apply_tag(etiqueta, iter_inicial, iter_final)</code> como en, por ejemplo:

note: (itstool) path: item/p
en: The following are some of the common styles applied to text:
es_ES: A continuación se muestran algunos de los estilos comunes aplicados al texto:

note: (itstool) path: item/p
en: Background colour ("background" property)
es_ES: Color de fondo (propiedad «background»)

note: (itstool) path: item/p
en: Foreground colour ("foreground" property)
es_ES: Color de primer plano (propiedad «foreground»)

note: (itstool) path: item/p
en: Underline ("underline" property)
es_ES: Subrayado (propiedad «underline»)

note: (itstool) path: item/p
en: Bold ("weight" property)
es_ES: Negrita (propiedad «weight»)

note: (itstool) path: item/p
en: Italics ("style" property)
es_ES: Cursiva (propiedad «style»)

note: (itstool) path: item/p
en: Strikethrough ("strikethrough" property)
es_ES: Tachado (propiedad «strikethrough»)

note: (itstool) path: item/p
en: Justification ("justification" property)
es_ES: Justificación (propiedad «justification»)

note: (itstool) path: item/p
en: Size ("size" and "size-points" properties)
es_ES: Tamaño (propiedades «size» y «size-points»)

note: (itstool) path: item/p
en: Text wrapping ("wrap-mode" property)
es_ES: Ajuste de texto (propiedad «wrap-mode»)

note: (itstool) path: item/p
en: You can also delete particular tags later using <code>remove_tag()</code> or delete all tags in a given region by calling <code>remove_all_tags()</code>.
es_ES: También puede eliminar etiquetas particulares más tarde usando <code>remove_tag()</code> o eliminar todas las etiquetas en una región dada llamando a <code>remove_all_tags()</code>.

note: (itstool) path: section/p
en: Methods for a TextIter widget
es_ES: Métodos para un widget «TextIter»

note: (itstool) path: item/p
en: <code>forward_search(needle, flags, limit)</code> searches forward for <code>needle</code>. The search will not continue past the <code>Gtk.TextIter</code> limit. The <code>flags</code> can be set to one of the following, or any combination of it by concatenating them with the bitwise-OR operator <code>|</code>: <code>0</code> (the match must be exact); <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (the match may have invisible text interspersed in needle); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (the match may have pixbufs or child widgets mixed inside the matched range); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (the text will be matched regardless of what case it is in). The method returns a tuple containing a <code>Gtk.TextIter</code> pointing to the start and to the first character after the match; if no match is found, <code>None</code> is returned.
es_ES: <code>forward_search(cadena, banderas, límite)</code> busca <code>cadena</code> hacia delante. La búsqueda no continuará después del límite <code>Gtk.TextIter</code>. Las <code>banderas</code> pueden ser cualquier combinación de las siguientes, concatenándolas con el operador OR a nivel de bits <code>|</code>: <code>0</code> (la coincidencia debe ser exacta); <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (la coincidencia puede tener texto invisible intercalado en «aguja»); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (la coincidencia puede tener «pixbufs» o widgets hijos mezclados dentro del rango coincidente); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (el texto coincidirá sin importar su capitalización). El método devuelve una tupla que contiene un <code>Gtk.TextIter</code> apuntando al inicio y al primer carácter después de la coincidencia; si no se encuentra, se devuelve <code>None</code>.

note: (itstool) path: item/p
en: <code>backward_search(needle, flags, limit)</code> does the same as <code>forward_search()</code>, but moving backwards.
es_ES: <code>backward_search(cadena, banderas, límite)</code> hace lo mismo que <code>forward_search()</code>, pero hacia atrás.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong word, a horizontal scrollbar will appear.
es_ES: Si es escribe una palabra laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarga, aparecerá una barra de desplazamiento horizontal.

note: (itstool) path: info/desc
en: A button which retains state
es_ES: Un botón que mantiene su estado

note: (itstool) path: page/p
en: When this ToggleButton is in an active state, the spinner spins.
es_ES: Cuando este ToggleButton está activado, el indicador de progreso gira.

note: (itstool) path: info/desc
en: Stays pressed until you click it again
es_ES: Se mantiene presionado hasta que lo pulsa de nuevo

note: (itstool) path: page/p
en: A ToggleButton is like a normal <link xref="button.js">Button</link>, except that it stays pressed in when you click it. You can use it like an on/off switch, to control things like the <link xref="spinner.js">Spinner</link> in this example.
es_ES: Un «ToggleButton» es como un <link xref="button.js">Button</link> normal, excepto que se mantiene presionado cuando pulsa en él. Puede usarlo como un conmutador de encendido/apagado, para controlar cosas como el <link xref="spinner.js">Spinner</link> en este ejemplo.

note: (itstool) path: page/p
en: A ToggleButton's get_active method returns true if it's pressed in, and false if it's not. Its set_active method is used if you want to change its state without needing to click on it. When it changes state from pressed in to popped out and vice-versa, it sends out the "toggled" signal, which you can connect to a function to do something.
es_ES: El método «get_active» del ToggleButton devuelve «true» si está presionado, y «false» si no lo está. Su método «set_active» se usa si quiere cambiar su estado sin la necesidad de pulsarlo. Cuando cambia su estado de «pulsado» a «no pulsado» y viceversa, envía la señal «toggled», que puede conectar a una función para hacer algo.

note: (itstool) path: section/title
en: Creating the ToggleButton and other widgets
es_ES: Crear el «ToggleButton» y otros widgets

note: (itstool) path: section/p
en: We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up as much space as possible inside the window.
es_ES: Se quiere que este <link xref="spinner.js">Spinner</link> se expanda vertical y horizontalmente, para llenar tanto espacio como sea posible dentro de la ventana.

note: (itstool) path: section/p
en: Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button</link>. The biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.
es_ES: Crear un ToggleButton es muy similar a crear un <link xref="button.js">Button</link> normal. La mayor diferencia es que está manejando una señal «toggled» en lugar de una «clicked». Este código vincula la función _onToggle a esa señal, para que se llame cada vez que se conmute el ToggleButton.

note: (itstool) path: section/p
en: Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the Spinner and ToggleButton to it.
es_ES: Aquí se crea una <link xref="grid.js">Rejilla</link> simple para organizar todo dentro, y después se le adjuntan el «Spinner» y el «ToggleButton».

note: (itstool) path: section/p
en: Now we add the Grid to the Window, and tell the Window to show itself and its child widgets when the application is started.
es_ES: Ahora se añade la rejilla a la ventana, y se le dice a esta que se muestre con sus widgets hijos cuando la aplicación arranque.

note: (itstool) path: section/title
en: Making something happen when the ToggleButton is toggled
es_ES: Hacer que algo suceda cuando se conmute el ToggleButton

note: (itstool) path: section/p
en: Whenever someone toggles the button, this function checks what its state is afterwards using get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.
es_ES: Cada vez que alguien conmuta el botón, esta función verifica cuál es su estado nuevo usando «get_active» e inicia o detiene el «spinner» consecuentemente. Se quiere que gire sólo cuando el botón está presionado, por lo que si «get_active» devuelve «true» se inicia el «spinner». De lo contrario, se le dice que se detenga.

note: (itstool) path: section/title
en: Useful methods for a ToggleButton widget
es_ES: Métodos útiles para un widget «ToggleButton»

note: (itstool) path: section/p
en: In line 22 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 22, la señal <code>«toggled»</code> se conecta a la función de retorno de llamada <code>toggled_cb()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (C)
es_ES: Barra de herramientas (C)

note: (itstool) path: info/desc
en: A bar of buttons
es_ES: Una barra de botones

note: (itstool) path: page/title
en: Toolbar
es_ES: Barra de herramientas

note: (itstool) path: page/p
en: Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has fullscreen functionality.
es_ES: La barra de herramientas puede contener texto o iconos del almacén. En este ejemplo se usan iconos del almacén. Este ejemplo funciona a pantalla completa.

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added to the app menu.
es_ES: Este ejemplo usa «SimpleActions» (ventana y aplicación). Las acciones de la aplicación se pueden añadir fácilmente al menú de la aplicación.

note: (itstool) path: info/desc
en: A bar of tools
es_ES: Una barra de botones

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added the the app menu.
es_ES: Este ejemplo usa SimpleActions (ventana y aplicación). Las acciones de la aplicación se pueden añadir fácilmente al menú de la aplicación.

note: (itstool) path: item/p
en: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html">Gtk Stock items</link>
es_ES: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html">Elementos del almacén de GTK</link>

note: (itstool) path: info/desc
en: A bar of buttons and other widgets
es_ES: Una barra de botones y otros widgets

note: (itstool) path: page/p
en: An example of toolbar with buttons (from stock icons).
es_ES: Un ejemplo de barra de herramientas con botones (con iconos del almacén).

note: (itstool) path: section/title
en: Useful methods for a Toolbar widget
es_ES: Métodos útiles para un widget de barra de herramientas

note: (itstool) path: section/p
en: In line 32 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 32, la señal <code>«activate»</code> de la acción <code>undo_action</code> se conecta a la función de retorno de llamada <code>undo_callback()</code> usando <code><var>action</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

note: (itstool) path: item/p
en: Use <code>insert(tool_item, position)</code> to insert the <code>tool_item</code> at <code>position</code>. If <code>position</code> is negative, the item is appended at the end of the toolbar.
es_ES: Use <code>insert(tool_item, position)</code> para insertar el <code>tool_item</code> en <code>position</code>. Si <code>position</code> es negativo, el elemento se añade al final de la barra de herramientas.

note: (itstool) path: item/p
en: <code>get_item_index(tool_item)</code> retrieves the position of <code>tool_item</code> on the toolbar.
es_ES: <code>get_item_index(tool_item)</code> obtiene la posición de <code>tool_item</code> en la barra de herramientas.

note: (itstool) path: item/p
en: <code>get_n_items()</code> returns the number of items on the toolbar; <code>get_nth_item(position)</code> returns the item in position <code>position</code>.
es_ES: <code>get_n_items()</code> devuelve el número de elementos en la barra de herramientas; <code>get_nth_item(position)</code> devuelve el elemento en la posición <code>position</code>.

note: (itstool) path: item/p
en: If the toolbar does not have room for all the menu items, and <code>set_show_arrow(True)</code>, the items that do not have room are shown through an overflow menu.
es_ES: Si la barra de herramientas no tiene espacio para todos los elementos del menú, y <code>set_show_arrow(True)</code>, los elementos que no entran se muestran a través de un menú flotante.

note: (itstool) path: item/p
en: <code>set_icon_size(icon_size)</code> sets the size of icons in the toolbar; <code>icon_size</code> can be one of <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. This should be used only for special-purpose toolbars, normal application toolbars should respect user preferences for the size of icons. <code>unset_icon_size()</code> unsets the preferences set with <code>set_icon_size(icon_size)</code>, so that user preferences are used to determine the icon size.
es_ES: <code>set_icon_size(icon_size)</code> establece el tamaño de los iconos en la barra de herramientas; <code>icon_size</code> puede ser uno de <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. Esto solo debe usarse para barras de herramientas con propósitos especiales, las barras de herramientas de aplicaciones normales deben respetar las preferencias del usuario para el tamaño de los iconos. <code>unset_icon_size()</code> restablece las preferencias establecidas con <code>set_icon_size(icon_size)</code>, para que las preferencias de usuario se usen para determinar el tamaño de los iconos.

note: (itstool) path: item/p
en: <code>set_style(style)</code>, where <code>style</code> is one of <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, sets if the toolbar shows only icons, only text, or both (vertically stacked or alongside each other). To let user preferences determine the toolbar style, and unset a toolbar style so set, use <code>unset_style()</code>.
es_ES: <code>set_style(style)</code>, donde <code>style</code> es uno de <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, determina si la barra de herramientas muestra solo iconos, solo texto, o ambos (apilados verticalmente o uno al lado de otro). Para dejar que las preferencias del usuario determinen el estilo de la barra de herramientas, y restablecer el estilo de barra de herramientas, use <code>unset_style()</code>.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Event Structures</link>
es_ES: <link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Estructuras de eventos</link>

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (Vala)
es_ES: Barra de herramientas (Vala)

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Python)
es_ES: Barra de herramientas creada con Glade (Python)

note: (itstool) path: page/title
en: Toolbar created using Glade
es_ES: Barra de herramientas creada con Glade

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.py"/>, except we use Glade to create the toolbar in an XML .ui file.
es_ES: Este ejemplo es similar al de la <link xref="toolbar.py"/>, excepto que se usa Glade para crear la barra de herramientas en un archivo .ui XML.

note: (itstool) path: section/title
en: Creating the toolbar with Glade
es_ES: Crear la barra de herramientas con Glade

note: (itstool) path: section/p (itstool) path: page/p
en: To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:
es_ES: Para crear la barra de herramientas usando el <link href="http://glade.gnome.org/">diseñador de interfaces Glade</link>:

note: (itstool) path: item/p
en: Open Glade, and save the file as <file>toolbar_builder.ui</file>
es_ES: Abra Glade y guarde el archivo como <file>toolbar_builder.ui</file>

note: (itstool) path: item/p
en: <media type="image" src="media/glade_ui.png" width="900"> Screenshot of Glade ui </media>
es_ES: <media type="image" src="media/glade_ui.png" width="900"> Captura de pantalla de la IU de Glade </media>

note: (itstool) path: item/p
en: Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.
es_ES: Bajo <gui>Contenedores</gui> en el lado izquierdo, pulse con el botón derecho en el icono de la barra de herramientas y seleccione <gui>Añadir widget como nivel superior</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_select_toolbar.png"> Screenshot of toolbar icon in Glade ui </media>
es_ES: <media type="image" src="media/glade_select_toolbar.png"> Captura de pantalla del icono de la barra de herramientas en la IU de Glade </media>

note: (itstool) path: item/p
en: Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to <input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.
es_ES: Bajo la pestaña <gui>General</gui> en la parte inferior derecha, cambie el <gui>Nombre</gui> a <input>toolbar</input> y <gui>Mostrar flecha</gui> a <gui>No</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_general.png"> Screenshot of General tab </media>
es_ES: <media type="image" src="media/glade_toolbar_general.png"> Captura de pantalla de la pestaña «General» </media>

note: (itstool) path: item/p
en: Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.
es_ES: Bajo la pestaña <gui>Comunes</gui>, establezca <gui>Expansión horizontal</gui> a <gui>Sí</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_common.png"> Screenshot of Common tab </media>
es_ES: <media type="image" src="media/glade_toolbar_common.png"> Captura de pantalla de la pestaña «Común» </media>

note: (itstool) path: item/p
en: Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.
es_ES: Pulse el botón derecho sobre la barra de herramientas en la parte superior derecha y seleccione <gui>Editar</gui>. La ventana <gui>Editor de barras de herramientas</gui> aparecerá.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_edit.png"> Screenshot of where to right click to edit toolbar. </media>
es_ES: <media type="image" src="media/glade_toolbar_edit.png"> Captura de pantalla que muestra dónde pulsar el botón derecho para editar la barra de herramientas. </media>

note: (itstool) path: item/p
en: We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.
es_ES: Se quieren añadir 5 «ToolButton»: «New», «Open», «Undo», «Fullscreen», y «Leave Fullscreen». Primero, se añadirá el «ToolButton» «New».

note: (itstool) path: item/p
en: Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.
es_ES: Bajo la pestaña <gui>Jerarquía</gui>, pulse <gui>Añadir</gui>.

note: (itstool) path: item/p
en: Change the name of the ToolItem to <input>new_button</input>.
es_ES: Cambie el nombre del «ToolItem» a <input>new_button</input>.

note: (itstool) path: item/p
en: Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of the ToolButton to be shown, when you view the toolbar.
es_ES: Deslícese hacia abajo y establezca <gui>Es Importante</gui> a <gui>Sí</gui>. Esto hará que la etiqueta del «ToolButton» se muestre cuando vea la barra de herramientas.

note: (itstool) path: item/p
en: Enter the <gui>action name</gui>: <input>app.new</input>.
es_ES: Introduzca el <gui>Nombre de la acción</gui>: <input>app.new</input>.

note: (itstool) path: item/p
en: Change the <gui>Label</gui> to <input>New</input>.
es_ES: Cambie la <gui>Etiqueta</gui> a <input>New</input>.

note: (itstool) path: item/p
en: Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.
es_ES: Seleccione el ID del inventario <gui>Nuevo</gui> desde el menú desplegable, o escriba <input>gtk-new</input>.

note: (itstool) path: item/p
en: Repeat the above steps for the remaining ToolButtons, with the following properties:
es_ES: Repita los pasos anteriores para los «ToolButton» restantes, con las siguientes propiedades:

note: (itstool) path: td/p
en: Is important
es_ES: Es importante

note: (itstool) path: td/p
en: Action name
es_ES: Nombre de la acción

note: (itstool) path: td/p
en: Stock Id
es_ES: ID del inventario

note: (itstool) path: td/p
en: Yes
es_ES: Sí

note: (itstool) path: item/p
en: Close the <gui>Tool Bar Editor</gui>.
es_ES: Cierre el <gui>Editor de la barra de herramientas</gui>.

note: (itstool) path: item/p
en: When our program will first start, we do not want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code. Note that the method <code>show_all()</code> would override this setting - so in the code we have to use <code>show()</code> separately on all the elements.
es_ES: No se quiere que se vea el «ToolButton» <gui>Salir de pantalla completa</gui> cuando el programa se inicie por primera vez, dado que la aplicación no estará en modo pantalla completa. Puede establecer esto en la pestaña <gui>Comunes</gui>, pulsando <gui>No</gui> en la propiedad <gui>Visible</gui>. El «ToolButton» aparecerá de todos modos en el diseñador de interfaces, pero se comportará correctamente cuando se cargue el archivo en el código de su programa. Tenga en cuenta que el método <gui>show_all()</gui> anularía esta opción, por lo que en el código se tiene que usar <gui>show()</gui> en todos los elementos por separado.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_visible_no.png"> Setting the visible property to No </media>
es_ES: <media type="image" src="media/glade_visible_no.png"> Establecer la propiedad «visible» a «No» </media>

note: (itstool) path: item/p
en: Save your work, and close Glade.
es_ES: Guarde su trabajo y cierre Glade.

note: (itstool) path: item/p
en: The XML file created by Glade is shown below. This is the description of the toolbar. At the time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of <file>toolbar_builder.ui</file>:
es_ES: El archivo XML generado por Glade se muestra debajo. Este es la descripción de la barra de herramientas. En el momento en el que se escribe esto, la opción para añadir la clase «Gtk.STYLE_CLASS_PRIMARY_TOOLBAR» en el diseñador de interfaces Glade no existe. Se puede añadir manualmente al archivo XML. Para hacer esto, añada el siguiente código XML en la línea 9 de <file>toolbar_builder.ui</file>:

note: (itstool) path: item/p
en: If you do not add this, the program will still work fine. The resulting toolbar will however look slightly different then the screenshot at the top of this page.
es_ES: Si no añade esto, el programa seguirá funcionando bien. La barra de herramientas resultante se verá, sin embargo, ligeramente distinta a la de la captura de pantalla en la parte superior de esta página.

note: (itstool) path: section/p (itstool) path: page/p
en: We now create the code below, which adds the toolbar from the file we just created.
es_ES: Ahora se crea el código siguiente, que añade la barra de herramientas desde el archivo que se acaba de crear.

note: (itstool) path: section/title
en: Useful methods for Gtk.Builder
es_ES: Métodos útiles para Gtk.Builder

note: (itstool) path: section/p
en: For the useful methods for a Toolbar widget, see <link xref="toolbar.py"/>
es_ES: Para ver los métodos útiles de un widget de barra de herramientas, consulte la <link xref="toolbar.py"/>

note: (itstool) path: section/p
en: Gtk.Builder builds an interface from an XML UI definition.
es_ES: Gtk.Builder construye una interfaz desde una definición UI XML.

note: (itstool) path: item/p
en: <code>add_from_file(filename)</code> loads and parses the given file and merges it with the current contents of the Gtk.Builder.
es_ES: <code>add_from_file(filename)</code> carga y procesa el archivo dado y lo une con el contenido actual del Gtk.Builder.

note: (itstool) path: item/p
en: <code>add_from_string(string)</code> parses the given string and merges it with the current contents of the Gtk.Builder.
es_ES: <code>add_from_string(string)</code> procesa la cadena dada y la une con el contenido actual del Gtk.Builder.

note: (itstool) path: item/p
en: <code>add_objects_from_file(filename, object_ids)</code> is the same as <code>add_from_file()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
es_ES: <code>add_objects_from_file(filename, object_ids)</code> es igual a <code>add_from_file()</code>, pero solo carga los objetos con los ID dados en la lista de <code>object_id</code>.

note: (itstool) path: item/p
en: <code>add_objects_from_string(string, object_ids)</code> is the same as <code>add_from_string()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
es_ES: <code>add_objects_from_string(string, object_ids)</code> es lo mismo que <code>add_from_string()</code>, pero sólo carga los objetos con los ID dados en la lista de <code>object_id</code>.

note: (itstool) path: item/p
en: <code>get_object(object_id)</code> retrieves the widget with the id <code>object_id</code> from the loaded objects in the builder.
es_ES: <code>get_object(object_id)</code> obtiene el widget con el ID <code>object_id</code> de los objetos cargados en el constructor.

note: (itstool) path: item/p
en: <code>get_objects()</code> returns all loaded objects.
es_ES: <code>get_objects()</code> devuelve todos los objetos cargados.

note: (itstool) path: item/p
en: <code>connect_signals(handler_object)</code> connects the signals to the methods given in the <code>handler_object</code>. This can be any object which contains keys or attributes that are called like the signal handler names given in the interface description, e.g. a class or a dict. In line 39 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: <code>connect_signals(handler_object)</code> conecta las señales a los métodos dados en el <code>handler_object</code>. Este puede ser cualquier objeto que contenga claves o atributos que se llamen como los nombres del gestor de señales dados en la descripción de la interfaz, por ejemplo una clase o un diccionario. En la línea 39 la señal <code>"activate"</code> de la acción <code>undo_action</code> se conecta a la función de retorno de llamada <code>undo_callback()</code> usando <code><var>action</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Vala)
es_ES: Barra de herramientas creada con Glade (Vala)

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.
es_ES: Este ejemplo es similar a <link xref="toolbar.vala"/>, excepto que se usa Glade para crear la barra de herramientas en un archivo ui de XML.

note: (itstool) path: item/p
en: When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.
es_ES: No se quiere que se vea el «ToolButton» <gui>Leave Fullscreen</gui> cuando el programa se inicie por primera vez, dado que la aplicación no estará en modo a pantalla completa. Puede establecer esto en la pestaña <gui>Comunes</gui>, pulsando <gui>No</gui> en la propiedad <gui>Visible</gui>. El «ToolButton» aparecerá de todos modos en el diseñador de interfaces, pero se comportará correctamente cuando se cargue el archivo en el código de su programa.

note: (itstool) path: info/desc
en: Add tips to your widgets
es_ES: Añadir consejos a sus widgets

note: (itstool) path: page/title
en: Tooltip
es_ES: Consejo

note: (itstool) path: page/p
en: A toolbar with a tooltip (with an image) for a button.
es_ES: Una barra de herramientas con un consejo (con una imagen) para un botón.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.c">Toolbar</link> example.
es_ES: Esto construye el ejemplo de <link xref="toolbar.c">Toolbar</link>.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html">Stock Items</link>
es_ES: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html">Elementos del almacén</link>

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.js">Toolbar</link> example.
es_ES: Esto construye el ejemplo de <link xref="toolbar.js">Toolbar</link>.

[ctx: text]
note: (itstool) path: info/title
en: Tooltip (Python)
es_ES: Consejo (Python)

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.py">Toolbar</link> example.
es_ES: Esto construye el ejemplo de <link xref="toolbar.py">Toolbar</link>.

note: (itstool) path: section/title
en: Useful methods for a Tooltip widget
es_ES: Métodos útiles para un widget de consejo

note: (itstool) path: section/p
en: <code>set_tooltip_text(text)</code> and <code>set_tooltip_markup(text)</code> can be used to add a tooltip of plain text (or text in the Pango Markup Language) to a widget.
es_ES: <code>set_tooltip_text(text)</code> y <code>set_tooltip_markup(text)</code> pueden usarse para añadir un consejo o texto plano (o texto en el lenguaje de marcado de Pango) a un widget.

note: (itstool) path: section/p
en: For more complex tooltips, for instance for a tooltip with an image:
es_ES: Para consejos más complejos, por ejemplo para un consejo con una imagen:

note: (itstool) path: item/p
en: Set the <code>"has-tooltip"</code> property of the widget to <code>True</code>; this will make GTK+ monitor the widget for motion and related events which are needed to determine when and where to show a tooltip.
es_ES: Establezca la propiedad <code>"has-tooltip"</code> del widget a <code>True</code>; esto hará que GTK+ monitorice el widget en busca de movimiento y eventos relacionados que se necesitan para determinar cuándo y dónde mostrar un consejo.

note: (itstool) path: item/p
en: Connect to the <code>"query-tooltip"</code> signal. This signal will be emitted when a tooltip is supposed to be shown. One of the arguments passed to the signal handler is a GtkTooltip object. This is the object that we are about to display as a tooltip, and can be manipulated in your callback using functions like <code>set_icon()</code>. There are functions for setting the tooltip's markup (<code>set_markup(text)</code>), setting an image from a stock icon (<code>set_icon_from_stock(stock_id, size)</code>), or even putting in a custom widget (<code>set_custom(widget)</code>).
es_ES: Conecte a la señal <code>"query-tooltip"</code>. Esta señal se emitirá cuando se deba mostrar un widget. Uno de los argumentos que se le pasan al gestor de señales es un objeto GtkTooltip. Este es el objeto que se va a mostrar como un consejo, y puede manipularse en su retorno de llamada usando funciones como <code>set_icon()</code>. Hay funciones para establecer el texto marcado del consejo (<code>set_markup(text)</code>), una imagen desde un icono del almacén (<code>set_icon_from_stock(stock_id, size)</code>), o incluso poner un widget personalizado (<code>set_custom(widget)</code>).

note: (itstool) path: item/p
en: Return <code>True</code> from your query-tooltip handler. This causes the tooltip to be show. If you return <code>False</code>, it will not be shown.
es_ES: Devuelva <code>True</code> de su gestor de «query-tooltip». Esto hace que el consejo se muestre. Si devuelve <code>False</code>, no se mostrará.

note: (itstool) path: section/p
en: In the probably rare case where you want to have even more control over the tooltip that is about to be shown, you can set your own GtkWindow which will be used as tooltip window. This works as follows:
es_ES: En el probablemente raro caso en el que quiera tener aún más control sobre el consejo que se va a mostrar, puede establecer su propia GtkWindow que se usará como ventana del consejo. Esto funciona así:

note: (itstool) path: item/p
en: Set <code>"has-tooltip"</code> and connect to <code>"query-tooltip"</code> as before.
es_ES: Establezca <code>"has-tooltip"</code> y conecte con <code>"query-tooltip"</code> como antes.

note: (itstool) path: item/p
en: Use <code>set_tooltip_window()</code> on the widget to set a GtkWindow created by you as tooltip window.
es_ES: Use <code>set_tooltip_window()</code> en el widget para establecer una GtkWindow creada como ventana del consejo.

note: (itstool) path: item/p
en: In the <code>"query-tooltip"</code> callback you can access your window using <code>get_tooltip_window()</code> and manipulate as you wish. The semantics of the return value are exactly as before, return <code>True</code> to show the window, <code>False</code> to not show it.
es_ES: En la devolución de llamada <code>"query-tooltip"</code> puede acceder a su ventana usando <code>get_tooltip_window()</code> y manipularla como quiera. La semántica del valor de retorno es exactamente la misma que antes, devuelva <code>True</code> para mostrar el widget o <code>False</code> para no hacerlo.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.vala">Toolbar</link> example.
es_ES: Esto construye el ejemplo de <link xref="toolbar.vala">Toolbar</link>.

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Python)
es_ES: Treeview sencillo con ListStore (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (more complex example)
es_ES: Un TreeView mostrando un ListStore (ejemplo más complejo)

note: (itstool) path: page/title
en: More Complex Treeview with ListStore
es_ES: Treeview más complejo con ListStore

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the selection "changed" signal connected.
es_ES: Este TreeView muestra un ListStore sencillo con la señal de selección «changed» conectada.

note: (itstool) path: section/title
en: Useful methods for a TreeView widget
es_ES: Métodos útiles para un widget TreeView

note: (itstool) path: section/p
en: The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information and for a list of useful methods for TreeModel see <link xref="model-view-controller.py"/>.
es_ES: El widget «TreeView» está construido alrededor del diseño <em>Modelo/Vista/Controlador</em>: el <em>Modelo</em> almacena los datos; la <em>Vista</em> obtiene las notificaciones de cambio y muestra el contenido del modelo; el <em>Controlador</em>, finalmente, cambia el estado del modelo y le notifica a la vista de los cambios. Para más información y para una lista de métodos útiles para el «TreeModel» consulte la sección <link xref="model-view-controller.py"/>.

note: (itstool) path: section/p
en: In line 36 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 36, la señal <code>"changed"</code> se conecta a la función de retorno de llamada <code>on_changed()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with TreeStore (Python)
es_ES: TreeView con TreeStore (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (more complex example, with CellRendererToggle)
es_ES: Un TreeView mostrando un TreeStore (ejemplo más complejo, con CellRendererToggle)

note: (itstool) path: page/title
en: More Complex TreeView with TreeStore
es_ES: TreeView más complejo con TreeStore

note: (itstool) path: page/p
en: This TreeView displays a TreeStore with two columns, one of which is rendered as a toggle.
es_ES: Este TreeView muestra un ListStore con dos columnas, una de las cuales se procesa como un interruptor.

note: (itstool) path: section/p
en: In line 48 the <code>"toggled"</code> signal is connected to the callback function <code>on_toggled()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 48 la señal <code>«toggled»</code> se conecta a una función de retorno de llamada <code>on_toggled()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with ListStore (JavaScript)
es_ES: TreeView con ListStore (JavaScript)

note: (itstool) path: info/desc
en: A widget that shows a separate list of items
es_ES: Un widget que muestra una lista separada de elementos

note: (itstool) path: page/title
en: TreeView with ListStore
es_ES: TreeView con ListStore

note: (itstool) path: page/p
en: A TreeView is like a window onto the contents of either a ListStore or a TreeStore. A ListStore is like a spreadsheet: a "flat", two-dimensional list of things broken up into rows and columns. A TreeStore, meanwhile, can branch out in different directions like a tree can. In this example, we create a TreeView that shows the contents of a ListStore with (fictitious) names and phone numbers in it, and set it so that the <link xref="label.js">Label</link> at the bottom of the window shows more information about whichever name you click on.
es_ES: Un TreeView es como una ventana sobre los contenidos de un ListStore o un TreeStore. Un ListStore es como una hoja de cálculo: una lista de cosas «plana», de dos dimensiones, dividida en filas y columnas. Un TreeStore, en cambio, puede bifurcarse en distintas direcciones como un árbol. En este ejemplo, se crea un TreeView que muestra el contenido de un ListStore con nombres y números de teléfono (ficticios), y se configura para que la <link xref="label.js">Etiqueta</link> en la parte inferior de la ventana muestre más información acerca de cualquier nombre en el que pulse.

note: (itstool) path: page/p
en: The TreeView is not just a single widget, but contains a number of smaller ones:
es_ES: Un TreeView no es solamente un widget individual, sino que contiene varios más pequeños.

note: (itstool) path: item/p
en: TreeViewColumn widgets show each (vertical) column of information from the ListStore. Each one has a title which can be shown at the top of the column, like in the screenshot.
es_ES: Los widgets TreeViewColumn muestran cada columna (vertical) de información del ListStore. Cada uno tiene un título que puede mostrarse en la parte superior de la columna, como en la captura de pantalla.

note: (itstool) path: item/p
en: CellRenderer widgets are "packed" into each TreeViewColumn, and contain the instructions for how to display each individual "cell", or item from the ListStore. There are multiple different types, including the CellRendererText used here and the CellRendererPixbuf, which displays a picture ("pixel buffer").
es_ES: Los widgets CellRenderer se «empaquetan» en cada TreeViewColumn, y contienen las instrucciones de cómo mostrar cada «celda» individual, o elemento del ListStore. Hay varios tipos diferentes, incluyendo el CellRendererText que se usa aquí y el CellRendererPixbuf, que muestra una imagen («búfer de píxeles»).

note: (itstool) path: page/p
en: Finally, we're going to use an object called a TreeIter, which isn't a widget so much as an invisible cursor which points to a (horizontal) row in the ListStore. Whenever you click on a name in the phonebook, for instance, we create a TreeIter pointing to the row that's selected, and then use that to tell the ListStore which entry we want the Label to show more information about.
es_ES: Finalmente, se usará un objeto llamado TreeIter, que no es un widget sino un cursor invisible que apunta a una fila (horizontal) en el ListStore. Cada vez que pulsa en un nombre en la libreta de direcciones, por ejemplo, se crea un TreeIter apuntando a la fila seleccionada, y después se usa para decirle al ListStore el elemento del que tiene que mostrar más información.

note: (itstool) path: note/p
en: The TreeView is probably the most complicated Gtk widget, because of how many parts it has and how they all have to work together. Give yourself time to learn how it works and experiment with it, or try something easier first if you're having trouble.
es_ES: El TreeView es probablemente el widget de GTK más complicado, por la cantidad de partes que tiene y por cómo tienen que trabajar juntas. Tómese un tiempo para aprender cómo funciona y experimentar con él, o intente algo más fácil primero si encuentra problemas.

note: (itstool) path: section/p
en: All the code for this sample goes in the TreeViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
es_ES: Todo el código de este ejemplo va en la clase TreeViewExample. 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> en la que van los widgets y la ventana.

note: (itstool) path: section/p
en: We first create the ListStore like we would any widget. Then we call its set_column_types method, and pass it an array of GObject data types. (We could have put the types all on one line, but here we are breaking them up to make it easier to read.)
es_ES: Primero se crea el ListStore como cualquier otro widget. Después se llama a su método set_column_types, y se le pasa una matriz de tipos de datos GObject (se podrían haber puesto todos los tipos en una sola línea, pero aquí se separan para hacerlo más fácil de leer).

note: (itstool) path: section/p
en: The GObject data types you can use include:
es_ES: Los tipos de datos GObject que puede usar incluyen:

note: (itstool) path: item/p
en: <file>gtk.gdk.Pixbuf</file> -- A picture
es_ES: <file>gtk.gdk.Pixbuf</file>: una imagen

note: (itstool) path: section/p
en: In this case, we're making a ListStore of four columns, each one containing string values.
es_ES: En este caso, se está haciendo un ListStore de cuatro columnas, cada una conteniendo valores de cadenas.

note: (itstool) path: section/p
en: Here we have the information to go in the ListStore. It's an array of objects, each one corresponding to a single entry in our phone book.
es_ES: Aquí se tiene la información que va en el ListStore. Es una matriz de objetos, cada uno correspondiente a una única entrada en la libreta de direcciones.

note: (itstool) path: section/p
en: Note that the TreeView in the screenshot doesn't actually show the data from the "description" properties. Instead, that information's shown in the Label beneath it, for whichever row that you click on. That's because the TreeView and ListStore are two separate things, and a TreeView can show all or part of a ListStore, and display what's in it in different ways. You can even have multiple widgets show things from the same ListStore, like the Label in our example or even a second TreeView.
es_ES: Tenga en cuenta que el TreeView en la captura de pantalla no muestra en realidad los datos de las propiedades «description». En su lugar, esa información se muestra en la etiqueta debajo, para cada fila en la que pulse. Eso es así porque el TreeView y el ListStore son dos cosas separadas, y un TreeView puede mostrar todo o parte de un ListStore, y mostrar su información de maneras diferentes. Puede hacer que varios widgets muestren cosas del mismo ListStore, como la etiqueta del ejemplo, o incluso un segundo TreeView.

note: (itstool) path: section/p
en: This <file>for</file> loop puts the strings from our phonebook into our ListStore in order. In order, we pass the ListStore's set method the iter that points to the correct row, an array which says which columns we want to set, and an array which contains the data we want to put into those columns.
es_ES: Este bucle <file>for</file> pone las cadenas de la libreta de direcciones en el ListStore ordenadas. En orden, se le pasa al método «set» del ListStore el iter que apunta a la fila correcta, una matriz que dice qué columnas se quieren establecer, y una matriz que contiene los datos que se quieren poner en esas columnas.

note: (itstool) path: section/p
en: A ListStore's <file>append</file> method adds a horizontal row onto it (it starts out with none), and returns a TreeIter pointing to that row like a cursor. So by passing <file>this._listStore.append()</file> to the ListStore as a property, we're creating a new row and telling the <file>set</file> method which row to set data for at the same time.
es_ES: Un método <file>append</file> del ListStore le añade una fila horizontal (empieza sin ninguna), y devuelve un TreeIter apuntando a esa fila como un cursor. Entonces, pasándole <file>this._listStore.append()</file> al ListStore como una propiedad, se está creando una fila nueva y diciéndole al método <file>set</file> en qué fila tiene que establecer los datos al mismo tiempo.

note: (itstool) path: section/title
en: Creating the TreeView
es_ES: Crear el TreeView

note: (itstool) path: section/p
en: Here we create a basic TreeView widget, that expands both horizontally and vertically to use as much space as needed. We set it to use the ListStore we created as its "model", or the thing it'll show us stuff from.
es_ES: Aquí se crea un widget TreeView básico, que se expande tanto horizontal como verticalmente para usar tanto espacio como se necesite. Se configura para usar el ListStore que se creó como su «modelo», o aquello desde donde mostrará datos.

note: (itstool) path: section/p
en: Now we create each of the vertical TreeViewColumns we'll see in the TreeView. The title for each one goes at the top, as you can see in the screenshot.
es_ES: Ahora se crean todas las TreeViewColumns verticales que se verán en el TreeView. El título de cada una va en la parte superior, como puede ver en la captura de pantalla.

note: (itstool) path: section/p
en: Here we create the CellRenderers that we'll use to display the text from our ListStore, and pack them into the TreeViewColumns. Each CellRendererText is used for all the entries in that column. Our normal CellRendererText just creates plain text, while our bold one uses heavier-weight text. We put it into the first name column, and tell the other two to use copies of the normal one. The "true" used as the second parameter for the <file>pack_start</file> method tells it to expand the cells when possible, instead of keeping them compact.
es_ES: Aquí se crean los CellRenderer que se usarán para mostrar el texto del ListStore, y se empaquetan en las TreeViewColumn. Cada CellRendererText se usa para todas las entradas en esa columna. El CellRendererText normal sólo crea texto plano, mientras que el «bold» usa texto en negrita. Se pone en la primera columna de nombre, y se le dice a las otras dos que usen copias de la normal. El «true» usado como segundo parámetro para el método <file>pack_start</file> le dice que expanda las celdas cuando sea posible, en lugar de mantenerlas compactas.

note: (itstool) path: note/p
en: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Here is a list</link> of other text properties you can use. In order to use these Pango constants, make sure to put the line <file>const Pango = imports.gi.Pango;</file> at the beginning of your code like we did.
es_ES: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Aquí hay una lista</link> de otras propiedades de texto que puede usar. Para usar estas constantes de Pango, asegúrese de poner la línea <file>const Pango = imports.gi.Pango;</file> al principio del código como se hizo.

note: (itstool) path: section/p
en: Now that we've put the CellRenderers into the TreeViewColumns, we use the <file>add_attribute</file> method to tell each column to pull in text from the model our TreeView is set to use; in this case, the ListStore with the phonebook.
es_ES: Ahora que se han puesto los CellRenderer en las TreeViewColumn, se usa el método <file>add_attribute</file> para decirle a cada columna que obtenga texto del modelo que el TreeView está configurado para usar; en este caso, el ListStore con la libreta de direcciones.

note: (itstool) path: item/p
en: The first parameter is which CellRenderer we're going to use to render what we're pulling in.
es_ES: El primer parámetro es qué CellRenderer se usará para procesar lo que se está obteniendo.

note: (itstool) path: item/p
en: The second parameter is what kind of information we're going to pull in. In this case, we're letting it know that we're rendering text.
es_ES: El segundo parámetro es qué tipo de información se obtendrá. En este caso, se le está haciendo saber que se procesa texto.

note: (itstool) path: item/p
en: The third parameter is which of the ListStore's columns we're pulling that information in from.
es_ES: El tercer parámetro es de cuál de las columnas del ListStore se está obteniendo la información.

note: (itstool) path: section/p
en: After we've set that up, we use the TreeView's <file>insert_column</file> method to put our TreeViewColumns inside it in order. Our TreeView is now complete.
es_ES: Después de haber preparado eso, se usa el método <file>insert_column</file> del TreeView para poner dentro las TreeViewColumn en orden. El TreeView ahora está terminado.

note: (itstool) path: note/p
en: Normally, you might want to use a loop to initialize your TreeView, but in this example we're spelling things out step by step for the sake of making it easier to understand.
es_ES: Normalmente, usaría un bucle para inicializar su TreeView, pero en este ejemplo se hacen las cosas paso a paso para hacerlo más fácil de entender.

note: (itstool) path: section/title
en: Building the rest of the UI
es_ES: Crear el resto de la IU

note: (itstool) path: section/p
en: The TreeView's <file>get_selection</file> method returns an object called a TreeSelection. A TreeSelection is like a TreeIter in that it's basically a cursor that points at a particular row, except that the one it points to is the one that's visibly highlighted as selected.
es_ES: El método <file>get_selection</file> del TreeView devuelve un objeto llamado TreeSelection. Una TreeSelection es como un TreeIter en el sentido de que es básicamente un cursor que apunta a una fila particular, excepto que apunta a la que está resaltada visiblemente como seleccionada.

note: (itstool) path: section/p
en: After we get the TreeSelection that goes with our TreeView, we ask it to tell us when it changes which row it's pointing to. We do this by connecting its <file>changed</file> signal to the _onSelectionChanged function we wrote. This function changes the text displayed by the Label we just made.
es_ES: Después de obtener la TreeSelection que va con el TreeView, le pedimos que nos diga cuándo cambia la fila a la que está apuntando. Esto se hace conectando la señal <file>changed</file> a la función «_onSelectionChanged» que se escribió. Esta función cambia el texto que muestra la etiqueta que se acaba de hacer.

note: (itstool) path: section/p
en: After we've gotten that out of the way, we create a <link xref="grid.js">Grid</link> to put everything in, then add it to our window and tell the window to show itself and its contents.
es_ES: Después de haber terminado eso, se crea una <link xref="grid.js">Rejilla</link> para poner todo dentro, se añade a la ventana y se le dice a esta que se muestre y revele su contenido.

note: (itstool) path: section/title
en: Function which handles a changed selection
es_ES: Función que maneja una selección cambiada

note: (itstool) path: section/p
en: The line of code with the let statement is a little convoluted, but it's nonetheless the best way to get a TreeIter pointing to the same row as our TreeSelection. It has to create a couple of other object references, but <file>iter</file> is the only one we need.
es_ES: La línea de código con la declaración let es un poco compleja, pero sin embargo es la mejor manera de hacer que un TreeIter apunte a la misma fila que la TreeSelection. Tiene que crear un par de referencias a otros objetos, pero <file>iter</file> es la única que se necesita.

note: (itstool) path: section/p
en: After we've done that, we call the Label's <file>set_label</file> function, and use the ListStore's <file>get_value</file> function a handful of times to fill in the data we want to put in it. Its parameters are a TreeIter pointing to the row we want to get data from, and the column.
es_ES: Después de haber hecho eso, se llama a la función <file>set_label</file> de la etiqueta, y se usa la función <file>get_value</file> del ListStore algunas veces para llenar los datos que queremos poner en ella. Sus parámetros son un TreeIter apuntando a la fila de la que queremos obtener los datos, y la columna.

note: (itstool) path: section/p
en: Here, we want to get data from all four columns, including the "hidden" one that's not part of the TreeView. This way, we can use our Label to show strings that are too large to fit in the TreeView, and that we don't need to see at a glance.
es_ES: Aquí, se quieren obtener datos de todas las cuatro columnas, incluyendo la «escondida» que no es parte del TreeView. De esta manera, se puede usar la etiqueta para mostrar cadenas que son demasiado largas para entrar en el TreeView, y que no necesitamos ver de un vistazo.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TreeViewExample class, and set the application running.
es_ES: Finalmente, se crea una instancia nueva de la clase TreeViewExample terminada, y se ejecuta la aplicación.

[ctx: text]
note: (itstool) path: info/title
en: Simple TreeView with ListStore (Python)
es_ES: TreeView sencillo con ListStore (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (simpler example)
es_ES: Un TreeView mostrando un ListStore (ejemplo más simple)

note: (itstool) path: page/title
en: Simple TreeView with ListStore
es_ES: TreeView sencillo con ListStore

note: (itstool) path: section/p
en: The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information, and for a list of useful methods for TreeModel, see <link xref="model-view-controller.py"/>.
es_ES: El widget «TreeView» está construido alrededor de un diseño <em>Modelo/Vista/Controlador</em>: el <em>Modelo</em> almacena los datos; la <em>Vista</em> obtiene las notificaciones de cambio y muestra el contenido del modelo; El <em>Controlador</em>; finalmente, cambia el estado del modelo y le notifica a la vista de estos cambios. Para más información, y para una lista de métodos útiles del «TreeModel», consulte la sección <link xref="model-view-controller.py"/>.

note: (itstool) path: section/p
en: In line 44 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
es_ES: En la línea 44, la señal <code>"changed"</code> se conecta a la función de retorno de llamada <code>on_changed()</code> usando <code><var>widget</var>.connect(<var>señal</var>, <var>función de retorno de llamada</var>)</code>. Consulte la sección <link xref="signals-callbacks.py"/> para una explicación más detallada.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/pango/stable/pango-Fonts.html">Fonts</link>
es_ES: <link href="http://developer.gnome.org/pango/stable/pango-Fonts.html">Tipografías</link>

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Vala)
es_ES: Treeview sencillo con ListStore (Vala)

note: (itstool) path: info/desc
en: A widget can display any TreeModel implementation (lists and trees)
es_ES: Un widget puede mostrar cualquier implementación de TreeModel (listas y árboles)

note: (itstool) path: page/title
en: Simple Treeview with ListStore
es_ES: Treeview sencillo con ListStore

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the Selection "changed" signal connected.
es_ES: Este TreeView muestra un ListStore sencillo con la señal de selección «changed» conectada.

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (simpler example)
es_ES: Un TreeView mostrando un TreeStore (ejemplo más simple)

note: (itstool) path: page/title
en: Simpler TreeView with TreeStore
es_ES: TreeView más sencillo con ListStore

note: (itstool) path: page/p
en: This TreeView displays a TreeStore.
es_ES: Este TreeView muestra un TreeStore

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Python)
es_ES: Tutorial para principiantes (Python)

note: (itstool) path: info/desc
en: A tutorial for beginners who want to learn how to program GUIs using GTK+ in Python.
es_ES: Un tutorial para principiantes que quieran aprender cómo programar IGU usando GTK+ en Python.

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+ in Python.
es_ES: Siguiendo estos tutoriales, aprenderá los conceptos básicos de la programación de interfaces de usuario usando GTK+ en Python.

note: (itstool) path: synopsis/p
en: If you have never programmed before, or are not familiar with the concepts of object oriented programming, you may need to learn a few basics first. The book <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> or <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link> may be a better place for you to start. You may also be interested in <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Once you master the basics, be sure to come back and check out these tutorials.
es_ES: Si nunca antes ha programado, o no está familiarizado con los conceptos de la programación orientada a objetos, puede necesitar aprender primero unos conceptos básicos. El libro <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> o <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link> pueden ser un buen comienzo. Tal vez también esté interesado en <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Una vez que domine los conceptos básicos, vuelva y revise estos tutoriales.

note: (itstool) path: section/title
en: To run the code samples
es_ES: Para ejecutar los ejemplos de código

note: (itstool) path: section/p
en: To run the code samples in the tutorial:
es_ES: Para ejecutar los ejemplos de código en el tutorial:

note: (itstool) path: item/p
en: Type or copy and paste the code into a file, and save the file with a name like <var>filename</var>.py
es_ES: Escriba o copie y pegue el código en un archivo, y guárdelo con un nombre como <var>nombre_archivo</var>.py

note: (itstool) path: item/p
en: To execute the code, type in the terminal:
es_ES: Para ejecutar el código, escriba en la terminal:

note: (itstool) path: item/screen
en: python <var>filename</var>.py
es_ES: python <var>nombre_archivo</var>.py

note: (itstool) path: section/p
en: After executing the code, you will either see the widget on your screen, or (if you have mistyped some of the code) you will see an error message that will help you identify the problem.
es_ES: Después de ejecutar el código, verá un widget en su pantalla, o (si ha escrito mal algo) un mensaje de error que le ayudará a identificar el problema.

note: (itstool) path: section/title
en: A path through the widgets (with some theory)
es_ES: Un camino a través de los widgets (con algo de teoría)

note: (itstool) path: section/p
en: The tutorial will walk you through increasingly complex examples and programming theory, but you can also feel free to just go directly to the tutorial that is most helpful to you.
es_ES: El tutorial le llevará a través de ejemplos cada vez más complejos y teoría de programación, pero también puede ir directamente el tutorial que crea que le ayudará más.

note: (itstool) path: steps/title
en: Basic windows
es_ES: Ventanas básicas

note: (itstool) path: steps/title
en: Images and labels
es_ES: Imágenes y etiquetas

note: (itstool) path: steps/title
en: Introduction to properties
es_ES: Introducción a las propiedades

note: (itstool) path: steps/title
en: Grid, separator and scrolling
es_ES: Rejilla, separador y deslizamiento

note: (itstool) path: steps/title
en: Signals, callbacks and buttons
es_ES: Señales, retornos de llamada y botones

note: (itstool) path: steps/title
en: Other display widgets
es_ES: Otros widgets de visualización

note: (itstool) path: steps/title
en: Entry widgets
es_ES: Widgets de entrada

note: (itstool) path: steps/title
en: A widget to write and display text
es_ES: Un widget para escribir y mostrar texto

note: (itstool) path: steps/title
en: Dialogs
es_ES: Diálogos

note: (itstool) path: steps/title
en: Menus, Toolbars and Tooltips (also: using Glade and GtkBuilder)
es_ES: Menús, barras de herramientas y consejos (también: usar Glade y GtkBuilder)

note: (itstool) path: steps/title
en: TreeViews and ComboBoxes (using the M/V/C design)
es_ES: TreeViews y ComboBoxes (usando el diseño M/V/C)

note: (itstool) path: steps/title
en: Custom widget
es_ES: Widget personalizado

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Vala
es_ES: Tutoriales, ejemplos de código y demostraciones de la plataforma en Vala

note: (itstool) path: section/title
en: Code samples and tutorial
es_ES: Ejemplos de código y tutorial

[ctx: text]
note: (itstool) path: info/title
en: Weather application (JavaScript)
es_ES: Aplicación del clima (JavaScript)

note: (itstool) path: info/desc
en: How to plan an application that uses asynchronous calls. Asynchronous calls will be presented through a weather application.
es_ES: Cómo plantear una aplicación que usa llamadas asíncronas. Las llamadas asíncronas se presentarán mediante una aplicación de información meteorológica.

note: (itstool) path: page/title
en: Weather application
es_ES: Aplicación del clima

note: (itstool) path: synopsis/p
en: In this guide well construct a weather application using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
es_ES: En esta parte de la guía se construirá una aplicación del clima usando llamadas asíncronas. En este ejemplo, la información del clima se obtiene de geonames.org y la aplicación usa los <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">códigos ICAO</link> para responder a las peticiones. Para escribir y ejecutar todos los ejemplos de código necesita un editor de texto en el que escribir el código, una terminal y GNOME 3 o superior instalado en su equipo. En esta guía se verán las siguientes partes:

note: (itstool) path: item/p
en: <link xref="#planningUi">Planning the graphical user interface</link>
es_ES: <link xref="#planningUi">Planificar la interfaz gráfica de usuario</link>

note: (itstool) path: item/p
en: <link xref="#asynchronous">Asynchronous calls</link>
es_ES: <link xref="#asynchronous">Llamadas asíncronas</link>

note: (itstool) path: item/p
en: <link xref="#main">The main program file</link>
es_ES: <link xref="#main">El archivo del programa principal</link>

note: (itstool) path: item/p
en: <link xref="#main">Local library GeoNames</link>
es_ES: <link xref="#main">Biblioteca local GeoNames</link>

note: (itstool) path: item/p
en: <link xref="#main">Autotools and Icons</link>
es_ES: <link xref="#main">«Autotools» e iconos</link>

note: (itstool) path: section/title
en: Planning the graphical user interface
es_ES: Planificar la interfaz gráfica de usuario

note: (itstool) path: section/p
en: Structuring an application for GNOME 3 means you will be using <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. The most important thing is to remember that the main window will only accept one widget. You must plan your structure accordingly (this example is using Gtk.Grid). A useful method is to draw out the main window and place every widget needed inside that box. By looking at an image of your future application it is easier to tell what are the relations between widgets. For example Gtk.Grid places your widgets in relation to other widgets, so after the first widget is in place, placing widgets can be done in relation to any widget on the grid.
es_ES: Estructurar una aplicación GNOME 3 significa que usará <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. Lo más importante es recordar que la ventana principal sólo aceptará un widget. Debe planificar su estructura de acuerdo a esto (este ejemplo usa una Gtk.Grid). Un método útil es dibujar la ventana principal y colocar dentro cada widget que necesite. Mirando la imagen de su futura aplicación es fácil definir las relaciones entre los widgets. Por ejemplo, Gtk.Grid coloca sus widgets en relación a otros widgets, por lo que después de colocar el primero, los demás se pueden colocar en relación al primero en la rejilla.

note: (itstool) path: section/title
en: Asynchronous calls
es_ES: Llamadas asíncronas

note: (itstool) path: section/p
en: With many programming languages, all operations are run synchronously - you tell the program to do something, and it will wait until that action completes before proceeding. This is however bad for graphical user interfaces, as then the whole application will be frozen while the program waits for the operation. Going asynchronous (async) helps here. With async calls, your UI won't be blocked with any requests. Async calls make your application more flexible and better equipped to handle situations when calls take more time than expected or for some reason get jammed. Async calls can be used for example file system I/O and for slower calculations in the background.
es_ES: En muchos lenguajes de programación, todas las operaciones se ejecutan síncronamente: le ordena al programa que haga algo, y esperará hasta que esa acción se complete antes de seguir. Esto, sin embargo, es malo para interfaces gráficas de usuario, ya que la aplicación entera se detendrá mientras el programa espera a la operación. Ser asíncrono (async) ayuda en este caso. Con llamadas async, su IU no se bloqueará con ninguna petición. Las llamadas async hacen su aplicación más flexible y mejor equipada para manejar situaciones en las que las llamadas toman más tiempo de lo esperado o por alguna razón se bloquean. Las llamadas async pueden usarse, por ejemplo, para E/S del sistema de archivos y para cálculos lentos en segundo plano.

note: (itstool) path: section/p
en: In this example we have to get data from geonames.org. While we do that we want the rest of our program to continue. If we wouldn't get any information from geonames.org for the lack of internet connection and this would be a synchronous application we would never get to the point where our main_quit() is processed correctly and the application would have to killed from Terminal.
es_ES: En este ejemplo, se deben obtener datos de geonames.org. Mientras se hace esto, se quiere que el resto del programa continúe. Si no obtuviéramos ninguna información de geonames.org por la falta de conexión a internet y esta fuera una aplicación síncrona, nunca se llegaría al punto en el que el main_quit() se procesa correctamente y habría que matar la aplicación desde una terminal.

note: (itstool) path: section/title
en: The different parts of the program
es_ES: Las diferentes partes del programa

note: (itstool) path: page/title
en: The main program file
es_ES: El archivo del programa principal

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the main program file of the weather application. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this part we we'll go through the following parts:
es_ES: En esta parte de la guía se construirá el archivo del programa principal de la aplicación del clima. Para escribir y ejecutar todos los ejemplos de código necesita un editor de texto en el que escribir el código, una terminal y GNOME 3 o superior instalado en su equipo. En esta guía se verán las siguientes partes:

note: (itstool) path: item/p
en: <link xref="#widgets">Adding a grid and all the necessary widgets to it</link>
es_ES: <link xref="#widgets">Añadir una rejilla y todos los widgets necesarios en ella</link>

note: (itstool) path: item/p
en: <link xref="#asynccall">Requesting the weather information asynchronously</link>
es_ES: <link xref="#asynccall">Solicitar la información meteorológica de manera asíncrona</link>

note: (itstool) path: item/p
en: <link xref="#connectingbuttons">Connecting signals to button and entry</link>.
es_ES: <link xref="#connectingbuttons">Conectar las señales a un botón y a una entrada</link>

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to Terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
es_ES: Esta línea indica cómo ejecutar el script. Debe ser la primera línea del código y debe ser ejecutable. Para obtener permisos de ejecución vaya a la terminal y ejecute lo siguiente en la carpeta adecuada: chmod +x nombrescript. También puede usar el gestor de archivo. Simplemente vaya a la carpeta donde está el código, pulse con el botón derecho sobre el archivo de código y elija «Propiedades», pulse en la pestaña «Permisos» y marque la casilla para permitir ejecutar el archivo como un programa.

note: (itstool) path: section/p
en: In order to have a working program we need to import a GObject Introspection -library to our use. For working UI, we need Gtk. Gtk is imported in the beginning so we have it in our use everywhere. We also import our own local JavaScript library geonames to our use here.
es_ES: Para que el programa funcione se debe importar una biblioteca de introspección de GObject. Para que funcione la IU se necesita GTK+, que se importa al inicio, por lo que está en uso en todos los sitios. También se importa la biblioteca local en JavaScript geonames para usarla aquí.

note: (itstool) path: section/title
en: Adding a grid and all the necessary widgets to it
es_ES: Añadir una rejilla y todos los widgets necesarios en ella

note: (itstool) path: section/p
en: In this section we create the grid we are going to use for positioning the widgets. All the buttons, labels and entries are initialized and placed on the grid. As seen from the placing of the different widgets, they don't need to be related only to one widget. At this point some of the labels don't have any content. The content for those widgets is applied later. If you run the application at this stage, you have the UI ready, but the widgets are not connected to anything. For this we need to first build the weather searching local library, and then get the information we need asynchronously. When we have our local library ready we can connect it to the necessary widgets.
es_ES: En esta sección se crea la rejilla que se usará para posicionar los widgets. Todos los botones, etiquetas y entradas se inicializan y colocan en la rejilla. Como se puede ver en la colocación de los diferentes widgets, no es necesario relacionarlo con un único widget. En este punto, algunas de las etiquetas no tienen contenido. El contenido para esos widgets se aplica más tarde. Si ejecuta la aplicación en este punto, tendrá lista la IU, pero los widgets no estarán conectados con nada. Para esto, se necesita construir primero la biblioteca de búsqueda de tiempo local, y obtener la información que se necesita de manera asíncrona. Cuando la biblioteca local esté lista, se podrá conectar a los widgets necesarios.

note: (itstool) path: section/title
en: Requesting the weather information asynchronously
es_ES: Solicitar la información meteorológica de manera asíncrona

note: (itstool) path: section/p
en: This function is dedicated for calling for the weather information and updating labels and icons accordingly. In the beginning of the function we get the user input for the search. So here for the first time we use our own library and assign it to variable GeoNames. While assigning WeatherService we give it the station. The firs thing we do with GeoNames is to request weather. Everything after GeoNames.getWeather(function(error, weather) happens only if we either get an error message or weather information. If either doesn't come, the rest of the program works as normal, so main_Quit works.
es_ES: Esta función se dedica a llamar a la información meteorológica y a actualizar las etiquetas y los iconos correctamente. Al principio de la función, se obtiene la entrada del usuario para la búsqueda. Por lo tanto, la primera vez se usa la biblioteca propia y se asigna a la variable GeoNames. Al asignar WeatherService se da la estación. Lo primero que se hace con GeoNames es solicitar el tiempo. Todo lo que sucede después de GeoNames.getWeather(function(error, weather) ocurre sólo si se obtiene un mensaje de error o información del tiempo incorrecta. Si no pasa nada de esto, el resto del programa funciona de manera normal, por lo que «main_Quit» funciona.

note: (itstool) path: section/title
en: Connecting signals to button and entry.
es_ES: Conectar señales a un botón y a una entrada

note: (itstool) path: section/p
en: And finally we have the connections that make the whole application run as it should. We connect both the entry and the button to do the same thing, getting the weather. So it doesn't matter weather you press enter of click the search button.
es_ES: Finalmente se tienen las conexiones que hacen que la aplicación completa funcione como debería. Se han conectado la entrada y el botón para que hagan la misma cosa, obtener el tiempo. Por lo tanto, no importa si pulsa el botón o si pulsa «Intro».

note: (itstool) path: section/p
en: Weatherapp.js file looks like this:
es_ES: El archivo Weatherapp.js se parece a esto:

note: (itstool) path: section/p
en: Running until you have all the autotools files ready. :
es_ES: Ejecútela hasta que tenga listos todos los archivos de autotools:

note: (itstool) path: section/p
en: Use this command on terminal while developing your modules. When calling your program in this manner it knows where to find your custom JSlibraries, in this case geonames.js.
es_ES: Use este comando en la terminal cuando desarrolle sus módulos. Al llamar a su programa de este modo, sabe dónde encontrar las bibliotecas de JavaScript personalizadas, (geonames.js en este caso).

note: (itstool) path: page/title
en: Autotools and Icons
es_ES: Autotools e iconos

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the autotools and custom icons needed for weather application to be a seamless part of your desktop. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
es_ES: En esta parte de la guía se construirán las «autotools» y los iconos necesarios para la aplicación del clima para que sea una parte integral de su escritorio. Para escribir y ejecutar todos los ejemplos de código necesita un editor de texto en el que escribir el código, una terminal y GNOME 3 o superior instalado en su equipo. En esta guía se verán las siguientes partes:

note: (itstool) path: item/p
en: <link xref="#icons">Custom icons for your application</link>
es_ES: <link xref="#icons">Iconos personalizados para su aplicación</link>

note: (itstool) path: section/title
en: Autotools and necessary files
es_ES: Autotools y archivos necesarios

note: (itstool) path: section/p
en: Having more than one file in your folder makes using autotools a bit tricky. You need the .desktop file, autogen.sh, Makefile.am, configure.ac and as a new file: myapp.sh.in file. Hacking the autotools file is a complicated field. More information can be found in many different sources, <link href="http://en.wikipedia.org/wiki/GNU_build_system">the Wikipedia article</link> provides a good overview on the subject.
es_ES: Tener más de un archivo en la carpeta complica un poco el uso de autotools. Necesita los archivos .desktop, autogen.sh, Makefile.am, configure.ac y un archivo nuevo: myapp.sh.in. Hackear el archivo de autotools es complicado. Puede encontrar más información en diferentes fuentes; <link href="http://en.wikipedia.org/wiki/GNU_build_system">este artículo de la wikipedia</link> proporciona una visión general de este tema.

note: (itstool) path: section/p
en: The thing to notice in this file is that the Exec line will make this .desktop file work only after running all the other makefiles. Weatherapp.sh is a small shell script created with the weatherapp.sh.in.
es_ES: Lo importante de este archivo es que la línea Exec hará que el archivo .desktop funcione sólo después de ejecutar el resto de makefiles. Weatherapp.sh es un pequeño script creado a partir de weatherapp.sh.in.

note: (itstool) path: section/p
en: This file is a template to the file Makefile will do to be run from .desktop.
es_ES: Este archivo es una plantilla que el Makefile creará para ejecutarlo desde el .desktop.

note: (itstool) path: section/p
en: This needs a bit more explaining. Compared to the HelloWorld Makefile.am this has changed quite a bit. Lets go through all the new blocks:
es_ES: Esto necesita más explicación. Comparado con el Makefile.am de HelloWorld, esto ha cambiado un poco. Eche un vistazo a los bloques nuevos.

note: (itstool) path: section/p
en: bin_scripts are the files that are needed to run your application. In thin case they are the first two files are the program itself and the third is the script that launches the application.
es_ES: bin_scripts son los archivos necesarios para ejecutar la aplicación. En este caso, los dos primeros archivos son el programa en sí y el tercero es el script que lanza la aplicación.

note: (itstool) path: section/p
en: EXTRA_DIST are the files that are to be distributed
es_ES: EXTRA_DIST son los archivos que se deben distribuir

note: (itstool) path: section/p
en: do_subst block is bits and pieces that need to be where they are
es_ES: El bloque do_subst son partes que deben estar donde están

note: (itstool) path: section/p
en: after the comment #icons in the application there are all the icons that are used by the program. For them to be useful you need to install the icons in correct places and that is done by the install-icons: bit
es_ES: después del comentario «#icons» en la aplicación, están todos los iconos usados por el programa. Para que sean útiles, debe instalar los iconos en los lugares correctos, y esto se hace con el bit «install-icons:»

note: (itstool) path: section/title
en: Custom icons for your application
es_ES: Iconos personalizados para su aplicación

note: (itstool) path: section/p
en: When thinking about custom icons a good rule of thumb is: do you expect to see that icon used elsewhere or is it private to your app? If the first (e.g. the icons in the desktop file that are shown by the shell) then you need /usr/share/hicolor, otherwise (e.g. the weather icons of your app) /usr/share/$application/bla/bla
es_ES: Cuando piense en iconos personalizados, una buena regla es: ¿espera ver un este icono en cualquier parte o es privado para su aplicación? En el primer caso (ej. iconos en el archivo .desktop que se muestran en GNOME Shell) necesita /usr/share/hicolor; si no, (ej. iconos del tiempo en su aplicación), necesita /usr/share/$application/bla/bla.

note: (itstool) path: section/p
en: Using autotools you have to make some changes to your .desktop and Makefile.am files. In the desktop file you change the Icon's name Icon=weather-icon. In the Makefile.am file you add these two lines to the end of your application #the application icon
es_ES: Usando autotools debe hacer algunos cambios en sus archivos .desktop y Makefile.am. En el archivo .desktop, debe cambiar el nombre del icono a Icon=weather-icon. En el Makefile.am, debe añadir estas líneas al final del archivo

note: (itstool) path: section/p
en: appicondir=$(datadir)/icons/hicolor/scalable/apps
es_ES: #the application icon
    appicondir=$(datadir)/icons/hicolor/scalable/apps

note: (itstool) path: page/title
en: Local library geoNames
es_ES: Biblioteca local geoNames

note: (itstool) path: synopsis/p
en: In this part of the guide we'll construct the local library geoNames using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we'll go through the following parts:
es_ES: En esta parte de la guía se construirá la biblioteca local geoNames usando llamadas asíncronas. En este ejemplo, la información del clima se obtiene de geonames.org y la aplicación usa los <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">códigos ICAO</link> para responder a las peticiones. Para escribir y ejecutar todos los ejemplos de código necesita un editor de texto en el que escribir el código, una terminal y GNOME 3 o superior instalado en su equipo. En esta guía se verán las siguientes partes:

note: (itstool) path: item/p
en: <link xref="#geonamesimports">Local library for getting the weather</link>
es_ES: <link xref="#geonamesimports">Biblioteca local para obtener el clima</link>

note: (itstool) path: item/p
en: <link xref="#geonamesfunction">Creating function geoNames</link>
es_ES: <link xref="#geonamesfunction">Crear la función «geoNames»</link>

note: (itstool) path: item/p
en: <link xref="#geonamesmethods">Methods for geoNames</link>
es_ES: <link xref="#geonamesmethods">Métodos para «geoNames»</link>

note: (itstool) path: section/title
en: Local library for getting the weather
es_ES: Biblioteca local para obtener el clima

note: (itstool) path: section/p
en: For this we need a new file that will be our local library.
es_ES: Para esto se necesita un archivo nueva que será nuestra biblioteca local.

note: (itstool) path: section/p
en: In the first lines we'll import and initialize the libraries we need to use in this local library. Soup handles all the requests we have to make with http.
es_ES: En las primeras líneas se importan y se inicializan las bibliotecas que necesitamos usar en esta biblioteca local. Soup maneja todas las peticiones que se hagan con http.

note: (itstool) path: section/title
en: Creating function GeoNames
es_ES: Crear la función geoNames

note: (itstool) path: section/p
en: Here we create the function GeoNames that will handle getting weather for us. JavaScript allows us to create functions that have little inside at first and later expand them. This will be done inside the GeoNames.prototype curly braces{}
es_ES: Aquí se crea la función GeoNames, que manejará la obtención del clima. JavaScript permite crear funciones sencillas al principio para ampliarlas más tarde. Esto se hará dentro de las llaves de GeoNames.prototype.

note: (itstool) path: section/title
en: Methods for GeoNames
es_ES: Métodos para geoNames

note: (itstool) path: section/p
en: The first method for GeoNames is getWeather and the second getIcon. In getWeather we make a http request with soup, handle errors and then parse the information from the request to form we can use it. In getIcon we simply compare the results we got from getWeather to the switch we have in order to get the icon matching current weather. Now that we have our local library ready, it's time to make use of it.
es_ES: El primer método de GeoNames es getWeather, y el segundo es getIcon. En getWeather se realiza una solicitud http con soup, se gestionan los errores y se analiza la información de la solicitud para saber que se puede usar. En getIcon simplemente se comparan los resultados obtenidos en getWeather con el selector para obtener el icono que representa el clima actual. Ahora que la biblioteca local está lista, es el momento de usarla.

note: (itstool) path: section/p
en: Here is the entire code for our local library. The main program file calls this asynchronously.
es_ES: Aquí está el código completo de la biblioteca. El archivo de programa principal la llama de manera asíncrona.

note: (itstool) path: info/desc
en: A widget that uses the Cairo library to draw
es_ES: Un widget que usa la biblioteca Cairo para dibujar

note: (itstool) path: page/p
en: Enter an angle, visualize it.
es_ES: Introduzca un ángulo, visualícelo.

note: (itstool) path: item/p
en: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">The Cairo Tutorial for Python Programmers</link>
es_ES: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">El tutorial de Cairo para programadores en Python</link>

[ctx: text]
note: (itstool) path: info/title
en: Window (C)
es_ES: Ventana (C)

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets
es_ES: Una ventana de nivel superior que puede contener otros widgets

note: (itstool) path: page/title
en: Window
es_ES: Ventana

note: (itstool) path: page/p
en: A minimal GtkApplication. Use <link xref="GtkApplicationWindow.c">Application Window</link> if you need GMenu support.
es_ES: Una GtkAplication mínima. Use una <link href="GtkApplicationWindow.c">ventana de aplicación</link> si necesita soporte para GMenu.

[ctx: text]
note: (itstool) path: info/title
en: Window (JavaScript)
es_ES: Ventana (JavaScript)

note: (itstool) path: info/desc
en: A basic window which can contain other widgets
es_ES: Una ventana básica que puede contener otros widgets.

note: (itstool) path: td/p
en: A minimal GtkApplication
es_ES: Una GtkApplication mínima

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.js">ApplicationWindow</link> if you need GMenu support.
es_ES: Use una <link href="GtkApplicationWindow.js">ventana de aplicación</link> si necesita soporte para GMenu.

note: (itstool) path: page/p
en: In this example we used the following:
es_ES: En este ejemplo se usa lo siguiente:

[ctx: text]
note: (itstool) path: info/title
en: Window (Python)
es_ES: Ventana (Python)

note: (itstool) path: td/p
en: A minimal GTK+ Application: a window with a title.
es_ES: Una aplicación mínima en GTK+: una ventana con un título.

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.py"/> if you need <link xref="gmenu.py"/> support.
es_ES: Use una <link xref="GtkApplicationWindow.py"/> si necesita soporte de <link xref="gmenu.py"/>.

note: (itstool) path: section/title
en: Useful methods for a Window widget
es_ES: Métodos útiles para un widget «Window»

[ctx: text]
note: (itstool) path: info/title
en: Window (Vala)
es_ES: Ventana (Vala)

note: (itstool) path: td/p
en: The simplest Gtk.Application
es_ES: La Gtk.Application más sencilla

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.vala">Application Window</link> if you need GMenu support.
es_ES: Use una <link href="GtkApplicationWindow.vala">ventana de aplicación</link> si necesita soporte para GMenu.

note: (itstool) path: item/p
en: The widget <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>
es_ES: El widget <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>

note: (itstool) path: item/p
en: The enum <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>
es_ES: El enumerado <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>

note: (itstool) path: item/p
en: The method <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>
es_ES: El método <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>

note: (itstool) path: info/desc
en: Tutorial for writing a custom <code>GSource</code> implementation
es_ES: Tutorial para escribir una implementación de <code>GSource</code> personalizada

note: (itstool) path: page/title
en: Custom GSources
es_ES: GSources personalizadas

note: (itstool) path: synopsis/title
en: Summary
es_ES: Resumen

note: (itstool) path: synopsis/p
en: This article is a tutorial on creating a custom <code>GSource</code>. For the reference documentation, see the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">GLib API reference</link>.
es_ES: Este artículo es un tutorial para escribir una <code>GSource</code> personalizada. Para ver la documentación de referencia, consulte la <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"> referencia de la API de GLib</link>.

note: (itstool) path: section/title
en: What is <code>GSource</code>?
es_ES: ¿qué es <code>GSource</code>?

note: (itstool) path: section/p
en: A <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"><code>GSource</code></link> is an expected event with an associated callback function which will be invoked when that event is received. An event could be a timeout or data being received on a socket, for example.
es_ES: Una <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"><code>GSource</code></link> es un evento esperado con una función de retorno de llamada asociada que se invocará cuando se reciba un evento. Un evento puede ser una expiración de tiempo o datos que se reciben en un socket, por ejemplo.

note: (itstool) path: section/p
en: GLib contains various types of <code>GSource</code>, but also allows applications to define their own, allowing custom events to be integrated into the main loop.
es_ES: GLib contiene varios tipos de <code>GSource</code>, pero también permite que las aplicaciones definan las suyas propias, permitiendo integrar eventos personalizados en el bucle principal.

note: (itstool) path: section/p
en: The structure of a <code>GSource</code> and its virtual functions are documented in detail in the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSourceFuncs">GLib API reference</link>.
es_ES: La estructura de una <code>GSource</code> y sus funciones virtuales están documentadas detalladamente en la <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSourceFuncs">referencia de la API GLib</link>.

note: (itstool) path: section/title
en: A Message Queue Source
es_ES: Una fuente de cola de mensajes

note: (itstool) path: section/p
en: As a running example, a message queue source will be used which dispatches its callback whenever a message is enqueued to a queue internal to the source (potentially from another thread).
es_ES: Como ejemplo de ejecución, se usará una cola de fuentes de mensajes que ejecuta su función de retorno de llamada cuando se mete en la cola un mensaje en la cola interna de la fuente (potencialmente de otro hilo).

note: (itstool) path: section/p
en: This type of source is useful for efficiently transferring large numbers of messages between main contexts. The alternative is transferring each message as a separate idle <code>GSource</code> using <code>g_source_attach()</code>. For large numbers of messages, this means a lot of allocations and frees of <code>GSource</code>s.
es_ES: Este tipo de fuente es útil para transferir de manera eficiente un gran número de mensajes entre contextos principales. LA alternativa es transferir cada mensaje en una <code>GSource</code> libre separada, usando <code>g_source_attach()</code>. Para un gran número de mensajes esto implica reservar y liberar muchas <code>GSource</code>.

note: (itstool) path: section/title
en: Structure
es_ES: Estructura

note: (itstool) path: section/p
en: Firstly, a structure for the source needs to be declared. This must contain a <code>GSource</code> as its parent, followed by the private fields for the source: the queue and a function to call to free each message once finished with.
es_ES: Primero se debe declarar una estructura para la fuente. Esta debe contener una <code>GSource</code> como su padre, seguida de los campos privados para la fuente: la cola y una función para llamar a cada mensaje libre cuando termine con él.

note: (itstool) path: section/title
en: Prepare Function
es_ES: Función de preparación

note: (itstool) path: section/p
en: Next, the prepare function for the source must be defined. This determines whether the source is ready to be dispatched. As this source is using an in-memory queue, this can be determined by checking the queue’s length: if there are elements in the queue, the source can be dispatched to handle them.
es_ES: Lo siguiente es definir la función de preparación para la fuente. Esto determina si la fuente está lista para servirse. Dado que esta fuente usa una cola en memoria, se puede determinar comprobando la longitud de la cola: si hay elementos en la cola, se puede usar la fuente para gestionarlos.

note: (itstool) path: section/title
en: Check Function
es_ES: Función de comprobación

note: (itstool) path: section/p
en: As this source has no file descriptors, the prepare and check functions essentially have the same job, so a check function is not needed. Setting the field to <code>NULL</code> in <code>GSourceFuncs</code> bypasses the check function for this source type.
es_ES: Como esta fuente no tiene descriptores de archivos, las funciones de preparación y comprobación tienen esencialmente el mismo trabajo, por lo que no se necesita la función de comprobación. Establecer el campo a <code>NULL</code> en <code>GSourceFuncs</code> evita la función de comprobación para este tipo de fuente.

note: (itstool) path: section/title
en: Dispatch Function
es_ES: Función de gestión

note: (itstool) path: section/p
en: For this source, the dispatch function is where the complexity lies. It needs to dequeue a message from the queue, then pass that message to the <code>GSource</code>’s callback function. No messages may be queued: even through the prepare function returned true, another source wrapping the same queue may have been dispatched in the mean time and taken the final message from the queue. Further, if no callback has been set for the <code>GSource</code> (which is allowed), the message must be destroyed and silently dropped.
es_ES: Para esta fuente, es en la función de gestión donde reside la complejidad. Debe sacar de la cola un mensaje y pasarlo a la función de retorno de llamada de la <code>GSource</code>. No se deben quedar mensajes en la cola: aunque la función devuelva verdadero, otra fuente que abstraiga la misma cola se puede haber gestionado en este tiempo y haber tomado el mensaje final de la cola. Además, si no se ha establecido una función de retorno de llamada para la <code>GSource</code> (algo que está permitido), el mensaje puede destruirse y descartarse silenciosamente.

note: (itstool) path: section/p
en: If both a message and callback are set, the callback can be invoked on the message and its return value propagated as the return value of the dispatch function. This is <code>FALSE</code> to destroy the <code>GSource</code> and <code>TRUE</code> to keep it alive, just as for <code>GSourceFunc</code> — these semantics are the same for all dispatch function implementations.
es_ES: Si se han definido el mensaje y la función de retorno de llamada, se puede llamar a esta última sobre el mensaje y devolverá el valor propagado como valor de retorno de la función de gestión. Este es <code>FALSE</code> para destruir la <code>GSource</code> y <code>TRUE</code> para mantenerla, igual que para <code>GSourceFunc</code>: estas consideraciones semánticas son las mismas para todas las implementaciones de las funciones de gestión.

note: (itstool) path: section/title
en: Callback Functions
es_ES: Funciones de retorno de llamada

note: (itstool) path: section/p
en: The callback from a <code>GSource</code> does not have to have type <code>GSourceFunc</code>. It can be whatever function type is called in the source’s dispatch function, as long as that type is sufficiently documented.
es_ES: La función de retorno de llamada de una <code>GSource</code> no tiene que tener un tipo <code>GSourceFunc</code>. Puede ser una función de cualquier tipo a la que se llame en la función de gestión de la fuente, ya que este tipo está suficientemente documentado.

note: (itstool) path: section/p
en: Normally, <code>g_source_set_callback()</code> is used to set the callback function for a source instance. With its <code>GDestroyNotify</code>, a strong reference can be held to keep an object alive while the source is still alive:
es_ES: Normalmente se usa <code>g_source_set_callback()</code> para configurar la función de retorno de llamada para una instancia de una fuente. Cuando es <code>GDestroyNotify</code> se hace una referencia fuerte para mantener vivo un objeto mientras la fuente sigue viva:

note: (itstool) path: section/p
en: However, <code>GSource</code> has a layer of indirection for retrieving this callback, exposed as <code>g_source_set_callback_indirect()</code>. This allows GObject to set a <code>GClosure</code> as the callback for a source, which allows for sources which are automatically destroyed when an object is finalized — a <em>weak</em> reference, in contrast to the <em>strong</em> reference above:
es_ES: Sin embargo, <code>GSource</code> tiene una capa de indirección para obtener esta función de retorno de llamada, disponible mediante <code>g_source_set_callback_indirect()</code>. Esto permite a GObject establecer una <code>GClosure</code> como función de retorno de llamada de una fuente, lo que permite que las fuentes se destruyan automáticamente cuando un objeto termina: una referencia <em>débil</em>, en contraste con la referencia <em>fuerte</em> mencionada anteriormente:

note: (itstool) path: section/p
en: It also allows for a generic, closure-based ‘dummy’ callback, which can be used when a source needs to exist but no action needs to be performed in its callback:
es_ES: También permite una función de retorno de llamada «tonta» basada en el cierre, que se puede usar cuando una fuente debe existir pero no se necesita realizar ninguna acción en su retorno:

note: (itstool) path: section/p
en: Finally, the <code>GSourceFuncs</code> definition of the <code>GSource</code> can be written, alongside a construction function. It is typical practice to expose new source types simply as <code>GSource</code>s, not as the subtype structure; so the constructor returns a <code>GSource*</code>.
es_ES: Finalmente se puede escribir la definición de las <code>GSourceFuncs</code> de la <code>GSource</code> junto con la función de construcción de las <code>GSource</code>. Normalmente es práctico exponer los nuevos tipos de fuentes como <code>GSource</code> y no como el subtipo de la estructura; de este modo, el constructor devuelve un <code>GSource*</code>.

note: (itstool) path: section/p
en: The example constructor here also demonstrates use of a child source to support cancellation conveniently. If the <code>GCancellable</code> is cancelled, the application’s callback will be dispatched and can check for cancellation. (The application code will need to make a pointer to the <code>GCancellable</code> available to its callback, as a field of the callback’s user data set in <code>g_source_set_callback()</code>).
es_ES: Aquí el constructor de ejemplo también muestra el uso de una fuente hija para soportar la cancelación adecuadamente. Si se cancela la <code>GCancellable</code> se gestiona el retorno de la aplicación y se puede comprobar la cancelación. (El código de la aplicación deberá crear un puntero a la <code>GCancellable</code> disponible para la función de retorno, como un campo de los datos de usuario de la función de retorno configurada en <code>g_source_set_callback()</code>).

note: (itstool) path: section/title
en: Complete Example
es_ES: Ejemplo completo

note: (itstool) path: listing/title
en: Complete Example Code
es_ES: Código de ejemplo completo

note: (itstool) path: section/title
en: Further Examples
es_ES: Ejemplos adicionales

note: (itstool) path: section/p
en: Sources can be more complex than the example given above. In <link href="http://nice.freedesktop.org/">libnice</link>, a custom <code>GSource</code> is needed to poll a set of sockets which changes dynamically. The implementation is given as <code>ComponentSource</code> in <link href="http://cgit.freedesktop.org/libnice/libnice/tree/agent/component.c#n941">component.c</link> and demonstrates a more complex use of the prepare function.
es_ES: Las fuentes pueden ser más complejas que las dadas en el ejemplo anterior. En <link href="http://nice.freedesktop.org/">libnice</link>, se necesita una <code>GSource</code> personalizada para sondear un conjunto de sockets que cambia dinámicamente. La implementación se da como <code>ComponentSource</code> en <link href="http://cgit.freedesktop.org/libnice/libnice/tree/agent/component.c#n941">component.c</link> y muestra un uso más complejo de la función de preparación.

note: (itstool) path: section/p
en: Another example is a custom source to interface GnuTLS with GLib in its <code>GTlsConnection</code> implementation. <link href="https://gitlab.gnome.org/GNOME/glib-networking/blob/master/tls/gnutls/gtlsconnection-gnutls.c#L1154"><code>GTlsConnectionGnutlsSource</code></link> synchronizes the main thread and a TLS worker thread which performs the blocking TLS operations.
es_ES: Otro ejemplo es una fuente personalizada para que sirva de interfaz de GnuTLS con GLib en su implementación de <code>GTlsConnection</code>. <link href="https://gitlab.gnome.org/GNOME/glib-networking/blob/master/tls/gnutls/gtlsconnection-gnutls.c#L1154"><code>GTlsConnectionGnutlsSource</code></link> sincroniza el hilo principal y un hilo trabajador TLS que realiza las operaciones de bloqueo de TLS.
