# Κλίμακα (JavaScript)

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

# Κλίμακα

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

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

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

#!/usr/bin/gjs

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

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

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

const ScaleExample = new Lang.Class({ Name: 'Scale Example',

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

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

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

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

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

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

# Δημιουργία των κλιμάκων

// Δημιουργία της οριζόντιας κλίμακας this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0); this._hScale.set_valign (Gtk.Align.START); this._hScale.set_value (50); this._hScale.set_digits (0); // this._hScale.set_draw_value (false);

Η μέθοδος new_with_range είναι ένας τρόπος δημιουργίας ενός νέου γραφικού συστατικού κλίμακας. Οι παράμετροι που παίρνει είναι μια Gtk.Orientation, η ελάχιστη τιμή, η μέγιστη τιμή και η αύξηση για ένα μόνο βήμα. Κατόπιν χρησιμοποιούμε τις μεθόδους κλίμακας για να ορίσουμε την αρχική της τιμή και πόσες δεκαδικές θέσεις διατρέχει. Επίσης ορίζουμε την κάθετη της στοίχιση σε αυτήν την περίπτωση, για τον έλεγχο πού εμφανίζεται στο παράθυρο.

Μπορούμε να χρησιμοποιήσουμε τη μέθοδο set_draw_value για να του πούμε εάν θα εμφανίσει ή όχι τον αριθμό δίπλα στην κινητή κλίμακα. Σχολιάζεται σε αυτό το παράδειγμα.

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

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

// Δημιουργία μιας κάθετης κλίμακας χρησιμοποιώντας την προσαρμογή που μόλις φτιάξαμε this._vScale = new Gtk.Scale ({ orientation: Gtk.Orientation.VERTICAL, adjustment: this._adjustment, digits: 0, // draw_value: false, margin_left: 10 });

Εδώ δημιουργούμε ένα νέο αντικείμενο κλίμακας χρησιμοποιώντας _adjustment ως ιδιότητα "adjustment". Αυτό είναι μια μεγάλη συντόμευση. Πρέπει ακόμα να του πούμε να στρογγυλέψει τις δεκαδικές θέσεις, όμως. Σημειώστε ότι η ιδιότητα draw_value είναι σχολιασμένη· έτσι του λέτε να μην εμφανίσει τον αριθμό δίπλα στην κλίμακα όταν δημιουργείτε μία κλίμακα με αυτόν τον τρόπο.

// Δημιουργία της ετικέτας που εμφανίζει το γινόμενο των δύο τιμών this._product = (this._hScale.get_value() * this._vScale.get_value()); this._label = new Gtk.Label ({ label: (String(this._product) + " penguins on the iceberg."), height_request: 200, width_request: 200, wrap: true});

// Σύνδεση των δύο κλιμάκων με συναρτήσεις που επανυπολογίζουν την ετικέτα this._hScale.connect ("value-changed", Lang.bind (this, this._recalc)); this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

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

Αφού δημιουργήσουμε την ετικέτα, συνδέουμε τα σήματα "value-changed" των δύο κλιμάκων στο _recalc, μια συνάρτηση που θα ξαναϋπολογίσει τον αριθμό των πιγκουίνων στο παγόβουνο και δίνει ένα νέο μήνυμα.

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

// Προσάρτηση όλων στο πλέγμα this._UIGrid.attach (this._label, 0, 0, 1, 1); this._UIGrid.attach (this._hScale, 0, 1, 1, 1); this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

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

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

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

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

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

_recalc: function() {

// Υπολογισμός του γινομένου των δύο τιμών των κλιμάκων var product = (this._hScale.get_value() * this._vScale.get_value());

// Δημιουργία μιας κενής γραμμής σχολίου σε περίπτωση που δεν υπάρχει ένα χαζό σχόλιο να γίνει var comment = "";

// Δημιουργία ενός χαζού σχολίου με βάση τον αριθμό των πιγκουίνων if (product > 9000) { comment = "It's over 9000!"; } else if (product < 1000 && product > 0) { comment = "They're getting lonely."; } else if (product == 0) { comment = "They're all gone ..."; } else comment = "";

// Νέο κείμενο του Set ._label this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

}

});

Να θυμάστε, μπορούμε να πάρουμε μια τιμή κλίμακας χρησιμοποιώντας τη μέθοδο του get_value. Εδώ απλά ξαναϋπολογίζουμε ποιο είναι το γινόμενο των δύο τιμών μετά τη μετακίνηση μιας από τις κλίμακες, προσθέτουμε ένα χαζό μήνυμα ανάλογα με το πόσοι πιγκουίνοι απέμειναν και αλλάζουμε τη διατύπωση στην _label για να δείξουμε το νέο αριθμό και το μήνυμα.

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

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

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

#!/usr/bin/gjs

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

const ScaleExample = new Lang.Class({ Name: 'Scale Example',

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

// Σύνδεση των σημάτων '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, border_width: 20, title: "Birds on a Floe"});

// Δημιουργία της οριζόντιας κλίμακας this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0); this._hScale.set_valign (Gtk.Align.START); this._hScale.set_value (50); this._hScale.set_digits (0); // this._hScale.set_draw_value (false);

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

// Δημιουργία μιας κάθετης κλίμακας χρησιμοποιώντας τη ρύθμιση που μόλις κάναμε this._vScale = new Gtk.Scale ({ orientation: Gtk.Orientation.VERTICAL, adjustment: this._adjustment, digits: 0, // draw_value: false, margin_left: 10 });

// Δημιουργία της ετικέτας που εμφανίζει το γινόμενο των δύο τιμών this._product = (this._hScale.get_value() * this._vScale.get_value()); this._label = new Gtk.Label ({ label: (String(this._product) + " penguins on the iceberg."), height_request: 200, width_request: 200, wrap: true});

// Σύνδεση των δύο κλιμάκων με τις συναρτήσεις που επανυπολογίζουν την ετικέτα this._hScale.connect ("value-changed", Lang.bind (this, this._recalc)); this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

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

// Προσάρτηση όλων στο πλέγμα this._UIGrid.attach (this._label, 0, 0, 1, 1); this._UIGrid.attach (this._hScale, 0, 1, 1, 1); this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

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

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

_recalc: function() {

// Υπολογισμός του γινομένου των δύο τιμών των κλιμάκων var product = (this._hScale.get_value() * this._vScale.get_value());

// Δημιουργία μιας κενής γραμμής σχολίου στην περίπτωση που δεν υπάρχει ένα χαζό σχόλιο να γίνει var comment = "";

// Δημιουργία ενός χαζού σχολίου με βάση τον αριθμό των πιγκουίνων if (product > 9000) { comment = "It's over 9000!"; } else if (product < 1000 && product > 0) { comment = "They're getting lonely."; } else if (product == 0) { comment = "They're all gone ..."; } else comment = "";

// Νέο κείμενο του Set ._label this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

}

});

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

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

Gtk.Adjustment

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Label

Gtk.Scale