gnome-devel-docs master - en to pt_BR translation catalogue (236 entries)

note: (itstool) path: info/desc
en: Learn how to lay out UI components, like Images and Labels.
pt_BR: Aprenda como posicionar componentes de interface de usuário, como Images e Labels.

note: (itstool) path: page/title
en: 2. Welcome to the Grid
pt_BR: 2. Bem-vindo à Grid

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.
pt_BR: Este tutorial vai mostrar a você como criar widgets básicos ou partes da interface de usuário do GNOME, como Images (imagens) e Labels (rótulos). Você, então, aprenderá como organizá-las em uma Grid (grade), que permite que você coloca widgets exatamente onde você os quer.

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.
pt_BR: Você já viu <link xref="hellognome.js">o primeiro tutorial desta série</link>? Você vai querer vê-lo antes de continuar.

note: (itstool) path: section/title
en: Going native
pt_BR: Se tornando 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.
pt_BR: No último tutorial, nós criamos o que era basicamente um quadro de janela do GNOME para um aplicativo web. Todo o código específico do GNOME que nós precisamos aprender se resolver colocando o WebView -- o widget contendo nosso aplicativo -- em um ApplicationWindow, e falando para ele exibir. O aplicativo em si foi escrito em HTML e JavaScript, assim como a maioria das páginas na 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+.
pt_BR: Agora, nós vamos usar apenas widgets nativos do GNOME. Um widget é apenas uma coisa, como uma caixa de seleção ou imagem, e o GNOME tem uma ampla variedade delas para se escolher. Nós chamamos elas de widgets “nativas” para diferenciá-las de coisas como o botão e cabeçalho nos aplicativos web que nós escrevemos. Porque em vez de usarmos código web, essas vão ser 100 porcento GNOME, usando o 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.
pt_BR: GTK+ significa “GIMP Toolkit” (kit de ferramentas do GIMP). É como uma caixa de ferramentas de widgets que você pode acessar, enquanto construindo seus aplicativos. Ele foi escrito originalmente para <link href="http://www.gimp.org/">o GIMP</link>, que é um software livre de edição de imagens.

note: (itstool) path: section/title
en: Setting up our application
pt_BR: Configurando seu aplicativo

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.
pt_BR: Antes de nos aprofundarmos na caixa de ferramentas do GTK+, nós primeiro precisamos escrever o código básico padrão que nosso aplicativo requer.

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.
pt_BR: Essa parte sempre vai no começo do seu código. Dependendo do que você vai fazer com ele, você pode querer declarar muitas importações aqui. O que nós estamos escrevendo hoje é bem básico, de forma que isso é tudo que precisamos; o Gtk para os widgets, usando a API '3.0' estável.

note: (itstool) path: section/p
en: Speaking of which:
pt_BR: Falando nisso:

note: (itstool) path: section/code
en: 
    class WelcomeToTheGrid {
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI ();
        }
pt_BR: 
    class WelcomeToTheGrid {
        // Cria o aplicativo em si
        constructor() {
            this.application = new Gtk.Application();
    
            // Conecta os sinais "activate" e "startup" às funções de chamada
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Função de chamada para o sinal "activate" apresenta janelas quando ativa
        _onActivate() {
            this._window.present();
        }
    
        // Função de chamada para o sinal "startup" constrói a interface gráfica
        _onStartup() {
            this._buildUI ();
        }

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.
pt_BR: Esse é o começo de um aplicativo em si e a função _init que cria-o. Ela fala para _buildUI criar um ApplicationWindow, com o qual nós vamos chamar _window, e fala para nossa janela para se apresentar quando for necessário.

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.
pt_BR: Essa parte, de novo, é basicamente um copia-e-cola, mas você sempre deseja dar seu aplicativo um nome único.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 10,
                title: "Welcome to the Grid"});
pt_BR: 
        // Constrói a interface gráfica do aplicativo
        _buildUI() {
    
            // Cria a janela do aplicativo
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 10,
                title: "Bem-vindo à Grid"});

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.
pt_BR: Finalmente, nós começamos a função _buildUI criando uma nova ApplicationWindow. Nós especificamos que ela vai com este aplicativo, que ela deveria aparecer no centro da tela, e que deve haver pelo menos 10 pixels entre a borda exterior e quaisquer widgets dentro dela. Nós também damos a ela um título, que vai aparecer no topo da janela.

note: (itstool) path: section/title
en: Reaching into the GTK+ toolbox
pt_BR: Alcançando a caixa de ferramentas do 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:
pt_BR: Quais widgets nós deveríamos usar? Bem, digamos que nós queremos escrever um aplicativo que se parece com este:

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:
pt_BR: Nós vamos precisar, no mínimo, de uma imagem e um rótulo de texto para seguir. Vamos começar com a imagem:

note: (itstool) path: section/code
en: 
            // Create an image
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
pt_BR: 
            // Cria uma imagem
            this._image = new Gtk.Image ({ file: "gnome-image.png" });

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.
pt_BR: Você pode baixar o arquivo de imagem neste exemplo <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">arquivo</link>. Certifique-se de colocá-lo no mesmo diretório do código que você está escrevendo.

note: (itstool) path: section/code
en: 
            // Create a label
            this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!" });
pt_BR: 
            // Cria um rótulo
            this._label = new Gtk.Label ({ label: "Bem-vindo ao GNOME, também!" });

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.
pt_BR: Aquele código adiciona o rótulo abaixo. Você pode ver como nós criamos widgets aqui; cada um é uma parte do GTK e nós podemos dar a ele propriedades que personalizam como ele se comporta. neste caso, nós definimos a propriedade do arquivo de imagem para ser o nome do arquivo da imagem que queremos e adicionamos a propriedade de rótulo do Label para ser a sentença que desejamos embaixo da imagem.

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.
pt_BR: Sim, isso soa redundante um Label ter uma propriedade de rótulo, mas não é. Outros widgets que contêm texto possuem uma propriedade de rótulo, de forma que é <em>consistente</em> para o widget de Label ter um também.

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.
pt_BR: Nós não podemos simplesmente adicionar estes widgets a nossa janela em ordem, porém, da mesma forma que elementos HTML aparecem na ordem que você escreve-os. Isso porque em ApplicationWindow pode conter apenas um 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.
pt_BR: Como nós resolvemos isso? Marcando aquele widget como um widget contêiner, que pode manter mais de um widget e organizá-los dentro dele. Conheça: a Grid.

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ();
pt_BR: 
            // Cria a Grid
            this._grid = new Gtk.Grid ();

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.
pt_BR: Nós não estamos desistindo de nenhuma propriedade ainda. Aquelas virão posteriormente, na medida em que aprendemos como usar os poderes da Grid. Primeiro, vamos anexar a Image e Label que nós fizemos para nossa Grid.

note: (itstool) path: section/code
en: 
            // Attach the image and label to the grid
            this._grid.attach (this._image, 0, 0, 1, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
pt_BR: 
            // Anexa a imagem e o rótulo à grade
            this._grid.attach (this._image, 0, 0, 1, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);

note: (itstool) path: section/p
en: This code looks awfully complicated, but it's not. Here's what those numbers mean:
pt_BR: Este código parece muito complicado, mas não é. Aqui segue o que aqueles números significam:

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.
pt_BR: O <em>primeiro</em> número é qual posição esquerda-para-direita deve-se coloca as coisas, começando de 0. Qualquer widget que usa um 0 aqui vai para o mais esquerda possível.

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.
pt_BR: O <em>segundo</em> número é qual posição de cima-para-baixo deve-se colocar uma dado widget, começando de 0. O Label vai embaixo da Image, de forma que nós damos à Image um 0 e o Label um 1 aqui.

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.
pt_BR: O <em>terceiro</em> e <em>quarto</em> números são quantas colunas e linhas um widget deveria levar. Nós vamos ver como estes funcionam em um minuto.

note: (itstool) path: section/code
en: 
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
    };
    
    // Run the application
    let app = new WelcomeToTheGrid ();
    app.application.run (ARGV);
pt_BR: 
            // Adiciona a grade à janela
            this._window.add (this._grid);
    
            // Mostra a janela e todos seus widgets filhos
            this._window.show_all();
        }
    
    };
    
    // Executa o aplicativo
    let app = new WelcomeToTheGrid ();
    app.application.run (ARGV);

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.
pt_BR: Agora que nós criamos a Grid e anexamos todos os nossos widgets a ela, nós adicionamos-a à janela e falamos para a janela se mostrar, como parte da função _buildUI. Como sempre, para finalizar nós criamos uma nova instância da classe do aplicativo e falamos para ele executar.

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
pt_BR: Salva seu aplicativo como welcome_to_the_grid.js. Então, para executar seu aplicativo basta abrir um terminal, ir até o diretório onde seu aplicativo se encontra e digitar

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?
pt_BR: Pronto! Mas espera. Isso não parece correto. Por que o Label está misturado próximo à Image desta forma? Isso não ficou legal e fica mais difícil de ler. O que nós podemos fazer quanto a isso?

note: (itstool) path: section/title
en: Tweaking the Grid
pt_BR: Ajustando a Grid

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.
pt_BR: Uma coisa que nós podemos fazer é dar ao Label uma propriedade margin_top no momento de sua criação. Isso funciona mais ou menos como definir uma margem para um elemento HTML usando estilo CSS embutido.

note: (itstool) path: section/code
en: 
            // Create a label
            this._label = new Gtk.Label ({
                label: "Welcome to GNOME, too!",
                margin_top: 20 });
pt_BR: 
            // Cria um rótulo
            this._label = new Gtk.Label ({
                label: "Bem-vindo ao GNOME, também!",
                margin_top: 20 });

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:
pt_BR: É claro que, se nós fizermos isso, então se substituirmos a Label com alguma outra coisa -- ou adicionar em outro widget --, então nós teremos que repetir o margin_top nele também. Do contrário, nós acabaremos com alguma coisa como isso:

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:
pt_BR: Nós poderíamos dar à Image uma propriedade margin_bottom, mas isso não vai funcionar quando a nova Label estiver em uma coluna separada. Então, que tal nós tentarmos isso:

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ({
                row_spacing: 20 });
pt_BR: 
            // Cria a Grid
            this._grid = new Gtk.Grid ({
                row_spacing: 20 });

note: (itstool) path: section/p
en: That makes it so that there are always 20 pixels of space in between each horizontal row.
pt_BR: Isso resolve, de forma que há sempre 20 pixels de espaço entre cada linha 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!
pt_BR: Sim, você também pode definir a propriedade column_spacing em uma Grid ou as propriedades margin_left e margin_right em qualquer widget. Tente-os, se você quiser!

note: (itstool) path: section/title
en: Adding more widgets
pt_BR: Adicionando mais 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:
pt_BR: Se nós quiséssemos adicionar um segundo Label, como que nós vamos fazê-lo de forma que ela realmente pareça como pertencente dali? Uma forma é centralizar a Image na parte superior, de forma que esteja em cima de ambas Labels, em vez de apenas uma para a esquerda. É aí que aqueles outros números no método para anexar na Grid entram:

note: (itstool) path: section/code
en: 
            // Create a second label
            this._labelTwo = new Gtk.Label ({
                label: "The cake is a pie." });
    
            // Attach the image and labels to the grid
            this._grid.attach (this._image, 0, 0, 2, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
            this._grid.attach (this._labelTwo, 1, 1, 1, 1);
pt_BR: 
            // Cria um segundo rótulo
            this._labelTwo = new Gtk.Label ({
                label: "O bolo é uma torta." });
    
            // Anexa a imagem e rótulos à grade
            this._grid.attach (this._image, 0, 0, 2, 1);
            this._grid.attach (this._label, 0, 1, 1, 1);
            this._grid.attach (this._labelTwo, 1, 1, 1, 1);

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.
pt_BR: Após termos criado um segundo Label, nós o anexamos o segundo Label, o anexamos à Grid à direita do primeiro Label. Lembre-se, os primeiros dois números contam colunas e linhas da esquerda para a direita e de cima para baixo, começando com 0. Então, se o primeiro Label está na coluna 0 e linha 1, nós podemos colocar o segundo na coluna 1 e linha 1 para colocá-lo à direita do primeiro Label.

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:
pt_BR: Note que o número 2 na declaração de anexação para a Image. É o que faz o truque aqui. Aquele número é quantas colunas uma Image se estende, lembra-se? Então, quando nós colocarmos isso junto, nós obteremos algo tipo isso:

note: (itstool) path: section/p
en: There are two things you should take note of, here.
pt_BR: Há duas coisas das quais você deveria tomar nota, aqui.

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.
pt_BR: A definição da Image para se estender a duas colunas não estica a imagem em si horizontalmente. Ao invés disso, ela estica a caixa invisível utilizadas pelo widget da Image para preencher ambas colunas e, então, colocar a imagem no centro daquela caixa.

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.
pt_BR: Ainda que tenhamos definido as propriedades row_spacing da Grid e border_width da ApplicationWindow, nós ainda não definimos nada que coloque uma borda entre as duas Labels. Elas estavam separadas anteriormente, quando a Imagem estava apenas em uma coluna, mas agora que ela estende ambas, o GNOME não vê um motivo para mantê-los separados.

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:
pt_BR: Há pelo menos três formas de resolvermos o último. Primeiro, nós podemos definir um margin_left ou margin_right em um dos Labels:

note: (itstool) path: section/p
en: Second, we can set the Grid's column_homogeneous property to true.
pt_BR: Segundo, nós podemos definir a propriedade column_homogeneous da Grid para “true”.

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ({
                column_homogeneous: true,
                row_spacing: 20 });
pt_BR: 
            // Cria a Grid
            this._grid = new Gtk.Grid ({
                column_homogeneous: true,
                row_spacing: 20 });

note: (itstool) path: section/p
en: That makes it look something like this:
pt_BR: Isso faz com que ela se pareça com algo como isso:

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.
pt_BR: E terceiro, nós podemos definir a propriedade column_spacing da Grid, da mesma forma que nós definimos sua row_spacing.

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ({
                column_spacing: 20,
                row_spacing: 20 });
pt_BR: 
            // Cria a Grid
            this._grid = new Gtk.Grid ({
                column_spacing: 20,
                row_spacing: 20 });

note: (itstool) path: section/p
en: That makes it look like this:
pt_BR: Isso faz com que ela se pareça com isso:

note: (itstool) path: section/title
en: Using stock images
pt_BR: Usando imagens padrões

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:
pt_BR: O GNOME já possui um monte de imagens padrões em mãos, que nós podemos usar se não quisermos criar nossa própria ou se nós quisermos um ícone reconhecido universalmente. Aqui está como nós criamos imagens padrões, comparado com como nós criamos um normal:

note: (itstool) path: section/code
en: 
            // Create an image
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
    
            // Create a second image using a stock icon
            this._icon = new Gtk.Image ({ stock: 'gtk-about' });
pt_BR: 
            // Cria uma imagem
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
    
            // Cria uma segunda imagem usando o ícone padrão
            this._icon = new Gtk.Image ({ stock: 'gtk-about' });

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.)
pt_BR: Após isso, nós anexamos-o à Grid à esquerda do primeiro Label. (Nós não vamos usar o segundo para este exemplo.)

note: (itstool) path: section/code
en: 
            // Attach the images and label to the grid
            this._grid.attach (this._image, 0, 0, 2, 1);
            this._grid.attach (this._icon,  0, 1, 1, 1);
            this._grid.attach (this._label, 1, 1, 1, 1);
pt_BR: 
            // Anexa as imagens e rótulos à grade
            this._grid.attach (this._image, 0, 0, 2, 1);
            this._grid.attach (this._icon,  0, 1, 1, 1);
            this._grid.attach (this._label, 1, 1, 1, 1);

note: (itstool) path: section/p
en: That gives us this, when we run it:
pt_BR: Isso nos dá isso, quando nós o executamos:

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.
pt_BR: É assim que o ícone padrão “Sobre” se parece. Você pode ver uma lista de todos os itens padrões começando com o gtk-about na <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">documentação de desenvolvimento do GNOME</link>. Foi escrita para programadores de C, mas você não precisa saber C para usá-la; basta olha na parte nos sinais de citação, como “gtk-about” e copiar aquela parte para usar o ícone ao lado dele.

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.
pt_BR: Nós colocamos aspas simples em volta de 'gtk-about' aqui porque, ao contrário de strings de texto que têm aspas duplas em volta, aquela parte nunca precisará ser traduzida para outro idioma. Na verdade, se ela <em>fosse</em> traduzida, ela quebraria o ícone porque seu nome ainda é “gtk-about” independentemente do seu idioma.

note: (itstool) path: section/title
en: What's next?
pt_BR: O que vem em seguida?

note: (itstool) path: section/p
en: Before we go on to the next tutorial, let's try something a little different:
pt_BR: Antes de irmos para o próximo tutorial, vamos tentar algo um pouco diferente:

note: (itstool) path: section/code
en: 
            // Create a button
            this._button = new Gtk.Button ({
                label: "Welcome to GNOME, too!"});
    
            // Attach the images and button to the grid
            this._grid.attach (this._image,  0, 0, 2, 1);
            this._grid.attach (this._icon,   0, 1, 1, 1);
            this._grid.attach (this._button, 1, 1, 1, 1);
pt_BR: 
            // Cria um botão
            this._button = new Gtk.Button ({
                label: "Bem-vindo ao GNOME, também!"});
    
            // Anexa as imagens e botão à grade
            this._grid.attach (this._image,  0, 0, 2, 1);
            this._grid.attach (this._icon,   0, 1, 1, 1);
            this._grid.attach (this._button, 1, 1, 1, 1);

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>.
pt_BR: É isso mesmo, nós tornamos o Label em um Button apenas alterando o seu nome! Se você executar o aplicativo e clicar nele, porém, você descobrirá que ele faz nada. Como nós vamos fazer nosso Button fazer algo? É o que vamos descobrir, em <link xref="03_getting_the_signal.js">nosso 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.
pt_BR: Se você quiser, sinta-se à vontade para gastar algum tempo experimentando Grids, Labels e Images, incluindo imagens padrões.

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.
pt_BR: Um truque que você pode usar para fazer layouts mais complexos é aninhar Grids dentro de Grids. Isso permite que você agrupe widgets relacionados e rearranje-os facilmente. Dê uma olhada na amostra de código do <link xref="radiobutton.js">RadioButton</link>, se você quiser ver como ele é feito.

note: (itstool) path: section/title
en: Complete code sample
pt_BR: Amostra de código completo

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class WelcomeToTheGrid {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application();
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI ();
        }
    
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 10,
                title: "Welcome to the Grid"});
    
            // Create the Grid
            this._grid = new Gtk.Grid ({
                // column_homogeneous: true,
                // column_spacing: 20,
                row_spacing: 20 });
    
            // Create an image
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
    
            // Create a second image using a stock icon
            this._icon = new Gtk.Image ({ stock: 'gtk-about' });
    
            // Create a label
            this._label = new Gtk.Label ({
                label: "Welcome to GNOME, too!",
                /* margin_top: 20 */ });
    
            /* Create a second label
            this._labelTwo = new Gtk.Label ({
                label: "The cake is a pie." }); */
    
            /* Create a button
            this._button = new Gtk.Button ({
                label: "Welcome to GNOME, too!"}); */
    
            // Attach the images and button to the grid
            this._grid.attach (this._image,  0, 0, 2, 1);
            this._grid.attach (this._icon,   0, 1, 1, 1);
            this._grid.attach (this._label,  1, 1, 1, 1);
    
            // this._grid.attach (this._label, 0, 1, 1, 1);
            // this._grid.attach (this._labelTwo, 1, 1, 1, 1);
    
            // this._grid.attach (this._button, 1, 1, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
    };
    
    // Run the application
    let app = new WelcomeToTheGrid ();
    app.application.run (ARGV);
pt_BR: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class WelcomeToTheGrid {
    
        // Cria o aplicativo em si
        constructor() {
            this.application = new Gtk.Application();
    
        // Conecta os sinais 'activate' e 'startup' às funções de chamada
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Função de chamada para o sinal 'activate' apresenta janelas quando ativo
        _onActivate() {
            this._window.present();
        }
    
        // Função de chamada para o sinal 'startup' constrói a interface de usuário
        _onStartup() {
            this._buildUI ();
        }
    
        // Constrói a interface de usuário do aplicativo
        _buildUI() {
    
            // Cria a janela do aplicativo
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 10,
                title: "Bem-vindo à Grid"});
    
            // Cria a Grid
            this._grid = new Gtk.Grid ({
                // column_homogeneous: true,
                // column_spacing: 20,
                row_spacing: 20 });
    
            // Cria uma imagem
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
    
            // Cria uma segunda imagem usando um ícone padrão
            this._icon = new Gtk.Image ({ stock: 'gtk-about' });
    
            // Cria um rótulo
            this._label = new Gtk.Label ({
                label: "Welcome to GNOME, too!",
                /* margin_top: 20 */ });
    
            /* Cria um segundo rótulo
            this._labelTwo = new Gtk.Label ({
                label: "The cake is a pie." }); */
    
            /* Cria um botão
            this._button = new Gtk.Button ({
                label: "Welcome to GNOME, too!"}); */
    
            // Anexa as imagens e botão à grade
            this._grid.attach (this._image,  0, 0, 2, 1);
            this._grid.attach (this._icon,   0, 1, 1, 1);
            this._grid.attach (this._label,  1, 1, 1, 1);
    
            // this._grid.attach (this._label, 0, 1, 1, 1);
            // this._grid.attach (this._labelTwo, 1, 1, 1, 1);
    
            // this._grid.attach (this._button, 1, 1, 1, 1);
    
            // Adiciona a grade à janela
            this._window.add (this._grid);
    
            // Mostra a janela e todos os widgets filhos
            this._window.show_all();
        }
    
    };
    
    // Executa o aplicativo
    let app = new WelcomeToTheGrid ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: Create Buttons and other widgets that do things when you click on them.
pt_BR: Crie Buttons e outros widgets que fazem coisas quando clicados.

note: (itstool) path: page/title
en: 3. Getting the Signal
pt_BR: 3. Obtendo o Signal

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.
pt_BR: No último tutorial, nós aprendemos como criar widgets tipo Labels (rótulos), Images (imagens) e Buttons (botões). Aqui, nós vamos aprender como fazer para Buttons e outros widgets de entrada realmente fazer as coisas, escrevendo funções que lidam com os sinais que elas enviam quando elas são clicadas ou recebem interação.

note: (itstool) path: section/title
en: A basic application
pt_BR: Um aplicativo básico

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.
pt_BR: No GNOME, widgets com os quais você pode interagir, como Buttons e Switches, enviam sinais quando são clicados ou ativados. Um Button, por exemplo, envia o sinal de “clicado” quando alguém clica nele. Quando isto acontece, o GNOME procura a parte do código que diz o que deve ser feito.

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.
pt_BR: Como nós vamos escrever esse código? Conectando aquele sinal de “clicado” do Button a uma função de chamada, que é uma função que você escreve apenas para lidar com esse sinal. Então, quando você aplica aquele sinal, a função conectada a ele será executada.

note: (itstool) path: section/p
en: Here is an extremely basic example:
pt_BR: Aqui está um exemplo extremamente 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.
pt_BR: Esse ApplicationWindow possui um Button e um Label, organizados em uma Grid. Quando o Button é clicado, uma variável que mantém o número de cookies é incrementada em 1 e o Label que mostra quantos cookies existem será atualizado.

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.
pt_BR: Os cookies neste exemplo não são os mesmos que aqueles que você obtém de sites, que armazenam a informação da sua sessão e podem manter rastro de quais sites você visitou. Eles são apenas biscoitos imaginários. Você pode preparar alguns de verdade, se quiser.

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.
pt_BR: Aqui está o código básico, padrão que vai na inicialização do aplicativo, antes de começar a criação da janela e widgets. Além do aplicativo ter um nome único, a maior alteração em relação ao padrão é que nós criamos uma variável global bem perto do começo, para manter o número de cookies.

note: (itstool) path: section/code
en: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // We start out with 0 cookies
    var cookies = 0;
    
    class GettingTheSignal {
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI ();
        }
pt_BR: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Nós começamos com 0 cookies
    var cookies = 0;
    
    class GettingTheSignal {
        // Cria o aplicativo em si
        constructor() {
            this.application = new Gtk.Application();
    
            // Conecta os sinais "activate" e "startup" às funções de chamada
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Função de chamada para o sinal "activate" apresenta uma janela quando ativa
        _onActivate() {
            this._window.present();
        }
    
        // Função de chamada para o sinal "startup" constrói a UI
        _onStartup() {
            this._buildUI ();
        }

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.
pt_BR: Dê uma olhada na parte que usa o método de conexão do nosso aplicativo e bind, para conectar seus sinais de ativação e inicialização à função que apresenta a janela e constrói a interface gráfica. Nós vamos fazer a mesma coisa com o nosso Button quando nós chegarmos nele, porém nós vamos conectar o seu sinal de “clicado”.

note: (itstool) path: section/title
en: Click the button
pt_BR: Clicando no botão

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.
pt_BR: Como de costume, não colocamos todo o código para criar um Button e outros widgets dentro da função _buildUI, a qual é chamada quando o aplicativo é iniciado.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI() {
pt_BR: 
        // Compila a interface de usuário do aplicativo
        _buildUI() {

note: (itstool) path: section/p
en: First, we create the window itself:
pt_BR: Primeiro, nós criamos a janela em si:

note: (itstool) path: section/code
en: 
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Click the button to get a cookie!"});
pt_BR: 
            // Cria a janela do aplicativo
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Clique no botão para obter um cookie!"});

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.
pt_BR: Note que nós definimos as propriedades de seus default_height e default_width. Estes permite que nós controlemos o quão alto e largo o ApplicationWindow será, em pixels.

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.
pt_BR: A seguir, nós vamos criar o Label que nos mostra o número de cookies. Nós podemos usar as variáveis de cookies como parte da propriedade do rótulo do Label.

note: (itstool) path: section/code
en: 
            // Create the label
            this._cookieLabel = new Gtk.Label ({
                label: "Number of cookies: " + cookies });
pt_BR: 
            // Cria o rótulo
            this._cookieLabel = new Gtk.Label ({
                label: "Número de cookies: " + cookies });

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.
pt_BR: Agora nós vamos criar o Button. Nós defimos a propriedade do rótulo para mostrar o texto que nós queremos no Button e nós conectamos seu sinal de “clicado” a uma função chamada _getACookie, a qual nós vamos escrever após nós terminarmos a construção da interface gráfica do nosso aplicativo.

note: (itstool) path: section/code
en: 
            // Create the cookie button
            this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
    
            // Connect the cookie button to the function that handles clicking it
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
pt_BR: 
            // Cria o botão do cookie
            this._cookieButton = new Gtk.Button ({ label: "Obter um cookie" });
    
            // Conecta o botão do cookie à função que lida o clique nele
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));

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.
pt_BR: Finalmente, nós criamos uma Grid, anexamos os Label e Button a ela e adicionamos-na à janela e informamos à janela para mostrar a si e a seu conteúdo. Isso é tudo que nós precisamos dentro da função _buildUI, de forma que nós fechamos-a com chaves, assim como uma vírgula que informa ao GNOME para continuar para a próxima função. Note que ainda que nós tenhamos escrito o código para o primeiro Label, nós ainda podemos anexá-lo à Grid de uma forma que vai colocá-lo na parte inferior.

note: (itstool) path: section/code
en: 
            // Create a grid to arrange everything inside
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Put everything inside the grid
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
    
        }
pt_BR: 
            // Cria uma grade para organizar tudo dentro
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Coloca tudo dentro da grade
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
    
            // Adiciona a grade à janela
            this._window.add (this._grid);
    
            // Mostra a janela e todos os widgets filhos
            this._window.show_all();
    
        }

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.
pt_BR: Agora, nós escrevemos a função _getACookie. Quando nosso Button envia seu sinal de “clicado”, o código nesta função vai ser executado. Neste caso, tudo que isso faz é aumentar o número de cookies em 1 e atualizar o Label para mostrar o novo número de cookies. Nós fazemos isso usando o método set_label do Label.

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.
pt_BR: Muitos widgets têm as mesmas propriedades e métodos. Ambos Labels e Buttons, por exemplo, tem uma propriedade de rótulo que informa que texto está dentro dele e métodos get_label e set_label que permitem a você verificar o que este texto é e alterá-lo, respectivamente. Então, se você aprende como um widget funciona, você também vai saber como outros como ele funcionam.

note: (itstool) path: section/code
en: 
        _getACookie: function() {
    
            // Increase the number of cookies by 1 and update the label
            cookies++;
            this._cookieLabel.set_label ("Number of cookies: " + cookies);
    
        }
    
    };
pt_BR: 
        _getACookie: function() {
    
            // Aumenta o número de cookies em 1 e atualiza o rótulo
            cookies++;
            this._cookieLabel.set_label ("Número de cookies: " + cookies);
    
        }
    
    };

note: (itstool) path: section/p
en: Finally, we run the application, using the same kind of code as in our last tutorial.
pt_BR: Finalmente, nós executamos o aplicativo, usando o mesmo tipo de código de nosso último tutorial.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new GettingTheSignal ();
    app.application.run (ARGV);
pt_BR: 
    // Executa o aplicativo
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Flip the switch
pt_BR: Ligando o switch

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.
pt_BR: Os botões não são os únicos widgets de entrada na nossa caixa de ferramentas do GTK+. Também podemos usar <em>switches</em> (interruptores), como o deste exemplo. Os switches não têm uma propriedade de rótulo, por isso, temos que criar um rótulo separado que diga o que fazer para ir ao lado dele.

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.
pt_BR: Um Switch tem duas posições, desligado <em>(Off)</em> e ligado <em>(On)</em>. Quando um Switch está ativado, o texto e a cor do plano de fundo mudam, para que você possa identificar em que posição 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.
pt_BR: Você pode ter visto Switches como esses no menu de acessibilidade do GNOME, que permite ativar e desativar recursos como texto grande e o teclado na tela. Neste caso, o Switch controla nosso dispensador de cookie imaginário. Se o Comutador estiver ativado, você poderá obter cookies clicando no botão “Obter um cookie”. Se estiver desligado, clicar no botão não fará 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.
pt_BR: Você pode acessar o menu de acessibilidade clicando no contorno de um ser humano, próximo ao seu nome no canto superior direito da tela.

note: (itstool) path: section/p
en: Here's how we create the Switch:
pt_BR: Veja como nós criamos o Switch:

note: (itstool) path: section/code
en: 
            // Create the switch that controls whether or not you can win
            this._cookieSwitch = new Gtk.Switch ();
pt_BR: 
            // Cria um switch que controla se você pode ou não ganhar
            this._cookieSwitch = new Gtk.Switch ();

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:
pt_BR: Na verdade, não precisamos conectar o Switch a nada. Tudo o que precisamos fazer é escrever uma declaração if em nossa função _getACookie, para verificar se o Switch está ativado. Se quiséssemos fazer algo acontecer assim que você ligasse o Switch, nós conectaríamos o sinal notify::active, assim:

note: (itstool) path: section/code
en: 
            // Connect the switch to the function that handles it
            this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));
pt_BR: 
            // Conecta o switch à função que lida com ele
            this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));

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.
pt_BR: Um Switch está definido para a posição desligada por padrão. Se quiséssemos que o Switch inciasse ligado, definiríamos o valor de sua propriedade ativa como “true” quando o criamos.

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:
pt_BR: Vamos apenas criá-lo normalmente, e então criar o Label que o acompanha. Queremos que o Switch e o Label sejam mantidos próximos uns dos outros, então criaremos um Grid apenas para eles, e então colocaremos esse Grid em nosso Grid maior que contém todos os widgets dentro dele. Veja como é o código para criar tudo isso:

note: (itstool) path: section/code
en: 
            // Create the switch that controls whether or not you can win
            this._cookieSwitch = new Gtk.Switch ();
    
            // Create the label to go with the switch
            this._switchLabel = new Gtk.Label ({
                label: "Cookie dispenser" });
    
            // Create a grid for the switch and its label
            this._switchGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Put the switch and its label inside that grid
            this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
            this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
pt_BR: 
            // Cria o switch que controla se você pode ou não ganhar
            this._cookieSwitch = new Gtk.Switch ();
    
            // Cria o rótulo para ir com o switch
            this._switchLabel = new Gtk.Label ({
                label: "Cookie dispenser" });
    
            // Cria uma grade para o switch e seu rótulo
            this._switchGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Coloca seu switch e seu rótulo dentro daquela grade
            this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
            this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);

note: (itstool) path: section/p
en: And now we arrange everything in the larger Grid like so.
pt_BR: E agora nós organizamos tudo na Grad maior assim.

note: (itstool) path: section/code
en: 
            // Put everything inside the grid
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._switchGrid, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
pt_BR: 
            // Coloca tudo dentro da grade
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._switchGrid, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

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.
pt_BR: Agora, alteramos a função _getACookie para verificar se o fornecedor de cookie está ativado. Fazemos isso usando o método get_active do Switch. Retorna “true” se o Switch estiver ligado e “false” se o Switch estiver desligado.

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.
pt_BR: Quando um método é usado em uma instrução if como essa, o código dentro da instrução if é executado se o método retornar “true”.

note: (itstool) path: section/code
en: 
        _getACookie() {
    
            // Is the cookie dispenser turned on?
            if (this._cookieSwitch.get_active()) {
    
                // Increase the number of cookies by 1 and update the label
                cookies++;
                this._cookieLabel.set_label ("Number of cookies: " + cookies);
    
            }
    
        }
pt_BR: 
        _getACookie() {
    
            // O fornecedor de cookie está ligado?
            if (this._cookieSwitch.get_active()) {
    
                // Aumenta o número de cookies em 1 e atualiza o rótulo
                cookies++;
                this._cookieLabel.set_label ("Número de cookies: " + cookies);
    
            }
    
        }

note: (itstool) path: section/title
en: Tuning the radio
pt_BR: Sintonizando o rádio

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.
pt_BR: Outro tipo de widget de entrada que podemos usar é chamado de RadioButton, normalmente conhecido em português como “botão de opção”. Você os cria em grupos e, em seguida, apenas um RadioButton em um grupo pode ser selecionado por vez. Eles são chamados de RadioButtons porque funcionam como o botão de pré-seleção de canais em rádios de carros antigos. O rádio só podia ser sintonizado em uma estação de cada vez, então, sempre que você pressionasse um botão, outro retornaria para o estado de não pressionado.

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.
pt_BR: Primeiramente, vamos alterar o nome do nosso ApplicationWindow e aumentar sua propriedade border_width, para que nossos widgets não sejam muito compactados. A border_width é o número de pixels entre qualquer widget e a borda da janela.

note: (itstool) path: section/code
en: 
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                border_width: 20,
                title: "Choose the one that says 'cookie'!"});
pt_BR: 
            // Cria a janela do aplicativo
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                border_width: 20,
                title: "Escolha o com nome 'cookie'!"});

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.
pt_BR: Depois disso, criamos os RadioButtons. Lembre-se de como eles são criados em grupos? A maneira como fazemos isso, é definir cada nova propriedade de grupo RadioButton para o nome de outro RadioButton.

note: (itstool) path: section/code
en: 
            // Create the radio buttons
            this._cookieRadio = new Gtk.RadioButton ({ label: "Cookie" });
            this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",
                group: this._cookieRadio });
            this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",
                group: this._cookieRadio });
pt_BR: 
            // Cria os botões de opção
            this._cookieRadio = new Gtk.RadioButton ({ label: "Cookie" });
            this._notCookieOne = new Gtk.RadioButton ({ label: "Não um cookie",
                group: this._cookieRadio });
            this._notCookieTwo = new Gtk.RadioButton ({ label: "Não um cookie",
                group: this._cookieRadio });

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.
pt_BR: Em seguida, criamos uma grade para os RadioButtons. Lembre-se, não precisamos organizar as coisas em Grids na mesma ordem em que as criamos.

note: (itstool) path: section/code
en: 
            // Arrange the radio buttons in their own grid
            this._radioGrid = new Gtk.Grid ();
            this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
            this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);
            this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);
pt_BR: 
            // Ordenamos os botões de opção na sua própria grade
            this._radioGrid = new Gtk.Grid ();
            this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
            this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);
            this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);

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.
pt_BR: Normalmente, o RadioButton selecionado por padrão é aquele que é o nome do grupo. Queremos que o primeiro botão “Não um cookie” esteja selecionado por padrão, motivo pelo qual usamos o método set_active.

note: (itstool) path: note/p
en: We could also set its active property to true when we create it.
pt_BR: Poderíamos também definir sua propriedade ativa como “true” quando a criamos.

note: (itstool) path: section/code
en: 
            // Set the button that will be at the top to be active by default
            this._notCookieOne.set_active (true);
pt_BR: 
            // Define o botão que estará no topo como estando ativo por padrão
            this._notCookieOne.set_active (true);

note: (itstool) path: section/p
en: Now we arrange everything in our main Grid like usual ...
pt_BR: Agora nós organizamos tudo em nossa Grid principal como de costume …

note: (itstool) path: section/code
en: 
            // Put everything inside the grid
            this._grid.attach (this._radioGrid, 0, 0, 1, 1);
            this._grid.attach (this._cookieButton, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
pt_BR: 
            // Coloca tudo dentro da grade
            this._grid.attach (this._radioGrid, 0, 0, 1, 1);
            this._grid.attach (this._cookieButton, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

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.
pt_BR: Em seguida, alteramos nossa função _getACookie para testar se o botão do cookie é o selecionado.

note: (itstool) path: section/code
en: 
        _getACookie() {
    
            // Did you select "cookie" instead of "not cookie"?
            if (this._cookieRadio.get_active()) {
    
                // Increase the number of cookies by 1 and update the label
                cookies++;
                this._cookieLabel.set_label ("Number of cookies: " + cookies);
    
            }
    
        }
pt_BR: 
        _getACookie() {
    
            // Você selecionou "cookie" em vez de "não um cookie"?
            if (this._cookieRadio.get_active()) {
    
                // Aumenta o número de cookies em 1 e atualiza o rótulo
                cookies++;
                this._cookieLabel.set_label ("Número de cookies: " + cookies);
    
            }
    
        }

note: (itstool) path: section/title
en: Can you spell "cookie"?
pt_BR: Você consegue escrever “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.
pt_BR: O último widget de entrada que vamos cobrir é o widget Entry, que é usado para entrada de texto de linha única.

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.
pt_BR: Se você precisar inserir um parágrafo inteiro ou mais, como se estivesse construindo um editor de texto, você vai querer dar uma olhada no widget muito mais personalizável <link xref="textview.js">TextView</link>.

note: (itstool) path: section/p
en: After we change the window's name, we create the Entry widget.
pt_BR: Depois de alterar o nome da janela, criamos o widget Entry.

note: (itstool) path: section/code
en: 
            // Create the text entry field
            this._spellCookie = new Gtk.Entry ();
pt_BR: 
            // Cria um novo campo de entrada de texto
            this._spellCookie = new Gtk.Entry ();

note: (itstool) path: section/p
en: Next, we arrange everything in the Grid ...
pt_BR: Em seguida, organizamos tudo na Grid …

note: (itstool) path: section/code
en: 
            // Put everything inside the grid
            this._grid.attach (this._spellCookie, 0, 0, 1, 1);
            this._grid.attach (this._cookieButton, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
pt_BR: 
            // Coloca tudo dentro da grade
            this._grid.attach (this._spellCookie, 0, 0, 1, 1);
            this._grid.attach (this._cookieButton, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

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.
pt_BR: E agora nós modificamos a instrução if do _getACookie novamente, usando o método get_text do Entry para recuperar o texto que você inseriu nele e ver se você digitou “cookie” corretamente. Não nos importamos se você capitaliza “cookie” ou não, então usamos o método embutido toLowerCase do JavaScript para alterar o todo texto do Entry para minúsculo dentro da instrução 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.
pt_BR: Um widget de Entry não possui uma propriedade de rótulo, que é uma string definida que o usuário não pode alterar. (Você não pode normalmente alterar o rótulo em um Button, por exemplo). Em vez disso, ele tem uma propriedade de texto, que muda para corresponder ao que o usuário digita.

note: (itstool) path: section/code
en: 
        _getACookie() {
    
            // Did you spell "cookie" correctly?
            if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {
    
                // Increase the number of cookies by 1 and update the label
                cookies++;
                this._cookieLabel.set_label ("Number of cookies: " + cookies);
    
            }
    
        }
pt_BR: 
        _getACookie() {
    
            // Você escreveu "cookie" corretamente?
            if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {
    
                // Aumenta o número de cookies em 1 e atualiza o rótulo
                cookies++;
                this._cookieLabel.set_label ("Número de cookies: " + cookies);
    
            }
    
        }

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.
pt_BR: Continue lendo, se você quiser ver o código completo para cada versão do nosso aplicativo de criador de cookies.

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.
pt_BR: A página principal de tutoriais em JavaScript possui <link xref="beginner.js#buttons">amostras de código mais detalhadas</link> para cada widget de entrada, incluindo vários não abordados aqui.

note: (itstool) path: section/title
en: Complete code samples
pt_BR: Amostra de código completo

note: (itstool) path: section/title
en: Code sample with Button
pt_BR: Amostra de código com Button

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // We start out with 0 cookies
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI();
        }
    
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Click the button to get a cookie!"});
    
            // Create the label
            this._cookieLabel = new Gtk.Label ({
                label: "Number of cookies: " + cookies });
    
            // Create the cookie button
            this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
    
            // Connect the cookie button to the function that handles clicking it
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Create a grid to arrange everything inside
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Put everything inside the grid
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Increase the number of cookies by 1 and update the label
            cookies++;
            this._cookieLabel.set_label ("Number of cookies: " + cookies);
    
        }
    
    };
    
    // Run the application
    let app = new GettingTheSignal ();
    app.application.run (ARGV);
pt_BR: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Começamos com 0 cookies
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Cria o aplicativo em si
        constructor() {
            this.application = new Gtk.Application();
    
            // Conecta os sinais 'activate' e 'startup' às funções de chamada
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Função de chamada para o sinal 'activate' apresenta janelas quando ativo
        _onActivate() {
            this._window.present();
        }
    
        // Função de chamada para o sinal 'startup' constrói a interface gráfica
        _onStartup() {
            this._buildUI();
        }
    
        // Constrói a interface gráfica do aplicativo
        _buildUI() {
    
            // Cria a janela do aplicativo
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Clique no botão para obter um cookie!"});
    
            // Cria o rótulo
            this._cookieLabel = new Gtk.Label ({
                label: "Número de cookies: " + cookies });
    
            // Cria o botão de cookie
            this._cookieButton = new Gtk.Button ({ label: "Obtenha um cookie" });
    
            // Conecta o botão de cookie à função que lida com clicar nele
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Cria uma grade que organiza tudo dentro
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Coloca tudo dentro da grade
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
    
            // Adiciona a grade à janela
            this._window.add (this._grid);
    
            // Mostra a janela e todos os widgets filhos
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Aumenta o número de cookies por 1 e atualiza o rótulo
            cookies++;
            this._cookieLabel.set_label ("Número de cookies: " + cookies);
    
        }
    
    };
    
    // Executa o aplicativo
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Code sample with Switch
pt_BR: Amostra de código com Switch

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // We start out with 0 cookies
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI();
        }
    
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Click the button to get a cookie!"});
    
            // Create the label
            this._cookieLabel = new Gtk.Label ({
                label: "Number of cookies: " + cookies });
    
            // Create the cookie button
            this._cookieButton = new Gtk.Button ({
                label: "Get a cookie" });
    
            // Connect the cookie button to the function that handles clicking it
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Create the switch that controls whether or not you can win
            this._cookieSwitch = new Gtk.Switch ();
    
            // Create the label to go with the switch
            this._switchLabel = new Gtk.Label ({
                label: "Cookie dispenser" });
    
            // Create a grid for the switch and its label
            this._switchGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Put the switch and its label inside that grid
            this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
            this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
    
            // Create a grid to arrange everything else inside
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Put everything inside the grid
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._switchGrid, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
    
            // Add the grid to the window
            this._window.add (this._grid);
    
            // Show the window and all child widgets
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Is the cookie dispenser turned on?
            if (this._cookieSwitch.get_active()) {
    
                // Increase the number of cookies by 1 and update the label
                cookies++;
                this._cookieLabel.set_label ("Number of cookies: " + cookies);
    
            }
    
        }
    
    };
    
    // Run the application
    let app = new GettingTheSignal ();
    app.application.run (ARGV);
pt_BR: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Nós começamos com 0 cookies
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Cria o aplicativo em si
        constructor() {
            this.application = new Gtk.Application();
    
            // Conecta os sinais 'activate' e 'startup' às funções de chamada
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Função de chamada para o sinal 'activate' apresenta janelas quando ativo
        _onActivate() {
            this._window.present();
        }
    
        // Função de chamada para o sinal 'startup' constrói a interface gráfica
        _onStartup() {
            this._buildUI();
        }
    
        // Constrói a interface gráfica do aplicativo
        _buildUI() {
    
            // Cria a janela do aplicativo
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Clique no botão para obter um cookie!"});
    
            // Cria o rótulo
            this._cookieLabel = new Gtk.Label ({
                label: "Número de cookies: " + cookies });
    
            // Cria o botão de cookie
            this._cookieButton = new Gtk.Button ({
                label: "Obter um cookie" });
    
            // Conecta o botão do cookie à função que lida o clique nele
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Cria um switch que controla se você pode ou não ganhar
            this._cookieSwitch = new Gtk.Switch ();
    
            // Cria o rótulo para ir com o switch
            this._switchLabel = new Gtk.Label ({
                label: "Cookie dispenser" });
    
            // Cria uma grade para o switch e seu rótulo
            this._switchGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Coloca seu switch e seu rótulo dentro daquela grade
            this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
            this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
    
            // Cria uma grade para organizar todo resto dentro
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Coloca tudo dentro da grade
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._switchGrid, 0, 1, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 2, 1, 1);
    
            // Adiciona a grade à janela
            this._window.add (this._grid);
    
            // Mostra a janela e todos os widgets filhos
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // O fornecedor de cookie está ligado?
            if (this._cookieSwitch.get_active()) {
    
                // Aumenta o número de cookies em 1 e atualiza o rótulo
                cookies++;
                this._cookieLabel.set_label ("Número de cookies: " + cookies);
    
            }
    
        }
    
    };
    
    // Executa o aplicativo
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Code sample with RadioButton
pt_BR: Amostra de código com RadioButton

note: (itstool) path: section/title
en: API References
pt_BR: Referências da API

note: (itstool) path: credit/name
en: GNOME Documentation Project
pt_BR: Projeto de Documentação do GNOME

note: (itstool) path: info/desc
en: A beginner's guide to writing GNOME applications in JavaScript, including code samples and practice exercises.
pt_BR: Um guia para iniciantes na escrita de aplicativos do GNOME em JavaScript, incluindo amostras de códigos e exercícios práticos.

note: (itstool) path: page/title
en: Tutorial for beginners and code samples
pt_BR: Tutoriais para iniciantes e amostras de códigos

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.
pt_BR: JavaScript é uma das linguagens de programação mais populares da web. Não é apenas para a web, no entanto. Se você tiver uma compreensão básica do JavaScript, poderá criar aplicativos completos para o GNOME. <link href="https://wiki.gnome.org/Apps/Documents">Documentos do GNOME</link> é escrito em JavaScript, assim como <link href="https://live.gnome.org/GnomeShell/Tour">GNOME Shell</link>, a parte mais básica do 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.
pt_BR: O GNOME Shell é o que você vê quando clica em “Atividades” no canto superior esquerdo da tela. Também controla o relógio e o resto do painel superior. Além de mostrar como você escreve aplicativos GNOME, esses tutoriais também mostram como usar o JavaScript para escrever extensões do GNOME Shell, que fornecem novos recursos ou mudam a maneira como ele faz as coisas.

note: (itstool) path: section/title
en: Getting Started
pt_BR: Primeiros passos

note: (itstool) path: section/title
en: Tutorials
pt_BR: Tutoriais

note: (itstool) path: section/title
en: Prerequisites
pt_BR: Pré-requisitos

note: (itstool) path: page/title
en: Code samples and platform demos in C++
pt_BR: Amostras de código e demonstrações da plataforma em C++

note: (itstool) path: section/title
en: Examples of applications
pt_BR: Exemplos de aplicativos

note: (itstool) path: page/title
en: Dialog
pt_BR: Diálogo

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.
pt_BR: Use o GTK+ e o GStreamer para criar um aplicativo simples de sintonizador de violão para o GNOME. Mostra como usar o designer de interface.

note: (itstool) path: section/title
en: Connecting the signals
pt_BR: Conectando os sinais

note: (itstool) path: info/desc
en: Your first GNOME application!
pt_BR: Seu primeiro aplicativo do GNOME!

note: (itstool) path: page/title
en: 1. Hello, GNOME!
pt_BR: 1. Olá, 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.
pt_BR: Este tutorial vai mostrar como escrever o seu primeiro aplicativo do GNOME em JavaScript. Você vai usar o JavaScript para escrever para o GNOME da mesma forma que você faria para a web. Em seguida, você aprenderá como usar widgets “nativos”, para escrever aplicativos que parecem com outros aplicativos do 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.
pt_BR: Você instalou o GNOME no seu computador e configurou o <link xref="set-up-gedit.js">gedit</link> para com ele escrever códigos? Você vai querer fazer essas coisas primeiro.

note: (itstool) path: section/title
en: Let's start with a web page
pt_BR: Vamos começar com uma página web

note: (itstool) path: section/p
en: Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?
pt_BR: Aqui estão alguns códigos básicos de HTML, CSS e JavaScript. Eles parecem 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!
pt_BR: Vamos salvar isso como <file>hellognome.html</file> e vejamos com o que ele se parece quando nós executamo-o!

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.
pt_BR: Você <em>pode</em> executar o código acima abrindo <file>hellognome.html</file> em um navegador web. Mas aqui, nós vamos criar um aplicativo do GNOME que executa nosso aplicativo web dentro dele, da mesma forma que você vê na captura de tela. Você vai poder redimensionar e maximizar a janela e clicar no X na esquina para fechá-lo, da mesma forma que você esperaria de um outro aplicativo GNOME. A diferença é que este aqui vai executar um código web dentro dele.

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!
pt_BR: A melhor parte? Nós vamos continuar a usar JavaScript, para escrever todas as partes que fazem do seu aplicativo funcionar com GNOME. Vamos olhar o código e ver como isso é feito!

note: (itstool) path: section/title
en: Creating a GNOME window to frame our web app
pt_BR: Criando uma janela do GNOME para enquadrar nosso aplicativo 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.
pt_BR: Primeiro, nós precisamos informar o GNOME que este é um aplicativo JavaScript, o qual usa gjs. Gjs é a forma do GNOMe de transformar o seu código em instruções que ele entende, de forma que esta linha sempre tem que ir no começo dos aplicativos.

note: (itstool) path: section/p
en: After that, we need to tell GNOME which libraries we want to import.
pt_BR: Depois disso, nós precisamos informar o GNOME quais bibliotecas nós queremos 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:
pt_BR: Da mesma forma que as bibliotecas complementares tipo jQuery nos permitem fazer coisas com JavaScript, cada um destas bibliotecas nos dá novas capacidades para nossos aplicativos do GNOME:

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.
pt_BR: O <file>GLib</file> é uma biblioteca de ajuda, o que nos permite fazer coisas como informar o GNOME onde o arquivo <file>hellognome.html</file> foi criado.

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.
pt_BR: E o <file>Webkit</file> é um motor web de renderização, que nós vamos usar para basicamente criar uma janela de navegador para abrir o nosso arquivo HTML.

note: (itstool) path: section/p
en: Now we create the application itself:
pt_BR: Nós vamos criar o aplicativo em si:

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.
pt_BR: Aqui está um código que você que você vai copiar para quase todo aplicativo JavaScript que você construir. Ele cria um novo Aplicativo e, então, vincula seus sinais de ativação e inicialização a funções que fazem a janela se mostrar e construir sua interface gráfica, respectivamente.

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.
pt_BR: Neste caso, nós queremos que o _onActivate lide com o sinal de ativação e que o _onStartup lide com o sinal de inicialização. O _onActivate apenas informa à janela para se apresentar; então, basicamente, quando você pressiona <keyseq><key>Alt</key> <key>Tab</key></keyseq>, o aplicativo aparece, como você esperaria. O _onStartup chama _buildUI, a qual é a função que cria nossa interface gráfica e é a próxima parte que vamos olhar.

note: (itstool) path: section/title
en: Designing our window's UI
pt_BR: Desenhando a interface gráfica da nossa janela

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.
pt_BR: Na função _buildUI, nós vamos informar o GNOME sobre nossa janela e as coisas dentro dela, uma coisa de cada vez. Depois disso, nós vamos conectar tudo e colocar na exibição.

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.
pt_BR: O primeiro objeto que nós criamos é uma ApplicationWindow. Ele precisa de um título para a barra de título e a propriedade do seu aplicativo precisa ser o aplicativo que nós criamos, acima. Além disso, há várias formas de personalizar sua a aparência, o que será tratado na página de referência <link xref="GtkApplicationWindow.js">ApplicationWindow</link> em mais detalhes. Como você pode ver aqui, nós damos a ele uma altura e largura (medidas em pixels) e informamos ao GNOME que nós queremos que nossa janela apareça no centro da janela.

note: (itstool) path: section/code
en: 
            // Create a webview to show the web app
            this._webView = new Webkit.WebView ();
    
            // Put the web app into the webview
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));
pt_BR: 
            // Cria um webview para mostrar o aplicativo web
            this._webView = new Webkit.WebView ();
    
            // Coloca o aplicativo web no webview
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));

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.
pt_BR: Lembra-se que nós importamos o Webkit bem no começo? Aqui nós estamos criando uma nova instância de uma classe do Webkit chamada WebView, a qual é mais ou menos como uma janela de navegador que nós podemos colocar as coisas dentro do seu aplicativo. Depois disso, nós podemos, então, informar a URI que nós queremos carregar quando o aplicativo 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.)
pt_BR: Nós <em>poderíamos</em> simplesmente informar uma URI web, como <link href="http://gnome.org">http://gnome.org</link>. Em vez disso, aqui nós usamos algumas funções de apoio do GLib para informar o WebView onde nosso arquivo <file>hellognome.html</file> está. O GLib.get_current_dir retorna o diretório no qual nosso aplicativo está sendo executado e GLib.filename_to_uri transforma nosso caminho e nome de arquivo em uma URI que a função load_uri do WebView entende. (o segundo parâmetro do filename_to_uri deveria ser nulo, a menos que você saiba para que serve e tenha um motivo para alterá-lo.)

note: (itstool) path: section/code
en: 
            // Put the webview into the window
            this._window.add (this._webView);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
    
    });
pt_BR: 
            // Coloca o webview na janela
            this._window.add (this._webView);
    
            // Mostra a janela e todos seus widgets filhos
            this._window.show_all();
        },
    
    });

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.
pt_BR: Cada janela pode conter um, e apenas um, widget. Normalmente, nós usamos um contêiner de widgets, como uma <link xref="grid.js">Grid</link>, para colocar múltiplos widgets dentro e, então, usar a função de adicionar da janela para adicionar a Grid a ela. Aqui, nós precisamos apenas do WebView, de forma que é tudo que nós adicionamentos à janela. Depois disso, como a última parte da função _buildUI que cria nossa janela, nós informamos à janela para se mostrar e também mostrar o seu conteúdo.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new HelloGNOME ();
    app.application.run (ARGV);
pt_BR: 
    // Executa o aplicativo
    let app = new HelloGNOME ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of our HelloGNOME class, and tell GNOME to run it.
pt_BR: Finalmente, nós criamos uma nova instância de nossa classe HelloGNOME e informamos ao GNOME para executá-la.

note: (itstool) path: section/title
en: Running your GNOME application
pt_BR: Executando seu aplicativo do 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:
pt_BR: Agora que nós criamos nosso primeiro aplicativo do GNOME, é hora de testá-lo! Você não precisa compilar o seu aplicativo ou instalar qualquer software especial para isso; O GNOME possui gjs embutido, para permiti-lo executar o GNOME Shell. Basta salvar o <file>hellognome.html</file> e o aplicativo, <file>hellognome.js</file>, em um diretório que você pode obter com o terminal. (Eles normalmente abrem na sua pasta pessoal, aquela que tem o mesmo nome do seu usuário.) Depois disso, abra um terminal e digite:

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.
pt_BR: Você deveria ver mais ou menos a mesma captura de tela de antes, com um botão que você possa clicar para fazer uma curta mensagem aparecer.

note: (itstool) path: note/p
en: You can use the terminal command
pt_BR: Você pode usar comando de terminal

note: (itstool) path: note/screen
en:  <output style="prompt">$ </output>cd <var>(directory name)</var>
pt_BR:  <output style="prompt">$ </output>cd <var>(nome do diretório)</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.
pt_BR: para navegar entre diretórios dentro do Terminal, para chegar onde você salvou o arquivo. Há também uma extensão para o Nautilus, o gerenciador de arquivos do GNOME, que permite que você clique com botão direito do mouse em qualquer lugar nele para abrir uma janela de terminal ali mesmo. Verifique no aplicativo que você usa para instalar novos softwares (tipo Adicionar ou Remover Programas ou Central de Programas) pela extensão.

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.
pt_BR: <link xref="02_welcome_to_the_grid.js">Continue com o próximo tutorial</link> para aprender a criar aplicativos “nativos” do GNOME que se parecem com os outros, em vez de um webview com código HTML inserido. Ou veja algumas <link xref="beginner.js#samples">amostras de código</link>, se você gostaria de ver um código exemplo para widget 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.
pt_BR: Finalmente, se você deseja apenas construir aplicativos do GNOME usando bibliotecas do JavaScript projetadas para web, você pode basicamente parar aqui e fazer mais nada! Veja <link xref="beginner.js#tutorials">os últimos tutoriais</link>, se você gostaria de ver como criar um arquivo .desktop para seu aplicativo, o que vai permiti-lo aparecer no seu menu de Atividades do seu computador com todos os seus outros aplicativos.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (C)
pt_BR: Visualizador de imagens (C)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" Gtk application.
pt_BR: Um pouco mais do que um simples aplicativo Gtk “Hello world”.

note: (itstool) path: page/title
en: Image viewer
pt_BR: Visualizador de imagens

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
pt_BR: Neste tutorial, você aprenderá:

note: (itstool) path: credit/name
en: GNOME Documentation Team
pt_BR: Equipe de documentação GNOME

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
pt_BR: Demonstrações da plataforma de desenvolvimento do 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.
pt_BR: Este guia inclui uma variedade de exemplos de codificação, como escrever um visualizador de imagens ou aplicativo de meteorologia. Cada demonstração vem com código que você pode tentar e explica como cada exemplo funciona. Eles são uma ótima maneira de começar a usar a plataforma de desenvolvedores do GNOME.

note: (itstool) path: section/title
en: Pick a Language
pt_BR: Selecione uma linguagem

note: (itstool) path: section/p
en: These developer demos are available in a range of programming languages. Pick one to get started:
pt_BR: Essas demonstrações de desenvolvimento estão disponíveis em várias linguagens de programação. Escolha uma para começar:

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in JavaScript
pt_BR: Tutoriais, amostras de código e demonstrações da plataforma em JavaScript

note: (itstool) path: section/title
en: Code samples and tutorials
pt_BR: Amostras de códigos e tutoriais

note: (itstool) path: td/p (itstool) path: page/p
en: A simple label
pt_BR: Um rótulo simples

note: (itstool) path: info/desc
en: Legal information.
pt_BR: Informações legais.

note: (itstool) path: page/title
en: License
pt_BR: Licença

note: (itstool) path: page/p
en: This work is distributed under a CreativeCommons Attribution-Share Alike 3.0 Unported license.
pt_BR: Esta obra é distribuída sob uma licença CreativeCommons Atribuição-Compartilhada Igual 3.0 Não Adaptada.

note: (itstool) path: page/p
en: You are free:
pt_BR: Você tem liberdade de:

note: (itstool) path: item/title
en: <em>To share</em>
pt_BR: <em>Compartilhar</em>

note: (itstool) path: item/p
en: To copy, distribute and transmit the work.
pt_BR: Copiar, distribuir e transmitir a obra.

note: (itstool) path: item/title
en: <em>To remix</em>
pt_BR: <em>Remixar</em>

note: (itstool) path: item/p
en: To adapt the work.
pt_BR: Criar obras derivadas.

note: (itstool) path: page/p
en: Under the following conditions:
pt_BR: Sob as seguintes condições:

note: (itstool) path: item/title
en: <em>Attribution</em>
pt_BR: <em>Atribuição</em>

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).
pt_BR: Você deve creditar a obra de forma especificada pelo autor ou licenciante (mas não de maneiras que estes concedem qualquer aval a você ou ao seu uso da obra).

note: (itstool) path: item/title
en: <em>Share Alike</em>
pt_BR: <em>Compartilhamento pela mesma licença</em>

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.
pt_BR: Se você alterar, transformar ou criar em cima desta obra, você poderá distribuir a obra resultante apenas sob a mesma licença, ou sob uma licença similar à presente.

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>.
pt_BR: Para o texto completo da licença, veja o <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">site do CreativeCommons</link> ou leia as <link href="http://creativecommons.org/licenses/by-sa/3.0/deed.pt_BR">Commons Deed</link>.

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.
pt_BR: Como uma exceção especial, os mantenedores do copyright dão a você permissão para copiar, modificar e distribuir o código exemplo contido nesta documentação sob os termos de sua escolha, sem restrição.

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Python
pt_BR: Tutoriais, amostras de código e demonstrações da plataforma em Python

note: (itstool) path: section/title (itstool) path: page/title
en: Tutorial for beginners
pt_BR: Tutorial para iniciantes

note: (itstool) path: info/desc
en: A choice from multiple checkbuttons
pt_BR: Uma escolha de vários botões de verificação
