# Κουμπί εναλλαγής (ToggleButton) (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Παραμένει πατημένο μέχρι να το πατήσετε ξανά
Δημήτρης Σπίγγος
dmtrs32@gmail.com 2012, 2013

# Κουμπί εναλλαγής (ToggleButton)

Ένα κουμπί εναλλαγής (ToggleButton) είναι σαν ένα κανονικό κουμπί, εκτός από το ότι παραμένει πατημένο όταν το πατάτε. Μπορείτε να το χρησιμοποιήσετε σαν έναν διακόπτη ναι/όχι, για να ελέγξετε πράγματα όπως τον μετρητή σε αυτό το παράδειγμα.

Μια μέθοδος get_active του ToggleButton επιστρέφει αληθές εάν πατηθεί και ψευδές εάν δεν πατηθεί. Η μέθοδος του set_active χρησιμοποιείται εάν θέλετε να αλλάξετε την κατάσταση του χωρίς να χρειάζεται να το πατήσετε. Όταν αλλάζει η κατάσταση από πατημένο σε αναδυόμενο και αντίστροφα, στέλνει το σήμα "αλλαγμένο", που μπορείτε να συνδέσετε με μια συνάρτηση για να κάνει κάτι.

# Βιβλιοθήκες για εισαγωγή

#!/usr/bin/gjs

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

Αυτές είναι οι βιβλιοθήκες που χρειαζόμαστε να εισάγουμε αυτήν την εφαρμογή για να εκτελεστεί. Να θυμόσαστε ότι η γραμμή που λέει στο GNOME ότι χρησιμοποιούμε Gjs χρειάζεται πάντοτε να πάει στην αρχή.

# Δημιουργία του παραθύρου εφαρμογής

const ToggleButtonExample = new Lang.Class({ Name: 'ToggleButton Example',

// Δημιουργία της εφαρμογής αυτής καθεαυτής _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jstogglebutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

// Σύνδεση των σημάτων 'activate' και 'startup'με τις συναρτήσεις επανάκλησης this.application.connect('activate', Lang.bind(this, this._onActivate)); this.application.connect('startup', Lang.bind(this, this._onStartup)); },

// Η συνάρτηση επανάκλησης για το σήμα 'activate' παρουσιάζει ένα παράθυρο όταν είναι ενεργή _onActivate: function() { this._window.present(); },

// Η συνάρτηση επανάκλησης για το σήμα 'startup' δομεί τη διεπαφή χρήστη _onStartup: function() { this._buildUI (); },

Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση RadioButtonExample. Ο παραπάνω κώδικας δημιουργεί μια Gtk.Application για να μπουν μέσα τα γραφικά συστατικά μας και τα παράθυρα.

// Δόμηση της διεπαφής χρήστη της εφαρμογής _buildUI: function() {

// Δημιουργία του παραθύρου της εφαρμογής this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 300, default_width: 300, border_width: 30, title: "ToggleButton Example"});

Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο Gtk.ApplicationWindow για να βάλουμε μέσα τα γραφικά συστατικά μας.

# Δημιουργία του κουμπιού εναλλαγής (ToggleButton) και άλλων γραφικών συστατικών

// Δημιοργία του μετρητή που το κουμπί σταματά και αρχίζει this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

Θέλουμε αυτός ο μετρητής να επεκταθεί κάθετα και οριζόντια, για να καταλάβει όσο το δυνατό περισσότερο χώρο μέσα στο παράθυρο.

// Δημιουργία του κουμπιού εναλλαγής που ξεκινά και σταματά τον μετρητή this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"}); this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));

Η δημιουργία ενός ToggleButton είναι παρεμφερής με τη δημιουργία ενός κανονικού κουμπιού. Η μεγαλύτερη διαφορά είναι ότι χειρίζεστε ένα "αλλαγμένο" σήμα αντί για ένα "πατημένο" σήμα. Αυτός ο κώδικας συνδέει τη συνάρτηση _onToggle με αυτό το σήμα, έτσι ώστε καλείται όποτε το ToggleButton μας εναλλάσσεται.

// Δημιουργία ενός πλέγματος και τοποθέτηση όλων μέσα του 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);

Εδώ δημιουργούμε ένα απλό πλέγμα για να οργανώσουμε μέσα του όλα, έπειτα επισυνάπτουμε τον μετρητή και το ToggleButton σε αυτό.

// Προσθήκη του πλέγματος στο παράθυρο this._window.add (this._grid);

// Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών συστατικών this._window.show_all(); },

Τώρα προσθέτουμε το πλέγμα στο παράθυρο και λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και τα θυγατρικά γραφικά συστατικά όταν η εφαρμογή ξεκινά.

# Κάνοντας να συμβεί κάτι όταν το ToggleButton εναλλάσσεται

_onToggle: function() {

// Έναρξη ή παύση του μετρητή if (this._toggleButton.get_active ()) this._spinner.start (); else this._spinner.stop ();

}

});

Όποτε κάποιος εναλλάσσει το κουμπί, αυτή η συνάρτηση ελέγχει ποια είναι η κατάστασή του κατόπιν χρησιμοποιώντας get_active και ξεκινά ή σταματά τον μετρητή ανάλογα. Το θέλουμε μόνο να περιστραφεί ενώ το κουμπί είναι πατημένο, έτσι εάν η get_active επιστρέφει αληθές αρχίζουμε τον μετρητή. Αλλιώς, του λέμε να σταματήσει.

// Εκτέλεση της εφαρμογής let app = new ToggleButtonExample (); app.application.run (ARGV);

Τελικά, δημιουργούμε ένα νέο παράδειγμα της τελειωμένης κλάσης RadioButtonExample και εκτελούμε την εφαρμογή.

# Δείγμα πλήρους κώδικα

#!/usr/bin/gjs

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

const ToggleButtonExample = new Lang.Class({ Name: 'ToggleButton Example',

// Δημιουργία της εφαρμογής αυτής καθεαυτής _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jstogglebutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

// Σύνδεση των σημάτων 'activate' και 'startup' με τις συναρτήσεις επανάκλησης this.application.connect('activate', Lang.bind(this, this._onActivate)); this.application.connect('startup', Lang.bind(this, this._onStartup)); },

// Η συνάρτηση επανάκλησης για το σήμα 'activate' παρουσιάζει παράθυρο όταν είναι ενεργή _onActivate: function() { this._window.present(); },

// Η συνάρτηση επανάκλησης για το σήμα 'startup' δομεί τη διεπαφή χρήστη _onStartup: function() { this._buildUI (); },

// Δόμηση της διεπαφής χρήστη της εφαρμογής _buildUI: function() {

// Δημιουργία του παραθύρου της εφαρμογής this._window = new Gtk.ApplicationWindow({ application: this.application, window_position: Gtk.WindowPosition.CENTER, default_height: 300, default_width: 300, border_width: 30, title: "ToggleButton Example"});

// Δημιουργία του μετρητή που το κουμπί σταματά και ξεκινά this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});

// Δημιουργία του κουμπιού εναλλαγής που ξεκινά και σταματά τον μετρητή this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"}); this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));

// Δημιουργία ενός πλέγματος και τοποθέτηση όλων μέσα του 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);

// Προσθήκη του πλέγματος στο παράθυρο this._window.add (this._grid);

// Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών συστατικών this._window.show_all(); },

_onToggle: function() {

// Έναρξη ή παύση του μετρητή if (this._toggleButton.get_active ()) this._spinner.start (); else this._spinner.stop ();

}

});

// Εκτέλεση της εφαρμογής let app = new ToggleButtonExample (); app.application.run (ARGV);

# Τεκμηρίωση σε βάθος

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Spinner

Gtk.ToggleButton