Κουμπί αυξομείωσης (SpinButton) (JavaScript)

Ένα κουμπί περιστροφής (SpinButton) δεν σχετίζεται με έναν Μετρητή (Spinner). Είναι ένα πεδίο εισαγωγής κειμένου που δέχεται μόνο αριθμούς και οι οποίοι έχουν κουμπιά συν και πλην για να σας επιτρέψουν την αλλαγή της τιμής χωρίς να πρέπει να πληκτρολογήσετε κάτι.

Χρησιμοποιείται άριστα όταν είναι φανερό ότι μόνο ένας αριθμός μπορεί να μπει σε αυτό. Σε αυτό το παράδειγμα, δύο SpinButtons χρησιμοποιούνται για τον αριθμό από γατάκια και τον αριθμό των κονσερβών τόννου που τους δίνονται.

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


#!/usr/bin/gjs

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

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

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


const SpinButtonExample = new Lang.Class({
    Name: 'SpinButton Example',

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

    // Σύνδεση των σημάτων '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 ();
    },

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


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

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

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

Δημιουργία των κουμπιών περιστροφής (SpinButtons)


        // Δημιουργία του πρώτου κουμπιού περιστροφής χρησιμοποιώντας μια συνάρτηση
        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
        this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));

Μπορούμε να χρησιμοποιήσουμε τη συνάρτηση new_with_range για τη δημιουργία ενός νέου SpinButton γρήγορα. Η πρώτη του παράμετρος είναι η αρχική τιμή του SpinButton, η δεύτερη του είναι η μέγιστη τιμή και η τρίτη του είναι πόσο θα αυξηθεί όταν πατιούνται τα κουμπιά συν και πλην.

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


        // Δημιουργία μιας ρύθμισης για χρήση με το δεύτερο κουμπί περιστροφής
        this._adjustment = new Gtk.Adjustment ({
            value: 1,
            lower: 0,
            upper: 9001,
            step_increment: 1,
            page_increment: 10 });

        // Δημιουργία του δεύτερου κουμπιού περιστροφής
        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
        this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));

        // this._tuna.set_digits (1);
        // this._tuna.set_wrap (true);

Εάν θέλετε περισσότερο λεπτομερή έλεγχο σε ένα κουμπί περιστροφής (SpinButton), ή θέλετε να δημιουργήσετε μια ομάδα κουμπιών περιστροφής που όλα χρησιμοποιούν τις ίδιες παραμέτρους, μπορείτε να δημιουργήσετε ένα αντικείμενο που λέγεται Adjustment. Έπειτα μπορείτε να χρησιμοποιήσετε αυτό το αντικείμενο ως μια νέα ιδιότητα ρύθμισης του κουμπιού περιστροφής και ορίζει όλες τις τιμές μονομιάς. Κατόπιν, μπορείτε να αλλάξετε όλα τα κουμπιά περιστροφής που χρησιμοποιούν αυτήν τη ρύθμιση αλλάζοντας τις ιδιότητες του αντικειμένου ρύθμισης.

Οι σχολιασμένες γραμμές εδώ εμφανίζουν πράγματα που μπορείτε να κάνετε για προσαρμογή του κουμπιού περιστροφής σας σας. Μπορείτε να ορίσετε τον αριθμό των ψηφίων μετά την δεκαδική υποδιαστολή, για παράδειγμα, ή να του πείτε να αναδιπλώσει τον αριθμό εάν ξεπεράσει το άνω ή κάτω όριο που ορίσατε.

Για χάρη των γατιών, παρακαλώ μην χρησιμοποιήσετε set_digits που επιτρέπει δεκαδικό αριθμό γατιών.

Δημιουργία της υπόλοιπης διεπαφής χρήστη


        // Δημιουργία των ετικετών κειμένου που πάνε με τα κουμπιά περιστροφής
        this._startLabel = new Gtk.Label ({ label: "There are " });
        this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
        this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
        this._lastLabel = new Gtk.Label ({
            label: "That's " + this.perKitten + " can(s) of tuna per kitten." });

Δημιουργούμε κάθε ετικέτα ξεχωριστά και έπειτα τις συνδέουμε μαζί με τα κουμπιά περιστροφής. Η τελευταία ετικέτα χρειάζεται να εμφανίσει τον αριθμό των κονσερβών τόννου ανά γατί, έτσι έχει μια μεταβλητή στη μέση, που αντιστοιχεί σε μια εξίσωση που χρησιμοποιεί τις συναρτήσεις get_value των SpinButtons για την εύρεση του ορισμού τους. Η μέθοδος στρογγύλευσης της μαθηματικής συνάρτησης του JavaScript χρησιμοποιείται για στρογγύλευση του αριθμού των κονσερβών ανά γατί στον πλησιέστερο κάτω ακέραιο αριθμό.


        // Δημιουργία ενός πλέγματος για τοποθέτηση μέσα του των κουμπιών περιστροφής και των ετικετών τους
        this._spinGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_bottom: 20 });

        // Προσάρτηση όλων στο πλέγμα
        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);

        // Δημιουργία ενός κύριου πλέγματος για να το κρατήσει και της τελευταίας ετικέτας
        this._mainGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });

        // Προσάρτηση του μικρότερου πλέγματος και της τελευταίας ετικέτας στο κύριο πλέγμα
        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

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

Δεν υπάρχει εσφαλμένος τρόπος οργάνωσης των πραγμάτων στα πλέγματα, εφόσον σας αρέσει όπως προκύπτει. Σε αυτήν την περίπτωση, το κορυφαίο πλέγμα έχει ένα περιθώριο στο τέλος για να κρατηθεί σε ομοιόμορφη απόσταση από την ετικέτα τέλους και η ετικέτα τέλους είναι μέσα σε ένα ξεχωριστό πλέγμα έτσι ώστε να κεντραριστεί σχετικά με τις ετικέτες και τα κουμπιά περιστροφής στην κορυφή.


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

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

Τελικά, προσθέτουμε το μεγαλύτερο πλέγμα στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και όλα τα γραφικά στοιχεία μέσα του.

Η συνάρτηση που χειρίζεται τις αριθμητικές τιμές των κουμπιών περιστροφής ρυθμίστηκε


    _newValue: function () {

        // Ενημέρωση της ετικέτας που εμφανίζει πόσα κουτιά υπάρχουν ανά γατάκι 
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
        this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");

    }

});

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


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

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

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

#!/usr/bin/gjs

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

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

class SpinButtonExample {

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

        // 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,
            border_width: 20,
            title: "Kitten Feeder"});

        // Create the first spinbutton using a function
        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
        this._kittens.connect ("value-changed", this._newValue.bind(this));

        // Create an adjustment to use for the second spinbutton
        this._adjustment = new Gtk.Adjustment ({
            value: 1,
            lower: 0,
            upper: 9001,
            step_increment: 1,
            page_increment: 10 });

        // Create the second spinbutton
        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });
        this._tuna.connect ("value-changed", this._newValue.bind(this));

        // this._tuna.set_digits (1);
        // this._tuna.set_wrap (true);

        // Create the text labels to go with the spinbuttons
        this._startLabel = new Gtk.Label ({ label: "There are " });
        this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
        this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."});
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));
        this._lastLabel = new Gtk.Label ({
            label: "That's " + this.perKitten + " can(s) of tuna per kitten." });

        // Create a grid to put the spinbuttons and their labels in
        this._spinGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_bottom: 20 });

        // Attach everything to the grid
        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);
        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);
        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);
        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);
        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);

        // Create a main grid to hold it and the last label
        this._mainGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER });

        // Attach the smaller grid and the last label to the main grid
        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);
        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

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

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

    _newValue() {
        // Update the label which shows how many cans there are per kitten
        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))
        this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");
    }
};

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

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

Gtk.Adjustment

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Label

Gtk.SpinButton