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>
|