# Switch (Javascript)

Taryn Fox
jewelfox@fursona.net 2012
A sliding switch that can be flipped on and off
Sebastian Rasmussen
sebras@gmail.com 2019
Anders Jonsson
anders.jonsson@norsjovallen.se 2021

# Switch

En Switch har två lägen, på och av. Detta exempel visar hur du kan använda flera brytare tillsammans för att styra vilken Image som visas i fönstret. Bilderna som används i detta exempel kan hämtas här.

Fönstret kommer innehålla en ”trasig bild”-ikon istället för en bild om bildfiler med namnen redfox.png, muteswan.png, fruitbat.png och gentoopenguin.png inte finns i samma katalog. Du kan ändra koderna och bilderna som du vill, men de Creative Commons-licensierade fotona som används i detta exempel togs från följande källor och beskars till 640x425:

Foto av röd räv av Rob Lee, licensierat CC-By

Foto av åsnepingvin av Ken Funakoshi, licensierat CC-By-SA

Foto av flyghund av Shek Graham, licensierat CC-By

Foto av knölsvan av Mindaugas Urbonas, licensierat CC-By-SA

Photo credits and licensing information are shown in the application's AboutDialog. Always remember to credit the original artist when using Creative Commons-licensed works!

# Bibliotek att importera

#!/usr/bin/gjs

const Gio = imports.gi.Gio; const Gtk = imports.gi.Gtk; const Lang = imports.lang;

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.

# Skapa programfönstret

const SwitchExample = new Lang.Class({ Name: 'Switch-exempel',

// Skapa programmet i sig _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jsswitch', 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 skapar menyn och bygger användargränssnittet _onStartup: function() { this._initMenus(); this._buildUI (); },

All kod för detta exempel hamnar i klassen SwitchExample. Koden ovan skapar en Gtk.Application att ha våra komponenter och fönstret i.

Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.

// Bygg programmets användargränssnitt _buildUI: function() {

// Skapa programfönstret this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, border_width: 20, title: "Djurskapare"});

_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 Gtk.ApplicationWindow att stoppa alla våra komponenter i.

# Skapa brytarna

// Skapa bildkomponenten och ställ in dess standardbild this._image = new Gtk.Image ({file: "redfox.png"});

Vi skapar först den Image som brytarna kommer styra. Kom ihåg att en fil med namnet redfox.png behöver finnas i samma katalog som detta program.

// Skapa en etikett för den första brytaren this._flyLabel = new Gtk.Label ({ label: "Få den att flyga", margin_right: 30});

// Skapa den första brytaren och ställ in dess standardposition this._flySwitch = new Gtk.Switch ({active: false}); this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));

// Skapa en etikett för den andra brytaren this._birdLabel = new Gtk.Label ({ label: "Gör den till en fågel", margin_right: 30});

// Skapa den andra brytaren this._birdSwitch = new Gtk.Switch ({active: false}); this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));

Vi använder en Label för att märka varje Switch, och ger dem lite marginal till höger så de inte är ihopträngda just intill Switcharna. Efter det skapar vi Switcharna, och ställer in dem att vara avstängda som standard.

Signalen som en brytare sänder ut när den slås på eller av kallas för notify::active. Efter att vi skapar varje brytare ansluter vi dess notify::active-signal till en funktion som kallas _switchFlip. Om du har flera brytare som gör olika saker, så kan du vilja ansluta dem till olika funktioner, men här används de båda för samma sak: att styra vilken bild som visas av _image.

// Skapa ett rutnät för etiketterna och brytarna under bilden this._UIGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_top: 20});

// Fäst etiketterna och brytarna vid det rutnätet this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1); this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1); this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1); this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);

// Skapa ett huvudrutnät att stoppa både användargränssnittet och bilden i this._mainGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });

// Fäst bilden och användargränssnittsrutnätet vid huvudrutnätet this._mainGrid.attach (this._image, 0, 0, 1, 1); this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);

We create a Grid for the Labels and Switches first, so that we can organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1 Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.

// Lägg till huvudrutnätet till fönstret this._window.add (this._mainGrid);

// Visa fönstret och alla barnkomponenter this._window.show_all(); },

Slutligen lägger vi till vår större Grid till fönstret, och säger sedan till fönstret att visa sig själv och alla komponenterna i det.

# Funktion som hanterar att brytarna ändrar tillstånd

_switchFlip: function() {

// Ändra bilden beroende på vilka brytare som ändrar tillstånd if (this._flySwitch.get_active()) {

if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png");

else this._image.set_from_file ("fruitbat.png"); }

else {

if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png");

else this._image.set_from_file ("redfox.png");

}

},

Each time a Switch is flipped, this function checks to see which of the two Switches are active afterwards, using the Switches' built-in get_active() function. It then changes the Image accordingly. You can change the filenames around as you like, so long as you have pictures to go with them.

# Skapa AboutDialog

_initMenus: function() {

// Build the application's menu so we can have an "About" button let menu = new Gio.Menu(); menu.append("About", 'app.about'); menu.append("Quit",'app.quit'); this.application.set_app_menu(menu);

// Bind the "About" button to the _showAbout() function let aboutAction = new Gio.SimpleAction ({ name: 'about' }); aboutAction.connect('activate', Lang.bind(this, function() { this._showAbout(); })); this.application.add_action(aboutAction);

// Bind the "Quit" button to the function that closes the window let quitAction = new Gio.SimpleAction ({ name: 'quit' }); quitAction.connect('activate', Lang.bind(this, function() { this._window.destroy(); })); this.application.add_action(quitAction); },

The first step is building the GMenu that the "About" button goes into. This is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: About, and Quit.

_showAbout: function () {

// String arrays of the names of the people involved in the project var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg']; var authors = ["GNOME Documentation Team"]; var documenters = ["GNOME Documentation Team"];

// Create the About dialog let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog Example", program_name: "Animal Creator", copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?", artists: artists, authors: authors, documenters: documenters, website: "http://developer.gnome.org", website_label: "GNOME Developer Website" });

// Attach the About dialog to the window aboutDialog.modal = true; aboutDialog.transient_for = this._window;

// Show the About dialog aboutDialog.show();

// Connect the Close button to the destroy signal for the dialog aboutDialog.connect('response', function() { aboutDialog.destroy(); }); }

});

An AboutDialog has a lot of different things you can set, to credit everyone who worked on the application and leave a note to whomever reads it. In this case, the copyright section contains our note and credits the original photographers, while the artists section shows you a list of the photographers with links to the original photos when you click the Credits button. The web URLs put after their names in the array turn their names into clickable links in the Credits section.

// Kör programmet let app = new SwitchExample (); app.application.run (ARGV);

Slutligen skapar vi en ny instans av den slutförda SwitchExample-klassen, och startar programmet.

# Fullständigt kodexempel

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio; const Gtk = imports.gi.Gtk;

class SwitchExample {

// Create the application itself constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jsswitch' });

// Connect 'activate' and 'startup' signals to the callback functions this.application.connect('activate', this._onActivate.bind(this)); this.application.connect('startup', this._onStartup.bind(this)); }

// Callback function for 'activate' signal presents window when active _onActivate() { this._window.present(); }

// Callback function for 'startup' signal creates the menu and builds the UI _onStartup() { this._initMenus(); this._buildUI(); }

// Build the application's UI _buildUI() {

// Create the application window this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, border_width: 20, title: "Animal Creator"});

// Create the image widget and set its default picture this._image = new Gtk.Image ({file: "redfox.png"});

// Create a label for the first switch this._flyLabel = new Gtk.Label ({ label: "Make it fly", margin_right: 30});

// Create the first switch and set its default position this._flySwitch = new Gtk.Switch ({active: false}); this._flySwitch.connect ('notify::active', this._switchFlip.bind(this));

// Create a label for the second switch this._birdLabel = new Gtk.Label ({ label: "Make it a bird", margin_right: 30});

// Create the second switch this._birdSwitch = new Gtk.Switch ({active: false}); this._birdSwitch.connect ('notify::active', this._switchFlip.bind(this));

// Create a grid for the labels and switches beneath the picture this._UIGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_top: 20});

// Attach the labels and switches to that grid this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1); this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1); this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1); this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);

// Create a master grid to put both the UI and the picture into this._mainGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });

// Attach the picture and the UI grid to the master grid this._mainGrid.attach (this._image, 0, 0, 1, 1); this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);

// Add the master grid to the window this._window.add (this._mainGrid);

// Show the window and all child widgets this._window.show_all(); }

_switchFlip() {

// Change the picture depending on which switches are flipped if (this._flySwitch.get_active()) {

if (this._birdSwitch.get_active()) this._image.set_from_file ("muteswan.png"); else this._image.set_from_file ("fruitbat.png"); } else {

if (this._birdSwitch.get_active()) this._image.set_from_file ("gentoopenguin.png"); else this._image.set_from_file ("redfox.png"); } }

_initMenus() {

// Build the application's menu so we can have an "About" button let menu = new Gio.Menu(); menu.append("About", 'app.about'); menu.append("Quit",'app.quit'); this.application.set_app_menu(menu);

// Bind the "About" button to the _showAbout() function let aboutAction = new Gio.SimpleAction ({ name: 'about' }); aboutAction.connect('activate', () => { this._showAbout(); }); this.application.add_action(aboutAction);

// Bind the "Quit" button to the function that closes the window let quitAction = new Gio.SimpleAction ({ name: 'quit' }); quitAction.connect('activate', () => { this._window.destroy(); }); this.application.add_action(quitAction); }

_showAbout() {

// String arrays of the names of the people involved in the project var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png']; var authors = ["GNOME Documentation Team"]; var documenters = ["GNOME Documentation Team"];

// Create the About dialog let aboutDialog = new Gtk.AboutDialog({ title: "AboutDialog Example", program_name: "Animal Creator", copyright: "Copyright \xa9 2012 GNOME Documentation Team\n\nRed fox photo licensed CC-By by Rob Lee\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\nFruit bat photo licensed CC-By by Shek Graham\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\nLinks to the originals are available under Credits.\n\nHave you hugged a penguin today?", artists: artists, authors: authors, documenters: documenters, website: "http://developer.gnome.org", website_label: "GNOME Developer Website" });

// Attach the About dialog to the window aboutDialog.modal = true; aboutDialog.transient_for = this._window;

// Show the About dialog aboutDialog.show();

// Connect the Close button to the destroy signal for the dialog aboutDialog.connect('response', function() { aboutDialog.destroy(); }); } };

// Run the application let app = new SwitchExample (); app.application.run (ARGV);

# Djupgående dokumentation

GMenu

GSimpleAction

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Image

Gtk.Label

Gtk.Switch