# CheckButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Ένα κουμπί που μπορεί να σημειωθεί ή να αποσημειωθεί
Δημήτρης Σπίγγος
dmtrs32@gmail.com 2012, 2013

# CheckButton

Αυτή η εφαρμογή έχει ένα CheckButton. Εάν το πλαίσιο είναι σημειωμένο υπαγορεύει εάν η γραμμή τίτλου του παραθύρου εμφανίζει οτιδήποτε.

Ένα CheckButton στέλνει το σήμα "εναλλαγής" όταν σημειώνεται ή αποσημειώνεται. Ενώ είναι σημειωμένο, η ιδιότητα "ενεργή" είναι αληθής. Ενώ εάν δεν είναι, το "ενεργή" ελέγχεται ως ψευδής.

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

#!/usr/bin/gjs

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

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

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

const CheckButtonExample = new Lang.Class({ Name: 'CheckButton Example',

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

// Σύνδεση σημάτων'activate' και 'startup' στις συναρτήσειs επανάκλησης 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 (); },

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

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

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

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

# Δημιουργία του πλήκτρου ελέγχου

// Δημιουργία του κουμπιού ελέγχου this._button = new Gtk.CheckButton ({label: "Show Title"}); this._window.add (this._button);

// Να ελέγχεται το κουμπί ελέγχου από προεπιλογή this._button.set_active (true);

// Σύνδεση του κουμπιού σε μια συνάρτηση που κάνει κάτι όταν εναλλάσσεται this._button.connect ("toggled", Lang.bind (this, this._toggledCB));

Αυτός ο κώδικας δημιουργεί το ίδιο το πλήκτρο ελέγχου. Η ετικέτα δίπλα στο πλήκτρο ελέγχου δημιουργείται δίνοντας στο πλήκτρο ελέγχου την ιδιότητα "label" και αποδίδοντας την τιμή μιας συμβολοσειράς σε αυτή. Επειδή αυτό το πλήκτρο ελέγχου εναλλάσσεται εάν ο τίτλος παραθύρου είναι ενεργός ή όχι και ο τίτλος παραθύρου θα είναι ενεργός στην εκκίνηση, θέλουμε το πλαίσιο να σημειωθεί από προεπιλογή. Όταν ο χρήστης σημειώνει ή ξεσημειώνει το πλαίσιο, καλούμε τη συνάρτηση _toggledCB.

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

Αυτός ο κώδικας τελειώνει δημιουργώντας τη γραφική διεπαφή, λέγοντας στο παράθυρο να εμφανίσει τον εαυτό του και όλα τα θυγατρικά γραφικά συστατικά (που είναι μόνο το πλήκτρο ελέγχου σε αυτήν την περίπτωση).

# Η συνάρτηση που χειρίζεται την εναλλαγή του πλαισίου ελέγχου

_toggledCB: function () {

// Εμφάνιση του τίτλου του παραθύρου ή εξαφάνιση όταν το πλαίσιο ελέγχου εναλλάσσεται if (this._button.get_active() == true) this._window.set_title ("CheckButton Example"); else this._window.set_title ("");

}

});

Εάν το πλήκτρο ελέγχου εναλλάσσεται από ενεργό σε ανενεργό, θέλουμε ο τίτλος του παραθύρου να εξαφανιστεί. Εάν εναλλάσσεται από ανενεργό σε ενεργό, το θέλουμε να επανεμφανίζεται. Μπορούμε να πούμε με ποιο τρόπο εναλλάχτηκε δοκιμάζοντας να δούμε εάν είναι ενεργό (σημειωμένο) ή όχι κατόπιν. Μια απλή πρόταση if / else που καλεί τη μέθοδο get_active() του πλήκτρου ελέγχου θα δουλέψει για αυτό.

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

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

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

#!/usr/bin/gjs

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

const CheckButtonExample = new Lang.Class({ Name: 'CheckButton Example',

// Δημιουργία της εφαρμογής αυτής καθεαυτής _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jscheckbutton', 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: 100, default_width: 300, border_width: 10, title: "CheckButton Example"});

// Δημιουργία του κουμπιού ελέγχου this._button = new Gtk.CheckButton ({label: "Show Title"}); this._window.add (this._button);

// Να ελέγχεται το κουμπί ελέγχου από προεπιλογή this._button.set_active (true);

// Σύνδεση του κουμπιού με μια συνάρτηση που κάνει κάτι όταν εναλλάσσεται this._button.connect ("toggled", Lang.bind (this, this._toggledCB));

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

_toggledCB: function () {

// Εμφάνιση ή εξαφάνιση του τίτλου του παραθύρου όταν το πλαίσιο ελέγχου εναλλάσσεται if (this._button.get_active() == true) this._window.set_title ("CheckButton Example"); else this._window.set_title ("");

}

});

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

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

Gtk.Application

Gtk.ApplicationWindow

Gtk.CheckButton