File: togglebutton.js.page

package info (click to toggle)
gnome-devel-docs 40.3-1
  • links: PTS, VCS
  • area: main
  • in suites: bookworm
  • size: 79,188 kB
  • sloc: javascript: 2,514; xml: 2,407; ansic: 2,229; python: 1,854; makefile: 805; sh: 499; cpp: 131
file content (247 lines) | stat: -rw-r--r-- 10,425 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<?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>