<?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="checkbutton.js" lang="sv">
  <info>
  <title type="text">CheckButton (Javascript)</title>
    <link type="guide" xref="beginner.js#buttons"/>
    <revision version="0.1" date="2012-06-12" status="draft"/>

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

    <desc>En ruta som kan vara ikryssad eller inte</desc>
  <credit type="translator copyright"><name>Sebastian Rasmussen</name><email>sebras@gmail.com</email><years>2019</years></credit><credit type="translator copyright"><name>Anders Jonsson</name><email>anders.jonsson@norsjovallen.se</email><years>2021</years></credit></info>

  <title>CheckButton</title>
  <media type="image" mime="image/png" src="media/checkbutton.png"/>
  <p>Detta program har en CheckButton. huruvida rutan är ikryssad bestämmer huruvida fönstrets namnlist visar något.</p>
  <p>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).</p>
    <links type="section"/>

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

imports.gi.versions.Gtk = '3.0';

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
</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">
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 ();
    }
</code>
    <p>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.</p>
    <code mime="application/javascript">
    // 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"});
</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 href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> att stoppa alla våra komponenter i.</p>
  </section>

  <section id="button">
    <title>Skapa kryssrutan</title>
    <code mime="application/javascript">
        // 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));
</code>
    <p>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.</p>
    <code mime="application/javascript">
        // Visa fönstret och alla barnkomponenter
        this._window.show_all();
    }
</code>
    <p>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).</p>
  </section>

  <section id="function">
    <title>Funktion som hanterar kryssrutans växlande av tillstånd</title>
    <code mime="application/javascript">
    _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 ("");

    }

};
</code>
    <p>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.</p>
    <code mime="application/javascript">
// Kör programmet
let app = new CheckButtonExample ();
app.application.run (ARGV);
</code>
    <p>Slutligen skapar vi en ny instans av den slutförda CheckButtonExample-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 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);
</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.CheckButton.html">Gtk.CheckButton</link></p></item>
</list>
  </section>
</page>
