<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="togglebutton.js" xml:lang="sv">
  <info>
  <title type="text">ToggleButton (Javascript)</title>
    <link type="guide" xref="beginner.js#buttons"/>
    <revision version="0.1" date="2012-06-16" status="draft"/>

    <credit type="author copyright">
      <name>Taryn Fox</name>
      <email its:translate="no">jewelfox@fursona.net</email>
      <years>2012</years>
    </credit>

    <desc>Förblir nedtryckt tills du trycker på den igen</desc>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Sebastian Rasmussen</mal:name>
      <mal:email>sebras@gmail.com</mal:email>
      <mal:years>2019</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Anders Jonsson</mal:name>
      <mal:email>anders.jonsson@norsjovallen.se</mal:email>
      <mal:years>2021</mal:years>
    </mal:credit>
  </info>

  <title>ToggleButton</title>
  <media type="image" mime="image/png" src="media/togglebutton.png"/>
  <p>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.</p>
  <p>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.</p>
    <links type="section"/>

  <section id="imports">
    <title>Bibliotek att importera</title>
    <code mime="application/javascript">
#!/usr/bin/gjs

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
</code>
    <p>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.</p>
    </section>

  <section id="applicationwindow">
    <title>Skapa programfönstret</title>
    <code mime="application/javascript">
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 ();
    },
</code>
    <p>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.</p>
    <code mime="application/javascript">
    // 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"});
</code>
    <p>_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.</p>
  </section>

  <section id="togglebutton">
    <title>Skapa vår ToggleButton och andra komponenter</title>
    <code mime="application/javascript">
        // Skapa väntesnurran som knappen stoppar och startar
        this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
</code>

    <p>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.</p>

    <code mime="application/javascript">
        // 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));
</code>

    <p>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.</p>

    <code mime="application/javascript">
        // 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);
</code>
    <p>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.</p>

    <code mime="application/javascript">
        // Lägg till rutnätet till fönstret
        this._window.add (this._grid);

        // Visa fönstret och alla barnkomponenter
        this._window.show_all();
    }.
</code>
    <p>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.</p>
    </section>

    <section id="toggled">
    <title>Få något att hända när vår ToggleButton växlar tillstånd</title>

    <code mime="application/javascript">
    _onToggle: function() {

        // Starta eller stoppa väntesnurran
        if (this._toggleButton.get_active ())
            this._spinner.start ();
        else this._spinner.stop ();

    }

});
</code>
    <p>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.</p>

    <code mime="application/javascript">
// Kör programmet
let app = new ToggleButtonExample ();
app.application.run (ARGV);
</code>
    <p>Slutligen skapar vi en ny instans av den slutförda RadioButtonExample-klassen, och startar programmet.</p>
  </section>

  <section id="complete">
    <title>Fullständigt kodexempel</title>
<code mime="application/javascript" style="numbered">#!/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);
</code>
  </section>

  <section id="in-depth">
    <title>Djupgående dokumentation</title>
<list>
  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link></p></item>
  <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html">Gtk.Grid</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Spinner.html">Gtk.Spinner</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ToggleButton.html">Gtk.ToggleButton</link></p></item>
</list>
  </section>
</page>
