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
|
<?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" xml: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>
<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>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>
|
