CheckButton (JavaScript)

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

#!/usr/bin/gjs

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

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

class CheckButtonExample {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jscheckbutton',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

        // 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 builds the UI
    _onStartup() {
        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,
            default_height: 100,
            default_width: 300,
            border_width: 10,
            title: "CheckButton Example"});

        // Create the check button
        this._button = new Gtk.CheckButton ({label: "Show Title"});
        this._window.add (this._button);

        // Have the check button be checked by default
        this._button.set_active (true);

        // Connect the button to a function that does something when it's toggled
        this._button.connect ("toggled", this._toggledCB.bind(this));

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

    _toggledCB() {

        // Make the window title appear or disappear when the checkbox is toggled
        if (this._button.get_active() == true)
            this._window.set_title ("CheckButton Example");
        else
            this._window.set_title ("");

    }

};

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

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

Gtk.Application

Gtk.ApplicationWindow

Gtk.CheckButton