platform-demos - en to sv translation catalogue (1432 entries)

note: (itstool) path: info/desc
en: Learn how to lay out UI components, like Images and Labels.
sv: Lär dig hur du placerar ut komponenter för användargränssnitt, så som bilder och etiketter.

note: (itstool) path: page/title
en: 2. Welcome to the Grid
sv: 2. Välkommen till rutnätet

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.
sv: Denna handledning kommer att visa dig hur du skapar grundläggande komponenter eller delar av ett GNOME-användargränssnitt, så som bilder (Image) och etiketter (Label). Du kommer därefter att få lära dig att arrangera dem i ett rutnät (Grid), vilket låter dig placera komponenter precis där du vill ha dem.

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.
sv: Har du redan gått genom <link xref="hellognome.js">den första handledningen i denna serie</link>? Du kommer att behöva ha gjort det innan du fortsätter.

note: (itstool) path: section/title
en: Going native
sv: Att köra inhemskt

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.
sv: I den senaste handledningen skapade vi vad som praktiskt taget var en GNOME-fönsterram för en webbapplikation. All GNOME-specifik kod som vi behövde lära oss kretsade kring att sätta denna WebView — komponenten som innehåller vårt program — i ett ApplicationWindow, och säga till den att visas. Programmet själv skrevs i HTML och Javascript, precis som de flesta sidor på webben.

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+.
sv: Denna gång kommer vi att enbart använda inhemska GNOME-komponenter. En komponent är en sak, så som en kryssruta eller en bild, och GNOME har en uppsjö att välja bland. Vi kallar dem ”inhemska” komponenter för att särskilja dem från saker som knappen och rubriken i webbapplikationen vi skrev. Istället för att använda webbkod kommer dessa att vara 100 procent GNOME, genom att använda 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.
sv: GTK+ står för ”GIMP Tookit”. Det är som en verktygslåda av komponenter som du kan använda när du bygger dina program. Det skrevs från början för <link href="http://www.gimp.org/">GIMP</link>, vilket är fri programvara för att redigera bilder.

note: (itstool) path: section/title
en: Setting up our application
sv: Konfigurera ditt program

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.
sv: Innan vi gräver fram några komponenter från GTK+-verktygslådan måste vi först skriva den grundläggande standardkoden som vårt program kräver.

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.
sv: Denna del finns alltid i början av din kod. Beroende på vad du ska göra med det kan du komma att vilja deklarera fler importer här. Det vi skriver idag är ganska grundläggande så detta är allt vi behöver; Gtk för komponenter, via det stabila API:t ”3.0”.

note: (itstool) path: section/p
en: Speaking of which:
sv: På tal om det:

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 ();
        }
sv: 
    class WelcomeToTheGrid {
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _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.
sv: Detta är starten på programmet i sig, och _init-funktionen som skapar det. Det berättar för _buildUI att skapa ett ApplicationWindow, vilket vi kommer kalla för _window, och berätta för vårt fönster att presentera sig sig själv närhelst det behövs.

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.
sv: Denna del är, återigen, ganska mycket kopiera och klistra, men du kommer alltid att vilja ge ditt program ett unikt namn.

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"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programmets fönster
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 10,
                title: "Välkommen till 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.
sv: Avslutningsvis kommer vi att börja _buildUI-funktionen genom att skapa ett nytt ApplicationWindow. Vi anger att det följer med detta program, att det ska dyka upp mitt på skärmen och att det bör finnas åtminstone 10 bildpunkter mellan den utvändiga kanten och komponenter inuti. Vi ger det också en titel som kommer att visas i toppen av fönstret.

note: (itstool) path: section/title
en: Reaching into the GTK+ toolbox
sv: Att gräva i GTK+-verktygslådan

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:
sv: Vilka komponenter ska vi använda? Låt säga att vi vill skriva ett program som ser ut så här:

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:
sv: Vi kommer åtminstone att behöva en bild och en textetikett som följer med den. Låt oss börja med bilden:

note: (itstool) path: section/code
en: 
            // Create an image
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
sv: 
            // Skapa en bild
            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.
sv: Du kan hämta bildfilen som används i detta exempel <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">här</link>. Säkerställ att du placerar den i samma katalog som koden du skriver.

note: (itstool) path: section/code
en: 
            // Create a label
            this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!" });
sv: 
            // Skapa en etikett
            this._label = new Gtk.Label ({ label: "Välkommen även till GNOME!" });

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.
sv: Den koden lägger till etiketten nedanför. Du kan se hur vi skapar komponenter här; var och en är en del av Gtk och vi kan ge dem egenskaper som anpassar hur de beter sig. I detta fall sätter vi file-egenskapen för denna Image till att vara filnamnet på bilden vi önskar visa, och Labelns label-egenskap till att vara meningen vi vill ha under bilden.

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.
sv: Ja, det kan låta överflödigt att ha en Label som har en label-egenskap, men det är det inte. Andra komponenter som innehåller text har en label-egenskap, så det är <em>konsekvent</em> att Label-komponenten också har en.

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.
sv: Vi kan dock inte bara lägga till dessa komponenter i vårt fönster i ordning, på samma sätt som HTML-element dyker upp i ordningen du skriver dem. Detta är för att ApplicationWindow endast kan innehålla en komponent.

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.
sv: Hur kommer vi runt det? Genom att skapa en komponent som fungerar som en behållarkomponent, som kan innehålla mer än en komponent och organisera dem inuti. Skåda: Grid (rutnätet).

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ();
sv: 
            // Skapa rutnätet
            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.
sv: Vi ger det inga egenskaper än. Dessa kommer senare allt eftersom vi lär oss att använda Grids krafter. Först, låt oss koppla den Image och Label vi skapade till vår 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);
sv: 
            // Koppla bilden och etiketten till rutnätet
            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:
sv: Denna kod ser oerhört komplicerad ut, men det är den inte. Detta är vad numren betyder:

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.
sv: Det <em>första</em> numret är på vilken vänster-till-höger-position som saker ska placeras på, med början på 0. En komponent som använder 0 här, placeras längst till vänster.

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.
sv: Det <em>andra</em> numret är på vilken topp-till-botten-position som en komponent ska placeras på, med början på 0. Labeln ska placeras under bilden, så vi anger 0 för Image och 1 för Label här.

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.
sv: Det <em>tredje</em> och <em>fjärde</em> numret är hur många kolumner och rader en komponent ska uppta. Vi kommer att se hur dessa fungerar om en liten stund.

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);
sv: 
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
    };
    
    // Kör programmet
    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.
sv: Nu när vi skapat Grid och kopplat alla komponenter till den, så kan vi lägga till den till fönstret och be fönstret att visa sig självt, som det sista steget i _buildUI-funktionen. Som alltid avslutar vi med att skapa en ny instans av programmets klass och be den att köra.

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
sv: Spara ditt program som welcome_to_the_grid.js. Sedan, för att köra ditt program, öppna en terminal, gå till katalogen där ditt program finns och skriv

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?
sv: Där har vi det! Men vänta! Det ser inte helt rätt ut. Varför är Labeln upptryckt intill bilden på det där sättet? Det ser inte så fint ut och det gör det svårare att läsa. Vad kan vi göra åt detta?

note: (itstool) path: section/title
en: Tweaking the Grid
sv: Att anpassa 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.
sv: En sak vi kan göra är att ge Labeln en margin_top-egenskap när vi skapar den. Detta fungerar lite grann som att sätta en marginal för ett HTML-element via inbyggda CSS-stilar.

note: (itstool) path: section/code
en: 
            // Create a label
            this._label = new Gtk.Label ({
                label: "Welcome to GNOME, too!",
                margin_top: 20 });
sv: 
            // Skapa en etikett
            this._label = new Gtk.Label ({
                label: "Välkommen även till GNOME!",
                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:
sv: Men om vi gör det så kommer vi så klart ifall vi ersätter Labeln med någonting annat — eller lägger in en annan komponent — även behöva upprepa margin_top för denna. Annars kommer det att sluta med att vi har någonting i stil med detta:

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:
sv: Vi skulle kunna ange en margin_bottom-egenskap för Imagen, men det kommer inte att fungera när Labeln är i en separat kolumn. Så hur vore det om vi provade med detta istället:

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ({
                row_spacing: 20 });
sv: 
            // Skapa 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.
sv: Detta kommer att göra så att det alltid finns 20 bildpunkter utrymme mellan varje horisontell rad.

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!
sv: Ja, du kan också sätta column_spacing-egenskapen på en Grid, eller margin_left- och margin_right-egenskaper på vilken komponent som helst. Prova dem om du vill!

note: (itstool) path: section/title
en: Adding more widgets
sv: Lägga till fler komponenter

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:
sv: Om vi skulle vilja lägga till en andra Label, hur skulle vi då göra så att det faktiskt såg ut som om den passade in? Ett sätt är att centrera Imagen i toppen så att den ligger ovanför båda förekomsterna av Label istället för bara den till vänster. Det är här dessa andra nummer i Grids attach-method kommer in:

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);
sv: 
            // Skapa en andra etikett
            this._labelTwo = new Gtk.Label ({
                label: "The cake is a pie." });
    
            // Koppla bilden och etiketterna till rutnätet
            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.
sv: Efter att vi skapat den andra Labeln, kopplar vi den till Grid till höger om den första Labeln. Kom ihåg att de första två numren räknar kolumner och rader från vänster till höger och från topp till botten, med början på 0. Som om den första Labeln är i kolumn 0 och rad 1, då kan vi placera den andra i kolumn 1 och rad 1 för att placera den till höger om den första Labeln.

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:
sv: Notera numret 2 i attach-uttrycket för Imagen. Det är själva tricket här. Det numret är hur många kolumner Imagen sträcker sig över, eller hur? Så när vi för allting samman får vi någonting i stil med detta:

note: (itstool) path: section/p
en: There are two things you should take note of, here.
sv: Det finns två saker som du bör notera här.

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.
sv: Att sätta Imagen till att sträcka sig över två kolumner sträcker inte bilden i sig horisontellt. Istället sträcker det den osynliga rutan som tas upp av Image-komponenten så att den fyller båda kolumnerna, sedan placeras Imagen i mitten på den rutan.

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.
sv: Även om vi har satt Grids row_spacing- och ApplicationWindows border_width-egenskaper så har vi ännu inte satt någonting som skapar en kant mellan de två förekomsterna av Label. De var separata tidigare när Imagen bara var i en kolumn men nu när den sträcker sig över båda så ser GNOME inte en orsak till att hålla isär dem.

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:
sv: Det finns åtminstone tre sätt på vilka vi kan kommer runt det sistnämnda. Först kan vi sätta margin_left eller margin_right på endera av förekomsterna av Label:

note: (itstool) path: section/p
en: Second, we can set the Grid's column_homogeneous property to true.
sv: För det andra kan vi sätta Grids column_homogeneous-egenskap till true.

note: (itstool) path: section/code
en: 
            // Create the Grid
            this._grid = new Gtk.Grid ({
                column_homogeneous: true,
                row_spacing: 20 });
sv: 
            // Skapa 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:
sv: Detta gör att det ser ut något i stil med det här:

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.
sv: Och för det tredje kan vi sätta Grids column_spacing-egenskap på samma sätt som vi satt dess row_spacing.

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

note: (itstool) path: section/p
en: That makes it look like this:
sv: Detta får det att se ur så här:

note: (itstool) path: section/title
en: Using stock images
sv: Att använda standardbilder

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:
sv: GNOME har redan massor av standardbilder till hands, som vi kan använda om vi inte känner för att skapa egna eller om vi vill ha en universellt igenkänd ikon. Så här skapar vi en standardbild, jämfört med hur vi skapar en normal bild:

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' });
sv: 
            // Skapa en bild
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
    
            // Skapa en andra bild genom att använda en standardikon
            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.)
sv: Efter det kopplar vi det till Grid till vänster om vår första Label. (Vi använder inte den andra i detta exempel.)

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);
sv: 
            // Koppla bilderna och etiketten till rutnätet
            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:
sv: När vi kör det, ger detta oss:

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.
sv: Så ser standardikonen ”Om” ut. Du kan se en lista över alla standardobjekt från gtk-about och framåt i <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">GNOME:s utvecklardokumentation</link>. Den skrevs för C-programmerare, men du måste inte känna till C för att använda den; bara titta på delen inom citationstecken, så som 'gtk-about' och kopiera den delen för att använda ikonen intill.

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.
sv: Vi placerar enkla citattecken runt 'gtk-about' här eftersom den delen aldrig kommer att behöva översättas till ett annat språk (till skillnad från textsträngar som har dubbla citattecken runt sig). Om det faktiskt <em>blev</em> översatt skulle det ha sönder ikonen eftersom dess namn fortfarande är "gtk-about" oavsett vilket språk du talar.

note: (itstool) path: section/title
en: What's next?
sv: Vad är nästa steg?

note: (itstool) path: section/p
en: Before we go on to the next tutorial, let's try something a little different:
sv: Innan vi går vidare till nästa handledning, låt oss prova något annat:

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);
sv: 
            // Skapa en knapp
            this._button = new Gtk.Button ({
                label: "Välkommen även till GNOME!"});
    
            // Koppla bilderna och knappen till rutnätet
            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>.
sv: Det är helt rätt, vi gjorde om Labeln till en Button bara genom att ändras dess namn! Om du kör programmet och klickar på den så kommer du dock att upptäcka att den inte gör något. Hur får vi vår Button att göra något? Det kommer vi att upptäcka i <link xref="03_getting_the_signal.js">nästa handledning</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.
sv: Om du vill, spendera lite tid på att experimentera med Grid, Label och Image, inklusive standardbilder.

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.
sv: Ett trick du kan använda för att åstadkomma mer komplexa layouter är att nästla flera Grid inuti varandra. Detta låter dig gruppera relaterade komponenter och enkelt omarrangera dem. Titta på kodexemplet <link xref="radiobutton.js">RadioButton</link> om du vill se hur detta görs.

note: (itstool) path: section/title
en: Complete code sample
sv: Fullständigt kodexempel

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);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class WelcomeToTheGrid {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI ();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programmets fönster
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 10,
                title: "Välkommen till Grid"});
    
            // Skapa Grid
            this._grid = new Gtk.Grid ({
                // column_homogeneous: true,
                // column_spacing: 20,
                row_spacing: 20 });
    
            // Skapa en bild
            this._image = new Gtk.Image ({ file: "gnome-image.png" });
    
            // Skapa en andra bild med hjälp av en standardikon
            this._icon = new Gtk.Image ({ stock: 'gtk-about' });
    
            // Skapa en etikett
            this._label = new Gtk.Label ({
                label: "Välkommen även till GNOME!",
                /* margin_top: 20 */ });
    
            /* Skapa en andra etikett
            this._labelTwo = new Gtk.Label ({
                label: "The cake is a pie." }); */
    
            /* Skapa en knapp
            this._button = new Gtk.Button ({
                label: "Välkommen även till GNOME!"}); */
    
            // Anslut bilderna och knappen till rutnätet
            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);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
    };
    
    // Kör programmet
    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.
sv: Skapa knappar och andra komponenter som gör saker när du klickar på dem.

note: (itstool) path: page/title
en: 3. Getting the Signal
sv: 3. Få signalen

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.
sv: I den senaste handledningen lärde vi oss hur man skapar komponenter så som Label, Image och Button. Här kommer vi att lära oss att få Button och andra inmatningskomponenter att faktiskt göra saker, genom att skriva funktioner som hanterar signalerna de skickar när de klickas på eller interageras med.

note: (itstool) path: section/title
en: A basic application
sv: Ett grundläggande program

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.
sv: I GNOME skickar komponenter som du kan interagera med, så som Button och Switch, ut signaler när de klickas på eller aktiveras. En Button till exempel skickar ut signalen ”clicked” när någon klickar på den. När detta inträffar letar GNOME efter delen i din kod som säger vad som ska hända.

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.
sv: Hur skriver vi den koden? Genom att ansluta Buttons ”clicked”-signal till en återanropsfunktion, vilket är en funktion du skriver enkom för att hantera den signalen. Så närhelst den signalen skickas ut kommer funktionen som är ansluten till den signalen att köra.

note: (itstool) path: section/p
en: Here is an extremely basic example:
sv: Här är ett extremt enkelt exempel:

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.
sv: Detta ApplicationWindow har en Button och en Label inuti, arrangerade via en Grid. Närhelst Button blir klickad på ökar en variabel som innehåller antalet kakor med ett och Labeln som visar hur många kakor det finns uppdateras.

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.
sv: Kakorna i detta exempel är inte samma som kakorna som du kan få från webbplatser, vilka lagrar din inloggningsinformation och håller reda på vilka webbplatser du besökt. De är bara fiktiva belöningar. Du kan baka några riktiga om du vill.

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.
sv: Här är den grundläggande standardkoden som kör vid programmets start, innan vi börjar skapa fönstret och komponenter. Förutom att programmet har ett unikt namn är den största förändringen från standardkoden att vi skapar en global variabel precis i början för att lagra antalet kakor.

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 ();
        }
sv: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Vi börjar med 0 kakor
    var cookies = 0;
    
    class GettingTheSignal {
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”active”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktionen för ”startup”-signalen bygger användargränssnittet
        _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.
sv: Titta på delen som använder vårt programs anslutningsmetod och bindning för att ansluta dess ”activate”- och ”startup”-signaler till funktionerna som visar fönstret och bygger användargränssnittet. Vi kommer att göra samma sak med vår Button när vi kommer till det, förutom att vi kommer att ansluta dess ”clicked”-signal istället.

note: (itstool) path: section/title
en: Click the button
sv: Klicka på knappen

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.
sv: Som vanligt kommer vi att placera all kod för att skapa vår Button och andra komponenter inuti funktionen _buildUI, vilken anropas när programmet startar.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI() {
sv: 
        // Bygg programmets användargränssnitt
        _buildUI() {

note: (itstool) path: section/p
en: First, we create the window itself:
sv: Först skapar vi fönstret i sig:

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!"});
sv: 
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Klicka på knappen för att få en kaka!"});

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.
sv: Notera att vi har satt egenskaperna default_height och default_width. Dessa låter oss styra hur högt och brett, i bildpunkter, som ApplicationWindow kommer att vara.

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.
sv: Härnäst kommer vi att skapa Labeln som visar oss antalet kakor. Vi kan använda kakvariabeln som en del av Labelns label-egenskap.

note: (itstool) path: section/code
en: 
            // Create the label
            this._cookieLabel = new Gtk.Label ({
                label: "Number of cookies: " + cookies });
sv: 
            // Skapa etiketten
            this._cookieLabel = new Gtk.Label ({
                label: "Antal kakor: " + 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.
sv: Nu skapar vi vår Button. Vi sätter dess label-egenskap så den visar texten som vi vill ha på vår Button, och vi ansluter dess ”clicked”-signal till en funktion kallad _getACookie, vilken vi kommer att skriva efter att vi är klara med att bygga vårt programs användargränssnitt.

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));
sv: 
            // Skapa kakknappen
            this._cookieButton = new Gtk.Button ({ label: "Få en kaka" });
    
            // Anslut kakknappen till funktionen som hanterar när den blir klickad på
            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.
sv: Avslutningsvis skapar vi en Grid, fäster vår Label och Button till den och lägger till den till fönstret och ber fönstret att visa sig själv och sitt innehåll. Det är allt vi behöver göra inuti _buildUI-funktionen, så vi stänger den med en klammerparentes så väl som ett kommatecken som berättar för GNOME att fortsätta med nästa funktion. Notera att även om vi skrev koden för Label först kan vi fortfarande fästa den till Grid på ett sätt som placerar den längst ned.

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();
    
        }
sv: 
            // Skapa ett rutnät för att ordna allting inuti
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Placera allting inuti rutnätet
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla dess barnkomponenter
            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.
sv: Nu kommer vi att skriva _getACookie-funktionen. När vår Button skickar ut sin ”clicked”-signal kommer koden i denna funktion att köras. I detta fall är allt den ska göra att öka antalet kakor med 1 och uppdatera vår Label till att visa det nya antalet kakor. Vi gör detta via Labelns set_label-metod.

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.
sv: Många komponenter har samma egenskaper och metoder. Både Label och Button har till exempel en label-egenskap som säger vilken text som finns inuti dem, och get_label- och set_label-metoder som låter dig se vad texten är, respektive ändra den. Så om du lär dig hur en komponent fungerar kommer du också att veta hur andra liknande komponenter fungerar.

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);
    
        }
    
    };
sv: 
        _getACookie: function() {
    
            // Öka antalet kakor med 1 och uppdatera etiketten
            cookies++;
            this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
        }
    
    };

note: (itstool) path: section/p
en: Finally, we run the application, using the same kind of code as in our last tutorial.
sv: Avslutningsvis kör vi programmet med samma kod som i vår senaste handledning.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new GettingTheSignal ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Flip the switch
sv: Slå om brytaren

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.
sv: Knappar är inte den enda typen av komponenter i GTK+-verktygslådan. Vi kan också använda brytare (Switch) som den i detta exempel. En Switch har inte en etikettegenskap, så vi måste skapa en separat Label intill som berättar vad den gör.

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.
sv: En Switch har två positioner, av och på. När en Switch är påslagen kommer dess text och bakgrundsfärg att ändras, så du kan se vilken position den är i.

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.
sv: Du kan ha sett Switchar som dessa i GNOME:s hjälpmedelsmeny, vilken låter dig slå på och av funktioner så som stor text och skärmtangentbord. I detta fall styr Switchen vår fiktiva kakautomat. Om Switchen är påslagen kan du få kakor genom att klicka på knappen ”Få en kaka”. Om den är avslagen, kommer klickande på knappen inte att göra något.

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.
sv: Du kan nå hjälpmedelsmenyn genom att klicka på konturen av en människa nära ditt namn i övre högra hörnet av skärmen.

note: (itstool) path: section/p
en: Here's how we create the Switch:
sv: Så här skapar vi Switchen:

note: (itstool) path: section/code
en: 
            // Create the switch that controls whether or not you can win
            this._cookieSwitch = new Gtk.Switch ();
sv: 
            // Skapa brytaren som styr huruvida du kan vinna eller ej
            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:
sv: Vi behöver faktiskt inte ansluta Switchen till någonting. Allt vi behöver göra är att skriva en if-sats i vår _getACookie-funktion, för att se om Switchen är påslagen. Om vi skulle vilja att något ska hända direkt när Switchen slås om, måste vi ansluta till dess notify::active-signal, så här:

note: (itstool) path: section/code
en: 
            // Connect the switch to the function that handles it
            this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));
sv: 
            // Anslut brytaren till funktionen som hanterar den
            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.
sv: En Switch är som standard satt till avslagen. Om vi vill att Switchen ska börja påslagen, måste vi sätta värdet för dess active-egenskap till true när vi skapar den.

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:
sv: Låt oss dock börja med att skapa den normalt, och sedan skapa en medföljande Label. Vi vill att Switchen och Labeln ska vara alldeles intill varandra, så vi skapar en Grid bara för dem, sedan stoppar vi denna Grid inuti vår större Grid som innehåller alla komponenterna. Här är hur koden skall se ut för allt detta:

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);
sv: 
            // Skapa brytaren som styr huruvida du kan vinna eller ej
            this._cookieSwitch = new Gtk.Switch ();
    
            // Skapa etiketten som medföljer brytaren
            this._switchLabel = new Gtk.Label ({
                label: "Kakautomat" });
    
            // Skapa ett rutnät för brytaren och dess etikett
            this._switchGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Stoppa brytaren och dess etikett inuti det rutnätet
            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.
sv: Och nu arrangerar vi allting inuti vår större Grid på följande sätt.

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);
sv: 
            // Stoppa allting inuti rutnätet
            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.
sv: Nu ändrar vi _getACookie-funktionen så att den kontrollerar om kakautomaten är påslagen. Vi gör det genom att använda Switchens get_active-metod. Den returnerar true om Switchen är påslagen, och false om Switchen är avslagen.

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.
sv: När en metod används inuti en if-sats så här, kommer koden inuti if-satsen att köras om metoden returnerar 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);
    
            }
    
        }
sv: 
        _getACookie() {
    
            // Är kakautomaten påslagen?
            if (this._cookieSwitch.get_active()) {
    
                // Öka antalet kakor med 1 och uppdatera etiketten
                cookies++;
                this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
            }
    
        }

note: (itstool) path: section/title
en: Tuning the radio
sv: Ratta på radion

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.
sv: En annan sorts inmatningskomponent som vi kan använda kallas för RadioButton. Du skapar dem i grupper, och då kan endast en RadioButton i en grupp vara vald samtidigt. De kallas radioknappar för att de fungerar som knapparna för förinställda kanaler i en gammaldags bilradio. Radion kunde bara vara inställd på en kanal åt gången, så närhelst du tryckte på en knapp så fick det en annan att poppa ut igen.

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.
sv: Låt oss först ändra namnet på vårt ApplicationWindow och öka dess border_width-egenskap, så att våra komponenter inte är så tätt packade. Värdet border_width är antalet bildpunkter mellan alla komponenter och fönstrets kant.

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'!"});
sv: 
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                border_width: 20,
                title: "Välj den som säger ”kaka”!"});

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.
sv: Efter det skapar vi RadioButton-knapparna. Kommer du ihåg att de skapas i grupper? Vi gör det genom att ställa in group-egenskapen för varje ny RadioButton till namnet på en annan 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 });
sv: 
            // Create the radio buttons
            this._cookieRadio = new Gtk.RadioButton ({ label: "Kaka" });
            this._notCookieOne = new Gtk.RadioButton ({ label: "Inte kaka",
                group: this._cookieRadio });
            this._notCookieTwo = new Gtk.RadioButton ({ label: "Inte kaka",
                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.
sv: Härnäst skapar vi en Grid för RadioButton-knapparna. Kom ihåg att vi inte behöver arrangera saker i en Grid i samma ordning som vi skapar dem.

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);
sv: 
            // Arrangera radioknapparna i sitt eget rutnät
            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.
sv: Vanligen är det den RadioButton som är vald som standard som används som namnet på gruppen. Vi vill dock att den första ”Inte kaka”-knappen ska vara vald som standard, så vi använder dess set_active-metod.

note: (itstool) path: note/p
en: We could also set its active property to true when we create it.
sv: Vi skulle också kunna ställa in dess active-egenskap till true när vi skapar den.

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);
sv: 
            // Ställ in knappen högst upp att vara aktiv som standard
            this._notCookieOne.set_active (true);

note: (itstool) path: section/p
en: Now we arrange everything in our main Grid like usual ...
sv: Nu arrangerar vi allting i vår huvud-Grid som vanligt …

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);
sv: 
            // Stoppa allting inuti rutnätet
            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.
sv: Sedan ändrar vi vår _getACookie-funktion så att den testar om kakknappen är den som har valts.

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);
    
            }
    
        }
sv: 
        _getACookie() {
    
            // Valde du ”kaka” istället för ”inte kaka”?
            if (this._cookieRadio.get_active()) {
    
                // Öka antalet kakor med 1 och uppdatera etiketten
                cookies++;
                this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
            }
    
        }

note: (itstool) path: section/title
en: Can you spell "cookie"?
sv: Kan du stava till ”kaka”?

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.
sv: Den sista inmatningskomponenten som vi kommer att tala om är komponenten Entry, vilken används för textinmatningsfält med en ensam rad.

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.
sv: Om du behöver kunna mata in ett helt stycke eller mer, exempelvis om du bygger en textredigerare, så kommer du vilja ta en titt på den mycket mer anpassningsbara <link xref="textview.js">TextView</link>-komponenten.

note: (itstool) path: section/p
en: After we change the window's name, we create the Entry widget.
sv: Efter att vi ändrar fönstrets namn skapar vi Entry-komponenten.

note: (itstool) path: section/code
en: 
            // Create the text entry field
            this._spellCookie = new Gtk.Entry ();
sv: 
            // Skapa textinmatningsfältet
            this._spellCookie = new Gtk.Entry ();

note: (itstool) path: section/p
en: Next, we arrange everything in the Grid ...
sv: Sedan arrangerar vi allt i vår 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);
sv: 
            // Stoppa allting inuti rutnätet
            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.
sv: Nu ändrar vi if-satsen för _getACookie igen, och använder get_text-metoden för Entryt för att få texten som du matade in i det och se om du stavade ”kaka” rätt. Vi bryr oss inte om du använder små eller stora bokstäver i ”kaka”, så vi använder Javascripts inbyggda toLowerCase-metod för att ändra texten för Entryt till gemener inuti if-satsen.

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.
sv: En Entry-komponent har ingen label-egenskap, vilket är en inställd textsträng som användaren inte kan ändra. (Du kan exempelvis vanligen inte ändra etiketten på en Button.) Istället har den en text-egenskap, vilken ändras så att den motsvarar vad användaren skriver in.

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);
    
            }
    
        }
sv: 
        _getACookie() {
    
            // Stavade du ”kaka” rätt?
            if ((this._spellCookie.get_text()).toLowerCase() == "kaka") {
    
                // Öka antalet kakor med 1 och uppdatera etiketten
                cookies++;
                this._cookieLabel.set_label ("Antal kakor: " + 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.
sv: Fortsätt läsa om du vill se den fullständiga koden för varje version av vårt kakmakarprogram.

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.
sv: Huvudsidan för Javascripthandledningar har <link xref="beginner.js#buttons">mer detaljerade kodexempel</link> för varje inmatningskomponent, däribland flera som inte täcks här.

note: (itstool) path: section/title
en: Complete code samples
sv: Fullständiga kodexempel

note: (itstool) path: section/title
en: Code sample with Button
sv: Kodexempel med 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);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Vi börjar med 0 kakor
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bytt programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Klicka på knappen för att få en kaka!"});
    
            // Skapa en etikett
            this._cookieLabel = new Gtk.Label ({
                label: "Antal kakor: " + cookies });
    
            // Skapa kak-knappen
            this._cookieButton = new Gtk.Button ({ label: "Få en kaka" });
    
            // Anslut kakknappen till funktionen som hanterar klickande på den
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Skapa ett rutnät för att arrangera allting i
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Stoppa allting inuti rutnätet
            this._grid.attach (this._cookieButton, 0, 0, 1, 1);
            this._grid.attach (this._cookieLabel, 0, 1, 1, 1);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Öka antalet kakor med 1 och uppdatera etiketten
            cookies++;
            this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
        }
    
    };
    
    // Kör programmet
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Code sample with Switch
sv: Kodexempel med 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);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Vi börjar med 0 kakor
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                title: "Klicka på knappen för att få en kaka!"});
    
            // Skapa etiketten
            this._cookieLabel = new Gtk.Label ({
                label: "Antal kakor: " + cookies });
    
            // Skapa kak-knappen
            this._cookieButton = new Gtk.Button ({
                label: "Få en kaka" });
    
            // Anslut kakknappen till funktionen som hanterar klickande på den
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Skapa en brytare som styr huruvida du kan vinna eller ej
            this._cookieSwitch = new Gtk.Switch ();
    
            // Skapa etiketten som följer med brytaren
            this._switchLabel = new Gtk.Label ({
                label: "Kakautomat" });
    
            // Skapa ett rutnät för brytaren och dess etikett
            this._switchGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Stoppa brytaren och dess etikett inuti det rutnätet
            this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);
            this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);
    
            // Skapa ett rutnät för att arrangera allting annat inuti
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Stoppa allting inuti rutnätet
            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);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla dess barnkomponenter
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Är kakautomaten påslagen?
            if (this._cookieSwitch.get_active()) {
    
                // Öka antalet kakor med 1 och uppdatera etiketten
                cookies++;
                this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
            }
    
        }
    
    };
    
    // Kör programmet
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Code sample with RadioButton
sv: Kodexempel med RadioButton

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,
                border_width: 20,
                title: "Choose the one that says 'cookie'!"});
    
            // 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 });
    
            // 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);
    
            // Set the button that will be at the top to be active by default
            this._notCookieOne.set_active (true);
    
            // 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 label
            this._cookieLabel = new Gtk.Label ({
                label: "Number of cookies: " + cookies });
    
            // 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._radioGrid, 0, 0, 1, 1);
            this._grid.attach (this._cookieButton, 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() {
    
            // 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);
    
            }
    
        }
    
    };
    
    // Run the application
    let app = new GettingTheSignal ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Vi börjar med 0 kakor
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg användargränssnittet
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                border_width: 20,
                title: "Välj den som säger ”kaka”!"});
    
            // Skapa radioknapparna
            this._cookieRadio = new Gtk.RadioButton ({ label: "Kaka" });
            this._notCookieOne = new Gtk.RadioButton ({ label: "Inte kaka",
                group: this._cookieRadio });
            this._notCookieTwo = new Gtk.RadioButton ({ label: "Inte kaka",
                group: this._cookieRadio });
    
            // Arrangera radioknapparna i sitt eget rutnät
            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);
    
            // Ställ in knappen högst upp att vara aktiv som standard
            this._notCookieOne.set_active (true);
    
            // Skapa kakknappen
            this._cookieButton = new Gtk.Button ({
                label: "Få en kaka" });
    
            // Anslut kakknappen till funktionen som hanterar klickande på den
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Skapa etiketten
            this._cookieLabel = new Gtk.Label ({
                label: "Antal kakor: " + cookies });
    
            // Skapa ett rutnät för att arrangera allt inuti
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Stoppa allting inuti rutnätet
            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);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Valde du ”kaka” istället för ”inte kaka”?
            if (this._cookieRadio.get_active()) {
    
                // Öka antalet kakor med 1 och uppdatera etiketten
                cookies++;
                this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
            }
    
        }
    
    };
    
    // Kör programmet
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Code sample with Entry
sv: Kodexempel med Entry

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,
                border_width: 20,
                title: "Spell 'cookie' to get a cookie!"});
    
            // Create the text entry field
            this._spellCookie = new Gtk.Entry ();
    
            // 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 label
            this._cookieLabel = new Gtk.Label ({
                label: "Number of cookies: " + cookies });
    
            // 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._spellCookie, 0, 0, 1, 1);
            this._grid.attach (this._cookieButton, 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() {
    
            // 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);
    
            }
    
        }
    
    };
    
    // Run the application
    let app = new GettingTheSignal ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    // Vi börjar med 0 kakor
    var cookies = 0;
    
    class GettingTheSignal {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg användargränssnittet
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 200,
                default_width: 400,
                border_width: 20,
                title: "Stava till ”kaka” för att få en kaka!"});
    
            // Skapa textinmatningsfältet
            this._spellCookie = new Gtk.Entry ();
    
            // Skapa kakknappen
            this._cookieButton = new Gtk.Button ({
                label: "Få en kaka" });
    
            // Anslut kakknappen till funktionen som hanterar klickande på den
            this._cookieButton.connect ('clicked', this._getACookie.bind(this));
    
            // Skapa etiketten
            this._cookieLabel = new Gtk.Label ({
                label: "Antal kakor: " + cookies });
    
            // Skapa ett rutnät för att arrangera allt inuti
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                row_spacing: 20 });
    
            // Stoppa allting inuti rutnätet
            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);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
    
        }
    
        _getACookie() {
    
            // Stavade du ”kaka” rätt?
            if ((this._spellCookie.get_text()).toLowerCase() == "kaka") {
    
                // Öka antalet kakor med 1 och uppdatera etiketten
                cookies++;
                this._cookieLabel.set_label ("Antal kakor: " + cookies);
    
            }
    
        }
    
    };
    
    // Kör programmet
    let app = new GettingTheSignal ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: Display information about an application
sv: Visa information om ett program

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu
sv: Ett AboutDialog-exempel som använder Gtk.ApplicationWindow och Menu

note: (itstool) path: note/p
en: <em style="bold">You need to be running Gtk3.4 or later for this to work</em>
sv: <em style="bold">Du måste köra Gtk3.4 eller senare för att detta ska fungera</em>

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    /* Callback function in which reacts to the "response" signal from the user in
     * the message dialog window.
     * This function is used to destroy the dialog window.
     */
    static void
    on_close (GtkDialog *dialog,
              gint       response_id,
              gpointer   user_data)
    {
      /* This will cause the dialog to be destroyed */
      gtk_widget_destroy (GTK_WIDGET (dialog));
    }
    
    /* Callback function for the response signal "activate" related to the SimpleAction
     * "about_action".
     * This function is used to cause the about dialog window to popup.
     */
    static void
    about_cb (GSimpleAction *simple,
              GVariant      *parameter,
              gpointer       user_data)
    {
      GtkWidget *about_dialog;
    
      about_dialog = gtk_about_dialog_new ();
    
      /* Lists of authors/ documenters to be used later, they must be initialized
       * in a null terminated array of strings.
       */
      const gchar *authors[] = {"GNOME Documentation Team", NULL};
      const gchar *documenters[] = {"GNOME Documentation Team", NULL};
    
      /* We fill in the information for the about dialog */
      gtk_about_dialog_set_program_name (GTK_ABOUT_DIALOG (about_dialog), "AboutDialog Example");
      gtk_about_dialog_set_copyright (GTK_ABOUT_DIALOG (about_dialog), "Copyright \xc2\xa9 2012 GNOME Documentation Team");
      gtk_about_dialog_set_authors (GTK_ABOUT_DIALOG (about_dialog), authors);
      gtk_about_dialog_set_documenters (GTK_ABOUT_DIALOG (about_dialog), documenters);
      gtk_about_dialog_set_website_label (GTK_ABOUT_DIALOG (about_dialog), "GNOME Developer Website");
      gtk_about_dialog_set_website (GTK_ABOUT_DIALOG (about_dialog), "http://developer.gnome.org");
    
      /* We do not wish to show the title, which in this case would be
       * "AboutDialog Example". We have to reset the title of the messagedialog
       * window after setting the program name.
       */
      gtk_window_set_title (GTK_WINDOW (about_dialog), "");
    
      /* To close the aboutdialog when "close" is clicked we connect the response
       * signal to on_close
       */
      g_signal_connect (GTK_DIALOG (about_dialog), "response",
                        G_CALLBACK (on_close), NULL);
    
      /* Show the about dialog */
      gtk_widget_show (about_dialog);
    }
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      GSimpleAction *about_action;
    
      /* Create a window with a title and a default size */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "AboutDialog Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
    
      /* Create a new simple action, giving it a NULL parameter type. It will
       * always be NULL for actions invoked from a menu. (e.g clicking on an "ok"
       * or "cancel" button)
       */
      about_action = g_simple_action_new ("about", NULL);
    
      /* Connect the "activate" signal to the appropriate callback function.
       * It will indicate that the action was just activated.
       */
      g_signal_connect (about_action, "activate", G_CALLBACK (about_cb),
                        GTK_WINDOW (window));
    
      /* Adds the about_action to the overall action map. An Action map is an
       * interface that contains a number of named GAction instances
       * (such as about_action)
       */
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (about_action));
    
      gtk_widget_show_all (window);
    }
    
    /* Callback function for the response signal "activate" from the "quit" action
     * found in the function directly below.
     */
    static void
    quit_cb (GSimpleAction *simple,
             GVariant      *parameter,
             gpointer       user_data)
    {
      GApplication *application = user_data;
    
      g_application_quit (application);
    }
    
    /* Startup function for the menu we are creating in this sample */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GMenu *menu;
      GSimpleAction *quit_action;
    
      /* Initialize the GMenu, and add a menu item with label "About" and action
       * "win.about". Also add another menu item with label "Quit" and action
       * "app.quit"
       */
      menu = g_menu_new ();
      g_menu_append (menu, "About", "win.about");
      g_menu_append (menu, "Quit", "app.quit");
    
      /* Create a new simple action for the application. (In this case it is the
       * "quit" action.
       */
      quit_action = g_simple_action_new ("quit", NULL);
    
      /* Ensure that the menu we have just created is set for the overall application */
      gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (menu));
    
      g_signal_connect (quit_action,
                        "activate",
                        G_CALLBACK (quit_cb),
                        app);
    
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
    }
    
    /* Startup function for the application */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
sv: 
    #include &lt;gtk/gtk.h&gt;
    
    /* Återanropsfunktion vilken reagerar på ”response”-signalen från användaren i
     * meddelandedialogfönstret.
     * Denna funktion används för att förstöra dialogfönstret.
     */
    static void
    on_close (GtkDialog *dialog,
              gint       response_id,
              gpointer   user_data)
    {
      /* Detta kommer att förorsaka att dialogen förstörs */
      gtk_widget_destroy (GTK_WIDGET (dialog));
    }
    
    /* Återanropsfunktion för svarssignalen ”activate” relaterad till SimpleAction
     * "about_action".
     * Denna funktion används för att se till att dialogfönstret visas.
     */
    static void
    about_cb (GSimpleAction *simple,
              GVariant      *parameter,
              gpointer       user_data)
    {
      GtkWidget *about_dialog;
    
      about_dialog = gtk_about_dialog_new ();
    
      /* Listor med upphovsmän/dokumentatörer som används senare, måste
       * initieras som en null-terminerad vektor av strängar.
       */
      const gchar *authors[] = {"GNOME:s dokumentationsgrupp", NULL};
      const gchar *documenters[] = {"GNOME:s dokumentationsgrupp", NULL};
    
      /* Vi fyller i informationen för om-dialogen */
      gtk_about_dialog_set_program_name (GTK_ABOUT_DIALOG (about_dialog), "AboutDialog-exempel");
      gtk_about_dialog_set_copyright (GTK_ABOUT_DIALOG (about_dialog), "Copyright \xc2\xa9 2012 GNOME:s dokumentationsgrupp");
      gtk_about_dialog_set_authors (GTK_ABOUT_DIALOG (about_dialog), authors);
      gtk_about_dialog_set_documenters (GTK_ABOUT_DIALOG (about_dialog), documenters);
      gtk_about_dialog_set_website_label (GTK_ABOUT_DIALOG (about_dialog), "GNOME:s utvecklarwebbplats");
      gtk_about_dialog_set_website (GTK_ABOUT_DIALOG (about_dialog), "http://developer.gnome.org");
    
      /* Vi vill inte visa titeln, vilken i detta fall skulle varit ”AboutDialog-exempel”.
       * Vi måste återställa titeln för meddelandedialogfönstret efter att ha satt
       * programnamnet.
       */
      gtk_window_set_title (GTK_WINDOW (about_dialog), "");
    
      /* För att stänga om-dialogen när ”close” klickas på ansluter vi svarssignalen
       * till on_close
       */
      g_signal_connect (GTK_DIALOG (about_dialog), "response",
                        G_CALLBACK (on_close), NULL);
    
      /* Visa om-dialogen */
      gtk_widget_show (about_dialog);
    }
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      GSimpleAction *about_action;
    
      /* Skapa ett fönster med en titel och en standardstorlek */
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "AboutDialog-exempel");
      gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
    
      /* Skapa en ny åtgärd, ge den parametertypen NULL. Den kommer
       * alltid att vara NULL för åtgärder som anropas från en meny. (t.ex. genom att klicka på
       * knapparna ”ok” eller ”avbryt”)
       */
      about_action = g_simple_action_new ("about", NULL);
    
      /* Anslut ”activate”-signalen till en lämplig återanropsfunktion.
       * Den kommer att indikera att åtgärden nyss aktiverats.
       */
      g_signal_connect (about_action, "activate", G_CALLBACK (about_cb),
                        GTK_WINDOW (window));
    
      /* Lägger till about_action till den övergripande åtgärdsmappningen. En åtgärdsmappning
       * är ett gränssnitt som innehåller ett antal namngivna GAction-instanser
       * (så som about_action)
       */
      g_action_map_add_action (G_ACTION_MAP (window), G_ACTION (about_action));
    
      gtk_widget_show_all (window);
    }
    
    /* Återanropsfunktion för svarssignalen ”activate” från ”quit”-åtgärden
     * hittad i funktionen strax nedanför.
     */
    static void
    quit_cb (GSimpleAction *simple,
             GVariant      *parameter,
             gpointer       user_data)
    {
      GApplication *application = user_data;
    
      g_application_quit (application);
    }
    
    /* Uppstartsfunktion för menyn vi skapar i detta exempel */
    static void
    startup (GApplication *app,
             gpointer      user_data)
    {
      GMenu *menu;
      GSimpleAction *quit_action;
    
      /* Initiera GMenu, och lägg till ett menyobjekt med etiketten ”Om” och åtgärden
       * ”win.about”. Lägg också till ett annat menyobjekt med etiketten ”Avsluta” och åtgärden
       * ”app.quit”
       */
      menu = g_menu_new ();
      g_menu_append (menu, "Om", "win.about");
      g_menu_append (menu, "Avsluta", "app.quit");
    
      /* Skapa en ny enkel åtgärd för programmet. (I detta fall är det
       * åtgärden ”quit”.
       */
      quit_action = g_simple_action_new ("quit", NULL);
    
      /* Säkerställ att menyn vi nyss skapat är inställd för det övergripande programmet */
      gtk_application_set_app_menu (GTK_APPLICATION (app), G_MENU_MODEL (menu));
    
      g_signal_connect (quit_action,
                        "activate",
                        G_CALLBACK (quit_cb),
                        app);
    
      g_action_map_add_action (G_ACTION_MAP (app), G_ACTION (quit_action));
    }
    
    /* Uppstartsfunktion för programmet */
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

note: (itstool) path: page/p (itstool) path: section/p
en: In this sample we used the following:
sv: I detta exempel använde vi följande:

[ctx: text]
note: (itstool) path: info/title
en: AboutDialog (JavaScript)
sv: AboutDialog (Javascript)

note: (itstool) path: page/p
en: A modal dialog window which shows information about an application and its creators. This one is triggered by clicking "About" in the application's menu, which is normally a good place to put it.
sv: En modal dialogruta som visar information om ett program och dess upphovsmän. Denna öppnas genom att klicka på ”Om” i programmets meny, vilket vanligtvis är en bra plats att placera den på.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class AboutDialogExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsaboutdialog',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal creates the menu and builds the UI
        _onStartup() {
            this._initMenus();
            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,
                                                       title: "AboutDialog Example",
                                                       default_height: 250,
                                                       default_width: 350 });
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
        // Create the application menu
        _initMenus() {
            let menu = new Gio.Menu();
            menu.append("About", 'app.about');
            menu.append("Quit",'app.quit');
            this.application.set_app_menu(menu);
    
            // Create the "About" menu option and have it call the _showAbout() function
            let aboutAction = new Gio.SimpleAction({ name: 'about' });
            aboutAction.connect('activate', () =&gt; { this._showAbout(); });
            this.application.add_action(aboutAction);
    
            // Create the "Quit" menu option and have it close the window
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', () =&gt; { this._window.destroy(); });
            this.application.add_action(quitAction);
        }
    
        _showAbout() {
    
            // String arrays of the names of the people involved in the project
            var authors = ["GNOME Documentation Team"];
            var documenters = ["GNOME Documentation Team"];
    
            // Create the About dialog
            let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog Example",
                                                    program_name: "GtkApplication Example",
                                                    copyright: "Copyright \xa9 2012 GNOME Documentation Team",
                                                    authors: authors,
                                                    documenters: documenters,
                                                    website: "http://developer.gnome.org",
                                                    website_label: "GNOME Developer Website" });
    
            // Attach the About dialog to the window
            aboutDialog.modal = true;
            aboutDialog.transient_for = this._window;
    
            // Show the About dialog
            aboutDialog.show();
    
            // Connect the Close button to the destroy signal for the dialog
            aboutDialog.connect('response', function() {
                aboutDialog.destroy();
            });
        }
    };
    
    // Run the application
    let app = new AboutDialogExample();
    app.application.run(ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class AboutDialogExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsaboutdialog',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal skapar menyn och bygger användargränssnittet
        _onStartup() {
            this._initMenus();
            this._buildUI();
        }
    
        // Bygg användargränssnittet
        _buildUI() {
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "AboutDialog-exempel",
                                                       default_height: 250,
                                                       default_width: 350 });
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
        // Skapa programmenyn
        _initMenus() {
            let menu = new Gio.Menu();
            menu.append("Om", 'app.about');
            menu.append("Avsluta",'app.quit');
            this.application.set_app_menu(menu);
    
            // Skapa ”Om”-menyobjektet och få det att anropa _showAbout()-funktionen
            let aboutAction = new Gio.SimpleAction({ name: 'about' });
            aboutAction.connect('activate', () =&gt; { this._showAbout(); });
            this.application.add_action(aboutAction);
    
            // Skapa ”Avsluta”-menyobjektet och få det att stänga fönstret
            let quitAction = new Gio.SimpleAction ({ name: 'quit' });
            quitAction.connect('activate', () =&gt; { this._window.destroy(); });
            this.application.add_action(quitAction);
        }
    
        _showAbout() {
    
            // Strängvektor över namnen på personerna som varit inblandade i projektet
            var authors = ["GNOME:s dokumentationsgrupp"];
            var documenters = ["GNOME:s dokumentationsgrupp"];
    
            // Skapa Om-dialogen
            let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog-exempel",
                                                    program_name: "GtkApplication-exempel",
                                                    copyright: "Copyright \xa9 2012 GNOME:s dokumentationsgrupp",
                                                    authors: authors,
                                                    documenters: documenters,
                                                    website: "http://developer.gnome.org",
                                                    website_label: "GNOME:s utvecklarwebbplats" });
    
            // Fäst Om-dialogen vid fönstret
            aboutDialog.modal = true;
            aboutDialog.transient_for = this._window;
    
            // Visa Om-dialogen
            aboutDialog.show();
    
            // Anslut stängningsknappen till destroy-signalen för dialogen
            aboutDialog.connect('response', function() {
                aboutDialog.destroy();
            });
        }
    };
    
    // Kör programmet
    let app = new AboutDialogExample();
    app.application.run(ARGV);

note: (itstool) path: info/desc
en: A window that displays information about an application
sv: Ett fönster som visar information om ett program

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu (the "about" is displayed if "About" in the menu is selected).
sv: Ett AboutDialog-exempel som använder Gtk.ApplicationWindow och Menu (”om” visas om ”Om” i menyn väljs).

note: (itstool) path: section/title
en: Code used to generate this example
sv: Kod som använts för att generera detta exempel

note: (itstool) path: section/code
en: from gi.repository import Gtk
    from gi.repository import Gio
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
         # constructor for a window (the parent window)
        def __init__(self, app):
            Gtk.Window.__init__(self, title="AboutDialog Example", application=app)
            self.set_default_size(200, 200)
    
            # create the about_action (a Gio.SimpleAction)
            about_action = Gio.SimpleAction.new("about", None)
            # connect the signal from the action to the function about_cb()
            about_action.connect("activate", self.about_cb)
            # add the action to the application
            app.add_action(about_action)
    
        # callback function for the about_action's "activate" signal
        def about_cb(self, action, parameter):
            # a  Gtk.AboutDialog
            aboutdialog = Gtk.AboutDialog()
    
            # lists of authors and documenters (will be used later)
            authors = ["GNOME Documentation Team"]
            documenters = ["GNOME Documentation Team"]
    
            # we fill in the aboutdialog
            aboutdialog.set_program_name("AboutDialog Example")
            aboutdialog.set_copyright(
                "Copyright \xc2\xa9 2012 GNOME Documentation Team")
            aboutdialog.set_authors(authors)
            aboutdialog.set_documenters(documenters)
            aboutdialog.set_website("http://developer.gnome.org")
            aboutdialog.set_website_label("GNOME Developer Website")
    
            # we do not want to show the title, which by default would be "About AboutDialog Example"
            # we have to reset the title of the messagedialog window after setting
            # the program name
            aboutdialog.set_title("")
    
            # to close the aboutdialog when "close" is clicked we connect the
            # "response" signal to on_close
            aboutdialog.connect("response", self.on_close)
            # show the aboutdialog
            aboutdialog.show()
    
        # destroy the aboutdialog
        def on_close(self, action, parameter):
            action.destroy()
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def quit_cb(self, action, parameter):
            self.quit()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
            # create a menu (a Gio.Menu)
            menu = Gio.Menu()
            # append a menu item with label "About" and action "app.about"
            menu.append("About", "app.about")
            # append a menu item with label "Quit" and action "app.quit"
            menu.append("Quit", "app.quit")
            # set menu as the menu for the application
            self.set_app_menu(menu)
    
            # a new simpleaction - for the application
            quit_action = Gio.SimpleAction.new("quit", None)
            quit_action.connect("activate", self.quit_cb)
            self.add_action(quit_action)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    from gi.repository import Gio
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
         # konstruktor för ett fönster (föräldrafönstret)
        def __init__(self, app):
            Gtk.Window.__init__(self, title="AboutDialog-exempel", application=app)
            self.set_default_size(200, 200)
    
            # skapa about_action (en Gio.SimpleAction)
            about_action = Gio.SimpleAction.new("about", None)
            # anslut signalen från åtgärden till funktionen about_cb()
            about_action.connect("activate", self.about_cb)
            # lägg till åtgärden till programmet
            app.add_action(about_action)
    
        # återanropsfunktion för about_actions ”activate”-signal
        def about_cb(self, action, parameter):
            # en Gtk.AboutDialog
            aboutdialog = Gtk.AboutDialog()
    
            # listor över upphovsmän och dokumentatörer (kommer att användas senare)
            authors = ["GNOME:s dokumentationsgrupp"]
            documenters = ["GNOME:s dokumentationsgrupp"]
    
            # vi fyller i aboutdialog
            aboutdialog.set_program_name("AboutDialog-exempel")
            aboutdialog.set_copyright(
                "Copyright \xc2\xa9 2012 GNOME:s dokumentationsgrupp")
            aboutdialog.set_authors(authors)
            aboutdialog.set_documenters(documenters)
            aboutdialog.set_website("http://developer.gnome.org")
            aboutdialog.set_website_label("GNOME:s utvecklarwebbplats")
    
            # vi vill inte visa titeln, vilken som standard hade varit ”Om AboutDialog-exempel”
            # vi måste återställa titeln för meddelandedialogfönstret efter att ha ställt in
            # programnamnet
            aboutdialog.set_title("")
    
            # för att stänga aboutdialog när ”close” klickas på ansluter vi
            # signalen ”response” till on_close
            aboutdialog.connect("response", self.on_close)
            # visa aboutdialog
            aboutdialog.show()
    
        # förstör aboutdialog
        def on_close(self, action, parameter):
            action.destroy()
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def quit_cb(self, action, parameter):
            self.quit()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
            # skapa en meny (en Gio.Menu)
            menu = Gio.Menu()
            # lägg till ett menyobjekt med etiketten ”Om” och åtgärden ”app.about”
            menu.append("Om", "app.about")
            # lägg till ett menyobjekt med etiketten ”Avsluta” och åtgärden ”app.quit”
            menu.append("Avsluta", "app.quit")
            # sätt menyn som meny för programmet
            self.set_app_menu(menu)
    
            # en ny simpleaction - för programmet
            quit_action = Gio.SimpleAction.new("quit", None)
            quit_action.connect("activate", self.quit_cb)
            self.add_action(quit_action)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for an AboutDialog widget
sv: Användbara metoder för en AboutDialog-komponent

note: (itstool) path: section/p
en: In line 15 the signal <code>"activate"</code> is connected to the callback function <code>about_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 15 ansluts signalen <code>"activate"</code> till återanropsfunktionen <code>about_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: section/title
en: API References
sv: API-referenser

note: (itstool) path: page/code
en: /* A window in the application */
    public class Window : Gtk.ApplicationWindow {
    
    	/* The constructor */
    	public Window (Application app) {
    		Object (application: app, title: "AboutDialog Example");
    
    		var about_action = new SimpleAction ("about", null);
    
    		about_action.activate.connect (this.about_cb);
    		this.add_action (about_action);
    		this.show_all ();
    	}
    
    	/* This is the callback function connected to the 'activate' signal
    	 * of the SimpleAction about_action.
    	 */
    	void about_cb (SimpleAction simple, Variant? parameter) {
    		string[] authors = { "GNOME Documentation Team", null };
    		string[] documenters = { "GNOME Documentation Team", null };
    
    		Gtk.show_about_dialog (this,
                                   "program-name", ("GtkApplication Example"),
                                   "copyright", ("Copyright \xc2\xa9 2012 GNOME Documentation Team"),
                                   "authors", authors,
                                   "documenters", documenters,
                                   "website", "http://developer.gnome.org",
                                   "website-label", ("GNOME Developer Website"),
                                   null);
    	}
    }
    
    /* This is the Application */
    public class Application : Gtk.Application {
    
    	/* Here we override the activate signal of GLib.Application */
    	protected override void activate () {
    		new Window (this);
    	}
    
    	/* Here we override the startup signal of GLib.Application */
    	protected override void startup () {
    
    		base.startup ();
    
    		var menu = new Menu ();
    		menu.append ("About", "win.about");
    		menu.append ("Quit", "app.quit");
    		this.app_menu = menu;
    
    		var quit_action = new SimpleAction ("quit", null);
    		//quit_action.activate.connect (this.quit);
    		this.add_action (quit_action);
    	}
    
    	/* The constructor */
    	public Application () {
    		Object (application_id: "org.example.application");
    	}
    }
    
    /* main function creates Application and runs it */
    int main (string[] args) {
    	return new Application ().run (args);
    }
sv: /* Ett fönster i programmet */
    public class Window : Gtk.ApplicationWindow {
    
    	/* Konstruktorn */
    	public Window (Application app) {
    		Object (application: app, title: "AboutDialog-exempel");
    
    		var about_action = new SimpleAction ("about", null);
    
    		about_action.activate.connect (this.about_cb);
    		this.add_action (about_action);
    		this.show_all ();
    	}
    
    	/* Detta är återanropsfunktionen ansluten till signalen ”activate”
    	 * för en SimpleAction med namnet about_action.
    	 */
    	void about_cb (SimpleAction simple, Variant? parameter) {
    		string[] authors = { "GNOME:s dokumentationsgrupp", null };
    		string[] documenters = { "GNOME:s dokumentationsgrupp", null };
    
    		Gtk.show_about_dialog (this,
                                   "program-name", ("GtkApplication-exempel"),
                                   "copyright", ("Copyright \xc2\xa9 2012 GNOME:s dokumentationsgrupp"),
                                   "authors", authors,
                                   "documenters", documenters,
                                   "website", "http://developer.gnome.org",
                                   "website-label", ("GNOME:s utvecklarwebbplats"),
                                   null);
    	}
    }
    
    /* Detta är programmet */
    public class Application : Gtk.Application {
    
    	/* Här åsidosätter vi ”activate”-signalen för GLib.Application */
    	protected override void activate () {
    		new Window (this);
    	}
    
    	/* Här åsidosätter vi ”startup”-signalen för GLib.Application */
    	protected override void startup () {
    
    		base.startup ();
    
    		var menu = new Menu ();
    		menu.append ("Om", "win.about");
    		menu.append ("Avsluta", "app.quit");
    		this.app_menu = menu;
    
    		var quit_action = new SimpleAction ("quit", null);
    		//quit_action.activate.connect (this.quit);
    		this.add_action (quit_action);
    	}
    
    	/* Konstruktorn */
    	public Application () {
    		Object (application_id: "org.example.application");
    	}
    }
    
    /* main-funktionen skapar Application och kör den */
    int main (string[] args) {
    	return new Application ().run (args);
    }

note: (itstool) path: info/desc
en: Coming soon...
sv: Kommer snart…

note: (itstool) path: credit/name
en: GNOME Documentation Project
sv: Dokumentationsprojekt för GNOME

note: (itstool) path: page/title
en: Audio player
sv: Ljudspelare

note: (itstool) path: info/desc
en: A beginner's guide to writing GNOME applications in JavaScript, including code samples and practice exercises.
sv: En nybörjarguide till att skriva GNOME-program i Javascript, inklusive kodexempel och övningsexempel.

note: (itstool) path: page/title
en: Tutorial for beginners and code samples
sv: Handledning för nybörjare och kodexempel

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.
sv: Javascript är ett av de mest populära programmeringsspråken på webben. Det är dock inte enbart för webben. Om du bara har en grundläggande förståelse av Javascript kan du skriva fullfjädrade program för GNOME. <link href="https://wiki.gnome.org/Apps/Documents">GNOME Dokument</link> är skrivet i Javascript, och det är även <link href="https://live.gnome.org/GnomeShell/Tour">GNOME-skalet</link>, den mest grundläggande delen av 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.
sv: GNOME-skalet är det du ser när du klickar på ”Aktiviteter” i övre vänstra hörnet på skärmen. Det styr också klockan och resten av systemraden. Förutom att visa dig hur du skriver GNOME-program, kommer dessa handledningar också att visa hur du använder Javascript för att skriva GNOME-skalsutökningar, vilka lägger till nya funktioner eller ändrar hur saker görs.

note: (itstool) path: section/title
en: Getting Started
sv: Kom igång

note: (itstool) path: section/p
en: These tutorials are designed for people who already know how to write in JavaScript, and who have GNOME installed on their computers already, but who are new to developing GNOME applications. If you don't already know JavaScript, or if you need help getting GNOME set up, take a look at these resources first:
sv: Dessa handledningar är designade för personer som redan vet hur man skriver Javascript, och som redan har GNOME installerat på sina datorer, men som är nybörjare när det gäller att utveckla GNOME-program. Om du inte redan kan Javascript, eller om du behöver hjälp med att konfigurera GNOME, använd först dessa resurser:

note: (itstool) path: item/p
en: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> is a free, Creative Commons-licensed book, which explains the basics of JavaScript programming. Since you won't be writing JavaScript for the web, you only need to read up to chapter 10 or so.
sv: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> är en gratis, Creative Commons-licensierad bok, vilken förklarar de grundläggande delarna av Javascript-programmering. Då du inte kommer att skriva Javascript för webben behöver du bara läsa fram till omkring kapitel 10.

note: (itstool) path: item/p
en: <link href="http://www.gnome.org/getting-gnome/">Download GNOME</link> as part of a distribution, like Fedora, openSUSE, or Ubuntu. Each distribution has its own instructions for how to get GNOME.
sv: <link href="http://www.gnome.org/getting-gnome/">Hämta GNOME</link> som en del av en distribution så som Fedora, openSUSE eller Ubuntu. Varje distribution har sina egna instruktioner för hur du hämtar GNOME.

note: (itstool) path: item/p
en: <link xref="set-up-gedit.js">Set up gedit</link> for writing applications. GNOME's text editor, gedit, is sometimes just called "text editor".
sv: <link xref="set-up-gedit.js">Ställ in gedit</link> för att skriva program. GNOME:s textredigerare, gedit, kallas ibland bara för ”textredigerare”.

note: (itstool) path: section/title
en: Tutorials
sv: Handledningar

note: (itstool) path: section/title
en: Code samples
sv: Kodexempel

note: (itstool) path: section/p
en: These samples show how to use widgets in your GNOME applications. Each one demonstrates a complete application which showcases the featured widget. At the end of each sample, you will find links to more detailed reference material.
sv: Dessa exempel visar hur du använder komponenter i dina GNOME-program. Varje exempel demonstrerar ett komplett program som visar upp den presenterade komponenten. I slutet på varje exempel kommer du hitta länkar till mer detaljerat referensmaterial.

note: (itstool) path: section/p
en: To run the code samples:
sv: För att köra kodexemplen:

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.js
sv: Kopiera och klistra in koden i <var>filnamn</var>.js

note: (itstool) path: item/p
en: In the terminal, type:
sv: Skriv följande i terminalen:

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

note: (itstool) path: section/title
en: Windows
sv: Fönster

note: (itstool) path: section/title
en: Display widgets
sv: Visningskomponenter

note: (itstool) path: section/title
en: Buttons and toggles
sv: Knappar och brytare

note: (itstool) path: section/title
en: Numeric and text data entry
sv: Inmatning av numeriska data och text

note: (itstool) path: section/title
en: Multiline text editor
sv: Textredigerare med flera rader

note: (itstool) path: section/title
en: Menu, combo box and toolbar widgets
sv: Komponenter för meny, kombinationsruta och verktygsfält

note: (itstool) path: section/title
en: TreeView widget
sv: TreeView-komponent

note: (itstool) path: section/title (itstool) path: steps/title
en: Selectors
sv: Väljare

note: (itstool) path: section/title
en: File selectors
sv: Filväljare

note: (itstool) path: section/title
en: Font selectors
sv: Typsnittsväljare

note: (itstool) path: section/title
en: Color Selectors
sv: Färgväljare

note: (itstool) path: section/title
en: Layout containers
sv: Layoutbehållare

note: (itstool) path: section/title
en: Ornaments
sv: Ornamentering

note: (itstool) path: section/title
en: Scrolling
sv: Rullning

note: (itstool) path: section/title
en: Miscellaneous
sv: Diverse

note: (itstool) path: section/title
en: Exercises
sv: Övningar

[ctx: text]
note: (itstool) path: info/title
en: GTK+ widgets sample code (Python)
sv: Exempelkod för GTK+-komponenter (Python)

note: (itstool) path: info/desc
en: A guide to GUI programming using GTK+, including code samples and practice exercises.
sv: En guide i GUI-programmering med GTK+, inklusive kodexempel och övningsexempel.

note: (itstool) path: page/title
en: GTK+ widgets sample code
sv: Kodexempel för GTK+-komponenter

note: (itstool) path: synopsis/p
en: If you are a beginner and you would like a tutorial to guide you step by step in an exploration of what you can do with GTK+ 3, you should go to the <link xref="tutorial.py"/> page. If you are looking for a specific widget, you can find it in the sections below.
sv: Om du är en nybörjare och vill ha en handledning som guidar dig steg för steg i att utforska vad man kan göra med GTK+ 3, bör du gå till sidan <link xref="tutorial.py"/>. Om du letar efter en specifik komponent, kan du hitta den i avsnitten nedan.

note: (itstool) path: section/title
en: Theory pages
sv: Teorisidor

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Vala)
sv: Handledning för nybörjare (Vala)

note: (itstool) path: info/desc
en: A beginner's guide to GUI programming using GTK+, including code samples and practice exercises.
sv: En nybörjarguide i GUI-programmering med GTK+, inklusive kodexempel och övningsexempel.

note: (itstool) path: synopsis/p
en: Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting to follow these tutorials, you are expected to be familiar with the following concepts:
sv: Även om dessa handledningar designats för nybörjare kan vi inte täcka allt grundläggande. Innan du börjar följa dessa handledning förväntas du vara bekant med följande koncept:

note: (itstool) path: item/p
en: Object oriented programming
sv: Objektorienterad programmering

note: (itstool) path: item/p
en: The Vala programming language:
sv: Programmeringsspråket Vala:

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Tutorial">The Vala Tutorial</link>
sv: <link href="https://live.gnome.org/Vala/Tutorial">Vala-handledningen</link>

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Sample Vala code</link>
sv: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Exempelkod för Vala</link>

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+.
sv: Genom att följa dessa handledningar kommer du att lära dig grundläggande GUI-programmering med GTK+.

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.vala
sv: Kopiera och klistra in koden i <var>filnamn</var>.vala

note: (itstool) path: item/p
en: In the terminal type:
sv: Skriv följande i terminalen:

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

note: (itstool) path: item/screen
en: ./<var>filename</var>
sv: ./<var>filnamn</var>

note: (itstool) path: info/desc
en: A button widget which emits a signal when clicked
sv: En knappkomponent vilken sänder ut en signal när den klickas på

note: (itstool) path: page/p
en: A button widget connected to a callback function that reverses its label when clicked.
sv: En knappkomponent ansluten till en återanropsfunktion som vänder på sin etikett när den klickas på.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*This is the callback function. It is a handler function which 
    reacts to the signal. In this case, it will cause the button label's 
    string to reverse.*/
    static void
    button_clicked (GtkButton *button,
                    gpointer   user_data)
    {
      const char *old_label;
      char *new_label;
    
      old_label = gtk_button_get_label (button);
      new_label = g_utf8_strreverse (old_label, -1);
    
      gtk_button_set_label (button, new_label);
      g_free (new_label);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *button;
    
      /*Create a window with a title and a default size*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "GNOME Button");
      gtk_window_set_default_size (GTK_WINDOW (window), 250, 50);
    
      /*Create a button with a label, and add it to the window*/
      button = gtk_button_new_with_label ("Click Me");
      gtk_container_add (GTK_CONTAINER (window), button);
    
      /*Connecting the clicked signal to the callback function*/
      g_signal_connect (GTK_BUTTON (button),
                        "clicked", 
                        G_CALLBACK (button_clicked), 
                        G_OBJECT (window));
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
sv: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*Detta är återanropsfunktionen. Detta är en hanterarfunktion som
    reagerar på signalen. I detta fallet kommer den att orsaka att knappens
    etikettsträng kommer att vändas på.*/
    static void
    button_clicked (GtkButton *button,
                    gpointer   user_data)
    {
      const char *old_label;
      char *new_label;
    
      old_label = gtk_button_get_label (button);
      new_label = g_utf8_strreverse (old_label, -1);
    
      gtk_button_set_label (button, new_label);
      g_free (new_label);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *button;
    
      /*Skapa ett fönster med en titel och en standardstorlek*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "GNOME Button");
      gtk_window_set_default_size (GTK_WINDOW (window), 250, 50);
    
      /*Skapa en knapp med en etikett och lägg till den till fönstret*/
      button = gtk_button_new_with_label ("Klicka på mig");
      gtk_container_add (GTK_CONTAINER (window), button);
    
      /*Ansluter signalen clicked till återanropsfunktionen*/
      g_signal_connect (GTK_BUTTON (button),
                        "clicked", 
                        G_CALLBACK (button_clicked), 
                        G_OBJECT (window));
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

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

[ctx: text]
note: (itstool) path: info/title
en: Button (JavaScript)
sv: Button (Javascript)

note: (itstool) path: info/desc
en: A button which can be connected to other widgets
sv: En knapp som kan anslutas till andra komponenter

note: (itstool) path: page/p
en: A button widget that changes its label when you click it.
sv: En knappkomponent som ändrar sin etikett när du klickar på den.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class ButtonExample {
    
        /* Create the application itself
           This boilerplate code is needed to build any GTK+ application. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present ();
        }
    
        // Callback function for 'startup' signal initializes menus and 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,
                                                                  title: "GNOME Button",
                                                                  default_height: 50,
                                                                  default_width: 250 });
    
            // Create the button
            this.Button = new Gtk.Button ({label: "Click Me"});
            this._window.add (this.Button);
    
            // Bind it to a function that says what to do when the button is clicked
            this.Button.connect ("clicked", this._clickHandler.bind(this));
    
                    // Show the window and all child widgets
                    this._window.show_all();
        }
    
        // Here's the function that says what happens when the button is clicked
        _clickHandler() {
            this.Button.set_label ("Clicked!");
        }
    };
    
    // Run the application
    let app = new ButtonExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class ButtonExample {
    
        /* Skapa programmet i sig
           Denna standardkod behövs för att bygga alla GTK+-program. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present ();
        }
    
        // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg användargränssnittet
        _buildUI() {
    
            // Skapa programfönstret
                this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                                  window_position: Gtk.WindowPosition.CENTER,
                                                                  title: "GNOME Button",
                                                                  default_height: 50,
                                                                  default_width: 250 });
    
            // Skapa knappen
            this.Button = new Gtk.Button ({label: "Klicka på mig"});
            this._window.add (this.Button);
    
            // Bind den till en funktion som säger vad som ska hände när knappen klickas på
            this.Button.connect ("clicked", this._clickHandler.bind(this));
    
                    // Visa fönstret och alla barnkomponenter
                    this._window.show_all();
        }
    
        // Här är funktionen som säger vad som ska hända när knappen klickas på
        _clickHandler() {
            this.Button.set_label ("Klickad!");
        }
    };
    
    // Kör programmet
    let app = new ButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: page/p
en: A button widget connected to a simple callback function.
sv: En knappkomponent ansluten till en enkel återanropsfunktion.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="GNOME Button", application=app)
            self.set_default_size(250, 50)
    
            # a button
            button = Gtk.Button()
            # with a label
            button.set_label("Click me")
            # connect the signal "clicked" emitted by the button
            # to the callback function do_clicked
            button.connect("clicked", self.do_clicked)
            # add the button to the window
            self.add(button)
    
        # callback function connected to the signal "clicked" of the button
        def do_clicked(self, button):
            print("You clicked me!")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # ett fönster
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="GNOME Button", application=app)
            self.set_default_size(250, 50)
    
            # en knapp
            button = Gtk.Button()
            # med en etikett
            button.set_label("Klicka på mig")
            # anslut ”clicked”-signalen som utges av knappen
            # till återanropsfunktionen do_clicked
            button.connect("clicked", self.do_clicked)
            # lägg till knappen till fönstret
            self.add(button)
    
        # återanropsfunktion ansluten till knappens signal ”clicked”
        def do_clicked(self, button):
            print("Du klickade på mig!")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a Button widget
sv: Användbara metoder för en Button-komponent

note: (itstool) path: section/p
en: In line 16 the <code>"clicked"</code> signal from the button is connected to the callback function <code>do_clicked()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 16 ansluts signalen <code>"clicked"</code> från knappen till återanropsfunktionen <code>do_clicked()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <code>set_relief(Gtk.ReliefStyle.NONE)</code> sets to none the relief style of the edges of the Gtk.Button - as opposed to <code>Gtk.ReliefStyle.NORMAL</code>.
sv: <code>set_relief(Gtk.ReliefStyle.NONE)</code> ställer reliefstilen på kanterna för vår Gtk.Button till ingen - till skillnad från <code>Gtk.ReliefStyle.NORMAL</code>.

note: (itstool) path: item/p
en: If the label of the button is a <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">stock icon</link>, <code>set_use_stock(True)</code> sets the label as the name of the corresponding stock icon.
sv: Om etiketten för knappen är en <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">standardikon</link> så ställer <code>set_use_stock(True)</code> in etiketten som namnet på motsvarande standardikon.

note: (itstool) path: item/p
en: To set an image (e.g. a stock image) for the button <code>button</code>:
sv: För att ställa in en bild (t.ex. en standardbild) för knappen <code>button</code>:

note: (itstool) path: item/p
en: You should not set a label for the button after this, otherwise it will show the label and not the image.
sv: Du bör inte ställa in en etikett för knappen efter detta, då kommer den visa etiketten och inte bilden.

note: (itstool) path: item/p
en: If we use <code>set_focus_on_click(False)</code> the button will not grab focus when it is clicked by the mouse. This could be useful in places like toolbars, so that the keyboard focus is not removed from the main area of the application.
sv: Om vi använder <code>set_focus_on_click(False)</code> kommer knappen inte fånga fokus när den klickas på med musen. Detta kan vara användbart i platser som verktygsfält, så att tangentbordsfokus inte tas bort från programmets huvudområde.

note: (itstool) path: page/title
en: Button widget
sv: Button-komponent

note: (itstool) path: page/code
en: 
    /* A window in the application */
    public class MyWindow : Gtk.ApplicationWindow {
    
    	/* The constructor of the window */
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "GNOME Button");
    
    		var button = new Gtk.Button.with_label ("Click Me");
    		button.clicked.connect (this.reverse_label);
    		button.show ();
    
    		this.window_position = Gtk.WindowPosition.CENTER;
    		this.set_default_size (250,50);
    		this.add (button);
    	}
    
    	/* The callback function connected to the
    	 * 'clicked' signal of the button.
    	 */
    	void reverse_label (Gtk.Button button) {
    		button.label = button.label.reverse ();
    	}
    }
    
    /* This is the application. */
    public class MyApplication : Gtk.Application {
    
    	/* This is the constructor */
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    
    	/* Override the activate signal of GLib.Application */
    	protected override void activate () {
    		new MyWindow (this).show ();
    	}
    }
    
    /* main creates and runs the application */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: 
    /* Ett fönster i programmet */
    public class MyWindow : Gtk.ApplicationWindow {
    
    	/* Fönstrets konstruktor */
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "GNOME Button");
    
    		var button = new Gtk.Button.with_label ("Klicka på mig");
    		button.clicked.connect (this.reverse_label);
    		button.show ();
    
    		this.window_position = Gtk.WindowPosition.CENTER;
    		this.set_default_size (250,50);
    		this.add (button);
    	}
    
    	/* Återanropsfunktionen som är ansluten
    	 * till knappens ”clicked”-signal.
    	 */
    	void reverse_label (Gtk.Button button) {
    		button.label = button.label.reverse ();
    	}
    }
    
    /* Det här är programmet. */
    public class MyApplication : Gtk.Application {
    
    	/* Det här är konstruktorn */
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    
    	/* Åsidosätt ”activate”-signalen för GLib.Application */
    	protected override void activate () {
    		new MyWindow (this).show ();
    	}
    }
    
    /* main skapar och kör programmet */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: page/p
en: In this sample we used the following: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>
sv: I detta exempel använde vi följande: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>

[ctx: text]
note: (itstool) path: info/title
en: ButtonBox (JavaScript)
sv: ButtonBox (Javascript)

note: (itstool) path: info/desc
en: A container for arranging buttons
sv: En behållare för att arrangera knappar

note: (itstool) path: page/p
en: A calculator - the buttons are enclosed in horizontal ButtonBoxes.
sv: En kalkylator - knapparna infogas i horisontella ButtonBoxar.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    
    class ButtonBoxExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsbuttonbox'
            });
    
            // 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,
                                                        title: "Calculator",
                                                        default_width: 350,
                                                        default_height: 200,
                                                        border_width: 10 });
            this.entry = new Gtk.Entry();
            this.entry.set_text('0');
            // text aligned on the right
            this.entry.set_alignment(1);
            // the text in the entry cannot be modified by writing in it
            this.entry.set_can_focus(false);
    
            // a grid
            this.grid = new Gtk.Grid();
            this.grid.set_row_spacing(5);
            
            // to attach the entry
            this.grid.attach(this.entry, 0, 0, 1, 1);
            
            // the labels for the buttons
            this.buttons = [ 7, 8, 9, '/', 4, 5, 6, '*', 1, 2, 3, '-', 'C', 0, '=', '+' ];
            
            // each row is a ButtonBox, attached to the grid            
            for (let i = 0; i &lt; 4; i++) {
                this.hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL);
                this.hbox.set_spacing(5);
                this.grid.attach(this.hbox, 0, i + 1, 1, 1);
                // each ButtonBox has 4 buttons, connected to the callback function
                for (let j= 0; j &lt; 4; j++) {
                    this.button = new Gtk.Button();
                    this.buttonLabel = (this.buttons[i * 4 + j].toString());
                    this.button.set_label(this.buttonLabel);
                    this.button.set_can_focus(false);
                    this.button.connect("clicked", this._buttonClicked.bind(this));
                    this.hbox.add(this.button);
                }
            }
                
            // some variables for the calculations
            this.firstNumber = 0;
            this.secondNumber = 0;
            this.counter = 0;
            this.operation = "";
    
            // add the grid to the window
            this.window.add(this.grid);
            this.window.show_all();
        }
    
        // callback function for all the buttons
        _buttonClicked(button) {
            this.button = button;
            // for the operations
            if (this.button.get_label() == '+') {
                this.counter += 1 
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "plus";
            }
    
            else if (this.button.get_label() == '-') {
                this.counter += 1;
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "minus";
            }
    
            else if (this.button.get_label() == '*') {
                this.counter += 1; 
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "multiplication";
            }
    
            else if (this.button.get_label() == '/') {
                this.counter += 1 
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "division";
            }
    
            // for =
            else if (this.button.get_label() == '=') {
                this._doOperation();
                this.entry.set_text(this.firstNumber.toString());
                this.counter = 1;
            }
    
            // for Cancel
            else if (this.button.get_label() == 'C') {
                this.firstNumber = 0;
                this.secondNumber = 0;
                this.counter = 0;
                this.entry.set_text('0');
                this.operation = "";
            }
    
            // for a digit button
            else {
                this.newDigit = parseInt(this.button.get_label());
                if (this.entry.get_text() == "error")
                    this.number = 0;
                else
                    this.number = parseInt(this.entry.get_text());
                this.number = this.number * 10 + this.newDigit;            
                if (this.counter == 0)
                    this.firstNumber = this.number;
                else
                    this.secondNumber = this.number;
                this.entry.set_text(this.number.toString());
            }
         }
    
         _doOperation() {
            if (this.operation == "plus") {
               this.firstNumber += this.secondNumber;
            } else if (this.operation == "minus") {
                this.firstNumber -= this.secondNumber;
            } else if (this.operation == "multiplication") {
                this.firstNumber *= this.secondNumber;
            } else if (this.operation == "division") {
                if (this.secondNumber != 0) {
                    this.firstNumber /= this.secondNumber;
                } else {
                    this.firstNumber = 0; 
                    this.secondNumber = 0;
                    this.counter = 0; 
                    this.entry.set_text("error");
                    this.operation = "";
    
                    return
                }
            } else {
                this.firstNumber = 0;
                this.secondNumber = 0;
                this.counter = 0;
                this.entry.set_text("error");
            }
        }
    };
    
    // Run the application
    let app = new ButtonBoxExample();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    
    class ButtonBoxExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsbuttonbox'
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this.window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
            // Skapa programfönstret
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "Kalkylator",
                                                        default_width: 350,
                                                        default_height: 200,
                                                        border_width: 10 });
            this.entry = new Gtk.Entry();
            this.entry.set_text('0');
            // högerjusterad text
            this.entry.set_alignment(1);
            // texten i fältet kan inte ändras genom att skriva i det
            this.entry.set_can_focus(false);
    
            // ett rutnät
            this.grid = new Gtk.Grid();
            this.grid.set_row_spacing(5);
            
            // för att fästa fältet
            this.grid.attach(this.entry, 0, 0, 1, 1);
            
            // etiketterna för knapparna
            this.buttons = [ 7, 8, 9, '/', 4, 5, 6, '*', 1, 2, 3, '-', 'C', 0, '=', '+' ];
            
            // varje rad är en ButtonBox, fäst till rutnätet            
            for (let i = 0; i &lt; 4; i++) {
                this.hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL);
                this.hbox.set_spacing(5);
                this.grid.attach(this.hbox, 0, i + 1, 1, 1);
                // varje ButtonBox har 4 knappar, anslutna till återanropsfunktionen
                for (let j= 0; j &lt; 4; j++) {
                    this.button = new Gtk.Button();
                    this.buttonLabel = (this.buttons[i * 4 + j].toString());
                    this.button.set_label(this.buttonLabel);
                    this.button.set_can_focus(false);
                    this.button.connect("clicked", this._buttonClicked.bind(this));
                    this.hbox.add(this.button);
                }
            }
                
            // några variabler för beräkningarna
            this.firstNumber = 0;
            this.secondNumber = 0;
            this.counter = 0;
            this.operation = "";
    
            // lägg till rutnätet till fönstret
            this.window.add(this.grid);
            this.window.show_all();
        }
    
        // återanropsfunktion för alla knapparna
        _buttonClicked(button) {
            this.button = button;
            // för operationerna
            if (this.button.get_label() == '+') {
                this.counter += 1 
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "plus";
            }
    
            else if (this.button.get_label() == '-') {
                this.counter += 1;
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "minus";
            }
    
            else if (this.button.get_label() == '*') {
                this.counter += 1; 
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "multiplication";
            }
    
            else if (this.button.get_label() == '/') {
                this.counter += 1 
                if (this.counter &gt; 1)
                    this._doOperation();
                this.entry.set_text('0');
                this.operation = "division";
            }
    
            // för =
            else if (this.button.get_label() == '=') {
                this._doOperation();
                this.entry.set_text(this.firstNumber.toString());
                this.counter = 1;
            }
    
            // för avbryt (C)
            else if (this.button.get_label() == 'C') {
                this.firstNumber = 0;
                this.secondNumber = 0;
                this.counter = 0;
                this.entry.set_text('0');
                this.operation = "";
            }
    
            // för en sifferknapp
            else {
                this.newDigit = parseInt(this.button.get_label());
                if (this.entry.get_text() == "error")
                    this.number = 0;
                else
                    this.number = parseInt(this.entry.get_text());
                this.number = this.number * 10 + this.newDigit;            
                if (this.counter == 0)
                    this.firstNumber = this.number;
                else
                    this.secondNumber = this.number;
                this.entry.set_text(this.number.toString());
            }
         }
    
         _doOperation() {
            if (this.operation == "plus") {
               this.firstNumber += this.secondNumber;
            } else if (this.operation == "minus") {
                this.firstNumber -= this.secondNumber;
            } else if (this.operation == "multiplication") {
                this.firstNumber *= this.secondNumber;
            } else if (this.operation == "division") {
                if (this.secondNumber != 0) {
                    this.firstNumber /= this.secondNumber;
                } else {
                    this.firstNumber = 0; 
                    this.secondNumber = 0;
                    this.counter = 0; 
                    this.entry.set_text("error");
                    this.operation = "";
    
                    return
                }
            } else {
                this.firstNumber = 0;
                this.secondNumber = 0;
                this.counter = 0;
                this.entry.set_text("error");
            }
        }
    };
    
    // Kör programmet
    let app = new ButtonBoxExample();
    app.application.run (ARGV);

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Calculator", application=app)
            self.set_default_size(350, 200)
            self.set_border_width(10)
    
            # an entry
            self.entry = Gtk.Entry()
            # with an initial text
            self.entry.set_text('0')
            # text aligned on the right
            self.entry.set_alignment(1)
            # the text in the entry cannot be modified writing in it
            self.entry.set_can_focus(False)
    
            # a grid
            grid = Gtk.Grid()
            grid.set_row_spacing(5)
    
            # to attach the entry
            grid.attach(self.entry, 0, 0, 1, 1)
    
            # the labels for the buttons
            buttons = [7, 8, 9, '/',
                       4, 5, 6, '*',
                       1, 2, 3, '-',
                       'C', 0, '=', '+']
    
            # each row is a ButtonBox, attached to the grid
            for i in range(4):
                hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL)
                hbox.set_spacing(5)
                grid.attach(hbox, 0, i + 1, 1, 1)
                # each ButtonBox has 4 buttons, connected to the callback function
                for j in range(4):
                    button = Gtk.Button(label=buttons[i * 4 + j])
                    button.set_can_focus(False)
                    button.connect("clicked", self.button_clicked)
                    hbox.add(button)
    
            # some variables for the calculations
            self.first_number = 0
            self.second_number = 0
            self.counter = 0
            self.operation = ""
    
            # add the grid to the window
            self.add(grid)
    
        # callback function for all the buttons
        def button_clicked(self, button):
            # for the operations
            if button.get_label() == '+':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "plus"
            elif button.get_label() == '-':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "minus"
            elif button.get_label() == '*':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "multiplication"
            elif button.get_label() == '/':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "division"
            # for =
            elif button.get_label() == '=':
                self.do_operation()
                self.entry.set_text(str(self.first_number))
                self.counter = 1
            # for Cancel
            elif button.get_label() == 'C':
                self.first_number = 0
                self.second_number = 0
                self.counter = 0
                self.entry.set_text('')
                self.operation = ""
            # for a digit button
            else:
                new_digit = int(button.get_label())
                if self.entry.get_text() == 'error':
                    number = 0
                else:
                    number = int(self.entry.get_text())
                number = number * 10 + new_digit
                if self.counter == 0:
                    self.first_number = number
                else:
                    self.second_number = number
                self.entry.set_text(str(number))
    
        def do_operation(self):
            if self.operation == "plus":
                self.first_number += self.second_number
            elif self.operation == "minus":
                self.first_number -= self.second_number
            elif self.operation == "multiplication":
                self.first_number *= self.second_number
            elif self.operation == "division":
                try:
                    self.first_number /= self.second_number
                except ZeroDivisionError:
                    self.first_number = 0
                    self.second_number = 0
                    self.counter = 0
                    self.entry.set_text('error')
                    self.operation = ""
                    return
            else:
                self.first_number = 0
                self.second_number = 0
                self.counter = 0
                self.entry.set_text('error')
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Kalkylator", application=app)
            self.set_default_size(350, 200)
            self.set_border_width(10)
    
            # ett fält
            self.entry = Gtk.Entry()
            # med en initial text
            self.entry.set_text('0')
            # text högerjusterad
            self.entry.set_alignment(1)
            # texten i fältet kan inte ändras genom att skriva i det
            self.entry.set_can_focus(False)
    
            # ett rutnät
            grid = Gtk.Grid()
            grid.set_row_spacing(5)
    
            # för att fästa rutnätet
            grid.attach(self.entry, 0, 0, 1, 1)
    
            # etiketterna för knapparna
            buttons = [7, 8, 9, '/',
                       4, 5, 6, '*',
                       1, 2, 3, '-',
                       'C', 0, '=', '+']
    
            # varje rad är en ButtonBox, fäst vid rutnätet
            for i in range(4):
                hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL)
                hbox.set_spacing(5)
                grid.attach(hbox, 0, i + 1, 1, 1)
                # varje ButtonBox har 4 knappar, anslutna till återanropsfunktionen
                for j in range(4):
                    button = Gtk.Button(label=buttons[i * 4 + j])
                    button.set_can_focus(False)
                    button.connect("clicked", self.button_clicked)
                    hbox.add(button)
    
            # några variabler för beräkningarna
            self.first_number = 0
            self.second_number = 0
            self.counter = 0
            self.operation = ""
    
            # lägg till rutnätet till fönstret
            self.add(grid)
    
        # återanropsfunktion för alla knapparna
        def button_clicked(self, button):
            # för operationerna
            if button.get_label() == '+':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "plus"
            elif button.get_label() == '-':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "minus"
            elif button.get_label() == '*':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "multiplication"
            elif button.get_label() == '/':
                self.counter += 1
                if self.counter &gt; 1:
                    self.do_operation()
                self.entry.set_text('0')
                self.operation = "division"
            # för =
            elif button.get_label() == '=':
                self.do_operation()
                self.entry.set_text(str(self.first_number))
                self.counter = 1
            # för avbryt (C)
            elif button.get_label() == 'C':
                self.first_number = 0
                self.second_number = 0
                self.counter = 0
                self.entry.set_text('')
                self.operation = ""
            # för en sifferknapp
            else:
                new_digit = int(button.get_label())
                if self.entry.get_text() == 'error':
                    number = 0
                else:
                    number = int(self.entry.get_text())
                number = number * 10 + new_digit
                if self.counter == 0:
                    self.first_number = number
                else:
                    self.second_number = number
                self.entry.set_text(str(number))
    
        def do_operation(self):
            if self.operation == "plus":
                self.first_number += self.second_number
            elif self.operation == "minus":
                self.first_number -= self.second_number
            elif self.operation == "multiplication":
                self.first_number *= self.second_number
            elif self.operation == "division":
                try:
                    self.first_number /= self.second_number
                except ZeroDivisionError:
                    self.first_number = 0
                    self.second_number = 0
                    self.counter = 0
                    self.entry.set_text('error')
                    self.operation = ""
                    return
            else:
                self.first_number = 0
                self.second_number = 0
                self.counter = 0
                self.entry.set_text('error')
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a ButtonBox widget
sv: Användbara metoder för en ButtonBox-komponent

note: (itstool) path: item/p
en: The layout of the ButtonBox are set with <code>set_layout(layout)</code>, where <code>layout</code> can be <code>Gtk.ButtonBoxStyle.SPREAD</code> (buttons are evenly spread across the box), <code>Gtk.ButtonBoxStyle.EDGE</code> (buttons are placed at the edges of the box), <code>Gtk.ButtonBoxStyle.START</code> (buttons are grouped towards the start of the box), <code>Gtk.ButtonBoxStyle.END</code> (buttons are grouped towards the end of the box), <code>Gtk.ButtonBoxStyle.CENTER</code> (buttons are centered in the box).
sv: Layouten för ButtonBoxen ställs in med <code>set_layout(layout)</code>, där <code>layout</code> kan vara <code>Gtk.ButtonBoxStyle.SPREAD</code> (knappar fördelas jämnt över rutan), <code>Gtk.ButtonBoxStyle.EDGE</code> (knappar placeras i rutans kanter), <code>Gtk.ButtonBoxStyle.START</code> (knappar grupperas mot starten på rutan), <code>Gtk.ButtonBoxStyle.END</code> (knappar grupperas mot slutet på rutan), <code>Gtk.ButtonBoxStyle.CENTER</code> (knappar centreras i rutan).

note: (itstool) path: item/p
en: <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> sets whether the child is exempted from homogeneous sizing. Default value is <code>False</code>.
sv: <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> ställer in huruvida barnet undantas från homogen omformning. Standardvärdet är <code>False</code>.

note: (itstool) path: item/p
en: <code>set_spacing(spacing)</code> sets the spacing, in pixels, between the buttons of the box.
sv: <code>set_spacing(utrymme)</code> ställer in utrymmet, i bildpunkter, mellan rutans knappar.

note: (itstool) path: credit/name
en: Bastian Ilso
sv: Bastian Ilsø

note: (itstool) path: info/desc
en: Tutorials and code samples in C.
sv: Handledningar och kodexempel i C.

note: (itstool) path: page/title
en: Platform Demos in C
sv: Plattformsdemonstrationer i C

note: (itstool) path: section/title
en: Prerequisites
sv: Förutsättningar

note: (itstool) path: section/p
en: To compile these platform demos you will need a C compiler, for example <link href="https://gcc.gnu.org/">gcc</link>. You will also need GTK+ 3 including headers and pkg-config files. Linux distributions usually abstract GTK+ 3 headers and pkg-config files into separate packages called <em>gtk3-devel</em>, <em>gtk3-dev</em> or similar.
sv: För att kompilera dessa plattformsdemonstrationer kommer du behöva en C-kompilator, till exempel <link href="https://gcc.gnu.org/">gcc</link>. Du kommer också behöva GTK+ 3 med headerfiler och pkg-config-filer. Linuxdistributioner abstraherar vanligen GTK+ 3-headerfiler och pkg-config-filer till separata paket som heter <em>gtk3-devel</em>, <em>gtk3-dev</em> eller liknande.

note: (itstool) path: section/title
en: Guidelines for new developers
sv: Riktlinjer för nya utvecklare

note: (itstool) path: section/p
en: Beyond the prerequisites mentioned above, several tools has been developed to assist you further in developing your GNOME application. GNOME also recommends a specific coding style and conventions which this section will elaborate further upon.
sv: Förutom förutsättningarna som nämnts ovan har flera verktyg utvecklats för att hjälpa dig vidare i att utveckla ditt GNOME-program. GNOME rekommenderar även en specifik kodstil och konventioner som detta avsnitt kommer gå in närmare på.

note: (itstool) path: section/title
en: Recommended tools
sv: Rekommenderade verktyg

note: (itstool) path: item/p
en: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: An API documentation browser for GNOME.
sv: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: En API-dokumentationsbläddrare för GNOME.

note: (itstool) path: item/p
en: A GNOME IDE (Integrated Development Environment). An IDE can assist you in writing and debugging C code, for example <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> or <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.
sv: Ett GNOME-IDE (Integrated Development Environment, Integrerad utvecklingsmiljö). Ett IDE kan hjälpa dig med att skriva och felsöka C-kod, till exempel <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> eller <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.

note: (itstool) path: item/p
en: <link href="http://glade.gnome.org/">Glade</link>: A user interface designer for GTK+ Applications.
sv: <link href="http://glade.gnome.org/">Glade</link>: En användargränssnittsdesigner för GTK+-program.

note: (itstool) path: item/p
en: An IRC Client, for example <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> or <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. If you run into problems while following the beginner tutorials, join #gnome on <em>irc.gnome.org</em>.
sv: En IRC-klient, till exempel <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> eller <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. Om du stöter på problem medan du följer nybörjarhandledningarna kan du gå in i #gnome på <em>irc.gnome.org</em>.

note: (itstool) path: section/title
en: Coding Style
sv: Kodstil

note: (itstool) path: section/p
en: Most applications in the GNOME project is written in the <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU style</link> of indentation. The tutorials and code examples presented are following this convention and you are recommended to do so too.
sv: De flesta program i GNOME-projektet är skrivna i <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU-stilen</link> för indentering. Handledningarna och kodexemplen som presenteras följer denna konvention och du rekommenderas att också göra det.

note: (itstool) path: section/title
en: Executing Code
sv: Köra kod

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.c
sv: Kopiera och klistra in koden i <var>filnamn</var>.c

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

note: (itstool) path: note/p
en: For more information about compiling GTK+ programs see <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compiling GTK+ Applications on UNIX</link>.
sv: För mer information om att kompilera GTK+-program, se <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Kompilera GTK+-program i UNIX</link>.

note: (itstool) path: section/title
en: Widget Code Examples
sv: Kodexempel för gränssnittskomponenter

note: (itstool) path: info/desc
en: Create widgets with a discrete ToggleButton
sv: Skapa komponenter med en diskret ToggleButton

note: (itstool) path: page/p
en: This CheckButton toggles the title.
sv: Denna CheckButton visar/döljer titeln.

note: (itstool) path: page/code
en: #include &lt;gtk/gtk.h&gt;
    
    /* signal handler for "toggled" signal of the CheckButton */
    static void
    toggled_cb (GtkToggleButton *toggle_button,
                gpointer         user_data)
    {
      GtkWindow *window = user_data;
    
      if (gtk_toggle_button_get_active (toggle_button))
          gtk_window_set_title (window, "CheckButton Example");
      else
          gtk_window_set_title (window, "");
    }
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *checkbutton;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "CheckButton Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
    
      checkbutton = gtk_check_button_new_with_label ("Show Title");
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (checkbutton), TRUE);
      g_signal_connect (GTK_TOGGLE_BUTTON (checkbutton), "toggled", G_CALLBACK (toggled_cb), window);
      gtk_container_add (GTK_CONTAINER (window), checkbutton);
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.example.checkbutton", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
sv: #include &lt;gtk/gtk.h&gt;
    
    /* signalhanterare för ”toggled”-signalen för vår CheckButton */
    static void
    toggled_cb (GtkToggleButton *toggle_button,
                gpointer         user_data)
    {
      GtkWindow *window = user_data;
    
      if (gtk_toggle_button_get_active (toggle_button))
          gtk_window_set_title (window, "CheckButton-exempel");
      else
          gtk_window_set_title (window, "");
    }
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *checkbutton;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "CheckButton-exempel");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
    
      checkbutton = gtk_check_button_new_with_label ("Visa titel");
      gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (checkbutton), TRUE);
      g_signal_connect (GTK_TOGGLE_BUTTON (checkbutton), "toggled", G_CALLBACK (toggled_cb), window);
      gtk_container_add (GTK_CONTAINER (window), checkbutton);
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.example.checkbutton", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: CheckButton (JavaScript)
sv: CheckButton (Javascript)

note: (itstool) path: info/desc
en: A box which can be checked or unchecked
sv: En ruta som kan vara ikryssad eller inte

note: (itstool) path: page/p
en: This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.
sv: Detta program har en CheckButton. huruvida rutan är ikryssad bestämmer huruvida fönstrets namnlist visar något.

note: (itstool) path: page/p
en: A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.
sv: En CheckButton skickar signalen ”toggled” när den kryssas i eller kryssas ur. Då den är ikryssad är egenskapen ”active” true (sant). Då den inte är det så har ”active” värdet false (falskt).

note: (itstool) path: section/title
en: Libraries to import
sv: Bibliotek att importera

note: (itstool) path: section/p
en: These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
sv: Detta är biblioteken som vi behöver importera för att detta program ska köras. Kom ihåg att raden som säger till GNOME att vi använder Gjs alltid behöver vara först.

note: (itstool) path: section/title
en: Creating the application window
sv: Skapa programfönstret

note: (itstool) path: section/code
en: 
    class CheckButtonExample {
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jscheckbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI ();
        }
sv: 
    class CheckButtonExample {
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jscheckbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI ();
        }

note: (itstool) path: section/p
en: All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen CheckButtonExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

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,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "CheckButton Example"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "CheckButton-exempel"});

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into.
sv: _buildUI-funktionen är var vi stoppar all kod för att skapa programmets användargränssnitt. Det första steget är att skapa ett nytt <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> att stoppa alla våra komponenter i.

note: (itstool) path: section/title
en: Creating the checkbutton
sv: Skapa kryssrutan

note: (itstool) path: section/code
en: 
            // Create the check button
            this._button = new Gtk.CheckButton ({label: "Show Title"});
            this._window.add (this._button);
    
            // Have the check button be checked by default
            this._button.set_active (true);
    
            // Connect the button to a function that does something when it's toggled
            this._button.connect ("toggled", this._toggledCB.bind(this));
sv: 
            // Skapa kryssrutan
            this._button = new Gtk.CheckButton ({label: "Visa titel"});
            this._window.add (this._button);
    
            // Låt kryssrutan vara ikryssad som standard
            this._button.set_active (true);
    
            // Anslut knappen till en funktion som gör något då den växlar tillstånd
            this._button.connect ("toggled", this._toggledCB.bind(this));

note: (itstool) path: section/p
en: This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.
sv: Denna kod skapar själva kryssrutan. Etiketten intill kryssrutan skapas genom att ge kryssrutan egenskapen ”label” och tilldela den ett strängvärde. Då denna kryssruta växlar huruvida fönstertiteln är på eller av, och fönstertiteln kommer vara på till en början, så vill vi att rutan ska vara ikryssad som standard. Närhelst användaren kryssar i eller kryssar ur rutan anropar vi funktionen _toggledCB.

note: (itstool) path: section/code
en: 
            // Show the window and all child widgets
            this._window.show_all();
        }
sv: 
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }

note: (itstool) path: section/p
en: This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).
sv: Denna kod slutför skapandet av användargränssnittet, genom att säga till fönstret att visa sig själv och alla barnkomponenter (vilket bara är kryssrutan i det här fallet).

note: (itstool) path: section/title
en: Function which handles the checkbutton's toggling
sv: Funktion som hanterar kryssrutans växlande av tillstånd

note: (itstool) path: section/code
en: 
        _toggledCB() {
    
            // Make the window title appear or disappear when the checkbox is toggled
            if (this._button.get_active() == true)
                this._window.set_title ("CheckButton Example");
            else
                this._window.set_title ("");
    
        }
    
    };
sv: 
        _toggledCB() {
    
            // Få fönstertiteln att visas eller försvinna då kryssrutan växlar tillstånd
            if (this._button.get_active() == true)
                this._window.set_title ("CheckButton-exempel");
            else
                this._window.set_title ("");
    
        }
    
    };

note: (itstool) path: section/p
en: If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.
sv: Om kryssrutan växlas från på till av vill vi att fönstertiteln ska försvinna. Om den växlas från av till på vill vi att den ska dyka upp igen. Vi kan se vilken väg den växlades genom att testa för att se om den är aktiv (ikryssad) eller inte efteråt. En enkel if / else-sats som anropar kryssrutans get_active()-metod kommer fungera för detta.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new CheckButtonExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new CheckButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda CheckButtonExample-klassen, och startar programmet.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    
    class CheckButtonExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jscheckbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI();
        }
    
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "CheckButton Example"});
    
            // Create the check button
            this._button = new Gtk.CheckButton ({label: "Show Title"});
            this._window.add (this._button);
    
            // Have the check button be checked by default
            this._button.set_active (true);
    
            // Connect the button to a function that does something when it's toggled
            this._button.connect ("toggled", this._toggledCB.bind(this));
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
        _toggledCB() {
    
            // Make the window title appear or disappear when the checkbox is toggled
            if (this._button.get_active() == true)
                this._window.set_title ("CheckButton Example");
            else
                this._window.set_title ("");
    
        }
    
    };
    
    // Run the application
    let app = new CheckButtonExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    
    class CheckButtonExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jscheckbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "CheckButton-exempel"});
    
            // Skapa kryssrutan
            this._button = new Gtk.CheckButton ({label: "Visa titel"});
            this._window.add (this._button);
    
            // Låt kryssrutan vara ikryssad som standard
            this._button.set_active (true);
    
            // Anslut kryssrutan till en funktion som gör något då den växlar tillstånd
            this._button.connect ("toggled", this._toggledCB.bind(this));
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
        _toggledCB() {
    
            // Få fönstertieln att visas eller försvinna då kryssrutan växlar tillstånd
            if (this._button.get_active() == true)
                this._window.set_title ("CheckButton-exempel");
            else
                this._window.set_title ("");
    
        }
    
    };
    
    // Kör programmet
    let app = new CheckButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: In-depth documentation
sv: Djupgående dokumentation

note: (itstool) path: info/desc
en: A toggle button in a window
sv: En växlingsknapp i ett fönster

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="CheckButton Example", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # a new checkbutton
            button = Gtk.CheckButton()
            #  with a label
            button.set_label("Show Title")
            # connect the signal "toggled" emitted by the checkbutton
            # with the callback function toggled_cb
            button.connect("toggled", self.toggled_cb)
            # by default, the checkbutton is active
            button.set_active(True)
    
            # add the checkbutton to the window
            self.add(button)
    
        # callback function
        def toggled_cb(self, button):
            # if the togglebutton is active, set the title of the window
            # as "Checkbutton Example"
            if button.get_active():
                self.set_title("CheckButton Example")
            # else, set it as "" (empty string)
            else:
                self.set_title("")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="CheckButton-exempel", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # en ny kryssruta
            button = Gtk.CheckButton()
            #  med en etikett
            button.set_label("Visa titel")
            # anslut signalen ”toggled” som utges av kryssrutan
            # med återanropsfunktionen toggled_cb
            button.connect("toggled", self.toggled_cb)
            # som standard är kryssrutan aktiv
            button.set_active(True)
    
            # lägg till kryssrutan till fönstret
            self.add(button)
    
        # återanropsfunktion
        def toggled_cb(self, button):
            # om växlingsknappen är aktiv, ställ in fönstrets titel
            # till "Checkbutton-exempel"
            if button.get_active():
                self.set_title("CheckButton-exempel")
            # ställ annars in den till "" (tom sträng)
            else:
                self.set_title("")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a CheckButton widget
sv: Användbara metoder för en CheckButton-komponent

note: (itstool) path: section/p
en: In line 17 the <code>"toggled"</code> signal is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 17 ansluts signalen <code>"toggled"</code> till återanropsfunktionen <code>toggled_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: info/desc
en: Create widgets with a discrete toggle button
sv: Skapa komponenter med en diskret växlingsknapp

note: (itstool) path: page/code
en: /* A window in the application */
    class MyWindow : Gtk.ApplicationWindow {
    
    	/* The constructor */
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "CheckButton Example");
    
    		this.set_default_size (300, 100);
    		this.border_width = 10;
    
    		var checkbutton = new Gtk.CheckButton.with_label ("Show Title");
    
    		/* Connect the checkbutton to the
    		 * callback function (aka. signal handler).
    		 */
    		checkbutton.toggled.connect (this.toggled_cb);
    
    		/* Add the button to the this window */
    		this.add (checkbutton);
    
    		checkbutton.set_active (true);
    		checkbutton.show ();
    	}
    
    	/* The signal handler for the 'toggled' signal of the checkbutton. */
    	void toggled_cb (Gtk.ToggleButton checkbutton) {
    		if (checkbutton.get_active())
    			this.set_title ("CheckButton Example");
    		else
    			this.set_title ("");
    	}
    }
    
    /* This is the application */
    class MyApplication : Gtk.Application {
    
    	/* The constructor */
    	internal MyApplication () {
    		Object (application_id: "org.example.checkbutton");
    	}
    
    	/* Override the activate signal of GLib.Application */
    	protected override void activate () {
    		new MyWindow (this).show ();
    	}
    
    }
    
    /* main creates and runs the application */
    int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: /* Ett fönster i programmet */
    class MyWindow : Gtk.ApplicationWindow {
    
    	/* Konstruktorn */
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "CheckButton-exempel");
    
    		this.set_default_size (300, 100);
    		this.border_width = 10;
    
    		var checkbutton = new Gtk.CheckButton.with_label ("Visa titel");
    
    		/* Anslut kryssrutan till
    		 * återanropsfunktionen (även kallad signalhanterare).
    		 */
    		checkbutton.toggled.connect (this.toggled_cb);
    
    		/* Lägger till knappen till detta fönster */
    		this.add (checkbutton);
    
    		checkbutton.set_active (true);
    		checkbutton.show ();
    	}
    
    	/* Signalhanteraren för kryssrutans ”toggled”-signal. */
    	void toggled_cb (Gtk.ToggleButton checkbutton) {
    		if (checkbutton.get_active())
    			this.set_title ("CheckButton-exempel");
    		else
    			this.set_title ("");
    	}
    }
    
    /* Det här är programmet */
    class MyApplication : Gtk.Application {
    
    	/* Konstruktorn */
    	internal MyApplication () {
    		Object (application_id: "org.example.checkbutton");
    	}
    
    	/* Åsidosätt ”activate”-signalen för GLib.Application */
    	protected override void activate () {
    		new MyWindow (this).show ();
    	}
    
    }
    
    /* main skapar och kör programmet */
    int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: ColorButton (JavaScript)
sv: ColorButton (Javascript)

note: (itstool) path: info/desc
en: A button to launch a color selection dialog
sv: En knapp för att starta en färgvalsdialog

note: (itstool) path: page/p
en: This ColorButton launches a color selection dialog and prints in the terminal the RGB values of the color selected.
sv: Denna ColorButton startar en färgvalsdialog och skriver i terminalen RGB-värdena på färgen som väljs.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gdk = '3.0';
    imports.gi.versions.Gtk = '3.0';
    
    const Gdk = imports.gi.Gdk;
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    
    class ColorbuttonExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application ({ application_id: 'org.example.jscolorbutton' });
    
            // 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,
                                                       title: "ColorButton",
                                                       default_width: 150,
                                                       default_height: 50,
                                                       border_width: 10 });
    
            this.button = new Gtk.ColorButton();
            this.color = new Gdk.RGBA();
            this.color.red = 0.0;
            this.color.green = 0.0;
            this.color.blue = 1.0;
            this.color.alpha = 0.5;
            this.button.set_rgba(this.color);
            this.button.connect("color-set", this.onColorChosen.bind(this));
            this.label = new Gtk.Label();
            this.label.set_text("Click to choose a color");
    
            let grid = new Gtk.Grid();
            grid.attach(this.button, 0, 0, 2, 1);
            grid.attach(this.label, 0, 1, 2, 1);
            this.window.add(grid);
            this.window.show_all();
        }
    
        onColorChosen() {
            let colorName = this.color.to_string();
            this.label.set_text("You chose the color " + colorName);
        }
    };
    
    // Run the application
    let app = new ColorbuttonExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gdk = '3.0';
    imports.gi.versions.Gtk = '3.0';
    
    const Gdk = imports.gi.Gdk;
    const GObject = imports.gi.GObject;
    const Gtk = imports.gi.Gtk;
    
    class ColorbuttonExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application ({ application_id: 'org.example.jscolorbutton' });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this.window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this.window = new Gtk.ApplicationWindow ({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "ColorButton",
                                                       default_width: 150,
                                                       default_height: 50,
                                                       border_width: 10 });
    
            this.button = new Gtk.ColorButton();
            this.color = new Gdk.RGBA();
            this.color.red = 0.0;
            this.color.green = 0.0;
            this.color.blue = 1.0;
            this.color.alpha = 0.5;
            this.button.set_rgba(this.color);
            this.button.connect("color-set", this.onColorChosen.bind(this));
            this.label = new Gtk.Label();
            this.label.set_text("Klicka för att välja en färg");
    
            let grid = new Gtk.Grid();
            grid.attach(this.button, 0, 0, 2, 1);
            grid.attach(this.label, 0, 1, 2, 1);
            this.window.add(grid);
            this.window.show_all();
        }
    
        onColorChosen() {
            let colorName = this.color.to_string();
            this.label.set_text("Du valde färgen " + colorName);
        }
    };
    
    // Kör programmet
    let app = new ColorbuttonExample ();
    app.application.run (ARGV);

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

note: (itstool) path: section/title
en: Useful methods for a ColorButton widget
sv: Användbara metoder för en ColorButton-komponent

note: (itstool) path: section/p
en: <code>set_color(color)</code>, where the <code>color</code> is defined as in the example, sets the color of the ColorButton, which by default is black. <code>get_color()</code> returns the color.
sv: <code>set_color(color)</code>, där <code>color</code> definieras som i exemplet, ställer in färgen för vår ColorButton, vilken som standard är svart. <code>get_color()</code> returnerar färgen.

note: (itstool) path: section/p
en: In line 23 the <code>"color-set"</code> signal is connected to the callback function <code>on_color_chosen()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 23 ansluts signalen <code>"color-set"</code> till återanropsfunktionen <code>on_color_chosen()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: page/p
en: RGB values of the selected color are shown in the label.
sv: RGB-värden för den valda färgen visas i etiketten.

[ctx: text]
note: (itstool) path: info/title
en: ComboBoxText (JavaScript)
sv: ComboBoxText (Javascript)

note: (itstool) path: info/desc
en: A text-only drop-down menu
sv: En rullgardinsmeny med bara text

note: (itstool) path: note/p
en: Unless you need the added features of a full ComboBox, or are comfortable working with ListStores and TreeStores, you may find it a lot simpler to use a ComboBoxText whenever possible.
sv: Om du inte behöver de extra funktionerna hos en fullständig ComboBox, eller inte är bekväm med att jobba med ListStore och TreeStore, så kan du finna det mycket enklare att använda en ComboBoxText närhelst möjligt.

note: (itstool) path: section/code
en: 
    const ComboBoxTextExample = new Lang.Class ({
        Name: 'ComboBoxText Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jscomboboxtext'});
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
sv: 
    const ComboBoxTextExample = new Lang.Class ({
        Name: 'ComboBoxText-exempel',
    
        // Skapa programmet i sig
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jscomboboxtext'});
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate: function () {
            this._window.present ();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function () {
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen MessageDialogExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Welcome to GNOME",
                default_width: 200,
                border_width: 10 });
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function () {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Välkommen till GNOME",
                default_width: 200,
                border_width: 10 });

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our widgets into.
sv: _buildUI-funktionen är var vi stoppar all kod för att skapa programmets användargränssnitt. Det första steget är att skapa ett nytt <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> att stoppa alla våra komponenter i.

note: (itstool) path: section/title
en: Creating the ComboBoxText
sv: Skapa vår ComboBoxText

note: (itstool) path: section/code
en: 
            // Create the combobox
            this._comboBoxText = new Gtk.ComboBoxText();
    
            // Populate the combobox
            let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
            for (let i = 0; i &lt; distros.length; i++)
                this._comboBoxText.append_text (distros[i]);
            this._comboBoxText.set_active (0);
    
            // Connect the combobox's 'changed' signal to our callback function
            this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));
sv: 
            // Skapa kombinationsrutan
            this._comboBoxText = new Gtk.ComboBoxText();
    
            // Fyll kombinationsrutan
            let distros = ["Välj distribution", "Fedora", "Mint", "Suse"];
            for (let i = 0; i &lt; distros.length; i++)
                this._comboBoxText.append_text (distros[i]);
            this._comboBoxText.set_active (0);
    
            // Anslut kombinationsrutans ”changed”-signal till vår återanropsfunktion
            this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));

note: (itstool) path: section/code
en: 
            // Add the combobox to the window
            this._window.add (this._comboBoxText);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
sv: 
            // Lägg till kombinationsrutan till fönstret
            this._window.add (this._comboBoxText);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/title
en: Function which handles your selection
sv: Funktion som hanterar ditt val

note: (itstool) path: section/code
en: 
        _onComboChanged: function () {
    
            // The responses we'll use for our messagedialog
            let responses = ["",
                "Fedora is a community distro sponsored by Red Hat.",
                "Mint is a popular distro based on Ubuntu.",
                "SUSE is a name shared by two separate distros."];
sv: 
        _onComboChanged: function () {
    
            // Svaren som vi kommer använda för vår meddelandedialog
            let responses = ["",
                "Fedora är en gemenskapsdistribution sponsrad av Red Hat.",
                "Mint är en populär distribution baserad på Ubuntu.",
                "SUSE är ett namn som delas av två olika distributioner."];

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new ComboBoxTextExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new ComboBoxTextExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxTextExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda ComboBoxTextExample-klassen, och startar programmet.

note: (itstool) path: info/desc
en: A widget used to choose from a list of items
sv: En komponent som används för att välja från en lista objekt

note: (itstool) path: page/p
en: This ComboBox prints to the terminal when you change your selection.
sv: Denna ComboBox skriver till terminalen då du ändrar ditt val.

[ctx: text]
note: (itstool) path: info/title
en: ComboBox (JavaScript)
sv: ComboBox (Javascript)

note: (itstool) path: info/desc
en: A customizable drop-down menu
sv: En anpassningsbar rullgardinsmeny

note: (itstool) path: section/code
en: 
    class ComboBoxExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jscombobox'});
    
            // 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 ();
        }
sv: 
    class ComboBoxExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jscombobox'});
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present ();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI ();
        }

note: (itstool) path: section/p
en: All the code for this sample goes in the ComboBoxExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen ComboBoxExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

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,
                title: "Welcome to GNOME",
                default_width: 200,
                border_width: 10 });
sv: 
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Välkommen till GNOME",
                default_width: 200,
                border_width: 10 });

note: (itstool) path: section/title
en: Creating the ListStore
sv: Skapa vår ListStore

note: (itstool) path: section/p
en: This ListStore works like the one used in the <link xref="treeview_simple_liststore.js">TreeView</link> example. We're giving it two columns, both strings, because one of them will contain the names of <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock Gtk icons</link>.
sv: Denna ListStore fungerar som den som användes i <link xref="treeview_simple_liststore.js">TreeView</link>-exemplet. Vi ger den två kolumner, båda strängar, eftersom en av dem kommer innehålla namnen på <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">Gtk-standardikoner</link>.

note: (itstool) path: item/p
en: <file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal point)
sv: <file>GObject.TYPE_FLOAT</file> -- Ett flyttal (ett med decimaltecken)

note: (itstool) path: item/p
en: <file>GObject.TYPE_STRING</file> -- A string of letters and numbers
sv: <file>GObject.TYPE_STRING</file> -- En sträng med bokstäver och siffror

note: (itstool) path: note/p
en: "Select" isn't really an option so much as an invitation to click on our ComboBox, so it doesn't need an icon.
sv: ”Välj” är egentligen inte ett alternativ utan mer en inbjudan att klicka på vår ComboBox, så den behöver ingen ikon.

note: (itstool) path: section/code
en: 
            // Create the combobox
            this._comboBox = new Gtk.ComboBox({
                model: this._listStore});
sv: 
            // Skapa kombinationsrutan
            this._comboBox = new Gtk.ComboBox({
                model: this._listStore});

note: (itstool) path: section/code
en: 
            // Set the first row in the combobox to be active on startup
            this._comboBox.set_active (0);
    
            // Connect the combobox's 'changed' signal to our callback function
            this._comboBox.connect ('changed', this._onComboChanged.bind(this));
sv: 
            // Ställ in den första raden i kombinationsrutan att vara aktiv vid uppstart
            this._comboBox.set_active (0);
    
            // Anslut kombinationsrutans ”changed”-signal till vår återanropsfunktion
            this._comboBox.connect ('changed', this._onComboChanged.bind(this));

note: (itstool) path: section/code
en: 
            // Add the combobox to the window
            this._window.add (this._comboBox);
    
            // Show the window and all child widgets
            this._window.show_all();
        }
sv: 
            // Lägg till kombinationsrutan till fönstret
            this._window.add (this._comboBox);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new ComboBoxExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new ComboBoxExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda ComboBoxExample-klassen, och startar programmet.

note: (itstool) path: page/title
en: ComboBox (one column)
sv: ComboBox (en kolumn)

note: (itstool) path: page/p
en: This ComboBox prints to the terminal your selection when you change it.
sv: Denna ComboBox skriver ditt val till terminalen då du ändrar det.

note: (itstool) path: section/title
en: Useful methods for a ComboBox widget
sv: Användbara metoder för en ComboBox-komponent

note: (itstool) path: section/p
en: In line 35 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 35 ansluts signalen <code>"changed"</code> till återanropsfunktionen <code>on_changed()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <link href="https://gitlab.gnome.org/GNOME/pygobject/blob/master/gi/overrides/Gtk.py">pygobject - Python bindings for GObject Introspection</link>
sv: <link href="https://gitlab.gnome.org/GNOME/pygobject/blob/master/gi/overrides/Gtk.py">pygobject - Python-bindningar för GObject Introspection</link>

note: (itstool) path: page/title
en: ComboBox (two columns)
sv: ComboBox (två kolumner)

note: (itstool) path: section/p
en: In line 45 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 45 ansluts signalen <code>"changed"</code> till återanropsfunktionen <code>on_changed()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>
sv: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Standardobjekt</link>

note: (itstool) path: page/title
en: Code samples and platform demos in C++
sv: Kodexempel och plattformsdemonstrationer i C++

note: (itstool) path: section/title
en: Examples of applications
sv: Exempel på program

note: (itstool) path: info/desc
en: A popup window
sv: Ett poppuppfönster

note: (itstool) path: page/p
en: A dialog window that pops up when a button is pressed.
sv: Ett dialogfönster som poppar upp då en knapp trycks ned.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (JavaScript)
sv: Dialog (Javascript)

note: (itstool) path: page/p
en: A dialog with the response signal connected to a callback function.
sv: En dialog med ”response”-signalen ansluten till en återanropsfunktion.

note: (itstool) path: section/title
en: Useful methods for a Dialog widget
sv: Användbara metoder för en Dialog-komponent

note: (itstool) path: section/p
en: In line 16 the signal <code>"clicked"</code> is connected to the callback function <code>on_button_click()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 16 ansluts signalen <code>"clicked"</code> till återanropsfunktionen <code>on_button_click()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: page/p
en: A dialog with the response signal hooked up to a callback function.
sv: En dialog med ”response”-signalen ansluten till en återanropsfunktion.

note: (itstool) path: info/desc
en: A single line text entry field
sv: Ett textinmatningsfält med en rad

note: (itstool) path: page/p
en: This application greets you in the terminal.
sv: Detta program hälsar dig i terminalen.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*This is the callback function. It is a handler function 
    which reacts to the signal. In this case, it will grab the 
    text input from the entry box and print out a line to the user.*/
    static void
    on_activate (GtkEntry *entry,
                 gpointer  user_data)
    {
      const char *name;
      name = gtk_entry_get_text (entry);
    
      g_print ("\nHello %s!\n\n", name);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *entry_box;
    
      /*Create a window with a title, a default size, 
      and a set border width*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "What is your name?");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
      gtk_container_set_border_width (GTK_CONTAINER (window), 10);
    
      /*Create a new entry box, and add it to the window*/
      entry_box = gtk_entry_new ();
      gtk_container_add (GTK_CONTAINER (window), entry_box);
    
      /*Connecting the activate signal to the callback*/
      g_signal_connect (GTK_ENTRY (entry_box), "activate", 
                        G_CALLBACK (on_activate), NULL);
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
sv: 
    #include &lt;gtk/gtk.h&gt;
    
    
    
    /*Detta är återanropsfunktionen. Det är en hanterarfunktion som 
    reagerar på signalen. I detta fall kommer den fånga textinmatningen 
    från inmatningsrutan och skriva ut en rad till användaren.*/
    static void
    on_activate (GtkEntry *entry,
                 gpointer  user_data)
    {
      const char *name;
      name = gtk_entry_get_text (entry);
    
      g_print ("\nHej %s!\n\n", name);
    }
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *entry_box;
    
      /*Skapa ett fönster med en titel, en standardstorlek, 
      och en inställd kantbredd*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Vad heter du?");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 100);
      gtk_container_set_border_width (GTK_CONTAINER (window), 10);
    
      /*Skapa en ny inmatningsruta, och lägg till den till fönstret*/
      entry_box = gtk_entry_new ();
      gtk_container_add (GTK_CONTAINER (window), entry_box);
    
      /*Ansluter ”activate”-signal till återanropet*/
      g_signal_connect (GTK_ENTRY (entry_box), "activate", 
                        G_CALLBACK (on_activate), NULL);
    
      gtk_widget_show_all (window);
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Entry (JavaScript)
sv: Entry (Javascript)

note: (itstool) path: info/desc
en: A single-line text entry field
sv: Ett textinmatningsfält med en rad

note: (itstool) path: page/p
en: This application greets you by name through a pop-up window.
sv: Detta program hälsar dig med namn genom ett poppuppfönster.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class EntryExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsentry',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents 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,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "What is your name?"});
    
            // Create the text entry box
            this.entry = new Gtk.Entry ();
            this._window.add(this.entry);
    
            // Connect the text entry box to a function that responds to what you type in
            this.entry.connect("activate", this._hello.bind(this));
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
        _hello() {
    
            // Create a popup dialog to greet the person who types in their name
            this._greeter = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                text: "Hello, " + this.entry.get_text() + "!",
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
            });
    
            // Show the popup dialog
            this._greeter.show();
    
            // Bind the OK button to the function that closes the popup
            this._greeter.connect ("response", this._okClicked.bind(this));
        }
    
        _okClicked() {
            this._greeter.destroy();
        }
    
    };
    
    // Run the application
    let app = new EntryExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class EntryExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsentry',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 100,
                default_width: 300,
                border_width: 10,
                title: "Vad heter du?"});
    
            // Skapa textinmatningsrutan
            this.entry = new Gtk.Entry ();
            this._window.add(this.entry);
    
            // Anslut textinmatningsrutan till en funktion som svarar på det du skriver in
            this.entry.connect("activate", this._hello.bind(this));
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
        _hello() {
    
            // Skapa en poppuppdialog som hälsar personen som skriver in sitt namn
            this._greeter = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                text: "Hej " + this.entry.get_text() + "!",
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
            });
    
            // Visa poppuppdialogen
            this._greeter.show();
    
            // Bind OK-knappen till funktionen som stänger poppuppen
            this._greeter.connect ("response", this._okClicked.bind(this));
        }
    
        _okClicked() {
            this._greeter.destroy();
        }
    
    };
    
    // Kör programmet
    let app = new EntryExample ();
    app.application.run (ARGV);

note: (itstool) path: page/p
en: This application greets you in the terminal with the name you provide.
sv: Detta program hälsar dig i terminalen med namnet du tillhandahåller.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="What is your name?", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # a single line entry
            name_box = Gtk.Entry()
            # emits a signal when the Enter key is pressed, connected to the
            # callback function cb_activate
            name_box.connect("activate", self.cb_activate)
    
            # add the Gtk.Entry to the window
            self.add(name_box)
    
        # the content of the entry is used to write in the terminal
        def cb_activate(self, entry):
            # retrieve the content of the widget
            name = entry.get_text()
            # print it in a nice form in the terminal
            print("Hello " + name + "!")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Vad heter du?", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # en enradsinmatning
            name_box = Gtk.Entry()
            # utger en signal när Returknappen trycks ned, ansluten till
            # återanropsfunktionen cb_activate
            name_box.connect("activate", self.cb_activate)
    
            # lägg till vår Gtk.Entry till fönstret
            self.add(name_box)
    
        # innehållet i inmatningen används för att skriva i terminalen
        def cb_activate(self, entry):
            # hämta komponentens innehåll
            name = entry.get_text()
            # skriv ut det på ett vänligt sätt i terminalen
            print("Hej " + name + "!")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for an Entry widget
sv: Användbara metoder för en Entry-komponent

note: (itstool) path: item/p
en: <code>get_text()</code> and <code>set_text("some text")</code> can be used to get and set the content for the entry.
sv: <code>get_text()</code> och <code>set_text("lite text")</code> kan användas för att få samt ställa in innehållet för inmatningsrutan.

note: (itstool) path: item/p
en: <code>get_text_length()</code> is self-explanatory.
sv: <code>get_text_length()</code> ger textens längd.

note: (itstool) path: item/p
en: <code>set_placeholder_text("some text")</code> sets the text to be displayed in the entry when it is empty and unfocused.
sv: <code>set_placeholder_text("lite text")</code> ställer in texten som ska visas i inmatningsrutan då den är tom och ofokuserad.

note: (itstool) path: item/p
en: If we have <code>set_editable(False)</code> the user cannot edit the text in the widget.
sv: Om vi har <code>set_editable(False)</code> så kan användaren inte redigera texten i komponenten.

note: (itstool) path: page/code
en: /* A window in the application. */
    class MyWindow : Gtk.ApplicationWindow {
    
    	/* Constructor */
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "What is your name?");
    
    		var name_box = new Gtk.Entry ();
    
    		/* Connect to the signal handler. */
    		name_box.activate.connect (this.on_activate);
    		name_box.show ();
    
    		this.set_default_size (300, 100);
    		this.border_width = 10;
    
    		/* Add the name_box to this window. */
    		this.add (name_box);
    	}
    
    	/* Signal handler (aka. callback function) for the 'activate'
    	 * signal of a Gtk.Entry.
    	 */
    	void on_activate (Gtk.Entry entry) {
    		name = entry.get_text ();
    		print ("\nHello " + name + "!\n\n");
    	}
    }
    
    /* This is the application. */
    class MyApplication : Gtk.Application {
    
    	/* Constructor for the application. */
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    
    		/* Create a new window for this application
    		 * and show it. */
    		new MyWindow (this).show ();
    	}
    
    }
    
    /* The main function creates and runs the application. */
    int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: /* Ett fönster i programmet. */
    class MyWindow : Gtk.ApplicationWindow {
    
    	/* Konstruktor */
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Vad heter du?");
    
    		var name_box = new Gtk.Entry ();
    
    		/* Anslut till signalhanteraren. */
    		name_box.activate.connect (this.on_activate);
    		name_box.show ();
    
    		this.set_default_size (300, 100);
    		this.border_width = 10;
    
    		/* Lägg till name_box till detta fönster. */
    		this.add (name_box);
    	}
    
    	/* Signalhanterare (även kallad återanropsfunktion) för
    	 * ”activate”-signalen för en Gtk.Entry.
    	 */
    	void on_activate (Gtk.Entry entry) {
    		name = entry.get_text ();
    		print ("\nHej " + name + "!\n\n");
    	}
    }
    
    /* Det här är programmet. */
    class MyApplication : Gtk.Application {
    
    	/* Konstruktor för programmet. */
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    
    	/* Åsidosätt ”activate”-signalen för GLib.Application. */
    	protected override void activate () {
    
    		/* Skapa ett nytt fönster för detta program
    		 * och visa det. */
    		new MyWindow (this).show ();
    	}
    
    }
    
    /* main-funktionen skapar och kör programmet. */
    int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands
sv: En dialog lämplig för ”Öppna”- och ”Spara”-kommandon

note: (itstool) path: page/p
en: This FileChooserDialog saves a text document, which can be opened or written from scratch in a TextView (see below).
sv: Denna FileChooserDialog sparar ett textdokument, vilket kan öppnas eller skrivas från grunden i en TextView (se nedan).

note: (itstool) path: page/p
en: It is also possible to call a FileChooserDialog to open a new document.
sv: Det är också möjligt att anropa en FileChooserDialog för att öppna ett nytt dokument.

note: (itstool) path: section/title
en: Steps to recreate the example
sv: Steg för att återskapa exemplet

note: (itstool) path: item/p
en: Create a file .ui to describe an app-menu with items "New", "Open", "Save", "Save as", and "Quit". This can be done with Glade or in a text editor. See <link xref="#xml"/>
sv: Skapa en .ui-fil för att beskriva en programmeny med objekten ”Nytt”, ”Öppna”, ”Spara”, ”Spara som” och ”Avsluta”. Detta kan göras med Glade eller i en textredigerare. Se <link xref="#xml"/>

note: (itstool) path: item/p
en: In this program, create also the actions corresponding to the items in the app-menu, connect them to callback functions, and import the menu in the <code>do_startup()</code> method with a Gtk.Builder.
sv: I detta program, skapa också åtgärderna som motsvarar objekten i programmenyn, anslut dem till återanropsfunktioner, och importera menyn i metoden <code>do_startup()</code> med en Gtk.Builder.

note: (itstool) path: item/p
en: Finally, the method <code>save_to_file()</code>: see <link xref="#code"/>, lines 146 - 175.
sv: Slutligen har vi metoden <code>save_to_file()</code>: se <link xref="#code"/>, raderna 146 - 175.

note: (itstool) path: section/title
en: XML file which creates the app-menu
sv: XML-fil som skapar programmenyn

note: (itstool) path: section/title
en: Useful methods for a FileChooserDialog
sv: Användbara metoder för en FileChooserDialog

note: (itstool) path: section/p
en: Besides the methods used in the <link xref="#code"/>, we have:
sv: Förutom metoderna som används i <link xref="#code"/>, så har vi:

note: (itstool) path: item/p
en: <code>set_show_hidden(True)</code> is used to display hidden files and folders.
sv: <code>set_show_hidden(True)</code> används för att visa dolda filer och mappar.

note: (itstool) path: item/p
en: <code>set_select_multiple(True)</code> sets that multiple files can be selected. This is only relevant if the mode is <code>Gtk.FileChooserAction.OPEN</code> or <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.
sv: <code>set_select_multiple(True)</code> ställer in att flera filer kan väljas. Detta är endast relevant om läget är <code>Gtk.FileChooserAction.OPEN</code> eller <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands.
sv: En dialog lämplig för ”Öppna”- och ”Spara”-kommandon.

note: (itstool) path: section/title
en: Overview of the example
sv: Översikt över exemplet

note: (itstool) path: section/title
en: XML UI file which creates the app-menu
sv: XML-användargränssnittsfil som skapar programmenyn

note: (itstool) path: section/title
en: Vala Code
sv: Vala-kod

note: (itstool) path: section/title
en: Relevant API documentation
sv: Relevant API-dokumentation

[ctx: text]
note: (itstool) path: info/title
en: FontChooserWidget (JavaScript)
sv: FontChooserWidget (Javascript)

note: (itstool) path: info/desc
en: A widget to choose a font
sv: En komponent för att välja ett typsnitt

note: (itstool) path: page/p
en: A FontChooserWidget with a callback function.
sv: En FontChooserWidget med en återanropsfunktion.

note: (itstool) path: section/code
en: //!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class FontChooserWidgetExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' });
    
            // 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,
                                                        title: "FontChooserWidget",
                                                        default_width: 200,
                                                        default_height: 200,
                                                        border_width: 10 });
    
            this.fontChooser = new Gtk.FontChooserWidget();
            // a default font
            this.fontChooser.set_font("Sans");
            // a text to preview the font
            this.fontChooser.set_preview_text("This is an example of preview text!");
    
            // connect signal from the font chooser to the callback function
            this.fontChooser.connect("notify::font", this._fontCb.bind(this));
    
            // add the font chooser to the window
            this.window.add(this.fontChooser);
            this.window.show_all();
       }
    
         // callback function:
         _fontCb() {
            // print in the terminal
            print("You chose the font " + this.fontChooser.get_font());
        }
    };
    
    // Run the application
    let app = new FontChooserWidgetExample();
    app.application.run (ARGV);
sv: //!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class FontChooserWidgetExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this.window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
            // Skapa programfönstret
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "FontChooserWidget",
                                                        default_width: 200,
                                                        default_height: 200,
                                                        border_width: 10 });
    
            this.fontChooser = new Gtk.FontChooserWidget();
            // ett standardtypsnitt
            this.fontChooser.set_font("Sans");
            // en text för att förhandsvisa typsnittet
            this.fontChooser.set_preview_text("Detta är ett exempel på förhandsvisningstext!");
    
            // anslut signal från typsnittsväljaren till återanropsfunktionen
            this.fontChooser.connect("notify::font", this._fontCb.bind(this));
    
            // lägg till typsnittsväljaren till fönstret
            this.window.add(this.fontChooser);
            this.window.show_all();
       }
    
         // återanropsfunktion:
         _fontCb() {
            // skriv i terminalen
            print("Du valde typsnittet " + this.fontChooser.get_font());
        }
    };
    
    // Kör programmet
    let app = new FontChooserWidgetExample();
    app.application.run (ARGV);

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="FontChooserWidget", application=app)
    
            # a font chooser
            self.font_chooser = Gtk.FontChooserWidget()
            # a default font
            self.font_chooser.set_font("Sans")
            # a text to preview the font
            self.font_chooser.set_preview_text(
                "This is an example of preview text!")
    
            # connect signal from the font chooser to the callback function
            self.font_chooser.connect("notify::font", self.font_cb)
    
            # add the font chooser to the window
            self.add(self.font_chooser)
    
        # callback function:
        def font_cb(self, event, user_data):
            # print in the terminal
            print("You chose the font " + self.font_chooser.get_font())
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="FontChooserWidget", application=app)
    
            # en typsnittsväljare
            self.font_chooser = Gtk.FontChooserWidget()
            # ett standardtypsnitt
            self.font_chooser.set_font("Sans")
            # en text för att förhandsvisa typsnittet
            self.font_chooser.set_preview_text(
                "Detta är ett exempel på förhandsvisningstext!")
    
            # anslut signal från typsnittsväljaren till återanropsfunktionen
            self.font_chooser.connect("notify::font", self.font_cb)
    
            # lägg till typsnittsväljaren till fönstret
            self.add(self.font_chooser)
    
        # återanropsfunktion:
        def font_cb(self, event, user_data):
            # skriv i terminalen
            print("Du valde typsnittet " + self.font_chooser.get_font())
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a FontChooserWidget
sv: Användbara metoder för en FontChooserWidget

note: (itstool) path: section/p
en: In line 16 the <code>"notify::font"</code> signal from the widget is connected to the callback function <code>font_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 16 ansluts signalen <code>"notify::font"</code> från komponenten till återanropsfunktionen <code>font_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: To set the font which is initially selected, use <code>set_font(font)</code> (where <code>font</code> is the font name) or <code>set_font_desc(font)</code> (where <code>font</code> is the PangoFontDescription).
sv: För att ställa in typsnittet som initialt är valt, använd <code>set_font(font)</code> (där <code>font</code> är typsnittsnamnet) eller <code>set_font_desc(font)</code> (där <code>font</code> är dess PangoFontDescription).

note: (itstool) path: item/p
en: To get the selected font use <code>get_font()</code> or <code>get_font_desc()</code>.
sv: För att få det valda typsnittet, använd <code>get_font()</code> eller <code>get_font_desc()</code>.

note: (itstool) path: item/p
en: To change the text which is shown in the preview area, use <code>set_preview_text()</code>.
sv: För att ändra texten som visas i förhandsvisningsområdet, använd <code>set_preview_text()</code>.

note: (itstool) path: credit/name
en: Tiffany Antpoolski
sv: Tiffany Antopolski

note: (itstool) path: info/desc
en: A simple implementation of GMenuModel
sv: En enkel implementation av GMenuModel

note: (itstool) path: page/p
en: A GtkApplication with a simple GMenu and SimpleActions
sv: En GtkApplication med en enkel GMenu och SimpleActions

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    static void
    new_window (GSimpleAction *action,
                GVariant      *parameter,
                gpointer       user_data)
    {
      g_print ("This does nothing. It is only a demonstration.\n");
    }
    
    static void
    quit (GSimpleAction *action,
          GVariant      *parameter,
          gpointer       user_data)
    {
      GApplication *application = user_data;
    
      g_application_quit (application);
    }
    
    static void
    startup (GtkApplication *application,
             gpointer        user_data)
    {
      static const GActionEntry actions[] = {
        { "new", new_window },
        { "quit", quit }
      };
    
      GMenu *menu;
    
      g_action_map_add_action_entries (G_ACTION_MAP (application), actions, G_N_ELEMENTS (actions), application);
    
      menu = g_menu_new ();
      g_menu_append (menu, "New", "app.new");
      g_menu_append (menu, "Quit", "app.quit");
      gtk_application_set_app_menu (application, G_MENU_MODEL (menu));
      g_object_unref (menu);
    }
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      window = gtk_application_window_new (app);
    
      gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
      gtk_window_set_title (GTK_WINDOW (window), "Hello GNOME");
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
sv: 
    #include &lt;gtk/gtk.h&gt;
    
    static void
    new_window (GSimpleAction *action,
                GVariant      *parameter,
                gpointer       user_data)
    {
      g_print ("Detta gör ingenting. Det är bara en demonstration.\n");
    }
    
    static void
    quit (GSimpleAction *action,
          GVariant      *parameter,
          gpointer       user_data)
    {
      GApplication *application = user_data;
    
      g_application_quit (application);
    }
    
    static void
    startup (GtkApplication *application,
             gpointer        user_data)
    {
      static const GActionEntry actions[] = {
        { "new", new_window },
        { "quit", quit }
      };
    
      GMenu *menu;
    
      g_action_map_add_action_entries (G_ACTION_MAP (application), actions, G_N_ELEMENTS (actions), application);
    
      menu = g_menu_new ();
      g_menu_append (menu, "Nytt", "app.new");
      g_menu_append (menu, "Avsluta", "app.quit");
      gtk_application_set_app_menu (application, G_MENU_MODEL (menu));
      g_object_unref (menu);
    }
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      window = gtk_application_window_new (app);
    
      gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
      gtk_window_set_title (GTK_WINDOW (window), "Hej GNOME");
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "startup", G_CALLBACK (startup), NULL);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: GMenu (JavaScript)
sv: GMenu (Javascript)

note: (itstool) path: info/desc
en: A simple implementation of GMenu
sv: En enkel implementation av GMenu

note: (itstool) path: section/title
en: Useful methods for a GSimpleAction and a GMenu
sv: Användbara metoder för en GSimpleAction och en GMenu

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>new_action</code> (not the menu!) is connected to the callback function <code>new_cb()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 33 ansluts signalen <code>"activate"</code> från åtgärden <code>new_action</code> (inte menyn!) till återanropsfunktionen <code>new_cb()</code> med <code><var>åtgärd</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: section/p
en: Useful methods for a GSimpleAction:
sv: Användbara metoder för en GSimpleAction:

note: (itstool) path: section/p
en: Useful methods for a GMenu:
sv: Användbara metoder för en GMenu:

note: (itstool) path: note/p
en: <em style="strong">You need to be running GTK+-3.4 or later for this to work</em>
sv: <em style="strong">Du behöver köra GTK+-3.4 eller senare för att detta ska fungera</em>

note: (itstool) path: info/desc
en: Pack widgets in rows and columns
sv: Packa komponenter i rader och kolumner

note: (itstool) path: page/p
en: A button widget connected to a progress bar.
sv: En knappkomponent ansluten till en förloppsindikator.

[ctx: text]
note: (itstool) path: info/title
en: Grid (JavaScript)
sv: Grid (Javascript)

note: (itstool) path: page/p
en: A button widget connected to a progress bar, inside of a grid which handles the layout.
sv: En knappkomponent ansluten till en förloppsindikator, inuti ett rutnät som hanterar layouten.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class GridExample {
    
        /* Create the application itself
           This boilerplate code is needed to build any GTK+ application. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsgrid',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal initializes menus and 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,
                                                             title: "Grid Example"});
    
            // Create the grid
            this.Grid = new Gtk.Grid ();
    
            // Create the widgets inside the grid
            this.progressBar = new Gtk.ProgressBar ();
            this.Button = new Gtk.Button ({ label: "Button" });
            this.Button.connect ("clicked", this._clickHandler.bind(this));
    
            // Assemble the grid
            this._window.add (this.Grid);
            this.Grid.attach (this.Button, 1, 1, 1, 1);
            this.Grid.attach_next_to (this.progressBar, this.Button, Gtk.PositionType.BOTTOM, 1, 1);
    
                    // Show the window and all child widgets
                    this._window.show_all();
        }
    
        // Here's the function that says what happens when the button is clicked
        _clickHandler() {
            this.progressBar.pulse ();
        }
    
    
    };
    
    // Run the application
    let app = new GridExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class GridExample {
    
        /* Skapa programmet i sig
           Denna standardkod behövs för att bygga alla GTK+-program. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsgrid',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
                this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                             window_position: Gtk.WindowPosition.CENTER,
                                                             title: "Grid-exempel"});
    
            // Skapa rutnätet
            this.Grid = new Gtk.Grid ();
    
            // Skapa komponenterna i rutnätet
            this.progressBar = new Gtk.ProgressBar ();
            this.Button = new Gtk.Button ({ label: "Knapp" });
            this.Button.connect ("clicked", this._clickHandler.bind(this));
    
            // Sätt ihop rutnätet
            this._window.add (this.Grid);
            this.Grid.attach (this.Button, 1, 1, 1, 1);
            this.Grid.attach_next_to (this.progressBar, this.Button, Gtk.PositionType.BOTTOM, 1, 1);
    
                    // Visa fönstret och alla barnkomponenter
                    this._window.show_all();
        }
    
        // Här är funktionen som säger vad som händer när knappen klickas på
        _clickHandler() {
            this.progressBar.pulse ();
        }
    
    
    };
    
    // Kör programmet
    let app = new GridExample ();
    app.application.run (ARGV);

note: (itstool) path: page/p
en: Some labels in a grid.
sv: Några etiketter i ett rutnät.

note: (itstool) path: section/title
en: Useful methods for a Grid widget
sv: Användbara metoder för en Grid-komponent

note: (itstool) path: page/title
en: Grid widget
sv: Grid-komponent

note: (itstool) path: page/code
en: public class MyWindow : Gtk.ApplicationWindow {
    
    	Gtk.Widget progress_bar;
    
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Grid Example");
    		var grid = new Gtk.Grid();
    		progress_bar = new Gtk.ProgressBar ();
    		progress_bar.show ();
    
    		var button = new Gtk.Button.with_label ("Button");
    		button.clicked.connect (on_button_click);
    		button.show ();
    
    		this.add(grid);
    		grid.attach(button, 0, 1, 1, 1);
    		grid.attach_next_to (progress_bar, button, Gtk.PositionType.BOTTOM, 1, 1);
    		grid.show ();
    	}
    
    	void on_button_click (Gtk.Button button) {
    		(progress_bar as Gtk.ProgressBar).pulse ();
    	}
    }
    
    public class MyApplication : Gtk.Application {
    	protected override void activate () {
    
    		new MyWindow (this).show ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: public class MyWindow : Gtk.ApplicationWindow {
    
    	Gtk.Widget progress_bar;
    
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Grid-exempel");
    		var grid = new Gtk.Grid();
    		progress_bar = new Gtk.ProgressBar ();
    		progress_bar.show ();
    
    		var button = new Gtk.Button.with_label ("Knapp");
    		button.clicked.connect (on_button_click);
    		button.show ();
    
    		this.add(grid);
    		grid.attach(button, 0, 1, 1, 1);
    		grid.attach_next_to (progress_bar, button, Gtk.PositionType.BOTTOM, 1, 1);
    		grid.show ();
    	}
    
    	void on_button_click (Gtk.Button button) {
    		(progress_bar as Gtk.ProgressBar).pulse ();
    	}
    }
    
    public class MyApplication : Gtk.Application {
    	protected override void activate () {
    
    		new MyWindow (this).show ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets, and support GMenu
sv: Ett toppnivåfönster som kan innehålla andra komponenter, och stöder GMenu

note: (itstool) path: page/p
en: A minimal GtkApplication with a GtkApplicationWindow
sv: En minimal GtkApplication med ett GtkApplicationWindow

note: (itstool) path: page/code
en: #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Hello GNOME");
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
sv: #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Hej GNOME");
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: ApplicationWindow (JavaScript)
sv: ApplicationWindow (Javascript)

note: (itstool) path: info/desc
en: GtkWindow subclass with GtkApplication support
sv: GtkWindow-underklass med GtkApplication-stöd

note: (itstool) path: page/code
en: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class Application {
    
        //create the application
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           //connect to 'activate' and 'startup' signals to the callback functions
           this.application.connect('activate', this._onActivate.bind(this));
           this.application.connect('startup', this._onStartup.bind(this));
        }
    
        //create the UI (in this case it's just the ApplicationWindow
        _buildUI() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "Welcome to GNOME" });
    
            //uncommenting the line below will change the window size
            //this._window.set_default_size(600, 400);
    
            //show the window and all child widgets (none in this case)
            this._window.show_all();
        }
    
        //callback function for 'activate' signal
        _onActivate() {
            this._window.present();
        }
    
        //callback function for 'startup' signal
        _onStartup() {
            this._buildUI();
        }
    };
    
    //run the application
    let app = new Application ();
    app.application.run (ARGV);
sv: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class Application {
    
        //skapa programmet
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           //anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
           this.application.connect('activate', this._onActivate.bind(this));
           this.application.connect('startup', this._onStartup.bind(this));
        }
    
        //skapa användargränssnittet (i detta fall bara vårt ApplicationWindow
        _buildUI() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       window_position: Gtk.WindowPosition.CENTER,
                                                       title: "Välkommen till GNOME" });
    
            //att avkommentera raden nedan kommer ändra fönsterstorleken
            //this._window.set_default_size(600, 400);
    
            //visa fönstret och alla barnkomponenter (ingen i detta fall)
            this._window.show_all();
        }
    
        //återanropsfunktion för ”activate”-signal
        _onActivate() {
            this._window.present();
        }
    
        //återanropsfunktion för ”startup”-signal
        _onStartup() {
            this._buildUI();
        }
    };
    
    //kör programmet
    let app = new Application ();
    app.application.run (ARGV);

note: (itstool) path: section/title
en: Useful methods for a Gtk.ApplicationWindow widget
sv: Användbara metoder för en Gtk.ApplicationWindow-komponent

note: (itstool) path: item/p
en: <code>set_default_size(200, 100)</code> sets the default size of the window to a width of <code>200</code> and a height of <code>100</code>; if instead of a positive number we pass <code>-1</code> we have the default size.
sv: <code>set_default_size(200, 100)</code> ställer in standardstorleken för fönstret till en bredd på <code>200</code> och en höjd på <code>100</code>; om vi istället för ett positivt tal skickar med <code>-1</code> får vi standardstorleken.

note: (itstool) path: item/p
en: <code>set_position(Gtk.WindowPosition.CENTER)</code> centers the window. Other options are <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.
sv: <code>set_position(Gtk.WindowPosition.CENTER)</code> centrerar fönstret. Andra alternativ är <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.

note: (itstool) path: page/code
en: 
    /* This is the application. */
    public class MyApplication : Gtk.Application {
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    		/* Create the window of this application and show it. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "Welcome to GNOME";
    		window.show ();
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: 
    /* Det här är programmet. */
    public class MyApplication : Gtk.Application {
    	/* Åsidosätt ”activate”-signalen för GLib.Application. */
    	protected override void activate () {
    		/* Skapa fönstret för detta program och visa det. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "Välkommen till GNOME";
    		window.show ();
    	}
    }
    
    /* main skapar och kör programmet. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (C)
sv: Gitarrstämmare (C)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
sv: Använd GTK+ och GStreamer för att bygga ett enkelt gitarrstämmarprogram för GNOME. Visar hur gränssnittsdesignern används.

note: (itstool) path: page/title
en: Guitar tuner
sv: Gitarrstämmare

note: (itstool) path: item/p
en: Set up a basic project in Anjuta
sv: Konfigurerar ett grundläggande projekt i Anjuta

note: (itstool) path: item/p
en: Create a simple GUI with Anjuta's UI designer
sv: Skapar ett enkelt grafiskt användargränssnitt med Anjutas användargränssnittsdesigner

note: (itstool) path: item/p
en: Use GStreamer to play sounds
sv: Använder GStreamer för att spela upp ljud

note: (itstool) path: synopsis/p
en: You'll need the following to be able to follow this tutorial:
sv: Du behöver följande för att kunna följa denna handledning:

note: (itstool) path: item/p
en: An installed copy of the <link xref="getting-ready">Anjuta IDE</link>
sv: En installerad kopia av den <link xref="getting-ready">integrerade utvecklingsmiljön Anjuta</link>

note: (itstool) path: item/p
en: Basic knowledge of the C programming language
sv: Grundläggande kunskap i programmeringsspråket C

note: (itstool) path: section/title
en: Create a project in Anjuta
sv: Skapa ett projekt i Anjuta

note: (itstool) path: section/p
en: Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the files you need to build and run the code later on. It's also useful for keeping everything together.
sv: Innan du börjar koda kommer du behöva konfigurera ett nytt projekt i Anjuta. Detta kommer skapa alla filer som du behöver för att bygga och köra koden senare. Det är också användbart för att hålla allting samlat.

note: (itstool) path: item/p
en: Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
sv: Starta Anjuta och klicka på <guiseq><gui>Arkiv</gui><gui>Ny</gui><gui>Projekt</gui></guiseq> för att öppna projektguiden.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
sv: Välj <gui>GTK+ (enkel)</gui> från fliken <gui>C</gui>, klicka på <gui>Fortsätt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>guitar-tuner</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <em>gstreamer-0.10</em> from the list to include the GStreamer library in your project.
sv: Säkerställ att <gui>Konfigurera externa paket</gui> är i läget <gui>PÅ</gui>. På nästa sida, välj <em>gstreamer-0.10</em> från listan för att inkludera GStreamer-biblioteket i ditt projekt.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/main.c</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:

note: (itstool) path: section/title
en: Build the code for the first time
sv: Bygg koden för första gången

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>).
sv: Denna kod är klar att användas, så du kan kompilera den genom att klicka på <guiseq><gui>Bygg</gui><gui>Bygg projekt</gui></guiseq> (eller trycka <keyseq><key>Skift</key><key>F7</key></keyseq>).

note: (itstool) path: section/title
en: Create the user interface
sv: Skapa användargränssnittet

note: (itstool) path: section/title
en: Creating the signal handler
sv: Skapa signalhanteraren

note: (itstool) path: section/p
en: For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.
sv: För tillfället kommer vi lämna signalhanteraren tom medan vi arbetar med att skriva koden för att skapa ljud.

note: (itstool) path: section/title
en: GStreamer pipelines
sv: GStreamer-rörledningar

note: (itstool) path: media/p
en: An example GStreamer pipeline.
sv: Exempel på en GStreamer-rörledning.

note: (itstool) path: section/title
en: Set up the pipeline
sv: Konfigurera rörledningen

note: (itstool) path: section/p
en: Insert the following line into <file>main.c</file>, just below the <code>#include &lt;gtk/gtk.h&gt;</code> line:
sv: Infoga följande rad i <file>main.c</file>, just under raden <code>#include &lt;gtk/gtk.h&gt;</code>:

note: (itstool) path: section/p
en: This includes the GStreamer library. You also need to add a line to initialize GStreamer; put the following code on the line above the <code>gtk_init</code> call in the <code>main</code> function:
sv: Detta inkluderar GStreamer-biblioteket. Du behöver också lägga till en rad för att initiera GStreamer; stoppa in följande kod på raden ovanför <code>gtk_init</code>-anropen i <code>main</code>-funktionen:

note: (itstool) path: section/p
en: Then, copy the following function into <file>main.c</file> above the empty <code>on_button_clicked</code> function:
sv: Kopiera sedan in följande funktion i <file>main.c</file>, ovanför den tomma funktionen <code>on_button_clicked</code>:

note: (itstool) path: section/title
en: Stopping playback
sv: Stoppa uppspelning

note: (itstool) path: section/code
en: 
    #define LENGTH 500 /* Length of playing in ms */
    
    static gboolean
    pipeline_stop (GstElement* pipeline)
    {
    	gst_element_set_state (pipeline, GST_STATE_NULL);
    	g_object_unref (pipeline);
    
    	return FALSE;
    }
sv: 
    #define LENGTH 500 /* Uppspelningslängd i ms */
    
    static gboolean
    pipeline_stop (GstElement* pipeline)
    {
    	gst_element_set_state (pipeline, GST_STATE_NULL);
    	g_object_unref (pipeline);
    
    	return FALSE;
    }

note: (itstool) path: section/title
en: Define the tones
sv: Definiera tonerna

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the top of <file>main.c</file>) as follows:
sv: Vi vill spela rätt ljud när användaren klickar på en knapp. Först av allt behöver vi veta frekvenserna för de sex gitarrsträngarna, vilka är definierade (högst upp i <file>main.c</file>) enligt följande:

note: (itstool) path: section/title
en: Build and run the application
sv: Bygg och kör programmet

note: (itstool) path: section/title
en: Reference Implementation
sv: Referensimplementation

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.c">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="guitar-tuner/guitar-tuner.c">referenskod</link>.

note: (itstool) path: section/title
en: Next steps
sv: Nästa steg

note: (itstool) path: section/p
en: Here are some ideas for how you can extend this simple demonstration:
sv: Här är några idéer på hur du kan utöka denna enkla demonstration:

note: (itstool) path: info/desc
en: Use GTKmm and GStreamermm to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
sv: Använd GTKmm och GStreamermm för att bygga ett enkelt gitarrstämmarprogram för GNOME. Visar hur gränssnittsdesignern används.

note: (itstool) path: item/p
en: Basic knowledge of the C++ programming language
sv: Grundläggande kunskap i programmeringsspråket C++

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
sv: Välj <gui>GTKmm (enkel)</gui> från fliken <gui>C++</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>guitar-tuner</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamermm-0.10</em> from the list to include the GStreamermm library in your project.
sv: Säkerställ att <gui>Konfigurera externa paket</gui> är valt. På nästa sida, välj <em>gstreamermm-0.10</em> från listan för att inkludera GStreamermm-biblioteket i ditt projekt.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
sv: Klicka på <gui>Färdig</gui> så kommer projektet skapas åt dig. Öppna <file>src/main.cc</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:

note: (itstool) path: section/title
en: Using GStreamermm
sv: Använda GStreamermm

note: (itstool) path: section/p
en: To use GStreamermm, it has to be initialised. We do that by adding the following line of code next to the <code>Gtk::Main kit(argc, argv);</code> line in <file>main.cc</file>:
sv: För att använda GStreamermm måste det initieras. Vi gör det genom att lägga till följande kodrad intill raden <code>Gtk::Main kit(argc, argv);</code> i <file>main.cc</file>:

note: (itstool) path: section/p
en: The code has the following purpose:
sv: Koden har följande syfte:

note: (itstool) path: section/title
en: Connecting the signals
sv: Ansluta signalerna

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.cc">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="guitar-tuner/guitar-tuner.cc">referenskod</link>.

note: (itstool) path: section/title
en: Further Reading
sv: Vidare läsning

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (JavaScript)
sv: Gitarrstämmare (Javascript)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME.
sv: Använd GTK+ och GStreamer för att bygga ett enkelt gitarrstämmarprogram för GNOME.

note: (itstool) path: item/p
en: <link xref="#gstreamer">GStreamer pipelines</link>
sv: <link xref="#gstreamer">GStreamer-rörledningar</link>

note: (itstool) path: item/p
en: <link xref="#script">Script for running the application</link>
sv: <link xref="#script">Skript för att köra programmet</link>

note: (itstool) path: item/p
en: <link xref="#imports">Libraries to import</link>
sv: <link xref="#imports">Bibliotek att importera</link>

note: (itstool) path: item/p
en: <link xref="#playSound">Making the sounds with GStreamer</link>
sv: <link xref="#playSound">Göra ljuden med GStreamer</link>

note: (itstool) path: item/p
en: <link xref="#connecting">Connecting buttons to playSound</link>
sv: <link xref="#connecting">Ansluta knappar till playSound</link>

note: (itstool) path: item/p
en: <link xref="#guitarjs">The whole program</link>
sv: <link xref="#guitarjs">Hela programmet</link>

note: (itstool) path: item/p
en: <link xref="#terminal">Running the application form Terminal</link>
sv: <link xref="#terminal">Köra programmet från Terminal</link>

note: (itstool) path: page/p
en: After reading this tutorial, you should see this in your screen:
sv: Efter att ha läst denna handledning bör du se detta på din skärm:

note: (itstool) path: section/title
en: Script for running the application
sv: Skript för att köra programmet

note: (itstool) path: section/code
en: 
    Gtk.init(null, 0);
    Gst.init(null, 0);
    
    var guitarwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, border_width: 100});
    guitarwindow.title = "Guitar Tuner";
    guitarwindow.connect("destroy", function(){Gtk.main_quit()});
    
    guitarwindow.show();
    Gtk.main();
sv: 
    Gtk.init(null, 0);
    Gst.init(null, 0);
    
    var guitarwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, border_width: 100});
    guitarwindow.title = "Gitarrstämmare";
    guitarwindow.connect("destroy", function(){Gtk.main_quit()});
    
    guitarwindow.show();
    Gtk.main();

note: (itstool) path: section/title
en: Making the sounds with GStreamer
sv: Göra ljuden med GStreamer

note: (itstool) path: section/title
en: Connecting buttons to playSound
sv: Ansluta knappar till playSound

note: (itstool) path: section/title
en: The whole program
sv: Hela programmet

note: (itstool) path: section/title
en: Running the application form Terminal
sv: Köra programmet från Terminal

note: (itstool) path: section/p
en: To run this application open Terminal, go to the folder where your application is stored and then run
sv: För att köra detta program, öppna Terminal, gå till mappen där ditt program lagrats och kör sedan

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.js">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="guitar-tuner/guitar-tuner.js">referenskod</link>.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (Python)
sv: Gitarrstämmare (Python)

note: (itstool) path: item/p
en: Basic knowledge of the Python programming language
sv: Grundläggande kunskap i programmeringsspråket Python

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
sv: Välj <gui>PyGTK (automake)</gui> från fliken <gui>Python</gui>, klicka på <gui>Fortsätt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>guitar-tuner</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/guitar_tuner.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/guitar_tuner.py</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:

note: (itstool) path: section/title
en: Run the code for the first time
sv: Kör koden för första gången

note: (itstool) path: item/p
en: The <code>import</code> lines at the top include the tell Python to load the user interface and system libraries needed.
sv: <code>import</code>-raderna högst upp säger till Python att läsa in användargränssnittsbiblioteken och systembiblioteken som behövs.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> method is called (and quits the app) when you close the window.
sv: Att ansluta signaler är hur du definierar vad som händer när du trycker på en knapp, eller när någon annan händelse inträffar. Här anropas funktionen <code>destroy</code> (och avslutar programmet) när du stänger fönstret.

note: (itstool) path: section/title
en: Write the signal handler
sv: Skriv signalhanteraren

note: (itstool) path: section/p
en: Change the import line in <file>guitar_tuner.py</file>, just at the beginning to :
sv: Ändra importraden just i början av <file>guitar_tuner.py</file> till:

note: (itstool) path: section/p
en: The <code>Gst</code> includes the GStreamer library. You also need to initialise GStreamer properly which is done in the <code>main()</code> method with this call added above the <code>app = GUI()</code> line:
sv: <code>Gst</code> inkluderar GStreamer-biblioteket. Du behöver också initiera GStreamer ordentligt vilket görs i <code>main()</code>-metoden med detta anrop tillagt ovanför raden <code>app = GUI()</code>:

note: (itstool) path: section/p
en: The call to <code>pipeline.set_state</code> stops the playback of the pipeline.
sv: Anropet till <code>pipeline.set_state</code> stoppar uppspelningen av rörledningen.

note: (itstool) path: section/title
en: Run the application
sv: Kör programmet

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.py">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="guitar-tuner/guitar-tuner.py">referenskod</link>.

note: (itstool) path: info/desc
en: Use <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> and <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
sv: Använd <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> och <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> för att bygga ett enkelt gitarrstämmarprogram för GNOME. Visar hur gränssnittsdesignern används.

note: (itstool) path: item/p
en: Set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
sv: Konfigurerar ett grundläggande projekt med den <link xref="getting-ready">integrerade utvecklingsmiljön Anjuta</link>.

note: (itstool) path: item/p
en: Create a simple GUI with <app>Anjuta</app>'s UI designer.
sv: Skapar ett enkelt grafiskt användargränssnitt med <app>Anjuta</app>s användargränssnittsdesigner.

note: (itstool) path: item/p
en: Use the <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> library to play sounds.
sv: Använder <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link>-biblioteket för att spela upp ljud.

note: (itstool) path: item/p
en: Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial">Vala</link> programming language.
sv: Grundläggande kunskap i programmeringsspråket <link href="https://live.gnome.org/Vala/Tutorial">Vala</link>.

note: (itstool) path: item/p
en: An installed copy of <app>Anjuta</app>.
sv: En installerad kopia av <app>Anjuta</app>.

note: (itstool) path: section/title
en: Create a project in <app>Anjuta</app>
sv: Skapa ett projekt i <app>Anjuta</app>

note: (itstool) path: item/p
en: Start <app>Anjuta</app> and click <gui>Create a new project</gui> or <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
sv: Starta <app>Anjuta</app> och klicka på <gui>Skapa ett nytt projekt</gui> eller <guiseq><gui>Arkiv</gui><gui>Ny</gui><gui>Projekt</gui></guiseq> för att öppna projektguiden.

note: (itstool) path: item/p
en: Click on the <gui>Vala</gui> tab and select <gui>GTK+ (Simple)</gui>. Click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
sv: Klicka på fliken <gui>Vala</gui> och välj <gui>GTK+ (enkel)</gui>. Klicka på <gui>Fortsätt</gui> och fyll i dina detaljer på de nästkommande sidorna. Använd <file>guitar-tuner</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> from the list to include the GStreamer library in your project. Click <gui>Continue</gui>
sv: Säkerställ att <gui>Konfigurera externa paket</gui> är i läget <gui>PÅ</gui>. På nästa sida, välj <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> från listan för att inkludera GStreamer-biblioteket i ditt projekt. Klicka på <gui>Fortsätt</gui>

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/guitar_tuner.vala</file> by double-clicking on it. You should see some code which starts with the lines:
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/guitar_tuner.vala</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui> genom att dubbelklicka på den. Du bör se kod som börjar med raderna:

note: (itstool) path: item/p
en: The two <code>using</code> lines import namespaces so we don't have to name them explicitly.
sv: De två <code>using</code>-raderna importerar namnrymder så vi inte behöver namnge dem explicit.

note: (itstool) path: note/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>on_destroy</code> function is called (and quits the app) when you close the window.
sv: Att ansluta signaler är hur du definierar vad som händer när du trycker på en knapp, eller när någon annan händelse inträffar. Här anropas funktionen <code>on_destroy</code> (och avslutar programmet) när du stänger fönstret.

note: (itstool) path: section/p
en: This signal handler has only one argument: the <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> that called the function (in our case, always a <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).
sv: Denna signalhanterare har endast ett argument: den <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> som anropade funktionen (i vårt fall alltid en <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).

note: (itstool) path: section/title
en: Define the signal handler
sv: Definiera signalhanteraren

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.vala">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="guitar-tuner/guitar-tuner.vala">referenskod</link>.

note: (itstool) path: section/title
en: Further reading
sv: Vidare läsning

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link> and the <link href="http://valadoc.org/">Vala API Documentation</link>
sv: För att lära dig mer om programmeringsspråket Vala kan du vilja ta en titt på <link href="http://live.gnome.org/Vala/Tutorial">Vala-handledningen</link> och <link href="http://valadoc.org/">Valas API-dokumentation</link>

note: (itstool) path: info/desc
en: Your first GNOME application!
sv: Ditt första GNOME-program!

note: (itstool) path: page/title
en: 1. Hello, GNOME!
sv: 1. Hej 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.
sv: Denna handledning kommer visa dig hur du skriver ditt första GNOME-program i Javascript. Du kommer använda Javascript för att skriva för GNOME på samma sätt som du skulle skriva för webben. Efteråt kommer du lära dig hur du använder ”inhemska” komponenter för att skriva program som ser ut som och känns som andra GNOME-program.

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.
sv: Har du GNOME installerat på din dator, och <link xref="set-up-gedit.js">gedit</link> konfigurerat för att skriva kod med? Du kommer vilja göra dessa saker först.

note: (itstool) path: section/title
en: Let's start with a web page
sv: Låt oss börja med en webbsida

note: (itstool) path: section/p
en: Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?
sv: Här är lite grundläggande HTML-, CSS- och Javascript-kod. Verkar det bekant?

note: (itstool) path: section/code
en: 
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset="utf-8"&gt;
            &lt;title&gt;Hello, GNOME!&lt;/title&gt;
    
            &lt;!-- Use JavaScript to show a greeting when someone clicks the button --&gt;
            &lt;script type="application/javascript"&gt;
            function greeting () {
                document.getElementById ("greeting").innerHTML = ("O hai!");
            }
            &lt;/script&gt;
    
            &lt;!-- Very basic CSS style using the GNOME font --&gt;
            &lt;style type="text/css"&gt;
                body {
                    font-face: Cantarell, sans-serif;
                    text-align: center; }
            &lt;/style&gt;
    
        &lt;/head&gt;
        &lt;body&gt;
            &lt;br /&gt; &lt;br /&gt;
            &lt;button type="button" onclick="greeting()"&gt;Hello, GNOME!&lt;/button&gt;
    
            &lt;!-- Empty H1 element gets filled in when the button is clicked --&gt;
            &lt;h1 id="greeting"&gt;&lt;/h1&gt;
        &lt;/body&gt;
    &lt;/html&gt;
sv: 
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset="utf-8"&gt;
            &lt;title&gt;Hej GNOME!&lt;/title&gt;
    
            &lt;!-- Använd Javascript för att visa en hälsning när någon klickar på knappen --&gt;
            &lt;script type="application/javascript"&gt;
            function greeting () {
                document.getElementById ("greeting").innerHTML = ("O hai!");
            }
            &lt;/script&gt;
    
            &lt;!-- Väldigt enkel CSS-stil som använder GNOME-typsnittet --&gt;
            &lt;style type="text/css"&gt;
                body {
                    font-face: Cantarell, sans-serif;
                    text-align: center; }
            &lt;/style&gt;
    
        &lt;/head&gt;
        &lt;body&gt;
            &lt;br /&gt; &lt;br /&gt;
            &lt;button type="button" onclick="greeting()"&gt;Hej GNOME!&lt;/button&gt;
    
            &lt;!-- Tomt H1-element som blir ifyllt när knappen klickas på --&gt;
            &lt;h1 id="greeting"&gt;&lt;/h1&gt;
        &lt;/body&gt;
    &lt;/html&gt;

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!
sv: Låt oss spara detta som <file>hellognome.html</file>, och se hur det ser ut när vi kör det!

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.
sv: Du <em>kan</em> köra koden ovan genom att öppna <file>hellognome.html</file> i en webbläsare. Men här kommer vi skapa ett GNOME-program som kör vår webbapplikation inuti sig, precis som du ser i skärmbilden. Du kommer kunna ändra storlek på och maximera fönstret, och klicka på X i hörnet för att stänga det, precis som du skulle förvänta dig från vilket annat GNOME-program som helst. Skillnaden är att detta kommer att köra vår webbkod i sig.

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!
sv: Det bästa med det? Vi kommer fortsätta använda Javascript för alla delar som gör att vårt program fungerar med GNOME. Låt oss ta en titt på koden, och se hur det görs!

note: (itstool) path: section/title
en: Creating a GNOME window to frame our web app
sv: Skapa ett GNOME-fönster för att rama in vår webbapplikation

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.
sv: Först behöver vi säga till GNOME att detta är ett Javascript-program som använder gjs. Gjs är GNOME:s sätt att förvandla din Javascript-kod till instruktioner som det förstår, så denna rad måste alltid finnas i början av dina program.

note: (itstool) path: section/p
en: Then we should set the versions of the libraries we'll be using.
sv: Sedan ska vi ställa in versionerna av biblioteken som vi kommer använda.

note: (itstool) path: section/p
en: After that, we need to tell GNOME which libraries we want to import.
sv: Efter det behöver vi säga till GNOME vilka bibliotek som vi vill importera.

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:
sv: Precis som hur tilläggsbibliotek som jQuery låter oss göra extra saker med Javascript så ger vart och ett av dessa bibliotek oss nya förmågor till våra GNOME-program:

note: (itstool) path: item/p
en: <file>Gtk</file> is the basic part of any GNOME application, which lets you create windows and widgets and tie them together.
sv: <file>Gtk</file> är den grundläggande delen av alla GNOME-program, vilket låter dig skapa fönster och komponenter och binda ihop dem.

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.
sv: <file>GLib</file> är ett hjälpbibliotek, vilket låter oss göra saker som att säga till GNOME var filen <file>hellognome.html</file> som vi skapade finns.

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.
sv: <file>Webkit</file> är slutligen en webbrenderingsmotor, vilken vi kommer använda för att praktiskt taget skapa ett webbläsarfönster att öppna vår HTML-fil med.

note: (itstool) path: section/p
en: Now we create the application itself:
sv: Nu skapar vi programmet i sig:

note: (itstool) path: section/p
en: This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our whole application is a class called HelloGNOME.
sv: Detta kommer verka bekant för dig om du har arbetat med objektorienterad Javascript innan. Det stämmer: hela vårt program är en klass med namnet HelloGNOME.

note: (itstool) path: section/code
en: 
        // 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();
        }
sv: 
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }

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.
sv: Här är lite kod du mer eller mindre kommer kopiera och klistra för varje Javascript-program som du bygger. Det skapar en ny Application, och binder sedan dess ”activate”- och ”startup”-signaler till funktioner som får fönstret att visa sig respektive bygga sitt användargränssnitt.

note: (itstool) path: section/p
en: What does that mean? Well, everything in a GNOME application sends out a signal when something important happens. A button might send out the clicked signal when you click on it, for instance. Our job is to connect the signals to functions which handle them, and make the things that we want to have happen occur. We do this using each object's connect method, which takes two arguments: The signal we want to handle, and the bound function, which we have to use to tell connect which function we want to have handle the signal.
sv: Vad betyder det här? Tja, allt i ett GNOME-program skickar ut en signal då något viktigt händer. En knapp kan exempelvis skicka ut signalen ”clicked” när du klickar på den. Vårt jobb är att ansluta signalerna till funktioner som hanterar dem, och får de saker som vi vill ska hända att inträffa. Vi gör detta genom att använda varje objekts ”connect”-metod, vilken tar två argument: signalen som vi vill hantera, och den bundna funktionen, vilken vi måste använda för att säga till ”connect” vilken funktion vi vill ska hantera signalen.

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.
sv: I detta fall vill vi att _onActivate ska hantera ”activate”-signalen, och att _onStartup ska hantera ”startup”-signalen. _onActivate säger bara till fönstret att visa sig; i princip så att närhelst du använder <keyseq><key>Alt</key> <key>Tabb</key></keyseq> för att växla till programmet så visas det, som du skulle förvänta dig. _onStartup anropar _buildUI vilket är funktionen som skapar vårt användargränssnitt och är nästa del som vi kommer att ta en titt på.

note: (itstool) path: note/p
en: When you copy and paste the above code for your own applications, be sure to change the class name to a unique one each time.
sv: När du kopierar och klistrar in koden ovan för dina egna program, säkerställ att du ändrar klassnamnet till ett unikt namn varje gång.

note: (itstool) path: section/title
en: Designing our window's UI
sv: Designa vårt fönsters användargränssnitt

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.
sv: I _buildUI-funktionen kommer vi säga till GNOME om vårt fönster och sakerna i det, en åt gången. Efter det kommer vi koppla ihop allting och visa upp det.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Welcome to GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });
sv: 
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Välkommen till GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });

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.
sv: Det första objektet vi skapar är ett ApplicationWindow. Det behöver en titel till namnlisten, och dess ”application”-egenskap måste vara programmet vi skapade ovan. Bortom det så finns det olika sätt att anpassa hur det ser ut, vilket referenssidan <link xref="GtkApplicationWindow.js">ApplicationWindow</link> kommer gå in på mer detaljerat. Som du kan se här så gav vi det en standardbredd och standardhöjd (mätt i bildpunkter), och sa till GNOME att vi vill att vårt fönster ska dyka upp i mitten på skärmen.

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));
sv: 
            // Skapa en webbvy för att visa webbapplikationen
            this._webView = new Webkit.WebView ();
    
            // Stoppa webbapplikationen i webbvyn
            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.
sv: Kommer du ihåg hur vi importerade Webkit i början? Här skapar vi en ny instans av en Webkit-klass som kallas en WebView, vilken mer eller mindre är ett webbläsarfönster som du kan stoppa i ditt program. Efter det ger vi den URI:n som vi vill att den ska läsa in när programmet startar.

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.)
sv: Vi <em>skulle kunna</em> bara ge den en webb-URI, som <link href="http://gnome.org">http://gnome.org</link>. Istället använder vi några GLib-hjälpfunktioner för att säga till vår WebView var vår fil <file>hellognome.html</file> är. GLib.get_current_dir returnerar katalogen som vårt program körs i, och GLib.filename_to_uri omvandlar vår fils sökväg och filnamn till en URI som vår WebViews load_uri-funktion förstår. (Den andra parametern för filename_to_uri ska vara null om du inte vet vad den används för och har en anledning att ändra den.)

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();
        },
    
    });
sv: 
            // Stoppa webbvyn i fönstret
            this._window.add (this._webView);
    
            // Visa fönstret och alla barnkomponenter
            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.
sv: Varje fönster kan hålla en, och endast en, komponent. Vanligen skulle vi använda en behållarkomponent som en <link xref="grid.js">Grid</link> att stoppa flera komponenter i, och sedan fönstrets add-funktion för att lägga till denna Grid till det. Här behöver vi bara en WebView, så det är allt vi lägger till i fönstret. Efter det, som sista del av _buildUI-funktionen som skapar vårt fönster, säger vi till fönstret att visa sig och sitt innehåll.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new HelloGNOME ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    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.
sv: Slutligen skapar vi en ny instans av vår HelloGNOME-klass, och säger till GNOME att köra den.

note: (itstool) path: section/title
en: Running your GNOME application
sv: Köra ditt GNOME-program

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:
sv: Nu då vi skapat vårt första GNOME-program så är det dags att testa det! Du behöver inte kompilera ditt program eller installera någon speciell programvara för detta, GNOME har gjs inbyggt för att låta det köra GNOME-skalet. Spara bara <file>hellognome.html</file> och vårt faktiska program, <file>hellognome.js</file>, till en katalog som du kan komma åt med terminalen. (De öppnas vanligen i din hemkatalog, den som har ditt användarnamn som namn.) Öppna efter det en terminal, gå dit, och skriv:

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.
sv: Du bör se mer eller mindre samma skärmbild som tidigare, med en knapp som du kan klicka på för att få ett kort meddelande att dyka upp.

note: (itstool) path: note/p
en: You can use the terminal command
sv: Du kan använda terminalkommandot

note: (itstool) path: note/screen
en:  <output style="prompt">$ </output>cd <var>(directory name)</var>
sv:  <output style="prompt">$ </output>cd <var>(katalognamn)</var>

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.
sv: <link xref="02_welcome_to_the_grid.js">Fortsätt till nästa handledning</link> för att lära dig hur du bygger ”inhemska” GNOME-program som ser ut och känns som de andra, istället för en webbvy med HTML-kod inuti. Eller ta en titt på några <link xref="beginner.js#samples">kodexempel</link>, om du vill se exempelkod för varje Gtk-komponent.

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.
sv: Slutligen, om du bara vill bygga GNOME-program med Javascript-bibliotek som designats för webben så kan du praktiskt taget sluta här och gå och göra det! Ta en titt på <link xref="beginner.js#tutorials">de senare handledningarna</link> om du vill se hur du kan skapa en .desktop-fil för ditt program, vilken låter det dyka upp i ditt skrivbords aktivitetsmeny med alla dina andra program.

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    imports.gi.versions.WebKit2 = '4.0';
    
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Webkit = imports.gi.WebKit2;
    
    class HelloGNOME {
    
        // 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,
                title: "Welcome to GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });
    
            // 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));
    
            // Put the webview into the window
            this._window.add (this._webView);
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
    };
    
    // Run the application
    let app = new HelloGNOME ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    imports.gi.versions.WebKit2 = '4.0';
    
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    const Webkit = imports.gi.WebKit2;
    
    class HelloGNOME {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application ();
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                title: "Välkommen till GNOME",
                default_height: 200,
                default_width: 400,
                window_position: Gtk.WindowPosition.CENTER });
    
            // Skapa en webbvy för att visa webbapplikationen
            this._webView = new Webkit.WebView ();
    
            // Stoppa webbapplikationen i webbvyn
            this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
                "/hellognome.html", null));
    
            // Stoppa webbvyn i fönstret
            this._window.add (this._webView);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
    };
    
    // Kör programmet
    let app = new HelloGNOME ();
    app.application.run (ARGV);

[ctx: link]
note: (itstool) path: info/title
en: Hello World (C)
sv: Hej världen (C)

note: (itstool) path: info/desc
en: Creating a small "Hello, World" application using GTK+.
sv: Skapa ett litet ”Hej världen”-program med GTK+.

note: (itstool) path: page/title
en: Hello world
sv: Hej världen

note: (itstool) path: note/p
en: For a detailed walk-through of creating a GTK+ dialog in C, see <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Getting Started with GTK+</link>
sv: För en detaljerad genomgång om hur man skapar en GTK+-dialog i C, se <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Getting Started with GTK+</link>

note: (itstool) path: page/p
en: Writing a hello world GTK+ dialog in C can be done as seen in the code sample below:
sv: Att skriva en GTK+-dialog av ”Hej världen”-typ i C kan göras som i kodexemplet nedan:

note: (itstool) path: page/code
en: 
        #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication* app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *label;
    
      window = gtk_application_window_new (app);
      label = gtk_label_new ("Hello GNOME!");
      gtk_container_add (GTK_CONTAINER (window), label);
      gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
      gtk_window_set_default_size (GTK_WINDOW (window), 200, 100);
      gtk_widget_show_all (window);
    }
    
    int
    main (int    argc,
          char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new (NULL, G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }
sv: 
        #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication* app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *label;
    
      window = gtk_application_window_new (app);
      label = gtk_label_new ("Hej GNOME!");
      gtk_container_add (GTK_CONTAINER (window), label);
      gtk_window_set_title (GTK_WINDOW (window), "Välkommen till GNOME");
      gtk_window_set_default_size (GTK_WINDOW (window), 200, 100);
      gtk_widget_show_all (window);
    }
    
    int
    main (int    argc,
          char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new (NULL, G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
    
      return status;
    }

note: (itstool) path: page/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal. We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a gtk_application_window_new. The window title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding. The code above will create a dialog window similar to what can be seen below:
sv: GtkApplication initierar GTK+. Det ansluter också knappen <gui>x</gui> som genereras automatiskt tillsammans med fönstret till signalen ”destroy”. Vi kan börja med att bygga vårt första fönster. Vi gör detta genom att skapa en variabel med namnet <var>window</var> och tilldela den ett gtk_application_window_new. Fönstrets titel kan vara vilken sträng som du vill. För att vara på den säkra sidan är det bäst att hålla sig till UTF-8-kodning. Koden ovan kommer skapa ett dialogfönster som liknar det som kan ses nedan:

[ctx: text]
note: (itstool) path: info/title
en: Hello World (JavaScript)
sv: Hej världen (Javascript)

note: (itstool) path: info/desc
en: A basic "hello, world" application
sv: Ett grundläggande ”Hej världen”-program

note: (itstool) path: page/title
en: How to build, install and create a <file>tar.xz</file> of a Hello World program
sv: Hur du bygger, installerar och skapar en <file>tar.xz</file> för ett ”Hej världen”-program

note: (itstool) path: synopsis/p
en: This tutorial will demonstrate how to:
sv: Denna handledning kommer demonstrera hur du:

note: (itstool) path: item/p
en: create a small "Hello, World" application using JavaScript and GTK+
sv: skapar ett litet ”Hej världen”-program med Javascript och GTK+

note: (itstool) path: item/p
en: make the <file>.desktop</file> file
sv: gör <file>.desktop</file>-filen

note: (itstool) path: item/p
en: how to set up the build system
sv: konfigurerar byggsystemet

note: (itstool) path: section/title
en: Create the program
sv: Skapa programmet

note: (itstool) path: section/p
en: This needs to be the first line of your script:
sv: Detta måste vara den första raden i ditt skript:

note: (itstool) path: section/p
en: It tells the script to use <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs is a JavaScript binding for GNOME.
sv: Den säger till skriptet att använda <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs är en Javascript-bindning för GNOME.

note: (itstool) path: section/p
en: In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. Here we import the language bindings and GTK+, the library which contains the graphical widgets used to make GNOME applications.
sv: För att vårt skript ska fungera med GNOME behöver vi importera GNOME-bibliotek via GObject Introspection. Här importerar vi språkbindningarna och GTK+, biblioteket som innehåller de grafiska komponenterna som används för att göra GNOME-program.

note: (itstool) path: section/code
en: const Application = new Lang.Class({
        //A Class requires an explicit Name parameter. This is the Class Name.
        Name: 'Application',
    
        //create the application
        _init: function() {
            this.application = new Gtk.Application();
    
           //connect to 'activate' and 'startup' signals to handlers.
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //create the UI
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hello World!" });
        },
    
        //handler for 'activate' signal
        _onActivate: function() {
            //show the window and all child widgets
            this._window.show_all();
        },
    
        //handler for 'startup' signal
        _onStartup: function() {
            this._buildUI();
        }
    });
sv: const Application = new Lang.Class({
        //En Class kräver en explicit parameter Name. Detta är klassens namn.
        Name: 'Application',
    
        //skapa programmet
        _init: function() {
            this.application = new Gtk.Application();
    
           //anslut ”activate”- och ”startup”-signaler till hanterare.
           this.application.connect('activate', Lang.bind(this, this._onActivate));
           this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        //skapa användargränssnittet
        _buildUI: function() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hej världen!" });
        },
    
        //hanterare för ”activate”-signal
        _onActivate: function() {
            //visa fönstret och alla barnkomponenter
            this._window.show_all();
        },
    
        //hanterare för ”startup”-signal
        _onStartup: function() {
            this._buildUI();
        }
    });

note: (itstool) path: section/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
sv: GtkApplication initierar GTK+. Det ansluter också knappen <gui>x</gui> som genereras automatiskt tillsammans med fönstret till signalen ”destroy”.

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>_window</var> and assigning it a new Gtk.ApplicationWindow.
sv: Vi kan börja med att bygga vårt första fönster. Vi gör detta genom att skapa en variabel med namnet <var>_window</var> och tilldela den ett nytt Gtk.ApplicationWindow.

note: (itstool) path: section/p
en: We give the window a property called <var>title</var>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
sv: Vi ger fönstret en egenskap med namnet <var>title</var>. Titeln kan vara vilken sträng som du vill. För att vara på den säkra sidan är det bäst att hålla sig till UTF-8-kodning.

note: (itstool) path: section/p
en: Now we have a window which has a title and a working "close" button. Let's add the actual "Hello World" text.
sv: Nu har vi ett fönster som har en titel och en fungerande ”stäng”-knapp. Låt oss lägga till den faktiska texten ”Hej världen”.

note: (itstool) path: section/title
en: Label for the window
sv: Etikett för fönstret

note: (itstool) path: section/code
en: // Add a label widget to your window
    this.label = new Gtk.Label({ label: "Hello World" });
    this._window.add(this.label);
    this._window.set_default_size(200, 200);
sv: // Lägg till en etikettkomponent till ditt fönster
    this.label = new Gtk.Label({ label: "Hej världen" });
    this._window.add(this.label);
    this._window.set_default_size(200, 200);

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create and run the application:
sv: En textetikett är en av GTK+-komponenterna vi kan använda eftersom vi har importerat GTK+-biblioteket. För att använda den skapar vi en ny variabel med namnet label, och tilldelar den en ny Gtk.Label. Sedan ger vi den egenskaper inom klammerparenteserna {}. I detta fall ställer vi in texten som etiketten ska innehålla. Slutligen skapar vi och kör programmet:

note: (itstool) path: section/code
en: //run the application
    let app = new Application();
    app.application.run(ARGV);
sv: //kör programmet
    let app = new Application();
    app.application.run(ARGV);

note: (itstool) path: section/p
en: Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.
sv: Gtk.ApplicationWindow kan endast innehålla en komponent åt gången. För att konstruera mer avancerade program behöver du skapa en behållarkomponent som Gtk.Grid inuti fönstret, och sedan lägga till alla andra komponenter till den.

note: (itstool) path: section/p
en: The complete file:
sv: Den fullständiga filen:

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    const Lang = imports.lang;
    
    imports.gi.versions.Gtk = '3.0'
    const Gtk = imports.gi.Gtk;
    
    class Application {
    
        //create the application
        constructor() {
            this.application = new Gtk.Application();
    
           //connect to 'activate' and 'startup' signals to handlers.
           this.application.connect('activate', this._onActivate.bind(this));
           this.application.connect('startup', this._onStartup.bind(this));
        }
    
        //create the UI
        _buildUI() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hello World!" });
            this._window.set_default_size(200, 200);
            this.label = new Gtk.Label({ label: "Hello World" });
            this._window.add(this.label);
        }
    
        //handler for 'activate' signal
        _onActivate() {
            //show the window and all child widgets
            this._window.show_all();
        }
    
        //handler for 'startup' signal
        _onStartup() {
            this._buildUI();
        }
    };
    
    //run the application
    let app = new Application();
    app.application.run(ARGV);
sv: #!/usr/bin/gjs
    
    const Lang = imports.lang;
    
    imports.gi.versions.Gtk = '3.0'
    const Gtk = imports.gi.Gtk;
    
    class Application {
    
        //skapa programmet
        constructor() {
            this.application = new Gtk.Application();
    
           //anslut ”activate”- och ”startup”-signaler till hanterare.
           this.application.connect('activate', this._onActivate.bind(this));
           this.application.connect('startup', this._onStartup.bind(this));
        }
    
        //skapa användargränssnittet
        _buildUI() {
            this._window = new Gtk.ApplicationWindow({ application: this.application,
                                                       title: "Hej världen!" });
            this._window.set_default_size(200, 200);
            this.label = new Gtk.Label({ label: "Hej världen" });
            this._window.add(this.label);
        }
    
        //hanterare för ”activate”-signal
        _onActivate() {
            //visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
        //hanterare för ”startup”-signal
        _onStartup() {
            this._buildUI();
        }
    };
    
    //kör programmet
    let app = new Application();
    app.application.run(ARGV);

note: (itstool) path: section/title
en: Running the application from terminal
sv: Köra programmet från terminalen

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.js. Then open Terminal, go to the folder where your application is stored and run:
sv: För att köra detta program, spara det först som hello-world.js. Öppna sedan Terminal, gå till mappen där ditt program lagrats och kör:

note: (itstool) path: section/title
en: The <file>.desktop.in</file> file
sv: <file>.desktop.in</file>-filen

note: (itstool) path: note/p
en: Before continuing, resave <file>hello-world.js</file> as <file>hello-world</file>. Then run this in the command line:
sv: Innan du fortsätter, spara om <file>hello-world.js</file> som <file>hello-world</file>. Kör sedan följande på kommandoraden:

note: (itstool) path: section/p
en: The example shows you the minimum requirements for a <code>.desktop.in</code> file.
sv: Exemplet visar dig minimikraven för en <code>.desktop.in</code>-fil.

note: (itstool) path: section/code
en: [Desktop Entry]
    Version=1.0
    Encoding=UTF-8
    Name=Hello World
    Comment=Say Hello
    Exec=@prefix@/bin/hello-world
    Icon=application-default-icon
    Terminal=false
    Type=Application
    StartupNotify=true
    Categories=GNOME;GTK;Utility;
sv: [Desktop Entry]
    Version=1.0
    Encoding=UTF-8
    Name=Hello World
    Comment=Säg hej
    Exec=@prefix@/bin/hello-world
    Icon=application-default-icon
    Terminal=false
    Type=Application
    StartupNotify=true
    Categories=GNOME;GTK;Utility;

note: (itstool) path: section/p
en: Save this as <file>hello-world.desktop.in</file>. Now let's go through some parts of the <code>.desktop.in</code> file.
sv: Spara detta som <file>hello-world.desktop.in</file>. Låt oss nu gå igenom några delar av <code>.desktop.in</code>-filen.

note: (itstool) path: item/p
en: The application name.
sv: Programmets namn.

note: (itstool) path: item/p
en: A short description of the application.
sv: En kort beskrivning av programmet.

note: (itstool) path: item/p
en: Specifies a command to execute when you choose the application from the menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care of the rest.
sv: Anger ett kommando att köra när du väljer programmet från menyn. I detta exempel säger exec bara till var filen <file>hello-world</file> kan hittas, så tar filen hand om resten.

note: (itstool) path: item/p
en: Specifies whether the command in the Exec key runs in a terminal window.
sv: Anger huruvida kommandot i Exec-nyckeln körs i ett terminalfönster.

note: (itstool) path: section/p
en: To put your application into the appropriate category, you need to add the necessary categories to the Categories line. More information on the different categories can be found in the <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menu specification</link>.
sv: För att lägga ditt program i rätt kategori behöver du lägga till de nödvändiga kategorierna till raden Categories. Mer information om det olika kategorierna kan hittas i <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menyspecifikationen</link>.

note: (itstool) path: section/p
en: In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the .desktop.in file, on line 7. More information on icons in: <link href="https://wiki.gnome.org/Initiatives/GnomeGoals/AppIcon">Installing Icons for Themes</link> and <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.
sv: I detta exempel använder vi en befintlig ikon. För en anpassad ikon behöver du ha en .svg-fil av din ikon, lagrad i <file>/usr/share/icons/hicolor/scalable/apps</file>. Skriv namnet på din ikonfil i .desktop.in-filen, på rad 7. Mer information om ikoner finns i: <link href="https://wiki.gnome.org/Initiatives/GnomeGoals/AppIcon">Installing Icons for Themes</link> och <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">på freedesktop.org: Specifications/icon-theme-spec</link>.

note: (itstool) path: section/title
en: The build system
sv: Byggsystemet

note: (itstool) path: section/p
en: To make your application truly a part of the GNOME 3 system you need to install it with the help of autotools. The autotools build will install all the necessary files to all the right places.
sv: För att verkligen göra ditt program till en del av GNOME 3-systemet behöver du installera det med hjälp av autotools. Detta autotools-bygge kommer installera alla nödvändiga filer till rätt plats.

note: (itstool) path: section/p
en: For this you need to have the following files:
sv: För detta behöver du ha följande filer:

note: (itstool) path: section/code
en: #!/bin/sh
    
    set -e
    
    test -n "$srcdir" || srcdir=`dirname "$0"`
    test -n "$srcdir" || srcdir=.
    
    olddir=`pwd`
    cd "$srcdir"
    
    # This will run autoconf, automake, etc. for us
    autoreconf --force --install
    
    cd "$olddir"
    
    if test -z "$NOCONFIGURE"; then
      "$srcdir"/configure "$@"
    fi
sv: #!/bin/sh
    
    set -e
    
    test -n "$srcdir" || srcdir=`dirname "$0"`
    test -n "$srcdir" || srcdir=.
    
    olddir=`pwd`
    cd "$srcdir"
    
    # Detta kommer köra autoconf, automake o.s.v. åt oss
    autoreconf --force --install
    
    cd "$olddir"
    
    if test -z "$NOCONFIGURE"; then
      "$srcdir"/configure "$@"
    fi

note: (itstool) path: section/p
en: After the <file>autogen.sh</file> file is ready and saved, run:
sv: Efter att filen <file>autogen.sh</file> är klar och sparad, kör:

note: (itstool) path: section/p
en: Information users should read first. This file can be blank.
sv: Information som användare bör läsa först. Denna fil kan vara tom.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and permissions, create a <file>README</file> file with installation instructions. Below is a sample of what suitable README instructions may look like:
sv: När du har filerna <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> och <file>autogen.sh</file> med rätt information och rättigheter, skapa en <file>README</file>-fil med installationsinstruktioner. Nedan är ett exempel på hur lämpliga README-instruktioner kan se ut:

[ctx: text]
note: (itstool) path: info/title
en: Hello World (Python)
sv: Hej världen (Python)

note: (itstool) path: item/p
en: create a small "Hello, World" application using Python and GTK+
sv: skapa ett litet ”Hej världen”-program med Python och GTK+

note: (itstool) path: section/code
en: class MyWindow(Gtk.ApplicationWindow):
    
        # constructor for a Gtk.ApplicationWindow
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Hello World!", application=app)
            self.set_default_size(200, 100)
    
    class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
sv: class MyWindow(Gtk.ApplicationWindow):
    
        # konstruktor för ett Gtk.ApplicationWindow
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Hej världen!", application=app)
            self.set_default_size(200, 100)
    
    class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)

note: (itstool) path: section/p
en: Gtk.Application initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
sv: Gtk.Application initierar GTK+. Det ansluter också knappen <gui>x</gui> som genereras automatiskt tillsammans med fönstret till signalen ”destroy”.

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a class called <var>MyWindow</var> and assigning it a Gtk.ApplicationWindow.
sv: Vi kan börja med att bygga vårt första fönster. Vi gör detta genom att skapa en klass med namnet <var>MyWindow</var> och tilldela den ett Gtk.ApplicationWindow.

note: (itstool) path: section/code
en: # Add a label widget to your window
    
            # create a label
            label = Gtk.Label()
    
            # set the text of the label
            label.set_text("Hello GNOME!")
    
            # add the label to the window
            self.add(label)
sv: # Lägg till en etikettkomponent till ditt fönster
    
            # skapa en etikett
            label = Gtk.Label()
    
            # ställ in etikettens text
            label.set_text("Hej GNOME!")
    
            # lägg till etiketten till fönstret
            self.add(label)

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a variable called <var>label</var> and set the text that the label will hold. Finally, we create and run the application:
sv: En textetikett är en av GTK+-komponenterna vi kan använda eftersom vi har importerat GTK+-biblioteket. För att använda den skapar vi en ny variabel med namnet <var>label</var>, och ställer in texten som etiketten ska innehålla. Slutligen skapar vi och kör programmet:

note: (itstool) path: section/code
en: #run the application
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: #kör programmet
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # constructor for a Gtk.ApplicationWindow
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
            self.set_default_size(200, 100)
    
            # create a label
            label = Gtk.Label()
            # set the text of the label
            label.set_text("Hello GNOME!")
            # add the label to the window
            self.add(label)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # konstruktor för ett Gtk.ApplicationWindow
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Välkommen till GNOME", application=app)
            self.set_default_size(200, 100)
    
            # skapa en etikett
            label = Gtk.Label()
            # ställ in etikettens text
            label.set_text("Hej GNOME!")
            # lägg till etiketten till fönstret
            self.add(label)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.py. Then open Terminal, go to the folder where your application is stored and run:
sv: För att köra detta program, spara det först som hello-world.py. Öppna sedan Terminal, gå till mappen där ditt program lagrats och kör:

note: (itstool) path: section/p
en: Now let's go through some parts of the <code>.desktop.in</code> file.
sv: Låt oss nu gå igenom några delar av <code>.desktop.in</code>-filen.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
sv: När du har filerna <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> och <file>autogen.sh</file> med rätt information och rättigheter, kan filen <file>README</file> innehålla följande instruktioner:

[ctx: text]
note: (itstool) path: info/title
en: Hello World (Vala)
sv: Hej världen (Vala)

note: (itstool) path: item/p
en: create a small "Hello, World" application using GTK+
sv: skapa ett litet ”Hej världen”-program med GTK+

note: (itstool) path: section/code
en: class MyApplication : Gtk.Application {
            protected override void activate () {
                    var window = new Gtk.ApplicationWindow (this);
                    window.set_title ("Welcome to GNOME");
                    window.set_default_size (200, 100);
                    window.show_all ();
            }
    }
sv: class MyApplication : Gtk.Application {
            protected override void activate () {
                    var window = new Gtk.ApplicationWindow (this);
                    window.set_title ("Välkommen till GNOME");
                    window.set_default_size (200, 100);
                    window.show_all ();
            }
    }

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a new Gtk.ApplicationWindow.
sv: Vi kan börja med att bygga vårt första fönster. Vi gör detta genom att skapa en variabel med namnet <var>window</var> och tilldela den ett nytt Gtk.ApplicationWindow.

note: (itstool) path: section/p
en: We give the window a title using <code>set_title</code>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
sv: Vi ger fönstret en titel med <code>set_title</code>. Titeln kan vara vilken sträng som du vill. För att vara på den säkra sidan är det bäst att hålla sig till UTF-8-kodning.

note: (itstool) path: section/code
en: var label = new Gtk.Label ("Hello GNOME!");
                    window.add (label);
sv: var label = new Gtk.Label ("Hej GNOME!");
                    window.add (label);

note: (itstool) path: section/p
en: Finally, we create and run the application:
sv: Slutligen skapar och kör vi programmet:

note: (itstool) path: section/code
en: public class MyApplication : Gtk.Application {
    	protected override void activate () {
    		var window = new Gtk.ApplicationWindow (this);
    		var label = new Gtk.Label ("Hello GNOME!");
    		window.add (label);
    		window.set_title ("Welcome to GNOME");
    		window.set_default_size (200, 100);
    		window.show_all ();
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: public class MyApplication : Gtk.Application {
    	protected override void activate () {
    		var window = new Gtk.ApplicationWindow (this);
    		var label = new Gtk.Label ("Hej GNOME!");
    		window.add (label);
    		window.set_title ("Välkommen till GNOME");
    		window.set_default_size (200, 100);
    		window.show_all ();
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.vala. Then open Terminal, go to the folder where your application is stored.
sv: För att köra detta program, spara det först som hello-world.vala. Öppna sedan Terminal och gå till mappen där ditt program lagrats.

note: (itstool) path: section/p
en: Compile the program:
sv: Kompilera programmet:

note: (itstool) path: section/p
en: Run the program:
sv: Kör programmet:

note: (itstool) path: section/p
en: When you have the <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
sv: När du har filerna <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> och <file>autogen.sh</file> med rätt information och rättigheter, kan filen <file>README</file> innehålla följande instruktioner:

note: (itstool) path: info/desc
en: A widget displaying an image
sv: En komponent som visar en bild

note: (itstool) path: page/p
en: This GtkApplication displays an image file from the current directory.
sv: Denna GtkApplication visar en bildfil från aktuell katalog.

note: (itstool) path: note/p
en: If the image file isn't loaded successfully, the image will contain a "broken image" icon. The <file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite picture!
sv: Om bildfilen inte lästes in korrekt kommer bilden innehålla en ”trasig bild”-ikon. <file>filnamn.png</file> behöver vara i aktuell katalog för att denna kod ska fungera. Använd din favoritbild!

note: (itstool) path: page/code
en: #include &lt;gtk/gtk.h&gt;
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *image;
    
      /*Create a window with a title and a default size*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Welcome to GNOME");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 300);
    
      image = gtk_image_new_from_file ("gnome-image.png");
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (image));
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
sv: #include &lt;gtk/gtk.h&gt;
    
    
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
      GtkWidget *image;
    
      /*Skapa ett fönster med en titel och en standardstorlek*/
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Välkommen till GNOME");
      gtk_window_set_default_size (GTK_WINDOW (window), 300, 300);
    
      image = gtk_image_new_from_file ("gnome-image.png");
    
      gtk_container_add (GTK_CONTAINER (window), GTK_WIDGET (image));
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Image (JavaScript)
sv: Image (Javascript)

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class ImageExample {
    
        /* Create the application itself
           This boilerplate code is needed to build any GTK+ application. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsimage',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal initializes menus and 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,
                title: "Welcome to GNOME",
                default_height: 300,
                default_width: 300
            });
    
            // Create the label
            this.jsimage = new Gtk.Image ({file: "gnome-image.png"});
            this._window.add (this.jsimage);
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    };
    
    // Run the application
    let app = new ImageExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class ImageExample {
    
        /* Skapa programmet i sig
           Denna standardkod behövs för att bygga alla GTK+-program. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsimage',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Välkommen till GNOME",
                default_height: 300,
                default_width: 300
            });
    
            // Skapa etiketten
            this.jsimage = new Gtk.Image ({file: "gnome-image.png"});
            this._window.add (this.jsimage);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    };
    
    // Kör programmet
    let app = new ImageExample ();
    app.application.run (ARGV);

note: (itstool) path: note/p
en: If the image file is not loaded successfully, the image will contain a "broken image" icon. <file>filename.png</file> needs to be in the current directory for this code to work.
sv: Om bildfilen inte lästes in korrekt kommer bilden innehålla en ”trasig bild”-ikon. <file>filnamn.png</file> behöver vara i aktuell katalog för att denna kod ska fungera.

note: (itstool) path: section/code
en: 
      from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # create a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
            self.set_default_size(300, 300)
    
            # create an image
            image = Gtk.Image()
            # set the content of the image as the file filename.png
            image.set_from_file("gnome-image.png")
            # add the image to the window
            self.add(image)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: 
      from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # create a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Välkommen till GNOME", application=app)
            self.set_default_size(300, 300)
    
            # skapa en bild
            image = Gtk.Image()
            # ställ in bildens innehåll till filen filnamn.png
            image.set_from_file("gnome-image.png")
            # lägg till bilden till fönstret
            self.add(image)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the image as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
sv: Ett annat sätt att få det som vi har i exemplet är att skapa bilden som en instans av en annan klass och lägga till den i instansen av <code>MyWindow</code> i metoden <code>do_activate(self)</code>:

note: (itstool) path: section/code
en: 
        # a class to create a window
        class MyWindow(Gtk.ApplicationWindow):
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
            self.set_default_size(300, 300)
    
        # a class to create an image
        class MyImage(Gtk.Image):
        def __init__(self):
            Gtk.Image.__init__(self)
            self.set_from_file("gnome-image.png")
    
        class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            # create an instance of MyWindow
            win = MyWindow(self)
            # create an instance of MyImage and add it to the window
            win.add(MyImage())
            # show the window and everything on it
            win.show_all()
sv: 
        # en klass för att skapa ett fönster
        class MyWindow(Gtk.ApplicationWindow):
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Välkommen till GNOME", application=app)
            self.set_default_size(300, 300)
    
        # en klass för att skapa en bild
        class MyImage(Gtk.Image):
        def __init__(self):
            Gtk.Image.__init__(self)
            self.set_from_file("gnome-image.png")
    
        class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            # skapa en instans av MyWindow
            win = MyWindow(self)
            # skapa en instans av MyImage och lägg till den till fönstret
            win.add(MyImage())
            # visa fönstret och allt som finns i det
            win.show_all()

note: (itstool) path: note/p
en: To use this code snippet, you will need to add the code that imports <code>Gtk</code> and <code>GdkPixbuf</code> from <code>gi.repository</code> and lines that instantiate the <code>MyApplication</code> window.
sv: För att använda denna kodsnutt kommer du behöva lägga till koden som importerar <code>Gtk</code> och <code>GdkPixbuf</code> från <code>gi.repository</code> och rader som instansierar <code>MyApplication</code>-fönstret.

note: (itstool) path: section/title
en: Useful methods for an Image widget
sv: Användbara metoder för en Image-komponent

note: (itstool) path: item/p
en: To load an image over a network use <code>set_from_pixbuf(pixbuf)</code>, where <code>pixbuf</code> is a <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>.
sv: För att läsa in en bild över ett nätverk, använd <code>set_from_pixbuf(pixbuf)</code>, där <code>pixbuf</code> är en <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>.

note: (itstool) path: page/code
en: public class MyWindow : Gtk.ApplicationWindow {
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Welcome to GNOME");
    
    		var image = new Gtk.Image ();
    		image.set_from_file ("gnome-image.png");
    		this.add (image);
    		this.set_default_size (300, 300);
    	}
    }
    
    public class MyApplication : Gtk.Application {
    	protected override void activate () {
    		new MyWindow (this).show_all ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: public class MyWindow : Gtk.ApplicationWindow {
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Välkommen till GNOME");
    
    		var image = new Gtk.Image ();
    		image.set_from_file ("gnome-image.png");
    		this.add (image);
    		this.set_default_size (300, 300);
    	}
    }
    
    public class MyApplication : Gtk.Application {
    	protected override void activate () {
    		new MyWindow (this).show_all ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (C)
sv: Bildvisare (C)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" Gtk application.
sv: Lite mer än ett enkelt ”Hej världen”-program i Gtk.

note: (itstool) path: page/title
en: Image viewer
sv: Bildvisare

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
sv: I denna handledning kommer du lära dig:

note: (itstool) path: item/p
en: Some basic concepts of C/GObject programming
sv: Några grundläggande koncept i C/GObject-programmering

note: (itstool) path: item/p
en: How to write a Gtk application in C
sv: Hur du skriver ett Gtk-program i C

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
sv: Välj <gui>GTK+ (enkel)</gui> från fliken <gui>C</gui>, klicka på <gui>Fortsätt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>image-viewer</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
sv: Säkerställ att <gui>Använd GtkBuilder för användargränssnitt</gui> är inaktiverat då vi kommer skapa användargränssnittet manuellt i denna handledning. Se handledningen <link xref="guitar-tuner.c">Gitarrstämmare</link> om du vill lära dig hur du använder gränssnittsbyggaren.

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new (empty) window and connects a signal to exit the application when that window is closed.
sv: Funktionen <code>create_window</code> skapar ett nytt (tomt) fönster och ansluter en signal för att avsluta programmet då det fönstret stängs.

note: (itstool) path: section/title
en: Creating the user interface
sv: Skapa användargränssnittet

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <code>GtkContainer</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>GtkBox</code>:
sv: Nu kommer vi blåsa liv i det tomma fönstret. GTK organiserar användargränssnittet med behållare av typ <code>GtkContainer</code> som kan innehålla andra komponenter och till och med andra behållare. Här kommer vi använda den enklaste tillgängliga behållaren, en <code>GtkBox</code>:

note: (itstool) path: section/code
en: 
    static GtkWidget*
    create_window (void)
    {
    	GtkWidget *window;
    	GtkWidget *button;
    	GtkWidget *image;
    	GtkWidget *box;
    
    	/* Set up the UI */
    	window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    	gtk_window_set_title (GTK_WINDOW (window), "image-viewer-c");
    
    	box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5);
    	button = gtk_button_new_with_label (_("Open image"));
    	image = gtk_image_new ();
    
    	gtk_box_pack_start (GTK_BOX (box), image, TRUE, TRUE, 0);
    	gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);
    
    	gtk_container_add (GTK_CONTAINER (window), box);
    
    	/* Connect signals */
    
    	/* Show open dialog when opening a file */
    	g_signal_connect (button, "clicked", G_CALLBACK (on_open_image), image);
    
    	/* Exit when the window is closed */
    	g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
    
    	return window;
    }
sv: 
    static GtkWidget*
    create_window (void)
    {
    	GtkWidget *window;
    	GtkWidget *button;
    	GtkWidget *image;
    	GtkWidget *box;
    
    	/* Konfigurera användargränssnittet */
    	window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    	gtk_window_set_title (GTK_WINDOW (window), "image-viewer-c");
    
    	box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 5);
    	button = gtk_button_new_with_label (_("Öppna bild"));
    	image = gtk_image_new ();
    
    	gtk_box_pack_start (GTK_BOX (box), image, TRUE, TRUE, 0);
    	gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);
    
    	gtk_container_add (GTK_CONTAINER (window), box);
    
    	/* Anslut signaler */
    
    	/* Visa öppna-dialog då en fil öppnas */
    	g_signal_connect (button, "clicked", G_CALLBACK (on_open_image), image);
    
    	/* Avsluta då fönstret stängs */
    	g_signal_connect (window, "destroy", G_CALLBACK (gtk_main_quit), NULL);
    
    	return window;
    }

note: (itstool) path: item/p
en: The last <code>g_signal_connect()</code> makes sure that the application exits when the window is closed.
sv: Den sista <code>g_signal_connect()</code> säkerställer att programmet avslutas när fönstret stängs.

note: (itstool) path: section/title
en: Showing the image
sv: Visa bilden

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>create_window()</code> method.
sv: Vi kommer nu definiera signalhanteraren för <em>clicked</em>-signalen eller knappen vi nämnde tidigare. Lägg till denna kod före <code>create_window()</code>-metoden.

note: (itstool) path: section/code
en: 
    static void
    on_open_image (GtkButton* button, gpointer user_data)
    {
    	GtkWidget *image = GTK_WIDGET (user_data);
    	GtkWidget *toplevel = gtk_widget_get_toplevel (image);
    	GtkFileFilter *filter = gtk_file_filter_new ();
    	GtkWidget *dialog = gtk_file_chooser_dialog_new (_("Open image"),
    	                                                 GTK_WINDOW (toplevel),
    	                                                 GTK_FILE_CHOOSER_ACTION_OPEN,
    	                                                 GTK_STOCK_OK, GTK_RESPONSE_ACCEPT,
    	                                                 GTK_STOCK_CANCEL, GTK_RESPONSE_CANCEL,
    	                                                 NULL);
    
    	gtk_file_filter_add_pixbuf_formats (filter);
    	gtk_file_chooser_add_filter (GTK_FILE_CHOOSER (dialog),
    	                             filter);
    
    	switch (gtk_dialog_run (GTK_DIALOG (dialog)))
    	{
    		case GTK_RESPONSE_ACCEPT:
    		{
    			gchar *filename =
    				gtk_file_chooser_get_filename (GTK_FILE_CHOOSER (dialog));
    			gtk_image_set_from_file (GTK_IMAGE (image), filename);
    			break;
    		}
    		default:
    			break;
    	}
    	gtk_widget_destroy (dialog);
    }
sv: 
    static void
    on_open_image (GtkButton* button, gpointer user_data)
    {
    	GtkWidget *image = GTK_WIDGET (user_data);
    	GtkWidget *toplevel = gtk_widget_get_toplevel (image);
    	GtkFileFilter *filter = gtk_file_filter_new ();
    	GtkWidget *dialog = gtk_file_chooser_dialog_new (_("Öppna bild"),
    	                                                 GTK_WINDOW (toplevel),
    	                                                 GTK_FILE_CHOOSER_ACTION_OPEN,
    	                                                 GTK_STOCK_OK, GTK_RESPONSE_ACCEPT,
    	                                                 GTK_STOCK_CANCEL, GTK_RESPONSE_CANCEL,
    	                                                 NULL);
    
    	gtk_file_filter_add_pixbuf_formats (filter);
    	gtk_file_chooser_add_filter (GTK_FILE_CHOOSER (dialog),
    	                             filter);
    
    	switch (gtk_dialog_run (GTK_DIALOG (dialog)))
    	{
    		case GTK_RESPONSE_ACCEPT:
    		{
    			gchar *filename =
    				gtk_file_chooser_get_filename (GTK_FILE_CHOOSER (dialog));
    			gtk_image_set_from_file (GTK_IMAGE (image), filename);
    			break;
    		}
    		default:
    			break;
    	}
    	gtk_widget_destroy (dialog);
    }

note: (itstool) path: section/p
en: This is a bit more complicated than anything we've attempted so far, so let's break it down:
sv: Det här är lite mer komplicerat än något som vi försökt så här långt, så låt oss dela upp det:

note: (itstool) path: item/p
en: Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
sv: Observera att vi använder <em>standard</em>knappnamn från Gtk, istället för att manuellt skriva in ”Avbryt” eller ”Öppna”. Fördelen med att använda standardnamn är att knappetiketterna redan kommer vara översatta till användarens språk.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.c">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="image-viewer/image-viewer.c">referenskod</link>.

note: (itstool) path: item/p
en: Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.
sv: Låt användaren välja en katalog snarare än en fil, och tillhandahåll kontroller för att gå igenom alla bilderna i en katalog.

note: (itstool) path: item/p
en: Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.
sv: Tillämpa slumpmässiga filter och effekter till bilden då den läses in och låt användaren spara den ändrade bilden.

note: (itstool) path: item/p
en: <link href="http://www.gegl.org/api.html">GEGL</link> provides powerful image manipulation capabilities.
sv: <link href="http://www.gegl.org/api.html">GEGL</link> har kraftfulla bildmanipuleringsförmågor.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTKmm application.
sv: Lite mer än ett enkelt ”Hej världen”-program med GTKmm.

note: (itstool) path: item/p
en: Some basic concepts of C++/GObject programming
sv: Några grundläggande koncept i C++/GObject-programmering

note: (itstool) path: item/p
en: How to write a Gtk application in C++
sv: Hur du skriver ett Gtk-program i C++

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
sv: Välj <gui>GTKmm (enkel)</gui> från fliken <gui>C++</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>image-viewer</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.cpp">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
sv: Säkerställ att <gui>Använd GtkBuilder för användargränssnitt</gui> är inaktiverat då vi kommer skapa användargränssnittet manuellt i denna handledning. Se handledningen <link xref="guitar-tuner.cpp">Gitarrstämmare</link> om du vill lära dig hur du använder gränssnittsbyggaren.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/main.cc</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:

note: (itstool) path: item/p
en: The <code>main</code> function creates a new (empty) window and sets the window title.
sv: <code>main</code>-funktionen skapar ett nytt (tomt) fönster och ställer in fönstertiteln.

note: (itstool) path: section/code
en: 
    int
    main (int argc, char *argv[])
    {
    	Gtk::Main kit(argc, argv);
    
    	Gtk::Window main_win;
    	main_win.set_title ("image-viewer-cpp");
    
    	Gtk::Box* box = Gtk::manage(new Gtk::Box());
    	box-&gt;set_orientation (Gtk::ORIENTATION_VERTICAL);
    	box-&gt;set_spacing(6);
    	main_win.add(*box);
    
    	image = Gtk::manage(new Gtk::Image());
    	box-&gt;pack_start (*image, true, true);
    
    	Gtk::Button* button = Gtk::manage(new Gtk::Button("Open Image…"));
    	button-&gt;signal_clicked().connect (
    		sigc::ptr_fun(&amp;on_open_image));
    	box-&gt;pack_start (*button, false, false);
    
    	main_win.show_all_children();
    	kit.run(main_win);
    
    	return 0;
    }
sv: 
    int
    main (int argc, char *argv[])
    {
    	Gtk::Main kit(argc, argv);
    
    	Gtk::Window main_win;
    	main_win.set_title ("image-viewer-cpp");
    
    	Gtk::Box* box = Gtk::manage(new Gtk::Box());
    	box-&gt;set_orientation (Gtk::ORIENTATION_VERTICAL);
    	box-&gt;set_spacing(6);
    	main_win.add(*box);
    
    	image = Gtk::manage(new Gtk::Image());
    	box-&gt;pack_start (*image, true, true);
    
    	Gtk::Button* button = Gtk::manage(new Gtk::Button("Öppna bild…"));
    	button-&gt;signal_clicked().connect (
    		sigc::ptr_fun(&amp;on_open_image));
    	box-&gt;pack_start (*button, false, false);
    
    	main_win.show_all_children();
    	kit.run(main_win);
    
    	return 0;
    }

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.cc">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="image-viewer/image-viewer.cc">referenskod</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (JavaScript)
sv: Bildvisare (Javascript)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK+. Includes an introduction to the JavaScript language.
sv: Lite mer än ett enkelt ”Hej världen”-program - skriv en bildvisare i GTK+. Inkluderar en introduktion till språket Javascript.

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:
sv: I denna handledning kommer vi skriva ett väldigt enkelt GTK-program som läser in och visar en bildfil. Du kommer lära dig hur du:

note: (itstool) path: item/p
en: Write a basic GTK user interface in JavaScript
sv: Skriver ett enkelt GTK-användargränssnitt i Javascript

note: (itstool) path: item/p
en: Deal with events by connecting signals to signal handlers
sv: Hanterar händelser genom att ansluta signaler till signalhanterare

note: (itstool) path: item/p
en: Lay out GTK user interfaces using containers
sv: Gör layouter för GTK-användargränssnitt genom att använda behållare

note: (itstool) path: item/p
en: Load and display image files
sv: Läser in och visar bildfiler

note: (itstool) path: item/p
en: An installed copy of the <em>gjs</em> interpreter
sv: En installerad kopia av <em>gjs</em>-tolken

note: (itstool) path: item/p
en: Basic knowledge of any object-orientated programming language
sv: Grundläggande kunskap i något objektorienterat programmeringsspråk

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
sv: Välj <gui>Allmän Javascript</gui> från fliken <gui>JS</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>image-viewer</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/main.js</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Den innehåller väldigt enkel exempelkod.

note: (itstool) path: section/title
en: JavaScript basics: Hello World
sv: Javascript-grunder: Hej världen

note: (itstool) path: section/p
en: Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:
sv: Låt oss innan vi börjar skriva bildvisaren ta reda på mer om hur Javascript används i GNOME. Din första kontakt med alla programmeringsspråk bör förstås vara Hej världen-programmet vilket redan kan hittas i <file>main.js</file>:

note: (itstool) path: section/code
en: print ("Hello world!");
sv: print ("Hej världen!");

note: (itstool) path: section/p
en: This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.
sv: Detta bör se naturligt ut för dig om du är bekant med nästan vilket annat programmeringsspråk som helst. Funktionen <code>print</code> anropas med argumentet <code>"Hej världen!"</code>, vilket kommer att skrivas ut på skärmen. Observera att varje rad kod avslutas med ett semikolon.

note: (itstool) path: section/title
en: Classes in JavaScript
sv: Klasser i Javascript

note: (itstool) path: section/p
en: This is the standard way to define a class in JavaScript:
sv: Detta är standardsättet att definiera en klass i Javascript:

note: (itstool) path: section/code
en: 
    function MyClass () {
      this._init ();
    }
    
    MyClass.prototype = {
    
      _init: function () {
        this.propertyA = "This is an object's field";
        this.propertyB = 10;
      },
    
      aMethod: function (arg1, arg2) {
        print ("inside aMethod: " + arg1 + " " + arg2);
      },
    
      dumpProperties: function () {
        print (this.propertyA);
        print (this.propertyB);
      }
    
    }
sv: 
    function MyClass () {
      this._init ();
    }
    
    MyClass.prototype = {
    
      _init: function () {
        this.propertyA = "Det här är ett objekts fält";
        this.propertyB = 10;
      },
    
      aMethod: function (arg1, arg2) {
        print ("inuti aMethod: " + arg1 + " " + arg2);
      },
    
      dumpProperties: function () {
        print (this.propertyA);
        print (this.propertyB);
      }
    
    }

note: (itstool) path: section/p
en: This defines a class called <code>MyClass</code>. Let's go through each part of the class definition:
sv: Detta definierar en klass med namnet <code>MyClass</code>. Låt oss gå igenom varje del av klassdefinitionen:

note: (itstool) path: item/p
en: <code>function MyClass</code> is the constructor of the class — its name must match the class's name. You can access any member of the class by using the <code>this</code> object; here, the constructor calls the class's <code>_init</code> method.
sv: <code>function MyClass</code> är klassens konstruktor — dess namn måste matcha klassens namn. Du kan komma åt alla medlemmar i klassen genom att använda objektet <code>this</code>; här anropar konstruktorn klassens <code>_init</code>-metod.

note: (itstool) path: item/p
en: The first method defined here is called <code>_init</code>, and we specify that it is a function with no arguments:
sv: Den första metoden som definieras här kallas <code>_init</code>, och vi anger att det är en funktion utan några argument:

note: (itstool) path: section/p
en: Now that MyClass has been defined, we can play with it:
sv: Nu då MyClass har definierats så kan vi leka med den:

note: (itstool) path: section/code
en: 
    var o = new MyClass ();
    o.aMethod ("Hello", "world");
    o.propertyA = "Just changed its value!";
    o.dumpProperties ();
sv: 
    var o = new MyClass ();
    o.aMethod ("Hej", "världen");
    o.propertyA = "Ändrade just dess värde!";
    o.dumpProperties ();

note: (itstool) path: section/title
en: A first Gtk application
sv: Ett första Gtk-program

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in JavaScript:
sv: Låt oss se hur ett väldigt enkelt Gtk-program ser ut i Javascript:

note: (itstool) path: section/code
en: 
    const Gtk = imports.gi.Gtk;
    
    Gtk.init (null, null);
    
    var w = new Gtk.Window ({title: "Image Viewer Demo"});
    w.show ();
    
    Gtk.main ();
sv: 
    const Gtk = imports.gi.Gtk;
    
    Gtk.init (null, null);
    
    var w = new Gtk.Window ({title: "Bildvisardemonstration"});
    w.show ();
    
    Gtk.main ();

note: (itstool) path: section/p
en: Let's take a look at what's happening:
sv: Låt oss ta en titt på vad som händer:

note: (itstool) path: item/p
en: The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.
sv: Den första raden importerar Gtk-namnrymden (d.v.s. inkluderar Gtk-biblioteket). Biblioteken tillhandahålls av GObject Introspection (gi), vilket tillhandahåller språkbindningar för många GNOME-bibliotek.

note: (itstool) path: item/p
en: <code>Gtk.init</code> initializes the Gtk library; this statement is mandatory for all Gtk programs.
sv: <code>Gtk.init</code> initierar Gtk-biblioteket; denna sats är obligatorisk för alla Gtk-program.

note: (itstool) path: item/p
en: The next line creates the main window by creating a new <code>Gtk.Window</code> object. You can pass several properties to the window's constructor by using the syntax <code>{property: value, property: value, ...}</code>. In this case we are setting the title of the window.
sv: Nästa rad skapar huvudfönstret genom att skapa ett nytt <code>Gtk.Window</code>-objekt. Du kan skicka flera egenskaper till fönstrets konstruktor genom att använda syntaxen <code>{egenskap: värde, egenskap: värde, …}</code>. I detta fall ställer vi in fönstrets titel.

note: (itstool) path: item/p
en: The next line explicitly shows the window. In Gtk, every widget is hidden by default.
sv: Nästa rad visar explicit fönstret. I Gtk är varje komponent dold som standard.

note: (itstool) path: section/title
en: Adding classes
sv: Lägga till klasser

note: (itstool) path: section/p
en: The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:
sv: Det korrekta sättet att programmera med Gtk är att använda klasser. Låt oss skriva om den enkla koden du just skrev med klasser:

note: (itstool) path: section/code
en: 
    const Gtk = imports.gi.Gtk;
    
    function ImageViewer () {
      this._init ();
    }
    
    ImageViewer.prototype = {
      _init: function () {
        this.window = new Gtk.Window ({title: "Image Viewer Demo"});
        this.window.show ();
      }
    }
    
    Gtk.init (null, null);
    var iv = new ImageViewer ();
    Gtk.main ();
sv: 
    const Gtk = imports.gi.Gtk;
    
    function ImageViewer () {
      this._init ();
    }
    
    ImageViewer.prototype = {
      _init: function () {
        this.window = new Gtk.Window ({title: "Bildvisardemonstration"});
        this.window.show ();
      }
    }
    
    Gtk.init (null, null);
    var iv = new ImageViewer ();
    Gtk.main ();

note: (itstool) path: section/title
en: Signals
sv: Signaler

note: (itstool) path: section/code
en: 
    function button_clicked () {
      print ("you clicked me!");
    }
    var b = new Gtk.Button ({label:"Click me"});
    b.connect ("clicked", button_clicked);
sv: 
    function button_clicked () {
      print ("du klickade på mig!");
    }
    var b = new Gtk.Button ({label:"Klicka på mig"});
    b.connect ("clicked", button_clicked);

note: (itstool) path: section/p
en: The syntax for connecting any signal to a function is:
sv: Syntax för att ansluta en godtycklig signal till en funktion är:

note: (itstool) path: section/code
en: 
    object.connect (&lt;signal_name&gt;, &lt;function_to_be_called&gt;);
sv: 
    object.connect (&lt;signalnamn&gt;, &lt;funktion_att_anropa&gt;);

note: (itstool) path: section/p
en: You can find signal definitions for any object in the <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">GTK class reference</link>.
sv: Du kan hitta signaldefinitioner för alla objekt i <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">GTK-klassreferensen</link>.

note: (itstool) path: note/code
en: 
    b.connect ("clicked", function () { print ("you clicked me!"); });
sv: 
    b.connect ("clicked", function () { print ("du klickade på mig!"); });

note: (itstool) path: section/title
en: Closing the window
sv: Stänga fönstret

note: (itstool) path: section/title
en: Containers: Laying-out the user interface
sv: Behållare: göra en layout för användargränssnittet

note: (itstool) path: section/title
en: Packing: Adding widgets to the container
sv: Packning: Lägga till komponenter till behållaren

note: (itstool) path: section/p
en: Now insert these two lines, below the two you just added:
sv: Infoga nu dessa två rader under de två du just lade till:

note: (itstool) path: section/code
en: 
    var open_button = new Gtk.Button ({label: "Open a picture..."});
    main_box.pack_start (open_button, false, false, 0);
sv: 
    var open_button = new Gtk.Button ({label: "Öppna en bild…"});
    main_box.pack_start (open_button, false, false, 0);

note: (itstool) path: section/p
en: Finally, we must change the <code>this.window.show ();</code> line to read:
sv: Slutligen måste vi ändra raden <code>this.window.show ();</code> så att den säger:

note: (itstool) path: section/title
en: Loading the image: Connecting to the button's <code>clicked</code> signal
sv: Läsa in bilden: ansluta till knappens <code>clicked</code>-signal

note: (itstool) path: section/title
en: Loading the image: Writing the signal's callback
sv: Läsa in bilden: skriva signalens återanrop

note: (itstool) path: section/code
en: 
      _openClicked: function () {
        var chooser = new Gtk.FileChooserDialog ({title: "Select an image",
                                                  action: Gtk.FileChooserAction.OPEN,
                                                  transient_for: this.window,
                                                  modal: true});
        chooser.add_button (Gtk.STOCK_CANCEL, 0);
        chooser.add_button (Gtk.STOCK_OPEN, 1);
        chooser.set_default_response (1);
    
        var filter = new Gtk.FileFilter ();
        filter.add_pixbuf_formats ();
        chooser.filter = filter;
    
        if (chooser.run () == 1)
          this.image.file = chooser.get_filename ();
    
        chooser.destroy ();
      }
sv: 
      _openClicked: function () {
        var chooser = new Gtk.FileChooserDialog ({title: "Välj en bild",
                                                  action: Gtk.FileChooserAction.OPEN,
                                                  transient_for: this.window,
                                                  modal: true});
        chooser.add_button (Gtk.STOCK_CANCEL, 0);
        chooser.add_button (Gtk.STOCK_OPEN, 1);
        chooser.set_default_response (1);
    
        var filter = new Gtk.FileFilter ();
        filter.add_pixbuf_formats ();
        chooser.filter = filter;
    
        if (chooser.run () == 1)
          this.image.file = chooser.get_filename ();
    
        chooser.destroy ();
      }

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of JavaScript and Gtk) in not much time at all!
sv: All kod som du behöver bör nu vara på plats, så testa att köra koden. Det var det, en fullt fungerande bildvisare (och en snabb rundtur av Javascript och Gtk) på inte mycket tid alls!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.js">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="image-viewer/image-viewer.js">referenskod</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Python)
sv: Bildvisare (Python)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK.
sv: Lite mer än ett enkelt ”Hej världen”-program - skriv en bildvisare i GTK.

note: (itstool) path: item/p
en: Write a basic GTK user interface in Python
sv: Skriver ett enkelt GTK-användargränssnitt i Python

note: (itstool) path: item/p
en: Basic knowledge of the python programming language
sv: Grundläggande kunskap i programmeringsspråket Python

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
sv: Välj <gui>PyGTK (automake)</gui> från fliken <gui>Python</gui>, klicka på <gui>Fortsätt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>guitar-tuner</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Be sure to disable <gui>Use GtkBuilder for user interface</gui> as we will build the user interface manually in this example. For an example of using the interface designer, check the <link xref="guitar-tuner.py">Guitar-Tuner demo</link>.
sv: Se till att inaktivera <gui>Använd GtkBuilder för användargränssnitt</gui> då vi kommer bygga användargränssnittet manuellt i detta exempel. Se <link xref="guitar-tuner.py">gitarrstämmardemonstrationen</link> för ett exempel på hur du använder gränssnittsbyggaren.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/image_viewer.py</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Den innehåller grundläggande exempelkod.

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in Python:
sv: Låt oss se hur ett väldigt enkelt Gtk-program ser ut i Python:

note: (itstool) path: section/code
en: 
    from gi.repository import Gtk, GdkPixbuf, Gdk
    import os, sys
    
    class GUI:
    	def __init__(self):
    		window = Gtk.Window()
    		window.set_title ("Hello World")
    		window.connect_after('destroy', self.destroy)
    
    		window.show_all()
    
    	def destroy(window, self):
    		Gtk.main_quit()
    
    def main():
    	app = GUI()
    	Gtk.main()
    
    if __name__ == "__main__":
        sys.exit(main())
sv: 
    from gi.repository import Gtk, GdkPixbuf, Gdk
    import os, sys
    
    class GUI:
    	def __init__(self):
    		window = Gtk.Window()
    		window.set_title ("Hej världen")
    		window.connect_after('destroy', self.destroy)
    
    		window.show_all()
    
    	def destroy(window, self):
    		Gtk.main_quit()
    
    def main():
    	app = GUI()
    	Gtk.main()
    
    if __name__ == "__main__":
        sys.exit(main())

note: (itstool) path: item/p
en: The rest of the file does initialisation for Gtk and displays the GUI.
sv: Resten av filen gör initiering för Gtk och visar det grafiska användargränssnittet.

note: (itstool) path: section/p
en: This code is ready to run, so try it using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>. It should show you an empty window.
sv: Koden är redo att köras, så pröva den med <guiseq><gui>Kör</gui><gui>Kör</gui></guiseq>. Den kommer visa ett tomt fönster.

note: (itstool) path: section/code
en: 
    def button_clicked () :
      print "you clicked me!"
    
    b = new Gtk.Button ("Click me")
    b.connect_after ('clicked', button_clicked)
sv: 
    def button_clicked () :
      print "Du klickade på mig!"
    
    b = new Gtk.Button ("Klicka på mig")
    b.connect_after ('clicked', button_clicked)

note: (itstool) path: section/code
en: 
    button = Gtk.Button ("Open a picture...")
    box.pack_start (button, False, False, 0)
sv: 
    button = Gtk.Button ("Öppna en bild…")
    box.pack_start (button, False, False, 0)

note: (itstool) path: section/p
en: This will connect the <code>clicked</code> signal to <code>on_open_clicked</code> method that we will define below.
sv: Detta kommer ansluta <code>clicked</code>-signalen till metoden <code>on_open_clicked</code> som vi kommer definiera nedan.

note: (itstool) path: section/code
en: 
    def on_open_clicked (self, button):
    	dialog = Gtk.FileChooserDialog ("Open Image", button.get_toplevel(), Gtk.FileChooserAction.OPEN);
    	dialog.add_button (Gtk.STOCK_CANCEL, 0)
    	dialog.add_button (Gtk.STOCK_OK, 1)
    	dialog.set_default_response(1)
    
    	filefilter = Gtk.FileFilter ()
    	filefilter.add_pixbuf_formats ()
    	dialog.set_filter(filefilter)
    
    	if dialog.run() == 1:
    		self.image.set_from_file(dialog.get_filename())
    
    	dialog.destroy()
sv: 
    def on_open_clicked (self, button):
    	dialog = Gtk.FileChooserDialog ("Öppna bild", button.get_toplevel(), Gtk.FileChooserAction.OPEN);
    	dialog.add_button (Gtk.STOCK_CANCEL, 0)
    	dialog.add_button (Gtk.STOCK_OK, 1)
    	dialog.set_default_response(1)
    
    	filefilter = Gtk.FileFilter ()
    	filefilter.add_pixbuf_formats ()
    	dialog.set_filter(filefilter)
    
    	if dialog.run() == 1:
    		self.image.set_from_file(dialog.get_filename())
    
    	dialog.destroy()

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of Python and Gtk) in not much time at all!
sv: All kod som du behöver bör nu vara på plats, så testa att köra koden. Det var det, en fullt fungerande bildvisare (och en snabb rundtur av Python och Gtk) på inte mycket tid alls!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.py">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="image-viewer/image-viewer.py">referenskod</link>.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Vala)
sv: Bildvisare (Vala)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTK+ application.
sv: Lite mer än ett enkelt ”Hej världen”-program i GTK+.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which opens and displays an image file. You will learn:
sv: I denna handledning kommer du skapa ett program som öppnar och visar en bildfil. Du kommer att lära dig:

note: (itstool) path: item/p
en: How to set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
sv: Hur du konfigurerar ett grundläggande projekt med den <link xref="getting-ready">integrerade utvecklingsmiljön Anjuta</link>.

note: (itstool) path: item/p
en: How to write a <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk application</link> in Vala
sv: Hur du skriver ett <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk-program</link> i Vala

note: (itstool) path: item/p
en: Some basic concepts of <link href="http://developer.gnome.org/gobject/stable/">GObject</link> programming
sv: Några grundläggande koncept i <link href="http://developer.gnome.org/gobject/stable/">GObject</link>-programmering

note: (itstool) path: item/p
en: You may find the <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API Reference useful, although it is not necessary to follow the tutorial.
sv: Du kan finna API-referensen för <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> användbar, även om det inte är nödvändigt att följa handledningen.

note: (itstool) path: item/p
en: From the <gui>Vala</gui> tab choose <gui>GTK+ (Simple)</gui>, click <gui>Continue</gui>, and fill out your details on the next page. Use <file>image-viewer</file> as project name and directory.
sv: Välj <gui>GTK+ (enkel)</gui> från fliken <gui>Vala</gui>, klicka på <gui>Fortsätt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>image-viewer</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is unchecked as we will create the UI manually in this tutorial.
sv: Säkerställ att <gui>Använd GtkBuilder för användargränssnitt</gui> inte är ikryssad då vi kommer skapa användargränssnittet manuellt i denna handledning.

note: (itstool) path: note/p
en: You will learn how to use the interface builder in the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial.
sv: Du kommer lära dig hur du använder gränssnittsbyggaren i handledningen <link xref="guitar-tuner.vala">Gitarrstämmare</link>.

note: (itstool) path: item/p
en: Click <gui>Continue</gui> then <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You will see this code:
sv: Klicka på <gui>Fortsätt</gui> sedan <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/image_viewer.vala</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du kommer se denna kod:

note: (itstool) path: item/code
en: 
    using GLib;
    using Gtk;
    
    public class Main : Object
    {
    
    	public Main ()
    	{
    		Window window = new Window();
    		window.set_title ("Hello World");
    		window.show_all();
    		window.destroy.connect(on_destroy);
    	}
    
    	public void on_destroy (Widget window)
    	{
    		Gtk.main_quit();
    	}
    
    	static int main (string[] args)
    	{
    		Gtk.init (ref args);
    		var app = new Main ();
    
    		Gtk.main ();
    
    		return 0;
    	}
    }
sv: 
    using GLib;
    using Gtk;
    
    public class Main : Object
    {
    
    	public Main ()
    	{
    		Window window = new Window();
    		window.set_title ("Hej världen");
    		window.show_all();
    		window.destroy.connect(on_destroy);
    	}
    
    	public void on_destroy (Widget window)
    	{
    		Gtk.main_quit();
    	}
    
    	static int main (string[] args)
    	{
    		Gtk.init (ref args);
    		var app = new Main ();
    
    		Gtk.main ();
    
    		return 0;
    	}
    }

note: (itstool) path: section/p
en: Now replace the current constructor with the one below:
sv: Ersätt nu den aktuella konstruktorn med den nedan:

note: (itstool) path: section/code
en: 
    
    public Main () {
    
    	window = new Window ();
    	window.set_title ("Image Viewer in Vala");
    
    	// Set up the UI
    	var box = new Box (Orientation.VERTICAL, 5);
    	var button = new Button.with_label ("Open image");
    	image = new Image ();
    
    	box.pack_start (image, true, true, 0);
    	box.pack_start (button, false, false, 0);
    	window.add (box);
    
    	// Show open dialog when opening a file
    	button.clicked.connect (on_open_image);
    
    	window.show_all ();
    	window.destroy.connect (main_quit);
    }
sv: 
    
    public Main () {
    
    	window = new Window ();
    	window.set_title ("Bildvisare i Vala");
    
    	// Konfigurera användargränssnittet
    	var box = new Box (Orientation.VERTICAL, 5);
    	var button = new Button.with_label ("Öppna bild");
    	image = new Image ();
    
    	box.pack_start (image, true, true, 0);
    	box.pack_start (button, false, false, 0);
    	window.add (box);
    
    	// Visa öppna-dialog när en fil öppnas
    	button.clicked.connect (on_open_image);
    
    	window.show_all ();
    	window.destroy.connect (main_quit);
    }

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.vala">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="image-viewer/image-viewer.vala">referenskod</link>.

note: (itstool) path: credit/name
en: GNOME Documentation Team
sv: GNOME:s dokumentationsgrupp

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
sv: Demonstrationer för GNOME-utvecklarplattformen

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.
sv: Denna guide innehåller en mängd kodningsexempel, så som att skriva en bildvisare eller ett väderprogram. Varje demonstration kommer med kod som du kan använda, och förklarar hur varje exempel fungerar. De är ett utmärkt sätt att komma igång med GNOME-utvecklarplattformen.

note: (itstool) path: section/title
en: Pick a Language
sv: Välj ett språk

note: (itstool) path: section/p
en: These developer demos are available in a range of programming languages. Pick one to get started:
sv: Dessa utvecklardemonstrationer finns tillgängliga i en rad programmeringsspråk. Välj ett för att komma igång:

[ctx: link]
note: (itstool) path: info/title
en: JavaScript
sv: Javascript

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in JavaScript
sv: Handledningar, kodexempel och plattformsdemonstrationer i Javascript

note: (itstool) path: section/title
en: Code samples and tutorials
sv: Kodexempel och handledningar

note: (itstool) path: info/desc
en: A widget which displays text
sv: En komponent som visar text

note: (itstool) path: td/p (itstool) path: page/p
en: A simple label
sv: En enkel etikett

[ctx: text]
note: (itstool) path: info/title
en: Label (JavaScript)
sv: Label (Javascript)

note: (itstool) path: info/desc
en: A label which can contain text
sv: En etikett som kan innehålla text

note: (itstool) path: page/p
en: A label displaying a friendly message.
sv: En etikett som visar ett vänligt meddelande.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class LabelExample {
    
        /* Create the application itself
           This boilerplate code is needed to build any GTK+ application. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jslabel',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal initializes menus and 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,
                title: "Welcome to GNOME",
                default_height: 100,
                default_width: 200
            });
    
            // Create the label
            this.label = new Gtk.Label({ label: "Hello GNOME!" });
            this._window.add(this.label);
    
            // Show the window and all child widgets
            this._window.show_all();
        }
    
    
    };
    
    // Run the application
    let app = new LabelExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class LabelExample {
    
        /* Skapa programmet i sig
           Denna standardkod behövs för att bygga alla GTK+-program. */
        constructor() {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jslabel',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Välkommen till GNOME",
                default_height: 100,
                default_width: 200
            });
    
            // Skapa etiketten
            this.label = new Gtk.Label({ label: "Hej GNOME!" });
            this._window.add(this.label);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
    
    };
    
    // Kör programmet
    let app = new LabelExample ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: A widget that displays a small to medium amount of text
sv: En komponent som visar en liten till medelstor mängd text

note: (itstool) path: section/code
en: 
    # a class to define a window
    class MyWindow(Gtk.ApplicationWindow):
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Welcome to GNOME", application=app)
            self.set_default_size(200, 100)
    
    # a class to define a label
    <e:hi>
    class MyLabel(Gtk.Label):
        def __init__(self):
            Gtk.Label.__init__(self)
            self.set_text("Hello GNOME!")
    </e:hi>
    
    class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            # create an instance of MyWindow
            win = MyWindow(self)
    
            # create an instance of MyLabel
    <e:hi>
            label = MyLabel()
    </e:hi>
            # and add it to the window
    <e:hi>
            win.add(label)
    </e:hi>
            # show the window and everything on it
            win.show_all()
sv: 
    # en klass för att definiera ett fönster
    class MyWindow(Gtk.ApplicationWindow):
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Välkommen till GNOME", application=app)
            self.set_default_size(200, 100)
    
    # en klass för att definiera en etikett
    <e:hi>
    class MyLabel(Gtk.Label):
        def __init__(self):
            Gtk.Label.__init__(self)
            self.set_text("Hej GNOME!")
    </e:hi>
    
    class MyApplication(Gtk.Application):
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            # skapa en instans av MyWindow
            win = MyWindow(self)
    
            # skapa en instans av MyLabel
    <e:hi>
            label = MyLabel()
    </e:hi>
            # och lägg till den till fönstret
    <e:hi>
            win.add(label)
    </e:hi>
            # visa fönstret och allt som finns i det
            win.show_all()

note: (itstool) path: section/title
en: Useful methods for a Label widget
sv: Användbara metoder för en Label-komponent

note: (itstool) path: page/code
en: 
    public class MyWindow : Gtk.ApplicationWindow {
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Welcome to GNOME");
    
    		var label = new Gtk.Label ("Hello GNOME!");
    
    		this.add (label);
    		this.set_default_size (200, 100);
    		this.show_all ();
    	}
    }
    
    public class MyApplication : Gtk.Application {
    	protected override void activate () {
    		new MyWindow (this).show ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: 
    public class MyWindow : Gtk.ApplicationWindow {
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Välkommen till GNOME");
    
    		var label = new Gtk.Label ("Hej GNOME!");
    
    		this.add (label);
    		this.set_default_size (200, 100);
    		this.show_all ();
    	}
    }
    
    public class MyApplication : Gtk.Application {
    	protected override void activate () {
    		new MyWindow (this).show ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.MyApplication");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: p/link
en: Creative Commons Attribution-ShareAlike 3.0 Unported License
sv: Creative Commons Erkännande-DelaLika 3.0 Unported

note: (itstool) path: license/p
en: This work is licensed under a <_:link-1/>. As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
sv: Detta verk är licensierat under licensen <_:link-1/>. Som ett speciellt undantag ger upphovsrättsinnehavarna dig tillåtelse att kopiera, modifiera och distribuera exempelkoden som finns i denna dokumentation under de villkor som du väljer, utan restriktioner.

note: (itstool) path: info/desc
en: Legal information.
sv: Juridisk information.

note: (itstool) path: page/title
en: License
sv: Licens

note: (itstool) path: page/p
en: This work is distributed under a CreativeCommons Attribution-Share Alike 3.0 Unported license.
sv: Det här verket är distribuerat under licensen CreativeCommons Erkännande-DelaLika 3.0 Unported.

note: (itstool) path: page/p
en: You are free:
sv: Du har rätt:

note: (itstool) path: item/title
en: <em>To share</em>
sv: <em>Att dela</em>

note: (itstool) path: item/p
en: To copy, distribute and transmit the work.
sv: Att kopiera, distribuera och vidarebefordra verket.

note: (itstool) path: item/title
en: <em>To remix</em>
sv: <em>Att remixa</em>

note: (itstool) path: item/p
en: To adapt the work.
sv: Att anpassa verket.

note: (itstool) path: page/p
en: Under the following conditions:
sv: Under följande villkor:

note: (itstool) path: item/title
en: <em>Attribution</em>
sv: <em>Erkännande</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).
sv: Du måste ge erkännande åt arbetet på det sätt som anges av författaren eller licensgivaren (men inte på ett sätt som antyder att de godkänt eller rekommenderar din användning av verket).

note: (itstool) path: item/title
en: <em>Share Alike</em>
sv: <em>Dela lika</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.
sv: Om du ändrar, bearbetar, eller bygger vidare på verket, får du distribuera resultatet endast under samma, liknande, eller en kompatibel licens.

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>.
sv: För den fullständiga lydelsen av licensen, se <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">CreativeCommons webbplats</link>, eller läs hela <link href="http://creativecommons.org/licenses/by-sa/3.0/">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.
sv: Som ett speciellt undantag ger upphovsrättsinnehavarna dig tillåtelse att kopiera, modifiera och distribuera exempelkoden som finns i denna dokumentation under de villkor som du väljer, utan restriktioner.

note: (itstool) path: info/desc
en: Create buttons bound to a URL
sv: Skapa knappar som bundits till en URL

note: (itstool) path: page/p
en: This button links to the GNOME live webpage.
sv: Denna knapp länkar till webbsidan GNOME live.

[ctx: text]
note: (itstool) path: info/title
en: LinkButton (JavaScript)
sv: LinkButton (Javascript)

note: (itstool) path: info/desc
en: A button that links to a web page
sv: En knapp som länkar till en webbsida

note: (itstool) path: page/p
en: A button that links to live.gnome.org.
sv: En knapp som länkar till live.gnome.org.

note: (itstool) path: page/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class LinkButtonExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jslinkbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
             });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal initializes menus and 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,
                                                     title: "GNOME LinkButton",
                                                     default_height: 50,
                                                     default_width: 250 });
    
            // Create the LinkButton and have it link to live.gnome.org
            this.LinkButton = new Gtk.LinkButton ({label: "Link to GNOME live!",
                                   uri: "http://live.gnome.org"});
            this._window.add (this.LinkButton);
    
        // Show the window and all child widgets
        this._window.show_all();
        }
    };
    
    // Run the application
    let app = new LinkButtonExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class LinkButtonExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jslinkbutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
             });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
        this._window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                     window_position: Gtk.WindowPosition.CENTER,
                                                     title: "GNOME LinkButton",
                                                     default_height: 50,
                                                     default_width: 250 });
    
            // Skapa LinkButton och låt den länka till live.gnome.org
            this.LinkButton = new Gtk.LinkButton ({label: "Länk till GNOME live!",
                                   uri: "http://live.gnome.org"});
            this._window.add (this.LinkButton);
    
        // Visa fönstret och alla barnkomponenter
        this._window.show_all();
        }
    };
    
    // Kör programmet
    let app = new LinkButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: info/desc
en: A button bound to an URL
sv: En knapp som bundits till en URL

note: (itstool) path: page/p
en: A button that links to a web page.
sv: En knapp som länkar till en webbsida.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="GNOME LinkButton", application=app)
            self.set_default_size(250, 50)
    
            # a linkbutton pointing to the given URI
            button = Gtk.LinkButton(uri="http://live.gnome.org")
            # with given text
            button.set_label("Link to GNOME live!")
    
            # add the button to the window
            self.add(button)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # ett fönster
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="GNOME LinkButton", application=app)
            self.set_default_size(250, 50)
    
            # en LinkButton som pekar på angiven URI
            button = Gtk.LinkButton(uri="http://live.gnome.org")
            # med angiven text
            button.set_label("Länk till GNOME live!")
    
            # lägg till knappen till fönstret
            self.add(button)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a LinkButton widget
sv: Användbara metoder för en LinkButton-komponent

note: (itstool) path: page/p
en: This button links to GNOME live.
sv: Denna knapp länkar till GNOME live.

[ctx: text]
note: (itstool) path: info/title
en: Magic mirror (Vala)
sv: Magisk spegel (Vala)

note: (itstool) path: info/desc
en: Use your webcam as a mirror using the GStreamer framework and GTK+
sv: Använd din webbkamera som en spegel med GStreamer-ramverket och GTK+

note: (itstool) path: page/title
en: Magic mirror
sv: Magisk spegel

note: (itstool) path: synopsis/p
en: <em>Your mirror just fell off the wall and broke into a thousand pieces — but you need a mirror to shave your beard off or add some makeup! You only have 15 minutes left before catching the bus to work. So what can you do?</em>
sv: <em>Din spegel föll ner och gick i tusen bitar — men du behöver en spegel för att raka skägget eller sminka dig! Du har bara 15 minuter innan bussen till jobbet går. Vad ska du göra?</em>

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:
sv: I denna handledning kommer vi göra ett program som låter dig använda din webbkamera som en spegel. Du kommer lära dig hur du:

note: (itstool) path: item/p
en: Create a GTK+ application
sv: Skapar ett GTK+-program

note: (itstool) path: item/p
en: Access your webcam using GStreamer and embed the result into a window
sv: Kommer åt din webbkamera med GStreamer och bäddar in resultatet i ett fönster

note: (itstool) path: item/p
en: Grab photos off your webcam
sv: Får bilder från din webbkamera

note: (itstool) path: item/p
en: Installed copies of GTK, GStreamer, and a Vala compiler
sv: Installerade kopior av GTK, GStreamer och en Vala-kompilator

note: (itstool) path: item/p
en: Basic knowledge of an object-oriented programming language
sv: Grundläggande kunskap i ett objektorienterat programmeringsspråk

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>Vala</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>magic-mirror</file> as project name and directory.
sv: Välj <gui>GTK+ (enkel)</gui> från fliken <gui>Vala</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>magic-mirror</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Disable <gui>Use GtkBuilder for user interface</gui> as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial using the interface builder.
sv: Inaktivera <gui>Använd GtkBuilder för användargränssnitt</gui> då vi kommer skapa användargränssnittet manuellt i denna handledning. Se handledningen <link xref="guitar-tuner.vala">Gitarrstämmare</link> för användning av gränssnittsbyggaren.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.
sv: Säkerställ att <gui>Konfigurera externa paket</gui> är valt. På nästa sida, välj <em>gstreamer-0.10</em> från listan för att inkludera <app>GStreamer</app>-biblioteket i ditt projekt.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/magic_mirror.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
sv: Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/magic_mirror.vala</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:

note: (itstool) path: section/title
en: Access the webcam video stream with GStreamer
sv: Kom åt webbkamerans videoström med GStreamer

note: (itstool) path: section/p
en: The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.
sv: GStreamer-multimediaramverket kan hantera video från webbkameror. Låt oss lägga till GStreamer till vårt program så vi kan komma åt videoströmmen.

note: (itstool) path: item/p
en: First we remove the window we created before because GStreamer will take care of showing the picture on screen.
sv: Först tar vi bort fönstret vi skapade tidigare, för GStreamer kommer ta hand om att visa bilden på skärmen.

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link>.
sv: För att lära dig mer om programmeringsspråket Vala kan du vilja ta en titt på <link href="http://live.gnome.org/Vala/Tutorial">Vala-handledningen</link>.

note: (itstool) path: section/title
en: Conclusion
sv: Avslutning

note: (itstool) path: info/desc
en: A widget which holds GtkMenuItem widgets
sv: En komponent som håller GtkMenuItem-komponenter

note: (itstool) path: section/title
en: Add items to the menus
sv: Lägg till objekt till menyerna

note: (itstool) path: section/code
en: 
    &lt;item&gt;
      &lt;attribute name="label"&gt;New&lt;/attribute&gt;
      &lt;attribute name="action"&gt;app.new&lt;/attribute&gt;
    &lt;/item&gt;
sv: 
    &lt;item&gt;
      &lt;attribute name="label"&gt;Ny&lt;/attribute&gt;
      &lt;attribute name="action"&gt;app.new&lt;/attribute&gt;
    &lt;/item&gt;

note: (itstool) path: section/p
en: See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callbacks.
sv: Se <link xref="signals-callbacks.py"/> för en mer detaljerad förklaring av signaler och återanrop.

note: (itstool) path: section/title
en: Complete Python file for this example
sv: Fullständig Python-fil för detta exempel

note: (itstool) path: section/title
en: Translatable strings
sv: Översättningsbara strängar

note: (itstool) path: section/p
en: Since GNOME applications are being translated into <link href="http://l10n.gnome.org/languages/">many languages</link>, it is important that the strings in your application are translatable. To make a label translatable, simple set <code>translatable="yes"</code>:
sv: Eftersom GNOME-program översätts till <link href="http://l10n.gnome.org/languages/">många språk</link> så är det viktigt att strängarna i ditt program går att översätta. För att göra en etikett översättningsbar, ställ helt enkelt in <code>translatable="yes"</code>:

note: (itstool) path: section/p
en: Now, compile the vala file, and run it. The application should look like the picture at the top of this page.
sv: Kompilera nu vala-filen och kör den. Programmet bör se ut som bilden högst upp på denna sida.

note: (itstool) path: item/p
en: Second, we create the callback functions the actions are connected to.
sv: Sedan skapar vi återanropsfunktionerna som åtgärderna är anslutna till.

note: (itstool) path: item/p
en: And lastly, we connect the menu items to the actions in the XML file by adding the "action" attribute:
sv: Slutligen ansluter vi menyobjekten till åtgärderna i XML-filen genom att lägga till attributet "action":

note: (itstool) path: section/title
en: Complete Vala file for this example
sv: Fullständig Vala-fil för detta exempel

note: (itstool) path: info/desc
en: A widget that shows a menu when clicked on
sv: En komponent som visar en meny när den klickas på

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 or later for the MenuButton to work.
sv: Du behöver köra GNOME 3.6 eller senare för att MenuButton ska fungera.

[ctx: text]
note: (itstool) path: info/title
en: MenuButton (JavaScript)
sv: MenuButton (Javascript)

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 for the MenuButton to work.
sv: Du behöver köra GNOME 3.6 för att MenuButton ska fungera.

note: (itstool) path: section/title
en: Useful methods for a MenuButton widget
sv: Användbara metoder för en MenuButton-komponent

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>about_action</code> is connected to the callback function <code>about_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 33 ansluts signalen <code>"activate"</code> från åtgärden <code>about_action</code> till återanropsfunktionen <code>about_callback()</code> med <code><var>åtgärd</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

[ctx: text]
note: (itstool) path: info/title
en: Message board (C)
sv: Anslagstavla (C)

note: (itstool) path: info/desc
en: A simple program using WebKitGTK+ and the DOM.
sv: Ett enkelt program som använder WebKitGTK+ och DOM.

note: (itstool) path: page/title
en: Message board
sv: Anslagstavla

note: (itstool) path: item/p
en: How to display a web page with WebKit.
sv: Hur du visar en webbsida med WebKit.

note: (itstool) path: item/p
en: How to manipulate the contents of a web page using WebKit's DOM functions.
sv: Hur du manipulerar en webbsidas innehåll med WebKits DOM-funktioner.

note: (itstool) path: synopsis/p
en: This tutorial assumes you are familiar with the C programming language and have a basic understanding of GTK+, including how to create and place widgets and how to connect callback functions to signals. See <link xref="image-viewer.c"/> to learn the basics of GTK+.
sv: Denna handledning antar att du är bekant med programmeringsspråket C och har en grundläggande förståelse av GTK+, inklusive hur du skapar och placerar komponenter och hur du ansluter återanropsfunktioner till signaler. Se <link xref="image-viewer.c"/> för att lära dig grunderna i GTK+.

note: (itstool) path: section/p
en: The GNOME platform includes WebKitGTK+, built on top of the powerful WebKit HTML framework. WebKit is used throughout GNOME, not just to view web pages on the Internet, but also to create rich user interfaces that can be easily styled with CSS.
sv: GNOME-plattformen inkluderar WebKitGTK+, byggd på det kraftfulla HTML-ramverket WebKit. WebKit används runt om i GNOME, inte bara för att visa webbsidor på internet, utan också för att skapa rika användargränssnitt som lätt kan stilsättas med CSS.

note: (itstool) path: section/p
en: In this tutorial, you will create a simple message board using WebKit. The message board will allow you to enter some text and have it added to a list of messages in HTML. Before you begin, you need to set up a project in Anjuta.
sv: I denna handledning kommer du skapa en enkel anslagstavla med WebKit. Anslagstavlan kommer låta dig mata in lite text och lägga till den till en lista med meddelanden i HTML. Innan du börjar behöver du konfigurera ett projekt i Anjuta.

note: (itstool) path: item/p
en: In Anjuta, click <guiseq><gui>File</gui><gui>New</gui> <gui>Project</gui></guiseq> to open the new project assistant.
sv: Klicka i Anjuta på <guiseq><gui>Arkiv</gui><gui>Ny</gui><gui>Projekt</gui></guiseq> för att öppna den nya projektguiden.

note: (itstool) path: item/p
en: Select <gui>GTK+ (simple)</gui> on the <gui>C</gui> tab, and click <gui>Continue</gui>.
sv: Välj <gui>GTK+ (enkel)</gui> från fliken <gui>C</gui> och klicka på <gui>Fortsätt</gui>.

note: (itstool) path: item/p
en: Fill out your details on the <gui>Basic information</gui> page. Use <input>message-board</input> for the project name. Click <gui>Continue</gui>.
sv: Fyll i dina detaljer på sidan <gui>Grundläggande information</gui>. Använd <input>message-board</input> som projektnamn. Klicka på <gui>Fortsätt</gui>.

note: (itstool) path: item/p
en: Disable the <gui>Use GtkBuilder for user interface</gui> option as this tutorial builds the user-interface manually.
sv: Inaktivera alternativet <gui>Använd GtkBuilder för användargränssnitt</gui> då denna handledning bygger användargränssnittet manuellt.

note: (itstool) path: item/p
en: You need to tell Anjuta you're using WebKitGTK+ on this project. On the <gui>Project options</gui> page, select <gui>Configure external packages</gui>. Click <gui>Continue</gui>. On the <gui>Configure external packages</gui> page, check <gui>webkitgtk-3.0</gui>.
sv: Du behöver säga till Anjuta att du använder WebKitGTK+ för detta projekt. På sidan <gui>Projektalternativ</gui>, välj <gui>Konfigurera externa paket</gui>. Klicka på <gui>Fortsätt</gui>. På sidan <gui>Konfigurera externa paket</gui>, kryssa i <gui>webkitgtk-3.0</gui>.

note: (itstool) path: section/p
en: After you finish the new project assistant, open the file <file>src/main.c</file> from either the <gui>Project</gui> or the <gui>File</gui> tab. Anjuta will have filled this in with some basic GTK+ code from its templates. Since you are creating a WebKit project, you first need to include the WebKit headers. After the line that includes <code>gtk/gtk.h</code>, add the following line:
sv: Efter att du slutför guiden för nya projekt, öppna filen <file>src/main.js</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Anjuta kommer ha fyllt i denna med lite grundläggande GTK+-kod från sina mallar. Eftersom du skapar ett WebKit-projekt behöver du först inkludera WebKit-headerfilerna. Lägg till följande rad efter raden som inkluderar <code>gtk/gtk.h</code>:

note: (itstool) path: section/title
en: Lay out your window and web view
sv: Skapa en layout för ditt fönster och din webbvy

note: (itstool) path: item/p
en: The simplest HTML file you could possibly write.
sv: Den enklaste HTML-du kan skriva.

note: (itstool) path: item/p
en: The MIME type of the content you provided. In this case, you're using plain HTML.
sv: MIME-typen för innehållet du tillhandahöll. I detta fall använder du vanlig HTML.

note: (itstool) path: item/p
en: The character encoding of the content you provided. Although you only used ASCII characters, it's a good idea to specify UTF-8. UTF-8 is used as the default encoding throughout the GNOME platform.
sv: Teckenkodningen för innehållet du tillhandahöll. Även om du bara använde ASCII-tecken så är det en god idé att ange UTF-8. UTF-8 används som standardkodning för hela GNOME-plattformen.

note: (itstool) path: section/title
en: Hook up signals
sv: Anslut signaler

note: (itstool) path: section/title
en: Make it look better with CSS
sv: Få det att se ut bättre med CSS

note: (itstool) path: section/title
en: Learn more
sv: Lär dig mer

note: (itstool) path: section/p
en: This tutorial showed you how to create a basic application using GTK+ and WebKit, including showing a document and manipulating its contents. To create a real application, you probably want to do a little bit more. Try adding features on your own. Here are a few ideas:
sv: Denna handledning visade dig hur du skapar ett enkelt program med GTK+ och WebKit, inklusive att visa ett dokument och manipulera dess innehåll. För att skapa ett riktigt program vill du förmodligen göra lite mer. Försök lägga till egen funktionalitet. Här är några idéer:

note: (itstool) path: item/p
en: If you're comfortable with CSS, try changing the style of the message display. CSS is easy to get started with, but increasingly more powerful. There is a wealth of CSS tutorials on the Internet, and just about everything you can do on the web, you can do in this application.
sv: Om du är bekväm med CSS kan du försöka ändra stilen för meddelandevisningen. CSS är enkelt att komma igång med, men blir alltmer kraftfullt. Det finns en stor mängd CSS-handledningar på internet, och i princip allt du kan göra på webben kan du göra i detta program.

note: (itstool) path: item/p
en: Right now, you lose all your messages whenever you close the message board. Try saving the HTML contents after each post, and loading the saved file (if it exists) on startup.
sv: För tillfället förlorar du alla dina meddelanden närhelst du stänger anslagstavlan. Försök att spara HTML-innehållet efter varje post, och läsa in den sparade filen (om den finns) vid uppstart.

note: (itstool) path: item/p
en: If you keep your messages around for a long time, you'll start wondering when you posted them. Add a timestamp to each message when it's posted. You'll probably want to create some additional child <code>div</code> elements with different classes that you can style in the CSS.
sv: Om du behåller dina meddelanden länge kommer du börja fundera när du postade dem. Lägg till en tidsstämpel till varje meddelande då det postas. Du kommer troligen vilja skapa några <code>div</code>-barnelement med olika klasser som du kan stilsätta i din CSS.

note: (itstool) path: item/p
en: This program keeps messages around forever. Think about ways you could allow the user to delete messages. Perhaps you want messages to disappear automatically after they're too old, or after there are a certain number of messages before them. Or you could add a link in each message to delete it. You could even override the context menu when you right-click on a message. These features involve exploring WebKit's DOM API more.
sv: Detta program behåller meddelanden för alltid. Tänk på sätt som du skulle kunna låta användaren ta bort meddelanden. Kanske du vill att meddelanden ska försvinna automatiskt efter att de blivit för gamla, eller efter att det finns ett visst antal meddelanden före dem. Eller så skulle du kunna lägga till en länk i varje meddelande för att ta bort det. Du skulle till och med kunna åsidosätta snabbvalsmenyn då du högerklickar på ett meddelande. Dessa funktioner involverar att utforska WebKits DOM-API mera.

note: (itstool) path: info/desc
en: A message window
sv: Ett meddelandefönster

note: (itstool) path: page/p
en: A modal message dialog which can cause the world to explode.
sv: En modal meddelandedialog som kan få världen att explodera.

[ctx: text]
note: (itstool) path: info/title
en: MessageDialog (JavaScript)
sv: MessageDialog (Javascript)

note: (itstool) path: info/desc
en: A popup message attached to a window
sv: Ett poppuppmeddelande fäst vid ett fönster

note: (itstool) path: section/code
en: 
    const MessageDialogExample = new Lang.Class ({
        Name: 'MessageDialog Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsmessagedialog',
                flags: Gio.ApplicationFlags.FLAGS_NONE });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal initializes menus and builds the UI
        _onStartup: function () {
            this._initMenus();
            this._buildUI ();
        },
sv: 
    const MessageDialogExample = new Lang.Class ({
        Name: 'MessageDialog-exempel',
    
        // Skapa programmet i sig
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jsmessagedialog',
                flags: Gio.ApplicationFlags.FLAGS_NONE });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate: function () {
            this._window.present ();
        },
    
        // Återanropsfunktion för ”startup”-signal initierar menyer och bygger användargränssnittet
        _onStartup: function () {
            this._initMenus();
            this._buildUI ();
        },

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Gtk.MessageDialog Example",
                default_height: 200,
                default_width: 400 });
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function () {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Gtk.MessageDialog-exempel",
                default_height: 200,
                default_width: 400 });

note: (itstool) path: section/code
en: 
            // Create a silly warning message and add it to the window
            this.warningLabel = new Gtk.Label ({
                label: "This application goes boom! (Not really.)"});
            this._window.add (this.warningLabel);
sv: 
            // Skapa ett fånigt varningsmeddelande och lägg till det till fönstret
            this.warningLabel = new Gtk.Label ({
                label: "Detta program sprängs! (Inte på riktigt.)"});
            this._window.add (this.warningLabel);

note: (itstool) path: section/title
en: Creating the application's menu
sv: Skapa programmets meny

note: (itstool) path: section/title
en: Creating the MessageDialog
sv: Skapa vår MessageDialog

note: (itstool) path: section/code
en: 
        _showMessageDialog: function () {
    
            // Create a modal MessageDialog whose parent is the window
            this._messageDialog = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK_CANCEL,
                message_type: Gtk.MessageType.WARNING,
                text: "This action will cause the universe to stop existing." });
    
            this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
            this._messageDialog.show();
        },
sv: 
        _showMessageDialog: function () {
    
            // Skapa en modal MessageDialog vars förälder är fönstret
            this._messageDialog = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                buttons: Gtk.ButtonsType.OK_CANCEL,
                message_type: Gtk.MessageType.WARNING,
                text: "Denna åtgärd kommer få universum att sluta existera." });
    
            this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));
            this._messageDialog.show();
        },

note: (itstool) path: note/p
en: Here are some resources for making your own MessageDialogs:
sv: Här är några resurser för att göra dina egna MessageDialoger:

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">List of button types</link>
sv: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">Lista över knapptyper</link>

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">List of message types</link>
sv: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">Lista över meddelandetyper</link>

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new MessageDialogExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new MessageDialogExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished MessageDialogExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda MessageDialogExample-klassen, och startar programmet.

note: (itstool) path: page/p
en: A message dialog which prints messages on the terminal, depending on your choices.
sv: En meddelandedialog som skriver ut meddelanden i terminalen, beroende på dina val.

note: (itstool) path: section/title
en: Useful methods for a MessageDialog widget
sv: Användbara metoder för en MessageDialog-komponent

note: (itstool) path: section/p
en: In line 18 the signal <code>"activate"</code> is connected to the callback function <code>message_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 18 ansluts signalen <code>"activate"</code> till återanropsfunktionen <code>message_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: We could substitute the default image of the MessageDialog with another image using
sv: Vi skulle kunna ersätta standardbilden för vår MessageDialog med en annan genom att använda

note: (itstool) path: item/p
en: where <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> is any image from <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>. We could also set any image as in the Image widget, as <code>image.set_from_file("filename.png")</code>.
sv: där <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> är någon bild från <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">standardobjekten</link>. Vi skulle också kunna ställa in valfri bild som i Image-komponenten, som <code>image.set_from_file("filnamn.png")</code>.

note: (itstool) path: item/p
en: <code>format_secondary_text("some secondary message")</code> sets a secondary message. The primary text becomes bold.
sv: <code>format_secondary_text("något sekundärt meddelande")</code> ställer in ett sekundärt meddelande. Den primära texten blir fet.

note: (itstool) path: section/title
en: Overview
sv: Översikt

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeModel</code>:
sv: Användbara metoder för en <code>Gtk.TreeModel</code>:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ListStore</code>:
sv: Användbara metoder för en <code>Gtk.ListStore</code>:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeStore</code>:
sv: Användbara metoder för en <code>Gtk.TreeStore</code>:

note: (itstool) path: section/p
en: The <code>Gtk.TreeViewColumn</code> is used to organize the vertical columns.
sv: <code>Gtk.TreeViewColumn</code> används för att organisera de vertikala kolumnerna.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeView</code>:
sv: Användbara metoder för en <code>Gtk.TreeView</code>:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeViewColumn</code>:
sv: Användbara metoder för en <code>Gtk.TreeViewColumn</code>:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBox</code>:
sv: Användbara metoder för en <code>Gtk.ComboBox</code>:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBoxText</code>:
sv: Användbara metoder för en <code>Gtk.ComboBoxText</code>:

note: (itstool) path: section/p
en: Implementations of <code>Gtk.CellRenderer</code> and useful methods:
sv: Implementationer av <code>Gtk.CellRenderer</code> och användbara metoder:

note: (itstool) path: item/p
en: <code>Gtk.CellRendererText</code> - renders text in a cell
sv: <code>Gtk.CellRendererText</code> - renderar text i en cell

note: (itstool) path: item/p
en: <code>Gtk.CellRendererPixbuf</code> - renders an image in a cell
sv: <code>Gtk.CellRendererPixbuf</code> - renderar en bild i en cell

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeSelection</code>:
sv: Användbara metoder för en <code>Gtk.TreeSelection</code>:

note: (itstool) path: item/p
en: <code>set_mode(type)</code> sets the type of selection, where type is one of
sv: <code>set_mode(typ)</code> ställer in markeringstypen, där typ är en av

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.NONE</code> - no selection is possible
sv: <code>Gtk.SelectionMode.NONE</code> - ingen markering är möjlig

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.SINGLE</code> - zero or one element may be selected
sv: <code>Gtk.SelectionMode.SINGLE</code> - inget eller ett element kan markeras

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.BROWSE</code> - exactly one element is selected. In some circumstances, such as initially or during a search operation, it’s possible for no element to be selected. What is really enforced is that the user can’t deselect a currently selected element except by selecting another element.
sv: <code>Gtk.SelectionMode.BROWSE</code> - exakt ett element är markerat. Under vissa omständigheter, så som initialt eller under en sökoperation, så är det möjligt att inget element är markerat. Vad som verkligen upprätthålls är att användaren inte kan avmarkera ett för närvarande markerat element förutom genom att markera ett annat element.

note: (itstool) path: section/title
en: References
sv: Referenser

note: (itstool) path: info/desc
en: A widget with two adjustable panes
sv: En komponent med två justerbara paneler

note: (itstool) path: section/code
en: #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *paned;
      GtkWidget *window;
      GtkWidget *image1;
      GtkWidget *image2;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Paned Example");
      gtk_window_set_default_size (GTK_WINDOW (window), 450, 350);
    
      paned = gtk_paned_new (GTK_ORIENTATION_HORIZONTAL);
      image1 = gtk_image_new_from_file ("gnome-image.png");
      image2 = gtk_image_new_from_file ("tux.png");
    
      gtk_paned_add1 (GTK_PANED (paned), image1);
      gtk_paned_add2 (GTK_PANED (paned), image2);
    
      gtk_container_add (GTK_CONTAINER (window), paned);
    
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
sv: #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *paned;
      GtkWidget *window;
      GtkWidget *image1;
      GtkWidget *image2;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Paned-exempel");
      gtk_window_set_default_size (GTK_WINDOW (window), 450, 350);
    
      paned = gtk_paned_new (GTK_ORIENTATION_HORIZONTAL);
      image1 = gtk_image_new_from_file ("gnome-image.png");
      image2 = gtk_image_new_from_file ("tux.png");
    
      gtk_paned_add1 (GTK_PANED (paned), image1);
      gtk_paned_add2 (GTK_PANED (paned), image2);
    
      gtk_container_add (GTK_CONTAINER (window), paned);
    
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation">Standard Enumerations</link>
sv: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation">Standarduppräkningstyper</link>

[ctx: text]
note: (itstool) path: info/title
en: Paned (JavaScript)
sv: Paned (Javascript)

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class PanedExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });
    
           // 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,
                                                        title: "Paned Window Example",
                                                        default_width: 450,
                                                        default_height: 350,
                                                        border_width: 10 });
    
            // a new widget with two adjustable panes,
            // one on the left and one on the right
            this.paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL);
    
            // two images
            this.image1 = new Gtk.Image();
            this.image1.set_from_file("gnome-image.png");
            this.image2 = new Gtk.Image();
            this.image2.set_from_file("tux.png");
    
            // add the first image to the left pane
            this.paned.add1(this.image1);
            // add the second image to the right pane
            this.paned.add2(this.image2)
    
            // add the panes to the window
            this.window.add(this.paned)
            this.window.show_all();
        }
    };
    
    // Run the application
    let app = new PanedExample();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    const Gtk = imports.gi.Gtk;
    
    class PanedExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });
    
           // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate() {
            this.window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
            // Skapa programfönstret
            this.window = new Gtk.ApplicationWindow  ({ application: this.application,
                                                        window_position: Gtk.WindowPosition.CENTER,
                                                        title: "Paned-fönsterexempel",
                                                        default_width: 450,
                                                        default_height: 350,
                                                        border_width: 10 });
    
            // en ny komponent med två justerbara paneler,
            // en till vänster och en till höger
            this.paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL);
    
            // två bilder
            this.image1 = new Gtk.Image();
            this.image1.set_from_file("gnome-image.png");
            this.image2 = new Gtk.Image();
            this.image2.set_from_file("tux.png");
    
            // lägg till den första bilden till den vänstra panelen
            this.paned.add1(this.image1);
            // lägg till den andra bilden till den högra panelen
            this.paned.add2(this.image2)
    
            // lägg till panelerna till fönstret
            this.window.add(this.paned)
            this.window.show_all();
        }
    };
    
    // Kör programmet
    let app = new PanedExample();
    app.application.run (ARGV);

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Paned Example", application=app)
            self.set_default_size(450, 350)
    
            # a new widget with two adjustable panes,
            # one on the left and one on the right
            paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL)
    
            # two images
            image1 = Gtk.Image()
            image1.set_from_file("gnome-image.png")
            image2 = Gtk.Image()
            image2.set_from_file("tux.png")
    
            # add the first image to the left pane
            paned.add1(image1)
            # add the second image to the right pane
            paned.add2(image2)
    
            # add the panes to the window
            self.add(paned)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Paned-exempel", application=app)
            self.set_default_size(450, 350)
    
            # en ny komponent med två justerbara paneler,
            # en till vänster och en till höger
            paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL)
    
            # två bilder
            image1 = Gtk.Image()
            image1.set_from_file("gnome-image.png")
            image2 = Gtk.Image()
            image2.set_from_file("tux.png")
    
            # lägg till den första bilden till den vänstra panelen
            paned.add1(image1)
            # lägg till den andra bilden till den högra panelen
            paned.add2(image2)
    
            # lägg till panelerna till fönstret
            self.add(paned)
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a Paned widget
sv: Användbara metoder för en Paned-komponent

note: (itstool) path: section/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "Paned Example";
    		window.set_default_size (450,350);
    
    		// a new widget with two adjustable panes,
    		// one on the left and one on the right
    		var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
    
    		/* two images */
    		var image1 = new Gtk.Image ();
    		image1.set_from_file ("gnome-image.png");
    		var image2 = new Gtk.Image ();
    		image2.set_from_file ("tux.png");
    
    		/* add the first image to the left pane */
    		paned.add1 (image1);
    
    		/* add the second image to the right pane */
    		paned.add2 (image2);
    
    		/* add the panes to the window */
    		window.add (paned);
    		window.show_all ();
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: /* Det här är programmet. */
    public class MyApplication : Gtk.Application {
    	/* Åsidosätt ”activate”-signalen för GLib.Application. */
    	protected override void activate () {
    
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "Paned-exempel";
    		window.set_default_size (450,350);
    
    		// en ny komponent med två justerbara paneler,
    		// en till vänster och en till höger
    		var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
    
    		/* två bilder */
    		var image1 = new Gtk.Image ();
    		image1.set_from_file ("gnome-image.png");
    		var image2 = new Gtk.Image ();
    		image2.set_from_file ("tux.png");
    
    		/* lägg till den första bilden till den vänstra panelen */
    		paned.add1 (image1);
    
    		/* lägg till den andra bilden till den högra panelen */
    		paned.add2 (image2);
    
    		/* lägg till panelerna till fönstret */
    		window.add (paned);
    		window.show_all ();
    	}
    }
    
    /* main skapar och kör programmet. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

[ctx: text]
note: (itstool) path: info/title
en: Photo wall (C)
sv: Fotovägg (C)

note: (itstool) path: info/desc
en: A Clutter image viewer
sv: En bildvisare med Clutter

note: (itstool) path: page/title
en: Photo wall
sv: Fotovägg

note: (itstool) path: synopsis/p
en: For this example we will build a simple image viewer using Clutter. You will learn:
sv: För detta exempel kommer vi bygga en enkel bildvisare med Clutter. Du kommer lära dig:

note: (itstool) path: item/p
en: How to place an image in a <code>ClutterActor</code>
sv: Hur du placerar en bild i en <code>ClutterActor</code>

note: (itstool) path: item/p
en: How to do simple transitions using Clutter's animation framework
sv: Hur du gör enkla övergångar med Clutters animeringsramverk

note: (itstool) path: item/p
en: How to get file names from a directory
sv: Hur du får filnamn från en katalog

note: (itstool) path: section/title
en: Introduction
sv: Introduktion

note: (itstool) path: section/p
en: Clutter is a library for creating dynamic user interfaces using OpenGL for hardware acceleration. This example demonstrates a small, but central, part of the Clutter library to create a simple but attractive image viewing program.
sv: Clutter är ett bibliotek för att skapa dynamiska användargränssnitt med OpenGL för hårdvaruacceleration. Detta exempel demonstrerar en liten, men central, del av Clutter-biblioteket för att skapa ett enkelt men vackert bildvisningsprogram.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>photo-wall</file> as project name and directory.
sv: Välj <gui>GTK+ (enkel)</gui> från fliken <gui>C</gui>, klicka på <gui>Fortsätt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>photo-wall</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial using the interface builder.
sv: Säkerställ att <gui>Använd GtkBuilder för användargränssnitt</gui> är inaktiverat då vi kommer skapa användargränssnittet manuellt i denna handledning. Se handledningen <link xref="guitar-tuner.c">Gitarrstämmare</link> för användning av gränssnittsbyggaren.

note: (itstool) path: item/p
en: Enable <gui>Configure external packages</gui>. On the next page, select <em>clutter-1.0</em> from the list to include the Clutter library in your project.
sv: Aktivera <gui>Konfigurera externa paket</gui>. På nästa sida, välj <em>clutter-1.0</em> från listan för att inkludera Clutter-biblioteket i ditt projekt.

note: (itstool) path: section/title
en: A look at Photo Wall
sv: En titt på fotoväggen

note: (itstool) path: section/p
en: Our image viewer presents the user with a wall of images.
sv: Vår bildvisare visar en vägg av bilder för användaren.

note: (itstool) path: section/p
en: When an image is clicked, it is animated to fill the viewing area. When the image having focus is clicked it is returned to its original position using an animation with the same duration of 500 milliseconds.
sv: När en bild klickas på animeras den så att den fyller visningsområdet. När bilden som har fokus klickas på så returneras den till sin ursprungliga position med en animering med samma längd, 500 millisekunder.

note: (itstool) path: section/title
en: Initial setup
sv: Initial konfiguration

note: (itstool) path: section/title
en: Jumping into the code
sv: Ett hopp in i koden

note: (itstool) path: item/p
en: Line 7: You must initialize Clutter. If you forget to do this, you will get very strange errors. Be warned.
sv: Line 7: Du måste initiera Clutter. Om du glömmer att göra detta kommer du stöta på väldigt märkliga fel. Detta är en varning.

note: (itstool) path: section/title
en: Setting up our image actors
sv: Konfigurera våra bildaktörer

note: (itstool) path: note/p
en: In Clutter, an actor is the most basic visual element. Basically, everything you see is an actor.
sv: I Clutter är en aktör det mest grundläggande visuella elementet. I princip allt du ser är en aktör.

note: (itstool) path: section/title
en: Loading the images
sv: Läsa in bilderna

note: (itstool) path: section/p
en: Let's take a short break from Clutter to see how we can get the file names from our image directory.
sv: Låt oss ta en kort rast från Clutter för att se hur vi kan få filnamnen från vår bildkatalog.

note: (itstool) path: section/code
en: 
    static void
    load_image_path_names()
    {
        /* Ensure we can access the directory. */
        GError *error = NULL;
        GDir *dir = g_dir_open(IMAGE_DIR_PATH, 0, &amp;error);
        if(error)
        {
            g_warning("g_dir_open() failed with error: %s\n", error-&gt;message);
            g_clear_error(&amp;error);
            return;
        }
    
        img_paths = g_ptr_array_new_with_free_func (g_free);
    
        const gchar *filename = g_dir_read_name(dir);
        while(filename)
        {
            if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png"))
            {
                gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
                g_ptr_array_add (img_paths, path);
            }
            filename = g_dir_read_name(dir);
        }
    }
sv: 
    static void
    load_image_path_names()
    {
        /* Säkerställ att vi kan komma åt katalogen. */
        GError *error = NULL;
        GDir *dir = g_dir_open(IMAGE_DIR_PATH, 0, &amp;error);
        if(error)
        {
            g_warning("g_dir_open() failed with error: %s\n", error-&gt;message);
            g_clear_error(&amp;error);
            return;
        }
    
        img_paths = g_ptr_array_new_with_free_func (g_free);
    
        const gchar *filename = g_dir_read_name(dir);
        while(filename)
        {
            if(g_str_has_suffix(filename, ".jpg") || g_str_has_suffix(filename, ".png"))
            {
                gchar *path = g_build_filename(IMAGE_DIR_PATH, filename, NULL);
                g_ptr_array_add (img_paths, path);
            }
            filename = g_dir_read_name(dir);
        }
    }

note: (itstool) path: item/p
en: Lines 5 and 12: This opens our directory or, if an error occurred, returns after printing an error message.
sv: Rad 5 och 12: Detta öppnar vår katalog eller, om ett fel uppstod, returnerar efter att ha skrivit ut ett felmeddelande.

note: (itstool) path: section/title
en: Set up the actors
sv: Konfigurera aktörerna

note: (itstool) path: item/p
en: Line 9‒12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.
sv: Rad 9‒12: Nu ansluter vi <code>button-press-event</code> till återanropet <code>actor_clicked_cb</code> som vi kommer ta en titt på härnäst.

note: (itstool) path: section/p
en: At this point we've got a wall of images that are ready to be viewed.
sv: Vid denna punkt har vi en vägg av bilder som är redo att tittas på.

note: (itstool) path: section/title
en: Reacting to the clicks
sv: Reagera på klicken

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="photo-wall/photo-wall.c">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="photo-wall/photo-wall.c">referenskod</link>.

note: (itstool) path: info/desc
en: A widget which indicates progress visually
sv: En komponent som indikerar förlopp visuellt

note: (itstool) path: page/p
en: This ProgressBar "fills in" by a fraction of the bar until it is full.
sv: Denna ProgressBar ”fylls i” med en bråkdel av raden tills den är full.

[ctx: text]
note: (itstool) path: info/title
en: ProgressBar (JavaScript)
sv: ProgressBar (Javascript)

note: (itstool) path: info/desc
en: A bar which animates to indicate progress
sv: En rad som animeras för att indikera ett förlopp

note: (itstool) path: div/p
en: Pressing any key stops and starts this ProgressBar.
sv: Att trycka på valfri tangent stoppar och startar denna ProgressBar.

note: (itstool) path: page/p
en: This ProgressBar is stopped and started by pressing any key.
sv: Denna ProgressBar stoppas och startas genom att trycka på valfri tangent.

note: (itstool) path: info/desc
en: A widget which indicates progress visually.
sv: En komponent som indikerar förlopp visuellt.

note: (itstool) path: section/title
en: Useful methods for a ProgressBar widget
sv: Användbara metoder för en ProgressBar-komponent

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling">Gdk - Key Values</link>
sv: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling">Gdk - Tangentvärden</link>

[ctx: text]
note: (itstool) path: info/title
en: Properties (Python)
sv: Egenskaper (Python)

note: (itstool) path: page/title
en: Properties
sv: Egenskaper

note: (itstool) path: section/code
en: 
    label = Gtk.Label(label="Hello World", angle=25, halign=Gtk.Align.END)
sv: 
    label = Gtk.Label(label="Hej världen", angle=25, halign=Gtk.Align.END)

note: (itstool) path: section/p
en: Alternatively, you can define these properties separately by using the method associated with it.
sv: Alternativt kan du definiera dessa egenskaper separat genom att använda metoden som är associerad med det.

note: (itstool) path: section/code
en: 
    label = Gtk.Label()
    label.set_label("Hello World")
    label.set_angle(25)
    label.set_halign(Gtk.Align.END)
sv: 
    label = Gtk.Label()
    label.set_label("Hej världen")
    label.set_angle(25)
    label.set_halign(Gtk.Align.END)

note: (itstool) path: section/p
en: Once you have created such a label, you can get the text of the label with <code>label.get_label()</code>, and analogously for the other properties.
sv: Då du skapat en sådan etikett kan du få texten för etiketten med <code>label.get_label()</code>, och på motsvarande sätt för de andra egenskaperna.

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Python
sv: Handledningar, kodexempel och plattformsdemonstrationer i Python

note: (itstool) path: section/title (itstool) path: page/title
en: Tutorial for beginners
sv: Handledning för nybörjare

note: (itstool) path: info/desc
en: A choice from multiple checkbuttons
sv: Ett val från flera kryssrutor

note: (itstool) path: page/p
en: These radiobuttons report their activity in the terminal.
sv: Dessa radioknappar rapporterar sin aktivitet i terminalen.

[ctx: text]
note: (itstool) path: info/title
en: RadioButton (JavaScript)
sv: RadioButton (Javascript)

note: (itstool) path: info/desc
en: Only one can be selected at a time
sv: Endast en åt gången kan väljas

note: (itstool) path: section/code
en: 
    const RadioButtonExample = new Lang.Class({
        Name: 'RadioButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsradiobutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
sv: 
    const RadioButtonExample = new Lang.Class({
        Name: 'RadioButton-exempel',
    
        // Skapa programmet i sig
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsradiobutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate: function() {
            this._window.present();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function() {
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen RadioButtonExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Travel Planning"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Reseplanering"});

note: (itstool) path: section/title
en: Creating the radiobuttons
sv: Skapa radioknapparna

note: (itstool) path: section/code
en: 
            // Create a label for the first group of buttons
            this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
sv: 
            // Skapa en etikett för den första gruppen knappar
            this._placeLabel = new Gtk.Label ({label: "Vart vill du resa?"});

note: (itstool) path: section/code
en: 
            // Create three radio buttons three different ways
            this._place1 = new Gtk.RadioButton ({label: "The Beach"});
    
            this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
            this._place2.set_label ("The Moon");
    
            this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
            // this._place3.set_active (true);
sv: 
            // Skapa tre radioknappar på tre olika sätt
            this._place1 = new Gtk.RadioButton ({label: "Stranden"});
    
            this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
            this._place2.set_label ("Månen");
    
            this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarktis");
            // this._place3.set_active (true);

note: (itstool) path: section/code
en: 
            // Create a label for the second group of buttons
            this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
    
            // Create three more radio buttons
            this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
            this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
            this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });
sv: 
            // Skapa en etikett för den andra gruppen knappar
            this._thingLabel = new Gtk.Label ({label: "Och vad skulle du vilja ta med dig?" });
    
            // Skapa tre till radioknappar
            this._thing1 = new Gtk.RadioButton ({label: "Pingviner" });
            this._thing2 = new Gtk.RadioButton ({label: "Sololja", group: this._thing1 });
            this._thing3 = new Gtk.RadioButton ({label: "En rymddräkt", group: this._thing1 });

note: (itstool) path: section/p
en: Here we create the label for the second group of buttons, and then create them all the same way.
sv: Här skapar vi etiketten för den andra gruppen knappar, och skapar sedan dem alla på samma sätt.

note: (itstool) path: section/title
en: Creating the rest of the user interface
sv: Skapa resten av användargränssnittet

note: (itstool) path: section/code
en: 
            // Create a stock OK button
            this._okButton = new Gtk.Button ({
                label: 'gtk-ok',
                use_stock: 'true',
                halign: Gtk.Align.END });
    
            // Connect the button to the function which handles clicking it
            this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));
sv: 
            // Skapa en OK-standardknapp
            this._okButton = new Gtk.Button ({
                label: 'gtk-ok',
                use_stock: 'true',
                halign: Gtk.Align.END });
    
            // Anslut knappen till funktionen som hanterar att klicka på den
            this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));

note: (itstool) path: section/p
en: This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.
sv: Denna kod skapar en <link xref="button.js">Gtk.Button</link> och binder den till en funktion som kommer visa ett fånigt meddelande för folk när de klickar OK, beroende på vilken RadioButton som valts.

note: (itstool) path: section/code
en: 
            // Show the window and all child widgets
            this._window.show_all();
        },
sv: 
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/code
en: 
        _okClicked: function () {
    
            // Create a popup that shows a silly message
            this._travel = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
                text: this._messageText() });
    
            // Show the popup
            this._travel.show();
    
            // Bind the OK button to the function that closes the popup
            this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
    
        },
sv: 
        _okClicked: function () {
    
            // Skapa en poppupp som visar ett fånigt meddelande
            this._travel = new Gtk.MessageDialog ({
                transient_for: this._window,
                modal: true,
                message_type: Gtk.MessageType.OTHER,
                buttons: Gtk.ButtonsType.OK,
                text: this._messageText() });
    
            // Visa poppuppen
            this._travel.show();
    
            // Bind OK-knappen till funktionen som stänger poppuppen
            this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));
    
        },

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new RadioButtonExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new RadioButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda RadioButtonExample-klassen, och startar programmet.

note: (itstool) path: info/desc
en: Mutually exclusive buttons.
sv: Ömsesidigt uteslutande knappar.

note: (itstool) path: section/title
en: Useful methods for a RadioButton widget
sv: Användbara metoder för en RadioButton-komponent

note: (itstool) path: section/p
en: In line 16 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 16 ansluts signalen <code>"toggled"</code> till återanropsfunktionen <code>toggled_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: section/p
en: As seen in <link xref="properties.py"/>, instead of <code>button1 = Gtk.RadioButton(label="Button 1")</code> we could create the button and label it with
sv: Som kan ses i <link xref="properties.py"/>, skulle vi istället för <code>button1 = Gtk.RadioButton(label="Knapp 1")</code> kunna skapa knappen och etikettera den med

note: (itstool) path: section/code
en: 
    button1 = Gtk.RadioButton()
    button1.set_label("Button 1").
sv: 
    button1 = Gtk.RadioButton()
    button1.set_label("Knapp 1").

note: (itstool) path: section/p
en: Yet another way to create a new RadioButton with a label is <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code> (the first argument is the group of the radiobuttons, which we can get with <code>get_group()</code>, the second argument is the label).
sv: Ännu ett annat sätt att skapa en ny RadioButton med en etikett är <code>button1 = Gtk.RadioButton.new_with_label(None, "Knapp 1")</code> (det första argumentet är radioknapparnas grupp, vilken vi kan få med <code>get_group()</code>, det andra argumentet är etiketten).

[ctx: text]
note: (itstool) path: info/title
en: Record collection (JavaScript)
sv: Skivsamling (Javascript)

note: (itstool) path: info/desc
en: Create a small database application for ordering your music collection
sv: Skapa ett litet databasprogram för att få ordning på din musiksamling

note: (itstool) path: page/title
en: Record collection
sv: Skivsamling

note: (itstool) path: item/p
en: How to connect to a database using libgda
sv: Hur du ansluter till en databas med libgda

note: (itstool) path: section/p
en: This demo uses the Javascript language. We are going to demonstrate how to connect and use a database from a GTK program, by using the GDA (GNOME Data Access) library. Thus you also need this library installed.
sv: Denna demonstration använder språket Javascript. Vi kommer att demonstrera hur du ansluter till och använder en databas från ett GTK-program, genom att använda biblioteket GDA (GNOME Data Access). Därmed behöver du även ha detta bibliotek installerat.

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill-out your details on the next few pages. Use <file>record-collection</file> as project name and directory.
sv: Välj <gui>Allmän Javascript</gui> från fliken <gui>JS</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>record-collection</file> som projektnamn och katalog.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
sv: Klicka på <gui>Färdig</gui> så kommer projektet skapas åt dig. Öppna <file>src/main.js</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Den innehåller väldigt enkel exempelkod.

note: (itstool) path: section/title
en: Program Structure
sv: Programstruktur

note: (itstool) path: section/title
en: Starting the fun
sv: Starta det roliga

note: (itstool) path: section/p
en: Let's start by examining the skeleton of the program:
sv: Låt oss starta genom att undersöka programmets skelett:

note: (itstool) path: item/p
en: Lines 1‒4: Initial imports. Pay special attention to line 3, which tells Javascript to import the GDA library, our focus in this tutorial.
sv: Rad 1‒4: Initiala importer. Var särskilt uppmärksam på rad 3, som säger till Javascript att importera GDA-biblioteket, vårt fokus i denna handledning.

note: (itstool) path: item/p
en: Lines 6‒17: Define our <code>Demo</code> class. Pay special attention to lines 13‒15, where we call 3 methods which will do the whole job. They will be detailed below.
sv: Rad 6‒17: Definiera vår klass <code>Demo</code>. Var särskilt uppmärksam på rad 13‒15, där vi anropar tre metoder som gör hela jobbet. De kommer beskrivas i detalj nedan.

note: (itstool) path: item/p
en: Lines 19‒23: Start the application.
sv: Rad 19‒23: Starta programmet.

note: (itstool) path: section/title
en: Designing the application
sv: Designa programmet

note: (itstool) path: section/p
en: Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User Interface (UI). As UI is not our focus, we will explain only the relevant parts.
sv: Låt oss ta en titt på metoden <code>setupWindow</code>. Den ansvarar för att skapa användargränssnittet (UI). Då UI inte är vårt fokus kommer vi endast förklara de relevanta delarna.

note: (itstool) path: item/p
en: Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the table.
sv: Rad 39: Skapa komponenten (<code>TextView</code>) där vi kommer visa tabellens innehåll.

note: (itstool) path: section/title
en: Connecting to and initializing the database
sv: Ansluta till och initiera databasen

note: (itstool) path: section/p
en: The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
sv: Koden som skapar anslutningen till databasen är i metoden <code>setupDatabase</code> nedan:

note: (itstool) path: section/p
en: At this point we have the database set up, and are ready to use it.
sv: Vid denna punkt har vi konfigurerat databasen, och är redo att använda den.

note: (itstool) path: item/p
en: Line 12: Finally, execute the SQL statement (<code>INSERT</code>).
sv: Rad 12: Exekvera slutligen SQL-satsen (<code>INSERT</code>).

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. You now have a database for your record collection!
sv: All kod som du behöver bör nu vara på plats, så testa att köra koden. Du har nu en databas för din skivsamling!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="record-collection/record-collection.js">reference code</link>.
sv: Om du stöter på problem med handledningen kan du jämföra din kod med denna <link href="record-collection/record-collection.js">referenskod</link>.

note: (itstool) path: item/p
en: Returned if the dialog is deleted
sv: Returneras om dialogrutan tas bort

note: (itstool) path: item/p
en: Returned by OK buttons in GTK+ dialogs
sv: Returneras av OK-knappar i GTK+-dialoger

note: (itstool) path: item/p
en: Returned by Cancel buttons in GTK+ dialogs
sv: Returneras av Avbryt-knappar i GTK+-dialoger

note: (itstool) path: item/p
en: Returned by Close buttons in GTK+ dialogs
sv: Returneras av Stäng-knappar i GTK+-dialoger

note: (itstool) path: item/p
en: Returned by Yes buttons in GTK+ dialogs
sv: Returneras av Ja-knappar i GTK+-dialoger

note: (itstool) path: item/p
en: Returned by No buttons in GTK+ dialogs
sv: Returneras av Nej-knappar i GTK+-dialoger

note: (itstool) path: item/p
en: Returned by Apply buttons in GTK+ dialogs
sv: Returneras av Verkställ-knappar i GTK+-dialoger

note: (itstool) path: item/p
en: Returned by Help buttons in GTK+ dialogs
sv: Returneras av Hjälp-knappar i GTK+-dialoger

note: (itstool) path: info/desc
en: A slider widget for selecting a value from a range
sv: En skjutreglagekomponent för att välja ett värde från ett intervall

[ctx: text]
note: (itstool) path: info/title
en: Scale (JavaScript)
sv: Scale (Javascript)

note: (itstool) path: info/desc
en: A slider which corresponds to a numerical value
sv: Ett skjutreglage som motsvarar ett numeriskt värde

note: (itstool) path: section/code
en: 
    const ScaleExample = new Lang.Class({
        Name: 'Scale Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsscale'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
sv: 
    const ScaleExample = new Lang.Class({
        Name: 'Scale-exempel',
    
        // Skapa programmet i sig
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsscale'
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate: function() {
            this._window.present();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function() {
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the ScaleExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen ScaleExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Birds on a Floe"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Fåglar på ett isflak"});

note: (itstool) path: section/code
en: 
            // Create a grid to arrange things in
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20,
                margin_left: 20});
    
            // Attach everything to the grid
            this._UIGrid.attach (this._label, 0, 0, 1, 1);
            this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
            this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
sv: 
            // Skapa ett rutnät att arrangera saker i
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20,
                margin_left: 20});
    
            // Fäst allting till rutnätet
            this._UIGrid.attach (this._label, 0, 0, 1, 1);
            this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
            this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

note: (itstool) path: section/p
en: Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly spaced.
sv: Här skapar vi en <link xref="grid.js">Grid</link> att stoppa allting i, och fäster sedan alla våra komponenter till den. Observera att här och på några av komponenterna själva använder vi marginaler för att få saker att hålla bra avstånd.

note: (itstool) path: section/code
en: 
            // Add the grid to the window
            this._window.add (this._UIGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
sv: 
            // Lägg till rutnätet till fönstret
            this._window.add (this._comboBoxText);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Finally, we add the Grid to the window, then tell the window to show itself and all the widgets inside of it.
sv: Slutligen lägger vi till vår Grid till fönstret, och säger sedan till fönstret att visa sig själv och alla komponenterna i det.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new ScaleExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new ScaleExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ScaleExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda ScaleExample-klassen, och startar programmet.

note: (itstool) path: section/title
en: Useful methods for a Scale widget
sv: Användbara metoder för en Scale-komponent

note: (itstool) path: section/p
en: In line 28 the signal <code>"value-changed"</code> is connected to the callback function <code>scale_moved()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 28 ansluts signalen <code>"value-changed"</code> till återanropsfunktionen <code>scale_moved()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html">Standard Enumerations</link>
sv: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html">Standarduppräkningstyper</link>

note: (itstool) path: info/desc
en: Adds scrollbars to its child widget
sv: Lägger till rullningslister till sin barnkomponent

note: (itstool) path: page/p
en: An image in a scrolled window.
sv: En bild i ett rullat fönster.

[ctx: text]
note: (itstool) path: info/title
en: ScrolledWindow (JavaScript)
sv: ScrolledWindow (Javascript)

note: (itstool) path: section/title
en: Useful methods for a ScrolledWindow widget
sv: Användbara metoder för en ScrolledWindow-komponent

note: (itstool) path: page/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    		/* Create the window of this application. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "ScrolledWindow Example";
    		window.set_default_size (200, 200);
    
    		var scrolled_window = new Gtk.ScrolledWindow (null, null);
    		scrolled_window.set_border_width (10);
    		scrolled_window.add_with_viewport (new Gtk.Image.from_file ("gnome-image.png"));
    		scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
    
    		window.add (scrolled_window);
    		window.show_all ();
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: /* Det här är programmet. */
    public class MyApplication : Gtk.Application {
    	/* Åsidosätt ”activate”-signalen för GLib.Application. */
    	protected override void activate () {
    		/* Skapa fönstret för detta program. */
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "ScrolledWindow-exempel";
    		window.set_default_size (200, 200);
    
    		var scrolled_window = new Gtk.ScrolledWindow (null, null);
    		scrolled_window.set_border_width (10);
    		scrolled_window.add_with_viewport (new Gtk.Image.from_file ("gnome-image.png"));
    		scrolled_window.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
    
    		window.add (scrolled_window);
    		window.show_all ();
    	}
    }
    
    /* main skapar och kör programmet. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: A separator widget
sv: En avskiljarkomponent

note: (itstool) path: page/p
en: A horizontal and a vertical separator divide some labels.
sv: En horisontell och en vertikal avskiljare delar på några etiketter.

note: (itstool) path: section/code
en: #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
      GtkWidget *label1;
      GtkWidget *label2;
      GtkWidget *label3;
      GtkWidget *hseparator;
      GtkWidget *vseparator;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Separator Example");
    
      label1 = gtk_label_new ("Below, a horizontal separator.");
      label2 = gtk_label_new ("On the right, a vertical separator.");
      label3 = gtk_label_new ("On the left, a vertical separator.");
    
      vseparator = gtk_separator_new (GTK_ORIENTATION_VERTICAL);
      hseparator = gtk_separator_new (GTK_ORIENTATION_HORIZONTAL);
    
      grid = gtk_grid_new ();
    
      gtk_grid_attach (GTK_GRID (grid), label1, 0, 0, 3, 1);
      gtk_grid_attach (GTK_GRID (grid), hseparator, 0, 1, 3, 1);
      gtk_grid_attach (GTK_GRID (grid), label2, 0, 2, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), vseparator, 1, 2, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), label3, 2, 2, 1, 1);
    
      gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE);
    
      gtk_container_add (GTK_CONTAINER (window), grid);
    
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
sv: #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *grid;
      GtkWidget *window;
      GtkWidget *label1;
      GtkWidget *label2;
      GtkWidget *label3;
      GtkWidget *hseparator;
      GtkWidget *vseparator;
    
      window = gtk_application_window_new (app);
      gtk_window_set_title (GTK_WINDOW (window), "Separator-exempel");
    
      label1 = gtk_label_new ("Nedan, en horisontell avskiljare.");
      label2 = gtk_label_new ("Till höger, en vertikal avskiljare.");
      label3 = gtk_label_new ("Till vänster, en vertikal avskiljare.");
    
      vseparator = gtk_separator_new (GTK_ORIENTATION_VERTICAL);
      hseparator = gtk_separator_new (GTK_ORIENTATION_HORIZONTAL);
    
      grid = gtk_grid_new ();
    
      gtk_grid_attach (GTK_GRID (grid), label1, 0, 0, 3, 1);
      gtk_grid_attach (GTK_GRID (grid), hseparator, 0, 1, 3, 1);
      gtk_grid_attach (GTK_GRID (grid), label2, 0, 2, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), vseparator, 1, 2, 1, 1);
      gtk_grid_attach (GTK_GRID (grid), label3, 2, 2, 1, 1);
    
      gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE);
    
      gtk_container_add (GTK_CONTAINER (window), grid);
    
      gtk_widget_show_all (window);
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

note: (itstool) path: section/title
en: API Reference
sv: API-referens

note: (itstool) path: section/code
en: /* This is the application. */
    public class Application : Gtk.Application {
    
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Override the 'activate' signal of GLib.Application,
    	 * which is inherited by Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Separator Example";
    
    		var label1 = new Gtk.Label ("Below, a horizontal separator.");
    		var label2 = new Gtk.Label ("On the right, a vertical separator.");
    		var label3 = new Gtk.Label ("On the left, a vertical separator.");
    
    		var hseparator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
    		var vseparator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
    
    		var grid = new Gtk.Grid();
    
    		grid.attach (label1, 0, 0, 3, 1);
    		grid.attach (hseparator, 0, 1, 3, 1);
    		grid.attach (label2, 0, 2, 1, 1);
    		grid.attach (vseparator, 1, 2, 1, 1);
    		grid.attach (label3, 2, 2, 1, 1);
    
    		grid.set_column_homogeneous(true);
    
    		window.add (grid);
    		this.add_window (window);
    
    		window.show_all ();
    	}
    }
    
    /* The main function creates the application and runs it.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }
sv: /* Det här är programmet. */
    public class Application : Gtk.Application {
    
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Åsidosätt ”activate”-signalen för GLib.Application,
    	 * vilken ärvs av Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Separator-exempel";
    
    		var label1 = new Gtk.Label ("Nedan, en horisontell avskiljare.");
    		var label2 = new Gtk.Label ("Till höger, en vertikal avskiljare.");
    		var label3 = new Gtk.Label ("Till vänster, en vertikal avskiljare.");
    
    		var hseparator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
    		var vseparator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
    
    		var grid = new Gtk.Grid();
    
    		grid.attach (label1, 0, 0, 3, 1);
    		grid.attach (hseparator, 0, 1, 3, 1);
    		grid.attach (label2, 0, 2, 1, 1);
    		grid.attach (vseparator, 1, 2, 1, 1);
    		grid.attach (label3, 2, 2, 1, 1);
    
    		grid.set_column_homogeneous(true);
    
    		window.add (grid);
    		this.add_window (window);
    
    		window.show_all ();
    	}
    }
    
    /* main-funktionen skapar programmet och kör det.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }

note: (itstool) path: page/title
en: Set up gedit for JavaScript development
sv: Konfigurera gedit för Javascript-utveckling

note: (itstool) path: page/p
en: This tutorial will show you how to set up <link href="https://wiki.gnome.org/Apps/Gedit">gedit</link>, GNOME's basic text editor, so that it has a handful of extra features which are useful for writing JavaScript code.
sv: Denna handledning kommer visa dig hur du konfigurerar <link href="https://wiki.gnome.org/Apps/Gedit">gedit</link>, GNOME:s enkla textredigerare, så att den har en handfull extra funktioner som är användbara för att skriva Javascript-kod.

note: (itstool) path: section/title
en: Making code clearer
sv: Göra kod tydligare

note: (itstool) path: section/p
en: Click on <gui>Edit</gui> in gedit's menu bar, then click on <gui>Preferences</gui>. You should see something like this:
sv: Klicka på <gui>Redigera</gui> i gedits menyrad, klicka sedan på <gui>Inställningar</gui>. Du bör se något i stil med detta:

note: (itstool) path: section/p
en: Here are the options you want to make sure are turned on.
sv: Här är alternativen du kommer vilja säkerställa är aktiverade.

note: (itstool) path: item/p
en: <gui>Display line numbers</gui> will help you compare the code you type in with the original, and make it easier to see which line is causing an error if there is a bug.
sv: <gui>Visa radnummer</gui> kommer hjälpa dig att jämföra koden du skriver in med originalet, och göra det lättare att se vilken rad som orsakar problem om ett fel uppstår.

note: (itstool) path: item/p
en: <gui>Highlight current line</gui> makes it easier to see which line you're on, when you have to go back and forth a lot.
sv: <gui>Färgmarkera aktuell rad</gui> gör det lättare att se vilken rad du är på när du måste gå mycket fram och tillbaka.

note: (itstool) path: item/p
en: <gui>Highlight matching brackets</gui> helps you make sure you didn't leave out a bracket by accident.
sv: <gui>Färgmarkera matchande parenteser</gui> hjälper dig att säkerställa att du inte glömde en parentes av misstag.

note: (itstool) path: section/title
en: Making editing easier
sv: Göra redigering enklare

note: (itstool) path: section/p
en: In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see something like this:
sv: Klicka på fliken <gui>Redigerare</gui> i gedits dialogruta <gui>Inställningar</gui>. Du bör se något i stil med detta:

note: (itstool) path: section/p
en: Here, you want to have <gui>Enable automatic indentation</gui> turned on. This means that when you hit <key>Enter</key> the cursor stays indented as far as the last line was. This is extremely useful when writing JavaScript code, since it uses indentation to make it clearer which parts do what.
sv: Här kommer du vilja ha <gui>Aktivera automatisk indentering</gui> påslaget. Detta betyder att när du trycker <key>Retur</key> kommer markören förbli indenterad lika långt som föregående rad var. Detta är extremt användbart vid skrivning av Javascript-kod, då den använder indentering för att göra det tydligare vilka delar som gör vad.

note: (itstool) path: note/p
en: If you want to share code with other people who write GNOME JavaScript applications, you'll also want to set <gui>Tab width</gui> to 4 and turn on <gui>Insert spaces instead of tabs</gui>.
sv: Om du vill dela kod med andra personer som skriver Javascript-program för GNOME kommer du också vilja ställa in <gui>Tabulatorbredd</gui> till 4 och slå på <gui>Infoga blanksteg istället för tabulatortecken</gui>.

[ctx: text]
note: (itstool) path: info/title
en: Signals and callbacks (Python)
sv: Signaler och återanrop (Python)

note: (itstool) path: info/desc
en: An explanation of signals and callbacks in GTK+.
sv: En förklaring av signaler och återanrop i GTK+.

note: (itstool) path: page/title
en: Signals and callbacks
sv: Signaler och återanrop

note: (itstool) path: section/p
en: <link href="http://developer.gnome.org/gobject/stable/signal.html">Signals</link> in GObject documentation
sv: <link href="http://developer.gnome.org/gobject/stable/signal.html">Signaler</link> i GObject-dokumentationen

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number
sv: Erhåll ett heltal eller ett flyttal

note: (itstool) path: page/p
en: Choose a number, by entering it or by clicking on the -/+ buttons!
sv: Välj ett tal genom att mata in det eller genom att klicka på knapparna -/+!

[ctx: text]
note: (itstool) path: info/title
en: SpinButton (JavaScript)
sv: SpinButton (Javascript)

note: (itstool) path: info/desc
en: A number entry field that has + and - buttons
sv: Ett talinmatningsfält som har knapparna + och -

note: (itstool) path: page/p
en: A SpinButton is not related to a <link xref="spinner.js">Spinner</link>. It's a text entry field which only accepts numbers, and which has plus and minus buttons to let you change the value without having to type anything in.
sv: En SpinButton är inte relaterad till en <link xref="spinner.js">Spinner</link>. Den är ett textinmatningsfält som bara accepterar tal, och som har plus- och minus-knappar för att låta dig ändra värdet utan att behöva skriva in något.

note: (itstool) path: section/code
en: 
    const SpinButtonExample = new Lang.Class({
        Name: 'SpinButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsspinbutton'
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
sv: 
    const SpinButtonExample = new Lang.Class({
        Name: 'SpinButton-exempel',
    
        // Skapa programmet i sig
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsspinbutton'
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate: function() {
            this._window.present();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function() {
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the SpinButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen SpinButtonExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Kitten Feeder"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Kattmatare"});

note: (itstool) path: section/code
en: 
            // Create the first spinbutton using a function
            this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
            this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
sv: 
            // Skapa den första stegningsrutan med en funktion
            this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
            this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));

note: (itstool) path: section/code
en: 
            // Create an adjustment to use for the second spinbutton
            this._adjustment = new Gtk.Adjustment ({
                value: 1,
                lower: 0,
                upper: 9001,
                step_increment: 1,
                page_increment: 10 });
    
            // Create the second spinbutton
            this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
            this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // this._tuna.set_digits (1);
            // this._tuna.set_wrap (true);
sv: 
            // Skapa en justering att använda för den andra stegningsrutan
            this._adjustment = new Gtk.Adjustment ({
                value: 1,
                lower: 0,
                upper: 9001,
                step_increment: 1,
                page_increment: 10 });
    
            // skapa den andra stegningsrutan
            this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
            this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));
    
            // this._tuna.set_digits (1);
            // this._tuna.set_wrap (true);

note: (itstool) path: note/p
en: For the kitties' sake, please don't use set_digits to allow a decimal number of kittens.
sv: Var snäll mot kattungarna, använd inte set_digits så att decimalkatter är tillåtna.

note: (itstool) path: section/title
en: Creating the rest of the UI
sv: Skapa resten av användargränssnittet

note: (itstool) path: section/code
en: 
            // Create a grid to put the spinbuttons and their labels in
            this._spinGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_bottom: 20 });
    
            // Attach everything to the grid
            this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
            this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
            this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
            this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
            this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
    
            // Create a main grid to hold it and the last label
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Attach the smaller grid and the last label to the main grid
            this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
            this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);
sv: 
            // Skapa ett rutnät att stoppa stegningsrutorna och deras etiketter i
            this._spinGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_bottom: 20 });
    
            // Fäst allting vid rutnätet
            this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
            this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
            this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
            this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
            this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);
    
            // Skapa ett huvudrutnät för att hålla det och den sista etiketten
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Fäst det mindre rutnätet och den sista etiketten vid huvudrutnätet
            this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
            this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

note: (itstool) path: section/code
en: 
            // Add the main grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
sv: 
            // Lägg till huvudrutnätet till fönstret
            this._window.add (this._mainGrid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Finally, we add the larger Grid to the window, then tell the window to show itself and all the widgets inside of it.
sv: Slutligen lägger vi till vår större Grid till fönstret, och säger sedan till fönstret att visa sig själv och alla komponenterna i det.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new SpinButtonExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new SpinButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SpinButtonExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda SpinButtonExample-klassen, och startar programmet.

note: (itstool) path: info/desc
en: Retrieve an integer or floating-point number from the user.
sv: Erhåll ett heltal eller ett flyttal från användaren.

note: (itstool) path: section/title
en: Useful methods for a SpinButton widget
sv: Användbara metoder för en SpinButton-komponent

note: (itstool) path: section/p
en: In line 23 the signal <code>"value-changed"</code> is connected to the callback function <code>spin_selected()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 23 ansluts signalen <code>"value-changed"</code> till återanropsfunktionen <code>spin_selected()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision to be displayed by the spinbutton, up to 20 digits.
sv: <code>set_digits(siffror)</code> ställer in precisionen som ska visas av stegningsrutan, upp till 20 siffror.

note: (itstool) path: item/p
en: To get the value of the spinbutton as an integer, use <code>get_value_as_int()</code>.
sv: För att få värdet hos stegningsrutan som ett heltal, använd <code>get_value_as_int()</code>.

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number.
sv: Erhåll ett heltal eller ett flyttal.

note: (itstool) path: page/code
en: /* This is the application. */
    public class MyApplication : Gtk.Application {
    	Gtk.Label label;
    
    	/* Override the 'activate' signal of GLib.Application. */
    	protected override void activate () {
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "SpinButton Example";
    		window.set_default_size (210, 70);
    		window.set_border_width (5);
    
    		var spinbutton = new Gtk.SpinButton.with_range (0, 100, 1);
    		spinbutton.set_hexpand (true);
    
    		label = new Gtk.Label ("Choose a number");
    
    		var grid = new Gtk.Grid ();
    		grid.attach (spinbutton, 0, 0, 1, 1);
    		grid.attach (label, 0, 1, 1, 1);
    
    		spinbutton.value_changed.connect (this.value_changed_cb);
    
    		window.add (grid);
    		window.show_all ();
    	}
    
    	void value_changed_cb (Gtk.SpinButton spin) {
    		label.set_text ("The number you selected is %.0f.".printf (spin.get_value()));
    	}
    }
    
    /* main creates and runs the application. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: /* Det här är programmet. */
    public class MyApplication : Gtk.Application {
    	Gtk.Label label;
    
    	/* Åsidosätt ”activate”-signalen för GLib.Application. */
    	protected override void activate () {
    		var window = new Gtk.ApplicationWindow (this);
    		window.title = "SpinButton-exempel";
    		window.set_default_size (210, 70);
    		window.set_border_width (5);
    
    		var spinbutton = new Gtk.SpinButton.with_range (0, 100, 1);
    		spinbutton.set_hexpand (true);
    
    		label = new Gtk.Label ("Välj ett tal");
    
    		var grid = new Gtk.Grid ();
    		grid.attach (spinbutton, 0, 0, 1, 1);
    		grid.attach (label, 0, 1, 1, 1);
    
    		spinbutton.value_changed.connect (this.value_changed_cb);
    
    		window.add (grid);
    		window.show_all ();
    	}
    
    	void value_changed_cb (Gtk.SpinButton spin) {
    		label.set_text ("Talet du valde är %.0f.".printf (spin.get_value()));
    	}
    }
    
    /* main skapar och kör programmet. */
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: A spinner animation
sv: En animerad väntesnurra

note: (itstool) path: page/p
en: This Spinner is stopped and started by pressing the spacebar.
sv: Denna Spinner stoppas och startas genom tryck på blankstegstangenten.

[ctx: text]
note: (itstool) path: info/title
en: Spinner (JavaScript)
sv: Spinner (Javascript)

note: (itstool) path: item/p
en: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html">Gdk - Key Values</link>
sv: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html">Gdk - Tangentvärden</link>

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html">Key Values</link>
sv: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html">Tangentvärden</link>

note: (itstool) path: page/code
en: public class MyWindow : Gtk.ApplicationWindow {
    
    	Gtk.Widget spinner;
    
    	internal MyWindow (MyApplication app) {
    
    		Object (application: app, title: "Spinner Example");
    
    		this.set_default_size (200, 200);
    		this.border_width = 30;
    
    		spinner = new Gtk.Spinner ();
    
    		this.add (spinner);
    		(spinner as Gtk.Spinner).active = true;
    		spinner.show ();
    	}
    
    	protected override bool key_press_event (Gdk.EventKey event) {
    
    		//print (Gdk.keyval_name(event.keyval) +"\n");
    		if (Gdk.keyval_name(event.keyval) == "space") {
    
    			if ((spinner as Gtk.Spinner).active) {
    				(spinner as Gtk.Spinner).stop ();
    				//spinner.visible = false;
    			}
    			else {
    				(spinner as Gtk.Spinner).start ();
    				//spinner.visible = true;
    			}
    		}
    		return true;
    	}
    }
    
    public class MyApplication : Gtk.Application {
    
    	protected override void activate () {
    		MyWindow window = new MyWindow (this);
    		window.show ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.spinner");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: public class MyWindow : Gtk.ApplicationWindow {
    
    	Gtk.Widget spinner;
    
    	internal MyWindow (MyApplication app) {
    
    		Object (application: app, title: "Spinner-exempel");
    
    		this.set_default_size (200, 200);
    		this.border_width = 30;
    
    		spinner = new Gtk.Spinner ();
    
    		this.add (spinner);
    		(spinner as Gtk.Spinner).active = true;
    		spinner.show ();
    	}
    
    	protected override bool key_press_event (Gdk.EventKey event) {
    
    		//print (Gdk.keyval_name(event.keyval) +"\n");
    		if (Gdk.keyval_name(event.keyval) == "space") {
    
    			if ((spinner as Gtk.Spinner).active) {
    				(spinner as Gtk.Spinner).stop ();
    				//spinner.visible = false;
    			}
    			else {
    				(spinner as Gtk.Spinner).start ();
    				//spinner.visible = true;
    			}
    		}
    		return true;
    	}
    }
    
    public class MyApplication : Gtk.Application {
    
    	protected override void activate () {
    		MyWindow window = new MyWindow (this);
    		window.show ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.spinner");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: Report messages of minor importance to the user
sv: Rapportera meddelanden av mindre vikt till användaren

[ctx: text]
note: (itstool) path: info/title
en: Statusbar (JavaScript)
sv: Statusbar (Javascript)

note: (itstool) path: info/desc
en: Show notifications in a dedicated statusbar
sv: Visa aviseringar i en för det avsedd statusrad

note: (itstool) path: section/code
en: 
    const StatusbarExample = new Lang.Class({
        Name: 'Statusbar Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsstatusbar',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
sv: 
    const StatusbarExample = new Lang.Class({
        Name: 'Statusbar-exempel',
    
        // Skapa programmet i sig
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsstatusbar',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate: function() {
            this._window.present();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function() {
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the StatusbarExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen StatusbarExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 120,
                default_width: 300,
                title: "Button Clicker"});
    
            // Create a paned interface
            this._panes = new Gtk.Paned ({
                orientation: Gtk.Orientation.VERTICAL });
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 120,
                default_width: 300,
                title: "Knappklickare"});
    
            // Skapa ett gränssnitt med paneler
            this._panes = new Gtk.Paned ({
                orientation: Gtk.Orientation.VERTICAL });

note: (itstool) path: section/title
en: Creating the buttons
sv: Skapa knapparna

note: (itstool) path: section/code
en: 
            // Create the main button
            this._clickMe = new Gtk.Button ({
                label: "Click Me!" });
            this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));
    
            // Create the back button
            this._backButton = new Gtk.Button ({
                label: "gtk-go-back",
                use_stock: true });
            this._backButton.connect ("clicked", Lang.bind (this, this._back));
    
            // Create the clear button
            this._clearButton = new Gtk.Button ({
                label: "gtk-clear",
                use_stock: true });
            this._clearButton.connect ("clicked", Lang.bind (this, this._clear));
sv: 
            // Skapa huvudknappen
            this._clickMe = new Gtk.Button ({
                label: "Klicka på mig!" });
            this._clickMe.connect ("clicked", Lang.bind (this, this._clicked));
    
            // Skapa bakåtknappen
            this._backButton = new Gtk.Button ({
                label: "gtk-go-back",
                use_stock: true });
            this._backButton.connect ("clicked", Lang.bind (this, this._back));
    
            // Skapa tömningsknappen
            this._clearButton = new Gtk.Button ({
                label: "gtk-clear",
                use_stock: true });
            this._clearButton.connect ("clicked", Lang.bind (this, this._clear));

note: (itstool) path: section/title
en: Creating the statusbar
sv: Skapa statusraden

note: (itstool) path: section/title
en: Functions for interacting with the statusbar
sv: Funktioner för att interagera med statusraden

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new StatusbarExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new StatusbarExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished StatusbarExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda StatusbarExample-klassen, och startar programmet.

note: (itstool) path: page/p
en: This statusbar tells you if you click the button or if you press any key (and which key).
sv: Denna statusrad säger till dig om du klickar på knappen eller trycker ner en tangent (och vilken tangent).

note: (itstool) path: section/title
en: Useful methods for a Statusbar widget
sv: Användbara metoder för en Statusbar-komponent

note: (itstool) path: section/p
en: In line 17 the signal <code>"clicked"</code> is connected to the callback function <code>button_clicked_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 17 ansluts signalen <code>"clicked"</code> till återanropsfunktionen <code>button_clicked_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <link href="https://developer.gnome.org/gdk3/stable/gdk3-Keyboard-Handling.html">Gdk - Key Values</link>
sv: <link href="https://developer.gnome.org/gdk3/stable/gdk3-Keyboard-Handling.html">Gdk - Tangentvärden</link>

note: (itstool) path: page/p
en: This statusbar tells you what's going on.
sv: Denna statusrad säger till dig vad som händer.

[ctx: text]
note: (itstool) path: info/title
en: Strings (Python)
sv: Strängar (Python)

note: (itstool) path: info/desc
en: An explanation of how to deal with strings in Python and GTK+.
sv: En förklaring hur du hanterar strängar i Python och GTK+.

note: (itstool) path: page/title
en: Strings
sv: Strängar

note: (itstool) path: note/p
en: GNOME strongly encourages the use of Python 3 for writing applications!
sv: GNOME rekommenderar starkt att använda Python 3 för att skriva program!

note: (itstool) path: section/title
en: Strings in Python 2
sv: Strängar i Python 2

note: (itstool) path: section/p
en: Python 2 comes with two different kinds of objects that can be used to represent strings, <code>str</code> and <code>unicode</code>. Instances of <code>unicode</code> are used to express Unicode strings, whereas instances of the <code>str</code> type are byte representations (the encoded string). Under the hood, Python represents Unicode strings as either 16- or 32-bit integers, depending on how the Python interpreter was compiled.
sv: Python 2 kommer med två olika sorters objekt som kan användas för att representera strängar, <code>str</code> och <code>unicode</code>. Instanser av <code>unicode</code> används för att uttrycka Unicode-strängar, medan instanser av typen <code>str</code> är byterepresentationer (den kodade strängen). Under huven representerar Python Unicode-strängar antingen som 16- eller 32-bitars heltal, beroende på hur Python-tolken kompilerades.

note: (itstool) path: section/p
en: Unicode strings can be converted to 8-bit strings with <code>unicode.encode()</code>. Python’s 8-bit strings have a <code>str.decode()</code> method that interprets the string using the given encoding (that is, it is the inverse of the <code>unicode.encode()</code>):
sv: Unicode-strängar kan konverteras till 8-bitars strängar med <code>unicode.encode()</code>. Pythons 8-bitars strängar har en <code>str.decode()</code>-metod som tolkar strängen med given kodning (det vill säga, det är inversen av <code>unicode.encode()</code>):

note: (itstool) path: section/p
en: Unfortunately, Python 2.x allows you to mix <code>unicode</code> and <code>str</code> if the 8-bit string happened to contain only 7-bit (ASCII) bytes, but would get <sys>UnicodeDecodeError</sys> if it contained non-ASCII values.
sv: Tyvärr låter Python 2.x dig mixa <code>unicode</code> och <code>str</code> om 8-bitarssträngen råkade innehålla endast 7-bitars byte (ASCII), men skulle få <sys>UnicodeDecodeError</sys> om den innehöll värden som inte var ASCII.

note: (itstool) path: section/title
en: Strings in Python 3
sv: Strängar i Python 3

note: (itstool) path: section/p
en: Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded strings on the other hand are represented as binary data in the form of instances of the bytes type. Conceptually, <code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to go from <code>str</code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to <code>str</code>.
sv: Sedan Python 3.0 lagras alla strängar som Unicode i en instans av typen <code>str</code>. Kodade strängar representeras å andra sidan som binärdata i form av instanser av typen ”bytes”. Konceptuellt refererar <code>str</code> till text, medan ”bytes” refererar till data. Använd <code>encode()</code> för att gå från <code>str</code> till <code>bytes</code>, och <code>decode()</code> för att gå från <code>bytes</code> till <code>str</code>.

note: (itstool) path: section/p
en: In addition, it is no longer possible to mix Unicode strings with encoded strings, because it will result in a <code>TypeError</code>:
sv: Vidare är det inte längre möjligt att mixa Unicode-strängar med kodade strängar, eftersom det kommer resultera i ett :exc:`TypeError`:

note: (itstool) path: section/title
en: Unicode in GTK+
sv: Unicode i GTK+

note: (itstool) path: section/p
en: GTK+ uses UTF-8 encoded strings for all text. This means that if you call a method that returns a string you will always obtain an instance of the <code>str</code> type. The same applies to methods that expect one or more strings as parameter, they must be UTF-8 encoded. However, for convenience PyGObject will automatically convert any unicode instance to str if supplied as argument:
sv: GTK+ använder UTF-8-kodade strängar för all text. Detta betyder att om du anropar en metod som returnerar en sträng kommer du alltid erhålla en instans av typen <code>str</code>. Detsamma gäller metoder som förväntar sig en eller flera strängar som parameter, de måste vara UTF-8-kodade. För bekvämlighet kommer dock PyGObject automatiskt konvertera alla unicode-instanser till str om de tillhandahålls som argument:

note: (itstool) path: section/p
en: Furthermore:
sv: Vidare skulle:

note: (itstool) path: section/p
en: would return <code>False</code>, with the warning <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> will always return a <code>str</code> instance; therefore, <code>txt</code> and <code>unicode_string</code> are not equal).
sv: returnera <code>False</code>, med varningen <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> kommer alltid returnera en <code>str</code>-instans; därför är <code>txt</code> och <code>unicode_string</code> inte lika).

note: (itstool) path: section/p
en: This is especially important if you want to internationalize your program using <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. You have to make sure that <code>gettext</code> will return UTF-8 encoded 8-bit strings for all languages.
sv: Detta är särskilt viktigt om du vill internationalisera ditt program med <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. Du måste säkerställa att <code>gettext</code> kommer returnera UTF-8-kodade 8-bitars strängar för alla språk.

note: (itstool) path: section/p
en: In general it is recommended to not use <code>unicode</code> objects in GTK+ applications at all, and only use UTF-8 encoded <code>str</code> objects since GTK+ does not fully integrate with <code>unicode</code> objects.
sv: I allmänhet rekommenderas det att inte använda <code>unicode</code>-objekt i GTK+-program överhuvudtaget och endast använda UTF-8-kodade :class:`str`-objekt då GTK+ inte är helt integrerat med <code>unicode</code>-objekt.

note: (itstool) path: section/p
en: String encoding is more consistent in Python 3.x because PyGObject will automatically encode/decode to/from UTF-8 if you pass a string to a method or a method returns a string. Strings, or text, will always be represented as instances of <code>str</code> only.
sv: Strängkodning är mer konsekvent i Python 3.x, för PyGObject kommer automatiskt koda/avkoda till/från UTF-8 om du skickar med en sträng till en metod eller om en metod returnerar en sträng. Strängar, eller text, kommer alltid endast att representeras som instanser av <code>str</code>.

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html">How To Deal With Strings - The Python GTK+ 3 Tutorial</link>
sv: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html">Hur du hanterar strängar - GTK+ 3-handledningen för Python</link>

note: (itstool) path: page/p
en: This switch toggles the title of the window.
sv: Denna brytare växlar fönstrets titel.

[ctx: text]
note: (itstool) path: info/title
en: Switch (JavaScript)
sv: Switch (Javascript)

note: (itstool) path: page/p
en: A Switch has two positions, on and off. This example shows how you can use multiple switches together to control which <link xref="image.js">Image</link> is shown in the window. The pictures used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">can be downloaded here</link>.
sv: En Switch har två lägen, på och av. Detta exempel visar hur du kan använda flera brytare tillsammans för att styra vilken <link xref="image.js">Image</link> som visas i fönstret. Bilderna som används i detta exempel <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">kan hämtas här</link>.

note: (itstool) path: note/p
en: The window will contain a "broken image" icon instead of a picture if picture files named <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, and <file>gentoopenguin.png</file> aren't in the same directory. You can change the code and the pictures around as you like, but the Creative Commons-licensed photos used in this example were taken from the following sources and cropped to 640x425:
sv: Fönstret kommer innehålla en ”trasig bild”-ikon istället för en bild om bildfiler med namnen <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file> och <file>gentoopenguin.png</file> inte finns i samma katalog. Du kan ändra koderna och bilderna som du vill, men de Creative Commons-licensierade fotona som används i detta exempel togs från följande källor och beskars till 640x425:

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link> by Rob Lee, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
sv: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Foto av röd räv</link> av Rob Lee, licensierat <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguin photo</link> by Ken Funakoshi, licensed <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>
sv: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Foto av åsnepingvin</link> av Ken Funakoshi, licensierat <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>

note: (itstool) path: item/p
en: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link> by Shek Graham, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
sv: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Foto av flyghund</link> av Shek Graham, licensierat <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link> by Mindaugas Urbonas, licensed <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>
sv: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Foto av knölsvan</link> av Mindaugas Urbonas, licensierat <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>

note: (itstool) path: section/code
en: 
    const SwitchExample = new Lang.Class({
        Name: 'Switch Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsswitch',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal creates the menu and builds the UI
        _onStartup: function() {
            this._initMenus();
            this._buildUI ();
        },
sv: 
    const SwitchExample = new Lang.Class({
        Name: 'Switch-exempel',
    
        // Skapa programmet i sig
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jsswitch',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate: function() {
            this._window.present();
        },
    
        // Återanropsfunktion för ”startup”-signal skapar menyn och bygger användargränssnittet
        _onStartup: function() {
            this._initMenus();
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the SwitchExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen SwitchExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Animal Creator"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                border_width: 20,
                title: "Djurskapare"});

note: (itstool) path: section/title
en: Creating the switches
sv: Skapa brytarna

note: (itstool) path: section/code
en: 
            // Create the image widget and set its default picture
            this._image = new Gtk.Image ({file: "redfox.png"});
sv: 
            // Skapa bildkomponenten och ställ in dess standardbild
            this._image = new Gtk.Image ({file: "redfox.png"});

note: (itstool) path: section/p
en: We first create the <link xref="image.js">Image</link> that the switches will control. Remember that a file named <file>redfox.png</file> needs to be in the same directory as this application.
sv: Vi skapar först den <link xref="image.js">Image</link> som brytarna kommer styra. Kom ihåg att en fil med namnet <file>redfox.png</file> behöver finnas i samma katalog som detta program.

note: (itstool) path: section/code
en: 
            // Create a label for the first switch
            this._flyLabel = new Gtk.Label ({
                label: "Make it fly",
                margin_right: 30});
    
            // Create the first switch and set its default position
            this._flySwitch = new Gtk.Switch ({active: false});
            this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Create a label for the second switch
            this._birdLabel = new Gtk.Label ({
                label: "Make it a bird",
                margin_right: 30});
    
            // Create the second switch
            this._birdSwitch = new Gtk.Switch ({active: false});
            this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
sv: 
            // Skapa en etikett för den första brytaren
            this._flyLabel = new Gtk.Label ({
                label: "Få den att flyga",
                margin_right: 30});
    
            // Skapa den första brytaren och ställ in dess standardposition
            this._flySwitch = new Gtk.Switch ({active: false});
            this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));
    
            // Skapa en etikett för den andra brytaren
            this._birdLabel = new Gtk.Label ({
                label: "Gör den till en fågel",
                margin_right: 30});
    
            // Skapa den andra brytaren
            this._birdSwitch = new Gtk.Switch ({active: false});
            this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));

note: (itstool) path: section/p
en: We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set them to be switched off by default.
sv: Vi använder en <link xref="label.js">Label</link> för att märka varje Switch, och ger dem lite marginal till höger så de inte är ihopträngda just intill Switcharna. Efter det skapar vi Switcharna, och ställer in dem att vara avstängda som standard.

note: (itstool) path: section/p
en: The signal a switch sends out when it's flipped on or off is called notify::active. After we create each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple switches that each do something different, you might want to connect them to different functions, but here they're both used for the same thing: To control what picture's displayed by _image.
sv: Signalen som en brytare sänder ut när den slås på eller av kallas för notify::active. Efter att vi skapar varje brytare ansluter vi dess notify::active-signal till en funktion som kallas _switchFlip. Om du har flera brytare som gör olika saker, så kan du vilja ansluta dem till olika funktioner, men här används de båda för samma sak: att styra vilken bild som visas av _image.

note: (itstool) path: section/code
en: 
            // Create a grid for the labels and switches beneath the picture
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20});
    
            // Attach the labels and switches to that grid
            this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
            this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
            this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
            this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
    
            // Create a master grid to put both the UI and the picture into
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Attach the picture and the UI grid to the master grid
            this._mainGrid.attach (this._image, 0, 0, 1, 1);
            this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
sv: 
            // Skapa ett rutnät för etiketterna och brytarna under bilden
            this._UIGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER,
                margin_top: 20});
    
            // Fäst etiketterna och brytarna vid det rutnätet
            this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);
            this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);
            this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);
            this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);
    
            // Skapa ett huvudrutnät att stoppa både användargränssnittet och bilden i
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Fäst bilden och användargränssnittsrutnätet vid huvudrutnätet
            this._mainGrid.attach (this._image, 0, 0, 1, 1);
            this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);

note: (itstool) path: section/code
en: 
            // Add the master grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
sv: 
            // Lägg till huvudrutnätet till fönstret
            this._window.add (this._mainGrid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/title
en: Function which handles the switches being flipped
sv: Funktion som hanterar att brytarna ändrar tillstånd

note: (itstool) path: section/code
en: 
        _switchFlip: function() {
    
            // Change the picture depending on which switches are flipped
            if (this._flySwitch.get_active()) {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
    
                else this._image.set_from_file ("fruitbat.png");
            }
    
            else {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
    
                else this._image.set_from_file ("redfox.png");
    
            }
    
        },
sv: 
        _switchFlip: function() {
    
            // Ändra bilden beroende på vilka brytare som ändrar tillstånd
            if (this._flySwitch.get_active()) {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");
    
                else this._image.set_from_file ("fruitbat.png");
            }
    
            else {
    
                if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");
    
                else this._image.set_from_file ("redfox.png");
    
            }
    
        },

note: (itstool) path: section/title
en: Creating the AboutDialog
sv: Skapa AboutDialog

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new SwitchExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new SwitchExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SwitchExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda SwitchExample-klassen, och startar programmet.

note: (itstool) path: page/p
en: This Switch makes the title appears and disappear.
sv: Denna Switch får titeln att visas och försvinna.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Switch Example", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # a switch
            switch = Gtk.Switch()
            # turned on by default
            switch.set_active(True)
            # connect the signal notify::active emitted by the switch
            # to the callback function activate_cb
            switch.connect("notify::active", self.activate_cb)
    
            # a label
            label = Gtk.Label()
            label.set_text("Title")
    
            # a grid to allocate the widgets
            grid = Gtk.Grid()
            grid.set_column_spacing(10)
            grid.attach(label, 0, 0, 1, 1)
            grid.attach(switch, 1, 0, 1, 1)
    
            # add the grid to the window
            self.add(grid)
    
        # Callback function. Since the signal is notify::active
        # we need the argument 'active'
        def activate_cb(self, button, active):
            # if the button (i.e. the switch) is active, set the title
            # of the window to "Switch Example"
            if button.get_active():
                self.set_title("Switch Example")
            # else, set it to "" (empty string)
            else:
                self.set_title("")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # ett fönster
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Switch-exempel", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # en brytare
            switch = Gtk.Switch()
            # påslagen som standard
            switch.set_active(True)
            # anslut signalen notify::active som utges av brytaren
            # till återanropsfunktionen activate_cb
            switch.connect("notify::active", self.activate_cb)
    
            # en etikett
            label = Gtk.Label()
            label.set_text("Titel")
    
            # ett rutnät för att allokera komponenterna
            grid = Gtk.Grid()
            grid.set_column_spacing(10)
            grid.attach(label, 0, 0, 1, 1)
            grid.attach(switch, 1, 0, 1, 1)
    
            # lägg till rutnätet till fönstret
            self.add(grid)
    
        # Återanropsfunktion. Då signalen är notify::active
        # behöver vi argumentet ”active”
        def activate_cb(self, button, active):
            # om knappen (d.v.s. brytaren) är aktiv, ställ in titeln
            # på fönstret till "Switch-exempel"
            if button.get_active():
                self.set_title("Switch-exempel")
            # ställ annars in den till "" (tom sträng)
            else:
                self.set_title("")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a Switch widget
sv: Användbara metoder för en Switch-komponent

note: (itstool) path: section/p
en: In line 17 the signal <code>"notify::active"</code> is connected to the callback function <code>activate_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 17 ansluts signalen <code>"notify::active"</code> till återanropsfunktionen <code>activate_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: page/p
en: This Switch toggles the title.
sv: Denna Switch växlar titeln.

note: (itstool) path: page/code
en: class MyWindow : Gtk.ApplicationWindow {
    
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Switch Example");
    
    		this.set_default_size (300, 100);
    		this.border_width = 10;
    
    		var label = new Gtk.Label ("Title");
    		var switcher = new Gtk.Switch ();
    
    		switcher.set_active (true);
    
    		switcher.notify["active"].connect (switcher_cb);
    
    		var grid = new Gtk.Grid ();
    		grid.set_column_spacing (10);
    		grid.attach (label, 0, 0, 1, 1);
    		grid.attach (switcher, 1, 0, 1, 1);
    
    		this.add (grid);
    	}
    
    	void switcher_cb (Object switcher, ParamSpec pspec) {
    		if ((switcher as Gtk.Switch).get_active())
    			this.set_title ("Switch Example");
    		else
    			this.set_title ("");
    	}
    }
    
    class MyApplication : Gtk.Application {
    	protected override void activate () {
    
    		var window = new MyWindow (this);
    		window.show_all (); //show all the things
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.checkbutton");
    	}
    }
    
    int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: class MyWindow : Gtk.ApplicationWindow {
    
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "Switch-exempel");
    
    		this.set_default_size (300, 100);
    		this.border_width = 10;
    
    		var label = new Gtk.Label ("Titel");
    		var switcher = new Gtk.Switch ();
    
    		switcher.set_active (true);
    
    		switcher.notify["active"].connect (switcher_cb);
    
    		var grid = new Gtk.Grid ();
    		grid.set_column_spacing (10);
    		grid.attach (label, 0, 0, 1, 1);
    		grid.attach (switcher, 1, 0, 1, 1);
    
    		this.add (grid);
    	}
    
    	void switcher_cb (Object switcher, ParamSpec pspec) {
    		if ((switcher as Gtk.Switch).get_active())
    			this.set_title ("Switch-exempel");
    		else
    			this.set_title ("");
    	}
    }
    
    class MyApplication : Gtk.Application {
    	protected override void activate () {
    
    		var window = new MyWindow (this);
    		window.show_all (); //visa allting
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.checkbutton");
    	}
    }
    
    int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: Widget which displays a GtkTextBuffer
sv: Komponent som visar en GtkTextBuffer

note: (itstool) path: page/title
en: TextView widget
sv: TextView-komponent

note: (itstool) path: note/p
en: If we press "enter", we have a new line.
sv: Om vi trycker ”Retur” får vi en ny rad.

note: (itstool) path: note/p
en: If we press "enter" more times then there are lines in the default sized window, then a vertical scrollbar appears.
sv: Om vi trycker ”Retur” fler gånger än det finns rader i fönstrets standardstorlek så visas en vertikal rullningslist.

note: (itstool) path: note/p
en: If we write a long sentence, the text will wrap breaking lines between words.
sv: Om vi skriver en lång mening kommer texten radbrytas mellan ord.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar will appear.
sv: Om vi har ett låååååååååååååååååååååååååååååååååångt (det var långt) ord, så kommer en horisontell rullningslist att visas.

note: (itstool) path: page/p
en: This is an example of Gtk.TextView
sv: Detta är ett exempel på Gtk.TextView

[ctx: text]
note: (itstool) path: info/title
en: TextView (JavaScript)
sv: TextView (Javascript)

note: (itstool) path: info/desc
en: A multiline text editor
sv: En textredigerare med flera rader

note: (itstool) path: item/p
en: At the bottom there is a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. This holds the text itself.
sv: Längst ner är en <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. Den innehåller själva texten.

note: (itstool) path: item/p
en: In the middle there is the <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, which is a widget that lets you see and edit the text in the buffer. It automatically resizes itself depending on how much text there is.
sv: I mitten finns en <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, som är en komponent som låter dig se och redigera texten i bufferten. Den ändrar automatiskt storlek på sig själv beroende på hur mycket text det är.

note: (itstool) path: note/p
en: Real-life penguin populations are declining fast, because climate change is melting the ice that they live on and killing the fish that they eat. If you'd like to play a (somewhat silly) GNOME game based on this premise, take a look at <link href="http://pingus.seul.org/">Pingus</link>.
sv: Pingvinpopulationer i verkligheten minskar snabbt, eftersom klimatförändring smälter isen som de lever på och dödar fisken som de äter. Om du vill spela ett (aningen fånigt) GNOME-spel som är baserat på de premisserna kan du ta en titt på <link href="http://pingus.seul.org/">Pingus</link>.

note: (itstool) path: section/code
en: 
    const TextViewExample = new Lang.Class ({
        Name: 'TextView Example',
    
        // Create the application itself
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jstextview' });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function () {
            this._window.present ();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function () {
            this._buildUI ();
        },
sv: 
    const TextViewExample = new Lang.Class ({
        Name: 'TextView-exempel',
    
        // Skapa programmet i sig
        _init: function () {
            this.application = new Gtk.Application ({
                application_id: 'org.example.jstextview' });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal visar fönster när den aktiveras
        _onActivate: function () {
            this._window.present ();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function () {
            this._buildUI ();
        },

note: (itstool) path: section/p
en: All the code for this sample goes in the TextViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen TextViewExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function () {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Talk to a Penguin",
                default_height: 400,
                default_width: 440,
                border_width: 20 });
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function () {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow  ({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                title: "Prata med en pingvin",
                default_height: 400,
                default_width: 440,
                border_width: 20 });

note: (itstool) path: section/title
en: Creating the TextView
sv: Skapa vår TextView

note: (itstool) path: section/code
en: 
            // Create a textview for you to talk to the penguin
            this.buffer = new Gtk.TextBuffer();
            this._textView = new Gtk.TextView ({
                buffer: this.buffer,
                editable: true,
                wrap_mode: Gtk.WrapMode.WORD });
sv: 
            // Skapa en textvy så att du kan prata med pingvinen
            this.buffer = new Gtk.TextBuffer();
            this._textView = new Gtk.TextView ({
                buffer: this.buffer,
                editable: true,
                wrap_mode: Gtk.WrapMode.WORD });

note: (itstool) path: section/code
en: 
            // Create a grid to organize them in
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Put the label and textview in the grid one on top of the other
            this._grid.attach (this._penguin, 0, 0, 1, 1);
            this._grid.attach (this._scrolled, 0, 1, 1, 1);
sv: 
            // Skapa ett rutnät att organisera dem i
            this._grid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Stoppa etiketten och textvyn i rutnätet, den ena ovanpå den andra
            this._grid.attach (this._penguin, 0, 0, 1, 1);
            this._grid.attach (this._scrolled, 0, 1, 1, 1);

note: (itstool) path: section/p
en: The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside it.
sv: Den första <link xref="grid.js">Grid</link> vi skapar har bara vår Label och vårt ScrolledWindow i sig.

note: (itstool) path: section/code
en: 
            // Create a button to send your message to the penguin
            this._send = new Gtk.Button ({
                halign: Gtk.Align.END,
                margin_top: 20,
                label: "Send" });
            this._send.connect ('clicked', Lang.bind (this, this._chat));
    
            // Create a grid that will have the other grid on top and the button on bottom
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Add the other grid and the button to the main grid
            this._mainGrid.attach (this._grid, 0, 0, 1, 1);
            this._mainGrid.attach (this._send, 0, 1, 1, 1);
sv: 
            // Skapa en knapp för att skicka ditt meddelande till pingvinen
            this._send = new Gtk.Button ({
                halign: Gtk.Align.END,
                margin_top: 20,
                label: "Skicka" });
            this._send.connect ('clicked', Lang.bind (this, this._chat));
    
            // Skapa ett rutnät som kommer ha det andra rutnätet överst och knappen nederst
            this._mainGrid = new Gtk.Grid ({
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.CENTER });
    
            // Lägg till det andra rutnätet och knappen till huvudrutnätet
            this._mainGrid.attach (this._grid, 0, 0, 1, 1);
            this._mainGrid.attach (this._send, 0, 1, 1, 1);

note: (itstool) path: section/p
en: We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't squished up against the ScrolledWindow.
sv: Vi skapar en <link xref="button.js">Button</link> för att skicka ditt meddelande till pingvinen, och en ny Grid som har den andra överst och vår Button nederst. Denna Button har en marginal uppåt så att den inte trycks upp mot vårt ScrolledWindow.

note: (itstool) path: section/code
en: 
            // Attach the main grid to the window
            this._window.add (this._mainGrid);
    
            // Show the window and all child widgets
            this._window.show_all();
        },
sv: 
            // Fäst huvudrutnätet vid fönstret
            this._window.add (this._mainGrid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        },

note: (itstool) path: section/p
en: Finally, we attach the main Grid to the window, then we tell the window and everything inside it to become visible when the application is run.
sv: Slutligen fäster vi vår huvud-Grid till fönstret, och säger sedan till fönstret och allting i det att bli synliga då programmet körs.

note: (itstool) path: section/title
en: Function which handles the penguin's response
sv: Funktion som hanterar pingvinens svar

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new TextViewExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new TextViewExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TextViewExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda TextViewExample-klassen, och startar programmet.

note: (itstool) path: info/desc
en: Widget that displays a GtkTextBuffer
sv: Komponent som visar en GtkTextBuffer

note: (itstool) path: note/p
en: This is an example of Gtk.TextView.
sv: Detta är ett exempel på Gtk.TextView.

note: (itstool) path: note/p
en: But we can also have a new line if we write a long sentence (the text will wrap breaking lines between words).
sv: Men vi kan också få en ny rad om vi skriver en lång mening (texten kommer att radbrytas mellan ord).

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong
sv: Om vi har ett låååååååååååååååååååååååååååååååååångt

note: (itstool) path: note/p
en: (that was long)
sv: (det var långt)

note: (itstool) path: note/p
en: word, an horizontal scrollbar will appear.
sv: ord, så kommer en horisontell rullningslist att visas.

note: (itstool) path: section/title
en: Useful methods for a TextView widget
sv: Användbara metoder för en TextView-komponent

note: (itstool) path: section/p
en: Methods for a TextView widget:
sv: Metoder för en TextView-komponent:

note: (itstool) path: section/p
en: Methods for a TextBuffer widget:
sv: Metoder för en TextBuffer-komponent:

note: (itstool) path: item/p
en: The following are some of the common styles applied to text:
sv: Följande är några av de vanliga stilarna som tillämpas på text:

note: (itstool) path: item/p
en: Background colour ("background" property)
sv: Bakgrundsfärg (egenskapen ”background”)

note: (itstool) path: item/p
en: Foreground colour ("foreground" property)
sv: Förgrundsfärg (egenskapen ”foreground”)

note: (itstool) path: item/p
en: Underline ("underline" property)
sv: Understruken (egenskapen ”underline”)

note: (itstool) path: item/p
en: Bold ("weight" property)
sv: Fet (egenskapen ”weight”)

note: (itstool) path: item/p
en: Italics ("style" property)
sv: Kursiv (egenskapen ”style”)

note: (itstool) path: item/p
en: Strikethrough ("strikethrough" property)
sv: Genomstruken (egenskapen ”strikethrough”)

note: (itstool) path: item/p
en: Justification ("justification" property)
sv: Justering (egenskapen ”justification”)

note: (itstool) path: item/p
en: Size ("size" and "size-points" properties)
sv: Storlek (egenskaperna ”size” och ”size-points”)

note: (itstool) path: item/p
en: Text wrapping ("wrap-mode" property)
sv: Radbrytning av text (egenskapen ”wrap-mode”)

note: (itstool) path: item/p
en: You can also delete particular tags later using <code>remove_tag()</code> or delete all tags in a given region by calling <code>remove_all_tags()</code>.
sv: Du kan också ta bort specifika taggar senare med <code>remove_tag()</code> eller ta bort alla taggar i en angiven region genom att anropa <code>remove_all_tags()</code>.

note: (itstool) path: section/p
en: Methods for a TextIter widget
sv: Metoder för en TextIter-komponent

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong word, a horizontal scrollbar will appear.
sv: Om vi har ett låååååååååååååååååååååååååååååååååångt ord, så kommer en horisontell rullningslist att visas.

note: (itstool) path: info/desc
en: A button which retains state
sv: En knapp som behåller sitt tillstånd

note: (itstool) path: page/p
en: When this ToggleButton is in an active state, the spinner spins.
sv: När denna ToggleButton är i aktivt läge så snurrar väntesnurran.

[ctx: text]
note: (itstool) path: info/title
en: ToggleButton (JavaScript)
sv: ToggleButton (Javascript)

note: (itstool) path: info/desc
en: Stays pressed until you click it again
sv: Förblir nedtryckt tills du trycker på den igen

note: (itstool) path: page/p
en: A ToggleButton is like a normal <link xref="button.js">Button</link>, except that it stays pressed in when you click it. You can use it like an on/off switch, to control things like the <link xref="spinner.js">Spinner</link> in this example.
sv: En ToggleButton är som en vanlig <link xref="button.js">Button</link>, förutom att den förblir nedtryckt då du klickar på den. Du kan använda den som en av/på-brytare. för att styra saker som en <link xref="spinner.js">Spinner</link> i detta exempel.

note: (itstool) path: page/p
en: A ToggleButton's get_active method returns true if it's pressed in, and false if it's not. Its set_active method is used if you want to change its state without needing to click on it. When it changes state from pressed in to popped out and vice-versa, it sends out the "toggled" signal, which you can connect to a function to do something.
sv: get_active-metoden för en ToggleButton returnerar true om den är nedtryckt, och false om den inte är det. Dess set_active-metod används om du vill ändra dess tillstånd utan att behöva klicka på den. När den växlar tillstånd från nedtryckt till utstickande och tvärtom, så skickar den signalen ”toggled”, vilken du kan ansluta till en signal för att göra något.

note: (itstool) path: section/code
en: 
    const ToggleButtonExample = new Lang.Class({
        Name: 'ToggleButton Example',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents window when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
sv: 
    const ToggleButtonExample = new Lang.Class({
        Name: 'ToggleButton-exempel',
    
        // Skapa programmet i sig
        _init: function() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
        // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate: function() {
            this._window.present();
        },
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup: function() {
            this._buildUI ();
        },

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton Example"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton-exempel"});

note: (itstool) path: section/title
en: Creating the ToggleButton and other widgets
sv: Skapa vår ToggleButton och andra komponenter

note: (itstool) path: section/code
en: 
            // Create the spinner that the button stops and starts
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
sv: 
            // Skapa väntesnurran som knappen stoppar och startar
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

note: (itstool) path: section/p
en: We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up as much space as possible inside the window.
sv: Vi vill att denna <link xref="spinner.js">Spinner</link> ska expanderas vertikalt och horisontellt så att den tar upp så mycket utrymme som möjligt i fönstret.

note: (itstool) path: section/code
en: 
            // Create the togglebutton that starts and stops the spinner
            this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
            this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
sv: 
            // Skapa växlingsknappen som startar och stoppar väntesnurran
            this._toggleButton = new Gtk.ToggleButton ({label: "Starta/stoppa"});
            this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));

note: (itstool) path: section/p
en: Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button</link>. The biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.
sv: Att skapa en ToggleButton är mycket som att skapa en vanlig <link xref="button.js">Button</link>. Den största skillnaden är att du hanterar en ”toggled”-signal istället för en ”clicked”-signal. Denna kod binder _onToggle-funktionen till den signalen, så att den anropas närhelst vår ToggleButton växlar tillstånd.

note: (itstool) path: section/code
en: 
            // Create a grid and put everything in it
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);
sv: 
            // Skapa ett rutnät och stoppa allting i det
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);

note: (itstool) path: section/p
en: Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the Spinner and ToggleButton to it.
sv: Här skapar vi en enkel <link xref="grid.js">Grid</link> för att organisera allting i, och fäster sedan vår Spinner och ToggleButton till den.

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();
        },
sv: 
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }.

note: (itstool) path: section/p
en: Now we add the Grid to the Window, and tell the Window to show itself and its child widgets when the application is started.
sv: Nu lägger vi till vår Grid till detta Window, och säger till fönstret att visa sig själv och sina barnkomponenter då programmet startas.

note: (itstool) path: section/title
en: Making something happen when the ToggleButton is toggled
sv: Få något att hända när vår ToggleButton växlar tillstånd

note: (itstool) path: section/code
en: 
        _onToggle: function() {
    
            // Start or stop the spinner
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    
    });
sv: 
        _onToggle: function() {
    
            // Starta eller stoppa väntesnurran
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    
    });

note: (itstool) path: section/p
en: Whenever someone toggles the button, this function checks what its state is afterwards using get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.
sv: Närhelst någon klickar på knappen ser denna funktion vad dess tillstånd är efteråt med get_active, och startar eller stoppar väntesnurran enligt detta. Vi vill att den endast ska snurra när knappen är nedtryckt, så om get_active returnerar true startar vi väntesnurran. Annars säger vi till den att stoppa.

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/code
en: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    
    class ToggleButtonExample {
    
        // Create the application itself
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Callback function for 'activate' signal presents window when active
        _onActivate() {
            this._window.present();
        }
    
        // Callback function for 'startup' signal builds the UI
        _onStartup() {
            this._buildUI();
        }
    
        // Build the application's UI
        _buildUI() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton Example"});
    
            // Create the spinner that the button stops and starts
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
    
            // Create the togglebutton that starts and stops the spinner
            this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
            this._toggleButton.connect ('toggled', this._onToggle.bind(this));
    
            // Create a grid and put everything in it
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 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();
        }
    
        _onToggle() {
    
            // Start or stop the spinner
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    };
    
    // Run the application
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);
sv: #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const Gtk = imports.gi.Gtk;
    
    class ToggleButtonExample {
    
        // Skapa programmet i sig
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.jstogglebutton',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
            // Anslut ”activate”- och ”startup”-signaler till återanropsfunktionerna
            this.application.connect('activate', this._onActivate.bind(this));
            this.application.connect('startup', this._onStartup.bind(this));
        }
    
        // Återanropsfunktion för ”activate”-signal, visar fönstret när den aktiveras
        _onActivate() {
            this._window.present();
        }
    
        // Återanropsfunktion för ”startup”-signal bygger användargränssnittet
        _onStartup() {
            this._buildUI();
        }
    
        // Bygg programmets användargränssnitt
        _buildUI() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 300,
                default_width: 300,
                border_width: 30,
                title: "ToggleButton-exempel"});
    
            // Skapa väntesnurran som knappen stoppar och startar
            this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
    
            // Skapa växlingsknappen som startar och stoppar väntesnurran
            this._toggleButton = new Gtk.ToggleButton ({label: "Starta/stoppa"});
            this._toggleButton.connect ('toggled', this._onToggle.bind(this));
    
            // Skapa ett rutnät och stoppa allting i det
            this._grid = new Gtk.Grid ({
                row_homogeneous: false,
                row_spacing: 15});
            this._grid.attach (this._spinner, 0, 0, 1, 1);
            this._grid.attach (this._toggleButton, 0, 1, 1, 1);
    
            // Lägg till rutnätet till fönstret
            this._window.add (this._grid);
    
            // Visa fönstret och alla barnkomponenter
            this._window.show_all();
        }
    
        _onToggle() {
    
            // Starta eller stoppa väntesnurran
            if (this._toggleButton.get_active ())
                this._spinner.start ();
            else this._spinner.stop ();
    
        }
    };
    
    // Kör programmet
    let app = new ToggleButtonExample ();
    app.application.run (ARGV);

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(
                self, title="ToggleButton Example", application=app)
            self.set_default_size(300, 300)
            self.set_border_width(30)
    
            # a spinner animation
            self.spinner = Gtk.Spinner()
            # with extra horizontal space
            self.spinner.set_hexpand(True)
            # with extra vertical space
            self.spinner.set_vexpand(True)
    
            # a togglebutton
            button = Gtk.ToggleButton.new_with_label("Start/Stop")
            # connect the signal "toggled" emitted by the togglebutton
            # when its state is changed to the callback function toggled_cb
            button.connect("toggled", self.toggled_cb)
    
            # a grid to allocate the widgets
            grid = Gtk.Grid()
            grid.set_row_homogeneous(False)
            grid.set_row_spacing(15)
            grid.attach(self.spinner, 0, 0, 1, 1)
            grid.attach(button, 0, 1, 1, 1)
    
            # add the grid to the window
            self.add(grid)
    
        # callback function for the signal "toggled"
        def toggled_cb(self, button):
            # if the togglebutton is active, start the spinner
            if button.get_active():
                self.spinner.start()
            # else, stop it
            else:
                self.spinner.stop()
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
        # a window
    
        def __init__(self, app):
            Gtk.Window.__init__(
                self, title="ToggleButton-exempel", application=app)
            self.set_default_size(300, 300)
            self.set_border_width(30)
    
            # en väntesnurreanimering
            self.spinner = Gtk.Spinner()
            # med extra horisontellt utrymme
            self.spinner.set_hexpand(True)
            # med extra vertikalt utrymme
            self.spinner.set_vexpand(True)
    
            # en växlingsknapp
            button = Gtk.ToggleButton.new_with_label("Starta/stoppa")
            # anslut signalen "toggled" som utges av växlingsknappen
            # när dess tillstånd ändras till återanropsfunktionen toggled_cb
            button.connect("toggled", self.toggled_cb)
    
            # ett rutnät för att allokera komponenterna
            grid = Gtk.Grid()
            grid.set_row_homogeneous(False)
            grid.set_row_spacing(15)
            grid.attach(self.spinner, 0, 0, 1, 1)
            grid.attach(button, 0, 1, 1, 1)
    
            # lägg till rutnätet till fönstret
            self.add(grid)
    
        # återanropsfunktion för signalen "toggled"
        def toggled_cb(self, button):
            # starta väntesnurran om växlingsknappen är aktiv
            if button.get_active():
                self.spinner.start()
            # stoppa den annars
            else:
                self.spinner.stop()
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a ToggleButton widget
sv: Användbara metoder för en ToggleButton-komponent

note: (itstool) path: section/p
en: In line 22 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 22 ansluts signalen <code>"toggled"</code> till återanropsfunktionen <code>toggled_cb()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: page/code
en: public class MyWindow : Gtk.ApplicationWindow {
    
    	Gtk.Spinner spinner;
    
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "ToggleButton Example");
    
    		this.set_default_size (300, 300);
    		this.border_width = 30;
    
    		/*Spinner*/
    		spinner = new Gtk.Spinner ();
    		spinner.set_hexpand (true);
    		spinner.set_vexpand (true);
    
    		/*ToggleButton*/
    		var togglebutton = new Gtk.ToggleButton.with_label ("Start/Stop");
    		togglebutton.toggled.connect (toggled_cb);
    
    		/*Grid*/
    		var grid = new Gtk.Grid ();
    		grid.set_row_homogeneous (false);
    		grid.set_row_spacing (15);
    		grid.attach (spinner, 0, 0, 1, 1);
    		grid.attach (togglebutton, 0, 1, 1, 1);
    
    		this.add (grid);
    	}
    
    	void toggled_cb (Gtk.ToggleButton button) {
    		if (button.get_active()) {
    			spinner.start ();
    		}
    		else {
    			spinner.stop ();
    		}
    	}
    }
    
    public class MyApplication : Gtk.Application {
    
    	protected override void activate () {
    
    		//Show all the things
    		new MyWindow (this).show_all ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.spinner");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }
sv: public class MyWindow : Gtk.ApplicationWindow {
    
    	Gtk.Spinner spinner;
    
    	internal MyWindow (MyApplication app) {
    		Object (application: app, title: "ToggleButton-exempel");
    
    		this.set_default_size (300, 300);
    		this.border_width = 30;
    
    		/*Spinner*/
    		spinner = new Gtk.Spinner ();
    		spinner.set_hexpand (true);
    		spinner.set_vexpand (true);
    
    		/*ToggleButton*/
    		var togglebutton = new Gtk.ToggleButton.with_label ("Starta/stoppa");
    		togglebutton.toggled.connect (toggled_cb);
    
    		/*Grid*/
    		var grid = new Gtk.Grid ();
    		grid.set_row_homogeneous (false);
    		grid.set_row_spacing (15);
    		grid.attach (spinner, 0, 0, 1, 1);
    		grid.attach (togglebutton, 0, 1, 1, 1);
    
    		this.add (grid);
    	}
    
    	void toggled_cb (Gtk.ToggleButton button) {
    		if (button.get_active()) {
    			spinner.start ();
    		}
    		else {
    			spinner.stop ();
    		}
    	}
    }
    
    public class MyApplication : Gtk.Application {
    
    	protected override void activate () {
    
    		//Visa allting
    		new MyWindow (this).show_all ();
    	}
    
    	internal MyApplication () {
    		Object (application_id: "org.example.spinner");
    	}
    }
    
    public int main (string[] args) {
    	return new MyApplication ().run (args);
    }

note: (itstool) path: info/desc
en: A bar of buttons
sv: En rad med knappar

note: (itstool) path: page/p
en: Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has fullscreen functionality.
sv: Toolbar kan innehålla antingen text eller standardikoner. I detta exempel använder vi standardikoner. Detta exempel har helskärmsfunktionalitet.

[ctx: text]
note: (itstool) path: info/title
en: Toolbar (JavaScript)
sv: Toolbar (Javascript)

note: (itstool) path: info/desc
en: A bar of tools
sv: En rad med verktyg

note: (itstool) path: item/p
en: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html">Gtk Stock items</link>
sv: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html">Gtk-standardobjekt</link>

note: (itstool) path: info/desc
en: A bar of buttons and other widgets
sv: En rad med knappar och andra komponenter

note: (itstool) path: page/p
en: An example of toolbar with buttons (from stock icons).
sv: Ett exempel på ett verktygsfält med knappar (från standardikoner).

note: (itstool) path: section/title
en: Useful methods for a Toolbar widget
sv: Användbara metoder för en Toolbar-komponent

note: (itstool) path: section/p
en: In line 32 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 32 ansluts signalen <code>"activate"</code> från åtgärden <code>undo_action</code> till återanropsfunktionen <code>undo_callback()</code> med <code><var>åtgärd</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <code>get_n_items()</code> returns the number of items on the toolbar; <code>get_nth_item(position)</code> returns the item in position <code>position</code>.
sv: <code>get_n_items()</code> returnerar antalet objekt i verktygsfältet; <code>get_nth_item(position)</code> returnerar objektet på positionen <code>position</code>.

note: (itstool) path: item/p
en: If the toolbar does not have room for all the menu items, and <code>set_show_arrow(True)</code>, the items that do not have room are shown through an overflow menu.
sv: Om verktygsfältet inte har plats för alla menyobjekt, och <code>set_show_arrow(True)</code>, så kommer objekten som inte har plats att visas via en överspillsmeny.

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Python)
sv: Toolbar skapad med Glade (Python)

note: (itstool) path: page/title
en: Toolbar created using Glade
sv: Toolbar skapad med Glade

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.py"/>, except we use Glade to create the toolbar in an XML .ui file.
sv: Detta exempel liknar <link xref="toolbar.py"/>, förutom att vi använder Glade för att skapa verktygsfältet i en XML .ui-fil.

note: (itstool) path: section/title
en: Creating the toolbar with Glade
sv: Skapa verktygsfältet med Glade

note: (itstool) path: section/p (itstool) path: page/p
en: To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:
sv: För att skapa verktygsfältet med <link href="http://glade.gnome.org/">gränssnittsbyggaren Glade</link>:

note: (itstool) path: item/p
en: Open Glade, and save the file as <file>toolbar_builder.ui</file>
sv: Öppna Glade, och spara filen som <file>toolbar_builder.ui</file>

note: (itstool) path: item/p
en: <media type="image" src="media/glade_ui.png" width="900"> Screenshot of Glade ui </media>
sv: <media type="image" src="media/glade_ui.png" width="900"> Skärmbild av Glades användargränssnitt </media>

note: (itstool) path: item/p
en: Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.
sv: Under <gui>Behållare</gui> på vänster sida, högerklicka på verktygsfältsikonen och välj <gui>Lägg till komponent som toppnivå</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_select_toolbar.png"> Screenshot of toolbar icon in Glade ui </media>
sv: <media type="image" src="media/glade_select_toolbar.png"> Skärmbild av verktygsfältsikon i Glades användargränssnitt </media>

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_general.png"> Screenshot of General tab </media>
sv: <media type="image" src="media/glade_toolbar_general.png"> Skärmbild av fliken Allmänt </media>

note: (itstool) path: item/p
en: Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.
sv: Under fliken <gui>Gemensamma</gui>, ställ in <gui>Vågrät expansion</gui> till <gui>Ja</gui>.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_common.png"> Screenshot of Common tab </media>
sv: <media type="image" src="media/glade_toolbar_common.png"> Skärmbild av fliken Gemensam </media>

note: (itstool) path: item/p
en: Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.
sv: Högerklicka på verktygsfältet i det övre högra hörnet och välj <gui>Redigera</gui>. Fönstret <gui>Verktygsfältsredigerare</gui> kommer visas.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_edit.png"> Screenshot of where to right click to edit toolbar. </media>
sv: <media type="image" src="media/glade_toolbar_edit.png"> Skärmbild av var högerklick ska ske för att redigera verktygsfält. </media>

note: (itstool) path: item/p
en: Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.
sv: Under fliken <gui>Hierarki</gui>, klicka på <gui>Lägg till</gui>.

note: (itstool) path: item/p
en: Change the name of the ToolItem to <input>new_button</input>.
sv: Ändra namnet på detta ToolItem till <input>new_button</input>.

note: (itstool) path: item/p
en: Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of the ToolButton to be shown, when you view the toolbar.
sv: Rulla ner och ställ in <gui>Är viktig</gui> till <gui>Ja</gui>. Detta kommer få etiketten för vår ToolButton att visas när verktygsfältet visas.

note: (itstool) path: item/p
en: Enter the <gui>action name</gui>: <input>app.new</input>.
sv: Ange <gui>Åtgärdsnamn</gui>et: <input>app.new</input>.

note: (itstool) path: item/p
en: Change the <gui>Label</gui> to <input>New</input>.
sv: Ändra <gui>Etikett</gui> till <input>Ny</input>.

note: (itstool) path: td/p
en: Is important
sv: Är viktig

note: (itstool) path: td/p
en: Action name
sv: Åtgärdsnamn

note: (itstool) path: td/p
en: Stock Id
sv: Standard-ID

note: (itstool) path: td/p
en: Yes
sv: Ja

note: (itstool) path: td/p
en: Open
sv: Öppna

note: (itstool) path: td/p
en: Undo
sv: Ångra

note: (itstool) path: td/p
en: Fullscreen
sv: Helskärmsläge

note: (itstool) path: td/p
en: Leave Fullscreen
sv: Lämna helskärmsläge

note: (itstool) path: item/p
en: Close the <gui>Tool Bar Editor</gui>.
sv: Stäng <gui>Verktygsfältsredigerare</gui>n.

note: (itstool) path: item/p
en: Save your work, and close Glade.
sv: Spara ditt arbete och stäng Glade.

note: (itstool) path: section/p (itstool) path: page/p
en: We now create the code below, which adds the toolbar from the file we just created.
sv: Vi skapar nu koden nedan, vilken lägger till verktygsfältet från filen vi just skapade.

note: (itstool) path: section/title
en: Useful methods for Gtk.Builder
sv: Användbara metoder för Gtk.Builder

note: (itstool) path: section/p
en: For the useful methods for a Toolbar widget, see <link xref="toolbar.py"/>
sv: För de användbara metoderna för en Toolbar-komponent, se <link xref="toolbar.py"/>

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Vala)
sv: Toolbar skapad med Glade (Vala)

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.
sv: Detta exempel liknar <link xref="toolbar.vala"/>, förutom att vi använder Glade för att skapa verktygsfältet i en XML .ui-fil.

note: (itstool) path: info/desc
en: Add tips to your widgets
sv: Lägg till inforutor till dina komponenter

note: (itstool) path: page/p
en: A toolbar with a tooltip (with an image) for a button.
sv: Ett verktygsfält med en inforuta (med en bild) för en knapp.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.c">Toolbar</link> example.
sv: Detta exempel bygger på <link xref="toolbar.c">Toolbar</link>-exemplet.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html">Stock Items</link>
sv: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html">Standardobjekt</link>

[ctx: text]
note: (itstool) path: info/title
en: Tooltip (JavaScript)
sv: Tooltip (Javascript)

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.js">Toolbar</link> example.
sv: Detta exempel bygger på <link xref="toolbar.js">Toolbar</link>-exemplet.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.py">Toolbar</link> example.
sv: Detta exempel bygger på <link xref="toolbar.py">Toolbar</link>-exemplet.

note: (itstool) path: section/title
en: Useful methods for a Tooltip widget
sv: Användbara metoder för en Tooltip-komponent

note: (itstool) path: section/p
en: <code>set_tooltip_text(text)</code> and <code>set_tooltip_markup(text)</code> can be used to add a tooltip of plain text (or text in the Pango Markup Language) to a widget.
sv: <code>set_tooltip_text(text)</code> och <code>set_tooltip_markup(text)</code> kan användas för att lägga till en inforuta med vanlig text (eller text i märkspråket Pango) till en komponent.

note: (itstool) path: section/p
en: For more complex tooltips, for instance for a tooltip with an image:
sv: För mer komplexa inforutor, exempelvis för en inforuta med en bild:

note: (itstool) path: item/p
en: Set the <code>"has-tooltip"</code> property of the widget to <code>True</code>; this will make GTK+ monitor the widget for motion and related events which are needed to determine when and where to show a tooltip.
sv: Ställ in egenskapen <code>"has-tooltip"</code> för komponenten till <code>True</code>; detta kommer få GTK+ att övervaka komponenten efter rörelse och relaterade händelser som behövs för att avgöra när och var en inforuta ska visas.

note: (itstool) path: item/p
en: Return <code>True</code> from your query-tooltip handler. This causes the tooltip to be show. If you return <code>False</code>, it will not be shown.
sv: Returnera <code>True</code> från din query-tooltip-hanterare. Detta får inforutan att visas. Om du returnerar <code>False</code> kommer den inte att visas.

note: (itstool) path: item/p
en: Set <code>"has-tooltip"</code> and connect to <code>"query-tooltip"</code> as before.
sv: Ställ in <code>"has-tooltip"</code> och anslut till <code>"query-tooltip"</code> som tidigare.

note: (itstool) path: item/p
en: Use <code>set_tooltip_window()</code> on the widget to set a GtkWindow created by you as tooltip window.
sv: Använd <code>set_tooltip_window()</code> på komponenten för att ställa in ett GtkWindow skapat av dig som inforutefönster.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.vala">Toolbar</link> example.
sv: Detta exempel bygger på <link xref="toolbar.vala">Toolbar</link>-exemplet.

note: (itstool) path: item/p
en: <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS">Stock Items</link>
sv: <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS">Standardobjekt</link>

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Python)
sv: Enkel TreeView med ListStore (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (more complex example)
sv: En TreeView som visar en ListStore (mer komplext exempel)

note: (itstool) path: page/title
en: More Complex Treeview with ListStore
sv: Mer komplex TreeView med ListStore

note: (itstool) path: section/title
en: Useful methods for a TreeView widget
sv: Användbara metoder för en TreeView-komponent

note: (itstool) path: section/p
en: In line 36 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 36 ansluts signalen <code>"changed"</code> till återanropsfunktionen <code>on_changed()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with TreeStore (Python)
sv: TreeView med TreeStore (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (more complex example, with CellRendererToggle)
sv: En TreeView som visar en TreeStore (mer komplext exempel, med CellRendererToggle)

note: (itstool) path: page/title
en: More Complex TreeView with TreeStore
sv: Mer komplex TreeView med TreeStore

note: (itstool) path: section/p
en: In line 48 the <code>"toggled"</code> signal is connected to the callback function <code>on_toggled()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 48 ansluts signalen <code>"toggled"</code> till återanropsfunktionen <code>on_toggled()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with ListStore (JavaScript)
sv: TreeView med ListStore (Javascript)

note: (itstool) path: page/title
en: TreeView with ListStore
sv: TreeView med ListStore

note: (itstool) path: section/p
en: All the code for this sample goes in the TreeViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
sv: All kod för detta exempel hamnar i klassen TreeViewExample. Koden ovan skapar en <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> att ha våra komponenter och fönstret i.

note: (itstool) path: section/code
en: 
        // Build the application's UI
        _buildUI: function() {
    
            // Create the application window
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 250,
                default_width: 100,
                border_width: 20,
                title: "My Phone Book"});
sv: 
        // Bygg programmets användargränssnitt
        _buildUI: function() {
    
            // Skapa programfönstret
            this._window = new Gtk.ApplicationWindow({
                application: this.application,
                window_position: Gtk.WindowPosition.CENTER,
                default_height: 250,
                default_width: 100,
                border_width: 20,
                title: "Min telefonkatalog"});

note: (itstool) path: section/p
en: The GObject data types you can use include:
sv: GObject-datatyperna du kan använda inkluderar:

note: (itstool) path: item/p
en: <file>gtk.gdk.Pixbuf</file> -- A picture
sv: <file>gtk.gdk.Pixbuf</file> -- en bild

note: (itstool) path: section/title
en: Creating the TreeView
sv: Skapa vår TreeView

note: (itstool) path: section/code
en: 
            // Create the columns for the address book
            let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
            let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
            let phone = new Gtk.TreeViewColumn ({ title: "Phone Number" });
sv: 
            // Skapa kolumnerna för adressboken
            let firstName = new Gtk.TreeViewColumn ({ title: "Förnamn" });
            let lastName = new Gtk.TreeViewColumn ({ title: "Efternamn" });
            let phone = new Gtk.TreeViewColumn ({ title: "Telefonnummer" });

note: (itstool) path: section/code
en: 
            firstName.add_attribute (bold, "text", 0);
            lastName.add_attribute (normal, "text", 1);
            phone.add_attribute (normal, "text", 2);
    
            // Insert the columns into the treeview
            this._treeView.insert_column (firstName, 0);
            this._treeView.insert_column (lastName, 1);
            this._treeView.insert_column (phone, 2);
sv: 
            firstName.add_attribute (bold, "text", 0);
            lastName.add_attribute (normal, "text", 1);
            phone.add_attribute (normal, "text", 2);
    
            // Infoga kolumnerna i trädvyn
            this._treeView.insert_column (firstName, 0);
            this._treeView.insert_column (lastName, 1);
            this._treeView.insert_column (phone, 2);

note: (itstool) path: section/title
en: Building the rest of the UI
sv: Bygga resten av användargränssnittet

note: (itstool) path: section/code
en: 
    // Run the application
    let app = new TreeViewExample ();
    app.application.run (ARGV);
sv: 
    // Kör programmet
    let app = new TreeViewExample ();
    app.application.run (ARGV);

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TreeViewExample class, and set the application running.
sv: Slutligen skapar vi en ny instans av den slutförda TreeViewExample-klassen, och startar programmet.

[ctx: text]
note: (itstool) path: info/title
en: Simple TreeView with ListStore (Python)
sv: Enkel TreeView med ListStore (Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (simpler example)
sv: En TreeView som visar en ListStore (enklare exempel)

note: (itstool) path: page/title
en: Simple TreeView with ListStore
sv: Enkel TreeView med ListStore

note: (itstool) path: section/p
en: In line 44 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
sv: På rad 44 ansluts signalen <code>"changed"</code> till återanropsfunktionen <code>on_changed()</code> med <code><var>komponent</var>.connect(<var>signal</var>, <var>återanropsfunktion</var>)</code>. Se <link xref="signals-callbacks.py"/> för en utförligare förklaring.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/pango/stable/pango-Fonts.html">Fonts</link>
sv: <link href="http://developer.gnome.org/pango/stable/pango-Fonts.html">Typsnitt</link>

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Vala)
sv: Enkel TreeView med ListStore (Vala)

note: (itstool) path: page/title
en: Simple Treeview with ListStore
sv: Enkel TreeView med ListStore

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (simpler example)
sv: En TreeView som visar en TreeStore (enklare exempel)

note: (itstool) path: page/title
en: Simpler TreeView with TreeStore
sv: Enklare TreeView med TreeStore

note: (itstool) path: page/p
en: This TreeView displays a TreeStore.
sv: Denna TreeView visar en TreeStore.

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Python)
sv: Handledning för nybörjare (Python)

note: (itstool) path: info/desc
en: A tutorial for beginners who want to learn how to program GUIs using GTK+ in Python.
sv: En handledning för nybörjare som vill lära sig hur de kan programmera grafiska användargränssnitt med GTK+ i Python.

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+ in Python.
sv: Genom att följa dessa handledningar kommer du att lära dig grundläggande programmering av grafiska användargränssnitt med GTK+ i Python.

note: (itstool) path: synopsis/p
en: If you have never programmed before, or are not familiar with the concepts of object oriented programming, you may need to learn a few basics first. The book <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> or <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link> may be a better place for you to start. You may also be interested in <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Once you master the basics, be sure to come back and check out these tutorials.
sv: Om du aldrig har programmerat förr, eller inte är bekant med koncepten i objektorienterad programmering, så kan du behöva lära dig lite grunder först. Boken <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> eller <link href="http://docs.python.org/tutorial/index.html">Python-handledningen</link> kan vara ett bättre ställe för dig att börja. Du kan också vara intresserad av <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">GTK+ 3-handledningen för Python</link>. Se till att komma tillbaka och ta en titt på de här handledningarna då du bemästrat grunderna.

note: (itstool) path: section/title
en: To run the code samples
sv: För att köra kodexemplen

note: (itstool) path: section/p
en: To run the code samples in the tutorial:
sv: För att köra kodexemplen i handledningen:

note: (itstool) path: item/p
en: Type or copy and paste the code into a file, and save the file with a name like <var>filename</var>.py
sv: Skriv eller kopiera och klistra in koden i en fil, och spara filen med ett namn som <var>filnamn</var>.py

note: (itstool) path: item/p
en: To execute the code, type in the terminal:
sv: Skriv följande i terminalen för att köra koden:

note: (itstool) path: item/screen
en: python <var>filename</var>.py
sv: python <var>filnamn</var>.py

note: (itstool) path: section/p
en: After executing the code, you will either see the widget on your screen, or (if you have mistyped some of the code) you will see an error message that will help you identify the problem.
sv: Efter att du kör koden kommer du antingen se komponenten på din skärm, eller (om du skrivit någon del av koden fel) så kommer du se ett felmeddelande som kommer hjälpa dig att identifiera felet.

note: (itstool) path: section/title
en: A path through the widgets (with some theory)
sv: En väg genom komponenterna (med lite teori)

note: (itstool) path: section/p
en: The tutorial will walk you through increasingly complex examples and programming theory, but you can also feel free to just go directly to the tutorial that is most helpful to you.
sv: Handledningen kommer följa dig genom alltmer komplexa exempel och programmeringsteori, men känn dig även fri att bara gå direkt till den handledning som är till mest hjälp för dig.

note: (itstool) path: steps/title
en: Tutorial
sv: Handledning

note: (itstool) path: steps/title
en: Basic windows
sv: Enkla fönster

note: (itstool) path: steps/title
en: Images and labels
sv: Bilder och etiketter

note: (itstool) path: steps/title
en: Introduction to properties
sv: Introduktion till egenskaper

note: (itstool) path: steps/title
en: Grid, separator and scrolling
sv: Rutnät, avskiljare och rullning

note: (itstool) path: steps/title
en: Signals, callbacks and buttons
sv: Signaler, återanrop och knappar

note: (itstool) path: steps/title
en: Other display widgets
sv: Andra visningskomponenter

note: (itstool) path: steps/title
en: Entry widgets
sv: Inmatningskomponenter

note: (itstool) path: steps/title
en: A widget to write and display text
sv: En komponent för att skriva och visa text

note: (itstool) path: steps/title
en: Dialogs
sv: Dialoger

note: (itstool) path: steps/title
en: Menus, Toolbars and Tooltips (also: using Glade and GtkBuilder)
sv: Menyer, verktygsfält och inforutor (även: användning av Glade och GtkBuilder)

note: (itstool) path: steps/title
en: Custom widget
sv: Anpassad komponent

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Vala
sv: Handledningar, kodexempel och plattformsdemonstrationer i Vala

note: (itstool) path: section/title
en: Code samples and tutorial
sv: Kodexempel och handledning

[ctx: text]
note: (itstool) path: info/title
en: Weather application (JavaScript)
sv: Väderprogram (Javascript)

note: (itstool) path: info/desc
en: How to plan an application that uses asynchronous calls. Asynchronous calls will be presented through a weather application.
sv: Hur du planerar ett program som använder asynkrona anrop. Asynkrona anrop kommer presenteras genom ett väderprogram.

note: (itstool) path: page/title
en: Weather application
sv: Väderprogram

note: (itstool) path: synopsis/p
en: In this guide well construct a weather application using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
sv: I denna guide kommer vi konstruera ett väderprogram som använder asynkrona anrop. Väderinformation i detta exempel hämtas från geonames.org och programmet använder <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO-koder </link> för att skicka din väderbegäran. För att skriva alla kodexemplen själv behöver du en redigerare att skriva kod i, Terminal samt GNOME 3 eller högre installerat på din dator. I denna guide kommer vi gå igenom följande delar:

note: (itstool) path: item/p
en: <link xref="#planningUi">Planning the graphical user interface</link>
sv: <link xref="#planningUi">Planera det grafiska användargränssnittet</link>

note: (itstool) path: item/p
en: <link xref="#asynchronous">Asynchronous calls</link>
sv: <link xref="#asynchronous">Asynkrona anrop</link>

note: (itstool) path: item/p
en: <link xref="#main">The main program file</link>
sv: <link xref="#main">Huvudprogramfilen</link>

note: (itstool) path: item/p
en: <link xref="#main">Local library GeoNames</link>
sv: <link xref="#main">Det lokala biblioteket GeoNames</link>

note: (itstool) path: item/p
en: <link xref="#main">Autotools and Icons</link>
sv: <link xref="#main">Autotools och ikoner</link>

note: (itstool) path: section/title
en: Planning the graphical user interface
sv: Planera det grafiska användargränssnittet

note: (itstool) path: section/p
en: Structuring an application for GNOME 3 means you will be using <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. The most important thing is to remember that the main window will only accept one widget. You must plan your structure accordingly (this example is using Gtk.Grid). A useful method is to draw out the main window and place every widget needed inside that box. By looking at an image of your future application it is easier to tell what are the relations between widgets. For example Gtk.Grid places your widgets in relation to other widgets, so after the first widget is in place, placing widgets can be done in relation to any widget on the grid.
sv: Att strukturera ett program för GNOME 3 betyder att du kommer använda <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. Den viktigaste saken att komma ihåg är att huvudfönstret endast kommer acceptera en komponent. Du måste planera din struktur enligt detta (detta exempel använder Gtk.Grid). En användbar metod är att rita ut huvudfönstret och placera varje komponent som behövs i den rutan. Genom att titta på en bild på ditt framtida program är det lättare att säga vad relationerna mellan komponenter är. Exempelvis så placerar Gtk.Grid dina komponenter i relation till andra komponenter, så efter att den första komponenten är på plats kan placering av komponenter göras i förhållande till någon annan komponent i rutnätet.

note: (itstool) path: section/title
en: Asynchronous calls
sv: Asynkrona anrop

note: (itstool) path: section/title
en: The different parts of the program
sv: Programmets olika delar

note: (itstool) path: page/title
en: The main program file
sv: Huvudprogramfilen

note: (itstool) path: item/p
en: <link xref="#widgets">Adding a grid and all the necessary widgets to it</link>
sv: <link xref="#widgets">Lägga till ett rutnät och alla nödvändiga komponenter i det</link>

note: (itstool) path: item/p
en: <link xref="#asynccall">Requesting the weather information asynchronously</link>
sv: <link xref="#asynccall">Begära väderinformationen asynkront</link>

note: (itstool) path: item/p
en: <link xref="#connectingbuttons">Connecting signals to button and entry</link>.
sv: <link xref="#connectingbuttons">Ansluta signaler till knapp och inmatning</link>.

note: (itstool) path: section/title
en: Adding a grid and all the necessary widgets to it
sv: Lägga till ett rutnät och alla nödvändiga komponenter i det

note: (itstool) path: section/code
en: 
    var grid = new Gtk.Grid();
    weatherwindow.add(grid);
    
    //We initialize the icon here, but decide the file later in geonames.js.
    var weatherIcon = new Gtk.Image();
    
    //Set some labels to your window
    var label1 = new Gtk.Label({label: ""});
    var label2 = new Gtk.Label({label: "Looking in the sky..."});
    var label3 = new Gtk.Label({label: ""});
    
    var entry = new Gtk.Entry();
    entry.set_width_chars(4);
    entry.set_max_length(4);
    var label4 = new Gtk.Label({label: "Enter ICAO station for weather: "});
    var button1 = new Gtk.Button({label: "search!"});
    
    grid.attach(label4, 2, 1, 1, 1);
    grid.attach_next_to(label1,label4,3,1,1);
    grid.attach_next_to(label2,label1,3,1,1);
    grid.attach_next_to(label3,label2,3,1,1);
    grid.attach_next_to(entry,label4,1,1,1);
    grid.attach_next_to(button1,entry,1,1,1);
    grid.attach_next_to(weatherIcon,label2,1,1,1)
sv: 
    var grid = new Gtk.Grid();
    weatherwindow.add(grid);
    
    //Vi initierar ikonen här, men bestämmer filen senare i geonames.js.
    var weatherIcon = new Gtk.Image();
    
    //Ställ in några etiketter till ditt fönster
    var label1 = new Gtk.Label({label: ""});
    var label2 = new Gtk.Label({label: "Söker i himlen…"});
    var label3 = new Gtk.Label({label: ""});
    
    var entry = new Gtk.Entry();
    entry.set_width_chars(4);
    entry.set_max_length(4);
    var label4 = new Gtk.Label({label: "Ange ICAO-station för väder: "});
    var button1 = new Gtk.Button({label: "sök!"});
    
    grid.attach(label4, 2, 1, 1, 1);
    grid.attach_next_to(label1,label4,3,1,1);
    grid.attach_next_to(label2,label1,3,1,1);
    grid.attach_next_to(label3,label2,3,1,1);
    grid.attach_next_to(entry,label4,1,1,1);
    grid.attach_next_to(button1,entry,1,1,1);
    grid.attach_next_to(weatherIcon,label2,1,1,1)

note: (itstool) path: section/title
en: Requesting the weather information asynchronously
sv: Begära väderinformationen asynkront

note: (itstool) path: section/title
en: Connecting signals to button and entry.
sv: Ansluta signaler till knapp och inmatning.

note: (itstool) path: section/code
en: 
    entry.connect("key_press_event", function(widget, event) {
      if (entry.get_text().length === 4) {
        // Enough is enough
        getWeatherForStation();
      }
      return false;
    });
    
    button1.connect("clicked", function(){
      getWeatherForStation();
    });
sv: 
    entry.connect("key_press_event", function(widget, event) {
      if (entry.get_text().length === 4) {
        // Nu räcker det
        getWeatherForStation();
      }
      return false;
    });
    
    button1.connect("clicked", function(){
      getWeatherForStation();
    });

note: (itstool) path: section/p
en: Weatherapp.js file looks like this:
sv: Filen weatherapp.js ser ut så här:

note: (itstool) path: page/title
en: Autotools and Icons
sv: Autotools och ikoner

note: (itstool) path: item/p
en: <link xref="#icons">Custom icons for your application</link>
sv: <link xref="#icons">Anpassade ikoner för ditt program</link>

note: (itstool) path: section/title
en: Autotools and necessary files
sv: Autotools och nödvändiga filer

note: (itstool) path: section/code
en: 
    #!/bin/sh
    # This will run autoconf, automake, etc. for us
    autoreconf --force --install
sv: 
    #!/bin/sh
    # Detta kommer köra autoconf, automake o.s.v. åt oss
    autoreconf --force --install

note: (itstool) path: section/title
en: Custom icons for your application
sv: Anpassade ikoner för ditt program

note: (itstool) path: page/title
en: Local library geoNames
sv: Det lokala biblioteket geoNames

note: (itstool) path: item/p
en: <link xref="#geonamesimports">Local library for getting the weather</link>
sv: <link xref="#geonamesimports">Lokalt bibliotek för att erhålla vädret</link>

note: (itstool) path: item/p
en: <link xref="#geonamesfunction">Creating function geoNames</link>
sv: <link xref="#geonamesfunction">Skapa funktionen geoNames</link>

note: (itstool) path: item/p
en: <link xref="#geonamesmethods">Methods for geoNames</link>
sv: <link xref="#geonamesmethods">Metoder för geoNames</link>

note: (itstool) path: section/title
en: Local library for getting the weather
sv: Lokalt bibliotek för att erhålla vädret

note: (itstool) path: section/p
en: For this we need a new file that will be our local library.
sv: För detta behöver vi en ny fil som kommer vara vårt lokala bibliotek.

note: (itstool) path: section/p
en: In the first lines we'll import and initialize the libraries we need to use in this local library. Soup handles all the requests we have to make with http.
sv: I de första raderna kommer vi importera och initiera de bibliotek vi behöver använda i detta lokala bibliotek. Soup hanterar alla begäranden som vi behöver göra med http.

note: (itstool) path: section/title
en: Creating function GeoNames
sv: Skapa funktionen GeoNames

note: (itstool) path: section/title
en: Methods for GeoNames
sv: Metoder för geoNames

note: (itstool) path: section/p
en: Here is the entire code for our local library. The main program file calls this asynchronously.
sv: Här är hela koden för vårt lokala bibliotek. Huvudprogramfilen anropar detta asynkront.

note: (itstool) path: info/desc
en: A widget that uses the Cairo library to draw
sv: En komponent som använder Cairo-biblioteket för utritning

note: (itstool) path: page/p
en: Enter an angle, visualize it.
sv: Ange en vinkel, visualisera den.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    from gi.repository import cairo
    import sys
    import math
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Choose an angle", application=app)
            self.set_default_size(400, 400)
            self.set_border_width(10)
    
            # a default angle
            self.angle = 360
    
            grid = Gtk.Grid()
    
            # a spinbutton that takes the value of an angle
            ad = Gtk.Adjustment(360, 0, 360, 1, 0, 0)
            self.spin = Gtk.SpinButton(adjustment=ad, climb_rate=1, digits=0)
            self.spin.connect("value-changed", self.get_angle)
    
            # a drawing area for drawing whatever we want
            self.darea = Gtk.DrawingArea()
            # that we describe in the method draw(), connected to the signal "draw"
            self.darea.connect("draw", self.draw)
            # we have to request a minimum size of the drawing area, or it will
            # disappear
            self.darea.set_size_request(300, 300)
    
            grid.attach(self.spin, 0, 0, 1, 1)
            grid.attach(self.darea, 0, 1, 1, 1)
    
            self.add(grid)
    
        # whenever we get a new angle in the spinbutton
        def get_angle(self, event):
            self.angle = self.spin.get_value_as_int()
            # redraw what is in the drawing area
            self.darea.queue_draw()
    
        def draw(self, darea, cr):
            # a 10-pixels-wide line
            cr.set_line_width(10)
            # red
            cr.set_source_rgba(0.5, 0.0, 0.0, 1.0)
    
            # get the width and height of the drawing area
            w = self.darea.get_allocated_width()
            h = self.darea.get_allocated_height()
    
            # move to the center of the drawing area
            # (translate from the top left corner to w/2, h/2)
            cr.translate(w / 2, h / 2)
            # draw a line to (55, 0)
            cr.line_to(55, 0)
            # and get back to (0, 0)
            cr.line_to(0, 0)
            # draw an arc centered in the origin, 50 pixels wide, from the angle 0
            # (in radians) to the angle given by the spinbutton (in degrees)
            cr.arc(0, 0, 50, 0, self.angle * (math.pi / 180))
            # draw a line back to the origin
            cr.line_to(0, 0)
            # drawing the path, and keeping the path for future use
            cr.stroke_preserve()
    
            # set a colour
            cr.set_source_rgba(0.0, 0.5, 0.5, 1.0)
            # and use it to fill the path (that we had kept)
            cr.fill()
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    from gi.repository import cairo
    import sys
    import math
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="Välj en vinkel", application=app)
            self.set_default_size(400, 400)
            self.set_border_width(10)
    
            # en standardvinkel
            self.angle = 360
    
            grid = Gtk.Grid()
    
            # en stegningsruta som använder ett värde som vinkel
            ad = Gtk.Adjustment(360, 0, 360, 1, 0, 0)
            self.spin = Gtk.SpinButton(adjustment=ad, climb_rate=1, digits=0)
            self.spin.connect("value-changed", self.get_angle)
    
            # en rityta för att rita vad vi vill
            self.darea = Gtk.DrawingArea()
            # som vi beskriver i metoden draw(), ansluten till signalen ”draw”
            self.darea.connect("draw", self.draw)
            # vi måste begära en minsta storlek för ritytan, annars försvinner den
            self.darea.set_size_request(300, 300)
    
            grid.attach(self.spin, 0, 0, 1, 1)
            grid.attach(self.darea, 0, 1, 1, 1)
    
            self.add(grid)
    
        # närhelst vi får en ny vinkel i stegningsrutan
        def get_angle(self, event):
            self.angle = self.spin.get_value_as_int()
            # rita om det som finns i ritytan
            self.darea.queue_draw()
    
        def draw(self, darea, cr):
            # en 10 bildpunkter bred linje
            cr.set_line_width(10)
            # röd
            cr.set_source_rgba(0.5, 0.0, 0.0, 1.0)
    
            # få bredden och höjden på ritytan
            w = self.darea.get_allocated_width()
            h = self.darea.get_allocated_height()
    
            # gå till mitten på ritytan
            # (translatera från övre vänstra hörnet till w/2, h/2)
            cr.translate(w / 2, h / 2)
            # rita en linje till (55, 0)
            cr.line_to(55, 0)
            # och gå tillbaka till (0, 0)
            cr.line_to(0, 0)
            # rita en båge centrerad i origo, 50 bildpunkter bred, från vinkel 0
            # (i radianer) till vinkeln angiven av stegningsrutan (i grader)
            cr.arc(0, 0, 50, 0, self.angle * (math.pi / 180))
            # rita en linje tillbaka till origo
            cr.line_to(0, 0)
            # ritar banan, och behåller banan för framtida användning
            cr.stroke_preserve()
    
            # ställ in en färg
            cr.set_source_rgba(0.0, 0.5, 0.5, 1.0)
            # och använd den för att fylla banan (som vi hade behållit)
            cr.fill()
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: item/p
en: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">The Cairo Tutorial for Python Programmers</link>
sv: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">Cairo-handledningen för Python-programmerare</link>

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets
sv: Ett toppnivåfönster som kan innehålla andra komponenter

note: (itstool) path: page/p
en: A minimal GtkApplication. Use <link xref="GtkApplicationWindow.c">Application Window</link> if you need GMenu support.
sv: En minimal GtkApplication. Använd <link xref="GtkApplicationWindow.c">ApplicationWindow</link> om du behöver GMenu-stöd.

note: (itstool) path: page/code
en: 
    #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    
      gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
      gtk_window_set_title (GTK_WINDOW (window), "Hello GNOME");
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }
sv: 
    #include &lt;gtk/gtk.h&gt;
    
    static void
    activate (GtkApplication *app,
              gpointer        user_data)
    {
      GtkWidget *window;
    
      window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    
      gtk_window_set_application (GTK_WINDOW (window), GTK_APPLICATION (app));
      gtk_window_set_title (GTK_WINDOW (window), "Hej GNOME");
    
      gtk_widget_show_all (GTK_WIDGET (window));
    }
    
    int
    main (int argc, char **argv)
    {
      GtkApplication *app;
      int status;
    
      app = gtk_application_new ("org.gtk.example",G_APPLICATION_FLAGS_NONE);
      g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
      status = g_application_run (G_APPLICATION (app), argc, argv);
      g_object_unref (app);
      return status;
    }

[ctx: text]
note: (itstool) path: info/title
en: Window (JavaScript)
sv: Window (Javascript)

note: (itstool) path: info/desc
en: A basic window which can contain other widgets
sv: Ett enkelt fönster som kan innehålla andra komponenter

note: (itstool) path: td/p
en: A minimal GtkApplication
sv: En minimal GtkApplication

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.js">ApplicationWindow</link> if you need GMenu support.
sv: Använd <link xref="GtkApplicationWindow.js">ApplicationWindow</link> om du behöver GMenu-stöd.

note: (itstool) path: page/code
en: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class Application {
        //create the application
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           this.application.connect('activate', this._onActivate.bind(this));
        }
    
        //callback function for 'activate' signal
        _onActivate() {
            let myWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
            myWindow.title = "Welcome to GNOME";
    
           /* Here are a few ways we can customize our window.
           Try uncommenting them or changing their values! */
            //myWindow.set_default_size (400,200);
            //myWindow.set_has_resize_grip (false);
            //myWindow.set_opacity (0.5);
            //myWindow.maximize ();
    
            //show the window and all child widgets (none in this case)
            myWindow.show_all();
            this.application.add_window(myWindow);
        }
    };
    
    //run the application
    let app = new Application ();
    app.application.run (ARGV);
sv: 
    #!/usr/bin/gjs
    
    imports.gi.versions.Gtk = '3.0';
    
    const Gio = imports.gi.Gio;
    const GLib = imports.gi.GLib;
    const Gtk = imports.gi.Gtk;
    
    class Application {
        //skapa programmet
        constructor() {
            this.application = new Gtk.Application({
                application_id: 'org.example.myapp',
                flags: Gio.ApplicationFlags.FLAGS_NONE
            });
    
           this.application.connect('activate', this._onActivate.bind(this));
        }
    
        //återanropsfunktion för ”activate”-signal
        _onActivate() {
            let myWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});
            myWindow.title = "Välkommen till GNOME";
    
           /* Här är några sätt vi kan anpassa våra fönster.
           Pröva att avkommentera dem eller ändra deras värden! */
            //myWindow.set_default_size (400,200);
            //myWindow.set_has_resize_grip (false);
            //myWindow.set_opacity (0.5);
            //myWindow.maximize ();
    
            //visa fönstret och alla barnkomponenter (ingen i detta fall)
            myWindow.show_all();
            this.application.add_window(myWindow);
        }
    };
    
    //kör programmet
    let app = new Application ();
    app.application.run (ARGV);

note: (itstool) path: page/p
en: In this example we used the following:
sv: I detta exempel använde vi följande:

note: (itstool) path: td/p
en: A minimal GTK+ Application: a window with a title.
sv: Ett minimalt GTK+-program: ett fönster med en titel.

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.py"/> if you need <link xref="gmenu.py"/> support.
sv: Använd <link xref="GtkApplicationWindow.py"/> om du behöver <link xref="gmenu.py"/>-stöd.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyApplication(Gtk.Application):
    
        def do_activate(self):
            # create a Gtk Window belonging to the application itself
            window = Gtk.Window(application=self)
            # set the title
            window.set_title("Welcome to GNOME")
            # show the window
            window.show_all()
    
    # create and run the application, exit with the value returned by
    # running the program
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
sv: from gi.repository import Gtk
    import sys
    
    
    class MyApplication(Gtk.Application):
    
        def do_activate(self):
            # skapa ett Gtk.Window som tillhör programmet i sig
            window = Gtk.Window(application=self)
            # ställ in titeln
            window.set_title("Välkommen till GNOME")
            # visa fönstret
            window.show_all()
    
    # skapa och kör programmet, avsluta med värdet som returneras
    # av att köra programmet
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)

note: (itstool) path: section/title
en: Useful methods for a Window widget
sv: Användbara metoder för en Window-komponent

note: (itstool) path: td/p
en: The simplest Gtk.Application
sv: Den enklaste Gtk.Application

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.vala">Application Window</link> if you need GMenu support.
sv: Använd <link xref="GtkApplicationWindow.vala">ApplicationWindow</link> om du behöver GMenu-stöd.

note: (itstool) path: page/code
en: /* This is the application. */
    public class Application : Gtk.Application {
    
    	/* Constructor */
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Override the 'activate' signal of GLib.Application,
    	 * which is inherited by Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Welcome to GNOME";
    
    		/* The following 3 lines are included here to introduce
    		 * you to ways you can adjust the toplevel window to suit
    		 * your needs.  Uncomment them to see what they do.
    		 */
    
    		//window.border_width = 10;
    		//window.set_default_size (350, 70);
    		//window.window_position = Gtk.WindowPosition.CENTER;
    
    		/* Add the window to this application. */
    		this.add_window (window);
    
    		/* Show the window. */
    		window.show ();
    	}
    }
    
    /* The main function creates the application and runs it.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }
sv: /*  Det här är programmet. */
    public class Application : Gtk.Application {
    
    	/* Konstruktor */
    	public Application () {
    		Object (application_id: "org.example.window");
    	}
    
    	/* Åsidosätt ”activate”-signalen för GLib.Application,
    	 * vilken ärvs av Gtk.Application. */
    	public override void activate () {
    
    		var window = new Gtk.Window ();
    		window.title = "Välkommen till GNOME";
    
    		/* De följande tre raderna inkluderas här för att visa
    		 * dig sätt du kan justera toppnivåfönstret enligt dina
    		 * behov. Avkommentera dem för att se vad de gör.
    		 */
    
    		//window.border_width = 10;
    		//window.set_default_size (350, 70);
    		//window.window_position = Gtk.WindowPosition.CENTER;
    
    		/* Lägg till fönstret till detta program. */
    		this.add_window (window);
    
    		/* Visa fönstret. */
    		window.show ();
    	}
    }
    
    /* main-funktionen skapar programmet och kör det.*/
    int main (string[] args) {
    	var app = new Application ();
    	return app.run (args);
    }

note: (itstool) path: item/p
en: The widget <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>
sv: Komponenten <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>

note: (itstool) path: item/p
en: The enum <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>
sv: Uppräkningstypen <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>

note: (itstool) path: item/p
en: The method <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>
sv: Metoden <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>

note: (itstool) path: info/desc
en: Tutorial for writing a custom <code>GSource</code> implementation
sv: Handledning för att skriva en anpassad <code>GSource</code>-implementation

note: (itstool) path: synopsis/title
en: Summary
sv: Sammanfattning

note: (itstool) path: synopsis/p
en: This article is a tutorial on creating a custom <code>GSource</code>. For the reference documentation, see the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">GLib API reference</link>.
sv: Denna artikel är en handledning i hur du skapar en anpassad <code>GSource</code>. För referensdokumentationen, se <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">API-referensen för GLib</link>.

note: (itstool) path: section/title
en: What is <code>GSource</code>?
sv: Vad är <code>GSource</code>?

note: (itstool) path: section/title
en: Callback Functions
sv: Återanropsfunktioner

note: (itstool) path: section/title
en: Constructor
sv: Konstruktor

note: (itstool) path: section/title
en: Complete Example
sv: Fullständigt exempel

note: (itstool) path: listing/title
en: Complete Example Code
sv: Fullständig exempelkod

note: (itstool) path: section/title
en: Further Examples
sv: Vidare exempel
